@font-face {
    font-family: 'Montserrat';
    src: url('./Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype'); /* Specify the path to your .ttf font file */
    /* Add additional font properties if needed */
    font-display: swap; /* Specify font loxading behavior */
}
body {
    font-family: 'Montserrat', sans-serif ;
} 
/* Modal styles */
.modal {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    display: flex;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    transition: 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}
.modal-demo {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    transition: 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    display: flex !important;
    align-items: center;

}
.modal-demo.active{
    opacity: 1;
    visibility: visible;
}
.modal.active{
    opacity: 1;
    visibility: visible;
    display: flex;
}
.modal .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 800px;
    width: 80%;
    position: relative;
    border-radius: 10px;
    max-height: 600px;
}
.modal-demo .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 800px;
    width: 80%;
    position: relative;
    border-radius: 10px;
    
}
.flexi{
    display: flex;
    height: 480px;
}
.shead{
display: flex;
    border-bottom: 1px solid #ddd;
    padding-bottom: 7px;
}
.shead h3{
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-left: 20px;
	font-weight: 600;
}
        .modal-sidebar {
            width: 25%;
            padding-right: 10px;
            border-right: 1px solid #ddd;
        }

        .modal-main {
            width: 75%;
            flex: 1;
            overflow-y: auto;
        }



        .shead .close {
            color: #aaa;
            float: right;
            font-size: 17px;
            font-weight: bold;
			position: absolute;
			right: 5px;
			top: 5px;
			height: 20px;
			width: 20px;
			text-align: center;

			
        }

        .shead .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Tab styles */
        .tab {
            overflow: hidden;
        }

        .tab button {
            background-color: inherit;
            display: block;
            width: 100%;
            border: 1px solid transparent;
            color: #000;
            margin-top: 10px;
            border-radius: 40px;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            text-align: left;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Montserrat', sans-serif;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        .tabcontent {
            display: none;
            padding: 6px 12px;
            border-top: none;

        }
#Preferences select,
#modalContent select {
    color: #1a1a1a;
    margin-left: auto;
    border: none;
    font-family: 'Montserrat', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-text-size-adjust: 100%;
    outline: none;
    background-color: transparent;
    padding-right: 1em;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:v="https://vecta.io/nano"><path d="M17,10.2l-5,5-5-5" fill="none" stroke="%23000"/></svg>');
    width: 120px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 2em auto;
    padding-right: 1.5em;
}

#modalContent select {
    margin-left: 10px;
}

#Preferences select:-moz-focusring,
#modalContent select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

#Preferences select::-ms-expand,
#modalContent select::-ms-expand {
    display: none;
}
/*Sheets*/
#Sheets h3{
    display: flex;
    justify-content: center;
    font-weight: 600;
    margin: 10px auto;
}
.tabcontent a{
    text-decoration: none;
    color: #000;
}
.connectbtns{
    display: flex;
    column-gap: 20px;
}
.connectsbtn{
    height: 50px;
    width: 50%;
    border: 1px solid #ddd;
    border-radius: 100px;
    cursor: pointer;
    background-color: #fff;
}
.connectsbtn:last-child{
    background-color: transparent;
}
.connectsbtn img{
    max-height: 60%;
    
}

.addaccounts{
    text-align: center;
}
.addcontinue{
    width: 100%;
    height: 20px;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"/><path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="%231C274C" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-size: 20px;
    background-position: center; 
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.5s;

}
.addcontinue.turns{
    transform: rotate(180deg);
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800"><defs><style> .cls-1 { fill: none; stroke: %231c274c; stroke-linecap: round; stroke-miterlimit: 133.3; stroke-width: 50px; } </style></defs><!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) --><g><g id="Layer_1"><path class="cls-1" d="M500,400h-100M400,400h-100M400,400"/><path class="cls-1" d="M233.3,111.3c49-28.4,106-44.6,166.7-44.6,184.1,0,333.3,149.2,333.3,333.3s-149.2,333.3-333.3,333.3S66.7,584.1,66.7,400s16.2-117.6,44.6-166.7"/></g></g></svg>');
}
.continuebtns.view{
    max-height: 100%;
    opacity: 1;
       margin-top: 10px;
   margin-bottom: 10px;
}
.continuebtns{
    overflow: hidden;
    max-height: 0;
    display: flex;

    column-gap: 10px;
    opacity: 0;
    transition: opacity 0.5s;
}
.continuesbtns{
    height: 40px;
    width: 50%;
    padding: 10px 10px 10px 20px;
    border: 1px solid #ddd;
    border-radius: 100px;
    cursor: pointer;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif ;
    position: relative;
}

.continuesbtns.google::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3Cpath d='M1 1h22v22H1z' fill='none'/%3E%3C/svg%3E");
        background-size: 22px;
    background-position: center; 
    background-repeat: no-repeat;
    width: 45px;
    height: 100%;
}
.continuesbtns.microsoft::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="%23f3f3f3" d="M0 0h23v23H0z"/><path fill="%23f35325" d="M1 1h10v10H1z"/><path fill="%2381bc06" d="M12 1h10v10H12z"/><path fill="%2305a6f0" d="M1 12h10v10H1z"/><path fill="%23ffba08" d="M12 12h10v10H12z"/></svg>');
    background-size: 18px;
    background-position: center; 
    background-repeat: no-repeat;
    width: 40px;
    height: 100%;
}


#accounts-table {
    margin: auto;
    border-collapse: separate; /* Allows border-spacing to work */
    border-spacing: 10px 15px; /* Adjust spacing between rows and columns */
    width: 100%;
}
#accounts-table td:first-child{
    border: 1px solid #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.acc-googlefile, .acc-googleall{
    position: relative;
    padding: 10px 10px 10px 40px;
}
.acc-excel{
    position: relative;
    padding: 10px 10px 10px 40px;
}
.acc-googlefile::before, .acc-googleall::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3Cpath d='M1 1h22v22H1z' fill='none'/%3E%3C/svg%3E");
        background-size: 22px;
    background-position: center; 
    background-repeat: no-repeat;
    width: 40px;
    height: 100%;
}
.acc-excel::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='image-2' fill='none' viewBox='4 2 40 44'%3E%3Ctitle%3EMicrosoft 365 logo (2022)%3C/title%3E%3Cpath d='M20.0842 3.02588L19.8595 3.16179C19.5021 3.37799 19.1654 3.61972 18.8512 3.88385L19.4993 3.42798H25L26 11L21 16L16 19.4754V23.4829C16 26.2819 17.4629 28.8774 19.8574 30.3268L25.1211 33.5129L14 40.0002H11.8551L7.85737 37.5804C5.46286 36.131 4 33.5355 4 30.7365V17.2606C4 14.4607 5.46379 11.8645 7.85952 10.4154L19.8595 3.15687C19.9339 3.11189 20.0088 3.06823 20.0842 3.02588Z' fill='url(%23paint0_radial_2994_8373)'/%3E%3Cpath d='M20.0842 3.02588L19.8595 3.16179C19.5021 3.37799 19.1654 3.61972 18.8512 3.88385L19.4993 3.42798H25L26 11L21 16L16 19.4754V23.4829C16 26.2819 17.4629 28.8774 19.8574 30.3268L25.1211 33.5129L14 40.0002H11.8551L7.85737 37.5804C5.46286 36.131 4 33.5355 4 30.7365V17.2606C4 14.4607 5.46379 11.8645 7.85952 10.4154L19.8595 3.15687C19.9339 3.11189 20.0088 3.06823 20.0842 3.02588Z' fill='url(%23paint1_linear_2994_8373)'/%3E%3Cpath d='M32 19V23.4803C32 26.2793 30.5371 28.8748 28.1426 30.3242L16.1426 37.5878C13.6878 39.0737 10.6335 39.1273 8.1355 37.7487L19.8573 44.844C22.4039 46.3855 25.5959 46.3855 28.1426 44.844L40.1426 37.5803C42.5371 36.1309 43.9999 33.5354 43.9999 30.7364V27.5L42.9999 26L32 19Z' fill='url(%23paint2_radial_2994_8373)'/%3E%3Cpath d='M32 19V23.4803C32 26.2793 30.5371 28.8748 28.1426 30.3242L16.1426 37.5878C13.6878 39.0737 10.6335 39.1273 8.1355 37.7487L19.8573 44.844C22.4039 46.3855 25.5959 46.3855 28.1426 44.844L40.1426 37.5803C42.5371 36.1309 43.9999 33.5354 43.9999 30.7364V27.5L42.9999 26L32 19Z' fill='url(%23paint3_linear_2994_8373)'/%3E%3Cpath d='M40.1405 10.4153L28.1405 3.15678C25.6738 1.66471 22.6021 1.61849 20.0979 3.01811L19.8595 3.16231C17.4638 4.61143 16 7.20757 16 10.0075V19.4914L19.8595 17.1568C22.4051 15.6171 25.5949 15.6171 28.1405 17.1568L40.1405 24.4153C42.4613 25.8192 43.9076 28.2994 43.9957 30.9985C43.9986 30.9113 44 30.824 44 30.7364V17.2605C44 14.4606 42.5362 11.8644 40.1405 10.4153Z' fill='url(%23paint4_radial_2994_8373)'/%3E%3Cpath d='M40.1405 10.4153L28.1405 3.15678C25.6738 1.66471 22.6021 1.61849 20.0979 3.01811L19.8595 3.16231C17.4638 4.61143 16 7.20757 16 10.0075V19.4914L19.8595 17.1568C22.4051 15.6171 25.5949 15.6171 28.1405 17.1568L40.1405 24.4153C42.4613 25.8192 43.9076 28.2994 43.9957 30.9985C43.9986 30.9113 44 30.824 44 30.7364V17.2605C44 14.4606 42.5362 11.8644 40.1405 10.4153Z' fill='url(%23paint5_linear_2994_8373)'/%3E%3Cpath d='M4.00428 30.9984C4.00428 30.9984 4.00428 30.9984 4.00428 30.9984Z' fill='url(%23paint6_radial_2994_8373)'/%3E%3Cpath d='M4.00428 30.9984C4.00428 30.9984 4.00428 30.9984 4.00428 30.9984Z' fill='url(%23paint7_linear_2994_8373)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_2994_8373' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(17.4186 10.6383) rotate(110.528) scale(33.3657 58.1966)'%3E%3Cstop offset='0.06441' stop-color='%23AE7FE2'/%3E%3Cstop offset='1' stop-color='%230078D4'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_2994_8373' x1='17.5119' y1='37.8685' x2='12.7513' y2='29.6347' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23114A8B'/%3E%3Cstop offset='1' stop-color='%230078D4' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint2_radial_2994_8373' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(10.4299 36.3511) rotate(-8.36717) scale(31.0503 20.5108)'%3E%3Cstop offset='0.133928' stop-color='%23D59DFF'/%3E%3Cstop offset='1' stop-color='%235E438F'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint3_linear_2994_8373' x1='40.3566' y1='25.3768' x2='35.2552' y2='32.6916' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23493474'/%3E%3Cstop offset='1' stop-color='%238C66BA' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint4_radial_2994_8373' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(41.0552 26.504) rotate(-165.772) scale(24.9228 41.9552)'%3E%3Cstop offset='0.0584996' stop-color='%2350E6FF'/%3E%3Cstop offset='1' stop-color='%23436DCD'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint5_linear_2994_8373' x1='16.9758' y1='3.05655' x2='24.4868' y2='3.05655' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232D3F80'/%3E%3Cstop offset='1' stop-color='%23436DCD' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='paint6_radial_2994_8373' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(41.0552 26.504) rotate(-165.772) scale(24.9228 41.9552)'%3E%3Cstop offset='0.0584996' stop-color='%2350E6FF'/%3E%3Cstop offset='1' stop-color='%23436DCD'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint7_linear_2994_8373' x1='16.9758' y1='3.05655' x2='24.4868' y2='3.05655' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232D3F80'/%3E%3Cstop offset='1' stop-color='%23436DCD' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 20px;
    background-position: center; 
    background-repeat: no-repeat;
    width: 40px;
    height: 100%;
}


/* Pulse Radar */
.variant__countdown {
  font-weight: 600;

}

.variant__countdown--in,
.variant__countdown--out{
  padding-left: 16px;

}

/* Countdown styles for different states */
.variant__countdown--in {
  --dot-color: #51c88e; /* Green dot color */
}

.variant__countdown--out {
  --dot-color: #ff8484; /* Red dot color */
}

/* Dot styling */
.variant__countdown--in:after,
.variant__countdown--in:before,
.variant__countdown--out:after,
.variant__countdown--out:before {
  content: "";
  display: block;
  position: absolute;
  right: 15px;
    top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background-color: var(--dot-color);
  border-radius: 50%;
}

/* Dot animation */
.variant__countdown--in:before,
.variant__countdown--out:before {
  opacity: 0.2;
  animation: pulse 2.5s linear infinite; /* Apply the pulse animation */
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  69% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1);
    opacity: 0.2;
  }
  to {
    transform: scale(5);
    opacity: 0;
  }
}
/* Dot animation with -webkit- prefix */
.variant__countdown--in:before,
.variant__countdown--out:before {
  opacity: 0.2;
  -webkit-animation: pulse 2.5s linear infinite; /* Add -webkit- prefix */
  animation: pulse 2.5s linear infinite;
}

@-webkit-keyframes pulse { /* Add -webkit- prefix to keyframes */
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  69% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  70% {
    -webkit-transform: scale(1);
    opacity: 0.2;
  }
  to {
    -webkit-transform: scale(5);
    opacity: 0;
  }
}



#accounts-table .btn{
    font-size: 12px;
}



#accounts-container{
      position: relative;
    width: 100%;
    margin: auto;
    min-height: 250px;
}
.sheetaccountinfo {
    transition: opacity 0.1s ease, max-height 0.3s ease; /* Smooth transition for opacity and max-height */
    display: none;
    padding: 0;
    padding-left: 10px;
    position: relative;
    width: 100%;
}
#accounts-container .dots {
    display: flex;
    flex-direction: column; /* Stack dots vertically */
    position: absolute;
    left: 0px; /* Align the dots on the left side */
    top: calc(50% - 20px); /* Vertically center the dots */
    transform: translateY(-50%); /* Correct centering */
}

/* Style for each dot */
#accounts-container .dot {
    height: 6px;
    width: 6px;
    margin: 5px 0; /* Space between the dots */
    background-color: #b4d4fc;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/* Active dot style */
#accounts-container .dot.active {
    background-color: #4c99f4;
}
#Sheets #next{
    position: absolute;
    right: calc(50% - 14px);
    height: 38px;
    width: 28px;
    padding: 0;
    background-color: transparent;
    border: none;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 837 837"><defs><style> .cls-1 { fill: %234997f2; } .cls-2 { fill: %2367b1f6; } </style></defs><g><g id="Layer_1"><g><path class="cls-1" d="M419,719.9c-2.4,0-3.8-1-5.1-2.1C394.4,701.6,10.4,366.9,4.1,361.1c-3-2.7-3.1-6.3-.2-9.5,4-4.5,80.7-87.2,114.9-124.1,3.7-4,6.9-4.1,11-.4,34,31.5,267.3,243.3,285.8,259.8.7.7,1.6,1.2,2.4,1.8.2,13.8.4,27.6.5,41.4.2,29.9.4,59.8.5,89.7,0,33.4,0,66.8,0,100.2Z"/><path class="cls-2" d="M419,719.9c0-33.4-.8-217.5-1-231.3,21.3-18.9,277-249.3,290.8-261.8,3.7-3.4,7-3.1,10.3.6,16.2,17.9,91.2,100.1,112.4,123.4,2.8,3.1,2.7,6.5-.5,9.4-7.5,6.9-402.2,353.7-406.5,357.4s-3.5,2.3-5.5,2.3Z"/></g><path class="cls-1" d="M84.6,264.4"/><path class="cls-1" d="M397.1,470.4"/></g></g></svg>');
    background-size: 22px;
    background-position: bottom; 
    background-repeat: no-repeat;
    cursor: pointer;
}
.sheet-next-demo{
    position: absolute;
    right: calc(50% - 14px);
    height: 38px;
    width: 28px;
    padding: 0;
    background-color: transparent;
    border: none;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 837 837"><defs><style> .cls-1 { fill: %234997f2; } .cls-2 { fill: %2367b1f6; } </style></defs><g><g id="Layer_1"><g><path class="cls-1" d="M419,719.9c-2.4,0-3.8-1-5.1-2.1C394.4,701.6,10.4,366.9,4.1,361.1c-3-2.7-3.1-6.3-.2-9.5,4-4.5,80.7-87.2,114.9-124.1,3.7-4,6.9-4.1,11-.4,34,31.5,267.3,243.3,285.8,259.8.7.7,1.6,1.2,2.4,1.8.2,13.8.4,27.6.5,41.4.2,29.9.4,59.8.5,89.7,0,33.4,0,66.8,0,100.2Z"/><path class="cls-2" d="M419,719.9c0-33.4-.8-217.5-1-231.3,21.3-18.9,277-249.3,290.8-261.8,3.7-3.4,7-3.1,10.3.6,16.2,17.9,91.2,100.1,112.4,123.4,2.8,3.1,2.7,6.5-.5,9.4-7.5,6.9-402.2,353.7-406.5,357.4s-3.5,2.3-5.5,2.3Z"/></g><path class="cls-1" d="M84.6,264.4"/><path class="cls-1" d="M397.1,470.4"/></g></g></svg>');
    background-size: 22px;
    background-position: bottom; 
    background-repeat: no-repeat;
    cursor: pointer;
}
.sheetaccountinfo.active {
    display: block
}

.sheetaccountinfo:last-child{
    border: none;
}
.sheetaccountinfo .info{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    font-size: 12px;
    height: 28px;
    color: #666;
}
.sheetaccountinfo .info p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.info img{
    height: 12px;
    margin-right: 6px;
}

.custom-dropdown-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 15px;
    width: 95%;
    margin: auto;
   
}
.custom-dropdown{
    display: flex;
    border: 1px;
    position: relative;
    width: 100%;
}
.dropdown-button {
    background: #f0f0f0;
    padding: 10px 10px 10px 35px;
    border: 1px solid #ccc;
    border-radius: 0px;
    overflow: hidden;
    background-color: #fff;
    font-size: 14px;
    display: flex;
     align-items: center; 
    height: 25px;
    cursor: pointer;
    width: 100%;
}

.dropdown-button::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23000' stroke-width='2.5' fill='none' stroke-linejoin='round' viewBox='0 0 100 90'%3E%3Cpolygon points='23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1'/%3E%3C/svg%3E");


    background-size: 20px;
    background-position: center; 
    background-repeat: no-repeat;
    width: 35px;
    height: 100%;
}
.dropdown-button.files{
    padding: 10px;
}
.dropdown-button.files::after{
    display: none;
}
.dropdown-button.googleall::before{
  content: '';
  position: absolute;
   left: 0;
  top: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='-13.095 -19.5 113.49 117'%3E%3Cpath d='M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L27.5 53H0c0 1.55.4 3.1 1.2 4.5z' fill='%230066da'/%3E%3Cpath d='M43.65 25L29.9 1.2c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44A9.06 9.06 0 000 53h27.5z' fill='%2300ac47'/%3E%3Cpath d='M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75L86.1 57.5c.8-1.4 1.2-2.95 1.2-4.5H59.798l5.852 11.5z' fill='%23ea4335'/%3E%3Cpath d='M43.65 25L57.4 1.2C56.05.4 54.5 0 52.9 0H34.4c-1.6 0-3.15.45-4.5 1.2z' fill='%2300832d'/%3E%3Cpath d='M59.8 53H27.5L13.75 76.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z' fill='%232684fc'/%3E%3Cpath d='M73.4 26.5l-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3L43.65 25 59.8 53h27.45c0-1.55-.4-3.1-1.2-4.5z' fill='%23ffba00'/%3E%3C/svg%3E");
  background-size: 25px;
  background-position: center; 
  background-repeat: no-repeat;
  width: 35px;
  height: 100%;
}
.dropdown-button.excel::before{
  content: '';
  position: absolute;
   left: 0;
  top: 0; 
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='800' width='1200' viewBox='-154.5063 -164.9805 1339.0546 989.883'%3E%3Cpath d='M622.292 445.338l212.613-203.327C790.741 69.804 615.338-33.996 443.13 10.168a321.9 321.9 0 00-188.92 134.837c3.29-.083 368.082 300.333 368.082 300.333z' fill='%230364B8'/%3E%3Cpath d='M392.776 183.283l-.01.035A256.233 256.233 0 00257.5 144.921c-1.104 0-2.189.07-3.29.083C112.063 146.765-1.74 263.424.02 405.567a257.389 257.389 0 0046.244 144.04l318.528-39.894 244.21-196.915z' fill='%230078D4'/%3E%3Cpath d='M834.905 242.012c-4.674-.312-9.37-.528-14.123-.528a208.464 208.464 0 00-82.93 17.117l-.006-.022-128.844 54.22 142.041 175.456 253.934 61.728c54.8-101.732 16.752-228.625-84.98-283.424a209.23 209.23 0 00-85.09-24.546z' fill='%231490DF'/%3E%3Cpath d='M46.264 549.607C94.36 618.757 173.27 659.967 257.5 659.922h563.281c76.946.022 147.691-42.202 184.195-109.937L609.001 312.798z' fill='%2328A8EA'/%3E%3C/svg%3E");
  background-size: 30px;
  background-position: center; 
  background-repeat: no-repeat;
  width: 35px;
  height: 100%;
}

.dropdown-button img{
    height: 24px;
    width: 24px;
    pointer-events: none;
}
.google-file-account-select{
    background: #f0f0f0;
    padding: 0px 10px 0px 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    display: flex;
     align-items: center; 
    height: 47px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif ;
    position: relative;
    width: 100%;
}
.google-file-picker-container{
    width: 100%;
	     align-items: center; 
	display: flex;
	column-gap: 10px
}
.google-file-picker-button{
    background: #f0f0f0;
    color: #121212;
    padding: 10px 10px 10px 45px;
    border: 1px solid #ccc;
    border-radius: 0px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    display: flex;
     align-items: center; 
    height: 47px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif ;
    position: relative;
    width: 100%;
}

.google-file-picker-button::before{
  content: '';
  position: absolute;
   left: 0;
  top: 0;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="26" width="33"><path id="green" d="m13.1 2.9h-10.9c-1.2 0-2.2 1-2.2 2.2 0 0 0 0 0 0v11.4c0-.3.1-.6.3-.8z" fill="%2334a853"/><path id="blue" d="m29.9 25.5h-27.7c-1.2 0-2.2-1-2.2-2.2l0 0v-6.8c0-.3.1-.6.3-.8l15.4-15.4c.2-.2.5-.3.8-.3h13.4c1.2 0 2.2 1 2.2 2.2v21.2c0 1.2-1 2.1-2.2 2.1 0 0 0 0 0 0z" fill="%234285f4"/><path id="red" d="m15.7.3l-15.4 15.4c-.2.2-.3.5-.3.8v.1c0-.3.2-.5.5-.5h13.3c1.2 0 2.2-1 2.2-2.2 0 0 0 0 0 0v-13.3c0-.3.2-.5.5-.6h-.1c-.2 0-.5.1-.7.3z" fill="%23ea4335"/><path id="yellow" d="m0 16.6c0-.4.3-.8.7-.9l9.7-3.1c1-.3 1.8-1.1 2.1-2.1l3.1-9.7c.1-.4.5-.7 1-.7h-.1c-.3 0-.6.1-.8.3l-15.4 15.3c-.2.2-.3.5-.3.9z" fill="%23fbbc04"/></svg>');
  background-size: 22px;
  background-position: center; 
  background-repeat: no-repeat;
  width: 45px;
  height: 100%;
}

.dropdown-content {
    display: none;
    text-align: center;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    z-index: 1;
    width: 99%;
    overflow-y: auto;
    max-height: 250px;
    top: 46px;
}
.dropdown-item {
    cursor: pointer;
    overflow: hidden;
    font-size: 13px;
     font-family: 'Montserrat', sans-serif ;
    display: flex;
    align-items: center; /* Center vertically */
    padding: 15px;
      position: relative;
}
.dropdown-item img{
    height: 24px;
    width: 24px;
}
.dropdown-item.added{
    background-color: #eee;
    opacity: 0.5;
    position: relative;
}
.dropdown-item.added .fileinfo{
    max-width: 75%;
    white-space: nowrap;  /* Prevent text from wrapping */
    overflow: hidden;     /* Hide overflowed content */
    text-overflow: ellipsis; /* Add ellipsis at the end */
}
.dropdown-item.added::after {
  content: '';
  position: absolute;
   left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23000' stroke-width='1' fill='none' stroke-linejoin='round'  viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: right; 
  background-repeat: no-repeat;
  width: 95%;
  height: 100%;
}
.dropdown-item.added:hover{
    background-color: #eee;
}
.file-info {
    flex-grow: 1; /* Take remaining space */
}
.fileinfo{
    padding-left: 10px;    

    white-space: nowrap;  /* Prevent text from wrapping */
    overflow: hidden;     /* Hide overflowed content */
    text-overflow: ellipsis; /* Add ellipsis at the end */
}

.googlefile{
    height: 24px;
}
.googleexcelfile{
    height: 24px;
}

.dropdown-content{
    border: 1px solid #eee;
}
/* Hide scrollbar background */
.dropdown-content::-webkit-scrollbar {
    width: 7px; /* Width of the scrollbar */
    background: transparent; /* No background */
}

/* Scrollbar handle */
.dropdown-content::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* Color of the scrollbar bar */
    border-radius: 10px; /* Rounded edges */
}

/* Optional: Hover effect for the scrollbar handle */
.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #7d7d7d; /* Darker color on hover */
}

.dropdown-content div:hover {
    background-color: #f5f5f5;
}
.excelfile{
    height: 25px;
    padding-right: 10px;
}
.dropdown-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px; /* Adjust for the space on the left */
    right: 10px; /* Adjust for the space on the right */
    border-bottom: 1px solid #eee;
}
.dropdown-item:last-child::after{
    display: none;
}

.dropdown-content div:last-child {
    border-bottom: none; /* Remove bottom border from the last child */
}
/* Google access modal */
.custom-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.075);
    z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
}

.modal-content-google {
    position: relative;
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 450px;
    width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.gdlogo{
	
	width: 60%;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.modal-buttons {
    margin-top: 15px;
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s;
}

.modal-btn:hover {
    opacity: 0.9;
}

.btn-all-access {
    background-color: #2196F3;
    color: white;
}

.btn-limited {
    background-color: #757575;
    color: white;
}

.modal-text {
    text-align: center;
    line-height: 1.5;
    color: #333;
}


/* Loader */
.list.loader{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0;
	margin: auto;
	margin-left: 10px;
	width: 90%;
    box-sizing: border-box;
}
        .lds-loader {
            /* Base color - light purple */
            color: #1c4c5b;
        }
        .lds-loader,
        .lds-loader div {
            box-sizing: border-box;
        }
        .lds-loader {
            display: block;
            position: relative;
            height: 42px;
            margin: auto;
            width: 60px;
        }
        .lds-loader div {
            display: inline-block;
            position: absolute;
            left: 8px;
            width: 10px;
            padding: 0px;
            background: currentColor;
            border-radius: 2px; /* Subtle rounded corners */
            animation: lds-loader 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
            transition: all 0.1s ease;
        }
        .loading-sheets {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .lds-loader div:nth-child(1) {
            animation-delay: -0.24s;
        }
        .lds-loader div:nth-child(2) {
            animation-delay: -0.12s;
        }
        .lds-loader div:nth-child(3) {
            animation-delay: 0s;
        }
        @keyframes lds-loader {
            0% {
                top: 0px;
                height: 40px;
                background: #1c4c5b; /* Light purple */
                box-shadow: 0 2px 4px rgba(229, 228, 251, 0.1);
            }
            50% {
                top: 12px;
                height: 20px;
                background: #4a7a8f; /* Darker purple at peak */
                box-shadow: 0 1px 2px rgba(184, 181, 240, 0.2);
            }
            100% {
                top: 12px;
                height: 20px;
                background: #1c4c5b; /* Back to light purple */
                box-shadow: 0 1px 2px rgba(229, 228, 251, 0.1);
            }
        }
        
.add-sheet-button{
   border: 1px solid #ccc;
    border-left: none;
    background-color: transparent;
    color: #182b43;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 110px;
    cursor: pointer;
    
}
.sheets-container{
    width: 90%;
    margin: 0px auto 0px auto;
    height: 100px;
}

.sheetaccountinfo h4{
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 400;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sheets-container table {
    border-collapse: collapse;
    width: 100%;
    height: 55px;
}
.sheet td:nth-child(1){
     width: 0%;   
    text-align: right;
    display: flex;
    align-items: center;
    padding: 0;
    height: 35px;
}
.sheet td:nth-child(3){
     width: 0%;   
    text-align: center;
}
.sheet td:nth-child(4){
     width: 0%;   
    text-align: center;
}
.sheet td:nth-child(2){
    font-size: 14px;
    font-weight: 100;
    white-space: nowrap; 
    overflow: hidden;    
    text-overflow: ellipsis;
    padding-left: 10px;
    font-family: helvetica;
    width: 100%;
}
.sheet td:nth-child(2), a{
        text-decoration: none;
    color: #000;
}
.sheet td:nth-child(3) button{
    background-color: transparent;
    border: none;
    opacity: .6;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.sheet td:nth-child(3) button:hover {
    opacity: 1;
}

.sheet td:nth-child(3) button svg {
    width: 14px;
    height: 14px;
}


.sheet td:nth-child(4) button{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    opacity: 0.8;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12.6 13.3" style="enable-background:new 0 0 12.6 13.3;" xml:space="preserve"><g><path d="M9.5,12.4c-0.3-0.3-0.6-0.5-0.9-0.8c-0.1-0.1-0.1-0.1-0.2,0c-0.3,0.1-0.7,0.3-1,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.4-0.2,0.8-0.3,1.3c0,0,0,0.1-0.1,0.1c-0.4,0.1-0.9,0.1-1.3,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0-0.1-0.1-0.3-0.1-0.4c-0.1-0.3-0.1-0.6-0.2-0.9c0,0,0-0.1-0.1-0.1c-0.4-0.1-0.7-0.2-1.1-0.4c0,0-0.1,0-0.1,0c-0.3,0.3-0.6,0.6-0.9,0.8c0,0,0,0,0,0c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.2-0.4-0.3-0.6-0.5c0,0,0,0,0-0.1C2,11,2.2,10.6,2.4,10.3c0,0,0-0.1,0-0.1C2.1,9.9,1.9,9.6,1.7,9.3c0,0,0,0-0.1,0c-0.4,0-0.7,0.1-1.1,0.1c-0.1,0-0.1,0-0.1-0.1C0.2,8.8,0.1,8.4,0,7.9c0,0,0-0.1,0-0.1C0.4,7.6,0.7,7.4,1,7.3c0,0,0,0,0-0.1C1,6.8,1,6.4,1,6C1,6,1,6,1,6C0.7,5.8,0.4,5.6,0,5.4c0,0,0,0,0-0.1c0.1-0.5,0.2-1,0.4-1.4c0,0,0,0,0.1,0C0.9,3.9,1.2,4,1.6,4c0,0,0.1,0,0.1,0C1.9,3.6,2.1,3.3,2.4,3c0,0,0,0,0-0.1C2.2,2.6,2,2.3,1.9,1.9c0,0,0-0.1,0-0.1C2.2,1.5,2.6,1.2,3,0.9c0,0,0,0,0,0C3.2,1,3.4,1.2,3.6,1.3C3.7,1.5,3.9,1.6,4,1.8c0,0,0,0,0.1,0c0.4-0.2,0.7-0.3,1.1-0.3c0,0,0.1,0,0.1-0.1c0.1-0.4,0.2-0.8,0.3-1.3c0,0,0-0.1,0.1-0.1C6.1,0,6.5,0,7,0c0,0,0.1,0,0.1,0.1c0.1,0.4,0.2,0.8,0.3,1.3c0,0,0,0.1,0.1,0.1c0.4,0.1,0.7,0.2,1.1,0.4c0,0,0.1,0,0.1,0c0.3-0.3,0.6-0.6,0.9-0.8c0,0,0,0,0,0C9.7,1,9.9,1.1,10.1,1.3c0.2,0.2,0.4,0.4,0.6,0.5c0,0,0,0,0,0.1c-0.2,0.4-0.3,0.7-0.5,1.1c0,0,0,0.1,0,0.1c0.3,0.3,0.5,0.6,0.7,0.9c0,0,0,0,0.1,0c0.4,0,0.7-0.1,1.1-0.1c0.1,0,0.1,0,0.1,0.1c0.2,0.5,0.3,0.9,0.4,1.4c0,0,0,0.1,0,0.1c-0.3,0.2-0.6,0.3-0.9,0.5c0,0,0,0,0,0.1c0.1,0.4,0.1,0.8,0,1.2c0,0,0,0.1,0,0.1c0.3,0.2,0.6,0.4,0.9,0.5c0,0,0,0,0,0.1c-0.1,0.5-0.2,1-0.4,1.4c0,0,0,0-0.1,0c-0.3,0-0.5-0.1-0.8-0.1c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0c-0.2,0.3-0.4,0.6-0.7,0.9c0,0,0,0.1,0,0.1c0.2,0.4,0.3,0.7,0.5,1.1c0,0,0,0.1,0,0.1C10.3,11.8,10,12.1,9.5,12.4C9.5,12.3,9.5,12.3,9.5,12.4z M10.1,6.7c0.1-2.1-1.7-3.9-3.8-3.9c-2.1,0-3.8,1.8-3.9,3.8c0,2.1,1.7,3.9,3.8,3.9C8.4,10.5,10.1,8.7,10.1,6.7z"/><path d="M6.3,5.2c0.8,0,1.4,0.7,1.4,1.4C7.7,7.4,7.1,8,6.3,8C5.5,8,4.9,7.4,4.9,6.6C4.9,5.8,5.5,5.2,6.3,5.2z"/></g></svg>');
    height: 8px;
    width: 8px;
    background-size: 100% 100%;
}

.sheet td:nth-child(5) {
    width: 0%;
    text-align: center;
}

.sheets-container th, .sheets-container td {
    padding: 2px;
    text-align: left;

}
.sheet{
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height: 35px;
    
}
.sheets-container th {
    background-color: #f2f2f2;
}
.sheets-container img {
    width: 24px;
    height: 24px;   
    
}
.delete-sheet{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10px;
}   
.hidden {
    display: none;
}

#Preferences h3{
    margin-bottom: 5px;
            margin-top: 5px;
        font-weight: 600;
}
#Preferences h4{
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 12px;
}
#Preferences h4:last-of-type {
    margin-bottom: 0px;
}
/* Ai settings */
.aisettings{
    margin-bottom: 5px;
}
.personalizeai{
    font-size: 13px;
}
/* Toggle switch styles */
.toggle-container{
	display: flex;
	height: 30px;
	align-items: center;
	gap: 6px;
    font-size: 14px;
}
.toggle-container.prefs{
    height: 22px;
}

.toggle-container label{
	margin-top: auto;
	margin-bottom: auto;
	font-weight: 400;
}

label[for="claudeToggle"]::after {
  content: attr(data-new);
  margin-left: 6px;
  padding: 2px 6px;
  background: #E87D5C;
  color: white;
  font-size: 8px;
  position: relative;
  bottom: 1.5px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(232, 125, 92, 0.3);
  text-transform: uppercase;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 14px;
    margin: auto 0 auto auto;
}
.default{
	font-weight: 400;
	font-size: 11.2px;

}
#GPT{
    padding-right: 0;
}
.toggle-container .gemini, .toggle-container .gpt{
	height: 20px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 8px;
}

.toggle-container .deepseek{
	height: 20px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 8px;
}
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 8px;
            width: 8px;
            left: 4px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .switch input:checked + .slider {
            background-color: #10A37F;
        }
        .switch input:checked + .slider:before {
            transform: translateX(14px);
        }
        .switch input:not(:checked) + .slider {
            background-color: #ccc;
        }

.applyPreferences{
	margin-top: 10px;
	height: 30px;
	width: 100px;
	border: 1px solid #000;
	border-radius: 50px;
	letter-spacing: 2px; 
	font-weight: 600;
	text-transform: uppercase;
	font-size: 10px;
	background-color: #fff;
	margin: auto;
}
.applyPreferences:hover{
	cursor: pointer;
}

:root {
  --spinner-color: #1c4c5b;
  --spinner-size: 20px;
  --spinner-border: 2px;
  --animation-duration: 2s; /* Controls the total duration */
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  color: var(--spinner-color);
  margin: auto;
}

.lds-ring div {
  box-sizing: border-box;
  position: absolute;
  width: calc(var(--spinner-size) * 0.8);
  height: calc(var(--spinner-size) * 0.8);
  margin: calc(var(--spinner-size) * 0.1);
  border: var(--spinner-border) solid currentColor;
  border-radius: 50%;
  animation: lds-ring var(--animation-duration) ease-in-out infinite;
  border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* After 6 seconds, hide the spinner circles */
.tick-state .lds-ring div {
  border-color: transparent;
  animation: none;
  transform: none;
}

/* Create the tick mark */
.tick-state .lds-ring::after {
  content: '';
  position: absolute;
  width: calc(var(--spinner-size) * 0.5);
  height: calc(var(--spinner-size) * 0.25);
  border: solid var(--spinner-color);
  border-width: 0 0 var(--spinner-border) var(--spinner-border);
  transform: rotate(-45deg);
  left: 30%;
  top: 30%;
}

/* Optional: Center spinner on full screen */
.center-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}


/* Sheet Modal */
.sheetmodal{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.08);
    transition: 0.3s ease;
    border-radius: 9px;
}

.sheetmodal .modal-content{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    
    background-color: #fff;
    border: 1px solid #ddd;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
}
.sheetsettingsheader{
    display: flex;
    width:  95%;
    margin: auto;
    height: 35px;
   align-items: center;
  border-bottom: 1px solid #ddd;
}
.sheetsimg{
    height: 25px;

}
.modal-content .close{
    position: absolute;
    right: 5px;
    top: 5px;
}
.sheetmodal .modal-content h2{
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 3px;
    font-size: 18px;

    width: 100%;
}
.sheetrefresh{
    height: 12px;
    opacity: 0.67
}
.sheetsettings{
    width: 100%;
    margin: auto;
}
.sheetinfo{
    width: 90%;
    margin: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

.sheetsets h4{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;

}
.sheetsets p4{
    padding-left: 10px;
    letter-spacing: 0.5px;
    font-size: 13px;
}
.sheetsets{
    display: flex;
    align-items: center;
    height: 30px;
  border-bottom: 1px solid #eee;
}
.sheetsets:last-child{
    border: none;
}
.searchssettings{
    width: 95%;
    margin: auto;
       border-top: 1px solid #ddd;
    padding-top: 10px;
}
/* Update .searchsheetsets */
.searchsheetsets {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 5px;
}

.searchsheetsets h4 {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 5px 0;
    color: #333;
}

/* Update existing .bydefault style */
.bydefault {
    font-size: 11px;
    color: #666;
    line-height: 1.5;
    padding-left: 0;
}

/* Field Mappings Container */
.field-mappings {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    margin-top: 12px;
}

/* Settings Section Label */
.settings-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* Individual Field Mapping Row */
.field-mapping-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.field-mapping-row:last-child {
    border-bottom: none;
}

/* Field Label (left side) */
.field-label {
    font-size: 12px;
    font-weight: 500;
    color: #555;
    min-width: 100px;
    display: flex;
    align-items: center;
}

.field-label::after {
    content: '→';
    margin: 0 10px;
    color: #999;
    font-weight: 400;
}

/* Input Wrapper */
.field-input-wrapper {
    flex: 1;
    position: relative;
}

/* Input Field Styles */
.field-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    box-sizing: border-box;
}

.field-input:focus {
    border-color: #4a7a8f;
    box-shadow: 0 0 0 3px rgba(74, 122, 143, 0.1);
}

.field-input::placeholder {
    color: #999;
    font-style: italic;
}

.field-input.empty {
    background: #f9f9f9;
    border-style: dashed;
}

/* Field Note (bottom text) */
.field-note {
    font-size: 10px;
    color: #888;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e8e8e8;
}


/* AI Settings Container */
#ai-models-container {
    margin: auto;
    max-height: 400px;
    overflow-y: auto;
    position: relative;
}

/* Account Info Styling */
.aiaccountinfo {
    display: none;
    padding-top: 0px;
    padding-bottom: 20px;
}

.aiaccountinfo.active {
    display: block;
}

.aiaccountinfo .info {
    display: flex;
    align-items: center;
	justify-content: center;
    font-size: 13px;
}

.info img {
    height: 15px;
    margin-right: 10px;
}

/* AI Container Styling */
.ai-container {
    margin: auto;
    padding: 1px 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width: 85%;
    position: relative;
}

.ai-container h4 {
    margin: 15px 0;
    text-align: left;
    font-weight: 400;
}

.ai-container table {
    width: 100%;
    border-collapse: collapse;
}
.ai-model{
	position: relative;
}
.ai-model::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 90%;
      height: 1px;
      background-color: #eee;
      transform: translateX(-50%);
}
.ai-model:first-child::before {
	background-color: transparent;
}
.ai-model td {
    padding: 8px;
    vertical-align: middle;
}

.ai-model td:first-child {
    width: 20px;
}

.ai-model td:last-child {
    width: 10px;
    text-align: right;
}

.ai-model img {
    width: 20px;
    height:20px;
    vertical-align: middle;
}

/* Settings Button */
.settings-ai {
    vertical-align: middle;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0px;
    transition: transform 0.2s ease;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 12.6 13.3" style="enable-background:new 0 0 12.6 13.3;" xml:space="preserve"><g><path d="M9.5,12.4c-0.3-0.3-0.6-0.5-0.9-0.8c-0.1-0.1-0.1-0.1-0.2,0c-0.3,0.1-0.7,0.3-1,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.4-0.2,0.8-0.3,1.3c0,0,0,0.1-0.1,0.1c-0.4,0.1-0.9,0.1-1.3,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0-0.1-0.1-0.3-0.1-0.4c-0.1-0.3-0.1-0.6-0.2-0.9c0,0,0-0.1-0.1-0.1c-0.4-0.1-0.7-0.2-1.1-0.4c0,0-0.1,0-0.1,0c-0.3,0.3-0.6,0.6-0.9,0.8c0,0,0,0,0,0c-0.2-0.1-0.4-0.3-0.6-0.4c-0.2-0.2-0.4-0.3-0.6-0.5c0,0,0,0,0-0.1C2,11,2.2,10.6,2.4,10.3c0,0,0-0.1,0-0.1C2.1,9.9,1.9,9.6,1.7,9.3c0,0,0,0-0.1,0c-0.4,0-0.7,0.1-1.1,0.1c-0.1,0-0.1,0-0.1-0.1C0.2,8.8,0.1,8.4,0,7.9c0,0,0-0.1,0-0.1C0.4,7.6,0.7,7.4,1,7.3c0,0,0,0,0-0.1C1,6.8,1,6.4,1,6C1,6,1,6,1,6C0.7,5.8,0.4,5.6,0,5.4c0,0,0,0,0-0.1c0.1-0.5,0.2-1,0.4-1.4c0,0,0,0,0.1,0C0.9,3.9,1.2,4,1.6,4c0,0,0.1,0,0.1,0C1.9,3.6,2.1,3.3,2.4,3c0,0,0,0,0-0.1C2.2,2.6,2,2.3,1.9,1.9c0,0,0-0.1,0-0.1C2.2,1.5,2.6,1.2,3,0.9c0,0,0,0,0,0C3.2,1,3.4,1.2,3.6,1.3C3.7,1.5,3.9,1.6,4,1.8c0,0,0,0,0.1,0c0.4-0.2,0.7-0.3,1.1-0.3c0,0,0.1,0,0.1-0.1c0.1-0.4,0.2-0.8,0.3-1.3c0,0,0-0.1,0.1-0.1C6.1,0,6.5,0,7,0c0,0,0.1,0,0.1,0.1c0.1,0.4,0.2,0.8,0.3,1.3c0,0,0,0.1,0.1,0.1c0.4,0.1,0.7,0.2,1.1,0.4c0,0,0.1,0,0.1,0c0.3-0.3,0.6-0.6,0.9-0.8c0,0,0,0,0,0C9.7,1,9.9,1.1,10.1,1.3c0.2,0.2,0.4,0.4,0.6,0.5c0,0,0,0,0,0.1c-0.2,0.4-0.3,0.7-0.5,1.1c0,0,0,0.1,0,0.1c0.3,0.3,0.5,0.6,0.7,0.9c0,0,0,0,0.1,0c0.4,0,0.7-0.1,1.1-0.1c0.1,0,0.1,0,0.1,0.1c0.2,0.5,0.3,0.9,0.4,1.4c0,0,0,0.1,0,0.1c-0.3,0.2-0.6,0.3-0.9,0.5c0,0,0,0,0,0.1c0.1,0.4,0.1,0.8,0,1.2c0,0,0,0.1,0,0.1c0.3,0.2,0.6,0.4,0.9,0.5c0,0,0,0,0,0.1c-0.1,0.5-0.2,1-0.4,1.4c0,0,0,0-0.1,0c-0.3,0-0.5-0.1-0.8-0.1c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0c-0.2,0.3-0.4,0.6-0.7,0.9c0,0,0,0.1,0,0.1c0.2,0.4,0.3,0.7,0.5,1.1c0,0,0,0.1,0,0.1C10.3,11.8,10,12.1,9.5,12.4C9.5,12.3,9.5,12.3,9.5,12.4z M10.1,6.7c0.1-2.1-1.7-3.9-3.8-3.9c-2.1,0-3.8,1.8-3.9,3.8c0,2.1,1.7,3.9,3.8,3.9C8.4,10.5,10.1,8.7,10.1,6.7z"/><path d="M6.3,5.2c0.8,0,1.4,0.7,1.4,1.4C7.7,7.4,7.1,8,6.3,8C5.5,8,4.9,7.4,4.9,6.6C4.9,5.8,5.5,5.2,6.3,5.2z"/></g></svg>');
    height: 10px;
    width: 10px;
    background-size: 100% 100%;
    background-position: center;
}

.settings-ai:hover {
    transform: rotate(45deg);
}

/* Navigation */
#ai-next {
    position: absolute;
    right: 0px;
    top: 50%;
        transform: translateX(100%) translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
}

#ai-next::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    margin-left: -3px;
}
.ai-next-demo{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateX(100%) translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease;
}
.ai-next-demo::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    margin-left: -3px;
}
#ai-models-container .dots {
    display: flex;
    position: absolute;
    left: -10px;
    flex-direction: column;
    top: 50%;
     transform: translateX(100%) translateY(-50%);
    gap: 8px;
}

#ai-models-container .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#ai-models-container .dot.active {
    background-color: #007bff;
}

.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    place-items: center;
    z-index: 1000;
}

.modal-content-ai {
    background-color: #fff;
    padding: 2rem;
    border-radius: 1rem;
    width: 500px;
    max-width: 90%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.modal-header img {
    width: 2.5rem;
    height: 2.5rem;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.close-btn {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.close-btn:hover {
    background-color: #f3f4f6;
    color: #4b5563;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setting-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.setting-group.instructions-group{
	display: inline-block;
	text-align: center;
}

.setting-group label {
    min-width: 130px;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
	display: flex;
}

.setting-group select {
    flex: 1;
    padding: 0.625rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: #fff;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

.setting-group select:hover {
    border-color: #d1d5db;
}

.setting-group select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.setting-group input[type="range"] {
   flex: 1;
   height: 0.25rem;
   background: #e5e7eb;
   border-radius: 0.125rem;
   -webkit-appearance: none;
   appearance: none;
}

.setting-group input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 0.875rem;
   height: 0.875rem;
   background: #2563eb;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.2s;
}

.setting-group input[type="range"]::-webkit-slider-thumb:hover {
   transform: scale(1.1);
}

.setting-group input[type="number"] {
    width: 5rem;
    padding: 0.325rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    text-align: center;
    transition: all 0.2s;
}

.setting-group input[type="number"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.setting-group .value {
    min-width: 3rem;
    font-size: 0.875rem;
    color: #4b5563;
    font-weight: 500;
    text-align: right;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.modal-btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save {
   background-color: #2563eb;
   color: white;
   position: relative;
	width: 140px;
	height: 38px;
}

.btn-save.loading::after {
   content: '';
   display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid #fff;
   border-radius: 50%;
   border-top-color: transparent;
   animation: spin 0.6s linear infinite;

    
}

.btn-save.success::after {
   content: '';
   display: inline-block;
   width: 6px;
   height: 12px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(45deg);
}

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

.btn-cancel {
    background-color: #f3f4f6;
    color: #4b5563;
}

.btn-cancel:hover {
    background-color: #e5e7eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.model-instructions {
    width: 96%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 8px;
	height: 100px;
    resize: vertical;
    min-height: 100px;
    background-color: #fafafa;
    transition: border-color 0.2s, background-color 0.2s;
    font-family: inherit;
}

.model-instructions:hover {
    background-color: #ffffff;
    border-color: #ccc;
}

.model-instructions:focus {
    outline: none;
    border-color: #666;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
} 
#settingsModal{
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}
#settingsModal:-webkit-scrollbar {
    width: 4px;
}

#settingsModal:-webkit-scrollbar-track {
    background: transparent;
}

#settingsModal:-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
}

#settingsModal:-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}


/* Custom Scrollbar */
.model-instructions::-webkit-scrollbar {
    width: 8px;
}

.model-instructions::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.model-instructions::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.model-instructions::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Firefox Scrollbar */
.model-instructions {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}
/* INFO */
.info-icon {
    display: flex;
	align-items: center;
	justify-content:center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 6px;
    cursor: pointer;
    color: #666;
    background: white;
    vertical-align: middle;
	position: relative;
	left: 4px;
}

.info-icon:hover {
    background: #f5f5f5;
    color: #333;
}

.database-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px 0 10px 0;
    border-bottom: 1px solid #eee;
}

.db-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.db-tab.active {
    border-bottom-color: #4c99f4;
    color: #000;
    font-weight: 600;
}

.db-tab:hover {
    color: #000;
}

.info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.info-modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
}

.info-modal-description {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 16px;
}

.info-close {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.info-close:hover {
    color: #333;
}


/* Hide scrollbar but keep functionality */
#ai-models-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Responsive Adjustments */

/* Loading States */
.settings-ai.loading {
    animation: rotate 1s infinite linear;
    pointer-events: none;
}

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

/* Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
}
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 0.475rem;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
/* USAGE */
/* Usage Dashboard Styles - Integrated with Modal */
.usage-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

.usage-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* or use: repeat(3, 1fr) */
    gap: 15px;
    width: 100%;
}

.usage-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.usage-card-title {
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 0 8px 0;
    letter-spacing: 0.025em;
}

.usage-card-value {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary, #111827);
}

.usage-chart-section {
    flex-grow: 1;
    min-height: 300px;
}

.chart-card {
    height: 100%;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chart-toggle-container {
    display: flex;
    gap: 8px;
    background: var(--primary-bg, #f3f4f6);
    padding: 4px;
    border-radius: 6px;
}

.chart-toggle-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    border-radius: 4px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-family: 'Montserrat', sans-serif;
}

.chart-toggle-btn.active {
    background: #fff;
    color: var(--blue-accent, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.usage-chart-container {
    width: 100%;
    height: calc(100% - 50px);
    min-height: 250px;
}

.usage-chart-container.hidden {
    display: none;
}

/* Loading State */
.usage-chart-container .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.usage-chart-container .loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .usage-chart-container {
        min-height: 200px;
    }

    .chart-toggle-btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
	.usage-stats-grid{
		gap: 5px;
	}
	.usage-stats-grid .usage-card{
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.usage-card{
		padding: 10px;
	}
	.usage-card h3{
		font-size: 12px;
	}
	.usage-card p{
		font-size: 14px;
	}
}

@media (max-width: 500px) {
	.usage-card h3{
		font-size: 10px;
		margin-bottom: 3px;
	}
}

/* Signatures */
.sig-mgr-container {
    display: grid;
    grid-template-columns: 25% 20% 55%;
    gap: 2px; 
    padding: 10px 0;
    background-color: #fff;
    height: 436px; 
}

/* Column Styling */
.sig-mgr-panel {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    box-sizing: border-box; 
}

/* Headers */
.sig-mgr-panel-header {
    margin: 0;
    color: #111827;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.sig-mgr-panel-header:first-child{
    text-align: center;
}
/*email_accounts*/
.email-accounts-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.email-accounts-modal__content {
    background: white;
    padding: 24px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.email-accounts-modal__title {
    margin: 0 0 20px;
    font-size: 1.5rem;
    color: #333;
}

.email-accounts-modal__list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.email-accounts-modal__item {
    padding: 8px 0;
    display: flex;
    align-items: center;
}

.email-accounts-modal__checkbox {
    margin-right: 10px;
}

.email-accounts-modal__checkbox:disabled + .email-accounts-modal__label {
    color: #999;
    text-decoration: line-through;
}

.email-accounts-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.email-accounts-modal__btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}
.sec__body{
    position: relative;
}

.email-accounts-modal__btn--primary {
    background: #0066cc;
    color: white;
}

.email-accounts-modal__btn--secondary {
    background: #f5f5f5;
    color: #333;
}

.email-accounts-modal__btn:hover {
    opacity: 0.9;
}
.security-btn{
    padding: 8px 15px;
    border-radius: 30px;
}
.my-absolute-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 10;
}

/* Lists */
#sig-mgr-accounts {
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    padding: 10px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in width/height calculations */
    flex-grow: 1;
}

.sig-mgr-accounts-list,
.sig-mgr-signature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
}
/* Account Tab Items */
.sig-mgr-account-tab {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
     display: block;
    padding: 5px 5px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 7px;
    color: #374151;
    background-color: transparent;
    border: 1px solid transparent;
}
.sig-mgr-account-create{
   padding: 5px 5px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #374151;
    background-color: transparent;
    border: 1px solid transparent;
    background-color: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
    width: 95%;
    font-weight: 100;
}
.sig-mgr-account-tab:hover {
    background-color: #f3f4f6;
}

.sig-mgr-account-tab.sig-mgr-active {
    background-color: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

/* Signature Items */
.sig-mgr-signature-item {
    display: flex;
     justify-content: space-between;
    align-items: center;
    padding: 5px 5px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    margin-top: 10px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.sig-mgr-signature-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sig-mgr-signature-item span:first-child{
    white-space: nowrap;       /* Prevents text from wrapping to a new line */
    overflow: hidden;          /* Hides any overflowed text */
    text-overflow: ellipsis; 
}
.sig-mgr-signature-item:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.sig-mgr-signature-item.sig-mgr-selected {
    background-color: #e0e7ff;
    color: #4338ca;
    border-color: #c7d2fe;
}
.defaultsignature{
    font-size: 8px;
    opacity: 0.5;
}

/* Button Container */
.sig-mgr-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    justify-content: space-between;
}
.sig-mgr-default-toggle{
    align-items: center;
    margin-bottom: 8px;

}

/* Buttons */
.sig-mgr-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #282828;
}
.sig-mgr-modal-actions .sig-mgr-btn{
      padding: 10px 22px;
}
.sig-mgr-modal-actions .sig-mgr-btn:first-child{
    margin-left: auto;
    background-color: #fff;
    border: 1px solid #eee;
}
.sig-mgr-modal-actions .sig-mgr-btn:last-child{
    margin-right: auto;
}

.sig-mgr-btn-remove {
    color: #000;
}

.sig-mgr-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sig-mgr-btn:active {
    transform: translateY(0);
}

/* Preview Box */
.sig-mgr-preview-box {
    border: 1px solid #e5e7eb;
    padding: 20px;
    border-radius: 6px;
    min-height: 200px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    cursor: grab;
}

.sig-mgr-preview-box.dragging {
    cursor: grabbing;
}

.sig-mgr-preview-content {
    transform-origin: 0 0;
    position: relative;
    transition: transform 0.1s ease;
    /* Shrink-wrap to whatever the signature actually renders at, instead of
       block-stretching to the (possibly narrower) box - a block box wouldn't
       cover content that overflows it, leaving a gap between this wrapper's
       own background and where the signature's content actually renders. */
    width: fit-content;
}

.sig-mgr-preview-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.sig-mgr-zoom-btn {
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    color: #374151;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sig-mgr-zoom-btn:hover {
    background-color: #f3f4f6;
}

.sig-mgr-zoom-level {
    padding: 4px 8px;
    color: #374151;
    font-size: 14px;
}

.sig-mgr-transparency-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sig-mgr-toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 14px;
}

.sig-mgr-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sig-flex{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.sig-mgr-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .2s;
    border-radius: 24px;
}

.sig-mgr-toggle-slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.sig-mgr-toggle input:checked + .sig-mgr-toggle-slider {
    background-color: #4338ca;
}

.sig-mgr-toggle input:checked + .sig-mgr-toggle-slider:before {
    transform: translateX(14px);
}

.sig-mgr-toggle-label {
    font-size: 10px;
    color: #374151;
    cursor: pointer;
}

.sig-mgr-preview-box.transparency-enabled {
    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #ffffff;
}

/* Modal */
.sig-mgr-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.sig-mgr-modal-content {
    background-color: #ffffff;
    margin: 15% auto;
    padding: 24px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sig-mgr-modal-header {
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    text-align: center;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sig-mgr-modal-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Empty State */
.sig-mgr-empty-state {
    grid-column: 2 / span 2;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
}

.sig-mgr-empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sig-mgr-empty-state-icon {
    color: #9ca3af;
}

.sig-mgr-empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.sig-mgr-empty-state-text {
    color: #6b7280;
    margin: 0;
}

/* Signature Options in Modal */
.sig-mgr-signature-option {
    padding: 12px;
    margin: 8px 0;
    border-radius: 6px;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.sig-mgr-signature-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4338ca;
}

.sig-mgr-signature-option label {
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

/* Focus States */
.sig-mgr-btn:focus,
.sig-mgr-account-tab:focus,
.sig-mgr-signature-item:focus {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

/* Disabled States */
.sig-mgr-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Additional Interactive States */
.sig-mgr-signature-option:hover {
    background-color: #f3f4f6;
}

.sig-mgr-signature-option input[type="checkbox"]:hover {
    cursor: pointer;
}

    /* ai settings */
    .ai-model img{
        height: 15px;
        width: 15px;
    }
    #ai-dots-container{
        gap: 3px;
    }
    #ai-dots-container .dot {
        height: 6px;
        width: 6px;
    }

    .modal-content-ai{
        padding: 1rem;
    }

@media(max-width: 750px){
    #settingsModal .modal-content {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 15px;
        padding-bottom: 10px;
        width: 90%;
    }
}
@media(max-width: 700px){
    .tab button{
        font-size: 10px;
    }
}

@media(max-width: 650px){
    #settingsModal .modal-content {
        width: 95%;
    }
	.ai-container {
		width: 80%;
	}
    .tab button{
        padding: 10px 5px;
        text-align: center;
    }
    .shead h3{
        margin: 8px auto;
    }
    .tabcontent h3:first-child{
        font-size: 16px;
        margin-top: 10px;
        font-weight: 600;
        margin-bottom: 5px !important;
    }
    #Preferences select{
        width: 100px;
    }
    #Preferences h4 {
        font-weight: 500;
    }
    .aisettings{
        padding-top: 10px;
    }
    .personalizeai{
        font-size: 10px;
    }
    .ai-model td{
        padding: 6px;
    }
    .more-sent-hidden{
        display: none;
    }
    #ai-next{
        right: 10px;
        width: 25px;
        height: 25px;
    }
    #ai-next::after {
        content: '';
        width: 8px;
        height: 8px;
        margin-left: 0px;
    }

    
    /*Sheets*/
    #Sheets {
        padding-left: 3px;
    }
    #Sheets h4{
        font-size: 13px;
    }
    .custom-dropdown-container{
        width: 80%;
    }
    #accounts-table, #Sheets h3{
        padding-left: 6px;
    }
    .sheets-container a{
        font-size: 12px;
    }
    

    /* ai settings */
    .toggle-container label{
        font-size: 14px;
        font-weight: 400;
    }
    .toggle-container select{
        font-size: 10px;
    }
    .ai-container span{
        font-size: 13px
    }
    .switch .slider{
        transform: scale(0.7);
    }
    
    /* sheets */
    .sheetaccountinfo p{
        font-size: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .info img{
        height: 12px;
    }
    .dropdown-item img{
        height: 20px;

    }
    .dropdown-item {
        font-size: 12px;
        padding: 10px;
    }
    .sheets-container img {
        height: 20px;
        width: 20px;
    }
    
    
}

@media(max-width: 500px){
    #accounts-table td:first-child {
        border: 1px solid #ccc;
        border-radius: 50px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-size: 10px;
        display: flex;
        align-items: center;
    }
    .acc-googlefile::before, .acc-googleall::before {
        background-size: 18px;
    }
    .dropdown-button{
        padding: 5px 5px 5px 25px;
        font-size: 12px;
    }
    .dropdown-button.googleall::before {
        width: 25px;
        background-size: 18px;
    }
    .dropdown-button.googleall::after{
        background-size: 18px;
    }
    .dropdown-content{
        top: 37px
    }
    #Sheets h4 {
        margin-bottom: 5px;
        font-size: 12px;
    }
    
    .usage-dashboard{
        padding: 0;
        gap: 10px;
    }
    .tab button{
        font-weight: 500;
        border-radius: 5px;
        letter-spacing: 0.6px;
        font-size: 10px;
    }
    .modal-sidebar{
        padding-right: 5px
    }
    

}
     
 @media (max-width: 850px) {
    .sig-mgr-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            "accounts signatures"
            "preview preview";
        height: auto;
        gap: 12px;
        padding: 15px 10px;
    }
    
    .sig-mgr-panel {
        margin: 0;
    }
    
    #sig-mgr-accounts {
        grid-area: accounts;
        min-height: 180px;
    }
    
    .sig-mgr-accounts-list {
        max-height: 140px;
        overflow-y: auto;
    }
    
    .sig-mgr-account-tab {
        font-size: 11px;
        padding: 6px 8px;
        margin-top: 4px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .sig-mgr-account-create {
        margin-top: 8px;
        width: 95%;
        padding: 6px;
        font-size: 12px;
    }
    
    #sig-mgr-signatures {
        grid-area: signatures;
        min-height: 180px;
    }
    
    .sig-mgr-signature-list {
        max-height: 140px;
    }
    
    /* Subtle scrollbars for accounts and signatures lists */
    .sig-mgr-accounts-list::-webkit-scrollbar,
    .sig-mgr-signature-list::-webkit-scrollbar {
        width: 4px;
    }
    
    .sig-mgr-accounts-list::-webkit-scrollbar-track,
    .sig-mgr-signature-list::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .sig-mgr-accounts-list::-webkit-scrollbar-thumb,
    .sig-mgr-signature-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }
    
    .sig-mgr-accounts-list::-webkit-scrollbar-thumb:hover,
    .sig-mgr-signature-list::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
    
    /* Firefox scrollbar styling */
    .sig-mgr-accounts-list,
    .sig-mgr-signature-list {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
    
    #sig-mgr-preview {
        grid-area: preview;
        min-height: 300px;
    }
    
    .sig-mgr-preview-box {
        min-height: 250px;
        margin-top: 10px;
    }
    
    .sig-mgr-preview-controls {
        bottom: 5px;
        right: 5px;
        padding: 4px;
    }
    
    .sig-mgr-zoom-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .sig-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .sig-mgr-transparency-toggle {
        margin-bottom: 4px;
    }
}

@media (max-width: 600px) {
    .sig-mgr-container {
        padding: 10px 5px;
        gap: 8px;
    }
    
    .sig-mgr-panel {
        padding: 8px;
        min-height: 150px;
    }
    
    .sig-mgr-panel-header {
        font-size: 12px;
        text-align: center;
    }
    
    .sig-mgr-account-tab {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .sig-mgr-preview-box {
        min-height: 200px;
        padding: 15px;
    }
    
    .sig-mgr-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    .info-email{
        display: none;
    }
}

/* ==========================================================================
   DARK MODE — settings modal shell (overlay, box, sidebar tab nav, close
   button). Per-tab content (Preferences/Account/Sheets/Signatures/GPT/
   Usage/Billing/Security) is themed separately, file by file, as each is
   done. See public/css/style_V12.css's html[data-theme="dark"] block for
   the --dm-* custom properties this reuses and the overall scope note.
   The .modal/.modal-demo overlay itself (rgba(0,0,0,0.4)) is untouched -
   a translucent black scrim reads fine over either theme.
   ========================================================================== */
html[data-theme="dark"] .modal .modal-content,
html[data-theme="dark"] .modal-demo .modal-content {
    background-color: var(--dm-bg);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .shead {
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .shead .close {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .shead .close:hover,
html[data-theme="dark"] .close:focus {
    color: var(--dm-text);
}
html[data-theme="dark"] .modal-sidebar {
    border-right-color: var(--dm-border);
}
html[data-theme="dark"] .tab button {
    color: var(--dm-text);
}
html[data-theme="dark"] .tab button:hover {
    background-color: var(--dm-surface);
}
html[data-theme="dark"] .tab button.active {
    background-color: var(--dm-border);
}
html[data-theme="dark"] .tabcontent a {
    color: var(--accent);
}
html[data-theme="dark"] #Preferences select,
html[data-theme="dark"] #modalContent select {
    /* Text colour and the arrow's embedded SVG stroke are both hardcoded dark
       (#1a1a1a / stroke="%23000") with a transparent background behind them -
       inverting the whole control flips both to light in one step, same
       trick as the reply editor's formatting toolbar buttons. */
    filter: invert(1) grayscale(1);
}
/* AI Settings (Preferences tab) - give each account's model list its own
   raised card, matching the Security/Usage/Account tabs' layering. */
html[data-theme="dark"] .aiaccountinfo {
    background-color: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: 8px;
    /* Gap belongs between the "AI Settings" heading and the card, not
       inside it pushing the email row down - margin, not padding-top. */
    margin-top: 12px;
    padding: 0 14px 20px;
}
html[data-theme="dark"] .ai-container {
    border-top-color: var(--dm-border);
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .info img {
    /* mail.svg is a hardcoded near-black icon (fill:#1d1d1b) - invisible on
       the new dark card, same invert trick as the other monochrome icons. */
    filter: invert(1) grayscale(1);
}
/* :not(:first-child) preserves the base CSS's .ai-model:first-child::before
   rule (no divider above the first row). A plain .ai-model::before here
   would out-specify that rule (html + [data-theme] adds two type-selector
   points that :first-child::before's plain class+pseudo-class selector
   doesn't have) and paint a divider above row 1 that shouldn't be there. */
html[data-theme="dark"] .ai-model:not(:first-child)::before {
    background-color: var(--dm-border);
}
html[data-theme="dark"] .settings-ai {
    /* Gear icon is a hardcoded dark SVG on a transparent background -
       inverting flips it light, same trick as the toolbar/select icons above. */
    filter: invert(1) grayscale(1);
}
html[data-theme="dark"] .ai-next-demo,
html[data-theme="dark"] #ai-next {
    background-color: var(--dm-surface-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .ai-next-demo::after,
html[data-theme="dark"] #ai-next::after {
    border-color: var(--dm-text-muted);
}
html[data-theme="dark"] #ai-models-container .dot {
    background-color: var(--dm-border);
}
/* .dot.active needs its own rule, not just a color change on .dot - the
   base #ai-models-container .dot.active {background:#007bff} rule has no
   ID in its selector, so the plain .dot rule above it (which does, via
   #ai-models-container) was winning on specificity and silently flattening
   every dot, active or not, to the same dark-border grey. */
html[data-theme="dark"] #ai-models-container .dot.active {
    background-color: var(--accent);
}
html[data-theme="dark"] .connectsbtn {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .connectsbtn:last-child {
    background-color: transparent;
}
html[data-theme="dark"] #settingsModal {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
html[data-theme="dark"] #settingsModal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] #settingsModal::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   DARK MODE — Sheets tab
   ========================================================================== */
html[data-theme="dark"] .continuesbtns {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] #accounts-table td:first-child {
    border-color: var(--dm-border);
}
html[data-theme="dark"] .sheetaccountinfo .info {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .dropdown-button {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .dropdown-content {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .dropdown-item.added,
html[data-theme="dark"] .dropdown-content div:hover,
html[data-theme="dark"] .dropdown-item.added:hover {
    background-color: var(--dm-surface-hover);
}
html[data-theme="dark"] .dropdown-item::after {
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .sheets-container th {
    background-color: var(--dm-surface);
}
html[data-theme="dark"] .sheet {
    border-top-color: var(--dm-border);
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .sheet td:nth-child(2),
html[data-theme="dark"] .sheet a {
    color: var(--dm-text);
}
html[data-theme="dark"] .database-tabs {
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .db-tab {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .db-tab.active,
html[data-theme="dark"] .db-tab:hover {
    color: var(--dm-text);
}
html[data-theme="dark"] .add-sheet-button {
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}

/* ==========================================================================
   DARK MODE — Signatures tab. The signature preview box (.sig-mgr-preview-box)
   is deliberately left white - it renders real signature HTML the same way
   the reply editor's signature card does (see rich-text-area.css), and that
   content is never themed. Only the surrounding manager chrome goes dark.
   ========================================================================== */
html[data-theme="dark"] .sig-mgr-container {
    background-color: var(--dm-bg);
}
html[data-theme="dark"] .sig-mgr-panel {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .sig-mgr-panel-header {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .sig-mgr-account-tab {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .sig-mgr-account-tab:hover {
    background-color: var(--dm-surface-hover);
}
html[data-theme="dark"] .sig-mgr-account-tab.sig-mgr-active,
html[data-theme="dark"] .sig-mgr-account-create,
html[data-theme="dark"] .sig-mgr-signature-item.sig-mgr-selected {
    background-color: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.4);
}
html[data-theme="dark"] .sig-mgr-signature-item {
    background-color: var(--dm-surface-hover);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
html[data-theme="dark"] .sig-mgr-signature-item:hover {
    background-color: var(--dm-border);
}
html[data-theme="dark"] .sig-mgr-btn {
    color: var(--dm-text);
}
html[data-theme="dark"] .sig-mgr-modal-actions .sig-mgr-btn:first-child {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}
/* .sig-mgr-btn-add has no background of its own anywhere in the stylesheet -
   it and .sig-mgr-btn-remove both just fall back to the browser's default
   button face. That default is light, so setting .sig-mgr-btn's color to
   near-white above (needed for every other button using that base class)
   left the +/- buttons unreadable: light text on a light system background. */
html[data-theme="dark"] .sig-mgr-btn-remove,
html[data-theme="dark"] .sig-mgr-btn-add {
    background-color: var(--dm-surface-hover);
}
/* The preview box itself goes dark like the reply editor's canvas
   (#editormain). Every signature template now sets its own
   background-color:#ffffff on its root div (see signatures.json /
   email_accounts_demo.json), so the signature is readable on its own -
   but its table layout can render wider than that div's own box (an
   unbreakable "phone • email" string with no wrap point, more so at this
   box's 0.7 zoom), and the overflow paints past the signature's own white
   edge onto whatever is behind it. In the original all-white box that was
   invisible; now that the box itself is dark, it'd read as text fading into
   the background. .sig-mgr-preview-content (our wrapper, not the signature)
   gets a matching white background as a safety net so any such overflow
   still lands on white - the signature's own html/css is still untouched.
   .transparency-enabled skips this (checkerboard needs to show), which
   trades that overflow-safety net for seeing what's actually transparent -
   an acceptable trade for that mode specifically. */
html[data-theme="dark"] .sig-mgr-preview-box {
    background-color: var(--dm-bg);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .sig-mgr-preview-box.transparency-enabled {
    background-color: #ffffff;
}
html[data-theme="dark"] .sig-mgr-preview-box:not(.transparency-enabled) .sig-mgr-preview-content {
    background-color: #ffffff;
}
html[data-theme="dark"] .sig-mgr-preview-controls {
    background-color: var(--dm-surface-hover);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .sig-mgr-zoom-btn {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .sig-mgr-zoom-btn:hover {
    background-color: var(--dm-border);
}
html[data-theme="dark"] .sig-mgr-zoom-level {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .sig-mgr-toggle-label {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .sig-mgr-modal-content {
    background-color: var(--dm-bg);
}
html[data-theme="dark"] .sig-mgr-modal-header {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}