/* --- CSS RESET --- */
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
   box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
   margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
   font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
}

/* --- CSS RESET --- */

* {
   --gray-50: #fafafa;
   --gray-100: #f5f5f5;
   --gray-200: #e5e5e5;
   --gray-300: #d4d4d4;
   --gray-400: #a3a3a3;
   --gray-500: #737373;
   --gray-600: #525252;
   --gray-700: #404040;
   --gray-800: #262626;
   --gray-900: #171717;
   --gray-950: #0a0a0a;
}

::selection {
   background: #5d2a5f;
   color: var(--gray-50);
}

body {
   font-family: "acumin-pro", Helvetica, sans-serif;
   background-color: var(--gray-50);
   height: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.navbar-container {
   color: var(--gray-50);
}

.navbar-top {
   background-color: var(--gray-900);
   padding: 4px 16px;
   display: flex;
   width: 100%;
   color: var(--gray-50);
   justify-content: space-between;
   align-items: center;
}

.navbar-top-left {
   display: flex;
   flex-direction: row;
   gap: 2px;
   align-items: center;
}

.navbar-bottom {
   display: flex;
   flex-direction: row;
   padding: 8px 16px;
   color: var(--gray-950);
   border-bottom: var(--gray-300) 2px solid;
   justify-content: space-between;
   align-items: center;
}

@media only screen and (max-width: 800px) {
   .navbar-bottom {
      flex-direction: column;
      justify-content: center;
      gap: 8px;
   }

   .group-selector-container {
      justify-content: center !important;
   }

   .display-selector-container {
      justify-content: center !important;
   }

   .group-label {
      display: none;
   }

   .sub-logo {
      display: none;
   }
}

.logo {
   height: 30px;
}

.sub-logo {
   height: 24px;
   margin-top: 2px;
}

.logo-container {
   display: flex; 
   flex-direction: row; 
   align-items: end; 
   gap: 8px;
   padding: 4px 0px;
}

.new-tag {
   color: #3c4cb0; 
   font-weight: 700; 
   border: 1px solid #3c4cb0; 
   padding: 0px 4px; 
   margin-left: 2px;
   border-radius: 4px;
   font-size: 12px;
   margin-bottom: 6px;
}

.beta-tag {
   color: #5d2a5f; 
   font-weight: 700; 
   border: 1px solid #5d2a5f; 
   padding: 0px 4px; 
   margin-left: 2px;
   border-radius: 4px;
   font-size: 12px;
   margin-bottom: 6px;
}

.account-dropdown-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.account-dropdown-button {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
   background: transparent;
   border: none;
   color: var(--gray-50);
   cursor: pointer;
   font-size: 14px;
   font-weight: 700;
   padding: 4px 12px;
   padding-right: 8px;
   border-radius: 4px;
}

.account-dropdown-button:hover {
   background: var(--gray-700);
}

.account-dropdown-card {
   display: none;
   position: absolute;
   top: calc(100% + 6px);
   right: -16px;
   width: 200px;
   z-index: 9999;
   background-color: var(--gray-900);
   color: var(--gray-50);
   padding: 8px 8px;
   font-size: 12px;
   font-weight: 700;
}

.account-dropdown-card a {
   color: var(--gray-50);
   text-decoration: none;
}

.account-dropdown-card.show {
   display: flex;
   flex-direction: column;
   gap: 8px;
   text-align: left;
}

.account-dropdown-carat {
   height: 16px;
   transition: transform 0.2s ease-in-out;
}

.account-dropdown-carat.rotated {
   transform: rotate(180deg);
}

.notification-container {
   display: flex;
}

.nav-button {
   background: transparent;
   border: none;
   color: var(--gray-50);
   cursor: pointer;
   padding: 6px;
   border-radius: 4px;
   position: relative;
}

.nav-button:hover {
   background: var(--gray-700);
}

.text-button {
   background: transparent;
   border: none;
   color: var(--gray-50);
   cursor: pointer;
   padding: 6px 12px;
   border-radius: 4px;
   position: relative;
}

.text-button:hover {
   background: var(--gray-700);
}

.notification-dot {
   position: absolute;
   right: 2px;
   top: 2px;
   width: 6px;
   height: 6px;
   background-color: red;
   border-radius: 100%;
   z-index: 20;
}

.group-selector-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   flex: 1;
   align-items: center;
   gap: 8px;
}

.group-selector-dropdown {
   height: 32px;
   border: var(--gray-500) 1px solid;
   border-radius: 4px;
   padding-left: 6px;
}

.group-selector-label {
   font-weight: 700;
   font-size: 12px;
}

.group-label {
   margin-top: 2px;
   font-size: 20px;
   font-weight: 700;
}

.display-selector-container {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
   flex: 1;
}

.display-selector-option {
   color: var(--gray-500);
   font-weight: 700;
   font-size: 12px;
   text-decoration: none;
   padding: 6px 12px;
   position: relative;
   border-radius: 4px;
   white-space: nowrap;
}


@media only screen and (max-width: 950px) {
   .display-selector-option {
      white-space: wrap;
   }
}

.display-selector-option:hover {
   color: var(--gray-700);
   background-color: var(--gray-200);
}

.display-selector-settings {
   color: var(--gray-500);
   font-weight: 700;
   font-size: 12px;
   border: 1px solid var(--gray-500);
   padding: 4px 8px;
   border-radius: 4px;
   text-decoration: none;
   margin-left: 8px;
}

.display-selector-settings:hover {
   color: var(--gray-700);
   background-color: var(--gray-200);
}

.display-selector-option.selected {
   color: var(--gray-950);
}

.display-selector-option.selected::after {
   content: '';
   position: absolute;
   bottom: 0; 
   left: 5%; 
   width: 90%; 
   border-bottom: 1px solid var(--gray-950);
}

.display-selector-settings.selected {
   color: var(--gray-950);
   border: 1px solid var(--gray-950);
}

.main-container {
   display: flex;
   position: relative;
   width: 100%;
   flex: 1;
}

.display-iframe {
   width: 100vw;
   min-height: 70vh;
   z-index: 2;
   flex: 1;
   border: none;
}

.loading-container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 4px;

   width: 100%;
   height:100%;
   z-index: 2000;
   background-color: var(--gray-200);
}

.loading-container h3 {
   margin-top: 8px;
}

.loading-container h4 {
   color: var(--gray-500);
   margin-top: -4px;
   opacity: 0;
   transition: opacity 1s ease-in;
}

.loading-spinner {
   height: 40px;
   width: 40px;
   animation: spin 2s linear infinite;
   transform-origin: center center; /* Ensures the SVG rotates around its center */
}

@keyframes spin {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}

@keyframes fadeIn {
   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }
}