/*
  Copyright (c) Microsoft Corporation.
  Licensed under the MIT license.
*/
.btn.disabled {
    pointer-events: auto;
    cursor: not-allowed;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


header > p {
    color: #FFFFFF;
    font: bold 1.6em "segoe ui", arial, sans-serif;
    margin-left: 31px;
    padding-top: 20px;
}

main {
    margin: 0 auto;
    width: 100%;
}

section#text-container > div > p {
    font: 1.2em "segoe ui", arial, sans-serif;
}

section#report-container {
    height: 860px;
    width: 100%;
}



@media only screen and (max-width: 100px) {
    section#report-container {
        height: 600px;
    }
}

footer > p {
    font: 1em "segoe ui", arial, sans-serif;
}

iframe {
    border: none;
    width: 100% !important;
    height: 100% !important;
}
/* Style the navigation bar */
/* .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
} */

/* Style the links inside the navigation bar */
/* .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
} */



/* Add a "Sign In" dropdown menu */
.signin-dropdown {
    float: right;
    display: block;
}

/* Style the "Sign In" button */
.signin-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    border: none;
    cursor: pointer;
}

/* Style the dropdown menu */
.signin-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the dropdown menu */
.signin-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Change the color of dropdown links on hover */
.signin-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.signin-dropdown:hover .signin-dropdown-content {
    display: block;
}

#side-panel-bg
{
  /* Ensure the background image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Optional: Set the background size to cover the entire element */
  background-size: cover;

  /* Optional: Set the background position if needed */
  background-position: center;
}

#content-dashboard {
    min-height: calc(100vh - 180px);
  }

  input[type=text] {
    padding: 12px 20px;
    display: inline-block;
    border: 1px 0px 1px 1px  solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
button{
  background-color: #4CAF50;
    border: none;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
canvas{
  /*prevent interaction with the canvas*/
  pointer-events:none;
}


  .link {
    cursor: pointer; /* Change 'pointer' to the desired cursor type */
  }

  /* style for password div start */


#info-link
{
    color: #266bec;
}

.requirement {
    color: #ed4c78 !important;
}
.met {
    color: #00c9a7 !important;
}

/* Disable background change on autofill */
input:-internal-autofill-selected {
    background-color: initial !important;
  }
  
  /* Additional styles to reset other autofill properties */
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: initial !important;
  }

  /* left border removal on mask and unmask */

/* left border removal on mask and unmask */


/* export button*/

#exportToFileItem
{
    background: #192430 0% 0% no-repeat padding-box;
    border-radius: 30px;
    opacity: 1;
    
}
.download-report
{
    margin-left: auto; /* This will push it to the right */
}
#content-dashboard
{
    padding: 0px 120px 80px 150px;
}
#content-profile
{
    padding: 0px 120px 80px 150px;
}
#report-card
{
    margin-top: -15px;
}
#basic-info-card
{
    margin-top: -15px;
}
#container-top
{
    margin-top: -30px;
}
#navbar-icons {
    font-size: 22px;
    margin-right: 10px;
}
.navbar-icons
{
    margin-right: 10px;
    font-size: 22px;
}
.dropdown-item 
{
    text-align: left;
font: normal normal medium 16px/19px Helvetica Neue;
letter-spacing: 0px;
color: #192430;
opacity: 0.65;
}
#companyMegaMenu
{
    text-align: left;
    font-size: 19px;
letter-spacing: 0px;
color: #222425;
opacity: 1;
}
#companyMegaMenu small {
    display: block;
}
#download-report-icon
{
    margin-right: 10px;
    font-size: 18px;
    opacity: 1;
}
#footer
{
    background-color: #192430 !important;
    height: 100%;
}
.modal-footer button 
{
    /* background: #4CC3FF 0% 0% no-repeat padding-box; */
border-radius: 25px;
opacity: 1;
}

#exportToFileItem 
{
    background: white;
}

#exportToPPTXItem
{
    background: white;
}


#sign_up_heading h1
{
    font-size: 26px;
    line-height: normal;
}

.password-toggle {
        position: relative;
        display: inline-block;
    }

    .password-toggle input[type="password"] {
        padding-right: 30px;
    }

    .show-password {
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        cursor: pointer;
    }
      .form-check-input
      {
        border-color: gray ;
      }.navbar-toggler.d-lg-none {
        display: none !important;
    }

.form-check
{
    margin: 1.5rem 0 1.5rem 0 !important;
}

#home-btn
{
    background-color: #F8FAFF;
    border-radius: 30px;
    opacity: 1;
}

.nav-segment .nav-link.active
{
    color: #4CC3FF;
}


#content-dashboard2 {
    min-height: calc(100vh - 110px);
    padding: 0px 120px 80px 150px;
  }

  #signupHeroFormPrivacyCheck1
  {
    margin-left: 15px !important;
  }
  .form-control-lg
  {
    padding: 0.8em !important;
  }

  .captcha-wrap
  {
    margin-top: 0.4em !important;
    margin-bottom: 0.4em !important;
  }
  #captcha
  {
    padding-left: 0.8em !important;
  }
  #refresh-captcha-button
  {
    width: 212px !important;
  }
  #error-text
  {
    margin-top: 30px;
    color: #6FC0F9;
    margin-bottom: -80px;
  }

#bg-img2
{
  /* Ensure the background image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Optional: Set the background size to cover the entire element */
  background-size: cover;

  /* Optional: Set the background position if needed */
  background-position: center;
}
#img404
{
    width: 100%; 
    height: 95vh;
    margin-bottom: -120px !important;
}
#btns404
{
    padding: 15px;
}
#backtowebbtn
{
    background-color: transparent !important;
    color: #11224E !important;
    width: 240px;
    height: 50px;
    border: 2px solid #11224E;
border-radius: 25px;
opacity: 1;
font: normal normal 17px/26px Poppins;
}
#backtologinbtn {
    width: 240px;
    height: 50px;
border-radius: 25px;
opacity: 1;
font: normal normal  17px/26px Poppins;
}
.input-group > .form-control:focus,
.input-group > .form-floating:focus-within,
.input-group > .form-select:focus {
    z-index: 0;
}
/* Change the color of links on hover */
#link-btns:hover, a:hover, #exportToPDFItem:hover, #exportToPPTXItem:hover { 
    
    color: #FB8500;
}
#link-btns {
    color: #4CC3FF;
}
/* Hide #side-panel-bg in mobile view */
@media only screen and (max-width: 992px) {
    #side-panel-bg {
      display: none;
    }
    #login-signup-heading, #sign_up_heading
    {
        margin-top: 100px;
    }
}

#header-logo {
    margin-left: 20px;
    margin-top: 13px;
}

#hero-section  p {
    margin-bottom: 8px !important;
}

#card-body-report {
    margin-top: 0 !important;
    position: relative;
    bottom: 32px;
}

.table-responsive {
    font-size: 10.5px;
}

.ts-wrapper.form-select-sm.has-items .ts-control {
    font-size: 10.5px;
}

.card .card-table > :not(caption) > * > *
{
    padding-right: 1rem;
}

.spacer
{
    margin-bottom: 3rem;
}

.table-responsive
{
    max-height: 500px; 
    overflow-y: auto;
}

.card-footer {
    padding-top: 20px;
}

.btn-success {
    border-radius: 30px;
    opacity: 1; 
}

.btn-danger {
    border-radius: 30px;
    opacity: 1; 
}

.active-service-icon {
    color: #00c9a7 !important;
}

.inactive-service-icon {
    color: #ed4c78 !important;
}

.problem-service-icon {
    color: #f5ca99 !important;
}

.error-input {
    border-color: #ed4c78
}

.btn-xs {
    width: 95px;
    margin-top: 5px !important;
    font-size: 0.775rem;
}

.form-control {
    font-size: 0.875rem !important;
}

#basic-info-card {
    display: block;
}

#card-header-title-left {
    float: left;
}

#card-header-title-right {
    float: right;
}

.toast {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    padding: 15px;
    background-color: #C3C3C4;
    color: #474747;
    border: 1px solid #C3C3C4;
    width: auto; /* Adjust width based on content */
    max-width: 90%; 
    white-space: nowrap;
    text-align: center;
}


.toast-success {
    background-color: #E9F3E8;
    color: #387C23;
    border: 1px solid #E9F3E8;
}

.toast-fail {
    background-color: #F9E8E9;
    color: #C83026;
    border: 1px solid #F9E8E9;
}

.toast-loading {
    background-color: #ECF0FD;
    color: #395FDD;
    border: 1px solid #ECF0FD;
    padding: 0px 0px 0px 15px;
}

.toast-info {
    background-color: #ECF0FD;
    color: #395FDD;
    border: 1px solid #ECF0FD;
}

#generic-toast-message
{
    margin-right: 10px;
}
#generic-toast-spinner {
    width: 1rem; 
    height: 1rem;
}
#selection-info
{
    display: none;
    float: right;
    margin: 15px 20px 0px 20px;
}

#add-user-header
{

    float: right;
    margin: 15px 20px 0px 20px;
}
.btn
{
    border-radius: 30px;
}


table {
    width: 100%; /* Make sure table takes the full width of its container */
}
th
{
    font-size: 13px;
}
td {
    vertical-align: middle; /* Vertically center the content */
    font-size: 12px;
    padding-top: 12px !important;
    padding-bottom: 5px !important;
}
.card
{
    margin-top: -35px !important;
}
.btn {
    vertical-align: middle; /* Center buttons vertically within their cell */
}

#team-card-header
{
    padding-top: 17px;
    padding-bottom: 17px;
}



.btn {
    border-radius: 30px;
}
.form-select
{
    font-size: 0.875rem;
}
.leads-table
{
    font-size: 0.875rem;
}
.signups-table
{
    font-size: 0.875rem;
}
#table-body
{
    font-size: 0.875rem;
}
  

/*  sticky positioning to the table header */
thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}


/* Base styles for all screen sizes */
.accordion-body {
    max-height: 400px; /* Default height */
    overflow-y: auto;
  }
  
  /* Adjust accordion height for larger screens */
  @media (min-width: 1600px) {
    .accordion-body {
      max-height: 600px; /* Larger height for bigger screens */
    }
  }
  
  @media (min-width: 2560px) {
    .accordion-body {
      min-height: 800px; /* Even larger height for ultra-wide screens */
    }
  }

/* uer creds media queries */

@media (min-width: 1371px) {
    .row-connector {
        display: flex;
        flex-wrap: nowrap; /* Keep items in a single line */
    }

    .col-md-3 {
        flex: 3; /* Ensure the column takes up 3 parts of the space */
    }

    .col-md-2 {
        flex: 2; /* Ensure the column takes up 2 parts of the space */
        max-width: none; /* Avoid max-width limitations */
    }

    .col-sm-1 {
        flex: 1; /* Ensure the column takes up 1 part of the space */
        max-width: none; /* Avoid max-width limitations */
        
    }
}
@media (max-width: 1400px) {
    .row-connector {
        display: flex;
        flex-wrap: nowrap; /* Keep items in a single line */
    }

    .col-md-3 {
        flex: 3.5; 
    }

    .col-md-2 {
        flex: 2.7; 
        max-width: none; /* Avoid max-width limitations */
    }

    .col-sm-1 {
        flex: 0.25; 
        max-width: none; /* Avoid max-width limitations */
    }

    .col-sm-1 .btn {
        font-size: 0.635rem; /* Normal button size */
        width: 83.5px;
    }
}


/* Stack columns and reduce button sizes when the screen width is between 768px and 1320px */
@media (max-width: 1320px) and (min-width: 768px) {
    .row-connector {
        flex-direction: column; /* Stack the columns vertically */
    }

    .col-md-2 {
        width: 100%; /* Full width for the column */
        margin-bottom: 10px; /* Add spacing between fields */
    }

    .col-sm-1 {
        width: 100%; /* Full width for buttons */
        margin-bottom: 10px; /* Add spacing */

    }

}
@media (max-width: 1529px) and (min-width: 768px) {

    #content-dashboard {
        padding: 3px;
    }

}
/* Layout adjustment for small screens (below 768px) */
@media (max-width: 767px) {
    .row-connector {
        flex-direction: column; /* Stack items vertically */
    }

    .col-md-2, .col-sm-1 {
        width: 100%; /* Full width for all columns */
    }

    .input-group-append {
        margin-top: 5px; /* Add spacing between input and eraser */
    }

    .de-activate-btn, .delete-btn {
        margin-bottom: 10px; /* Ensure buttons don't overlap */
    }

    .de-activate-btn .btn, .delete-btn .btn {
        font-size: 0.75rem; /* Make buttons even smaller on small screens */
    }

    #content-dashboard, #content-profile {
        padding: 3px;
    }
}

    /* Ensure the input does not shrink */
    #search-input {
        min-width: 280px; /* Set a minimum width as needed */
        width: auto;      /* Allow the input to grow but not shrink */
    }

@media (max-width: 1400px) {
    #table-body td {
        font-size: 0.7rem;  /* Reduce the font size */
        padding: 5px 5px 5px 32px; /* Reduce cell padding */
    }

    #table-body td .btn {
        font-size: 0.635rem; /* Normal button size */
        width: 83.5px;
    }
}

/* Centering the row contents */
.row-center {
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}

/* Optional: Custom class for equal spacing between columns */
.col-center {
    display: flex;
    justify-content: center; /* Center align content in each column */
}

#refresh-captcha-button {
    border-radius: var(--bs-btn-border-radius);
}

#company-list {
    max-height: 350px; overflow-y: auto; 
    margin-top: 15px;
}

#manage-consent-btn {
    position: fixed;
    bottom: 15px;
    right: 40px;
    border-radius: 12px;
    background-color: #FFFFFF;
    border-color: #e5e5e5;
    color: #253258;
}

.modal-footer {
    text-align: center;
    align-items: center;
    justify-content: center;
}


/* Adjustments for smaller screens */
@media (max-width: 767px) {
    .modal-footer .btn {
        margin-top: 10px; /* Add space between buttons when stacked */
    }
}

.btn-tertiary {
    transition: background-color 0.3s, color 0.3s;
}

.btn-tertiary:hover {
    background-color: #FB8500; /* Hover background color */
    color: white; /* Text color on hover */
}

#modal-generic-footer .btn {
    width: 170px;
}

.cookie-checkmarks {
    margin-top: -15px;
    
}

.form-check-inline {
    margin-right: 50px !important;
}

.empty-cell {
    display: inline-block;
    width: 1.5rem; /* Adjust to match button width */
    height: 1.5rem; /* Adjust to match button height */
}
/* SIDEBAR START */

  #sidebar-menu.collapsed {
    width: 105px;
  }
  
  #sidebar-menu .menu-text {
    display: inline-block;
    transition: opacity 0.6s ease;
}
  
  #sidebar-menu.collapsed .menu-text {
    display: none;
  }

  #report-card {
    transition: all 0.6s ease;
}
  
  #menu-title {
    transition: opacity 0.6s ease;
  }
  
  #sidebar-menu.collapsed #menu-title {
    display: none;
  }
 

  #card-body-report
  {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #sidebar-menu
  {
    margin-top: -15px;
    margin-bottom: 25px;
}

   .nav-link:hover
   {
    color: #4CC3FF;
   }
.nav-img
{
    height: 20px;
    width: 20px;
    margin-right: 15px;
}
#page-links {
    word-wrap: break-word;
    overflow-wrap: break-word; 
    white-space: normal;
  }
  
  #page-links .nav-link {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }


@media screen and (aspect-ratio: 16/9), screen and (aspect-ratio: 16/10) {
    #sidebar-menu {
        display: block;
    }

    #report-card {
        margin-left: 15%;
    }

    #container-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #report-container {
        margin: 0 auto;
        width: 70%;
    }

    .modal-content {
        width: 80%;
        margin: auto;
    }
}


@media screen and (aspect-ratio: 3/2) {
    #sidebar-menu {
        display: block;
    }

    #report-card {
        margin-left: 20%;
    }

    #container-top {
        flex-direction: column;
        align-items: flex-start;
    }

    #report-container {
        margin: 0 auto;
        width: 80%;
    }

    .modal-content {
        width: 70%;
        margin: auto;
    }
}



@media (max-width: 1150px) {

    #sidebar-menu
    {
        width: -webkit-fill-available;
    }

    #toggle-menu-icon, .menu-text {
        display: none !important;
    }

    #sidebar-menu-card {
        --bs-card-spacer-y: 0px;
        
    }

    .nav-tabs {
        --bs-nav-tabs-border-color: none;
    }

    .nav-img {
        margin-right: 30px;
    }

    #page-links {
        flex-wrap: nowrap;
        gap: 30px;
        align-items: center;
    }
    
    #page-links .nav-link {
        white-space: nowrap;
        display: flex;
    }
    
    #sidebar-menu-card-body{
        overflow: auto;
        scrollbar-width: none;
    }
    #sidebar-menu-card-body::-webkit-scrollbar {
        display: none; 
    }
    .nav-tabs:not(.nav-vertical) .nav-link
    {
        margin-bottom: -24px;
    }
}

.full-width {
    width: 100%;
}

#sidebar-menu {
    opacity: 0;
    transform: translateX(-100%); 
    transition: transform 0.6s ease, opacity 0.65s ease, width 0.6s ease;
}

#sidebar-menu.show-side-menu {
    opacity: 1; 
    transform: translateX(0);
}

.avatar-sm,
.avatar-sm .avatar-initials
{
    width: 2.5rem;
    height: 2.3rem;
}

.link-hover:hover {
    color: #4CC3FF
}

#paypal-button {
    width: 255px;
    margin: auto;
}

#current-subscription {
    width: 30%;
    margin: auto;
}

#report-container
{
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}

#card-body-report 
{
  position: relative;
}

#logo-animation 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  width: auto;
  height: auto;
}