* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: -apple-system, BlinkMacSystemFont,
     "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans",
     "Droid Sans", "Helvetica Neue", sans-serif;
   background: #f8f9fa;
   color: #3f4e50;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   color: #3f4e50;
 }


 .sidebar {
   position: fixed;
   top: 40px;
   left: 0;
   bottom: 0;
   width: 225px;
   background: #fff;
   color: #333;
   padding: 10px 5px;
   display: flex;
   flex-direction: column;
   transition: width 0.4s ease, transform 0.4s ease;
   overflow-y: auto;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
   z-index: 1000;
   overflow-x: hidden;
   min-height: calc(100vh - 31px);
 }

 .sidebar.collapsed {
   width: 63px;
   padding: 10px 9px;
 }

 .sidebar .menu {
   list-style: none;
   flex-grow: 1;
   text-align: left;
 }

 .menu-item {
   cursor: pointer;
   transition: background 0.3s ease, padding 0.3s ease;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   min-height: 48px;
   position: relative;
   border-radius: 5px;
 }

 .menu-item a {
   padding: 10px 10px 10px 15px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
   transition: background 0.3s ease, padding 0.3s ease;
   font-size: 14px;
 }

 .menu-item.submenu-toggle a {
   justify-content: space-between;
 }

 .menu-item i {
   margin-right: 10px;
   min-width: 20px;
   text-align: center;
 }

 .menu-item span {
   transition: opacity 0.3s;
   min-width: max-content;
 }

 .menu-item.active {
   background: #e4e4e4;
 }

 .menu-item.active::before {
   content: '';
   position: absolute;
   display: block;
   height: 84%;
   border-radius: 10px;
   width: 4px;
   left: 4px;
   background-color: #757575;
 }

 .submenu li a.active::before {
   content: '';
   position: absolute;
   display: block;
   height: 2px;
   border-radius: 10px;
   width: 10px;
   left: 12px;
   background-color: #757575;
   top: 50%;
   transform: translateY(-50%);
 }

 .menu-item:hover {
   background: #e4e4e4;
 }

 .submenu {
   list-style: none;
   margin: 3px 0;
   margin-left: 20px;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
 }

 .submenu li a {
   padding: 10px;
   cursor: pointer;
   font-size: 14px;
   padding-left: 30px;
   min-height: 40px;
   width: 100%;
   display: block;
   border-radius: 5px;
   position: relative;
 }

 .submenu li a:hover,
 .submenu li a.active {
   background: #ececec;
 }

 .submenu li {
   margin-bottom: 2px;
 }

 .toggle-arrow-sec {
   position: sticky;
   bottom: 0;
   left: 0;
   min-height: 46px;
   background-color: #fff;
   width: 100%;
 }

 .toggle-arrow {
   position: absolute;
   bottom: 5px;
   left: 90%;
   transform: translateX(-90%);
   border-radius: 50%;
   width: 36px;
   min-height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: transform 0.3s;
 }

 .toggle-arrow:hover {
   background: #f8f9f9;
 }

 .sidebar.collapsed .toggle-arrow {
   transform: translateX(-100%);
 }

 .topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 40px;
   background: #003034;
   color: white;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
   z-index: 1001;
 }

 .topbar .left {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .topbar .logo img {
   height: 30px;
   margin-right: 40px;
 }

 .workspace-dropdown-wrap {
   position: relative;
 }

 .workspace {
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 600;
   font-size: 12px;
 }

 .workspace-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   color: #333;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   display: none;
   flex-direction: column;
   min-width: 160px;
   z-index: 2001;
   animation: fadeSlide 0.3s ease forwards;
   max-height: 480px;
   overflow-y: auto;
   padding: 0 !important;
   padding-bottom: 59px !important;
 }

 .workspace-dropdown .dropdown-item {
   padding: 10px 16px;
   transition: background 0.3s ease;
   cursor: pointer;
   width: max-content;
   min-width: 100%;
 }

 .workspace-dropdown .dropdown-item:hover {
   background: #f0f0f0;
 }

 @keyframes fadeSlide {
   0% {
     opacity: 0;
     transform: translateY(-5px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .topbar .badge {
   background: #ffc107;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 12px;
 }

 .topbar .right {
   display: flex;
   align-items: center;
   gap: 15px;
   position: relative;
 }

 .topbar .dropdown {
   position: absolute;
   top: 35px;
   right: 0;
   background: white;
   color: #333;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   display: none;
   flex-direction: column;
   min-width: 150px;
   overflow: hidden;
   z-index: 2000;
   animation: fadeSlide 0.3s ease forwards;
   padding: 0px;
   cursor: pointer;
   width: max-content;
 }

 .topbar .dropdown a {
   padding: 12px 16px;
   text-decoration: none;
   color: #333;
   transition: background 0.3s;
   width: 100%;
   min-width: max-content;
   font-size: 14px;
 }

 .topbar .dropdown a:hover {
   background: #cad6d8;
 }

 .main {
   margin-left: 225px;
   margin-top: 40px;
   width: calc(100% - 225px);
   transition: all 0.4s ease;
 }

 .sidebar.collapsed~.main {
   margin-left: 63px;
   width: calc(100% - 63px);
 }

 .content {
   padding: 65px 35px;
   background: #fff;
   min-height: calc(100vh - 80px);
   background-color: #f8f9f9;
   width: 100%;
 }

 .sidebar.collapsed .menu-item a {
   padding: 12px 10px;
 }

 .sidebar.collapsed .menu-item span,
 .sidebar.collapsed .invite-btn {
   display: none;
 }

 .sidebar.collapsed .submenu {
   left: 35px;
   position: absolute;
   background: #fff;
   margin-top: -45px;
   box-shadow: -2px 0 20px rgba(0, 0, 0, 0.05);
   border-radius: 5px;
   min-width: 150px;
   visibility: hidden;
 }

 .sidebar.collapsed .submenu li {
   padding: 0px;
   min-width: 120px;
 }

 .sidebar.collapsed .submenu li a {
   font-size: 14px;
   padding-left: 0px;
   min-height: auto;
   padding: 8px 25px;
   position: relative;
   min-width: max-content;
   width: 100%;
   border-radius: 0;
 }

 .sidebar.collapsed .menu-item.active::before,
 .sidebar.collapsed .submenu li a.active::before {
   display: none;
 }

 .sidebar.collapsed .submenu li:last-child {
   margin-bottom: 10px;
 }

 .sidebar.collapsed {
   overflow: visible;
 }

 .submenu-icon.rotate {
   transform: rotate(180deg);
   transition: transform 0.3s;
 }

 .sidebar.collapsed .toggle-arrow i {
   transform: rotate(180deg);
 }

 .sidebar.collapsed .menu-item .submenu-icon {
   display: none;
 }

 .menu-item div {
   display: flex;
   align-items: center;
 }

 .topbar-icons svg {
   width: 24px;
 }

 .breadcrumb-menu {
   width: calc(100% - 225px);
   position: fixed;
   left: 225px;
   top: 40px;
   transition: all 0.2s ease-in-out;
 }

 body.body-slide .breadcrumb-menu {
   width: calc(100% - 63px);
   left: 63px;
 }

 .deployment-save-settings {
   display: flex;
   gap: 10px;
   width: 100%;
   position: sticky;
   transition: all 0.2s ease-in-out;
   right: 60px;
   top: 85px;
   z-index: 10;
   margin: 0 !important;
   justify-content: space-between;
   background: #f8f9f9;
   padding: 5px 0;
   flex-wrap: wrap;
 }

 th {
   background: #fff;
   border-bottom: 1px solid #cad6d8;
   color: #66787a !important;
   font-weight: 600;
   text-align: left
 }

 td {
   color: #66787a !important;
   font-size: 14px;
 }

 .breadcrumb-menu a,
 .breadcrumb-menu span {
   color: #003034;
   font-size: 12px;
 }

 textarea {
   height: 100px;
   resize: none;
 }

 label {
   font-size: 13px;
   color: #66787a;
 }

 input,
 select {
   font-size: 14px !important;
   color: #003034 !important;
   height: 40px;
   border: 1px solid #cad6d8;
   border-radius: 3px !important;
   padding: 5px 8px !important;
 }

 input[type="radio"],
 input[type="checkbox"] {
   height: auto;
 }

 .error-text {
   color: #ff3c3c;
   font-size: 12px;
   font-weight: 600;
   text-align: start;
 }

 .form-control {
   margin: 5px 0 0 !important;
 }

 select {
   background: #ffffff;
   padding: 0 40px 0 15px !important;
   background-image: url(../assets/img/down-arrow.svg);
   background-position: right 15px center;
   background-repeat: no-repeat;
   background-size: auto;
   appearance: none;
   height: 40px;
 }

 #workspaceDropdown {
   min-width: 350px;
 }

 .manage-all-btn {
   position: fixed;
   bottom: 0;
   padding: 12px 16px;
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-top: 1px solid #cad6d8;
   background: #fff;
 }

 .manage-all-btn a {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #0b353b;
   font-size: 14px !important;
   color: #08272b;
   font-weight: 700;
 }

 .manage-all-btn a:hover {
   background: #f8f9f9 !important;
 }

 /* log screen */

 /* #log-container {
   height: 450px;
   padding: 50px 20px;
   box-shadow: 0px 4px 30px 5px #11413D0A;
   background: #003034;
   overflow: auto;
 } */

 .bubble {
   background-color: #ffffff !important;
 }

 .white-container {
   padding: 40px;
   background: #fff;
   box-shadow: 0px 4px 30px 5px #11413D0A;
   border-radius: 20px;
 }

 .mobile-show {
   display: none !important;
 }

 .leaderboard-sec .count-number {
   filter: brightness(0.5);
 }

 .leaderboard-sec:hover .count-number {
   filter: brightness(1);
 }

 body.body-slide .slidebar-open--img {
   display: none;
 }

 .slidebar-close--img {
   display: none;
   transition: all 0.3s ease-in-out;
 }

 body.body-slide .slidebar-close--img {
   display: block;
 }

 body.body-slide img.slidebar-open--img {
   display: none;
 }

 .slidebar-close--img {
   display: none;
   transition: all 0.3s ease-in-out;
 }

 body.body-slide img.slidebar-close--img {
   display: block;
 }

 body.body-slide span.slidebar-open--img {
   display: none !important;
 }

 .slidebar-open--img {
   transition: all 0.3s ease-in-out;
 }

 span.slidebar-close--img {
   display: none !important;
 }

 body.body-slide span.slidebar-close--img {
   display: flex !important;
 }

 li.icon-menu-list {
   /* width: 80%; */
   margin: auto;
   transition: all 0.3s ease-in-out;
   margin-bottom: 20px;
 }

 body.body-slide li.icon-menu-list {
   width: 100%;
 }

 .workspace-icons img {
   width: auto !important;
   height: auto !important;
 }

 .fullscreen-active #log-container {
   height: calc(100% - 90px);
 }


 /* Tooltip style */
 .sidebar .menu-item a {
   position: relative;
   display: flex;
   align-items: center;
 }

 .sidebar.collapsed .menu-item span {
   display: none;
   /* hide text when collapsed */
 }

 .sidebar.collapsed .submenu-toggle a::after {
   display: none;
 }

 .sidebar.collapsed .menu-item a::after {
   content: attr(data-tooltip);
   position: absolute;
   left: 45px;
   top: 50%;
   transform: translateY(-50%);
   background: #003034;
   color: #fff;
   padding: 4px 8px;
   border-radius: 6px;
   font-size: 12px;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: 0.2s ease;
   z-index: 999;
 }

 .sidebar.collapsed .menu-item a:hover::after {
   opacity: 1;
   visibility: visible;
 }

 .menu.header {
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   padding: 6px 20px !important;
   letter-spacing: 0.7px;
   border-bottom: 1px solid #f3f4f6;
   margin-bottom: 6px;
   user-select: none;
   display: none;
 }

 .sidebar.collapsed .menu.header {
   display: block;
 }

 .sidebar.collapsed .submenu {
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px) scaleY(0.95);
   transform-origin: top;
   overflow: hidden;
   transition:
     max-height 0.35s ease,
     opacity 0.25s ease,
     transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* Open state */
 .sidebar.collapsed .submenu.open {
   max-height: 600px;
   opacity: 1;
   transform: translateY(0) scaleY(1);
   visibility: visible;
 }

 .icon-menu-list ::after {
   display: none !important;
 }


 .back-to-top {
   position: fixed;
   bottom: 40px;
   right: 24px;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   background: linear-gradient(135deg, #003034, #1f2937);
   color: white;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(30px) scale(0.9);
   transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1000;
 }

 /* When shown */
 .back-to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
 }

 /* Hover effect */
 .back-to-top:hover {
   transform: scale(1.1);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
 }

 /* Add a subtle glow animation */
 .back-to-top:hover svg {
   animation: pulse 1s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     transform: translateY(0);
     opacity: 1;
   }

   50% {
     transform: translateY(-3px);
     opacity: 0.9;
   }
 }

 .log-container pre,
 #termination-log {
   color: #767676;
   font-size: 14px;
   line-height: 2;
 }


 .avatar-fallback {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   color: #fff;
   font-size: 42px;
   font-weight: 600;
   background: #003034;
 }

 input:autofill {
   background-color: #fff !important;
 }

 .multi-select-field {
   min-height: 100px;
   background: none;
 }

 .multi-select-field option {
   padding: 6px 0;
 }

 .status-select {
   padding: 0 24px 0 8px !important;
   background-position: right 6px center !important;
 }

 @keyframes assign-modal {
   0% {
     transform: scale(0.9);
     opacity: 0;
   }

   50% {
     transform: scale(1.05);
     opacity: 1;
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 .animate-assign-modal {
   animation: assign-modal 0.4s ease-out forwards;
 }

 .active-list {
   color: #fff !important;
 }

 .active-list svg path {
   stroke: #fff;
 }

 #deployment-log {
   margin: 0;
   white-space: pre-line;
   height: 500px;
   word-wrap: break-word;
   font-size: 14px;
 }

 .fullscreen-active #deployment-log {
   height: 100vh !important;
 }

 #log-container {
   padding: 0;
 }

 /* Background for Prism code blocks */
 pre[class*="language-"],
 code[class*="language-"] {
   background-color: #0d1117 !important;
   /* Dark theme like GitHub Dark */
   color: #e6edf3;
   border-radius: 8px;
   padding: 1rem;
   font-family: "Fira Code", monospace;
   text-shadow: none;
 }

 /* Optional: Highlight Ansible custom tokens */
 .token.ansible-ok {
   color: #2ecc71;
 }

 /* Green */
 .token.ansible-changed {
   color: #f1c40f;
 }

 /* Yellow */
 .token.ansible-failed {
   color: #e74c3c;
 }

 /* Red */
 .token.ansible-skipping {
   color: #95a5a6;
 }

 /* Grey */
 .token.ansible-info {
   color: #3498db;
 }

 /* Blue */






 @media screen and (max-width: 991px) {

   .main {
     width: calc(100% - 63px);
     margin-left: 63px;
   }

   .breadcrumb-menu {
     width: calc(100% - 0px);
     left: 0px;
   }

   .content {
     padding: 65px 20px;
   }
 }


 @media screen and (max-width: 767px) {

   header.topbar {
     padding-left: 80px;
   }

   body.body-slide .breadcrumb-menu {
     width: calc(100% - 0px);
     left: 0px;
   }



   .toggle-arrow-sec {
     position: fixed;
     top: 6px;
     bottom: auto;
     width: 26px;
     height: 26px;
     z-index: 1005;
     background: none;
     left: 25px;
     right: auto;
   }

   .topbar .logo img {
     margin-right: 15px;
   }

   .toggle-arrow-sec .toggle-arrow-topbtn {
     width: 26px;
   }

   .toggle-arrow-sec .toggle-arrow-topbtn svg {
     width: 26px;
     height: auto;
   }


   .main {
     width: calc(100% - 0px);
     margin-left: 0px;
     display: block !important;
   }

   .sidebar.collapsed~.main {
     margin-left: 0;
     width: calc(100% - 0px);

   }

   .sidebar {
     transform: translateX(0px);
     padding-bottom: 40px;
   }

   .sidebar.collapsed {
     width: 225px;
     transform: translateX(-240px);
   }

   .sidebar.collapsed .menu-item span,
   .sidebar.collapsed .invite-btn {
     display: block;
   }

   .sidebar.collapsed .menu-item a {
     padding: 10px;
   }

   .mobile-hide {
     display: none !important;
   }

   .mobile-show {
     display: block !important;
   }

   .topbar .left {
     justify-content: space-between;
     width: 100%;
   }

   .content {
     padding: 65px 35px 40px;
   }
 }


 @media screen and (max-width: 500px) {

   header.topbar {
     padding-left: 70px;
   }

   .toggle-arrow-sec {
     left: 20px;
   }

   .content {
     padding: 65px 15px 40px;
     width: 100%;
   }

   .workspace-dropdown {
     position: fixed !important;
     transform: translate(-50%, 0px) !important;
     animation: fadeSlideres 0.3s ease forwards;
     left: 50%;
     right: auto !important;
     top: 45px !important;
   }

   @keyframes fadeSlideres {
     0% {
       opacity: 0;
       transform: translate(-50%, -5px);
     }

     100% {
       opacity: 1;
       transform: translate(-50%, 0px);
     }
   }

   #workspaceDropdown {
     min-width: 300px;
   }

 }