/* :root {
        --mulish-header-24-bold: 24px;
        --mulish-header-20-bold: 20px;
        --mulish-header-18-bold: 18px;
        --mulish-body-20-bold: 20px;
        --mulish-body-18-bold: 18px;
        --mulish-body-16-semibold: 16px;
        --mulish-body-14-regular: 14px;
        --mulish-body-12-bold: 12px;
    
        --mulish-weight-bold: 700;
        --mulish-weight-semibold: 600;
        --mulish-weight-regular: 400;
    
        --inter-body-20-medium: 20px;
        --inter-body-18-semibold: 18px;
        --inter-body-16-regular: 16px;
        --inter-body-14-regular: 14px;
        --inter-body-14-bold: 14px;
    
        --inter-weight-medium: 500;
        --inter-weight-semibold: 600;
        --inter-weight-regular: 400;
        --inter-weight-bold: 700;
    
        --font-family-mulish: 'Mulish', sans-serif;
        --font-family-inter: 'Inter', sans-serif;


    --primary-green: #216767;
    --primary-blue: #28396A;

    --secondary-green: #34B1B1;
    --secondary-blue: #4D6ABF;

    --neutral-sea-green: #B8E4E4;
    --neutral-green: #D2E0D5;
    --neutral-blue: #F6FFF8;
    --neutral-white: #FFFFFF;
    --neutral-light-green: #C6EEC6;

    --black-1: #222222;
    --black-2: #323233;
    --black-3: #303436;
    --grey-5: #696969;

    --status-red-1: #E5050E;
    --status-red-2: #E77676;
    --status-orange: #FF6145;
    --status-green: #80F19E;
    --status-yellow: #F4E96E;

    --disabled-green: #80B3B3;
    --disabled-blue: #B9C6E9;
    } */


:root {
    /* Colors */
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --border-color: #ccc;
    --background-light: #e7e7e7;
    --background-dragover: #e9ecef;
    --text-muted: #6c757d;
    --text-dark: #333;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --badge-bg: #f8f9fa;
    --badge-text: #212529;
    --border-light: rgb(216, 211, 211);
    --success-color: #28a745;
    --error-color: #dc3545;
    --bg-color: #fff;
    --border-color: #ccc;
    --text-color: #333;
    --primary-hover-color: #007bff;
    --checkbox-accent: black;
    --warning-symbol: red;
    --th-background-color: #f4f4f4;
    --slideDown-duration: 0.5s;
    --slideDown-timing: ease-in-out;
    --slideDown-start: -100%;
    --slideDown-end: 0;
    --slideDown-opacity-start: 0;
    --slideDown-opacity-end: 1;
    --enabled-color: green;
    --disabled-color: red;
    --unknown-color: grey;
    --indicator-size: 10px;
    --margin-size: 5px;

    --table-margin-top: 50px;
    --table-width: 100%;
    --border-style: 1px solid #ddd;
    --cell-padding: 8px;
    --header-bg: #f4f4f4;
    --text-align-header: left;

    --box-top: 300px;
    --box-left: 50px;
    --box-right: 50px;
    --box-padding: 20px;
    --box-height-offset: 320px;

    /* Colors */
    --box-bg-color: #ffffff;
    --outer-border-color: #333;
    --inner-border-color: #999;
    --table-bg: white;

    /* Table */
    --table-padding: 10px;
    --table-text-align: left;

    --th-td-border-color: #ddd;
    --th-bg-color: #f4f4f4;
    --dropdown-bg: white;
    --dropdown-border: #ccc;
    --role-dropdown-hover-bg: #B8E4E4;
    --dropdown-content-div-hover-bg: #f0f0f0;

    /* Sizes */
    --offcanvas-width: 424px;
    --padding-default: 1rem;
    --padding-small: 0.5rem;
    --padding-top: 3rem;
    --font-size-small: 0.9rem;
    --font-size-tiny: 0.75rem;
    --border-radius: 5px;
    --gap-small: 0.5rem;
    --icon-size: 16px;
    --drodrag-area-height: 32%;
    --line-height: 1.5;
    /* From previous request */
    --font-size-vertical-devider: 1.5rem;
    --font-size-vertical-devider-padding: 0.2rem;

    --border-radius: 4px;
    --btn-border-radius: 3px;
    --delete-btn-font-size-small: 12px;
    --url-item-font-size-medium: 13px;
    --remove-btn-font-size-large: 14px;
    --delete-btn-padding-small: 4px 8px;
    --url-item-padding-medium: 8px 10px;
    --remove-btn-padding-large: 2px 6px;
    --margin-bottom-large: 80px;
    --url-list-padding: 0;
    --url-list-width: 100%;
    --checkbox-margin-right: 8px;
    --checkbox-align: middle;
    --checkbox-margin-right: 8px;
    /* --insert-box-padding-left: 10px; */
    --url-item-margin-bottom: 10px;
    --warning-symbol-width: 12px;
    --warning-symbol-height: 12px;
    --warning-symbol-vertical-align: middle;
    --warning-symbol-right: 5px;
    --margin-right: 5px;
    --table-t-body-height: 50px;
    --table-t-body-padding: 15px 10px;
    --table-border-color: rgb(180, 175, 175);
    --table-border-width: 100;
    --table-border: 2px solid;
    --th-td-border-top: 2px solid;
    --th-td-border-bottom: 2px solid;
    --th-td-padding: 3px;
    --th-td-text-align: left;
    --th-first-child-border-left: 2px solid;
    --th-last-child-border-right: 2px solid;
    --add-user-margin-top: 40px;
    --add-contact-icon-width: 64px;
    --add-contact-icon-height: 64px;
    --add-contact-icon-background-image: url("/mnt/data/A_vector_graphic_icon_in_solid,_dark_gray_color_re.png");
    --add-contact-icon-background-size: contain;
    --add-contact-icon-background-repeat: no-repeat;
    --add-contact-icon-background-position: center;
    --table-border-collapse: collapse;

    --th-td-cell-padding: 10px;
    --dropdown-padding: 4px 8px;
    --role-dropdown-padding: 4px 8px;
    --role-dropdown-icon-padding: 5px;
    --sort-arrow-padding: 8px;
    --dropdown-top-margin: 7px;
    --dropdown-right-offset: -39px;
    --dropdown-top-position: 100%;
    --dropdown-min-width: 201px;
    --dropdown-z-index: 10000;
    --dropdown-border-radius: 5px;
    --role-input-margin: 10px;
    --role-dropdown-min-width: 153px;
    --role-dropdown-right-offset: -2px;
    --role-drop-content-font-size: 14px;
    --role-dropdown-font-size: 16px;
    --input-scale: 1.1;
    --normal-weight: 600;
    --bold-weight: bold;
    --sort-dropdown-tick: 3px;
    --form-check-input-margin: 6px;
    --form-check-span-padding: 5px;
    --form-check-gap: 0.5rem;

    --mulish-header-24-bold: 24px;
    --mulish-header-20-bold: 20px;
    --mulish-header-18-bold: 18px;
    --mulish-body-20-bold: 20px;
    --mulish-body-18-bold: 18px;
    --mulish-body-16-semibold: 16px;
    --mulish-body-14-regular: 14px;
    --mulish-body-12-bold: 12px;

    --mulish-weight-bold: 700;
    --mulish-weight-semibold: 600;
    --mulish-weight-regular: 400;

    --inter-body-20-medium: 20px;
    --inter-body-18-semibold: 18px;
    --inter-body-16-regular: 16px;
    --inter-body-14-regular: 14px;
    --inter-body-14-bold: 14px;

    --inter-weight-medium: 500;
    --inter-weight-semibold: 600;
    --inter-weight-regular: 400;
    --inter-weight-bold: 700;

    /* Font Families */
    --font-family-mulish: "Mulish", sans-serif;
    --font-family-inter: "Inter", sans-serif;

    /* Colors */
    --primary-green: #216767;
    --primary-blue: #28396a;

    --secondary-green: #34b1b1;
    --secondary-blue: #4d6abf;

    --neutral-sea-green: #b8e4e4;
    --neutral-green: #d2e0d5;
    --neutral-blue: #f6fff8;
    --neutral-white: #ffffff;
    --neutral-light-green: #c6eec6;

    --black-1: #222222;
    --black-2: #323233;
    --black-3: #303436;
    --grey-5: #696969;

    --status-red-1: #e5050e;
    --status-red-2: #e77676;
    --status-orange: #ff6145;
    --status-green: #80f19e;
    --status-yellow: #f4e96e;

    --disabled-green: #80b3b3;
    --disabled-blue: #b9c6e9;
    --reset-red: #be5050;

    --card-width: 700px;
    --card-height: 479px;
    --card-border-radius: 4px;
    --inter-title-32-bold: 32px;
    --browser-title-width: 286px;
    --browser-title-height: 39px;
    --browser-title-margin-top: 32px;
    --browser-title-margin-left: 32px;

    --dropdown-menu-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --dropdown-menu-link-color: #333;
    --dropdown-menu-link-hover-bg: #f1f1f1;
    --dropdown-menu-bg-color: white;
    --icon-button-color: #333;

    --status-col-padding: 10px;
    --status-wrapper-gap: 6px;
    --status-text-gap: 5px;
    --action-buttons-gap: 10px;
    --action-buttons-z-index: 10;
    --icon-button-margin: 5px;
    --icon-button-font-size: 16px;
    --dropdown-menu-top: 28px;
    --dropdown-menu-border: 1px solid #ccc;
    --dropdown-menu-border-radius: 6px;
    --dropdown-menu-min-width: 160px;
    --dropdown-menu-z-index: 999;
    --dropdown-menu-link-padding: 0px 16px;
    --opacity: 100%;

    --sidebar-width: 64px;
    --sidebar-bg-color: #216767;
    --sidebar-height: 800px;

    /* Nav link variables */
    /* --nav-link-padding: 12px 0;
        --nav-link-color: #fff;
        --nav-link-active-bg: #34B1B1;
        --nav-link-active-color: #fff;
        --nav-link-active-radius: 8px; */

    /* Badge variables */
    --badge-font-weight: 500;

    /* Button variables */
    --btn-outline-black-border: 1px solid rgb(99, 96, 96);
    --btn-outline-black-color: rgb(119, 114, 114);
    --btn-outline-black-hover-bg: rgb(121, 116, 116);
    --btn-outline-black-hover-color: white;
    --btn-dimmed-opacity: 0.5;
    --btn-change-bg: #6c757d;
    --btn-change-color: #fff;
    --btn-change-disabled-bg-color: #5a6268;
    --btn-change-disabled-color: #f8f9fa;
    --btn-cancel-bg: #fff;
    --btn-cancel-border: 1px solid #ced4da;
    --btn-cancel-color: #000;

    /* Edit button custom */
    --edit-btn-custom-bg: #4a4a4a;
    --edit-btn-custom-color: white;
    --edit-btn-custom-padding: 2px 6px;
    --edit-btn-custom-font-size: 0.85rem;
    --edit-btn-custom-radius: 2px;
    --edit-btn-custom-width: 100px;
    --edit-btn-custom-hover-bg: #2f3337;

    /* Text editor */
    --text-editor-border: 1px solid #ccc;
    --text-editor-radius: 6px;
    --text-editor-padding: 15px;
    --text-editor-bg: #f9f9f9;

    /* URL text */
    --url-text-white-space: pre-line;
    --url-text-font-size: 14px;
    --url-text-padding-bottom: 5px;

    /* Button group */
    --button-group-gap: 5px;
    --button-group-padding: 10px;
    --button-group-bg: #f8f9fa;

    /* Counter */
    --counter-btn-width: 30px;
    --counter-btn-height: 30px;
    --counter-btn-font-size: 1.2em;
    --counter-btn-bg: #e0e0e0;
    --counter-btn-border: 1px solid #ccc;
    --counter-btn-radius: 4px;
    --counter-btn-color: #333;
    --counter-display-width: 40px;
    --counter-display-height: 30px;
    --counter-display-margin-bottom: 2px;

    /* Close button styling */
    --close-btn-color: #216767;
    --close-btn-size: 2rem;
    --close-btn-dim: 24px;
    --close-btn-top: 5px;
    --close-btn-left: 470px;

    /* Modal Dimensions */
    --modal-max-width: 456px;
    --modal-height: 308px;
    --modal-padding: 24px;
    --modal-radius: 12px;

    /* Font & Colors */
    --font-color-primary: #28396a;
    --font-size-body: 14px;

    /* Input Styling */
    --deleteConfirmInput-input-width: 273px;
    --deleteConfirmInput-input-height: 40px;
    --deleteConfirmInput-input-radius: 4px;
    --deleteConfirmInput-input-padding: 4px 8px;
    --deleteConfirmInput-input-gap: 10px;
    --resetUserModal-input-gap: 10px;

    /* Button Styling */
    --btn-width: 117px;
    --btn-height: 40px;
    --btn-padding: 13.37px 26.74px;
    --btn-gap: 13.37px;
    --btn-bg-confirm: #216767;
    --btn-color-white: white;

    /* Outline Button */
    --btn-outline-border: #216767;
    --btn-outline-color: #216767;
    --btn-outline-min-width: 100px;

    /* Reset Modal Specific */
    --reset-modal-max-width: 400px;
    --reset-modal-bg: white;
    --reset-modal-border: 1px solid #888;
    --reset-btn-bg: #216767;

    --hover-dropdown-menu-top: 28px;
    --hover-dropdown-menu-border-radius: 0px 0px 4px 4px;
    --hover-dropdown-menu-min-width: 170px;
    --hover-dropdown-menu-height: auto;
    --hover-dropdown-menu-z-index: 9999;
    --hover-dropdown-menu-link-padding: 12px 16px;
    --opacity: 100%;
    --hover-dropdown-menu-container-padding: 0px 16px 4px 0px;
    --hover-dropdown-menu-item-gap: 8px;
    --hover-dropdown-menu-bg-color: #FDFFFE;
    --hover-dropdown-menu-box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    --tooltip-bg-default: #4d6abf;
    --tooltip-left-email: 90px;
    --tooltip-left-group: -40px;
    --tooltip-left-browser: 90px;
    --tooltip-left-component: -20px;

    --tooltip-width: 124px;
    --tooltip-height: 32px;
    --tooltip-top: 40px;
    --tooltip-padding: 6px 10px;
    --tooltip-gap: 10px;
    --tooltip-border-radius: 6px;
    --tooltip-z-index: 1000;

    --tooltip-font-family: "Mulish", sans-serif;
    --tooltip-font-size: 12px;
    --tooltip-font-weight: 600;
    --tooltip-color: #fff;

    --search-input-padding: 10px;
    --search-input-padding-right: 35px;
    --search-input-padding-left: 12px;
    --search-input-border-radius: 6px;
    --search-input-border-color: #ccc;
    --search-input-font-size: 14px;
    --search-wrapper-width: 300px;
    --search-wrapper-top: 159px;
    --search-icon-color: #28396A;
    --search-icon-right: 10px;
    --search-icon-top: 50%;
    --search-input-width: 100%;
    --dropdown-search-menu-top: 100%;
    --dropdown-search-menu-left: 0;
    --dropdown-search-menu-right: 0;
    --dropdown-search-menu-bg-color: white;
    --dropdown-search-menu-border-color: #ccc;
    --dropdown-search-menu-max-height: 250px;
    --dropdown-search-menu-z-index: 999;
    --dropdown-search-menu--border-radius: 4px;
    --dropdown-search-menu-item-padding: 10px 15px;
    --dropdown-search-menu-hover-bg: #f5f5f5;
    --dropdown-search-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --dropdown-search-menu-item-border: 1px solid #eee;
    --dropdown-search-email-font-size: 400;
    --dropdown-search-email-color: #696969;
    --dropdown-search-email-margin-top: 2px;
    --no-match-font-weight: bold;
    --no-match-color: #131111;
    --no-match-alert-margin-left: 10px;
    --no-data-color: #333;
    --no-data-row: 200px;

    /* main-container */
    --main-container-top: 76px;
    --main-container-left: 88px;

    /* support-title-container */
    --support-title-container-width: 100%;
    --support-title-container-height: 44px;
    --support-title-container-gap: 8px;
    --support-title-container-opacity: 100%;

    /* support-title */
    --support-title-width: 100%;
    --support-title-height: 24px;
    --support-title-opacity: 100%;
    --support-title-font-family: "Mulish", sans-serif;
    --support-title-font-weight: 700;
    --support-title-font-size: 24px;
    --support-title-color: #28396a;
    --support-title-line-height: 100%;

    /* support-subtitle */
    --support-subtitle-width: 100%;
    --support-subtitle-height: 12px;
    --support-subtitle-opacity: 100%;
    --support-subtitle-font-family: "Inter", sans-serif;
    --support-subtitle-font-weight: 400;
    --support-subtitle-font-size: 16px;
    --support-subtitle-line-height: 140%;
    --support-subtitle-letter-spacing: 0%;
    --support-subtitle-color: #28396a;

    /* support-card-container */
    --support-card-container-width: 100%;
    --support-card-container-height: auto;
    --support-card-container-top: 82px;
    --support-card-container-gap: 8px;

    /* list-group-item */
    --list-group-item-width: 100%;
    --list-group-item-min-height: 84px;
    --list-group-item-gap: 8px;
    --list-group-item-padding: 16px;
    --list-group-item-margin-bottom: 4px;
    --list-group-item-background-color: #ffffff;
    --list-group-item-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
    --list-group-item-border-radius: 4px;
    --list-group-item-transition: height 0.3s ease;

    /* list-group-item-container */
    --list-group-item-container-width: 100%;
    --list-group-item-container-height: 52px;

    /* inner-content */
    --inner-content-width: 100%;
    --inner-content-height: 40px;
    --inner-content-gap: 8px;

    /* card-title */
    --card-title-width: 100%;
    --card-title-height: 20px;
    --card-title-gap: 8px;

    /* card-subtitle */
    --card-subtitle-width: 100%;
    --card-subtitle-height: 20px;
    --card-subtitle-font-family: "Mulish", sans-serif;
    --card-subtitle-font-weight: 700;
    --card-subtitle-font-size: 20px;
    --card-subtitle-line-height: 100%;
    --card-subtitle-letter-spacing: 0%;
    --card-subtitle-color: #28396a;

    /* card-text */
    --card-text-width: 100%;
    --card-text-height: 12px;
    --card-text-gap: 10px;

    /* card-subtext */
    --card-subtext-width: 100%;
    --card-subtext-height: 12px;
    --card-subtext-font-family: "Inter", sans-serif;
    --card-subtext-font-weight: 400;
    --card-subtext-font-size: 16px;
    --card-subtext-line-height: 140%;
    --card-subtext-letter-spacing: 0%;
    --card-subtext-color: #28396a;

    /* icon-container */
    --icon-container-width: 24px;
    --icon-container-height: 52px;
    --icon-container-gap: 24px;

    /* icon-container i */
    --icon-container-i-width: 24px;
    --icon-container-i-height: 24px;
    --icon-container-i-color: #28396a;
    --icon-container-i-transition: transform 0.3s ease;

    /* icon-container i.rotate-up */
    --icon-container-i-rotate-up-transform: rotate(180deg);

    /* card-add-title */
    --card-add-title-width: 100%;
    --card-add-title-height: 20px;
    --card-add-title-gap: 8px;

    /* card-add-subtitle */
    --card-add-subtitle-width: 100%;
    --card-add-subtitle-height: 20px;
    --card-add-subtitle-font-family: "Mulish", sans-serif;
    --card-add-subtitle-font-weight: 700;
    --card-add-subtitle-font-size: 20px;
    --card-add-subtitle-line-height: 100%;
    --card-add-subtitle-letter-spacing: 0%;
    --card-add-subtitle-color: #28396a;

    /* card-add-text */
    --card-add-text-width: 100%;
    --card-add-text-height: 12px;
    --card-add-text-gap: 10px;

    /* card-add-subtext */
    --card-add-subtext-width: 100%;
    --card-add-subtext-height: 12px;
    --card-add-subtext-font-family: "Inter", sans-serif;
    --card-add-subtext-font-weight: 400;
    --card-add-subtext-font-size: 16px;
    --card-add-subtext-line-height: 140%;
    --card-add-subtext-letter-spacing: 0%;
    --card-add-subtext-color: #28396a;

    /* card-blackcard-title */
    --card-blackcard-title-width: 305px;
    --card-blackcard-title-height: 20px;
    --card-blackcard-title-gap: 8px;

    /* card-blackcard-subtitle */
    --card-blackcard-subtitle-width: 305px;
    --card-blackcard-subtitle-height: 20px;
    --card-blackcard-subtitle-font-family: "Mulish", sans-serif;
    --card-blackcard-subtitle-font-weight: 700;
    --card-blackcard-subtitle-font-size: 20px;
    --card-blackcard-subtitle-line-height: 100%;
    --card-blackcard-subtitle-letter-spacing: 0%;
    --card-blackcard-subtitle-color: #28396a;

    /* card-blackcard-text */
    --card-blackcard-text-width: 428px;
    --card-blackcard-text-height: 12px;
    --card-blackcard-text-gap: 10px;

    /* card-blackcard-subtext */
    --card-blackcard-subtext-width: 428px;
    --card-blackcard-subtext-height: 12px;
    --card-blackcard-subtext-font-family: "Inter", sans-serif;
    --card-blackcard-subtext-font-weight: 400;
    --card-blackcard-subtext-font-size: 16px;
    --card-blackcard-subtext-line-height: 140%;
    --card-blackcard-subtext-letter-spacing: 0%;
    --card-blackcard-subtext-color: #28396a;

    /* card-browsercard-title */
    --card-browsercard-title-width: 238px;
    --card-browsercard-title-height: 20px;
    --card-browsercard-title-gap: 8px;

    /* card-browsercard-subtitle */
    --card-browsercard-subtitle-width: 238px;
    --card-browsercard-subtitle-height: 20px;
    --card-browsercard-subtitle-font-family: "Mulish", sans-serif;
    --card-browsercard-subtitle-font-weight: 700;
    --card-browsercard-subtitle-font-size: 20px;
    --card-browsercard-subtitle-line-height: 100%;
    --card-browsercard-subtitle-letter-spacing: 0%;
    --card-browsercard-subtitle-color: #28396a;

    /* card-browsercard-text */
    --card-browsercard-text-width: 440px;
    --card-browsercard-text-height: 12px;
    --card-browsercard-text-gap: 10px;

    /* card-browsercard-subtext */
    --card-browsercard-subtext-width: 440px;
    --card-browsercard-subtext-height: 12px;
    --card-browsercard-subtext-font-family: "Inter", sans-serif;
    --card-browsercard-subtext-font-weight: 400;
    --card-browsercard-subtext-font-size: 16px;
    --card-browsercard-subtext-line-height: 140%;
    --card-browsercard-subtext-letter-spacing: 0%;
    --card-browsercard-subtext-color: #28396a;

    /* card-contactus-title */
    --card-contactus-title-width: 105px;
    --card-contactus-title-height: 20px;
    --card-contactus-title-gap: 8px;

    /* card-contactus-subtitle */
    --card-contactus-subtitle-width: 105px;
    --card-contactus-subtitle-height: 20px;
    --card-contactus-subtitle-font-family: "Mulish", sans-serif;
    --card-contactus-subtitle-font-weight: 700;
    --card-contactus-subtitle-font-size: 20px;
    --card-contactus-subtitle-line-height: 100%;
    --card-contactus-subtitle-letter-spacing: 0%;
    --card-contactus-subtitle-color: #28396a;

    /* card-contactus-text */
    --card-contactus-text-width: 440px;
    --card-contactus-text-height: 12px;
    --card-contactus-text-gap: 10px;

    /* card-contactus-subtext */
    --card-contactus-subtext-width: 440px;
    --card-contactus-subtext-height: 12px;
    --card-contactus-subtext-font-family: "Inter", sans-serif;
    --card-contactus-subtext-font-weight: 400;
    --card-contactus-subtext-font-size: 16px;
    --card-contactus-subtext-line-height: 140%;
    --card-contactus-subtext-letter-spacing: 0%;
    --card-contactus-subtext-color: #28396a;

    /* card-faq-title */
    --card-faq-title-width: 51px;
    --card-faq-title-height: 20px;
    --card-faq-title-gap: 8px;

    /* card-faq-subtitle */
    --card-faq-subtitle-width: 51px;
    --card-faq-subtitle-height: 20px;
    --card-faq-subtitle-font-family: "Mulish", sans-serif;
    --card-faq-subtitle-font-weight: 700;
    --card-faq-subtitle-font-size: 20px;
    --card-faq-subtitle-line-height: 100%;
    --card-faq-subtitle-letter-spacing: 0%;
    --card-faq-subtitle-color: #28396a;

    /* card-faq-text */
    --card-faq-text-width: 540px;
    --card-faq-text-height: 12px;
    --card-faq-text-gap: 10px;

    /* card-faq-subtext */
    --card-faq-subtext-width: 540px;
    --card-faq-subtext-height: 12px;
    --card-faq-subtext-font-family: "Inter", sans-serif;
    --card-faq-subtext-font-weight: 400;
    --card-faq-subtext-font-size: 16px;
    --card-faq-subtext-line-height: 140%;
    --card-faq-subtext-letter-spacing: 0%;
    --card-faq-subtext-color: #28396a;

    /* faq-content */
    --faq-content-width: 1092px;
    --faq-content-height: auto;
    --faq-content-border-bottom: 1px solid #eff0f1;
    --faq-content-padding: 18px 16px 16px 24px;
    --faq-content-gap: 16px;

    /* faq-content.hidden */
    --faq-content-hidden-display: none;
    --faq-content-hidden-height: 0;
    --faq-content-hidden-overflow: hidden;
    --faq-content-hidden-margin-bottom: 0;

    /* faq-title */
    --faq-title-width: 1052px;
    --faq-title-height: 22px;
    --faq-title-color: #28396a;
    --faq-title-font-family: "Inter", sans-serif;
    --faq-title-font-weight: 600;
    --faq-title-font-size: 18px;
    --faq-title-line-height: 120%;
    --faq-title-letter-spacing: 0%;

    /* faq-text */
    --faq-text-width: 1052px;
    --faq-text-height: 47px;
    --faq-text-color: #28396a;
    --faq-text-font-family: "Inter", sans-serif;
    --faq-text-font-weight: 400;
    --faq-text-font-size: 16px;
    --faq-text-line-height: 160%;
    --faq-text-letter-spacing: 0%;

    /* read-text */
    --read-text-font-family: "Inter", sans-serif;
    --read-text-font-size: 16px;
    --read-text-line-height: 160%;
    --read-text-letter-spacing: -1.5%;
    --read-text-color: #216767;

    /* hidden */
    --hidden-display: none;
    --hidden-height: 0;
    --hidden-overflow: hidden;

    /* req-container */
    --req-container-width: 1136px;
    --req-container-height: auto;
    --req-container-gap: 8px;
    --req-container-padding-top: 30px;

    /* req-container.hidden */
    --req-container-hidden-display: none;
    --req-container-hidden-height: 0;
    --req-container-hidden-overflow: hidden;

    /* req-text */
    --req-text-width: 1136px;
    --req-text-height: 23px;
    --req-text-gap: 4px;

    /* req-subtext */
    --req-subtext-width: 1136px;
    --req-subtext-height: 20px;
    --req-subtext-font-family: "Mulish", sans-serif;
    --req-subtext-font-weight: 700;
    --req-subtext-font-size: 20px;
    --req-subtext-line-height: 100%;
    --req-subtext-letter-spacing: 0%;
    --req-subtext-color: #323233;

    /* btn-container */
    --btn-container-width: 249px;
    --btn-container-height: 40px;
    --btn-container-gap: 16px;

    /* custom-flex-container */
    --custom-flex-container-width: 148px;
    --custom-flex-container-height: 40px;

    /* request-btn-container */
    --request-btn-container-width: 116px;
    --request-btn-container-height: 40px;
    --request-btn-container-opacity: 100%;

    /* request-outline-btn */
    --request-outline-btn-width: 117px;
    --request-outline-btn-height: 40px;
    --request-outline-btn-border-radius: 4px;
    --request-outline-btn-padding: 16px 24px 16px 24px;
    --request-outline-btn-background-color: #216767;
    --request-outline-btn-box-shadow: 0px 0.84px 4.18px 0px #0000004d;

    /* request-btn */
    --request-btn-width: 78px;
    --request-btn-height: 20px;
    --request-btn-font-family: "Mulish", sans-serif;
    --request-btn-font-weight: 700;
    --request-btn-font-size: 20px;
    --request-btn-line-height: 100%;
    --request-btn-letter-spacing: 0%;
    --request-btn-padding: 0px 38px 12px 30px;
    --request-btn-color: #ffffff;

    /* cancel-btn-container */
    --cancel-btn-container-width: 117px;
    --cancel-btn-container-height: 40px;
    --cancel-btn-container-border-radius: 4px;
    --cancel-btn-container-padding: 16px 24px;
    --cancel-btn-container-border: 1px solid #216767;
    --cancel-btn-container-color: #ffffff;
    --cancel-btn-container-box-shadow: 0px 0.84px 4.18px 0px #0000004d;

    /* cancel-btn */
    --cancel-btn-width: 64px;
    --cancel-btn-height: 20px;
    --cancel-btn-font-family: "Mulish", sans-serif;
    --cancel-btn-font-weight: 700;
    --cancel-btn-font-size: 20px;
    --cancel-btn-line-height: 100%;
    --cancel-btn-letter-spacing: 0%;
    --cancel-btn-padding: 0px 38px 12px 30px;
    --cancel-btn-color: #216767;

    /* number-container */
    --number-container-width: 68px;
    --number-container-height: 40px;
    --number-container-background-color: #f6fff8;

    /* license-number */
    --license-number-top: 10px;
    --license-number-left: 10px;
    --license-number-width: 48px;
    --license-number-height: 20px;
    --license-number-font-family: "Mulish", sans-serif;
    --license-number-font-weight: 700;
    --license-number-font-size: 20px;
    --license-number-line-height: 100%;
    --license-number-letter-spacing: 0;
    --license-number-color: #323233;

    /* minus-btn-container */
    --minus-btn-container-width: 40px;
    --minus-btn-container-height: 40px;
    --minus-btn-container-border-top-right-radius: 4px;
    --minus-btn-container-border-bottom-right-radius: 4px;
    --minus-btn-container-border-top-left-radius: 4px;
    --minus-btn-container-border-bottom-left-radius: 4px;
    --minus-btn-container-background-color: #216767;
    --minus-btn-container-opacity: 100%;
    --minus-btn-container-color: #ffffff;

    /* add-btn-container */
    --add-btn-container-width: 40px;
    --add-btn-container-height: 40px;
    --add-btn-container-border-top-right-radius: 4px;
    --add-btn-container-border-bottom-right-radius: 4px;
    --add-btn-container-background-color: #216767;
    --add-btn-container-color: #ffffff;

    /* minus-input, add-input */
    --minus-input-width: 24px;
    --minus-input-height: 24px;
    --minus-input-top: 8px;
    --minus-input-left: 8px;

    /* minus-btn i, add-btn i */
    --minus-btn-i-width: 14px;
    --minus-btn-i-height: 2px;
    --minus-btn-i-top: 11px;
    --minus-btn-i-left: 5px;
    --minus-btn-i-color: #ffffff;

    /* button-wrapper */
    --button-wrapper-gap: 16px;


    --delete-color-primary: #323233;
    --delete-color-header: #28396A;
    --delete-color-autofill-bg: #F6FFF8;

    /* FONTS */
    --delete-font-primary: 'Inter', sans-serif;
    --delete-font-secondary: 'Mulish', sans-serif;

    /* FONT SIZES */
    --delete-font-size-header: 20px;
    --delete-font-size-body: 16px;

    /* FONT WEIGHTS */
    --delete-font-weight-bold: 700;
    --delete-font-weight-regular: 400;

    /* DIMENSIONS */
    --delete-modal-width: 408px;
    --delete-modal-header-height: 24px;
    --delete-header-height: 84px;
    --delete-title-width: 240px;
    --delete-title-height: 20px;
    --delete-footer-height: 128px;
    --delete-input-height: 64px;
    --delete-button-width: 250px;
    --delete-button-gap: 24px;
    --delete-gap-small: 4px;
    --delete-gap-large: 36px;


    /* MSP MODAL STYLES*/
    --modal-width: 456px;
    --modal-height-msp: 198px;
    --modal-padding: 24px;
    --modal-gap: 48px;
    --modal-bg: #FFFFFF;
    --modal-radius: 4px;

    --modal-header-width: 408px;
    --modal-header-height: 62px;
    --modal-header-gap: 36px;

    --modal-inner-header-width: 408px;
    --modal-inner-header-height: 62px;
    --modal-inner-header-gap: 4px;

    --modal-title-width: 408px;
    --modal-title-height: 24px;
    --modal-title-gap: 4px;

    --reset-title-width: 271px;
    --reset-title-height: 20px;
    --reset-title-font-weight: 700;
    --reset-title-font-size: 20px;
    --reset-title-line-height: 100%;
    --reset-title-color: #28396A;

    --reset-orgs-width: 376px;
    --reset-orgs-height: 34px;
    --reset-orgs-font-size: 16px;
    --reset-orgs-line-height: 140%;

    --reset-orgs-p-font-weight: 400;

    --selected-orgs-color: #414141;

    --activate-resend-orgs-font-weight: 700;
    --activate-resend-orgs-color: #323233;

    --reset-footer-width: 250px;
    --reset-footer-height: 40px;
    --reset-footer-gap: 16px;

    --activate-title-width: 240px;
    --activate-title-height: 20px;
    --activate-title-font-weight: 700;
    --activate-title-font-size: 20px;
    --activate-title-line-height: 100%;
    --activate-title-color: #28396A;

    --activate-resend-footer-width: 408px;
    --activate-resend-footer-height: 40px;
    --activate-resend-footer-gap: 24px;

    --activate-outline-width: 123.48px;
    --activate-outline-height: 40px;
    --activate-outline-padding: 13.3705px 26.7409px;
    --activate-outline-gap: 6.69px;
    --activate-outline-bg: #216767;
    --activate-outline-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    --activate-outline-radius: 4px;

    --btn-container-width: 256.48px;
    --btn-container-height: 40px;
    --btn-container-gap: 24px;

    --resend-btn-width: 250px;
    --resend-btn-height: 40px;
    --resend-btn-gap: 16px;

    --suspend-orgs-width: 376px;
    --suspend-orgs-font-weight: 700;
    --suspend-orgs-font-size: 16px;
    --suspend-orgs-bottom: 4px;

    --suspend-orgs-p-font-weight: 400;

    --type-delete-content-width: 273px;
    --type-delete-content-gap: 8px;
    --type-delete-content-left: 10px;

    --suspend-input-bg: #F6FFF8;
    --suspend-input-border: 1px solid #D2E0D5;

    --delete-btn-container-right: 140px;
    --delete-btn-container-bottom: 15px;

    --delete-btn-text-width: 71px;
    --delete-btn-text-height: 24px;
    --delete-btn-text-font-weight: 700;
    --delete-btn-text-font-size: 16px;
    --delete-btn-text-line-height: 23px;
    --delete-btn-text-letter-spacing: 0.05em;
    --delete-btn-text-color: #FFFFFF;
    --delete-btn-text-top: 1px;
    --delete-btn-text-right: 4px;
    --modal-Bulk-Delete-width: 362px;
    --bulk-delete-btn-text-left: 4px;

    /* Colors */
    --dashboard-sidebar-offset: 88px;
    --dashboard-card-background: #FFFFFF;
    --dashboard-card-border-color: #CCE6D2;
    --dashboard-header-text-color: #28396A;
    --dashboard-link-color: #216767;
    --dashboard-gray-text: #696969;
    --dashboard-light-gray-border: #EFF0F1;
    --dashboard-blue-accent: #4D6ABF;
    --dashboard-green-highlight: #C6EEC6;
    --dashboard-gray-background: #DBDBDB;
    --dashboard-text-black: #000000;
    --dashboard-dark-gray-text: #323233;

    /* Fonts */
    --dashboard-font-family-inter: 'Inter', sans-serif;
    --dashboard-font-family-mulish: 'Mulish', sans-serif;
    --dashboard-font-weight-bold: 700;
    --dashboard-font-weight-medium: 500;
    --dashboard-font-weight-regular: 400;

    /* Sizes */
    --dashboard-full-width: 100%;
    --dashboard-card-height: 182px;
    --dashboard-subscription-height: 443px;
    --dashboard-quick-actions-height: auto;
    --dashboard-max-table-height: 368px;
    --dashboard-header-height: 48px;
    --dashboard-row-height: 64px;
    --dashboard-title-height: 24px;
    --dashboard-count-height: 23px;
    --dashboard-text-height: 16px;
    --dashboard-small-text-height: 24px;
    --dashboard-scale-text-width: 190px;
    --dashboard-renews-date-width: 126px;
    --dashboard-license-available-width: auto;
    --dashboard-license-use-width: auto;
    --dashboard-action-card-title-width: 165px;
    --dashboard-add-msp-width: 268px;
    --dashboard-enable-msp-width: 209px;
    --dashboard-disable-msp-width: 174px;
    --dashboard-delete-msp-width: 161px;

    /* Spacing */
    --dashboard-card-padding: 8px;
    --dashboard-header-padding: 12px;
    --dashboard-section-padding: 16px;
    --dashboard-large-padding: 48px;
    --dashboard-table-top-padding: 24px;
    --dashboard-table-left-padding: 16px;
    --dashboard-gap-small: 0;
    --dashboard-gap-tiny: 5px;
    --dashboard-gap-medium: 8px;
    --dashboard-gap-large: 12px;
    --dashboard-gap-extra-large: 32px;
    --dashboard-gap-plan: 36px;
    --dashboard-margin-bottom-card: 1rem;
    --dashboard-margin-bottom-orgs: 5px;

    /* Border and Radius */
    --dashboard-card-border: 1px solid;
    --dashboard-card-radius: 4px;

    /* Font Sizes */
    --dashboard-small-font-size: 10px;
    --dashboard-base-font-size: 14px;
    --dashboard-standard-font-size: 16px;
    --dashboard-medium-font-size: 18px;
    --dashboard-title-font-size: 20px;
    --dashboard-count-font-size: 32px;

    /* Line Heights */
    --dashboard-tight-line-height: 90%;
    --dashboard-normal-line-height: 100%;
    --dashboard-small-line-height: 17px;
    --dashboard-link-line-height: 28px;
    --dashboard-header-line-height: 38px;

    /* Letter Spacing */
    --dashboard-link-letter-spacing: -1.5%;

    /* Z-Index */
    --dashboard-base-z-index: 1;
    --dashboard-title-z-index: 1000;
    --dashboard-orgs-z-index: 10000;

    /* Scrollbar */
    --dashboard-scrollbar-width: 2px;
    --dashboard-scrollbar-thumb-color: #216767;
    --dashboard-scrollbar-track-max-height: 20%;


    --primary-color: #28396A;
    --secondary-color: #216767;
    --white-color: #FFFFFF;

    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Mulish', sans-serif;



}


/* Frame 1984078015 */

/* Auto layout */



[data-theme="default"] {
    --body-background: #f6fff8;
    --body-blend-mode: normal;
    --profile-pagemodal-main-container-bg: #FFFFFF;
    --profile-pagemodal-main-container-box-shadow: 4px 4px 18px rgba(92, 92, 92, 0.25);
    --profile-page-my-profile-title-color: #28396A;
    --body-bg-color: #F6FFF8;
    --profile-body-edit-container-color: #216767;
    --custom-slider-color: #216767;
    --profile-body-name-container-border-bottom: 2px solid #EFF0F1;
    --profile-body-name-img-container: url('/assets/profile-page-icons/IdentificationCard.png');
    --profile-body-password-img-container: url('/assets/profile-page-icons/Key.png');
    --profile-body-email-img-container: url('/assets/profile-page-icons/Envelope.png');
    --profile-body-role-img-container: url('/assets/profile-page-icons/IdentificationBadge.png');
    --profile-body-version-img-container: url('/assets/profile-page-icons/Stack.png');
    --profile-body-theme-img-container: url('/assets/profile-page-icons/darkimg.png');
    --profile-body-org-img-container: url('/assets/profile-page-icons/BagSimple (1).png');
    --profile-name-modal-content-bg-color: #FFFFFF;
    --profile-modal-edit-name-close-button-color: #28396A;

    --profile-back-button-color: #323233;
    --profile-back-button-img-container: url('/assets/profile-page-icons/Frame.png');

    --profile-edit-text-color: #28396A;
    --profile-edit-subtext-color: #667085;
    --profile-edit-firstname-color: #28396A;
    --profile-edit-inputfield-color: #F6FFF8;
    --profile-edit-inputfield-border: #D2E0D5;
    --profile-edit-inputfield-textcolor: #323233;
    --profile-edit-save-button-color: #216767;
    --profile-edit-cancel-button-color: #FFFFFF;
    --profile-edit-cancel-text-color: #216767;
    --profile-edit-text-color: #28396A;
    --profile-edit-subtext-color: #667085;
    --profile-edit-firstname-color: #28396A;
    --profile-edit-inputfield-color: #F6FFF8;
    --profile-edit-inputfield-border: #D2E0D5;
    --profile-edit-inputfield-textcolor: #323233;
    --profile-edit-save-button-color: #216767;
    --profile-edit-cancel-button-color: #FFFFFF;
    --profile-edit-cancel-text-color: #216767;

    --session-message-border-color: #216767;
    --session-message-text-color: #216767;
    --session-message-background-color: #c6eec6;
    --session-message-cancel-symbol: #216767;

    --profile-password-cancel-symbol: #28396A;
    --profile-password-headertext-color: #28396A;
    --profile-password-subtext-color: #323233;
    --profile-password-inputfield-color: #F6FFF8;
    --profile-password-inputfield-border: #D2E0D5;
    --profile-password-eye-icon: url('/assets/profile-page-icons/Eye.png');
    --profile-password-eye-icon-slash: url('/assets/profile-page-icons/EyeSlash.png');
    --profile-password-save-button-color: #216767;
    --profile-password-cancel-button-color: #FFFFFF;
    --profile-password-cancel-text-color: #216767;
    --profile-password-forgetpassword-text-color: #4D6ABF;

    --topbar-background-color: black;
    --topbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --topbar-position-top: 0;
    --topbar-logo-img: url('/assets/img/Coconut_icon.png');
    --topbar-logo-position-left: 0px;
    --topbar-admin-background-color: #FC9401;
    --topbar-admin-profileicon-background: #FFF9BD;
    --topbar-admin-profile-text-color: #323233;
    --topbar-admin-profile-dropdown-arrow: #323233;

    --enduser-download-text-color: #323233;
    --enduser-download-dropdown-color: #28396A;

    --enduser-box-shadow: 4px 4px 18px 0px #5C5C5C40;
    --enduser-container-bg-color: #FFFFFF;
    --enduser-container-text-color: #28396a;
    --enduser-container-location-color: #323233;
    --enduser-container-subtext-color: #323233;
    --enduser-browser-message-color: #E77676;
    --enduser-startbtn-bg-color: #216767;
    --enduser-resetbtn-bg-color: #be5050;
    --enduser-message-text-color: #4d6abf;
    --enduser-browser-on-color: #34b1b1;
    --enduser-launchbtn-color: #216767;
    --enduser-stopbtn-bg-color: #FFFFFF;
    --enduser-stopbtn-text-color: #216767;
    --enduser-cba-text-color-new: #323233;

    --sidebar-background-color: #216767;
    --sidebar-text-color: #FFFFFF;
    --sidebar-box-shadow: none;
    --sidebar-border: none;
    --sidebar-border-radius: none;
    --sidebar-left: 0px;
    --sidebar-top: 40px;
    --sidebar-padding-top: 40px;

    --sidebar-admin-text-color: #FFFFFF;
    --sidebar-admin-active-text-color: #FFFFFF;

    --sidebar-active-background-color: #34B1B1;
    --sidebar-active-border-radius: none;
    --sidebar-active-border: none;
    --sidebar-active-box-shadow: none;
    --sidebar-active-width: 64px;
    --sidebar-active-text-color: #FFFFFF;

    --sidebar-all-coconut-logo: none;

    --sidebar-coconut-logo: none;
    --sidebar-admin-home-icon: url('/assets/img/sidebar/Home.png');
    --sidebar-admin-mssp-icon: url('/assets/img/sidebar/Mssp.png');
    --sidebar-admin-mspicon-icon: url('/assets/img/sidebar/Mspicon.png');
    --sidebar-admin-org-icon: url('/assets/img/sidebar/Org.png');
    --sidebar-admin-user-icon: url('/assets/img/sidebar/User.png');
    --sidebar-admin-license-icon: url('/assets/img/sidebar/License.png');
    --sidebar-admin-licensehistory-icon: url('/assets/img/sidebar/Licensehistory.png');
    --sidebar-admin-settings-icon: url('/assets/img/sidebar/Settings.png');
    --sidebar-admin-activity-icon: url('/assets/img/sidebar/Activity.png');
    --sidebar-admin-support-icon: url('/assets/img/sidebar/Support.png');

    --sidebar-all-home-icon: url('/assets/img/sidebar/Home.png');
    --sidebar-all-users-icon: url('/assets/img/sidebar/User.png');
    --sidebar-all-browserusage-icon: url('/assets/img/sidebar/Browserusage.png');
    --sidebar-all-settings-icon: url('/assets/img/sidebar/Settings.png');
    --sidebar-all-support-icon: url('/assets/img/sidebar/Support.png');
    --sidebar-all-orgs-icon: url('/assets/img/sidebar/Mspicon.png');
    --sidebar-all-billing-icon: url('/assets/img/sidebar/Billing.png');
    --sidebar-all-mspicon-icon: url('/assets/img/sidebar/Mspicon.png');

    --org-home-title-text-color: #28396A;
    --org-home-subtitle-text-color: #28396A;
    --org-card-background-color: #FFFFFF;
    --org-card-border-color: 1px solid #CCE6D2;
    --org-card-border-radius: 4px;
    --org-card-box-shadow: none;
    --org-card-title-color: #28396A;
    --org-card-count-color: #216767;
    --org-card-bottom-text-color: #216767;
    --org-card-quickaction-text-color: #216767;
    --org-card-quickaction-subtext-color: #000000;
    --org-card-total-text-color: #323233;
    --org-card-totalvalue-text-color: #323233;
    --org-card-subvalue-text-color: #323233;
    --org-card-button-bg-color: #216767;
    --org-card-button-text-color: #FFFFFF;
    --org-card-resetpassword-highlight-color: #414141;

    --org-listing-sort-text-color: #28396A;
    --org-listing-sort-bg-color: #FFFFFF;
    --org-listing-sort-border: 1px solid #D2E0D5;
    --org-listing-sort-border-radius: 4px;
    --org-listing-sort-dropdown-bg-color: #FFFFFF;
    --org-listing-sort-dropdown-border: 1px solid #D2E0D5;
    --org-listing-sort-dropdown-border-radius: 4px;
    --org-listing-sort-icon-color: #28396A;
    --org-listing-sort-placeholder-color: #28396A;
    --org-listing-sort-dropdown-text-color: #28396A;
    --org-listing-sort-dropdown-email-color: #696969;
    --org-listing-sort-dropdown-hover-color: #f5f5f5;
    --org-listing-container-box-shadow: 4px 4px 18px rgba(92, 92, 92, 0.25);
    --org-listing-container-border-radius: 4px;
    --org-listing-container-bottom-line: 1px solid #EFF0F1;
    --org-listing-container-checkbox-color: #34b1b1;
    --org-card-checkbox-tick-text-color: #000000;
    --org-listing-container-checkbox-border: 1px solid #34b1b1;
    --org-listing-container-header-text-color: #4d6abf;
    --org-listing-container-row-text-color: #28396A;
    --org-listing-contaniner-row-hover-color: #FFFFFF;
    --org-listing-contaniner-row-insidehover-color: #FFFFFF;
    --org-listing-container-row-tooltip-bg-color: #4D6ABF;
    --org-listing-container-row-child-bg-color: #F4F4F4;

    --action-button-bg-color: #FFFFFF;
    --action-button-text-color: #216767;
    --action-button-border: 1px solid #216767;

    --adduser-button-bg-color: #216767;
    --adduser-button-text-color: #FFFFFF;
    --adduser-button-border: 1px solid #216767;

    --dropdown-card-bg-color: #FFFFFF;
    --dropdown-card-border: 1px solid #ccc;
    --dropdown-card-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    --hover-dropdown-bg-color: #FDFFFE;
    --hover-dropdown-text-color: #28396A;
    --hover-dropdown-hover-bd-color: #FFFFFF;

    --filtersort-bg-color: #FFFFFF;
    --filtersort-text-color: #323233;
    --filtersort-border: 1px solid #ccc;

    --filtersort-hover-bg-color: #B8E4E4;
    --filtersort-hover-text-color: #28396A;

    --org-modal-inputfield-bg-color: #F6FFF8;
    --org-modal-inputfield-border-color: #D2E0D5;
    --org-modal-inputfield-text-color: #323233;
    --org-modal-close-btn-color: #323233;

    --usage-restart-btn-bg-color: #216767;
    --usage-shutdown-btn-bg-color: #BE5050;

    --dropdown-card-subtext-color: rgba(33, 37, 41, 0.75);
    --dropdown-card-hover-bg-color: #f1f1f1;
    --dropdown-card-hover-text-color: #333;
    --org-modal-alert-text-color: #6c757d;
    --org-modal-smalltext-color: #323233;
    --org-modal-radiobutton-border: 2px solid #34B1B1;
    --org-modal-radiobutton-color: #34B1B1;
    --org-modal-template-download-color: #216767;
    --org-modal-template-drop-border: #216767;
    --org-modal-template-drop-bg-color: #F6FFF8;
    --org-modal-success-text-color: #42927A;
    --org-modal-error-text-color: #000000;
    --org-modal-bar-succes-color: #323233;
    --org-modal-sub-text-color: #000000;
    --org-modal-progressbar-bg-color: #B8E4E4;
    --org-modal-progressbar-background-color: #34B1B1;
    --card-approve-text-color: #90B3B3;


    --org-card-activeuser-icon: url('/assets/img/org/Activeuser.png');
    --org-card-livecoconut-icon: url('/assets/img/org/Livecoconut.png');
    --org-card-pendinguser-icon: url('/assets/img/org/Pendinguser.png');
    --org-card-license-icon: url('/assets/img/org/License.png');
    --org-card-quickaction-icon: url('/assets/img/org/Quickaction.png');
    --org-card-dropdown-icon: url('/assets/img/org/Dropdown.png');

    --msp-card-activeorg-icon: url('/assets/img/msp/Activeorg.png');
    --msp-card-pendingall-icon: url('/assets/img/msp/Pendingall.png');
    --msp-card-license-icon: url('/assets/img/msp/License.png');
    --msp-card-activeplan-icon: url('/assets/img/msp/Activeplan.png');
    --msp-card-newlicense-icon: url('/assets/img/msp/Newlicense.png');

    --pagination-1pg-icon: url('/assets/img/pagination/1pg.png');
    --pagination-2pg-icon: url('/assets/img/pagination/2pg.png');
    --pagination-3pg-icon: url('/assets/img/pagination/3pg.png');
    --pagination-4pg-icon: url('/assets/img/pagination/4pg.png');

    --listing-sort-icon: url('/assets/img/listing/Sort-listing.png');
    --listing-filter-icon: url('/assets/img/listing/Filter-listing.png');

    --filtersort-tick-icon: url('/assets/img/check.png');

    --modal-download-icon: url('/assets/Downloadicon.png');
    --modal-progress-success-icon: url('/assets/img/VectorNew.png');
    --modal-progress-validate-icon: url('/assets/img/validateImage.png');
    --modal-closebtn-icon: url('/assets/Closebtn.png');

    --settings-browser-geolocation-icon: url('/assets/img/settings/Location searching.png');
    --settings-role-for-user-icon: url('/assets/img/settings/settingrole.png');
    --settings-blacklisted-url-icon: url('/assets/img/settings/settingblacklicticon.png');
    --settings-whitelisted-url-icon: url('/assets/img/settings/settingwhitelist.png');
    --settings-license-threshold-alert-icon: url('/assets/img/settings/license-threshold.png');
    --settings-browser-permission-icon: url('/assets/img/settings/BrowserPermission.png');
    --settings-session-timeout-icon: url('/assets/img/settings/settingsessiontimeout.png');
    --settings-png-upload-icon: url('/assets/img/validateImage.png');
    --settings-edit-pencil-icon: url('/assets/img/pencil.png');

    --browser-settings-plus-icon: url('/assets/img/plus.png');
    --browser-settings-minus-icon: url('/assets/img/minus.png');
        --sidebar-all-browser-logo: url('/assets/img/sidebar/browsericon.png');

    --broswer-settings-error-color: #BE5050;


    --settings-preferred-color: #E8F5E9;
    --settings-preferred-border-color: #216767;

    --modal-background-color: #FFFFFF;
    --modal-button-background-color: #FFFFFF;
    --modal-box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);

    --offcanvas-topbar-top: 40px;
    --import-offcanvas-topbar-top: 40px;

    --landing-page-edit-icon: url('/assets/img/pencilEdit.png');
    --landing-page-arrow-icon: url('/assets/img/greenArrow.png');

    --landing-page-suspend-delete-text-color: #BE5050;

    --landing-page-border-radius: 8px;
    --landing-page-home-link-color: #69708A;
    --landing-page-info-title-color: #4D6ABF;
    --landing-page-card-bottom-line: #DBDBDB;
    --landing-page-last-text-color: #696969;
    --landing-page-count-color: #398700;
    --landing-page-active-button-color: #216767;

    --sort-filter-dropdown-bg-color: #B8E4E4;
    --sort-filter-drop-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    --offcanvas-new-height-declare: calc(100vh - 40px);
    --offcanvas-new-height-when-banner: calc(100vh - 65px);

    --profile-theme-tick-icon: url('/assets/img/Themetick.png');

    --mssp-noplan-icon: url('/assets/currencyico.png');
    --mssp-download-icon: url('/assets/Downloadicon.png');
    --mssp-active-container-border:1px solid #CCE6D2;
    --mssp-active-container-title-color: #696969;

    --mssp-billing-table-title-color:28396A;
    --mssp-billing-table-inactive-color: #D2E0D5;
    --mssp-billing-table-text-color:#1C1C1F;
    --mssp-billing-table-planbackground-color:#B8E4E4;
    --mssp-billing-table-next-plan-bg-color:#F4F4F4;

    --offcanvas-add-entity-padding-fix:50px;

    --login-logo-new-img:url('/assets/img/logo/loginlogo.png');
    --individual-business-border-color:1px solid #b8e4e4;
    --signup-plan-card-border-color:1px solid #DBDBDB;

    --selfuser-profile-card-location-icon: url('/assets/profile-page-icons/location.png');
    --selfuser-plansaver-bg-color:#FFF48F;
    --selfuser-plansaver-text-color:#323233;

    --action-dropdown-items-bottom-border:1px solid rgba(0, 0, 0, 0.08);
}



[data-theme="glass"] {
    --body-background: linear-gradient(115.82deg, rgba(0, 0, 0, 0) -1.85%, rgba(0, 0, 0, 0.29) 97.05%), url('/assets/profile-page-icons/newbodybg.jpg');
    --body-background-size: 325% 265vh;
    --body-background-position: 5% 0;
    --body-blend-mode: plus-darker;
    --profile-pagemodal-main-container-bg: rgba(0, 0, 0, 0.001);
    --profile-pagemodal-main-container-box-shadow: 2px 1px 8px 2px rgba(255, 255, 255, 0.1), inset -3px -2px 6px rgba(36, 66, 66, 0.12);
    --profile-page-my-profile-title-color: #FFFFFF;
    --body-bg-color: green;
    --profile-body-edit-container-color: #FFFFFF;
    --custom-slider-color: #15E073;
    --custom-slider-track-color: #15E073;
    --profile-body-name-container-border-bottom: 2px solid #CCE6D233;
    --profile-body-name-img-container: url('/assets/profile-page-icons/nameimage.png');
    --profile-body-password-img-container: url('/assets/profile-page-icons/passimg.png');
    --profile-body-email-img-container: url('/assets/profile-page-icons/emailimg.png');
    --profile-body-role-img-container: url('/assets/profile-page-icons/roleimg.png');
    --profile-body-version-img-container: url('/assets/profile-page-icons/versionimg.png');
    --profile-body-theme-img-container: url('/assets/profile-page-icons/glassimg.png');
    --profile-body-org-img-container: url('/assets/profile-page-icons/orgimg.png');
    --profile-name-modal-content-bg-color: rgba(0, 61, 51, 0.9);
    --profile-name-modal-content-box-shadow: 2px 1px 8px 2px rgba(255, 255, 255, 0.1),
        inset -3px -2px 6px rgba(36, 66, 66, 0.12);
    --profile-modal-edit-name-close-button-color: #FFFFFF;

    --profile-back-button-color: #FFFFFF;
    --profile-back-button-img-container: url('/assets/profile-page-icons/GlassFrame.png');

    --profile-edit-text-color: #FFFFFF;
    --profile-edit-subtext-color: #FFFFFF;
    --profile-edit-firstname-color: #FFFFFF;
    --profile-edit-inputfield-color: #407E6E;
    --profile-edit-inputfield-border: #CCE6D233;
    --profile-edit-inputfield-textcolor: #FFFFFF;
    --profile-edit-save-button-color: #AA6709;
    --profile-edit-cancel-button-color: rgba(255, 255, 255, 0.1);
    --profile-edit-cancel-text-color: #FFFFFF;

    --session-message-border-color: #15E073;
    --session-message-text-color: #15E073;
    --session-message-background-color: rgba(21, 224, 115, 0.1);
    --session-message-cancel-symbol: #15E073;

    --profile-password-cancel-symbol: #FFFFFF;
    --profile-password-headertext-color: #FFFFFF;
    --profile-password-subtext-color: #FFFFFF;
    --profile-password-inputfield-color: #407E6E;
    --profile-password-inputfield-border: #CCE6D233;
    --profile-password-eye-icon: url('/assets/profile-page-icons/EyeGlass.png');
    --profile-password-eye-icon-slash: url('/assets/profile-page-icons/EyeSlashGlass.png');
    --profile-password-save-button-color: #AA6709;
    --profile-password-cancel-button-color: rgba(255, 255, 255, 0.1);
    --profile-password-cancel-text-color: #FFFFFF;
    --profile-password-forgetpassword-text-color: #15E073;

    --topbar-background-color: none;
    --topbar-box-shadow: none;
    --topbar-position-top: 16px;
    --topbar-logo-img: url('/assets/img/CoconutLogWhite.png');
    --topbar-logo-position-left: 24px;
    --topbar-admin-background-color: none;
    --topbar-admin-profileicon-background: #164848;
    --topbar-admin-profile-text-color: #FFFFFF;
    --topbar-admin-profile-dropdown-arrow: #FFFFFF;

    --enduser-download-text-color: #FFFFFF;
    --enduser-download-dropdown-color: #FFFFFF;

    --enduser-box-shadow: 2px 1px 8px 2px rgba(255, 255, 255, 0.1), inset -3px -2px 6px rgba(36, 66, 66, 0.12);
    --enduser-container-bg-color: none;
    --enduser-container-text-color: #FFFFFF;
    --enduser-container-location-color: #FFFFFF;
    --enduser-container-subtext-color: #FFFFFF;
    --enduser-browser-message-color: #E77676;
    --enduser-startbtn-bg-color: #AA6709;
    --enduser-resetbtn-bg-color: #FF9696;
    --enduser-message-text-color: #15E073;
    --enduser-browser-on-color: #86FF71;
    --enduser-launchbtn-color: #AA6709;
    --enduser-stopbtn-bg-color: rgba(255, 255, 255, 0.1);
    --enduser-stopbtn-text-color: #FFFFFF;
    --enduser-cba-text-color-new: #B8B8B8;

    --sidebar-background-color: rgba(0, 0, 0, 0.004);
    --sidebar-text-color: #FFFFFF;
    --sidebar-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --sidebar-border: 1px solid rgba(255, 255, 255, 0.25);
    --sidebar-border-radius: 40px;
    --sidebar-left: 14px;
    --sidebar-top: 15px;
    --sidebar-padding-top: 15px;

    --sidebar-admin-text-color: #FFC677;
    --sidebar-admin-active-text-color: #FFFFFF;

    --sidebar-active-background-color: rgba(255, 255, 255, 0.1);
    --sidebar-active-border-radius: 16px;
    --sidebar-active-border: 1px solid rgba(255, 255, 255, 0.25);
    --sidebar-active-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --sidebar-active-width: 54px;
    --sidebar-active-text-color: rgba(21, 224, 115, 1);

    --sidebar-all-coconut-logo: url('/assets/img/sidebar/Coconut-glass.png');
    --sidebar-all-browser-logo: url('/assets/img/sidebar/browsericon.png');

    --sidebar-admin-coconut-logo: url('/assets/img/sidebar/Coconutglass.png');
    --sidebar-admin-home-icon: url('/assets/img/sidebar/Homeglass.png');
    --sidebar-admin-mssp-icon: url('/assets/img/sidebar/Msspglass.png');
    --sidebar-admin-mspicon-icon: url('/assets/img/sidebar/Mspiconglass.png');
    --sidebar-admin-org-icon: url('/assets/img/sidebar/Orgglass.png');
    --sidebar-admin-user-icon: url('/assets/img/sidebar/Userglass.png');
    --sidebar-admin-license-icon: url('/assets/img/sidebar/Licenseglass.png');
    --sidebar-admin-licensehistory-icon: url('/assets/img/sidebar/Licensehistoryglass.png');
    --sidebar-admin-settings-icon: url('/assets/img/sidebar/Settingsglass.png');
    --sidebar-admin-activity-icon: url('/assets/img/sidebar/Activityglass.png');
    --sidebar-admin-support-icon: url('/assets/img/sidebar/Supportglass.png');

    --sidebar-all-home-icon: url('/assets/img/sidebar/Home.png');
    --sidebar-all-users-icon: url('/assets/img/sidebar/User.png');
    --sidebar-all-browserusage-icon: url('/assets/img/sidebar/Browserusage.png');
    --sidebar-all-settings-icon: url('/assets/img/sidebar/Settings.png');
    --sidebar-all-support-icon: url('/assets/img/sidebar/Support.png');
    --sidebar-all-orgs-icon: url('/assets/img/sidebar/Mspicon.png');
    --sidebar-all-billing-icon: url('/assets/img/sidebar/Billing.png');
    --sidebar-all-mspicon-icon: url('/assets/img/sidebar/Mspicon.png');

    --org-home-title-text-color: #FFFFFF;
    --org-home-subtitle-text-color: #FFFFFF;
    --org-card-background-color: rgba(0, 0, 0, 0.004);
    --org-card-border-color: 1px solid rgba(255, 255, 255, 0.25);
    --org-card-border-radius: 24px;
    --org-card-box-shadow: inset -3px -2px 6px rgba(36, 66, 66, 0.12);
    --org-card-title-color: rgba(21, 224, 115, 1);
    --org-card-count-color: #FFFFFF;
    --org-card-bottom-text-color: rgba(255, 255, 255, 0.5);
    --org-card-quickaction-text-color: rgba(31, 26, 26, 0.5);
    --org-card-quickaction-subtext-color: #FFFFFF;
    --org-card-total-text-color: #FFFFFF;
    --org-card-totalvalue-text-color: #FFFFFF;
    --org-card-subvalue-text-color: #FFFFFF;
    --org-card-button-bg-color: rgba(170, 103, 9, 1);
    --org-card-button-text-color: #FFFFFF;
    --org-modal-alert-text-color: rgba(198, 198, 198, 1);
    --org-modal-smalltext-color: #FFFFFF;
    --org-modal-radiobutton-border: 2px solid rgba(21, 224, 115, 1);
    --org-modal-radiobutton-color: rgba(21, 224, 115, 1);
    --org-modal-template-download-color: rgba(21, 224, 115, 1);
    --org-modal-template-drop-border: #FFFFFF;
    --org-modal-template-drop-bg-color: none;
    --org-modal-success-text-color: rgba(128, 241, 158, 1);
    --org-modal-error-text-color: #FFFFFF;
    --org-modal-bar-succes-color: #FFFFFF;
    --org-modal-sub-text-color: #FFFFFF;
    --card-approve-text-color: rgba(21, 224, 115, 1);

    --org-listing-sort-text-color: #FFFFFF;
    --org-listing-sort-bg-color: rgba(36, 66, 66, 0.12);
    --org-listing-sort-border: 1px solid rgba(255, 255, 255, 0.25);
    --org-listing-sort-border-radius: 4px;
    --org-listing-sort-dropdown-bg-color: rgba(31, 90, 80, 1);
    --org-listing-sort-dropdown-border: 1px solid rgba(255, 255, 255, 0.25);
    --org-listing-sort-dropdown-border-radius: 4px;
    --org-listing-sort-icon-color: #FFFFFF;
    --org-listing-sort-placeholder-color: #FFFFFF;
    --org-listing-sort-dropdown-text-color: rgba(21, 224, 115, 1);
    --org-listing-sort-dropdown-email-color: #FFFFFF;
    --org-listing-sort-dropdown-hover-color: none;
    --org-listing-container-box-shadow: inset -3px -2px 6px rgba(36, 66, 66, 0.12);
    --org-listing-container-border-radius: 24px;
    --org-listing-container-bottom-line: 1px solid rgba(121, 173, 152, 1);
    --org-listing-container-checkbox-color: rgba(21, 224, 115, 1);
    --org-card-checkbox-tick-text-color: rgba(255, 255, 255, 1);
    --org-listing-container-header-text-color: rgba(21, 224, 115, 1);
    --org-listing-container-row-text-color: #FFFFFF;
    --org-listing-contaniner-row-hover-color: rgba(36, 66, 66, 0.12);
    --org-listing-contaniner-row-insidehover-color: none;
    --org-listing-container-row-tooltip-bg-color: rgba(31, 90, 80, 1);
    --org-listing-container-row-child-bg-color: none;
    --org-card-resetpassword-highlight-color: #FFFFFF;

    --action-button-bg-color: rgba(255, 255, 255, 0.1);
    --action-button-text-color: #FFFFFF;
    --action-button-border: 1px solid rgba(255, 255, 255, 0.25);

    --adduser-button-bg-color: rgba(170, 103, 9, 1);
    --adduser-button-text-color: #FFFFFF;
    --adduser-button-border: 1px solid rgba(170, 103, 9, 1);

    --dropdown-card-bg-color: rgba(31, 90, 80, 1);
    --dropdown-card-border: 1px solid rgba(31, 90, 80, 1);
    --dropdown-card-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    --dropdown-card-subtext-color: #FFFFFF;
    --dropdown-card-hover-bg-color: rgb(145 147 147 / 12%);
    --dropdown-card-hover-text-color: rgba(21, 224, 115, 1);

    --hover-dropdown-bg-color: rgba(31, 90, 80, 1);
    --hover-dropdown-text-color: #FFFFFF;
    --hover-dropdown-hover-bd-color: rgb(24 71 63);

    --filtersort-bg-color: rgba(170, 103, 9, 1);
    --filtersort-text-color: #FFFFFF;
    --filtersort-border: 1px solid rgba(170, 103, 9, 1);

    --filtersort-hover-bg-color: rgb(132 81 10 / 80%);
    --filtersort-hover-text-color: #FFFFFF;


    --org-modal-inputfield-bg-color: rgba(64, 126, 110, 1);
    --org-modal-inputfield-border-color: rgba(204, 230, 210, 0.2);
    --org-modal-inputfield-text-color: #FFFFFF;
    --org-modal-close-btn-color: #FFFFFF;
    --org-modal-progressbar-bg-color: rgba(21, 224, 115, 1);
    --org-modal-progressbar-background-color: rgba(21, 224, 115, 1);

    --usage-restart-btn-bg-color: rgba(22, 72, 72, 1);
    --usage-shutdown-btn-bg-color: rgba(137, 55, 55, 1);


    --org-card-activeuser-icon: url('/assets/img/org/Activeuserglass.png');
    --org-card-livecoconut-icon: url('/assets/img/org/Livecoconutglass.png');
    --org-card-pendinguser-icon: url('/assets/img/org/Pendinguserglass.png');
    --org-card-license-icon: url('/assets/img/org/Licenseglass.png');
    --org-card-quickaction-icon: url('/assets/img/org/Quickactionglass.png');
    --org-card-dropdown-icon: url('/assets/img/org/Dropdownglass.png');

    --msp-card-activeorg-icon: url('/assets/img/msp/Activeorgglass.png');
    --msp-card-pendingall-icon: url('/assets/img/msp/Pendingallglass.png');
    --msp-card-license-icon: url('/assets/img/msp/Licenseglass.png');
    --msp-card-activeplan-icon: url('/assets/img/msp/Activeplanglass.png');
    --msp-card-newlicense-icon: url('/assets/img/msp/Newlicenseglass.png');

    --pagination-1pg-icon: url('/assets/img/pagination/1pgglass.png');
    --pagination-2pg-icon: url('/assets/img/pagination/2pgglass.png');
    --pagination-3pg-icon: url('/assets/img/pagination/3pgglass.png');
    --pagination-4pg-icon: url('/assets/img/pagination/4pgglass.png');

    --listing-sort-icon: url('/assets/img/listing/Sort-listingglass.png');
    --listing-filter-icon: url('/assets/img/listing/Filter-listingglass.png');

    --filtersort-tick-icon: url('/assets/img/checkglass.png');

    --modal-download-icon: url('/assets/Downloadiconglass.png');
    --modal-progress-success-icon: url('/assets/img/VectorNewglass.png');
    --modal-progress-validate-icon: url('/assets/img/validateImageglass.png');
    --modal-closebtn-icon: url('/assets/Closebtnglass.png');

    --settings-browser-geolocation-icon: url('/assets/img/settings/Location searchingglass.png');
    --settings-role-for-user-icon: url('/assets/img/settings/settingroleglass.png');
    --settings-blacklisted-url-icon: url('/assets/img/settings/settingblacklicticonglass.png');
    --settings-whitelisted-url-icon: url('/assets/img/settings/settingwhitelistglass.png');
    --settings-license-threshold-alert-icon: url('/assets/img/settings/license-thresholdglass.png');
    --settings-browser-permission-icon: url('/assets/img/settings/BrowserPermissionglass.png');
    --settings-session-timeout-icon: url('/assets/img/settings/settingsessiontimeoutglass.png');
    --settings-png-upload-icon: url('/assets/img/validateImagepngglass.png');
    --settings-edit-pencil-icon: url('/assets/img/pencilglass.png');

    --browser-settings-plus-icon: url('/assets/img/plusglass.png');
    --browser-settings-minus-icon: url('/assets/img/minusglass.png');
    --browser-settings-error-color: rgba(255, 179, 179, 1);

    --settings-preferred-color: rgb(34 80 72);
    --settings-preferred-border-color: #1da3a3;

    --modal-background-color: rgba(0, 61, 51, 0.5);
    --modal-button-background-color: none;
    --modal-box-shadow: none;

    --offcanvas-topbar-top: 0px;
    --import-offcanvas-topbar-top: 0px;

    --landing-page-edit-icon: url('/assets/img/pencilEditglass.png');
    --landing-page-arrow-icon: url('/assets/img/greenArrowglass.png');

    --landing-page-suspend-delete-text-color: rgba(21, 224, 115, 1);
    --landing-page-border-radius: 24px;
    --landing-page-home-link-color: #FFFFFF;
    --landing-page-info-title-color: #FFFFFF;
    --landing-page-card-bottom-line: rgba(219, 219, 219, 0.2);
    --landing-page-last-text-color: rgba(255, 255, 255, 1);
    --landing-page-count-color: rgba(128, 241, 158, 1);
    --landing-page-active-button-color: #893737;

    --sort-filter-dropdown-bg-color: #AA6709;
    --sort-filter-drop-box-shadow: none;

    --offcanvas-new-height-declare: calc(100vh - 0px);
    --offcanvas-new-height-when-banner: calc(100vh - 25px);

    --profile-theme-tick-icon: url('/assets/img/Themetickglass.png');

    --mssp-noplan-icon: url('/assets/currencyicoglass.png');
    --mssp-download-icon: url('/assets/Downloadiconwhiteglass.png');
    --mssp-active-container-border:none;
    --mssp-active-container-title-color:#15E073;

    --mssp-billing-table-title-color:#15E073;
    --mssp-billing-table-inactive-color: #FFFFFF;
    --mssp-billing-table-text-color:#FFFFFF;
    --mssp-billing-table-planbackground-color:#ADE4C6;
    --mssp-billing-table-next-plan-bg-color:rgba(255, 255, 255, 0.1);

    --offcanvas-add-entity-padding-fix:10px;

    --login-logo-new-img:url('/assets/img/logo/loginlogoglass.png');
    --individual-business-border-color:none;
    --signup-plan-card-border-color:#407E6E;

    --selfuser-profile-card-location-icon: url('/assets/profile-page-icons/locationglass.png');
    --selfuser-plansaver-bg-color:#F2E99B;
    --selfuser-plansaver-text-color:#323233;

    --action-dropdown-items-bottom-border:none;

}

.text-back {
    color: var(--profile-back-button-color);
}

.name-modal-header {
    width: 408px;
    height: 40px;
    gap: 4px;
}

.name-modal-title {
    font-family: 'Mulish', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #28396A;
    margin: 0;
}

.name-modal-desc {
    font-size: 16px;
    color: #323233;
    margin: 0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.name-modal-input-fields {
    width: 408px;
    height: 152px;
    gap: 24px;
    display: flex;
    flex-direction: column;
}

.name-modal-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.name-modal-label {
    font-weight: 700;
    font-size: 18px;
    color: var(--profile-edit-firstname-color);
    line-height: 90%;
    font-family: 'Mulish', sans-serif;
}

.name-modal-input {
    height: 40px;
    border: 1px solid var(--profile-edit-inputfield-border);
    border-radius: 4px;
    padding: 8px;
    outline: none;
    background-color: var(--profile-edit-inputfield-color);
    color: var(--profile-edit-inputfield-textcolor);
}

.name-modal-buttons {
    width: 250px;
    height: 40px;
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}

.name-modal-save-btn {
    padding: 8px 38.5px;
    background: var(--profile-edit-save-button-color);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Mulish', sans-serif;
}

.name-modal-cancel-btn {
    padding: 8px 30.5px;
    background: var(--profile-edit-cancel-button-color);
    color: var(--profile-edit-cancel-text-color);
    border: 1px solid var(--profile-edit-cancel-text-color);
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Mulish', sans-serif;
}

.profile-back-button-img-container {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: var(--profile-back-button-img-container);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* .profile-edit-label{
    width: 408px; height: 40px; gap: 4px;
} */
.profile-name-modal-form-control {
    width: 408px;
    height: 228px;
    gap: 36px;
    opacity: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.profile-modal-edit-name-close-button {
    width: 13.15;
    height: 13.15;
    color: var(--profile-modal-edit-name-close-button-color);
}

.profile-name-modal-content {
    background-color: var(--profile-name-modal-content-bg-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px;
    border-radius: 4px;
    width: 456px;
    height: 396px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
    box-shadow: var(--profile-name-modal-content-box-shadow);
}


.body-background {
    background: var(--body-background);
    background-size: var(--body-background-size);
    background-position: var(--body-background-position);
    background-repeat: no-repeat;
    background-blend-mode: var(--body-blend-mode);

    width: 100%;
    min-height: 91vh;
    height: auto;
    margin: 0;
    padding: 0;
}


/* Frame 1984078015 */

/* Auto layout */

.profile-pagemodal-main-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 36px;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    height: auto;

    background: var(--profile-pagemodal-main-container-bg);
    box-shadow: var(--profile-pagemodal-main-container-box-shadow);
}

.profile-title-container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    /* width: 193px; */
    height: 59px;


    flex: none;
    order: 0;
    flex-grow: 0;

}

.profile-title-container .profile-page-my-profile-title {
    /* My Profile */

    width: 193px;
    height: 39px;

    /* Title Inter 32 */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 39px;
    /* identical to box height */

    /* Primary/Primary - Blue */
    color: var(--profile-page-my-profile-title-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.profile-title-container .profile-page-my-profile-subtitle {

    height: 16px;

    /* Text SmBold 16 | Drop Down */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    /* identical to box height, or 16px */

    /* Text Color */
    color: var(--profile-page-my-profile-title-color);


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

.profile-body-container {
    /* Frame 1984078001 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 100%;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    /* background: red; */

}

.profile-body-name-container {
    /* Frame 1984077996 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    width: 100%;
    min-height: 32px;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    border-bottom: var(--profile-body-name-container-border-bottom);

}

.profile-body-name-subcontainer {
    /* Frame 1984077995 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    /* gap: 361px; */

    width: 100%;
    min-height: 24px;
    height: auto;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.profile-body-name-subcontainer-inner {
    /* Frame 1984077934 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    /* width: 242px; */
    height: 24px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}


.profile-body-name-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-name-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-password-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-password-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-email-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-email-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-role-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-role-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-org-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-org-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-version-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-version-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-dark-img-container {
    /* IdentificationCard */
    width: 24px;
    height: 24px;

    /* Background image */

    background-image: var(--profile-body-theme-img-container);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.profile-body-name-label {
    /* Name: Prashant Sharma */

    /* width: 210px; */
    height: 22px;

    /* Text/Text SmBold 18 */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    /* identical to box height, or 22px */
    display: flex;
    align-items: center;

    /* Primary/Primary - Blue */
    color: var(--profile-page-my-profile-title-color);


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.profile-body-name-label-value {
    color: var(--profile-page-my-profile-title-color);


}

.profile-body-edit-container {
    /* Edit */

    /* width: 37px; */
    /* height: 12px; */


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.profile-body-edit-container span {


    /* Descriptions/Canvas Sheet D1 Reg */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;


    /* Primary/Primary - Green */
    color: var(--profile-body-edit-container-color);
    cursor: pointer;


}

.profile-body-edit-container .profile-body-edit-label-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.autorenew-modal-content {
    width: 456px;
    height: 214px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 64px;
    background: #FFFFFF;
    border-radius: 4px;

}

.autorenew-modal-header {
    width: 408px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

}

.autorenew-header-content {
    width: 408px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.autorenew-header-title-container {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;

}

.autorenew-modal-title {
    width: 275px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--org-home-title-text-color);
    white-space: nowrap;

}

.autorenew-close-btn {
    position: relative;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.autorenew-close-btn::before,
.autorenew-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 15.5px;
    background-color: var(--org-modal-close-btn-color);
    transform: translate(-50%, -50%) rotate(45deg);
}

.autorenew-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.autorenew-content #autoRenewMessage {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--org-card-subvalue-text-color );
}

.autorenew-btn-container {
    width: 408px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

}

.autorenew-change-btn-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 13.37px;
}

.autorenew-change-btn-content {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    background: var(--adduser-button-bg-color);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 3.34262px;


}

.autorenew-change-btn,
.autorenew-change-btn:focus,
.autorenew-change-btn:hover {
    /* width: 63px; */
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 5%;
    background: var(--adduser-button-bg-color);
    color: var(--adduser-button-text-color);
    box-shadow: none;
    outline: none;
    border: var(--adduser-button-border);

}
.autorenew-cancel-btn-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    background: #FFFFFF;
    border: 1.67131px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 3.34262px;
}

.autorenew-btn-content {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

}

.autorenew-btn-change-cancel {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 170px;

}


.autorenew-cancel-btn,
.autorenew-cancel-btn:focus,
.autorenew-cancel-btn:hover {
    position: relative;
    right: 5px;
    width: 112px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 5%;
    color: var(--action-button-text-color);
    background-color: var(--action-button-bg-color);
    box-shadow: none;
    outline: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
}



/* Custom Switch Container */
.custom-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    cursor: pointer;
}

/* Hide default checkbox */
.custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider background (the green track) */
.custom-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--custom-slider-color);
    border-radius: 13px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    transition: .4s;
}

/* The round button */
.custom-slider-button {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: #FFFFFF;
    border-radius: 100px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    transition: .4s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* When checked, move the button to the right */
.custom-switch input:checked+.custom-slider+.custom-slider-button {
    transform: translateX(16px) matrix(-1, 0, 0, 1, 0, 0);
}

/* Optional: Change background color when active */
.custom-switch input:checked+.custom-slider {
    background: var(--custom-slider-track-color);
    /* Keep the same green color */
    opacity: 0.9;
}

/* Optional: Focus styles for accessibility */
.custom-switch input:focus+.custom-slider {
    box-shadow: 0 0 0 2px --var(--custom-slider-color);
}

/* Offcanvas styles */
.offcanvas-end {
    width: var(--offcanvas-width);
    right: 856px;
}

.offcanvas-header {
    position: fixed;
    top: 0;
    width: 424px;
    background: #FFFFFF;
    z-index: 10;
    padding: 8px 16px;
    margin-left: 10px;
}

.offcanvas-header .header-description {
    margin: 0;
    color: var(--text-dark);
    font-size: var(--font-size-small);
    line-height: var(--line-height);
}

.offcanvas-body p {
    margin-bottom: var(--padding-default);
    color: var(--text-dark);
    line-height: var(--line-height);
    /* Applied from previous request */
}

/* Offcanvas footer */
.offcanvas-footer {
    padding: var(--padding-default);
    border-top: 1px solid var(--border-light);
    border-radius: 4px;
}



.drag-drop-area.align-start>* {
    width: 100%;
    text-align: left;
}

.drag-drop-area.align-start .d-flex.justify-content-between {
    justify-content: space-between;
}

.drag-drop-area.align-start .progress {
    width: 100%;
}

.drag-drop-area.dragover {
    background-color: var(--background-dragover);
    border-color: var(--primary-color);
}

.drag-drop-area p {
    margin: 0;
    color: var(--text-muted);
    line-height: var(--line-height);
    /* Applied from previous request */
}

.drag-drop-area p:first-child {
    font-weight: 500;
}

.drag-drop-area p:nth-child(2) {
    margin: 0.5rem 0;
    font-size: var(--font-size-small);
}

/* Message area */
.message-area {
    margin-top: var(--padding-default);
    font-size: var(--font-size-small);
}

.message-area .text-success {
    color: var(--success-color);
}

.message-area .text-danger {
    color: var(--error-color);
}

/* Additional styles */
.alert-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    font-size: var(--font-size-small);
}

.badge {
    background-color: var(--badge-bg);
    color: var(--badge-text);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-small);
}

.d-flex.gap-2 {
    gap: var(--gap-small);
}

.bi {
    font-size: var(--icon-size);
}

/* Buttons */
.btn-primary {
    background-color: #343a40;
    border-color: #343a40;
}

.btn-primary:hover {
    background-color: #23272b;
    border-color: #23272b;
}

.btn-primary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
}

/* Progress bar */
.progress {
    height: 6px;
    background-color: #e9ecef;
    border-radius: var(--border-radius);
}

.progress-bar {
    background-color: #6c757d;
    transition: width 0.4s ease;
}

#progressPercentage {
    font-weight: 800;
    color: var(--text-dark);
    font-size: var(--font-size-small);
}

#cancelUploadBtn,
#undoBtn,
#fixUploadBtn {
    font-size: var(--font-size-tiny);
    text-decoration: none;
    text-transform: uppercase;
}

#cancelUploadBtn:hover,
#undoBtn:hover,
#fixUploadBtn:hover {
    text-decoration: underline;
}

/* Header section adjustments */
.d-flex.justify-content-between.align-items-start {
    flex-wrap: wrap;
}

/* .input-group {
        margin-top: 0.5rem;
    } */

/* Columns container */
.columns-container {
    background-color: var(--background-light);
    border: 1px solid #000;
    padding: var(--font-size-vertical-devider-padding);
}

.column-item {
    flex: 1;
    text-align: center;
    color: var(--text-dark);
    font-size: var(--font-size-vertical-devide);
    padding: 0 var(--font-size-vertical-devider-padding);
}

.column-item:not(:last-child) {
    border-right: 1px solid #000;
}

.whitelist-container,
.blacklist-container {
    background-color: var(--bg-color);
    width: 360px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 20px auto;
}

.delete-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: var(--delete-btn-font-size-small);
    font-weight: bold;
    padding: var(--delete-btn-padding-small);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    background-color: var(--bg-color);
}

.url-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--url-item-padding-medium);
    margin-bottom: var(--url-item-margin-bottom);
    border-bottom: 1px solid var(--border-color);
}

.url-item:last-child {
    margin-bottom: 0;
}

.url-item label {
    display: flex;
    align-items: center;
    font-size: var(--url-item-font-size-medium);
    color: var(--text-color);
}

.url-item input[type="checkbox"] {
    margin-right: var(--checkbox-margin-right);
    vertical-align: var(--checkbox-align);
}

.remove-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: var(--remove-btn-font-size-large);
    padding: var(--remove-btn-padding-large);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    background-color: var(--bg-color);
    display: flex;
    align-items: end;
    justify-content: center;
    margin-left: auto;
}

/* .url-checkbox {
    accent-color: var(--checkbox-accent);
}

.url-checkbox {
    margin-right: var(--checkbox-margin-right);
} */

/* .insert-box {
    padding-left: var(--insert-box-padding-left);
} */

.add-blacklistUrl-spacing {
    margin-bottom: var(--margin-bottom-large);
}

.warning-symbol {
    width: var(--warning-symbol-width);
    height: var(--warning-symbol-height);
    vertical-align: var(--warning-symbol-vertical-align);
    margin-right: var(--warning-symbol-right);
}

.table-responsive table thead tr:first-child th:nth-child(1),
.table-responsive table thead tr:first-child th:nth-child(2),
.table-responsive table thead tr:first-child th:nth-child(3),
.table-responsive table thead tr:first-child th:nth-child(4),
.table-responsive table thead tr:first-child th:nth-child(5),
.table-responsive table thead tr:first-child th:nth-child(6),
.table-responsive table thead tr:first-child th:nth-child(7),
.table-responsive table thead tr:first-child th:nth-child(8) {
    background-color: #ffffff;
}

.table tbody tr {
    height: var(--table-t-body-height);
}

.table tbody tr td {
    padding: var(--table-t-body-padding);
}

:root {
    --table-border-color: var(--table-border-color);
}

table {
    border-collapse: var(--table-border-collapse);
    width: var(--table-border-width);
    border: var(--table-border-color, --table-border);
}

th,
td {
    /* border-top: var(--table-border-color, --th-td-border-top); */
    /* border-bottom: var(--table-border-color, --th-td-border-bottom); */
    padding: var(--th-td-padding);
    text-align: var(--th-td-text-align);
}

th:first-child,
td:first-child {
    border-left: var(--table-border-color, --th-first-child-border-left);
}

th:last-child,
td:last-child {
    border-right: var(--table-border-color, --th-last-child-border-right);
}

th {
    background-color: var(--th-background-color);
}

thead tr th {
    background-color: red;
}

body {
    background-color: var(--background-light);
}

.add-contact-icon {
    width: var(--add-contact-icon-width);
    height: var(--add-contact-icon-height);
    background-image: var(--add-contact-icon-background-image);
    background-size: var(--add-contact-icon-background-size);
    background-repeat: var(--add-contact-icon-background-repeat);
    background-position: var(--add-contact-icon-background-position);
}

#addUserOffcanvas .offcanvas-footer {
    margin-top: var(--add-user-margin-top);
}

th,
td {
    border: 1px solid var(--th-td-border-color);
    padding: var(--th-td-cell-padding);
    text-align: left;
    position: relative;
}

th {
    background-color: var(--th-bg-color);
}

.dropdown,
.role-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    /* right below the header cell */
    right: 0;
    /* align to left edge of “Name” */
    margin-top: 6px;
    /* small gap between text and dropdown */
    background: var(--filtersort-bg-color);
    border: var(--filtersort-border);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    width: var(--dropdown-min-width, 180px);
    z-index: var(--dropdown-z-index, 9999);
    padding: 8px 0;
    color: var(--filtersort-text-color);
}



.role-dropdown-content {
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
    margin-top: 6px;
    background: var(--filtersort-bg-color);
    border: var(--filtersort-border);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    width: var(--dropdown-min-width, 180px);
    z-index: var(--dropdown-z-index, 9999);
    padding: 8px 0;
    color: var(--filtersort-text-color);
}

/* @media screen and (min-width: 1920px) {
        .role-dropdown-content {
        left: -110px;
    }
} */

/* .role-dropdown-content-new {
    display: none;
    position: absolute;
    top: 100%;
    right below the header cell
    right: 0;
    align to left edge of “Name”
    margin-top: 6px;
    small gap between text and dropdown
    background: #FFFFFF;
    border: 1px solid var(--dropdown-border, #ddd);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    width: var(--dropdown-min-width, 180px);
    z-index: var(--dropdown-z-index, 9999);
    padding: 8px 0;
} */

/* @media screen and (min-width: 1920px) {
        .role-dropdown-content-new {
        left: -110px;
    }
} */

.dropdown-content div {
    padding: var(--dropdown-padding);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sort-arrow {
    cursor: pointer;
    display: inline-block;
    padding-left: var(--sort-arrow-padding);
}

.dropdown:focus-within .dropdown-content {
    display: block;
}

.role-dropdown-icon,
.status-dropdown-icon {
    cursor: pointer;
    padding-left: var(--role-dropdown-icon-padding);
    font-size: 22px;
    color: #4D6ABF;

}

.role-dropdown.active .role-dropdown-content {
    display: block;
}

/* .role-dropdown.active .role-dropdown-content-new {
    display: block;
} */

.role-dropdown-item {
    padding: var(--role-dropdown-padding);
    cursor: pointer;
    font-size: var(--role-dropdown-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--normal-weight);
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    line-height: 100%;
    color: var(--filtersort-text-color);
    width: 153px;
    height: 32px;
}

.role-dropdown-item:hover,
.auditrole-dropdown-item:hover {
    background-color: var(--filtersort-hover-bg-color);
    color: var(--filtersort-hover-text-color);
}



.form-check {
    align-items: center;
    gap: var(--form-check-gap);
}

.form-check-input {
    margin-right: var(--form-check-input-margin);
    transform: scale(var(--input-scale));
}

/* .form-check-input.custom-radio {
        width: 24px;
        height: 24px;
        border: 2px solid #34B1B1;
        background-color: #fff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 50%;
        position: relative;
        cursor: pointer;
        transition: border-color 0.3s ease;
        margin-top: 2px;
        vertical-align: middle;
    }

    .form-check-input.custom-radio:checked::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        background-color: #34B1B1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .form-check-input.custom-radio:hover {
        border-color: #289a9a;
    }

    .form-check-input.custom-radio:focus {
        outline: none;
        box-shadow: none;
    }

    .form-check-label {
        color: #002744;
        margin-left: 8px;
        vertical-align: middle;
    }

    .form-check {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    } */

.form-check-span {
    cursor: pointer;
    padding-right: var(--form-check-span-padding);
    font-weight: normal;
}



.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    min-width: 768px;
    /* Minimum width before scrolling kicks in */
}

.table-footer {
    width: 100%;
}

.rows-selection select {
    width: auto;
    min-width: 70px;
}

.browser-layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 479px;
    background-color: var(--enduser-container-bg-color);
    padding-left: 32px;
    padding-top: 32px;
    padding-right: 32px;
    padding-bottom: 28px;
    border-radius: 4px;
    opacity: 100%;
    box-shadow: var(--enduser-box-shadow);
}

/* Element: browser-layout__content (inner content area) */
.browser-layout__content {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* Block: browser-title (title section) */
.browser-title {
    width: 100%;
    height: 39px;
    opacity: 100%;
    border-radius: 0;
    font-family: var(--font-family-inter);
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Element: browser-title__heading (title text) */
.browser-title__heading {
    margin: 0;
    font-family: var(--font-family-inter);
    font-size: 32px;
    font-weight: 700;
    color: var(--enduser-container-text-color);
}

/* Block: location-status (container for country and server info) */
.location-status {
    position: relative;
    top: 5px;
    width: 100%;
    height: 24px;
}

/* Element: location-status__text (text with icons) */
.location-status__text {
    font-family: var(--font-family-inter);
    font-size: 20px;
    font-weight: 500;
    color: var(--enduser-container-location-color);
    opacity: 100%;
    margin: 0;
}

/* Modifier for icon spacing (applied to specific icons) */
.icon--spacing {
    margin-right: 4px;
}

/* Block: safe-browsing (container for safe browsing message) */
.safe-browsing {
    position: absolute;
    top: 203px;
    left: 0px;
    width: 100%;
    height: 20px;
    opacity: 100%;
    border-radius: 0;
    white-space: nowrap;
}

/* Element: safe-browsing__text (safe browsing message text) */
.safe-browsing__text {
    font-family: var(--font-family-inter);
    font-size: 20px;
    font-weight: 500;
    color: var(--enduser-container-subtext-color);
    margin: 0;
    line-height: 100%;
    /* letter-spacing: 0%; */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.start-launch-button {
    position: absolute;
    top: 243px;
    left: 244px;
    width: 212px;
    height: 48px;
    padding: 20px 20px;
    background-color: var(--enduser-startbtn-bg-color);
    border-radius: 4px;
    opacity: 100%;
    white-space: nowrap;
    cursor: pointer;
}

.start-launch-button__innercontainer {
    position: absolute;
    top: 12px;
    left: 20px;
    right: 20px;
    bottom: 12px;
    width: 172px;
    height: 24px;
}

/* Element: start-launch-button__text (button text) */
.start-launch-button__text {
    font-family: var(--font-family-inter);
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-white);
    margin: 0;
    line-height: 100%;
    letter-spacing: 0%;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.browser__status {
    position: absolute;
    top: 315px;
    left: 0px;
    width: 100%;
    height: 20px;
    text-align: center;
}

.initiating__browser {
    position: absolute;
    top: 315px;
    left: 0px;
    width: 100%;
    height: 20px;
    text-align: center;
}

.initiating__browser span {
    color: var(--status-red-2);
    font-family: var(--font-family-mulish);
    font-size: 20px;
    font-weight: 700;
}

.browser__status p {
    color: var(--enduser-browser-message-color);
    font-family: var(--font-family-mulish);
    font-size: 20px;
    font-weight: 700;
}

.browser__status_message {
    position: absolute;
    top: 315px;
    left: 0px;
    width: 100%;
    height: 20px;
    text-align: center;
}

.browser__status_message p {
    color: var(--enduser-message-text-color) !important;
    font-family: var(--font-family-mulish);
    font-size: 20px;
    font-weight: 700;
}

.browser__status_errormessage {
    position: absolute;
    top: 370px;
    left: 0px;
    width: 100%;
    height: 20px;
    text-align: center;
    justify-content: center;
}

.browser__status_errormessage p {
    color: var(--status-red-2);
    font-family: var(--font-family-mulish);
    font-size: 16px;
    font-weight: 400;
}

.stop_browser__status_errormessage {
    position: absolute;
    top: 310px;
    left: 200px;
    width: 100%;
    height: 20px;
}

.stop_browser__status_errormessage p {
    color: var(--status-red-2);
    font-family: var(--font-family-mulish);
    font-size: 16px;
    font-weight: 400;
}

.reset___link {
    position: absolute;
    top: 419px;
}

.reset-a-tag,
.reset-a-tag.disabled,
.reset-a-tag:disabled {
    font-family: var(--font-family-inter);
    font-weight: 500;
    font-size: 18px;
    color: var(--enduser-resetbtn-bg-color) !important;
    /* text-decoration: none; */
}

.reset-a-tag:hover {
    color: var(--enduser-resetbtn-bg-color) !important;
}

.reset__text {
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    color: var(--enduser-container-subtext-color);
}

.dropdown-menu {
    display: none;
    position: absolute;
    /* top: var(--dropdown-menu-top); */
    right: 0;
    background-color: var(--dropdown-card-bg-color) !important;
    border: var(--dropdown-card-border);
    border-radius: var(--dropdown-menu-border-radius);
    box-shadow: var(--dropdown-card-box-shadow);
    min-width: var(--dropdown-menu-min-width);
    z-index: var(--dropdown-menu-z-index);
    width: 350px;
    height: auto;
    left: 944px;
    /* x-axis */
    top: 206px;
    /* y-axis */
}

/* .icon-button:hover + .dropdown-menu,
    .dropdown-menu:hover {
        display: block;
    } */

.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li a {
    display: block;
    padding: var(--dropdown-menu-link-padding);
    text-decoration: none;
    color: var(--org-listing-sort-dropdown-text-color);
}

.dropdown-menu li a:hover {
    background-color: var(--dropdown-card-hover-bg-color);
    color: var(--dropdown-card-hover-text-color) !important;

}

/* @media (max-width: 767px) {
    .table {
        font-size: 14px;
    }

    .table th,
    .table td {
        padding: 0.5rem;
    }

    .table-footer {
        padding: 0.5rem;
    }

    .pagination {
        margin-bottom: 0;
    }

    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 14px;
    }

    .text-muted {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .rows-selection {
        width: 100%;
        justify-content: center;
    }

    .pagination-info {
        width: 100%;
    }

    .pagination {
        justify-content: center;
    }

    .table th:not(:first-child),
    .table td:not(:first-child) {
        min-width: 120px;
    }
} */

.parent-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 16px;
    /* Optional for spacing on smaller screens */
    box-sizing: border-box;
}

.varify-password__layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 424px;
    height: 443px;
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);
    padding-left: 24px;
    padding-top: 36px;
    padding-right: 24px;
    border-radius: 4px;
    opacity: 100%;
    margin-bottom: 36px;
    /* margin-top: 36px; */
}


/* Element: browser-layout__content (inner content area) */
.varify-password__content {
    width: 100%;
    height: 100%;
    background: var(--org-card-background-color);
}

.coconut-logo {
    height: 28px;
    width: 64px;
}

.setup-account-title {
    position: absolute;
    top: 80px;
    width: 228px;
    height: 24px;
    white-space: nowrap;
}

.setup-account-title__text {
    font-family: var(--font-family-mulish);
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-24-bold);
    letter-spacing: 0%;
    color: var(--org-modal-bar-succes-color);
    margin: 0;
    opacity: 100%;
}

.setup-pasword__form {
    position: absolute;
    top: 140px;
    height: 267px;
    background: var(--org-card-background-color) !important;
    width: 376px;
}

.input-group {
    margin-bottom: 0;
}

.input-group label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--org-listing-sort-text-color);
    height: 23px;
    line-height: 100%;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    height: 40px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;

    opacity: 100%;
    background: var(--org-modal-inputfield-bg-color) !important;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--org-modal-inputfield-text-color) !important;
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    border-radius: 4px !important;
    outline: none;
}

.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--org-modal-inputfield-bg-color) inset;
    border-radius: 4px;
    font-family: var(--font-family-inter);
    font-weight: var(--inter-weight-regular);
    font-size: var(--inter-body-14-regular);
    -webkit-text-fill-color: var(--org-modal-inputfield-text-color);
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
}

.input-group input:focus {
    background: var(--org-modal-inputfield-bg-color) !important;
    color: var(--org-modal-inputfield-text-color) !important;
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
}

.welcomme-note {
    display: block;
    width: 270px;
    height: 17px;

    margin-top: 8px;
    color: var(--org-listing-sort-dropdown-email-color);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    opacity: 100%;
    margin-bottom: 16px;
}

.next-button {
    margin-top: 16px;
    width: 100%;
    padding: 10px;
    background-color: var(--adduser-button-bg-color);
    color: white;
    border: var(--adduser-button-border);
    border-radius: 4px;
    cursor: pointer;
    font-family: "Mulish", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}

.create-password__layout {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 424px;
    height: 530px;
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    padding-left: 24px;
    padding-top: 36px;
    padding-bottom: 36px;
    padding-right: 24px;
    border-radius: 4px;
    opacity: 100%;
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);
}

.create-pasword__form {
    position: absolute;
    top: 140px;
    height: 242px;
    background-color: transparent !important;
    width: 376px;
}

.confirm-password {
    margin-top: 24px;
}

.confirm_new_password {
    margin-top: 50px;
    width: 100%;
    padding: 10px;
    background-color: var(--adduser-button-bg-color);
    color: white;
    /* Updated to #FFFFFF based on "fill FFFFFF" */
    border: var(--adduser-button-border);
    border-radius: 4px;
    cursor: pointer;
    font-family: "Mulish", sans-serif;
    /* Updated from default */
    font-weight: 600;
    /* Updated to SemiBold */
    font-size: 16px;
    /* Updated to 16px */
    line-height: 100%;
    /* Updated to 100% */
    letter-spacing: 0%;
    /* Updated to 0% */
}

.password-rules {
    margin-top: 10px;
    padding: 10px;
    /* Added padding as requested */
    border: 1px solid #d2e0d5;
    /* Matches input border color */
    border-radius: 4px;
    /* Rounded corners */
}

.password-rules p {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--org-modal-bar-succes-color);
}

.password-rules ul {
    margin: 0;
    padding: 0;
    padding-left: 20px;
    /* Standard list padding */
}

.password-rules li {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--org-modal-bar-succes-color);
}

.loginpage__layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 424px;
    height: 480px;
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    padding-left: 24px;
    padding-top: 36px;
    padding-bottom: 36px;
    padding-right: 24px;
    border-radius: 4px;
    opacity: 100%;
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);


}

.signup-section{
    position: relative;
    right: 24px;
    margin: 60px auto 0;
    width: 100%;
    max-width: 500px;
    text-align: left;
    font-size: 18px;
    line-height: 1.4;
    font-family: "Mulish", sans-serif;
    color: var(--org-modal-bar-succes-color);
}

.signup-link{
    color: var(--enduser-message-text-color);
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}

.remember-me-frame {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.remember-me {
    /* margin-bottom: 36px; */
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.remember-me input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    appearance: none;
    border: 2px solid var(--org-listing-container-checkbox-color);
    border-radius: 4px;
    cursor: pointer;
    background-color: transparent;
    position: relative;
    outline: none;
    opacity: 50%;
}

.remember-me input[type="checkbox"]:checked {
    background-color: var(--org-listing-container-checkbox-color);
    /* Background when checked */
    opacity: 100%;
}

.remember-me input[type="checkbox"]:checked::after {
    content: "✔";
    /* Checkmark symbol */
    font-size: 12px;
    /* Adjusted to fit 22x22px box */
    color: #ffffff;
    /* Explicitly set white color */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    /* Ensure single-line checkmark */
    font-family: "Arial", sans-serif;
    /* Fallback font for checkmark */
}

.remember-me label {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--org-listing-sort-text-color);
    line-height: 12px;
    /* Vertical height as line-height */
    opacity: 100%;
}

.forgot-password {
    margin-top: 16px;
    width: 123px;
    height: 17px;
    white-space: nowrap;
}

.forgot-password small {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #4d6abf;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}

.forgot-password-link {
    color: var(--enduser-message-text-color);
    text-decoration: none;
    font-weight: 700;
}

.message {
    width: 632px;
    height: 39px;
    position: absolute;
    font-family: var(--font-family-inter);
    font-weight: var(--inter-weight-bold);
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--primary-blue);
    text-align: center;
    white-space: nowrap;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centers the box */
}

.message-container {
    position: relative;
    height: 100vh;
}

/* .sidebar {
        width: var(--sidebar-width); 
        height: var(--sidebar-height);
        background-color: var(--sidebar-bg-color);
        overflow: hidden;
        position: fixed;   
        left: 0;
        top: 42px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 35px;
        padding-bottom: 32px;
        z-index: 1020;
    }

    .nav-link {
        font-size: 12px;
        display: flex;
        text-align: center;
        flex-direction: column;
        padding: var(--nav-link-padding);
        width: 64px;
        height: 60px;
        color: var(--nav-link-color);
        text-decoration: none;
        transition: all 0.3s ease;
        align-items: center;
        gap:4px;
        margin-bottom: 8px;
        border-radius: 0;
       
    } */

/* .nav-link.active {
        background-color: var(--nav-link-active-bg);
        color: var(--nav-link-active-color);
        border-radius: var(--nav-link-active-radius);
        width: 100%;       
        margin: 0 auto;     
    } */

/* .sidebar li {
        padding: 0;
        margin: 0;
    } */

.badge {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
    padding: 0 !important;
    font-weight: var(--badge-font-weight);
}

.settings-container {
    margin-bottom: 50px;
}

.role-users-btn {
    width: 100%;
}

.btn-outline-black {
    border: var(--btn-outline-black-border);
    color: var(--btn-outline-black-color);
    background-color: transparent;
}

.btn-outline-black:hover {
    background-color: var(--btn-outline-black-hover-bg);
    color: var(--btn-outline-black-hover-color);
}

input[type="radio"] {
    accent-color: black;
}

.btn-dimmed {
    opacity: var(--btn-dimmed-opacity);
    pointer-events: none;
}

.role-alert-top {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    z-index: 1050;
    border-radius: 0;
    margin-top: 10px;
}

.btn-close {
    padding-bottom: 25px;
}

.url-list {
    display: none;
    margin-top: 10px;
}

.url-list.show {
    display: block;
}

.url-item {
    text-decoration: none !important;
    border-bottom: none !important;
    display: evenly;
}

.edit-btn-custom {
    background-color: var(--edit-btn-custom-bg);
    color: var(--edit-btn-custom-color);
    padding: var(--edit-btn-custom-padding);
    font-size: var(--edit-btn-custom-font-size);
    border: none;
    border-radius: var(--edit-btn-custom-radius);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    width: var(--edit-btn-custom-width);
    margin-right: 10px;
}

.edit-btn-custom:hover {
    background-color: var(--edit-btn-custom-hover-bg);
}

.text-editor {
    border: var(--text-editor-border);
    border-radius: var(--text-editor-radius);
    padding: var(--text-editor-padding);
    background-color: var(--text-editor-bg);
}

.url-text {
    white-space: var(--url-text-white-space);
    font-size: var(--url-text-font-size);
    padding-bottom: var(--url-text-padding-bottom);
}

.url-button {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

.button-group {
    display: flex;
    gap: var(--button-group-gap);
    align-items: center;
    padding: var(--button-group-padding);
    background-color: var(--button-group-bg);
}

.counter-btn {
    width: var(--counter-btn-width);
    height: var(--counter-btn-height);
    padding: 0;
    font-size: var(--counter-btn-font-size);
    background-color: var(--counter-btn-bg);
    border: var(--counter-btn-border);
    border-radius: var(--counter-btn-radius);
    color: var(--counter-btn-color);
}

.counter-display {
    width: var(--counter-display-width);
    height: var(--counter-display-height);
    text-align: center;
    line-height: var(--counter-display-height);
    background-color: #fff;
    border: var(--counter-btn-border);
    border-radius: var(--counter-btn-radius);
    color: var(--counter-btn-color);
    margin-bottom: var(--counter-display-margin-bottom);
}

.action-btn {
    margin-right: 10px;
    width: 20%;
}

.btn-change {
    background-color: var(--btn-change-bg);
    color: var(--btn-change-color);
    border: none;
    margin-right: 5px;
    margin-left: 20px;
}

.btn-change:disabled {
    opacity: 0.65;
    background-color: var(--btn-change-disabled-bg-color);
    color: var(--btn-change-disabled-color);
    border: none;
}

.btn-cancel {
    background-color: var(--btn-cancel-bg);
    border: var(--btn-cancel-border);
    color: var(--btn-cancel-color);
}

.bi-chevron-down {
    transition: transform 0.3s ease;
}

.bi-chevron-down.rotate-up {
    transform: rotate(180deg);
}

#whitelistDetails {
    display: none;
}

#whitelistDetails.show {
    display: block;
}

.instant-standby-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 481px;
    background-color: var(--enduser-container-bg-color);
    padding-right: 32px;
    padding-left: 32px;
    padding-top: 32px;
    padding-bottom: 28px;
    border-radius: 4px;
    opacity: 100%;
    box-shadow: var(--enduser-box-shadow);

}

/* Element: browser-layout__content (inner content area) */
.instant-standby-screen__content {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.button-container {
    position: absolute;
    display: flex;
    gap: 10px;
    /* Space between buttons */
    top: 247px;
    left: 128px;
    /* right: 120px; */
}

.launch-browser-button-container,
.stop-session-button-container {
    width: 218px;
    height: 48px;
}

.cpanelButtonTrigger {
    width: 100%;
    height: 100%;
    background: var(--enduser-launchbtn-color);
    border: none;
    border-radius: 4px;
    color: white;
    font-family: var(--font-family-mulish);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 16px 12px;
    /* Adjust padding to fit text */
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
}

#cpanelStop {
    border-radius: 4px;
    background-color: var(--enduser-stopbtn-bg-color);
    color: var(--enduser-stopbtn-text-color);
    border: 1px solid var(--primary-green);
}

.cpanelButtonTrigger:hover {
    background: var(--primary-green);
    /* Darker gradient on hover */
}

.browser__on {
    position: absolute;
    top: 315px;
    left: 0px;
    width: 100%;
    height: 22px;
    text-align: center;
}

.browser__on p {
    color: var(--enduser-browser-on-color);
    font-family: var(--font-family-mulish);
    font-size: 20px;
    font-weight: 700;
}

.response__message {
    position: absolute;
    top: 315px;
    left: 0px;
    width: 100%;
    height: 22px;
    white-space: nowrap;
    text-align: center;
}

.response__message p {
    color: var(--enduser-message-text-color) !important;
    font-family: var(--font-family-mulish);
    font-size: 20px;
    font-weight: 700;

}

.message-browser,
.initiating-browser-text {
    color: var(--enduser-message-text-color) !important;
}

.error__message {
    position: absolute;
    top: 370px;
    left: 0px;
    width: 100%;
    height: 22px;
    white-space: nowrap;
    text-align: center;
}

.download-cba-start-and-launch {
    position: absolute;
    top: 395px;
    left: 290px;
    width: 198;
    height: 22px;
    white-space: nowrap;
}

.download-cba {
    position: absolute;
    top: 395px;
    left: 260px;
    width: 198;
    height: 22px;
    white-space: nowrap;
}

.sync-cba {
    position: absolute;
    top: 395px;
    left: 400px;
    width: 198;
    height: 22px;
    white-space: nowrap;
}

.download-cba {
    position: absolute;
    top: 395px;
    left: 260px;
    width: 198;
    height: 22px;
    white-space: nowrap;
}

.sync-cba {
    position: absolute;
    top: 395px;
    left: 400px;
    width: 198;
    height: 22px;
    white-space: nowrap;
}

/* .main-content {
        position: absolute;
        top: 267px ;
        right: 5px;
        left: 24px;
        width: 100%; 
        height: 544px;
        background-color: #FFFFFF;
    } 

    /* .parent-container {
        position: relative; /* Ensure this is the parent of the absolute block */
/* } */

/* .my-absolute-box {
        position: absolute;
        top: 267px;
        left: 24px;
        right: 5px;
        /* Remove width: 100% if you're using left & right */
/* height: 544px;
        background-color: #FFFFFF;
        box-sizing: border-box;
    } */
*/ */

/* .my-absolute-box {
        position: absolute;
        top: 300px; /* Increased from 267px */
/* left: 50px; */
/* right: 5px; */
/* height: 544px;
        background-color: #FFFFFF;
        box-sizing: border-box;
    } */
*/ .parent-container {
    position: relative;
}

.my-absolute-box {
    position: absolute;
    top: var(--box-top);
    left: var(--box-left);
    right: var(--box-right);
    height: calc(100vh - var(--box-height-offset));
    background-color: var(--box-bg-color);
    box-sizing: border-box;
    padding: var(--box-padding);
    overflow: auto;
}

/* Table Styles */
.my-absolute-box table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--outer-border-color);
    background-color: var(--table-bg);
}

.my-absolute-box th,
.my-absolute-box td {
    border: 1px solid var(--inner-border-color);
    padding: var(--table-padding);
    text-align: var(--table-text-align);
}

.body-title {
    position: absolute;
    top: 76px;
    display: flex;
    flex-direction: column;
    /* Stack h1 and small vertically */
    gap: 8px;
    /* 8px gap between h1 and small */
    height: 47px;
    width: 290px;
    white-space: nowrap;
}

.body-title h1 {
    font-family: var(--font-family-mulish);
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-24-bold);
    height: 24px;
    width: 290px;
    color: var(--primary-blue);
    margin: 0 !important;
    padding: 0 !important;
}

.body-title p {
    height: 15px;
    width: 290px;
    font-family: var(--font-family-inter);
    font-weight: var(--inter-weight-regular);
    font-size: var(--inter-body-16-regular);
    opacity: var(--opacity);
    color: var(--primary-blue);
    margin: 0 !important;
    padding: 0 !important;
}


#user-list-search-bar {
    position: absolute;
    top: 158px;
    width: 320px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 42px;
    border: 1px solid #dbdbdb;
    /* Add border to search bar container */
    background-color: #ffffff;
    border-radius: 4px;
    opacity: var(--opacity);
}

#user-list-search-bar input#searchInput {
    width: 238px;
    height: 100%;
    border: none;
    /* Custom border color, override default */
    outline: none;
    /* Remove default browser outline */
    padding: 12.5px 63px 12.5px 12px;
    /* Top, Right, Bottom, Left padding */
    font-family: var(--font-family-inter);
    font-weight: var(--inter-weight-regular);
    font-size: var(--inter-body-14-regular);
}

.action_and_adduser__button {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;

    top: 159px;
    /* left: 93%; */
    right: 2%;
    /* display: flex; */
    width: 246px;
    height: 44px;
    gap: 16px;
}


.parent-container {
    position: relative;
    width: 100%;
    height: 100%;
}


@media (max-width: 768px) {
    .action_and_adduser__button {
        right: 16px;
        top: 120px;
        width: 200px;
    }
}

.action_and_adduser__button .dropdown .btn {
    width: 104px;
    height: 44px;
    padding: 10px 8px;
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #FFFFFF;
    color: var(--primary-green);
    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);

}

#user-list-search-bar .input-group-text {
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
}

.action_and_adduser__button {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    top: 159px;
    left: 1010px;
    right: 2%;
    display: flex;
    width: 246px;
    height: 44px;
    gap: 16px;
    /* Added 16px gap between buttons */
}

.action_and_adduser__button .dropdown .btn {
    width: 104px;
    height: 44px;
    padding: 10px 8px;
    /* Added padding: top/bottom 10px, left/right 8px */
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #ffffff;
    color: var(--primary-green);
    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);
}

.action_and_adduser__button .btn-primary {
    width: 126px;
    height: 44px;
    background-color: var(--primary-green);
    color: #ffffff;
    border-radius: 4px;

    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);
}

.action_and_adduser__button button.btn-primary:active {
    background-color: var(--primary-green);
    border: none;
}

button.btn-primary.dropdown-toggle::after {
    display: none !important;
}

button.btn-secondary.dropdown-toggle::after {
    display: none !important;
}

.action_and_adduser__button.btn-secondary {
    width: 104px;
    height: 44px;
}

/* .custom-table th,
.custom-table td {
    border: var(--border-style);
    padding: var(--cell-padding);
}

.custom-table th {
    background-color: var(--header-bg);
    text-align: var(--text-align-header);
} */

.action-buttons {
    display: none;
    position: relative;
    z-index: var(--action-buttons-z-index);
    gap: var(--action-buttons-gap);
}

.user-row.active-row .action-buttons {
    display: flex !important;
}

.status-col {
    padding: var(--status-col-padding);
    vertical-align: middle;
}

.status-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--status-wrapper-gap);
    position: relative;
}

.status-text {
    display: flex;
    align-items: center;
    gap: var(--status-text-gap);
}

.user-row:hover .status-text {
    opacity: 0;
    position: absolute;
}

.user-row.active-row .status-text {
    display: none;
}


.user-row.active-row .action-buttons {
    display: block;
}

.user-row:hover .action-buttons {
    display: flex;
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0 var(--icon-button-margin);
    cursor: pointer;
    outline: none;
    font-size: var(--icon-button-font-size);
    color: var(--icon-button-color);
}

.hover-dropdown-menu {
    display: none;
    position: absolute;
    top: var(--hover-dropdown-menu-top);
    right: 14px;
    background-color: var(--hover-dropdown-bg-color);
    border-radius: var(--hover-dropdown-menu-border-radius);
    box-shadow: var(--hover-dropdown-menu-box-shadow);
    width: var(--hover-dropdown-menu-min-width);
    max-height: var(--hover-dropdown-menu-height);
    z-index: var(--hover-dropdown-menu-z-index);
    padding: var(--hover-dropdown-menu-container-padding);
    transform: none;
    will-change: auto;
}

/* .icon-button:hover + .dropdown-menu,
    .dropdown-menu:hover {
        display: block;
    } */

.hover-dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hover-dropdown-menu li a {
    width: 170px;
    height: 32px;
    padding: 0px 8px;
    text-decoration: none;
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 70px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--hover-dropdown-text-color);
}

.hover-dropdown-menu li a:hover {
    background-color: var(--hover-dropdown-hover-bd-color) !important;
    border-radius: 0;
    opacity: 100%;
}

.hover-dropdown-menu li a.delete-user {
    margin-bottom: 0;
    border-bottom: none;
}

.notification,
#successNotification {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 8px;
    position: absolute;
    width: 550px;
    height: 48px;
    left: calc(50% - 514px / 2);
    top: 50px;
    background: #c6eec6;
    border: 1px solid #216767;
    box-shadow: 0px 6px 10px rgba(84, 113, 211, 0.14),
        0px 1px 18px rgba(84, 113, 211, 0.12);
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    text-align: center;
    white-space: nowrap;
    z-index: 9999;
    margin: 0 auto;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.notification .close-btn,
.close-notification {
    background: none;
    border: none;
    font-size: var(--close-btn-size);
    cursor: pointer;
    color: var(--close-btn-color);
    padding: 0;
    margin: 0;
    line-height: 1;
    position: absolute;
    width: var(--close-btn-dim);
    height: var(--close-btn-dim);
    padding-bottom: 40px;
    top: var(--close-btn-top);
    left: 500px;
}

/*HOVER ACTION POP MODALS*/

#deleteUserModal .modal-dialog {
    max-width: var(--modal-max-width);
}

#deleteUserModal .modal-content {
    position: relative;
    height: var(--modal-height);
    border-radius: var(--modal-radius);
    padding: var(--modal-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#deleteUserModal .modal-header {
    padding-bottom: 0;
}

#deleteUserModal .modal-body {
    padding-top: 0;
    font-size: var(--font-size-body);
}

.modal-title {
    color: var(--font-color-primary);
}

#deleteConfirmInput {
    width: var(--deleteConfirmInput-input-width);
    height: var(--deleteConfirmInput-input-height);
    border-radius: var(--deleteConfirmInput-input-radius);
    padding: var(--deleteConfirmInput-input-padding);
    gap: var(--deleteConfirmInput-input-gap);
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}

#deleteConfirmInput:focus {
    background: #F6FFF8;
    box-shadow: none;
}

#confirmDeleteBtn,
#requestLicenseBtn {
    background: var(--adduser-button-bg-color) !important;
    border: none;

    padding: var(--btn-padding);
    width: var(--btn-width);
    height: var(--btn-height);
    gap: var(--btn-gap);
}

.delete-text {
    width: 53px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding-bottom: 8px;
    padding-left: 4px;
}

#deleteUserModal .btn-cancel-modal,
#reqLicenseModal .btn-cancel-modal {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    box-sizing: border-box;
    background: var(--action-button-bg-color) !important;
    border: var(--action-button-border) !important;
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 4px;
}

.cancel-text {
    width: 56px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--action-button-text-color) !important;
    padding-top: 16px;
}

#deleteUserModal .modal-body p {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* RESET MODAL STYLES */
#resetUserModal .modal-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

#resetUserModal .modal-body {
    margin-top: 0;
    padding-top: 0;
}

#resetUserModal .modal-content {
    background-color: var(--reset-modal-bg);
    padding: 20px;
    border: var(--reset-modal-border);
    width: 80%;
    max-width: var(--reset-modal-max-width);
    text-align: left;
}

#resetUserModal .btn-send {
    background-color: var(--reset-btn-bg);
    border: none;
    color: var(--btn-color-white);
    padding: var(--btn-padding);
    width: var(--btn-width);
    height: var(--btn-height);
    gap: var(--btn-gap);
}

#resetUserModal .btn-outline-secondary {
    border-color: var(--btn-outline-border);
    color: var(--btn-outline-color);
    padding: var(--btn-padding);
    min-width: var(--btn-outline-min-width);
    width: var(--btn-width);
    height: var(--btn-height);
}

#resetUserModal .modal-footer {
    gap: var(--resetUserModal-input-gap);
    justify-content: flex-start;
}

#resetUserModal #resetUserMessage {
    margin: 0;
    padding: 0;
}

#resetUserModal .modal-title {
    margin-bottom: 0;
}

#sendBtn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* TOOLTIP IN HOVER ICONS */

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    visibility: hidden;
    background-color: var(--tooltip-bg-default);
    color: var(--tooltip-color);
    text-align: center;
    border-radius: var(--tooltip-border-radius);
    position: absolute;
    z-index: var(--tooltip- z-index);
    top: var(--tooltip-top);
    left: 0;
    width: var(--tooltip-width);
    padding: var(--tooltip-padding);
    height: var(--tooltip-height);
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: var(--tooltip-font-size);
    font-family: var(--tooltip-font-family);
    font-weight: var(--tooltip-font-weight);
    gap: var(--tooltip-gap);
}

.tooltip-wrapper:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

.tooltip-email {
    left: var(--tooltip-left-email);
}

.tooltip-group {
    left: var(--tooltip-left-group);
}

.tooltip-browser {
    left: var(--tooltip-left-browser);
}

.tooltip-component {
    left: var(--tooltip-left-component);
}

.search-wrapper {
    position: absolute;
    top: var(--search-wrapper-top);
    width: 320px;
    height: 44px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 42px;
    background-color: var(--org-listing-sort-bg-color);
    border: var(--org-listing-sort-border);
    border-radius: 4px;
}

.search-container input:focus {
    box-shadow: none;
    border: none;
    color: var(--org-card-subvalue-text-color);
}

.search-icon-container {
    width: 40px;
    height: 44px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 12px;
    gap: 10px;
}

.search-icon {
    position: absolute;
    right: var(--search-icon-right);
    top: var(--search-icon-top);
    transform: translateY(-50%);
    color: var(--search-icon-color);
    pointer-events: none;
}

.search-input::placeholder {
    width: 163px;
    height: 17px;
    font-family: 'Inter', sans-serif !important;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: var(--org-home-title-text-color) !important;
}

.search-input {
    width: var(--search-input-width);
    padding: var(--search-input-padding) var(--search-input-padding-right) var(--search-input-padding) var(--search-input-padding-left);
    border: 1px solid var(--search-input-border-color);
    border-radius: var(--search-input-border-radius);
    font-size: var(--search-input-font-size);
    box-sizing: border-box;
    border: none;
    background-color: var(--org-listing-sort-bg-color) !important;
    color: var(--org-card-subvalue-text-color) !important;
}

.dropdown-search-menu {
    position: absolute;
    top: var(--dropdown-search-menu-top);
    left: var(--dropdown-search-menu-left);
    right: var(--dropdown-search-menu-rigt);
    background-color: var(--dropdown-search-menu-bg-color);
    border: 1px solid var(--dropdown-search-menu-border-color);
    max-height: var(--dropdown-search-menu-max-height);
    overflow-y: auto;
    z-index: var(--dropdown-search-menu-z-index);
    border-radius: var(--dropdown-search-menu-border-radius);
    box-shadow: var(--dropdown-search-menu-shadow);
    width: 100%;
}

.dropdown-search-menu .dropdown-search-item {
    padding: var(--dropdown-search-menu-item-padding);
    cursor: pointer;
    border-bottom: var(--dropdown-search-menu-item-border);
    color: var(--org-card-subvalue-text-color);
}

.dropdown-search-menu .dropdown-search-item:last-child {
    border-bottom: none;
}

.dropdown-search-menu .dropdown-search-item:hover {
    background-color: var(--org-listing-sort-dropdown-hover-color);
    color: var(--org-card-subvalue-text-color);
}

.custom-geo-options,
.custom-geo-option,
.custom-geo-option:hover,
.custom-geo-option.active,
.custom-geo-option:focus,
.custom-geo-option:active,
.geo-country-options,
.geo-country-option,
.geo-country-option:hover,
.geo-country-option.active,
.geo-country-option:focus,
.geo-country-option:active,
.org-geo-options,
.org-geo-option,
.org-geo-option:hover,
.org-geo-option.active,
.org-geo-option:focus,
.org-geo-option:active {
    background-color: var(--org-modal-inputfield-bg-color) !important;
}

.dropdown-search-name {
    width: 148px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-listing-sort-dropdown-text-color);
    white-space: nowrap;

}

.dropdown-search-email {
    font-size: var(--dropdown-search-email-font-size);
    color: var(--org-listing-sort-dropdown-email-color);
    margin-top: var(--dropdown-search-email-margin-top);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 17px;

}

.no-match-alert {
    display: none;
    text-align: left;
    position: relative;
    bottom: 22px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
}

#noDataMessage,
#nostatusDataMessage {
    position: absolute;
    width: 518px;
    height: 16px;
    top: 190px;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* This centers the element horizontally */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--org-home-subtitle-text-color);
}

#noDataRow td,
#nostatusDataRow td {
    padding-bottom: var(--no-data-row);
}

/* .selected-users {
    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #323233 !important;
    line-height: 140% !important;
} */




.session-message {
    position: fixed;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--session-message-background-color) !important;
    color: var(--session-message-text-color) !important;
    padding: 12px 12px;
    border-radius: 4px;
    border: 1px solid var(--session-message-border-color) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1050;
    gap: 8px;
    height: 48px;
    max-width: fit-content;
    width: auto;
    transition: top 0.3s ease;
}

.session-message.with-ribbon {
    top: 90px;
}

.invalid-feedback::before,
.error-message::before {
    content: '';
    /* background-image: url('/assets/profile-page-icons/Frame 126617.png'); */
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.session-message span {
    height: 12px !important;
    width: auto !important;
    white-space: nowrap !important;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    width: 100%;
    height: 48px;
    line-height: 100%;

}

.session-message .close-btn {
    background: none;
    border: none;
    font-size: 25px;
    cursor: pointer;
    color: var(--session-message-cancel-symbol);
    line-height: 0%;
    transform: scale(1.3);
}



.left-align-footer {
    justify-content: flex-start !important;
}

/* TABLE HEADER COLOR START */

.user-checkbox,
.log-checkbox,
.user-checkboxmsp,
.select-all-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--org-listing-container-checkbox-border);
    background-color: var(--org-listing-container-checkbox-color);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 50%;
}

.user-checkbox:checked,
.log-checkbox:checked,
.user-checkboxmsp:checked,
.select-all-checkbox:checked {
    background-color: var(--org-listing-container-checkbox-color);
    border-color: var(--org-listing-container-checkbox-border);
    opacity: 100%;
}

.user-checkbox:checked::after,
.log-checkbox:checked::after,
.user-checkbox:checked::after,
.user-checkboxmsp:checked::after,
.select-all-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    width: 11.72px;
    height: 8.44px;
    background-image: url("/assets/img/Vector.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#addedOnSortIcon,
#firstNameSortIcon,
#lastNameSortIcon,
#orgNameSortIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    /* background: url("/assets/img/Arrow.png") no-repeat center center; */
    background-size: contain;
    font-size: 0;
    /* Hides the Bootstrap icon */
    vertical-align: middle;
}

/* TABLE HEADER COLOR END */

/* SUPPORT PAGE START */
/* Default (Normal screens: below 1280px) */
.main-container {
    position: absolute;
    left: var(--main-container-left);
    width: 85%;
    padding-bottom: 30px
}

/* Small laptops and tablets in landscape */

@media (min-width: 1000px) and (max-width: 1124px) {
    .main-container {
        width: 89%;
    }
}

@media (min-width: 1124px) and (max-width: 1280px) {
    .main-container {
        width: 91%;
    }
}

/* Standard laptops */
@media (min-width: 1280px) and (max-width: 1440px) {
    .main-container {
        width: 91.5%;
    }
}

/* Large laptops */
@media (min-width: 1440px) and (max-width: 1600px) {
    .main-container {
        width: 93%;
    }
}

/* Desktop monitors */
@media (min-width: 1600px) and (max-width: 1800px) {
    .main-container {
        width: 93%;
    }
}

@media (min-width: 1800px) and (max-width: 1920px) {
    .main-container {
        width: 93.5%;
    }
}

/* Full HD and larger */
@media (min-width: 1920px) and (max-width: 2000px) {
    .main-container {
        width: 94%;
    }
}

@media (min-width: 2000px) and (max-width: 2200px) {
    .main-container {
        width: 94%;
    }
}

@media (min-width: 2200px) and (max-width: 2400px) {
    .main-container {
        width: 95%;
    }
}

.support-title-container {
    width: 100%;
    height: var(--support-title-container-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--support-title-container-gap);
    opacity: var(--support-title-container-opacity);
}

.support-title h1 {
    width: var(--support-title-width);
    height: var(--support-title-height);
    opacity: var(--support-title-opacity);
    font-family: var(--support-title-font-family);
    font-weight: var(--support-title-font-weight);
    font-size: var(--support-title-font-size);
    color: var(--org-home-title-text-color);
    line-height: var(--support-title-line-height);
    padding: 0 !important;
    margin: 0 !important;
}

.support-subtitle p {
    width: var(--support-subtitle-width);
    height: var(--support-subtitle-height);
    opacity: var(--support-subtitle-opacity);
    font-family: var(--support-subtitle-font-family);
    font-weight: var(--support-subtitle-font-weight);
    font-size: var(--support-subtitle-font-size);
    line-height: var(--support-subtitle-line-height);
    letter-spacing: var(--support-subtitle-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    padding: 0 !important;
    margin: 0 !important;
}

.support-card-container {
    position: absolute !important;
    width: 100% !important;
    height: var(--support-card-container-height) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    top: var(--support-card-container-top) !important;
    gap: var(--support-card-container-gap) !important;
    margin: 0 !important;
}

.support-card-container .list-group-item:last-child {
    margin-bottom: 20px;
}

.list-group-item {
    border-radius: var(--org-listing-container-border-radius) !important;
    width: 100% !important;
    min-height: var(--list-group-item-min-height);
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--list-group-item-gap);
    padding: var(--list-group-item-padding);
    margin-bottom: var(--list-group-item-margin-bottom);
    background: var(--org-card-background-color);
    box-shadow: var(--org-card-box-shadow) !important;
    overflow: hidden;
    transition: var(--list-group-item-transition);
    cursor: pointer;
    border: var(--org-card-border-color) !important;
    backdrop-filter: blur(10px);
}

.list-group-item-container {
    width: 100%;
    height: var(--list-group-item-container-height);
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    opacity: 100%;
}

.inner-content {
    width: auto;
    height: var(--inner-content-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: var(--inner-content-gap);
}

.card-title {
    width: var(--card-title-width);
    height: var(--card-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-subtitle {
    width: var(--card-subtitle-width);
    height: var(--card-subtitle-height);
    font-family: var(--card-subtitle-font-family);
    font-weight: var(--card-subtitle-font-weight);
    font-size: var(--card-subtitle-font-size);
    line-height: var(--card-subtitle-line-height);
    letter-spacing: var(--card-subtitle-letter-spacing);
    color: var(--org-home-title-text-color);
    padding: 0 !important;
    margin: 0 !important;
}

.card-text {
    width: var(--card-text-width);
    height: var(--card-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-subtext {
    width: var(--card-subtext-width);
    height: var(--card-subtext-height);
    font-family: var(--card-subtext-font-family);
    font-weight: var(--card-subtext-font-weight);
    font-size: var(--card-subtext-font-size);
    line-height: var(--card-subtext-line-height);
    letter-spacing: var(--card-subtext-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    padding: 0 !important;
    margin: 0 !important;
}

.icon-container {
    width: var(--icon-container-width);
    height: var(--icon-container-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: var(--icon-container-gap);
    cursor: pointer;
}

.icon-container i {
    width: var(--icon-container-i-width);
    height: var(--icon-container-i-height);
    color: var(--org-home-title-text-color);
    display: inline-block !important;
    transition: var(--icon-container-i-transition);
}

.icon-container i.rotate-up {
    transform: var(--icon-container-i-rotate-up-transform) !important;
}

.card-add-title {
    width: var(--card-add-title-width);
    height: var(--card-add-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-add-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-add-subtitle {
    width: var(--card-add-title-width);
    height: var(--card-add-title-height);
    font-family: var(--card-add-subtitle-font-family);
    font-weight: var(--card-add-subtitle-font-weight);
    font-size: var(--card-add-subtitle-font-size);
    line-height: var(--card-add-subtitle-line-height);
    letter-spacing: var(--card-add-subtitle-letter-spacing);
    color: var(--org-home-title-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-add-text {
    width: var(--card-add-text-width);
    height: var(--card-add-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-add-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-add-subtext {
    width: var(--card-add-subtext-width);
    height: var(--card-add-subtext-height);
    font-family: var(--card-add-subtext-font-family);
    font-weight: var(--card-add-subtext-font-weight);
    font-size: var(--card-add-subtext-font-size);
    line-height: var(--card-add-subtext-line-height);
    letter-spacing: var(--card-add-subtext-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-blackcard-title {
    width: var(--card-blackcard-title-width);
    height: var(--card-blackcard-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-blackcard-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-blackcard-subtitle {
    width: var(--card-blackcard-subtitle-width);
    height: var(--card-blackcard-subtitle-height);
    font-family: var(--card-blackcard-subtitle-font-family);
    font-weight: var(--card-blackcard-subtitle-font-weight);
    font-size: var(--card-blackcard-subtitle-font-size);
    line-height: var(--card-blackcard-subtitle-line-height);
    letter-spacing: var(--card-blackcard-subtitle-letter-spacing);
    color: var(--org-home-title-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-blackcard-text {
    width: var(--card-blackcard-text-width);
    height: var(--card-blackcard-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-blackcard-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-blackcard-subtext {
    width: var(--card-blackcard-subtext-width);
    height: var(--card-blackcard-subtext-height);
    font-family: var(--card-blackcard-subtext-font-family);
    font-weight: var(--card-blackcard-subtext-font-weight);
    font-size: var(--card-blackcard-subtext-font-size);
    line-height: var(--card-blackcard-subtext-line-height);
    letter-spacing: var(--card-blackcard-subtext-letter-spacing);
    color: var(--card-blackcard-subtext-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-browsercard-title {
    width: var(--card-browsercard-title-width);
    height: var(--card-browsercard-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-browsercard-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-browsercard-subtitle {
    width: var(--card-browsercard-subtitle-width);
    height: var(--card-browsercard-subtitle-height);
    font-family: var(--card-browsercard-subtitle-font-family);
    font-weight: var(--card-browsercard-subtitle-font-weight);
    font-size: var(--card-browsercard-subtitle-font-size);
    line-height: var(--card-browsercard-subtitle-line-height);
    letter-spacing: var(--card-browsercard-subtitle-letter-spacing);
    color: var(--card-browsercard-subtitle-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-browsercard-text {
    width: var(--card-browsercard-text-width);
    height: var(--card-browsercard-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-browsercard-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-browsercard-subtext {
    width: var(--card-browsercard-subtext-width);
    height: var(--card-browsercard-subtext-height);
    font-family: var(--card-browsercard-subtext-font-family);
    font-weight: var(--card-browsercard-subtext-font-weight);
    font-size: var(--card-browsercard-subtext-font-size);
    line-height: var(--card-browsercard-subtext-line-height);
    letter-spacing: var(--card-browsercard-subtext-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-contactus-title {
    width: var(--card-contactus-title-width);
    height: var(--card-contactus-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-contactus-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-contactus-subtitle {
    width: var(--card-contactus-subtitle-width);
    height: var(--card-contactus-subtitle-height);
    font-family: var(--card-contactus-subtitle-font-family);
    font-weight: var(--card-contactus-subtitle-font-weight);
    font-size: var(--card-contactus-subtitle-font-size);
    line-height: var(--card-contactus-subtitle-line-height);
    letter-spacing: var(--card-contactus-subtitle-letter-spacing);
    color: var(--org-home-title-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-contactus-text {
    width: var(--card-contactus-text-width);
    height: var(--card-contactus-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-contactus-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-contactus-subtext {
    width: var(--card-contactus-subtext-width);
    height: var(--card-contactus-subtext-height);
    font-family: var(--card-contactus-subtext-font-family);
    font-weight: var(--card-contactus-subtext-font-weight);
    font-size: var(--card-contactus-subtext-font-size);
    line-height: var(--card-contactus-subtext-line-height);
    letter-spacing: var(--card-contactus-subtext-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-faq-title {
    width: var(--card-faq-title-width);
    height: var(--card-faq-title-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-faq-title-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-faq-subtitle {
    width: var(--card-faq-subtitle-width);
    height: var(--card-faq-subtitle-height);
    font-family: var(--card-faq-subtitle-font-family);
    font-weight: var(--card-faq-subtitle-font-weight);
    font-size: var(--card-faq-subtitle-font-size);
    line-height: var(--card-faq-subtitle-line-height);
    letter-spacing: var(--card-faq-subtitle-letter-spacing);
    color: var(--org-home-title-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.card-faq-text {
    width: var(--card-faq-text-width);
    height: var(--card-faq-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-faq-text-gap);
    padding: 0 !important;
    margin: 0 !important;
}

.card-faq-subtext {
    width: var(--card-faq-subtext-width);
    height: var(--card-faq-subtext-height);
    font-family: var(--card-faq-subtext-font-family);
    font-weight: var(--card-faq-subtext-font-weight);
    font-size: var(--card-faq-subtext-font-size);
    line-height: var(--card-faq-subtext-line-height);
    letter-spacing: var(--card-faq-subtext-letter-spacing);
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}

.faq-content {
    width: var(--faq-content-width);
    height: var(--faq-content-height);
    border-bottom: var(--faq-content-border-bottom);
    padding: var(--faq-content-padding);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--faq-content-gap);
}

.faq-content.hidden {
    display: var(--faq-content-hidden-display) !important;
    height: var(--faq-content-hidden-height) !important;
    overflow: var(--faq-content-hidden-overflow) !important;
    margin-bottom: var(--faq-content-hidden-margin-bottom) !important;
}

.faq-title {
    width: var(--faq-title-width);
    height: var(--faq-title-height);
    color: var(--org-home-title-text-color);
    font-family: var(--faq-title-font-family);
    font-weight: var(--faq-title-font-weight);
    font-size: var(--faq-title-font-size);
    line-height: var(--faq-title-line-height);
    letter-spacing: var(--faq-title-letter-spacing);
    padding: 0 !important;
    margin: 0 !important;
}

.faq-text {
    width: var(--faq-text-width);
    height: var(--faq-text-height);
    color: var(--org-home-subtitle-text-color);
    font-family: var(--faq-text-font-family);
    font-weight: var(--faq-text-font-weight);
    font-size: var(--faq-text-font-size);
    line-height: var(--faq-text-line-height);
    letter-spacing: var(--faq-text-letter-spacing);
}

.read-text {
    font-family: var(--read-text-font-family);
    font-size: var(--read-text-font-size);
    line-height: var(--read-text-line-height);
    letter-spacing: var(--read-text-letter-spacing);
    color: var(--org-modal-template-download-color);
    cursor: pointer;
}

.hidden {
    display: var(--hidden-display) !important;
    height: var(--hidden-height) !important;
    overflow: var(--hidden-overflow) !important;
}

.req-container {
    width: var(--req-container-width);
    height: var(--req-container-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--req-container-gap);
    padding-top: var(--req-container-padding-top);
}

.req-container.hidden {
    display: var(--req-container-hidden-display) !important;
    height: var(--req-container-hidden-height) !important;
    overflow: var(--req-container-hidden-overflow) !important;
}

.req-text {
    width: var(--req-text-width);
    height: var(--req-text-height);
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--req-text-gap);
}

.req-subtext {
    width: var(--req-subtext-width);
    height: var(--req-subtext-height);
    font-family: var(--req-subtext-font-family);
    font-weight: var(--req-subtext-font-weight);
    font-size: var(--req-subtext-font-size);
    line-height: var(--req-subtext-line-height);
    letter-spacing: var(--req-subtext-letter-spacing);
    color: var(--org-card-subvalue-text-color);
}

.btn-container {
    width: var(--btn-container-width);
    height: var(--btn-container-height);
    display: flex !important;
    align-items: center;
    gap: var(--btn-container-gap);
}

.custom-flex-container {
    width: var(--custom-flex-container-width);
    height: var(--custom-flex-container-height);
    display: flex !important;
    align-items: center;
    padding: 0px;

}

.request-btn-container {
    width: var(--request-btn-container-width);
    height: var(--request-btn-container-height);
    opacity: var(--request-btn-container-opacity);
}

.request-outline-btn {
    width: var(--request-outline-btn-width);
    height: var(--request-outline-btn-height);
    border-radius: var(--request-outline-btn-border-radius);
    padding: var(--request-outline-btn-padding);
    background-color: var(--adduser-button-bg-color);
    /* box-shadow: var(--request-outline-btn-box-shadow); */
}

.request-btn,
.request-btn:hover,
.request-btn:focus,
.request-btn:active {
    width: var(--request-btn-width);
    height: var(--request-btn-height);
    font-family: var(--request-btn-font-family);
    font-weight: var(--request-btn-font-weight);
    font-size: var(--request-btn-font-size);
    line-height: var(--request-btn-line-height);
    letter-spacing: var(--request-btn-letter-spacing);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--request-btn-padding);
    color: var(--adduser-button-text-color) !important;
    border: var(--adduser-button-border);
    outline: none;
}

.request-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.cancel-btn-container {
    width: var(--cancel-btn-container-width);
    height: var(--cancel-btn-container-height);
    border-radius: var(--cancel-btn-container-border-radius);
    padding: var(--cancel-btn-container-padding);
    border: var(--action-button-border);
    color: var(--action-button-bg-color);
    /* box-shadow: var(--cancel-btn-container-box-shadow); */
}

.cancel-btn,
.cancel-btn:hover,
.cancel-btn:focus,
.cancel-btn:active {
    width: var(--cancel-btn-width);
    height: var(--cancel-btn-height);
    font-family: var(--cancel-btn-font-family);
    font-weight: var(--cancel-btn-font-weight);
    font-size: var(--cancel-btn-font-size);
    line-height: var(--cancel-btn-line-height);
    letter-spacing: var(--cancel-btn-letter-spacing);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cancel-btn-padding);
    color: var(--action-button-text-color) !important;
    border: 0px;
}

.cancel-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px rgba(248, 244, 244, 0.2);
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.number-container {
    width: var(--number-container-width);
    height: var(--number-container-height);
    position: relative;
    background-color: var(--action-button-bg-color);
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    overflow: hidden;
    word-break: break-word;
    text-align: center;
}

.license-number {
    position: absolute;
    top: var(--license-number-top);
    left: var(--license-number-left);
    width: var(--license-number-width);
    height: var(--license-number-height);
    font-family: var(--license-number-font-family);
    font-weight: var(--license-number-font-weight);
    font-size: var(--license-number-font-size);
    line-height: var(--license-number-line-height);
    letter-spacing: var(--license-number-letter-spacing);
    color: var(--action-button-text-color);
    outline: none;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: nowrap;

}

.license-number:focus {
    outline: none;
}

.minus-btn-container,
.minus-btn-container:hover {
    width: var(--minus-btn-container-width);
    height: var(--minus-btn-container-height);
    /* border-top-right-radius: var(--minus-btn-container-border-top-right-radius); */
    /* border-bottom-right-radius: var(--minus-btn-container-border-bottom-right-radius); */
    border-top-left-radius: var(--minus-btn-container-border-top-left-radius);
    border-bottom-left-radius: var(--minus-btn-container-border-bottom-left-radius);
    background-color: var(--adduser-button-bg-color);
    opacity: var(--minus-btn-container-opacity);
    color: var(--adduser-button-text-color);
}

.minus-btn-container.disabled,
.minus-btn-container.disabled:hover {
    opacity: 50%;
    cursor: not-allowed;
}

.add-btn-container,
.add-btn-container:hover {
    width: var(--add-btn-container-width);
    height: var(--add-btn-container-height);
    border-top-right-radius: var(--add-btn-container-border-top-right-radius);
    border-bottom-right-radius: var(--add-btn-container-border-bottom-right-radius);
    background-color: var(--adduser-button-bg-color);
    color: var(--adduser-button-text-color);
}

.minus-input,
.add-input {
    width: var(--minus-input-width);
    height: var(--minus-input-height);
    position: relative;
    top: var(--minus-input-top);
    left: var(--minus-input-left);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: inherit;
}

.minus-btn i,
.add-btn i {
    position: relative;
    background: none;
    border: none;
    color: var(--minus-btn-i-color);
    padding: 0;
    width: var(--minus-btn-i-width);
    height: var(--minus-btn-i-height);
    top: var(--minus-btn-i-top);
    left: var(--minus-btn-i-left);
    right: 5px;
    bottom: 11px;
}

.button-wrapper {
    display: flex;
    align-items: center;
    gap: var(--button-wrapper-gap);
}

.expandable-content {
    margin-top: 10px;
}

/* SUPPORT PAGE END */

.page-link:focus {
    outline: none;
    box-shadow: none;
}

.form-select {
    border: none;
    background-color: #f6fff8;
}

.import-api-text {
    filter: blur(1px);
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px !important;
    line-height: 100%;
    color: #28396A !important;
}

/* SETTINGS PAGE START */
.settings-group-item {
    width: 1250px;
    min-height: 84px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: #ffffff;
    transition: height 0.3s ease;
    overflow: hidden;
    opacity: 100%;
    transition: height 0.3s ease;
    cursor: pointer;
}

.settings-group-item.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 32px;
    width: 1250px;
    height: 231px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.settings-role-group-item {
    width: 1250px;
    height: 84px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: #ffffff;
    transition: height 0.3s ease;
    overflow: hidden;
    opacity: 100%;
    transition: height 0.3s ease;
    cursor: pointer;
    min-height: 84px;
}

.settings-role-group-item.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
    width: 1250px;
    height: 176px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.settings-blacklist-group-item {
    width: 1250px;
    min-height: 84px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: #ffffff;
    transition: height 0.3s ease;
    overflow: hidden;
    opacity: 100%;
    transition: height 0.3s ease;
    cursor: pointer;
}

.settings-blacklist-group-item.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    width: 1250px;
    height: 232px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.settings-whitelist-group-item {
    width: 1250px;
    min-height: 84px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: #ffffff;
    transition: height 0.3s ease;
    overflow: hidden;
    opacity: 100%;
    transition: height 0.3s ease;
    cursor: pointer;
}

.settings-whitelist-group-item.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    width: 1250px;
    height: 212px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.settings-license-group-item {
    width: 1250px;
    min-height: 84px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    border-radius: 4px;
    padding: 16px;
    background: #ffffff;
    transition: height 0.3s ease;
    overflow: hidden;
    opacity: 100%;
    transition: height 0.3s ease;
    cursor: pointer;
}

.settings-license-group-item.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
    width: 1250px;
    height: 195px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
}

.card-default {
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    cursor: pointer;
    transition: height 0.3s ease;
    overflow: hidden;

}



.user-card-default {
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    cursor: pointer;
    transition: height 0.3s ease;
    overflow: hidden;

}

.user-msp-company-expanded-container {
    display: none;
}

.user-card-default.expanded .user-msp-company-expanded-container {
    display: block;
}

.user-card-default.expanded {
    height: 500px;
}

.user-card-default.expanded.div9 {
    height: 510px;
}

.user-card-default.expanded .blacklist-expand1-content-text,
.user-card-default.expanded .whitelist-expand1-content,
.user-card-default.expanded .license-layout1-container {
    display: block;
}

.usersettings-group-item-container,
.settings-group-item-container {
    width: 100%;
    height: 52px;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    opacity: 100%;
}

.settings-inner-container {
    width: 1136px;
    display: flex !important;
    align-items: flex-start !important;
    gap: 32px;
}

.settings-title-container {
    position: absolute;
    width: 290px;
    height: 47px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    opacity: 100%;
}

.settings-title h1 {
    width: 290px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--org-home-title-text-color);
    opacity: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.settings-subtitle p {
    width: 290px;
    height: 15px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #28396a;
    opacity: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.settings-card-container {
    position: relative !important;
    width: 1168px;
    height: 554px;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    top: 83px;
    gap: 8px;
    opacity: 100%;
}

.settings-inner-content {
    width: 398px;
    height: 52px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-card-title {
    width: 231px;
    height: 24px !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    gap: 8px;
    opacity: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.settings-card-title img {
    width: 24px;
    height: 24px;
}

.settings-card-subtitle {
    width: 199px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
    margin: 0;
    padding: 0;
}

.settings-card-text {
    width: 398px;
    height: 12px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 32px;
    opacity: 100%;
}

.browser-container {
    width: 649px;
    height: 107px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 30px;
}

.browser-container.hidden {
    display: none;
    height: 0;
    overflow: hidden;
}

.settings-card-subtext {
    width: 366px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #28396a;
}

.geolocation-container {
    width: 122px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.geolocation-content {
    width: 74px;
    height: 20px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 12px;
    opacity: 100%;
}

.geolocation-text {
    width: auto;
    height: auto;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 75%;
    letter-spacing: 0%;
    text-align: right;
    color: #28396a;
    white-space: nowrap;

}

.geolocation-text {
    position: relative;
    right: 10px;
}

.msp-text.msp-company-name {
    position: relative;
    left: 7px;
}

.msp-text.user-msp-company-name {
    position: relative;
    left: 7px;
}

.settings-role-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;
    width: 1136px;
    height: 124px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.settings-role-content {
    width: 523px;
    height: 52px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    opacity: 100%;
}

.settings-role-title {
    width: 176px;
    height: 24px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    opacity: 100%;
}

.settings-role-icon {
    width: 24px;
    height: 24px;
}

.settings-role-icon img {
    width: 20px;
    height: 14px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    top: 5px;
    left: 2px;
    color: #28396a;
}

.settings-role-subtitle {
    width: 144px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
}

.settings-role-text {
    width: 523px;
    height: 12px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 32px;
    opacity: 100%;
}

.settings-role-subtext {
    width: 491px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #28396a;
}

.role-user-container {
    width: 170px;
    height: 52px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 14px;
}

.role-user-content {
    width: 136px;
    height: 20px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-left: 0;
}

.role-user-text {
    width: 136px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    color: #28396a;
}

.settings-blacklisted-content {
    width: 210px;
    height: 48px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-blacklist-title {
    width: 192px;
    height: 24px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.settings-blacklist-icon {
    width: 24px;
    height: 24px;
}

.settings-blacklist-subtitle {
    width: 160px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
}

.settings-blacklist-text {
    width: 216px;
    height: 12px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 32px;
    opacity: 100%;
}

.settings-blacklist-subtext {
    width: 184px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.015em;
    color: #28396a;
}

.list-blocked-container {
    width: 152px;
    height: 52px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.list-blocked-content {
    width: 104px;
    height: 20px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.list-blocked-text {
    width: 110px;
    height: 20px;
    font-weight: 700;
    font-family: "Mulish", sans-serif;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    color: #28396a;
    opacity: 100%;
}

.settings-whitelisted-content {
    width: 526px;
    height: 52px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-whitelisted-title {
    width: 197px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.settings-whitelisted-icon {
    width: 24px;
    height: 24px;
}

.settings-whitelisted-subtitle {
    width: 165px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
}

.settings-whitelisted-text {
    width: 526px;
    height: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 32px;
}

.settings-whitelisted-subtext {
    width: 494px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #28396a;
}

.whitelistlist-hold-container {
    width: 396px;
    height: 52px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.whitelistlist-hold-content {
    width: 348px;
    height: 20px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.whitelistlist-hold-text {
    width: 348px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    color: #28396a;
}

.settings-license-content {
    width: 474px;
    height: 52px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-license-title {
    width: 256px;
    height: 24px;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.settings-license-icon {
    width: 24px;
    height: 24px;
}

.settings-license-subtitle {
    width: 224px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
}

.settings-license-text {
    width: 474px;
    height: 12px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-left: 32px;
}

.settings-license-subtext {
    width: 442px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #28396a;
}

.license-container {
    width: 120px;
    height: 52px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    position: relative;
}

.license-content {
    width: 72px;
    height: 20px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.license-threshold-text {
    width: 72px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    color: #28396A;
}

.role-text {
    width: 373px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 16px 0 16px 30px;
    opacity: 100%;
}

.role-standard {
    width: 151px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    opacity: 100%;
}

.role-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 0;
    left: 0;
    opacity: 100%;
}

.settings-radio {
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 3px;
    left: 3px;
    border-radius: 100px;
    border-width: 1px;
    border: 1px solid #34b1b1;
    padding: 5px;
    cursor: pointer;
}

.settings-custom-radio {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    top: 6px;
    left: 6px;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    margin: 0;
}

.settings-custom-radio.checked:after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #34b1b1;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -50%;
    left: -150%;
}

.role-standard p {
    width: 123px;
    height: 22px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0%;
    color: #000000;
    opacity: 100%;
}

.role-placeholder {
    width: 156px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.role-placeholder p {
    width: 128px;
    height: 22px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0%;
    color: #000000;
}

.role-buttons {
    width: 249px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.change-btn-container {
    width: 116px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    height: 40;
    opacity: 100%;
}

.change-outline-btn {
    width: 117px;
    height: 40px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    background: #216767;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    box-shadow: 0px 0.84px 4.18px 0px #0000004d;
}

.change-btn,
.change-btn:hover,
.change-btn:focus,
.change-btn:active {
    width: 63px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    opacity: 100%;
}

.change-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #216767;
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.cancel-button-container {
    width: 117px;
    height: 40px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    border-width: 1px;
    background: #ffffff;
    border: 1px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
}

.cancel-button,
.cancel-button:hover,
.cancel-button:focus,
.cancel-button:active {
    width: 56px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #216767 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
}

.cancel-button:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #ffffff;
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.role-layout-container {
    width: 1110px;
    height: 40px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    flex: none;
    order: 1;
    flex-grow: 0;
    padding-top: 50px;
}

.role-layout-container.hidden {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.license-layout-container {
    width: 1136px;
    height: 79px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 30px;
}

.license-layout-container.hidden {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.license-input-text {
    width: 1136px;
    height: 23px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.license-input-text p {
    width: 1136px;
    height: 23px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #323233;
}

.license-button {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.whitelist-expand-content {
    width: 1136px;
    height: 96px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-left: 30px;
}

.whitelist-expand-content.hidden {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.whitelist-expand-content-text {
    width: 1106px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0;
    /* box-shadow: 0px 0px 4px 0px #00000040 inset; */
}

.whitelist-expand-content-text p {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 15.04px;
    line-height: 100%;
    letter-spacing: -1.5%;
    margin: 0;
}

.whitelist-inner-text {
    width: 455px;
    height: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.whitelist-text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #28396a;
}

.white-list-btn-container {
    width: 257px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.blacklist-expand-content-text {
    width: 1136px;
    height: 111px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-left: 30px;
    opacity: 100%;
}

.blacklist-expand-content-text.hidden {
    overflow: hidden;
    visibility: hidden;
}

.blacklist-inner-expand-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 30px;
    gap: 24px;
    width: 1136px;
    height: 231px;
    flex: none;
    order: 1;
    flex-grow: 1;
}

.blacklist-inner-expand-content {
    overflow: hidden;
    visibility: hidden;
}

.blacklist-url-content {
    width: 1106px;
    height: 47px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0;
    opacity: 100%;
    /* box-shadow: 0px 0px 4px 0px #00000040 inset; */
}

.url-font {
    width: 118px;
    height: 15px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 15.04px;
    line-height: 100%;
    letter-spacing: -1.5%;
    color: #323233;
    white-space: nowrap;
}

.blacklist-editbtn-container {
    width: 116px;
    height: 40px;
}

.edit-outline-button {
    width: 117px;
    height: 40px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    background: #216767;
    box-shadow: 0px 0.84px 4.18px 0px #0000004d;
    opacity: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-button,
.edit-button:hover,
.edit-button:active,
.edit-button:focus {
    width: 68px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #ffffff !important;
    background-color: #216767 !important;
    border: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.edit-button:active {
    transform: scale(0.96);
}

/* .browser-layout-container {
    width: 649px;
    height: 107px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
} */
.browser-select {
    width: 649px;
    height: 71px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    opacity: 100%;
}

.browser-select-content {
    width: 376px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-left: 32px;
    opacity: 100%;
}

.browser-select-title {
    width: 344px;
    height: 23px;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.browser-select-title label {
    width: 344px;
    height: 23px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.browser-select-dropdown {
    position: relative;
    width: 344px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #d2e0d5;
    background: #f6fff8;
    opacity: 100%;
}

.browser-select-dropdown .browser-select-input {
    width: 100%;
    background-color: transparent;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0%;
    color: #216767;
    cursor: pointer;
    opacity: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: none;
}

.country-placeholder {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0%;
    color: #216767;
    margin: 0 auto;
    width: 245px;
    height: 17px;
    position: relative;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.restrict-geolocation-country-placeholder {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0%;
    color: #216767;
    width: 245px;
    height: 17px;
    position: relative;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.country-name {
    margin: 0 auto;
    width: 78px;
    height: 17px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #216767;
}

.dropdown-icon-wrapper {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 8px;
    top: 30%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dropdown-icon-wrapper .fa-chevron-down {
    width: 12px;
    height: 7.41px;
    position: relative;
    top: 0;
    left: 0;
    color: #216767;
}

.browser-btn-container {
    width: 249px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
    opacity: 100%;
    position: relative;
    right: 15px;
}

.browser-apply {
    width: 299px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 0px 32px;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-bottom: 40px;
    opacity: 100%;
}

.browser-apply-content {
    width: 203px;
    height: 17px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    opacity: 50%;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.user-send-checkbox {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 7.5px;
    position: relative;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
}

.browser-checkbox {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 7.5px;
    position: relative;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
}

.browser-checkbox-input {
    position: relative;
    width: 18px;
    height: 18px;
    right: 30px;
    flex: none;
    order: 0;
    flex-grow: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 50%;
}

.browser-checkbox-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34b1b1;
    border-radius: 3px;
    cursor: pointer;
}

.browser-checkbox-input:checked::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 1.5px;
    top: 1.5px;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
}

.browser-checkbox-input:checked {
    opacity: 100%;
}


.modal-backdrop {
    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;
}

.browser-modal-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 64px;
    position: absolute;
    width: 456px;
    height: 214px;
    left: calc(50% - 456px / 2);
    top: calc(50% - 214px / 2 + 1px);
    background: #ffffff;
    border-radius: 4px;
}

.browser-modal-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 408px;
    height: 62px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.browser-modal-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    width: 408px;
    height: 62px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.browser-modal-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;
    width: 408px;
    height: 24px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.modal-title {
    width: 240px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
}

.browser-modal-title .modal-title {
    width: 275px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
    white-space: nowrap;
}

.modal-close {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    gap: 10px;
    margin: 0 auto;
    width: 133px;
    height: 24px;
    flex: none;
    order: 1;
    flex-grow: 1;
    cursor: pointer;
}

.modal-close-vector {
    width: 13.15px;
    height: 13.15px;
    background: var(--org-listing-sort-text-color);
    cursor: pointer;
    flex: none;
    order: 0;
    flex-grow: 0;
    clip-path: polygon(20% 0%,
            0% 20%,
            30% 50%,
            0% 80%,
            20% 100%,
            50% 70%,
            80% 100%,
            100% 80%,
            70% 50%,
            100% 20%,
            80% 0%,
            50% 30%);
}

.modal-subtitle {
    width: 390px;
    height: 34px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #323233;
    flex: none;
    order: 1;
    flex-grow: 0;
}



.browser-modal-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 408px;
    height: 40px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    padding-left: 60px;
    opacity: 100%;
}

.browser-modal-footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 250px;
    height: 40px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.browser-modal-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 250px;
    height: 40px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.modal-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 13.37px;
    width: 117px;
    height: 40px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.modal-button.change {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 27px;
    gap: 6.69px;
    width: 117px;
    height: 40px;
    background: #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 3.34262px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
}

.modal-button.change .modal-button-text {
    width: 63px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #ffffff;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.modal-button.cancel {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    width: 117px;
    height: 40px;
    background: #ffffff;
    border: 1.67131px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 3.34262px;
    flex: none;
    order: 1;
    flex-grow: 0;
    cursor: pointer;
}

.modal-button.cancel .modal-button-text {
    width: 56px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #216767;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.blacklist-editlist-container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 30px;
    gap: 24px;
    width: 1136px;
    height: auto;
    flex: none;
    order: 1;
    flex-grow: 1;
    background-color: #000;
}

.settings-blacklist-group-item.expanded.edit-mode {
    height: 339px;
}

.blacklist-editlist-container.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    width: 1136px;
    height: 231px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

.blacklist-editlist-container.hidden {
    overflow: hidden;
    visibility: hidden;
}

.blacklist-url-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px 12px;
    gap: 12px;
    width: 1106px;
    height: auto;
    background: #f6fff8;
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.black-list-btn-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    width: 257px;
    height: 40px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.blacklist-url-content-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    white-space: nowrap;
}

.blacklist-url-content-row p {
    width: 99px;
    height: 15px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15.0418px;
    line-height: 100%;
    letter-spacing: -0.015em;
    color: #323233;
    position: relative;
    top: 2px;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0;
    white-space: nowrap;
}

.blacklist-url-textarea {
    width: 100%;
    min-height: 100px;
    padding: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #323233;
    border: 1px solid #f6fff8;
    border-radius: 4px;
    resize: vertical;
    background-color: #f6fff8;
    border: 0;
    outline: none;
}

.expanded {
    overflow: visible;
}

.license-inner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;
    width: 1136px;
    height: 163px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* SETTING PAGE END */

.browser-change-btn,
.browser-change-btn:hover,
.browser-change-btn:active,
.browser-change-btn:focus {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 13.37px;
    width: 117px;
    height: 40px;
    background-color: #216767 !important;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: #ffffff !important;
}

.browser-cancel-btn,
.browser-cancel-btn:hover,
.browser-cancel-btn:active,
.browser-cancel-btn:focus {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    width: 117px;
    height: 40px;
    background: #ffffff;
    border: 1.67131px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 3.34262px;
    color: #216767;
}


/* DASHBOARD START */
.home-title-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    position: absolute;
    width: 240px;
    height: 44px;
    white-space: nowrap;
}

.home-title h1 {
    width: 240px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396a;
    flex: none;
    opacity: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.home-subtitle p {
    width: 240px;
    height: 12px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396a;
    flex: none;
    padding: 0 !important;
    margin: 0 !important;
}

.home-content {
    position: absolute;
    top: 88px;
}

/* .home-content-row .card-primary{
        padding-right: 15px;
        padding-left: 15px;
    } */
.card-primary,
.card-second,
.card-third {
    width: 372px;
    height: 182px;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #ffffff;
    border: 2px solid #eff0f1;
    border-radius: 4px;
}

.card-second {
    left: 397px;
}

.card-third {
    left: 794px;
}

.second-row {
    position: absolute;
    top: 209px;
}

.chart-card {
    position: absolute;
    width: 770px;
    height: 376px;
    background: #ffffff;
    border: 2px solid #eff0f1;
    border-radius: 4px;
    box-sizing: border-box;
    /* top:365px; */
}

.action-card {
    position: absolute;
    width: 373px;
    height: 376px;
    left: 794px;
    box-sizing: border-box;
    border: 2px solid #eff0f1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    margin-left: 14px;
}

.user-card {
    width: 204px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 16px;
}

.total-user {
    width: 24px;
    height: 24px;
}

.total-user img {
    position: relative;
    left: 6.27%;
    right: 0%;
    top: 12.48%;
    bottom: 18.75%;
}

.user-card h2 {
    width: 172px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
    white-space: nowrap;
}

.totaluser-card p {
    position: absolute;
    width: 42px;
    height: 23px;
    left: calc(50% - 42px / 2 + 0.5px);
    top: calc(50% - 23px / 2 + 0.5px);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396a;
    white-space: nowrap;
}

/* .live-card{
position: absolute;
width: 372px;
height: 182px;
left: 0px;
top: 0px;
background: #FFFFFF;
border: 2px solid #EFF0F1;
border-radius: 4px;

} */
.session-card {
    width: 243px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 16px;
}

.live-session {
    width: 24px;
    height: 24px;
}

.session-card h2 {
    width: 211px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
    white-space: nowrap;
}

.live-card p {
    position: absolute;
    width: 40px;
    height: 23px;
    left: calc(50% - 40px / 2 + 0.5px);
    top: calc(50% - 23px / 2 + 0.5px);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396a;
    white-space: nowrap;
}

.pending-card {
    width: 227px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 16px;
}

.clock-pending {
    width: 24px;
    height: 24px;
}

.pending-card h2 {
    width: 195px;
    height: 20px;
    font-family: "Mulish";
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
    white-space: nowrap;
}

.pending-user p {
    position: absolute;
    width: 36px;
    height: 23px;
    left: calc(50% - 36px / 2 + 0.5px);
    top: calc(50% - 23px / 2 + 0.5px);
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396a;
    white-space: nowrap;
}

.resend-link {
    position: absolute;
    width: 128px;
    height: 12px;
    left: 16px;
    top: 154px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    text-decoration: none;
    white-space: nowrap;
}

.action-list-card {
    position: absolute;
    width: 373px;
    height: 374px;
}

.action-card-title {
    width: 164px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 17px;
}

.quick-action {
    width: 24px;
    height: 24px;
}

.quick-action img {
    position: relative;
    top: -2px;
    /* move slightly upward */
    left: -3px;
    /* move slightly to the left */
}


.action-card-title h2 {
    width: 132px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
}

.users-container {

    position: relative;
    /* left: -13px; */

}


/* .add-users-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    
} */
.add-users-text {
    position: absolute;
    width: 95px;
    height: 12px;
    left: 16px;
    top: 89px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    font-family: "Inter", sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.add-users-content {
    position: absolute;
    width: 276px;
    height: 17px;
    left: 16px;
    top: 105px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #323233;
    margin-top: 3px;
}

.enable-users-text {
    position: absolute;
    width: 117px;
    height: 12px;
    left: 16px;
    top: 154px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.015em;
    color: #216767;
    white-space: nowrap;
    text-decoration: none;
}

.enable-users-content {
    position: absolute;
    width: 187px;
    height: 17px;
    left: 18px;
    top: 174px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #323233;
    margin-top: 3px;
}

.disable-users-text {
    position: absolute;
    width: 120px;
    height: 12px;
    left: 16px;
    top: 227px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #216767;
    white-space: nowrap;
    text-decoration: none;
}

.disable-users-content {
    position: absolute;
    width: 184px;
    height: 17px;
    left: 16px;
    top: 243px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #323233;
    margin-top: 4px;
}

.delete-users-text {
    position: absolute;
    left: 4.29%;
    right: 63.54%;
    top: 78.72%;
    bottom: 18.09%;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.delete-users-content {
    position: absolute;
    width: 167px;
    height: 17px;
    left: 16px;
    top: 312px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #323233;

}

.chart-card-title {
    width: 105px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    position: absolute;
    left: 16px;
    top: 16px;
}

.chart-card-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 292px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* For screens smaller than 980px */
@media screen and (max-width: 980px) {
    .chart-card-icon {
        position: relative;
        /* or keep absolute with adjusted coords */
        top: -4px;
        left: 10px;
        width: 100%;
        /* take full width */
        height: auto;
        justify-content: center;
        /* center the icon and text */
        margin-top: 16px;
        /* add spacing if needed */
    }
}



.chart-card-title h2 {
    width: 81px;
    height: 20px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396a;
}

.chart-total-content {
    position: relative;
    top: 75px;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    /* justify-content: space-between; */
}

.chart-total-text {
    position: relative;
    width: 58px;
    height: 24px;
    left: 16px;
    /* top: 35px; */
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: var(--org-card-total-text-color);
}

.chart-total-value {
    position: absolute;
    width: 43px;
    height: 17px;
    left: 153px;
    /* top: 70px; */
    /* top: 79px;  allignment issue  */
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: var(--org-card-totalvalue-text-color);
}

.used-container {
    position: relative;
    top: 108px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.used-box {
    position: relative;
    width: 20px;
    height: 20px;
    left: 16px;
    /* top: 59px; */
    background: #28396a;
}

.used-text {
    position: relative;
    width: 40px;
    height: 16px;
    /* left: 48px; */
    top: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--org-card-subvalue-text-color);
}

.used-value {
    position: absolute;
    width: 20px;
    height: 16px;
    left: 153px;
    top: 4px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--org-card-subvalue-text-color);
}

.available-container {
    position: relative;
    top: 125px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.available-box {
    position: relative;
    width: 20px;
    height: 20px;
    left: 16px;
    /* top: 160px; */
    background: #216767;
}

.available-text {
    position: relative;
    width: 68px;
    height: 16px;
    /* left: 48px; */
    top: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--org-card-subvalue-text-color);
}

.available-value {
    position: absolute;
    width: 20px;
    height: 16px;
    left: 153px;
    top: 4px;
    font-family: "Mulish", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--org-card-subvalue-text-color);
}

/* Base: default desktop view */
.license-chart {
    position: relative;
    left: 89px;
    width: 270px;
    height: 270px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Move left slightly when screen width is below 1200px */
@media (max-width: 1200px) {
    .license-chart {
        left: 50px;
    }
}

/* Move more left when below 992px */
@media (max-width: 992px) {
    .license-chart {
        left: 20px;
    }
}

/* Center or move even further left for smaller screens (like mobile) */
@media (max-width: 768px) {
    .license-chart {
        left: 0;
        margin-left: -30px;
        /* optional tweak for better centering */
    }
}




.buy-license-container {
    width: 154px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    left: 16px;
    top: 150px;
    bottom: 24px;
    cursor: pointer;
}

.buy-license-outline {
    position: absolute;
    top: 80px;
    width: 154px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    background: var(--org-card-button-bg-color);
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;
}

/* Responsive fix for screens below 980px */
@media (max-width: 980px) {
    .buy-license-outline {
        top: 50px;
        /* move it up slightly */
        left: 50%;
        /* center horizontally */
        transform: translateX(-50%);
        /* perfect centering */
        width: 140px;
        /* slightly smaller width */
        height: 36px;
        /* smaller height */
        font-size: 14px;
        /* smaller text for mobile */
        padding: 12px 20px;
        /* tighter padding */
    }
}

.buy-license-btn,
.buy-license-btn:hover,
.buy-license-btn:active,
.buy-license-btn:focus {
    width: 154px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--org-card-button-text-color) !important;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    position: relative;
    /* right: 13px; */
}

/* DASHBOARD END */

/* SINGLE USER START */


#singleUserOffcanvas.offcanvas {
    width: 424px !important;
    height: 916px !important;
    top: 40px !important;
    background: #FFFFFF;
    box-shadow: 6px 6px 12px 2px rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    display: flex;
    flex-direction: column;

}

.singleuser-title-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px 0px 0px;
    gap: 8px;
    width: 392px;
    height: 54px;
    position: relative;
    right: 10px;
}


.singleuser-title-container h5 {
    width: 107px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;
}

.singleuser-title-container p {
    width: 123px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #28396A;
    /* position: absolute;
  left:24px; */
}

.user-close-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;
    gap: 10px;
    width: 24px;
    height: 24px;
    color: #222222;
    position: relative;
    bottom: 7px;
}

.singleuser-offcanvas-body {
    overflow-y: auto;
    padding: 80px 24px 80px 24px;
    height: calc(100vh - 250px);
    position: absolute;
    top: 80px;
    bottom: 70px;
    left: 0;
    right: 0;
    overflow-x: hidden;
    padding: 0 24px;
}

.firstname-content,
.lastname-content,
.email-content {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    margin-top: 32px;
}

.firstname-content label,
.lastname-content label,
.email-content label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

.firstname-content input,
.lastname-content input,
.email-content input {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}

.firstname-content input:focus,
.lastname-content input:focus,
.email-content input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}

.role-container {
    width: 376px;
    height: 94px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    margin-top: 30px;
}

.role-name {
    width: 143px;
    height: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

.role-content {
    width: 376px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
}

.role-content label {
    width: 36px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323233;
}

.singleuser-content {
    width: 376px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;
}

#singleUserOffcanvas {
    width: 424px;
    background: #FFFFFF;
    box-shadow: 6px 6px 12px 2px rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    display: flex;
    flex-direction: column;

}

.offcanvas-header {
    position: fixed;
    top: 0;
    width: 424px;
    background: #FFFFFF;
    z-index: 10;
    padding: 8px 16px;
}

.offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 80px 24px 80px 24px;
    height: calc(100vh - 128px);
}

.user-status {
    width: 376px;
    height: 123px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    margin-top: 30px;
}

.status-user-text {
    width: 160px;
    height: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
    margin-top: 15px;
}

.status-content {
    width: 294px;
    height: 104px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0px;
    gap: 18px;
}

.send-invite-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 133px;
    margin-top: 70px;
    padding-left: 18px;

}

.send-invite-container label {
    width: 86px;
    height: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
    padding-bottom: 22px;
    position: relative;
    right: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;
    margin-top: 1px;


}

.add-user-footer {
    position: fixed;
    bottom: 0;
    width: 424px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

#addSingleUserBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 400px;
    height: 40px;
    left: calc(50% - 400px/2);
    top: calc(50% - 40px/2);
    background: #216767;
    border-radius: 4px;
}

.add-user-footer span {
    width: 71px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
}

.role-add-user {
    width: 89px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* padding: 0px 4px 0px 0px; */
    gap: 4px;
}

.role-add-user label {
    width: 36px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323233;
    margin-top: 6px;
}

.role-add-admin {
    width: 80px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 4px 0px 0px;
    gap: 4px;
    position: relative;
    left: 24px;
}

.role-add-admin label {
    width: 48px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323233;
    margin-top: 6px;

}

.status-enabled {
    width: 89px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.status-enabled label {
    width: 61px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323233;
    margin-top: 8px;

}

.status-disabled-content {
    width: 294px;
    height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

}

.status-disabled-content label {
    width: 279px;
    height: 34px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #323233;
    margin-top: 25px;
}

.radio-btn-container {
    width: 24px;
    height: 24px;
}

/* Custom radio button styling */
#roleUser,
#roleAdmin,
#statusEnabled,
#statusDisabled,
#monthly,
#annual {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #ccc;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease-in-out;
    vertical-align: middle;
}

/* When checked */
#roleUser:checked,
#roleAdmin:checked,
#statusEnabled:checked,
#statusDisabled:checked,
#monthly:checked,
#annual:checked {
    border-color: #34B1B1;
}

/* Add the filled dot when checked */
#roleUser:checked::after,
#roleAdmin:checked::after,
#statusEnabled:checked::after,
#statusDisabled:checked::after,
#monthly:checked::after,
#annual:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #34B1B1;
    border-radius: 50%;
    position: absolute;
}



#roleUser:focus,
#roleAdmin:focus,
#statusEnabled:focus,
#statusDisabled:focus {
    outline: none;
    box-shadow: none;
}

#roleUser:checked::before,
#roleAdmin:checked::before,
#statusEnabled:checked::before,
#statusDisabled:checked::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #34B1B1;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: translateZ(1);
    backface-visibility: hidden;
}

#firstName-error,
#lastName-error,
#email-error,
#role-error,
#status-error {
    padding-top: 8px;
}

#addUserSpinner,
#updateUserSpinner {
    background-color: #216767;

}

.user-invite-checkbox-input {
    position: relative;
    width: 18px;
    height: 18px;
    right: 30px;
    flex: none;
    order: 0;
    flex-grow: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 50%;
}

.user-invite-checkbox-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34b1b1;
    border-radius: 3px;
    cursor: pointer;
}

.user-invite-checkbox-input:checked::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 1.5px;
    top: 1.5px;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
}

.user-invite-checkbox-input:checked {
    opacity: 100%;
}

.button-text {
    white-space: nowrap;
}

#addUserSpinner,
#updateUserSpinner {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
}

.add-user-header {
    width: 392px;
    height: 54px;
    position: absolute;
    left: 24px;
    top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px 0px 0px;
    background-color: #FFFFFF;
}

.header-content {
    width: 392px;
    height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

.header-title {
    width: 107px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    white-space: nowrap;
}

.header-title-orgs {

    width: 205px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    white-space: nowrap;

}

.header-subtitle {
    width: 123px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #28396A;
    white-space: nowrap;
}


.add-user-close-btn,
.add-user-close-btn:focus,
.add-user-close-btn:hover {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 4px;
    gap: 10px;
    color: #222222;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* SINGLE USER CANVA END */





/* Edit user canva start */

.edituser-title-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px 0px 0px;
    gap: 8px;
    width: 392px;
    height: 54px;
    white-space: nowrap;

}

.edituser-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    /* position: absolute;
  left:24px; */
}

.edituser-title-container h5 {
    width: 107px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;
}

.edituser-title-container p {
    width: 123px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #28396A;
    /* position: absolute;
  left:24px; */
}

.edit-firstname-content,
.edit-lastname-content,
.edit-email-content {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
}

.edit-firstname-content label,
.edit-lastname-content label,
.edit-email-content label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

/* .edit-firstname-content input,
.edit-lastname-content input,
.edit-email-content input {
  width: 376px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 4px 8px;
  gap: 10px;
  isolation: isolate;
  background: #F6FFF8;
  border: 1px solid #D2E0D5;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #323233;
} */
.edit-firstname-content input,
.edit-lastname-content input,
.edit-email-content input {
    width: 376px;
    /* Remove height and use line-height + padding to control height */
    box-sizing: border-box;
    display: block;
    /* Changed from flex to block */
    padding: 11px 8px;
    /* Adjusted padding to achieve 40px total height */
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    /* Adjusted line height */
    color: #323233;
}



#editRoleUser:checked,
#editRoleAdmin:checked,
#editStatusEnabled:checked,
#editStatusDisabled:checked {
    border-color: #34B1B1;
}

#editRoleUser:checked::before,
#editRoleAdmin:checked::before,
#editStatusEnabled:checked::before,
#editStatusDisabled:checked::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 15%;
    top: 10%;
    bottom: 15%;
    width: 12px;
    height: 12px;
    background-color: #34B1B1;
    border-radius: 50%;
}


#editRoleUser,
#editRoleAdmin,
#editStatusEnabled,
#editStatusDisabled {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    /* border: 2px solid #ccc; */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease-in-out;
    vertical-align: middle;
    /* margin-right: 8px; */
}


#updateUserBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 400px;
    height: 40px;
    left: calc(50% - 400px/2);
    top: calc(50% - 40px/2);
    background: #216767;
    border-radius: 4px;
}

/* BROWSER SETTINGS START */

.browser-settings-header {
    width: 392px;
    /* width: 424px; */
    height: 54px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 16px 0px 0px;
    gap: 8px;
    position: absolute;
    left: 24px;
    top: 8px;
    background-color: white;
    z-index: 20;
}

.browser-settings-title h2 {
    width: 288px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;
    padding-bottom: 55px;

}

.browser-settings-title p {
    width: 288px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #28396A;
}

.browser-close-btn {
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    color: #222222;
}

.browser-location-text {
    position: absolute;
    width: 376px;
    height: 24px;
    left: 24px;
    top: 36px;
    white-space: nowrap;
}

.browser-location-text-offcanvas {
    position: absolute;
    width: 296px;
    height: 16px;
    left: 24px;
    top: 98px;
    /* but 98px */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #323233;
    white-space: nowrap;
}

.browser-location-select {
    width: 376px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 24px;
    top: 138px;
}

.browser-select-text {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.browser-select-text label {
    width: 376px;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: #323233;
}

.blacklisted-container {
    width: 376px;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    left: 24px;
    top: 245px;
}

.blacklisted-container>*:not(:last-child) {
    margin-bottom: 36px;
}

.blacklist-title-content {
    width: 335px;
    height: 43px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.blacklisted-title {
    width: 335px;
    height: 22px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #323233;
    margin: 0 !important;
    padding: 0 !important;
}

.blacklisted-subtitle {
    width: 335px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #696969;
}

/* .blacklist-select-container {
    width: 376px !important;
    min-height: 216px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px !important;
    gap: 8px !important;
}

.blacklist-select-content {
    width: 376px;
    min-height: 216px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
} */

.list-select-container {
    width: 376px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.blacklist-insert-box {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 79px;
}

.insert-box {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 79px;
}

.selectAll-content {
    width: 325px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 8px;
    margin: 0 !important;
}

.selectUrls-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.selectUrls-checkbox-input {
    position: relative;
    left: calc(50% - 18px/2);
    top: 12.5%;
    bottom: 12.5%;
    width: 18px;
    height: 18px;
    right: 28px;
    background: #34B1B1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    opacity: 50%;
}

.selectUrls-checkbox-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34B1B1;
    border-radius: 3px;
    cursor: pointer;
    border-radius: 3px;
}

.selectUrls-checkbox-input:checked::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #34b1b1;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.selectUrls-checkbox-input:checked {
    opacity: 100%;
}

.select-all-text {
    width: 71px;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #323233 !important;
    padding-top: 2px;
    padding-left: 10px;
    white-space: nowrap;
}

.deleteSelect-btn {
    position: relative;
    width: 59px;
    height: 12px;
    right: 9px;
    bottom: 5px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    border: none;
    background: none;
    cursor: pointer;
}

.url-container {
    width: 376px;
    height: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    margin-bottom: 8px;
    transition: all 0.3s ease;

}

.url-container.has-error {
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #BE5050;
    box-sizing: border-box;
}

.url-content {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #D2E0D5;
}

.url-checkbox-input {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.url-checkbox {
    position: relative;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
    width: 18px;
    height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7.5px;
    padding: 0px;
    background: #34B1B1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    opacity: 50%;
}

.url-checkbox::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34B1B1;
    border-radius: 3px;
    cursor: pointer;
    border-radius: 3px;
}

.url-checkbox:checked::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #34b1b1;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.url-checkbox:checked {
    opacity: 100%;
}

.list-url-item {
    width: 154px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}

.UrlList-inner-content {
    width: 362px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.listUrl-content {
    width: 202px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin: 0px !important;
    padding: 0px !important;
}

.remove-url-btn {
    width: 24px;
    height: 24px;
    color: #216767;
    margin: 0 !important;
    opacity: 100%;
    border: none;
    background: none;
    position: relative;
    bottom: 5px;

}

.addUrl {
    width: 378px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    position: relative;
    top: 20px;
}

.addurl-container {
    width: 376px;
    /* height: 67px; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    transition: min-height 0.3s ease;
}

.addurl-container.has-error {
    min-height: 67px;
}

.addUrl-content {
    width: 103px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
}

.addUrlLink {
    width: 71px;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #216767;
    white-space: nowrap;
    text-decoration: none;
}

.whitelisted-container {
    width: 376px;
    height: 295px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;
    position: relative;
    top: 550px;

}

.offcanvas-body-scrollable {
    position: absolute;
    top: 0;
    bottom: 100px;
    /* ← FIXED: allows full scroll */
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px;
}


.done-btn,
.done-btn:hover {
    background-color: #216767;
    color: #ffffff;
    width: 400px;
    height: 40px;
    white-space: nowrap;
}

.done-btn-footer {
    position: fixed;
    bottom: 0;
    width: 424px;
    height: 64px;
    /* margin-top: var(--add-user-margin-top); */
    padding: var(--padding-default);
    border-top: 1px solid var(--border-light);
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);
    z-index: 10;
    right: -1px
}

#browserSettingsOffcanvas {
    display: flex;
    flex-direction: column;
    width: 424px;
    /* height: 806px; */
    padding: 0px;
    top: 40px !important;

}

.remove-whitelist-url {

    width: 24px;
    height: 24px;
    padding-bottom: 30px;
    color: #216767;
    margin: 0 !important;
    opacity: 100%;
    border: none;
    background: none;
    padding-right: 40px;

}

.addurl-content {
    position: relative;
    width: 329px;
    height: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.add-url-btn-link {
    width: 24px;
    height: 24px;
    position: relative;
    bottom: 20.83%;
    color: #216767;

}

.url-input {
    border: none;

}

.url-input:focus {
    border: none;
    outline: none;
    box-shadow: none;

}

.user-list-url-input::placeholder {
    color: var(--org-modal-inputfield-text-color);
}

.user-list-url-input,
.user-list-url-input:focus {
    color: var(--org-modal-inputfield-text-color);
}

.url-error-message {
    width: 376px;
    height: 19px;
    display: none;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    white-space: nowrap;

}

.url-error-message i {
    width: 24px;
    height: 17.22px;
    color: #BE5050;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4.41px;
    gap: 4.41px;

}

.url-error-message p {
    width: auto;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #BE5050;
    margin-left: 25px;
    margin-top: -18px;

}

#geolocationSelect {
    padding-left: 8px;
}

/* BROWSER SETTINGS END */
.send-invite-edit {
    margin-left: 25px;
    margin-top: -24px;

}


/* Import User Off Canva Start */
#addUserOffcanvas,
#addUserOffcanvasmsp {
    top: 40px !important;
    width: 424px !important;
    height: calc(100vh - 40px) !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.offcanvas-body {
    /* max-height: calc(100vh - 130px);  */
    overflow-y: auto;
    padding-right: 12px;
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 80px !important;
}

.custom-offcanvas-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 16px 24px !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid #dee2e6 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

#manualAddUserBtn {
    background-color: var(--primary-green) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    width: 400px !important;
    height: 40px !important;
    position: relative;
    right: 10px;
}

#manualAddUserBtn:disabled {
    background-color: var(--primary-green) !important;
    color: white !important;
    opacity: 1 !important;
}

/* .users-inport-section {
    position: relative !important;
    top: 293px !important;
    left: 24px !important;
    width: 376px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11.67px !important;
    opacity: 1 !important;
} */

.custom-offcanvas-header {
    margin-top: 8px !important;
    margin-left: 24px !important;
    width: 392px !important;
    height: 78px !important;
    padding-top: 8px !important;
    padding-right: 16px !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

.header-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 392px !important;
    height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

.title-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.title-text {
    width: 178px !important;
    height: 24px !important;
    opacity: 1 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    font-family: 'Mulish', sans-serif !important;
    line-height: 100% !important;
    color: #28396A !important;
}

.offcanvas-close-btn:hover,
.offcanvas-close-btn:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.description-text {
    width: 325px !important;
    height: 34px !important;
    line-height: 140% !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--org-home-subtitle-text-color) !important;
    font-family: var(--font-family-inter) !important;
}

.columns-section {
    position: absolute !important;
    top: 118px !important;
    left: 24px !important;
    width: 368px !important;
    height: 49px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.columns-title {
    width: 368px !important;
    height: 12px !important;
    font-size: 16px !important;
    line-height: 140% !important;
    font-weight: 400 !important;
    font-family: 'Inter', sans-serif !important;
    color: #323233 !important;
}

.columns-container {
    display: flex !important;
    align-items: center !important;
    width: 368px !important;
    height: 25px !important;
    opacity: 1 !important;
    background-color: #FFFFFF !important;
    border: none !important;
    gap: 0px !important;
}

.columnitem {
    width: 90px !important;
    height: 25px !important;
    border: 1px solid #28396A !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.columnitem p {
    margin: 0 !important;
    width: 72px !important;
    height: 17px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: auto !important;
    font-family: 'Inter', sans-serif !important;
    color: #323233 !important;
}

.template-section {
    position: absolute !important;
    top: 203px !important;
    left: 24px !important;
    width: 312px !important;
    height: 42px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    opacity: 1 !important;
}

.template-text {
    width: 312px !important;
    height: 12px !important;
    opacity: 1 !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 140% !important;
    font-weight: 400 !important;
}

.template-link a {
    color: var(--primary-green) !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 160% !important;
}

.users-inport-section {
    position: absolute !important;
    top: 293px !important;
    left: 24px !important;
    width: 376px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11.67px !important;
    opacity: 1 !important;
}

.drangAndDroptext {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 140% !important;
    color: #323233 !important;
    border-radius: 2px;
}

.select-from-computr__text {
    text-decoration: none !important;
}

.licensesInfo__text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 140% !important;
    color: #323233 !important;
}

.drag-drop-area {
    border: 1.46px dashed #216767;
    background-color: #F6FFF8;
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-top);
    padding-left: var(--padding-small);
    padding-right: var(--padding-small);
    text-align: center;
    border-radius: var(--border-radius);
    min-height: var(--drodrag-area-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: var(--line-height);
}

.drag-drop-area.align-start {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: var(--line-height);
}


/* Billing */

.billing-header-container {
    width: 319px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px !important;
    gap: 8px;

}



.billing-title {
    width: 319px;
    height: 24px;
    opacity: 1;
    padding: 0px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 32px;
    color: var(--primary-blue);
}



.billing-subtitle {
    width: 416px;
    height: 12px;
    opacity: 1;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--primary-blue);
}

.active-subscription-container {
    margin-top: 39px;
    width: 100%;
    /* height: 196px; */
    opacity: 100%;
    padding-top: 12px;
    padding-bottom: 6px;
    /* background-color:red; */


}



.active-subscription-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    width: 100%;
    /* height: 178px; */
    opacity: 100%;
    padding: 0px;
    margin: 0px;
    /* background-color: blue;   */

}

.active-subscription-subcontainer-title {
    width: 100%;
    height: 14px;
    /* background-color: green;   */
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    line-height: 100%;


}

.active-subscription-subcontainer-title p {

    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--primary-blue);
    padding: 0px;
    margin: 0px;
    opacity: 100%;
}

.active-subscription-card {
    display: flex;
    flex-direction: column;
    /* Stack items on mobile */
    gap: 24px;
    padding: 24px;
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
}

.active-subscription-subcard {
    width: 100%;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    opacity: 100%;
    padding: 0px !important;
    margin: 0px !important;

}

@media (min-width:576px) and (max-width:767px) {
    .upgrade-button-subcontainer {
        width: 104px;
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: 0px !important;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        margin-left: 4px;

    }

    .downgrade-button-subcontainer {
        width: 129px;
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: 0px !important;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .cancel-subscription-button-subcontainer {
        width: 198px;
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: 0px !important;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
    }
}


@media (min-width:768px) and (max-width:991px) {
    .download-button-container {
        margin-left: -690px !important;
        /* Pushes it to the right */
        margin-right: 10px;
        /* Optional gap from the right edge */
        width: 151px;
        height: 250px !important;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .active-subscription-button-subcontainer {
        width: 689px !important;
        height: 40px;
        display: flex;
        flex-direction: row;
        gap: 20px !important;
        padding: 0px;
        opacity: 100%;
    }

    .cancel-subscription-button-subcontainer {
        width: 198px;
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: -70px !important;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
    }

}


@media (min-width:992px) and (max-width:1199px) {
    .active-subscription-content {
        width: 992px;
        /* height: 44px; */
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        opacity: 100%;
    }

    .active-subscription-content4 {
        width: 150px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* aligns content to top */
        padding: 12px 16px;
        /* vertical padding 12px, horizontal padding 16px */
        gap: 12px;
        /* vertical gap between flex items */
        opacity: 1;
        /* 100% opacity */
        border: 1px solid #CCE6D2;
        /* stroke with weight 1 */
        border-radius: 4px;
        /* corner radius */
        background-color: #F6FFF8;
        /* fill color */
        box-sizing: border-box;
        /* ensures padding is included in width/height */
    }

    .active-subscription-content3 {
        width: 120px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* aligns content to top */
        padding: 12px 16px;
        /* vertical padding 12px, horizontal padding 16px */
        gap: 12px;
        /* vertical gap between flex items */
        opacity: 1;
        /* 100% opacity */
        border: 1px solid #CCE6D2;
        /* stroke with weight 1 */
        border-radius: 4px;
        /* corner radius */
        background-color: #F6FFF8;
        /* fill color */
        box-sizing: border-box;
        /* ensures padding is included in width/height */
    }

    .active-subscription-content2 {
        width: 120px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* aligns content to top */
        padding: 12px 16px;
        /* vertical padding 12px, horizontal padding 16px */
        gap: 12px;
        /* vertical gap between flex items */
        opacity: 1;
        /* 100% opacity */
        border: 1px solid #CCE6D2;
        /* stroke with weight 1 */
        border-radius: 4px;
        /* corner radius */
        background-color: #F6FFF8;
        /* fill color */
        box-sizing: border-box;
        /* ensures padding is included in width/height */
    }

}

.active-subscription-content {
    /* width: 100%; */
    /* height: 44px; */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    opacity: 100%;
}


.active-subscription-content1 {
    /* width: 295px; */
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* aligns content to top */
    padding: 12px 16px;
    /* vertical padding 12px, horizontal padding 16px */
    gap: 12px;
    /* vertical gap between flex items */
    opacity: 1;
    /* 100% opacity */
    border: 1px solid #CCE6D2;
    /* stroke with weight 1 */
    border-radius: 4px;
    /* corner radius */
    background-color: #F6FFF8;
    /* fill color */
    box-sizing: border-box;
    /* ensures padding is included in width/height */
}

.active-subscription-plan__container {
    height: 16px;
    width: 203px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 0px;

}

.active-subscription-plan__container p {
    height: 20px;
    width: 160px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #696969;

}

.active-subscription-subplan__container {
    width: 100%;
    height: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 100%;
}


.active-subscription-subplan__container p {
    width: 100%;
    height: 16px;
    opacity: 100%;
    font-family: sans-serif var(--mulish-body-18-bold);
    font-weight: 700;
    font-size: 18px;
    /* line-height: 90%; */
    color: #28396A;
}


.active-subscription-content2 {
    /* width: 150px; */
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* aligns content to top */
    padding: 12px 16px;
    /* vertical padding 12px, horizontal padding 16px */
    gap: 12px;
    /* vertical gap between flex items */
    opacity: 1;
    /* 100% opacity */
    border: 1px solid #CCE6D2;
    /* stroke with weight 1 */
    border-radius: 4px;
    /* corner radius */
    background-color: #F6FFF8;
    /* fill color */
    box-sizing: border-box;
    /* ensures padding is included in width/height */
}

.active-subscription-plan__container2 {
    height: 16px;
    width: 91px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 0px;
}

.active-subscription-plan__container2 p {
    height: 21px;
    width: 71px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #696969;
}

.active-subscription-subplan__container2 {
    width: 100%;
    height: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 100%;
}

.active-subscription-subplan__container2 p {
    width: 100%;
    height: 16px;
    opacity: 100%;
    font-family: sans-serif var(--mulish-body-18-bold);
    font-weight: 700;
    font-size: 18px;
    /* line-height: 90%; */
    color: #28396A;
}


.active-subscription-content3 {
    /* width: 150px; */
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* aligns content to top */
    padding: 12px 16px;
    /* vertical padding 12px, horizontal padding 16px */
    gap: 12px;
    /* vertical gap between flex items */
    opacity: 1;
    /* 100% opacity */
    border: 1px solid #CCE6D2;
    /* stroke with weight 1 */
    border-radius: 4px;
    /* corner radius */
    background-color: #F6FFF8;
    /* fill color */
    box-sizing: border-box;
    /* ensures padding is included in width/height */
}

.active-subscription-plan__container3 {
    height: 16px;
    width: 100px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 0px;
}

.active-subscription-plan__container3 p {
    height: 21px;
    width: 79px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #696969;
}

.active-subscription-subplan__container3 {
    width: 100%;
    height: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 100%;
}

.active-subscription-subplan__container3 p {
    width: 100%;
    height: 16px;
    opacity: 100%;
    font-family: sans-serif var(--mulish-body-18-bold);
    font-weight: 700;
    font-size: 18px;
    /* line-height: 90%; */
    color: #28396A;
}


.active-subscription-content4 {
    /* width: 150px; */
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* aligns content to top */
    padding: 12px 16px;
    /* vertical padding 12px, horizontal padding 16px */
    gap: 12px;
    /* vertical gap between flex items */
    opacity: 1;
    /* 100% opacity */
    border: 1px solid #CCE6D2;
    /* stroke with weight 1 */
    border-radius: 4px;
    /* corner radius */
    background-color: #F6FFF8;
    /* fill color */
    box-sizing: border-box;
    /* ensures padding is included in width/height */
}

.active-subscription-plan__container4 {
    height: 16px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 0px;
}

.active-subscription-plan__container4 p {
    height: 21px;
    width: 79px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #696969;
}

.active-subscription-subplan__container4 {
    width: 105%;
    height: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 100%;
}

.active-subscription-subplan__container4 p {
    width: 100%;
    height: 16px;
    opacity: 100%;
    font-family: sans-serif var(--mulish-body-18-bold);
    font-weight: 700;
    font-size: 18px;
    /* line-height: 90%; */
    color: #28396A;
}

@media (min-width:992px) and (max-width:1027px) {
    .active-subscription-content5 {
        width: 160px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* aligns content to top */
        padding: 12px 16px;
        /* vertical padding 12px, horizontal padding 16px */
        gap: 12px;
        /* vertical gap between flex items */
        opacity: 1;
        /* 100% opacity */
        border: 1px solid #CCE6D2;
        /* stroke with weight 1 */
        border-radius: 4px;
        /* corner radius */
        background-color: #F6FFF8;
        /* fill color */
        box-sizing: border-box;
        /* ensures padding is included in width/height */
    }

    .active-subscription-content1 {
        width: 225px;
        height: 68px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        /* aligns content to top */
        padding: 12px 16px;
        /* vertical padding 12px, horizontal padding 16px */
        gap: 12px;
        /* vertical gap between flex items */
        opacity: 1;
        /* 100% opacity */
        border: 1px solid #CCE6D2;
        /* stroke with weight 1 */
        border-radius: 4px;
        /* corner radius */
        background-color: #F6FFF8;
        /* fill color */
        box-sizing: border-box;
        /* ensures padding is included in width/height */
    }


}

.active-subscription-content5 {
    /* width: 295px; */
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* aligns content to top */
    padding: 12px 16px;
    /* vertical padding 12px, horizontal padding 16px */
    gap: 12px;
    /* vertical gap between flex items */
    opacity: 1;
    /* 100% opacity */
    border: 1px solid #CCE6D2;
    /* stroke with weight 1 */
    border-radius: 4px;
    /* corner radius */
    background-color: #F6FFF8;
    /* fill color */
    box-sizing: border-box;
    /* ensures padding is included in width/height */
}

.active-subscription-plan__container5 {
    height: 16px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 0px;
}

.active-subscription-plan__container5 p {
    height: 20px;
    width: 160px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #696969;
}

.active-subscription-subplan__container5 {
    width: 105%;
    height: 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    opacity: 100%;
}

.active-subscription-subplan__container5 p {
    width: 100%;
    height: 12px;
    opacity: 100%;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;
}

.active-subscription-button-container {
    /* width: 100%; */
    /* height: 40px; */
    display: flex;
    align-items: flex-end;
    /* padding: 14px; */
    /* background-color:red; */
}

.active-subscription-button-subcontainer {
    /* width: 589px; */
    height: 40px;
    display: flex;
    flex-direction: row;
    /* gap: 20px; */
    padding: 0px;
    margin-left: 6px;
    opacity: 100%;
    /* background-color:blue; */

}

.renew-button-container {
    width: 88px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    cursor: pointer;

}

.renew-button-subcontainer {
    width: 96px;
    height: 40px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-content: center;
    padding: 16px 24px;
    margin-right: -20px;
    opacity: 100%;
    border-radius: 4px;
    background-color: var(--primary-green);

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.renew-button-subcontainer p {
    width: 56px;
    height: 24px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4%;
    letter-spacing: 5%;
    color: #FFFFFF;
    opacity: 100%;

}

.upgrade-button-container {
    width: 104px;

    height: 40px;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    cursor: pointer;
    margin-left: 20px;

}

.upgrade-button-subcontainer {
    width: 104px;
    height: 40px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-content: center;
    padding: 16px 24px;
    margin-left: -20px !important;
    opacity: 100%;
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #FFFFFF;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}


.upgrade-button-subcontainer p {
    width: 72px;
    height: 24px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4%;
    letter-spacing: 5%;
    color: var(--primary-green);
    opacity: 100%;

}


/* enddd */
.downgrade-button-container {
    width: 129px;

    height: 40px;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    cursor: pointer;

}

.downgrade-button-subcontainer {
    width: 129px;
    height: 40px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-content: center;
    padding: 16px 24px;
    margin-left: -30px;
    opacity: 100%;
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #FFFFFF;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}


.downgrade-button-subcontainer p {
    width: 97px;
    height: 24px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4%;
    letter-spacing: 5%;
    color: var(--primary-green);
    opacity: 100%;

}


.cancel-subscription-button-container {
    width: 196px;

    height: 40px;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    cursor: pointer;
}

@media (min-width: 992px) {
    .cancel-subscription-button-subcontainer {
        width: 198px;
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: -20px;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        white-space: nowrap;

    }
}

.cancel-subscription-button-subcontainer {
    width: 198px;
    height: 40px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-content: center;
    padding: 16px 24px;
    margin-left: -15px;
    opacity: 100%;
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #FFFFFF;

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}


.cancel-subscription-button-subcontainer p {
    width: 166px;
    height: 24px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4%;
    letter-spacing: 5%;
    color: var(--primary-green);
    opacity: 100%;

}

.download-button-container {
    margin-left: auto;
    /* Pushes it to the right */
    margin-right: 10px;
    /* Optional gap from the right edge */
    width: 151px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.msp-billingpage-table {
    margin-left: -20px;
    background-color: #FFFFFF;
    margin-top: 10px;


}

.downloadtext {
    width: 128px;
    height: 22px;
    font-family: var(--font-family-inter);
    font-weight: 700;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 2%;
    color: var(--primary-green);
    opacity: 100%;
    text-decoration: none;
    cursor: pointer;
}



.past-subscription-container {
    margin-top: 30px;
    width: 93%;
    height: 576px;
    opacity: 100%;
    margin-left: 20px;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    align-items: flex-start;

}

.past-subscription-container__heading {
    width: 178px;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    margin-top: 20px;
    opacity: 100%;

}

.past-subscription-container__heading p {
    width: 178px;
    height: 20px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--primary-blue);
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.past-subscription-cardcontainer {
    width: 100%;
    height: 544px;
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin-top: 20px;
    opacity: 100%;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.past-subscription-tablecontainer {
    width: 100%;
    /* Full width on all screens */
    height: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding: 0;
    margin: 0;
    background-color: #FFFFFF;
    flex: 1;
}


.table-col1 {
    /* width: 199px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;

}

.header-cell1 {
    /* width: 199px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin: 0px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell1 p {
    width: 132px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.fillter-list {
    position: relative;
    /* makes dropdown align below this icon if needed */
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
}

#activeSortDropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--sort-filter-dropdown-bg-color);
    box-shadow: var(--sort-filter-drop-box-shadow);
    min-width: 253px;
    /* or 240px for filters */
    right: 0;
    /* aligns left edge with trigger */
    top: 100%;
    /* places dropdown directly below trigger */
    margin-top: 4px;
    /* small gap below trigger, optional */
}

#activeUsageSortDropdown {
    position: absolute;
    z-index: 9999;
    background: #B8E4E4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 253px;
    /* or 240px for filters */
    right: 0;
    /* aligns left edge with trigger */
    top: 100%;
    /* places dropdown directly below trigger */
    margin-top: 4px;
    /* small gap below trigger, optional */
}

#activeFiltersDropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--sort-filter-dropdown-bg-color) !important;
    box-shadow: var(--sort-filter-drop-box-shadow) !important;
    min-width: 253px;
    /* or 240px for filters */
    right: 0;
    /* aligns left edge with trigger */
    top: 100%;
    /* places dropdown directly below trigger */
    margin-top: 4px;
    /* small gap below trigger, optional */
}

#activeUsageFiltersDropdown {
    position: absolute;
    z-index: 9999;
    background: #B8E4E4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 253px;
    /* or 240px for filters */
    right: 0;
    /* aligns left edge with trigger */
    top: 100%;
    /* places dropdown directly below trigger */
    margin-top: 4px;
    /* small gap below trigger, optional */
}


.cell-item-container {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container p {
    width: 151px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}



.cell-item-container11 {
    width: 199px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container11 p {
    width: 151px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container111 {
    width: 199px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container111 p {
    width: 151px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.table-col2 {
    /* width: 140px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.header-cell2 {
    /* width: 201px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin: 0px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell2 p {
    width: 116px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.cell-item-container2 {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container2 p {
    width: 92px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container22 {
    width: 140px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container22 p {
    width: 92px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container222 {
    width: 140px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container222 p {
    width: 92px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

/* end */

.table-col3 {
    /* width: 234px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.header-cell3 {
    /* width: 234px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin: 0px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell3 p {
    width: 147px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.cell-item-container3 {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container3 p {
    width: 87px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container33 {
    width: 234px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container33 p {
    width: 87px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container333 {
    width: 234px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container333 p {
    width: 87px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

/* end */


.table-col4 {
    /* width: 255px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.header-cell4 {
    /* width: 255px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin: 0px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell4 p {
    width: 154px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.cell-item-container4 {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container4 p {
    width: 62px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container44 {
    width: 255px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container44 p {
    width: 62px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

.cell-item-container444 {
    width: 255px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container444 p {
    width: 62px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}

/* end */



.table-col5 {
    /* width: 141px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.header-cell5 {
    /* width: 141px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin-left: 5px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell5 p {
    width: 69px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.cell-item-container5 {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 12px 48px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}




.cell-item-container55 {
    width: 141px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 12px 48px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}



.cell-item-container555 {
    width: 141px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 12px 48px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    opacity: 100%;
}




/*  */


.table-col6 {
    /* width: 208px; */
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.header-cell6 {
    /* width: 208px; */
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    padding: 12px 24px !important;
    margin: 0px;
    opacity: 100%;
    flex-direction: row;
    gap: 8px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.header-cell6 p {
    width: 121px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}


.cell-item-container6 {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    white-space: no-wrap;
}

.cell-item-container6 p {
    width: 107px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
    white-space: nowrap;

}


.cell-item-container66 {
    width: 208px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #EFF0F1;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container66 p {
    width: 107px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}


.cell-item-container666 {
    width: 208px;
    height: 64px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 24px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.cell-item-container666 p {
    width: 107px;
    height: 16px;
    opacity: 100%;
    font-size: 16px;
    font-family: var(--font-family-inter);
    font-weight: 1400;
    line-height: 100%;
    color: #28396A;
}


.nav-bar-container {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: #FFFFFF;
    padding-left: 8px;
    padding-right: 8px;
    opacity: 100%;

}

.nav-bar-subcontainer {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    gap: 722px;
    align-items: center;
    padding: 0px;
    opacity: 100%;
    /* background-color: yellow; */
}

.table-row-container {
    width: 120px;
    height: 36px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    padding: 0px;
    white-space: nowrap;

}

.table-row-container label {
    width: 92px;
    height: 17px;
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    color: #28396A;
    white-space: nowrap;



}


.custom-modal-dialog {
    max-width: 456px;
    margin: auto;
}

.custom-modal-content {
    width: 456px;
    height: 236px;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 4px;
    /* border-radius: 0.5rem; */
    background: var(--modal-background-color);
    display: flex;
    flex-direction: column;
    gap: 64px;
    justify-content: space-between;
    backdrop-filter: blur(16px);
}

.custom-modal-body {
    padding: 0;
    width: 408px;
    height: 84px;
    display: flex;
    flex-direction: column;
    /* gap:24px; */
    opacity: 100%;
    border-radius: 0;

    /* font-size: 13px; */
    /* line-height: 1.4; */
}

.custom-modal-footer {
    width: 408px;
    height: 40px;
    text-align: left;
    vertical-align: top;
    padding: 0;
    gap: 24px;

}

.renew-title {
    width: 275px;
    height: 24px;
    color: var(--org-home-title-text-color);
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 20px;
}

.renew-title-plan {
    width: 275px;
    height: 20px;
    opacity: 100%;
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
}

.Renew-body {
    margin-top: 4px;
    width: 377px;
    height: 56px;
    color: #323233;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.cancel-body {
    margin-top: 4px;
    width: 390px;
    height: 56px;
    color: var(--org-card-subvalue-text-color);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;

}

.Continue-ct {
    width: 117px;
    height: 40px;
    color: var(--adduser-button-text-color);
    background: var(--adduser-button-bg-color) !important;
    /* border: 2px solid #216767; */
    /* border: solid #216767;
    stroke: #216767; */
    /* Define the stroke color */
    /* stroke-width: 1.67; */
    margin-right: 24px;
    border-radius: 3px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border:none;

}

.Cancel-ct {
    width: 117px;
    height: 40px;
    background: var(--action-button-bg-color) !important;
    border: var(--action-button-border) !important;
    /* stroke: #216767; */
    /* Define the stroke color */
    /* stroke-width: 1.67; */
    color: var(--action-button-text-color) !important;
    border-radius: 3px;
    /* Adjust this value to match the image more closely */
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 16px;
}


.small-close {
    transform: scale(0.75);
    /* Adjust this value as needed */
}

.renew-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pushes the button to the far right */
    width: 100%;
    /* Ensures the div takes full width */
}

.btn-close.smaller {
    color: var(--org-home-title-text-color) !important;
    font-size: 0.7em;
    /* Makes the button smaller */
    padding: 3px;
    /* Reduces padding for a compact look */
    margin-left: auto;
    /* Ensures the button is pushed to the right */
}

.table-pagination-button-container {
    position: absolute;
    right: 20px;
    top: 1;
    /* adjust if needed */
}


.pagination-text {
    width: 256.2px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    opacity: 100%;
    color: #28396A;
}

.pagination-text .msp-pagination-text {
    width: 114.2px;
    height: 17px;
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    /* line-height: 100%; */
    color: #28396A;
    white-space: nowrap;
    text-decoration: none;
}

.paginationdropdown {
    cursor: pointer;
    text-decoration: none;
    color: #28396A;
}

.upgrade-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}


.billing-modal-container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 24px;
    position: absolute;
    width: 456px;
    height: 691px;
    left: calc(50% - 456px/2);
    top: calc(50% - 691px/2 + 20px);
    background: #FFFFFF;
    border-radius: 4px;

}

.billing-modal-content {
    width: 408px;
    height: 579px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;
}

.subscription-content {
    width: 408px;
    height: 443px;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;


}

.billing-modal-buttons {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.billing-modal-header {
    width: 408px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

.billing-title-content {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;
}

.billing-title-content h4 {
    width: 240px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
}

.close-modal {
    width: 168px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    gap: 10px;
}

/* .close {
    float: right;
    font-size: 24px;
    cursor: pointer;
    padding-bottom: 15px;
    color: #28396A;
} */

.billing-modal-header p {
    width: 408px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #323233;
}

.billing-select {
    width: 408px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
}

.select-tier {
    width: 136px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

.step-indicator {
    width: 136px;
    height: 4px;
    background: #D2E0D5;
}

.step-number {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 10px;
    background: #D2E0D5;
    border-radius: 100px;
}

.step-number span {
    width: 16px;
    height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #323233;
    padding-left: 3px;
}

.step-title {
    width: 96px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #1C1C1F;

}

.summary-indicator {
    width: 136px;
    height: 4px;
    background: #D2E0D5;
}

.step-summary {
    width: 136px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    padding-top: 10px;
}

.step-two {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 10px;
    background: #D2E0D5;
    border-radius: 100px;
}

.step-two span {
    width: 16px;
    height: 16px;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #1C1C1F;
    padding-left: 3px;
}

.subscription-type-container {
    width: 408px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    margin-top: 30px;
}

.subscription-title {
    width: 408px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.subscription-type {
    width: 408px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 36px;

}

.subscription-title p {
    width: 160px;
    height: 23px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    color: #28396A;
    white-space: nowrap;

}

.monthly-radio {
    width: 89px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 4px 0px 0px;
    gap: 4px;
}

.annually-radio {
    width: 97px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 4px 0px 0px;
    gap: 4px;
}

.monthly-radio label {
    width: 62px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #323233;
    white-space: nowrap;
}

.annually-radio label {
    width: 65px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #2F3033;
    white-space: nowrap;

}


#monthlyPlan,
#annualPlan {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    position: relative;
    cursor: pointer;
}


#monthlyPlan::before,
#annualPlan::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border: 1px solid #34B1B1;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}


#monthlyPlan:checked::after,
#annualPlan:checked::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #34B1B1;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
}

/* Labels styling
label[for="monthlyPlan"], label[for="annualPlan"] {
  margin-left: 8px;
  cursor: pointer;
} */


#monthlyPlan:focus-visible,
#annualPlan:focus-visible {
    outline: 2px solid #34B1B1;
    outline-offset: 2px;
}

.tier-selection {
    width: 408px;
    height: 267px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    margin-top: 36px;
}

.tier-selection-title {
    width: 408px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.tier-selection-title h3 {
    width: 160px;
    height: 23px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 23px;
    color: #28396A;
    white-space: nowrap;
}

.tier-table {


    width: 408px;
    height: 240px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    overflow: hidden;
}

.tier-list {
    width: 111px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.tier-item {
    width: 111px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
}

.tier-item-alt {
    width: 111px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: #F4F4F4;
    border-bottom: 1px solid #EFF0F1;

}

.tier-item-active {
    border-left: 1px solid #216767;
    border-top: 1px solid #216767;
    border-bottom: 1px solid #216767;
}

.tier-text {
    width: 87px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
}

.tier-text-inactive {
    color: #B9C6E9;
}

.tier-text-active {
    color: #28396A;
}

.license-column {
    width: 153px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.license-item {
    width: 153px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.license-item-alt {
    background: #F4F4F4;
}

.license-item-active {
    border-top: 1px solid #216767;
    border-bottom: 1px solid #216767;
}

.license-text {
    width: 129px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #B9C6E9;
}

.license-text-inactive {
    color: #B9C6E9;
}

.license-text-active {
    color: #28396A;
}

.amount-column {
    width: 144px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.amount-item {
    width: 145px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
}

.amount-item-alt {
    background: #F4F4F4;
}

.amount-item-active {
    border-top: 1px solid #216767;
    border-right: 1px solid #216767;
    border-bottom: 1px solid #216767;
}

.amount-text {
    width: 132px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
}

.amount-text-inactive {
    color: #B9C6E9;
}

.amount-text-active {
    color: #28396A;
}

.auto-renew-toggle {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    padding-bottom: 20px;
}

.auto-renew-toggle label {
    width: 154px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;
    padding-bottom: 20px;

}

.auto-renew-container {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#autoRenew {
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    cursor: pointer;
    margin: 0;
}

#autoRenew::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    top: 0;
    background: #34b1b1;
    border-radius: 3px;
    cursor: pointer;
}

#autoRenew:checked::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 1.5px;
    top: 1.5px;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
}

.billing-modal-buttons {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
    opacity: 100%;
}

.next-btn-container {
    width: 116px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    opacity: 100%;
    cursor: pointer;
}

.next-outline-btn {
    width: 117px;
    height: 40px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    background: #216767;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    box-shadow: 0px 0.84px 4.18px 0px #0000004d;
}

.next-btn,
.next-btn:hover,
.next-btn:focus,
.next-btn:active {
    width: 63px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    opacity: 100%;
}

.next-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #216767;
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.cancel-upgrade-container {
    width: 117px;
    height: 40px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    border-width: 1px;
    background: #ffffff;
    border: 1px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    cursor: pointer;
}

.cancel-upgrade-btn,
.cancel-upgrade-btn:hover,
.cancel-upgrade-btn:focus,
.cancel-upgrade-btn:active {
    width: 56px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #216767 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: none;
}

.cancel-upgrade-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #ffffff;
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.back-btn,
.back-btn:hover,
.back-btn:focus,
.back-btn:active {
    width: 56px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #216767 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
}

.back-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #ffffff;
    background-color: var(--request-btn-active-bg, #cfcfcf);
}

.summary-modal-content {
    width: 408px;
    height: 643px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 291px;
}

.summary-container {
    width: 408px;
    height: 312px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;

}

.payment-container {
    width: 408px;
    height: 442px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.payment-content-modal {
    width: 408px;
    height: 442px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;
}

.payment-details-modal {
    width: 408px;
    height: 366px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 36px;
}

.summary-details {
    width: 408px;
    height: 236px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 48px;
}

.tier-three-body {
    width: 408px;
    height: 148px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 36px;
    background: #F4F4F4;
    border-radius: 4px;

}

.total-content {
    width: 380px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
}

.total-title {
    width: 186px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    gap: 10px;
    position: absolute;
    right: 230px;
}

.total-title p {
    width: 166px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #323233;
}

.total-amount {
    width: 65px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    gap: 10px;

}

.total-amount p {
    width: 63px;
    height: 20px;
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #216767;
    position: absolute;
    bottom: 280px;
    left: 357px;
}

.tier-three-license {
    width: 376px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;


}

.tier-subscription {
    width: 376px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
}

.tier-subscription-content {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 134px;
}

.tier3-license-content {

    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 134px;
}

.tier-subscription-text {
    width: 189px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    gap: 10px;
    margin: 0 auto;
}

.tier-subscription-text p {
    width: 169px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #323233;
}

.tier-subscription-type {
    width: 73px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    margin: 0 auto;
}

.tier-subscription-type p {
    width: 77px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    position: absolute;
    right: 20px;
}

.tier3-license-text {
    width: 189px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    gap: 10px;
    margin: 0 auto;
}

.tier3-license-text p {
    width: 169px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #323233;

}

.tier3-amount {
    width: 66px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    gap: 10px;
    margin: 0 auto;
}

.tier3-amount p {
    width: 56px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
}

.valid-date {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 134px;
}

.valid-date p {
    width: 149px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #696969;
    padding-left: 11px;
}

.payment-content {
    width: 408px;
    height: 290px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 36px;
    background: #F4F4F4;
    border-radius: 4px;
}

.payment-details {
    width: 104px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 130px;
}

.payment-text {
    width: 186px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    gap: 10px;
}

.payment-text p {
    width: 166px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #323233;

}

.payment-modal-buttons {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    margin-top: 130px;
}

.summary-modal-buttons {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    margin-bottom: 10px;
}

#select-tier-modal .select-tier.active-step .step-indicator,
#select-tier-modal .select-tier.active-step .summary-indicator,
#summary-modal .select-tier.active-step .step-indicator,
#summary-modal .select-tier.active-step .summary-indicator,
#payment-modal .select-tier.active-step .step-indicator,
#payment-modal .select-tier.active-step .summary-indicator {
    background: #216767;
}

#select-tier-modal .select-tier.active-step .step-number,
#select-tier-modal .select-tier.active-step .step-two,
#summary-modal .select-tier.active-step .step-number,
#summary-modal .select-tier.active-step .step-two,
#payment-modal .select-tier.active-step .step-number,
#payment-modal .select-tier.active-step .step-two {
    background: #216767;
}

#select-tier-modal .select-tier.active-step .step-number span,
#select-tier-modal .select-tier.active-step .step-two span,
#summary-modal .select-tier.active-step .step-number span,
#summary-modal .select-tier.active-step .step-two span,
#payment-modal .select-tier.active-step .step-number span,
#payment-modal .select-tier.active-step .step-two span {
    color: #FFFFFF;
}

#select-tier-modal .select-tier.active-step .step-title,
#summary-modal .select-tier.active-step .step-title,
#payment-modal .select-tier.active-step .step-title {
    color: #28396A;
}

.cell-item-container:nth-child(even),
.cell-item-container2:nth-child(even),
.cell-item-container3:nth-child(even),
.cell-item-container4:nth-child(even),
.cell-item-container5:nth-child(even),
.cell-item-container6:nth-child(even) {
    background-color: #FFFFFF;
}

.cell-item-container:nth-child(odd),
.cell-item-container2:nth-child(odd),
.cell-item-container3:nth-child(odd),
.cell-item-container4:nth-child(odd),
.cell-item-container5:nth-child(odd),
.cell-item-container6:nth-child(odd) {
    background-color: #EFF0F1;
}

.single-user-text,
.import-csv-text {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px !important;
    line-height: 100%;
    color: #28396A !important;
}

.add-manual-text,
.add-multiple-text,
.integrate-hr-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #696969 !important;
    padding-top: 4px;
}

.dropdown-menu[aria-labelledby="actionsDropdown"]:not(#planDropdownMenu) {
    padding: 8px 0;
}

.dropdown-menu[aria-labelledby="actionsDropdown"]:not(#planDropdownMenu) .dropdown-item {
    padding: 8px 10px;
    border-bottom: var(--action-dropdown-items-bottom-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dropdown-menu[aria-labelledby="actionsDropdown"]:not(#planDropdownMenu) li:last-child .dropdown-item {
    border-bottom: none;
}

.bulkaction-dropdown-text {
    font-family: 'Mulish', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    color: var(--org-card-title-color) !important;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.bulkaction-subtext {
    width: 296px !important;
    height: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: var(--dropdown-card-subtext-color) !important;
    padding-top: 4px;

}

.bulkaction-subtext-font {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: var(--dropdown-card-subtext-color) !important;
    padding-top: 4px;

}

/* DELETE USER MODAL START */

#deleteUserMessage {
    width: 376px;
    height: 56px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140% !important;
    color: #323233;
}

.btn-close.delete-close-btn {
    color: var(--org-modal-close-btn-color) !important;
    --bs-btn-close-color: var(--org-modal-close-btn-color);
    --bs-btn-close-bg: none;
    background-image: none !important;
    opacity: 1 !important;
    position: relative;
}

.btn-close.delete-close-btn::before {
    content: '×';
    color: currentColor;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
}

#deleteUserModal .modal-footer {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.type-delete-text {
    width: 273px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;

}

/* DELETE USER MODAL END */

/* CHANGE BROWSER GEOLOCATION START */

.change-geo-modal-title {
    width: 282px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
}

.btn-close.geo-close-btn {
    color: #28396A !important;
    position: relative;
    bottom: 5px;
}

/* .selected-users {
font-family: 'Inter',sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 140% !important;
display: flex ;
align-items: center;
color: #414141;
position:relative;
bottom:20px;
}
#selectedUsersCount{
font-family: 'Inter',sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 140% !important;
display: flex ;
align-items: center;
color: #414141;
position: relative;
bottom: 10px;
right:15px;
}
#currentGeolocations {   
font-family: 'Inter',sans-serif !important;
font-style: normal !important;
font-weight: 600 !important;
font-size: 16px !important;
line-height: 140% !important;
display: flex ;
align-items: center;
color: #414141;
} */

.country-select-content {
    width: 408px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.country-select-content label {
    width: 408px !important;
    height: 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 120% !important;
    color: #000000 !important;
}

#countrySelect.form-select.browser-ui-select,
#countrySelect.form-select.browser-ui-select:focus {
    width: 408px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 13px;
    background-color: var(--org-modal-inputfield-bg-color) !important;
    border: 1px solid rgba(33, 103, 103, 0.2) !important;
    border-radius: 4px !important;
    position: relative;
    bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--action-button-text-color) !important;
    box-shadow: none;
}

#geolocationModal .modal-content,
#orgGeolocationModal .modal-content {
    width: 456px;
    height: 330px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 64px;
    position: absolute;
    background: #FFFFFF;
    border-radius: 4px;

}

.geo-modal-container {
    width: 408px;
    height: 178px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
}

.geo-header-content {
    width: 408px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

#geolocationModal .modal-header,
#orgGeolocationModal .modal-header {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;
}

#geolocationModal .modal-body,
#orgGeolocationModal .modal-body {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 140% !important;
    display: flex;
    align-items: center;
    color: #414141;
    position: relative;
    bottom: 20px;
    right: 15px;
}

#currentGeolocations,
#currentOrgGeolocations {
    font-weight: 600 !important;
}

#countrySelect option {
    position: relative;
    top: 8px;
    left: 11.5px;
    width: 174px;
    height: 17px;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    letter-spacing: 0%;
    color: #216767 !important;
    margin: 0 auto;
}

/* #countrySelect:focus {
    box-shadow: none;
    border: 1px solid rgba(33, 103, 103, 0.2);
    border-radius: 4px;
}  */

.dropdown-geo-icon {

    width: 24px;
    height: 24px;
    position: relative;
    left: 380px;
    bottom: 48px;

}

#geolocationModal .modal-footer,
#orgGeolocationModal .modal-footer {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    border: none;
}

#geolocationModal .left-align-footer,
#orgGeolocationModal .left-align-footer {

    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

}


.Purchase-button-container {
    width: 96px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    cursor: pointer;

}

.Purchase-button-subcontainer {
    width: 96px;
    height: 40px;
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-content: center;
    padding: 16px 24px;
    /* margin-right: -20px; */
    opacity: 100%;
    border-radius: 4px;
    background-color: var(--primary-green);

    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.Purchase-button-subcontainer p {
    width: 77px;
    height: 24px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4%;
    letter-spacing: 5%;
    color: #FFFFFF;
    opacity: 100%;

}

/* upgrade styles start */

.confirmation-container {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.toggle-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 121px;
    height: 32px;
    border-radius: 2px;
    /* border: 1px solid #216767; */
    opacity: 100%;
    background-color: #FFFFFF;
    padding: 4px;
}

.toggle-button {
    width: 41px;
    height: 7px;
    line-height: 140%;
    color: #216767;
    /* padding: 8px 7px; */
    cursor: pointer;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
}

.toggle-button.active {
    width: 60px;
    height: 24px;
    border-radius: 2px;
    background-color: #216767;
    color: white;
    border-color: #216767;
    padding: 7px 7px;
    line-height: 140%;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;


}



.cost-display {
    display: none;
}

.cost-display.active {
    display: block;
}

.stripe-card {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #fff;
}

#card-errors {
    min-height: 20px;
}


#licenseModal.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 456px !important;
    height: 744px !important;
    /* fixed height */
    max-height: 90vh;
    /* never exceed screen height */
    background-color: #FFFFFF;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* scroll vertically */
    overflow-x: hidden;
    z-index: 1050;
}

/* Thin green scrollbar (Chrome, Edge, Safari) */
#licenseModal.modal::-webkit-scrollbar {
    width: 6px;
    /* thin */
}

#licenseModal.modal::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* light track */
    border-radius: 10px;
}

#licenseModal.modal::-webkit-scrollbar-thumb {
    background-color: #216767;
    /* green */
    border-radius: 10px;
}

/* Thin green scrollbar (Firefox) */
#licenseModal.modal {
    scrollbar-width: thin;
    scrollbar-color: #216767 #f1f1f1;
}


#licenseModal .modal-content {
    width: 408px;
    height: 647px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    /* background-color: red !important; */
    border: none !important;
    border-radius: 0 !important;
}

.model-header-container {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.model-header-subcontainer {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px !important;
    margin: 0px !important;
}

.model-header-subcontainer p {
    width: 240px;
    height: 20px;
    display: flex;
    /* line-height: 100%; */
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-family-mulish);
    color: var(--primary-blue);
}

.select-plan-container {
    width: 408px;
    height: 463px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 0px;
    margin: 0px;
    /* background-color: red; */
}

.select-plan-subcontainer {
    width: 408px;
    height: 416px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.select-plan-header-container {
    height: 40px;
    width: 408px;
    align-content: center;
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
}

.plan-container-step1 {
    width: 136px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    opacity: 100%;
}

.step-indicator {
    width: 136px;
    height: 4px;
    background-color: #D2E0D5;
    transition: background-color 0.3s ease;
}

.plan-container-step1.active .step-indicator {
    background-color: #216767;
}

.select-plan-details {
    width: 136px;
    height: 32px;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    opacity: 100%;
}

.select-plan-details-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 100%;
    padding: 8px;
    opacity: 100%;
    border-radius: 100%;
    background-color: #D2E0D5;
    transition: background-color 0.3s ease;
}

.plan-container-step1.active .select-plan-details-number {
    background-color: #216767;
}

.select-plan-details-number p {
    width: 16px;
    height: 16px;
    opacity: 100%;
    font-family: var(--font-family-mulish);
    font-size: 14px;
    font-weight: 700;
    color: #323233;
    letter-spacing: 5%;
    margin: 0 !important;
    text-align: center;
}

.plan-container-step1.active .select-plan-details-number p {
    color: #FFFFFF;

}

.select-plan-details-text p {
    width: 96px;
    height: 17px;
    opacity: 100%;
    font-family: var(--font-family-Inter);
    color: #1C1C1F;
    font-weight: 400;
    font-size: 14px;
    margin: 0 !important;
}

.select-plan-body-container {
    width: 408px;
    height: 340px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0px !important;
    margin-top: -20px !important;
    /* background-color: yellowgreen; */
}

.select-plan-body-header-container {
    width: 408px;
    height: 32px;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 100%;
    /* background-color: red; */

}

.select-plan-text-container {
    width: 143px;
    height: 23px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.select-plan-text-container p {
    width: 160px;
    height: 23px;
    font-family: var(--font-family-mulish);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0px !important;
    padding: 0px !important;
}


.remaninig-license-container {
    width: 408px;
    height: 284px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;

}

.remaninig-license-container-text p {
    width: 408px;
    /* height: 12px; */
    font-family: var(--inter-body-14-regular);
    font-size: 14px;
    font-weight: 400;
    color: #323233;
    opacity: 100%;
    margin-top: -20px !important;
}

.remaninig-license-table-container {
    width: 408px;
    height: 264px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;

}

.remaninig-license-table-subcontainer {
    width: 408px;
    height: 264px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
    border: 1px solid #EFF0F1;

}

.remaninig-license-table-col1-container {
    width: 111px;
    height: 264px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-col1-item-cell {
    width: 111px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    background-color: #FFFFFF;
}

.remaninig-license-col1-item-cell-text {
    width: 87px;
    height: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-col1-item-cell-text p {
    width: 87px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
}

.remaninig-license-table-col2-container {
    width: 153px;
    height: 264px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-col2-item-cell {
    width: 153px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    background-color: #FFFFFF;
    white-space: nowrap;
}

.remaninig-license-col2-item-cell-text p {
    width: 129px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
}

.remaninig-license-table-col3-container {
    width: 144px;
    height: 264px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-col3-item-cell {
    width: 144px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    background-color: #FFFFFF;
    white-space: nowrap;
}

.remaninig-license-col3-item-cell-text p {
    width: 108px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
}

.remaninig-license-col1-item-cell2 {
    width: 111px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    cursor: pointer;
    background-color: #FFFFFF;
}

.remaninig-license-col1-item-cell2-text {
    width: 87px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-title {
    width: 87px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
    text-align: start;
}

.remaninig-license-subtitle {
    width: 87px;
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 10px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 130%;
    margin: 0 !important;
    text-align: start;
}

.remaninig-license-col2-item-cell2 {
    width: 153px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    cursor: pointer;
    background-color: #FFFFFF;
}

.remaninig-license-col2-item-cell2-text {
    width: 129px;
    min-height: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}



.remaninig-license-title2 {
    width: 129px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
    text-align: start;
}

.remaninig-license-subtitle2 {
    width: 129px;
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 10px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 130%;
    margin: 0 !important;
    text-align: start;
}

.cost-display:not(.active) {
    display: none;
}

.remaninig-license-col1-item-cell3 {
    width: 144px;
    height: 72px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px !important;
    margin: 0 !important;
    opacity: 100%;
    cursor: pointer;
    background-color: #FFFFFF;
}

.remaninig-license-col1-item-cell3-text {
    width: 108px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
}

.remaninig-license-title3 {
    width: 108px;
    height: 16px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
    opacity: 100%;
    line-height: 100%;
    margin: 0 !important;
    text-align: start;
}

.remaninig-license-subtitle3 {
    width: 108px;
    height: 26px;
    font-family: var(--font-family-Inter);
    font-size: 10px;
    font-weight: 400;
    color: #28396A;
    opacity: 100%;
    line-height: 130%;
    margin: 0 !important;
    text-align: start;
}

.slect-plan-toast-container {
    width: 408px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #B8E4E4;

    border-radius: 2px;
    margin-top: 10px !important;
    padding: 10px 0;
    /* Top and bottom: 10px; Left and right: 0px */
}


.slect-plan-toast-container p {
    width: 280px;
    /* height: 15px; */
    font-family: var(--font-family-Inter);
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    color: var(--primary-blue);
    margin: 0px !important;
    padding: 10px 0 !important;
    /* Top & Bottom: 10px; Left & Right: 0 */
}


.automatically-renew-container {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0px !important;
    margin-top: 40px;
}

.checkbox-container {
    width: 24px;
    height: 24px;
    opacity: 100%;
    padding: 0px !important;
    display: flex;
    align-items: flex-end;
}

.checkbox-subcontainer {
    width: 18px;
    height: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    opacity: 100%;
}

.checkbox-subcontainer1 {
    width: 18px;
    height: 18px;
    opacity: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-subcontainer2 {
    width: 18px;
    height: 18px;
    opacity: 100%;
    display: flex;
}

.checkbox-subcontainer3 {
    width: 18px;
    height: 18px;
    background-color: #34B1B1;
    border-radius: 3px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox-subcontainer3 img {
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
}

.checkbox-text-container {
    width: 86px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0px !important;
}

.checkbox-text-container p {
    width: 154px;
    height: 12px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-blue);
    opacity: 100%;
    line-height: 100%;
    margin: 0px !important;
    padding: 0px !important;
}

.modal-footer.button-container-billing {
    border-top: none !important;
}


.button-container-billing {
    position: absolute;
    top: 651px;
    left: 24px;
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 130px;
    opacity: 100%;
    margin-top: 40px;
}

.nextbutton-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    opacity: 100%;
    gap: 13.37px;
    padding: 0px !important;
    cursor: pointer;

}

.nextbutton-subcontainer {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    gap: 6.69px;
    padding: 13.37px 26.74px !important;
    border-radius: 3.34px;
    background-color: #216767;

}

.nextbutton-subcontainer p {
    line-height: 23.4px;
    letter-spacing: 5%;
    color: #FFFFFF;
    font-family: var(--font-family-mulish);
    font-size: 16px;
    font-weight: 700;
    margin: 0px !important;
    text-align: center;


}

.cancelbutton-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    opacity: 100%;
    gap: 13.37px;
    padding: 0px !important;
    cursor: pointer;
}

.cancelbutton-subcontainer {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    gap: 6.69px;
    padding: 13.37px 26.74px !important;
    border-radius: 3.34px;
    background-color: #FFFFFF;
    border: 1.67px solid var(--primary-green);

}

.cancelbutton-subcontainer p {
    line-height: 23.4px;
    letter-spacing: 5%;
    color: var(--primary-green);
    font-family: var(--font-family-mulish);
    font-size: 16px;
    font-weight: 700;
    margin: 0px !important;
    text-align: center;


}

.remaninig-license-col1-item-cell2.odd-row {
    background-color: #FFFFFF;
}

.remaninig-license-col1-item-cell2.even-row {
    background-color: #F4F4F4;
}

.remaninig-license-col2-item-cell2.odd-row {
    background-color: #FFFFFF;
}

.remaninig-license-col2-item-cell2.even-row {
    background-color: #F4F4F4;
}

.remaninig-license-col1-item-cell3.odd-row {
    background-color: #FFFFFF;
}

.remaninig-license-col1-item-cell3.even-row {
    background-color: #F4F4F4;
}

.remaninig-license-col2-item-cell2.selected-row {
    border-top: 1px solid var(--primary-green);
    border-bottom: 1px solid var(--primary-green);

}

.remaninig-license-col1-item-cell2.selected-row {
    border-top: 1px solid var(--primary-green);
    border-bottom: 1px solid var(--primary-green);
    border-left: 1px solid var(--primary-green);


}

.remaninig-license-col1-item-cell3.selected-row {
    border-top: 1px solid var(--primary-green);
    border-bottom: 1px solid var(--primary-green);
    border-right: 1px solid var(--primary-green);
}


#summaryModal.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 456px !important;
    height: 744px !important;
    /* fixed height */
    max-height: 90vh;
    /* prevents overflow off screen */
    background-color: #FFFFFF;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* scroll vertically */
    overflow-x: hidden;
    z-index: 1050;
}

/* Thin green scrollbar (Chrome, Edge, Safari) */
#summaryModal.modal::-webkit-scrollbar {
    width: 6px;
    /* thin */
}

#summaryModal.modal::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* light track */
    border-radius: 10px;
}

#summaryModal.modal::-webkit-scrollbar-thumb {
    background-color: #216767;
    /* green */
    border-radius: 10px;
}

/* Thin green scrollbar (Firefox) */
#summaryModal.modal {
    scrollbar-width: thin;
    scrollbar-color: #216767 #f1f1f1;
}


#summaryModal .modal-content {
    width: 408px;
    height: 647px;
    display: flex;
    flex-direction: column;
    gap: 189px;
    align-items: flex-start;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    /* background-color: red !important; */
    border: none !important;
    border-radius: 0 !important;
    opacity: 100%;
}

.summmary-main-container {
    width: 408px;
    height: 417px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 20px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.summary-body-container {
    width: 408px;
    height: 373px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 0px !important;
    opacity: 100%;

}

.summary-body-subcontainer {
    width: 408px;
    height: 309px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0px !important;
    opacity: 100%;
}

.summary-body-title p {
    width: 406px;
    height: 17px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 400;
    color: 323233;
    opacity: 100%;
    margin: 0px !important;
}

.summary-container {
    width: 408px;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 16px !important;
    opacity: 100%;
    border-radius: 4px;
    background-color: #F4F4F4;
}

.start-date-container {
    width: 376px;
    height: 41px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.start-date-subcontainer {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.start-date-text-container {
    width: 137px;
    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.start-date-text-container p {
    width: 117px;
    height: 12px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.start-date-text-container2 {
    /* width: 110px; */
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.start-date-text-container2 p {
    /* width: 90px; */
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 500;
    color: #28396A;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.start-date-subtitle-container {
    width: 376px;
    height: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 134px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.start-date-subtitle-subcontainer {
    width: 226px;
    height: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
    white-space: nowrap;
}

.start-date-subtitle-subcontainer p {
    width: 113px;
    height: 17px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 400;
    color: #696969;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.payment-date-container {
    width: 376px;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-subcontainer {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-text-container {
    width: 129px;
    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-text-container p {
    width: 109px;
    height: 12px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.payment-date-text-container2 {
    /* width: 110px; */
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-text-container2 p {
    /* width: 90px; */
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 500;
    color: #28396A;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.payment-date-subtitle {
    width: 376px;
    height: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 134px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-subtitle-subcontainer {
    width: 256px;
    height: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.payment-date-subtitle-subcontainer p {
    width: 249px;
    height: 18px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 400;
    color: #696969;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.scale-plan-text-container {
    width: 229px;
    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.scale-plan-text-container p {
    width: 209px;
    height: 12px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.scale-plan-text-container2 {
    /* width: 66px; */
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.scale-plan-text-container2 p {
    /* width: 66px; */
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 500;
    color: #28396A;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

.scale-plan-subtitle-container {
    width: 376px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 134px;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 100%;
}

.scale-plan-subtitle-subcontainer {
    width: 226px;
    height: 17px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.scale-plan-subtitle-subcontainer p {
    width: 147px;
    height: 17px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 400;
    color: #696969;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

@media (min-width:1096px) {
    .active-subscription-card {
        display: flex;
        flex-direction: column;
        /* Stack items on mobile */
        gap: 24px;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        margin-top: 5px;
        height: 200px;
    }
}

@media (min-width:992px) and (max-width:1095px) {

    .active-subscription-card {
        display: flex;
        flex-direction: column;
        /* Stack items on mobile */
        gap: 24px;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        margin-top: 5px;
        height: 200px;
    }
}

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

    .active-subscription-card {
        display: flex;
        flex-direction: column;
        /* Stack items on mobile */
        gap: 24px;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        margin-top: 5px;
        height: 680px;
    }




}

@media (max-width:767px) {
    .active-subscription-card {
        display: flex;
        flex-direction: column;
        /* Stack items on mobile */
        gap: 24px;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        margin-top: 16px;
        height: 780px;
    }

    .renew-button-subcontainer {
        /* width: 88px; */
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-right: 20px;
        opacity: 100%;
        border-radius: 4px;
        background-color: var(--primary-green);

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

    .upgrade-button-subcontainer {
        /* width: 104px; */
        height: 40px;
        display: flex;
        /* flex-direction: row; */
        justify-content: center;
        align-content: center;
        padding: 16px 24px;
        margin-left: 0px !important;
        opacity: 100%;
        border-radius: 4px;
        border: 1px solid var(--primary-green);
        background-color: #FFFFFF;

        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    }

}

.active-subscription-button-subcontainer .row {
    gap: 20px;
    /* Forces 20px gap between columns */
}

.subscription-text-container {
    width: 189px;
    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0px 10px !important;
    margin: 0px !important;
    opacity: 100%;
    white-space: nowrap;

}

.subscription-text-container p {
    width: 169px;
    height: 12px;
    font-family: var(--font-family-Inter);
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
    white-space: nowrap;

}

.subscription-text-container2 {
    width: 73px;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 10px !important;
    margin: 0px !important;
    opacity: 100%;
}

.subscription-text-container2 p {
    width: 55px;
    height: 10px;
    font-family: var(--font-family-Inter);
    font-size: 14px;
    font-weight: 500;
    color: #28396A;
    opacity: 100%;
    line-height: 140%;
    margin: 0px !important;
}

#finalConfirmationModal.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 55% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 456px !important;
    height: 744px !important;
    /* fixed height */
    max-height: 90vh;
    /* prevents it from overflowing off-screen */
    background-color: #FFFFFF;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* enable vertical scroll */
    overflow-x: hidden;
    z-index: 1050;
}

/* Thin green scrollbar (Chrome, Edge, Safari) */
#finalConfirmationModal.modal::-webkit-scrollbar {
    width: 6px;
    /* thin */
}

#finalConfirmationModal.modal::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* light track */
    border-radius: 10px;
}

#finalConfirmationModal.modal::-webkit-scrollbar-thumb {
    background-color: #216767;
    /* green */
    border-radius: 10px;
}

/* Thin green scrollbar (Firefox) */
#finalConfirmationModal.modal {
    scrollbar-width: thin;
    scrollbar-color: #216767 #f1f1f1;
}


#finalConfirmationModal .modal-content {
    width: 408px;
    height: 647px;
    display: flex;
    flex-direction: column;
    gap: 189px;
    align-items: flex-start;
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
    /* background-color: red !important; */
    border: none !important;
    border-radius: 0 !important;
    opacity: 100%;
}

.cross-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    font-weight: 400px;
    font-size: 20px;
    color: #28396A;
}

.custom-scroll-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* WebKit browsers (Chrome, Edge, Safari) */
.custom-scroll-container::-webkit-scrollbar {
    width: 67px;
}

.custom-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-green);
    border: 6px solid var(--primary-green);
    border-radius: 10px;
    /* Optional: rounded corners for aesthetics */
}

.custom-scroll-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Firefox */
.custom-scroll-container {
    scrollbar-width: thin;
    /* 'thin' to approximate custom width */
    scrollbar-color: var(--primary-green) #f1f1f1;

}

.remaninig-license-col1-item-cell2.disabled,
.remaninig-license-col2-item-cell2.disabled,
.remaninig-license-col1-item-cell3.disabled {
    height: 48px;
    line-height: 1%;
    cursor: not-allowed;
}

.remaninig-license-col1-item-cell3-text.disabled {
    height: 16px;
    line-height: 1%;
}

.remaninig-license-col1-item-cell2.disabled .remaninig-license-title,
.remaninig-license-col2-item-cell2.disabled .remaninig-license-title2,
.remaninig-license-col1-item-cell3.disabled .remaninig-license-title3 {
    color: #B9C6E9;
    line-height: 100%;
}


.remaninig-license-col1-item-cell2.disabled .remaninig-license-subtitle,
.remaninig-license-col2-item-cell2.disabled .remaninig-license-subtitle2,
.remaninig-license-col1-item-cell3.disabled .remaninig-license-subtitle3 {
    display: none;
}

.remaninig-license-col1-item-cell3.disabled .cost-display {
    display: none;
}

.remaninig-license-col1-item-cell3 .disabled-placeholder {
    display: none;

}

.remaninig-license-col1-item-cell3.disabled .disabled-placeholder {
    display: flex;
}

.no-subscription-container {
    width: 100%;
    text-align: center;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-subscription-container img {
    max-width: 80px;
    height: auto;
    margin-bottom: 1rem;
}

.no-subscription-container-text {
    font-family: var(--font-family-mulish);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.no-subcription-button-subcontainer {
    background: var(--primary-blue);
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
}

.header-cell4 {
    position: relative;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: var(--filtersort-bg-color) !important;
    border: var(--filtersort-border) !important;
    border-radius: 6px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 9999;
    display: none;
}

.mssp-filter-option {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mssp-filter-option:hover {
    background: #f4f4f5;
}

.table-col4,
.header-cell4 {
    overflow: visible;
}

.fillter-list img {
    cursor: pointer;
}


.header-cell4 {
    position: relative;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 9999;
    display: none;
}

.mssp-filter-option {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mssp-filter-option:hover {
    background: #f4f4f5;
}

.table-col4,
.header-cell4 {
    overflow: visible;
}

.fillter-list img {
    cursor: pointer;
}



.header-cell1 {
    position: relative;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 9999;
    display: none;
}

.mssp-filter-option {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mssp-filter-option:hover {
    background: #f4f4f5;
}

.table-col1,
.header-cell1 {
    overflow: visible;
}

.fillter-list img {
    cursor: pointer;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}


.filter-dropdown {
    position: absolute;
    top: 100%;
    /* appear below the header row */
    right: 0;
    /* align to the right edge of the icon */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 5px 0;
    width: 180px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}


.no-subcription-button-container {

    width: 119px !important;
    height: 40px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 100%;
    cursor: pointer;

}

.no-subcription-button-subcontainer {

    width: 119px !important;
    height: 40px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    padding: 0px !important;
    margin: 0 !important;
    opacity: 100%;
    border-radius: 4px !important;
    background-color: var(--primary-green) !important;
    border: 1px solid #000000 !important;
    cursor: pointer !important;

}

.no-subcription-button-subcontainer p {

    width: 71px !important;
    height: 20px !important;
    font-family: var(--font-family-mulish) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    opacity: 100% !important;
    text-align: center !important;
    margin: 0px !important;

}

.no-subcription-icon-container {

    width: 141px !important;
    height: 141px !important;

    opacity: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-subcription-icon-subcontainer {
    width: 80px !important;
    height: 80px !important;
    opacity: 100%;
    display: flex;

}

/* .no-subscription-container-text {
    width: 100% !important;
    height: 20px !important;
    font-family: var(--font-family-mulish) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--primary-blue) !important;
    opacity: 100% !important;

} */

/* upgade styles end  */

/* User management screen */

.Orgs-frame1 {
    width: 347px;
    height: 47px;
    position: absolute;
    left: 88px;
    top: 76px;
    display: flex;
    flex-direction: column;
    /* Vertical layout */
    align-items: flex-start;
    /* Align items to the left */
    row-gap: 8px;
    padding: 0;
    opacity: 1;
    border-radius: 0;
}

.Orgs-subframe1 {
    width: 347px;
    height: 24px;
    opacity: 1;
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: #28396A;
    line-height: 100%;
    letter-spacing: 0;
}

.Orgs-subframe2 {
    width: 347px;
    height: 15px;
    opacity: 1;
    color: #28396A;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0;
}

.search-Orgs {
    width: 320px;
    height: 44px;
    opacity: 1;
    position: absolute;
    left: 88px;
    top: 159px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #DBDBDB;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 42px;
    padding: 0px;

}

.search-input::placeholder {
    color: var(--org-home-subtitle-text-color);
    opacity: 1;
}

.Orgs-table {
    margin-top: 30px;
    width: 93%;
    height: 576px;
    opacity: 100%;
    margin-left: 88px;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    align-items: flex-start;

}

.Orgs-subscription-cardcontainer {
    position: absolute;
    /* or relative/fixed/sticky as needed */
    width: 1168px;
    min-height: 543px;
    left: 88px;
    top: 267px;
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    opacity: 100%;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.Orgtable-col0 {
    width: 66px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 100%;
    padding: 0px;

}

.Orgtable-col1 {
    width: 196px;
    height: 496px;
    /* position: absolute; */
    /* For aligning to top-left of a container */
    top: 0;
    left: 0;
    margin: 0;
    /* Ensures no margin */
    padding: 0;
    /* Padding vertical and horizontal 0 */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    /* No corner radius */
    display: flex;
    /* To control vertical gap if multiple items */
    flex-direction: column;
    /* Stack items vertically */
    row-gap: 0;

}

.Orgtable-col2 {
    width: 200px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
    border-radius: 0;
}

.Orgtable-col3 {
    width: 229px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
    border-radius: 0;
}

.Orgtable-col4 {
    width: 179px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.Orgtable-col5 {
    width: 163px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.Orgtable-col6 {
    width: 135px;
    height: 496px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 100%;
    padding: 0px;
    margin: 0px;
}

.Orgsheader-cell1 {
    width: 196px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;

}

.Orgsheader-cell1 p {
    width: 89px;
    /* Width = 89 */
    height: 16px;
    /* Height = 16 */
    opacity: 1;
    /* 100% opacity */
    font-family: 'Mulish', sans-serif;
    /* Mulish font */
    font-weight: 700;
    /* Bold font */
    font-size: 18px;
    /* Font size 18 */
    line-height: 90%;
    /* Line height 90% of font size */
    letter-spacing: 0;
    /* No extra letter spacing */
    text-align: left;
    /* Align text to the left */
    vertical-align: top;
    /* Align to the top vertically */
    color: #4D6ABF;
}

.Orgsheader-cell2 {
    width: 200px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.Orgsheader-cell2 p {
    width: 113px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}


.Orgsheader-cell3 {
    width: 253px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.Orgsheader-cell3 p {
    width: 177px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.Orgs-header-cell5 p {
    width: 87px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
    white-space: nowrap;
    /* Prevent line break */
    overflow: hidden;
    /* Hide overflow if any */
    text-overflow: ellipsis;
}

.Orgsheader-cell4 {
    width: 179px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.Orgsheader-cell4 p {
    width: 103px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
    display: flex;
    flex-direction: row;

}

.Orgsheader-cell5 {
    width: 163px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.Orgsheader-cell5 p {
    width: 87px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
    display: flex;
    flex-direction: row;

}


.Orgsheader-cell6 {
    width: 135px;
    height: 48px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 8px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}


.Orgsheader-cell6 p {
    width: 57px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
    display: flex;
    flex-direction: row;

}

.test-header {
    width: 57px;
    height: 16px;
    font-family: var(--font-family-mulish);
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0px;
    padding: 0px;
    opacity: 100%;
}

.Orgs-framebar {
    width: 406px;
    height: 16px;
    position: absolute;
    bottom: 570px;
    opacity: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #28396A;
    line-height: 100%;
    letter-spacing: 0;
}

.Org-sub-table0 {
    width: 66px;
    height: 48px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    /* vertical = 12px, horizontal = 24px */
    opacity: 1;
    /* 100% opacity */
    background-color: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.Org-geolocation {
    width: 179px;
    height: 48px;
    display: flex;
    justify-content: flex-start;
    /* Align left */
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    /* vertical = 12px, horizontal = 24px */
    opacity: 1;
    /* 100% opacity */
}

.Orgsdata-cell1 {
    width: 196px;
    height: 64px;
    display: flex;
    flex-direction: column;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    gap: 12px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;

}

.Orgsdata-cell1 p {
    width: 172px;
    height: 16px;
    display: flex;
    /* justify-content: center; /* Horizontally center */
    /* align-items: center;  */
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 12px;

}


.Orgsdata-cell2 {
    width: 200px;
    height: 64px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 12px;
    /* Horizontal gap between items */
    padding: 12px;
    /* 12px vertical and horizontal padding */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
}


.Orgsdata-cell2 p {
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 12px;

}



.Orgsdata-cell3 {
    width: 229px;
    height: 64px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 12px;
    /* Horizontal gap between items */
    padding: 12px 24px;
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
}

.Orgsdata-cell3 p {
    width: 181px;
    height: 16px;
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 12px;

}

.Orgsdata-cell4 {
    width: 179px;
    height: 64px;
    display: flex;
    justify-content: flex-start;
    /* Keeps content aligned to the left horizontally */
    align-items: center;
    /* Centers content vertically */
    column-gap: 12px;
    padding: 12px 24px;
    opacity: 1;
    border-radius: 0;
}

.Orgsdata-cell4 p {
    width: 131px;
    height: 16px;
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 10px;
}

.Orgsdata-cell5 {
    width: 163px;
    height: 64px;
    display: flex;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    column-gap: 12px;
    /* Horizontal gap between items */
    padding: 12px 24px;
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
}

.Orgsdata-cell5 p {
    width: 115px;
    height: 16px;
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 12px;

}


.Orgsdata-cell6 {
    width: 135px;
    height: 64px;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    gap: 12px;
    /* Enables horizontal layout */
    justify-content: flex-start;
    /* Aligns content to the left */
    /* column-gap: 12px; */
    /* Horizontal gap between items */
    padding: 12px 24px;
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
}

.Orgsdata-cell6 p {
    width: 62px;
    height: 16px;
    white-space: nowrap;
    opacity: 1;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    padding-top: 12px;

}

.Orgs-sub-table0 {
    width: 66px;
    height: 64px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    /* vertical = 12px, horizontal = 24px */
    opacity: 1;
}

.stripe {
    background-color: #F4F4F4;
}

.search-icon-color {
    color: #28396A;
}

.Orgs-dropdown {
    opacity: 1;
    /* Opacity 100% */
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    /* Semi-bold */
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
}

.add-orgs-btn {
    background-color: #256D6B;
    /* Match the teal shade */
    color: white;
    border: none;
    padding: 8px 16px;
    font-family: "Mulish", sans-serif;
    font-weight: 600;
    /* Semibold */
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plus-icon {
    font-size: 20px;
    font-weight: 600;
}

/* .ellipse {
    width: 14px;
    height: 14px;
    background-color: #80F19E;
    opacity: 1;
    border-radius: 50%;
  } */
.status-ellipse {
    display: inline-block;
    width: 13px;
    height: 13px;
    min-width: 13px;
    min-height: 13px;
    flex-shrink: 0;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: 1px;
}

.mssp-deatils-status-ellipse {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.ellipse-enabled {
    background-color: #80F19E;
    /* Green */
}

.ellipse-disabled {
    background-color: #E77676;
    font-size: 10px;
    /* Red */
}


/* .status-ellipse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
} */

/* .ellipse-enabled {
    background-color: #28a745;
   
} */

/* .ellipse-disabled {
    background-color: #dc3545;
   
} */


.ellipse-invited {
    background-color: #F4E96E;
    /* Yellow */
}

.sort-icon {
    cursor: pointer;
    transition: transform 0.2s;
}

.sort-icon:hover {
    color: #0d6efd;
}

.stripe {
    background-color: #f8f9fa;
}

/* Tooltip styling */
.tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.tooltip-inner {
    max-width: 300px;
    padding: 8px 12px;
    background-color: #4B66C1;
    font-size: 14px;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #4B66C1;
}

/* User mangment screeen ended */

/* <!-- Off canva for Add Org  */
.custom-offcanvas {
    width: 424px !important;
    height: auto !important;
    max-width: 100%;
    overflow-y: auto;
    /* Add this if content might overflow vertically */
}

.offcanvas-header-Add-Org {
    width: 392px;
    height: 54px;
    top: 8px;
    left: 24px;
    justify-content: space-between;
    padding-top: 8px;
    padding-right: 16px;


}

.subclass-offcanvas-header-Add-Org {
    width: 392px;
    height: 46px;
    gap: 8px;



}





/* Table UI start */
.custom-table {
    width: 1168px;
    height: 496px;
    padding: 0px;
    background: #FFFFFF;
    border-radius: 4px 4px 0px 0px;
    table-layout: auto;

}

.table-inner-content {
    width: 1168px;
    min-height: 543px;
    border-collapse: collapse;
    position: absolute;
    top: 267px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: -1px;
    padding: 0px;
    filter: drop-shadow(4px 4px 18px rgba(92, 92, 92, 0.25));

}

tfoot .table-footer {
    position: relative;
    bottom: 10px;
    border-top: none;
    border-bottom: none;
}

.table-footer-row {
    width: 1168px;
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 8px;
    background: #FFFFFF;
    border-radius: 0px 0px 4px 4px;
    position: relative;
    /* top:758px; */

}

.table-footer-content {
    width: 1110px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 722px;
    position: absolute;
    left: 24px;
    top: 6px;
}

.no-of-rows-content {
    width: 127px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0px;
    gap: 4px;
}

.no-of-rows-content label {
    width: 99px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #28396A;
    white-space: nowrap;
    z-index: 1;

}

#rowsPerPageSelect {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #28396A;
    white-space: nowrap;
    background-color: white;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    right: 12px;
    cursor: pointer;
    padding-right: 30px;
    background-image: var(--org-card-dropdown-icon);
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

#rowsPerPageSelect:focus {
    outline: none;
    border-color: none;
    box-shadow: none;
}

.showing-footer-container {
    width: 261px;
    height: 24px;

}

.showing-footer-content {
    width: 264.2px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 22px;
    position: relative;
    left: 0px;
    top: 0px;
}

.showing-text {
    width: 114.2px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: right;
    color: #28396A;
    white-space: nowrap;
    position: relative;
    left: 15px;
}

.PageNavigationExample {
    width: 128px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: relative;
    right: 5px;
    bottom: 2px;
}


.table-responsive {
    overflow-x: hidden;

}

.custom-th {

    width: 66px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
}

.custom-firstName {
    width: 144px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
}

.custom-lastName {
    width: 134px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    white-space: nowrap;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
}

.custom-email {
    width: 265px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;

}

.custom-role {
    width: 100px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
}

.custom-addedBy {
    width: 166px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
}

.custom-addedOn {
    width: 160px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;

}

.custom-status {
    width: 135px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;

}

.head-row {
    display: flex;
    flex-direction: row;
    border: none;
    width: 1168px;

}

.userTableBody {
    border: none;
    margin: 0 !important;
    padding: 0 !important;
}

.data-row {
    display: flex;
    flex-direction: row;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    position: relative;
    /* margin-bottom: 1px; */

}

.data-checkbox {
    width: 66px;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;

}

.data-firstName {
    width: 144px;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.data-lastName {
    width: 132px;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.data-email {
    width: 265px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

.data-role {
    width: 100px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
}

.data-addedBy {
    width: 166px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
}

.data-addedOn {
    width: 160px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;
}

.data-status {
    width: 135px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
    border-left: none;
    border-right: none;

}

.data-row:nth-child(odd) {
    background: #F4F4F4;
}

.data-row:nth-child(even) {
    background: #FFFFFF;
}

.asc-text,
.desc-text {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    width: 201px;
    height: 32px;
    margin: 0 auto;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-text-color);
    white-space: nowrap;
    position: relative;
    text-decoration: none;

}

.asc-text:hover,
.desc-text:hover {
    background: var(--filtersort-hover-bg-color);
    color: var(--filtersort-hover-text-color);
}

.dropdown-content .sort-tick {
    display: block;
    position: absolute;
    right: 8px;
    top: 25%;
}

.asc-text:hover .sort-tick,
.desc-text:hover .sort-tick {
    display: inline-block;
}

.asc-text.selected-option .sort-tick,
.desc-text.selected-option .sort-tick {
    display: inline-block;
}

.role-dropdown-item:hover .sort-tick,
.role-dropdown-item.selected-option .sort-tick {
    display: inline-block;

}

.role-dropdown-item.role-item .sort-tick {
    display: none;
}

.auditrole-dropdown-item:hover .sort-tick,
.auditrole-dropdown-item.selected-option .sort-tick {
    display: inline-block;

}

.auditrole-dropdown-item.role-item .sort-tick {
    display: none;
}

.role-dropdown-item.role-item:hover .sort-tick,
.role-dropdown-item.role-item.selected-option .sort-tick {
    display: inline-block;

}

.role-dropdown-item.status-item .sort-tick {
    display: none;
}

.role-dropdown-item.status-item:hover .sort-tick,
.role-dropdown-item.status-item.selected-option .sort-tick {
    display: flex;
    align-items: flex-end;
    position: absolute;
    /* bottom:2px; */
    right: 10px;

}

.role-dropdown-content.status-dropdown {
    position: absolute;
    left: -115px;
    width: 140px;
    height: 136px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;


}

.role-dropdown-item.text {
    width: 140px;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;

}

.auditrole-dropdown-item {
    padding: var(--role-dropdown-padding);
    cursor: pointer;
    font-size: var(--role-dropdown-font-size);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    line-height: 100%;
    color: #323233;
    width: 153px;
    height: 32px;
}

.auditrole-dropdown-item.text:hover,
.role-dropdown-item.text:hover {
    background: #B2DDDD;
    color: #28396A;
}


.role-dropdown-content.addedby,
.role-dropdown-content.useraddedby .role-dropdown-content.geolocation,
.role-dropdown-content.msp-geolocation {
    width: 201px;
    height: auto !important;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 8px 8px 0px;
    background: var(--filtersort-bg-color);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    position: absolute;
    top: 10px;
}

.role-dropdown-content.msp-geolocation.show {
    display: block;
}

.admin-dropdown-text {
    width: 193px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 16px;
    background: var(--filtersort-bg-color);
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    color: #28396A;
    margin: 0 !important;

}

#addedByList .form-check,
#geolocationList .form-check,
#msspGeolocationList .form-check,
#useraddedByList .form-check,
#manageuseraddedByList .form-check {
    width: 193px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 16px;
    background: var(--filtersort-bg-color);
}

#addedByList span {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
    position: relative;
    left: 16px;
    top: 7px;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
}

#useraddedByList span,
#manageuseraddedByList span {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
    position: relative;
    /* left: 16px; */
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
}

#addedByList input[type="checkbox"],
#geolocationList input[type="checkbox"],
#msspGeolocationList input[type="checkbox"],
#useraddedByList input[type="checkbox"],
#manageuseraddedByList input[type="checkbox"] {
    position: relative;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
    width: 18px;
    height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7.5px;
    padding: 0px;
    background: #34B1B1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

#addedByList input[type="checkbox"]::before,
#geolocationList input[type="checkbox"]::before,
#msspGeolocationList input[type="checkbox"]::before,
#useraddedByList input[type="checkbox"]::before,
#manageuseraddedByList input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background-color: var(--org-listing-container-checkbox-color);
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid var(--org-listing-container-checkbox-border);
}

#addedByList input[type="checkbox"]:checked::after,
#geolocationList input[type="checkbox"]:checked::after,
#msspGeolocationList input[type="checkbox"]:checked::after,
#useraddedByList input[type="checkbox"]:checked::after,
#manageuseraddedByList input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background-color: var(--org-listing-container-checkbox-color);
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border: 1px solid var(--org-listing-container-checkbox-border);
}

#addedByList input[type="checkbox"]:focus,
#geolocationList input[type="checkbox"]:focus,
#msspGeolocationList input[type="checkbox"]:focus,
#useraddedByList input[type="checkbox"]:focus,
#manageuseraddedByList input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}

.data-row:hover {
    width: 1168px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    padding: 0px;
    z-index: 10;
    padding: 15.5px 0px;
    margin-bottom: 1px;
}

.data-row td {
    background: transparent;
    position: relative;
    z-index: 1;
}

.data-row:hover .data-inner-row {
    width: 1140px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
}

.data-row:hover .data-checkbox {
    width: 66px;
    height: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-firstName {
    width: 144px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-lastName {
    width: 132px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-email {
    width: 256px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-role {
    width: 100px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-addedBy {
    width: 166px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-addedOn {
    width: 160px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-row:hover .data-status {
    width: 161px;
    height: 62px;
    border: none;
}

.data-row:hover .action-buttons {
    width: 120px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;
    position: relative;
    right: 32px;
    bottom: 15px;
}

/* #noDataRow img{
    position: relative;
    left: 380px;
    
} */
#sortDisplay {
    position: absolute;
    width: 439px;
    height: 16px;
    left: 88px;
    top: 227px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #28396A;
}

input#deleteConfirmInput:-webkit-autofill,
input#deleteConfirmInput:-webkit-autofill:hover,
input#deleteConfirmInput:-webkit-autofill:focus,
input#deleteConfirmInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #F6FFF8 inset !important;
    box-shadow: 0 0 0 1000px #F6FFF8 inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

input.search-input:-webkit-autofill,
input.search-input:-webkit-autofill:hover,
input.search-input:-webkit-autofill:focus,
input.search-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

.firstname-content input:-webkit-autofill,
.lastname-content input:-webkit-autofill,
.email-content input:-webkit-autofill,
.firstname-content input:-webkit-autofill:hover,
.lastname-content input:-webkit-autofill:hover,
.email-content input:-webkit-autofill:hover,
.firstname-content input:-webkit-autofill:focus,
.lastname-content input:-webkit-autofill:focus,
.email-content input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #F6FFF8 inset !important;
    box-shadow: 0 0 0 1000px #F6FFF8 inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

/* Table UI end */


/* adjust subtitle class for clarity start */
.remaninig-license-col1-item-cell2,
.remaninig-license-col2-item-cell2,
.remaninig-license-col1-item-cell3 {
    height: 48px;
    line-height: 1%;
}


.remaninig-license-col1-item-cell2.selected-row,
.remaninig-license-col2-item-cell2.selected-row,
.remaninig-license-col1-item-cell3.selected-row {

    height: 72px;

}

.remaninig-license-col1-item-cell2.selected-row .remaninig-license-col1-item-cell2-text,
.remaninig-license-col2-item-cell2.selected-row .remaninig-license-col2-item-cell2-text,
.remaninig-license-col1-item-cell3.selected-row .remaninig-license-col1-item-cell3-text {

    height: 30px;
}


.remaninig-license-col1-item-cell2 .remaninig-license-subtitle,
.remaninig-license-col2-item-cell2 .remaninig-license-subtitle2,
.remaninig-license-col1-item-cell3 .remaninig-license-subtitle3 {
    display: none;
}





.remaninig-license-col1-item-cell3.selected-row .remaninig-license-subtitle3,
.remaninig-license-col1-item-cell2.selected-row .remaninig-license-subtitle {
    display: block;
}



.remaninig-license-col2-item-cell2.selected-row .remaninig-license-subtitle2.active {
    display: block;
}

/* adjust subtitle class for clarity end */

.firstname-Org {
    width: 376px;
    height: 71px;
    gap: 8px;

}

.offcanvas-Org-body {
    width: 376px;
    height: 901px;
    position: absolute;
    top: 98px;
    left: 24px;
    gap: 32px;

}



.email-content-orgs {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    margin-top: 30px;
}


/* .error-message {
    
    position: absolute;
    left: 0; */
/* bottom: -1px; /* Adjust this if needed */
/* display: block; Ensure it's always visible when needed  */
/* width: 100%;
} */

.input-container {
    margin-bottom: 25px;
    /* Adds space for the message */
}

.firstname-content-org,
.email-content-orgs,
.Admin-name-content-org {
    position: relative;
}

/* .error-message {
    font-family: 'Inter', sans-serif;
    font-weight: 400; /* Inter Regular */
/* font-size: 16px; */
/* line-height: 130%; equivalent to 20.8px */
/* letter-spacing: 0;
    text-align: left;
    color: #BE5050;
}  */
.form-control {
    margin-bottom: 25px;
    /* Ensure enough space for error messages */
}

.form-controls {
    flex-grow: 1;
    /* min-height: 38px; */
    /* Adjust based on your design */
}

.error-admin-style {
    padding-top: 20px;
}

.msp-geolocation {
    background-color: #F6FFF8;
    border: var(--filtersort-border);
    border-radius: 4px;
    color: #000;
    /* optional: ensure text is readable */
}

.msp-geolocation:focus {
    outline: none;
    box-shadow: none;
    border-color: #D2E0D5;
    background-color: #F6FFF8;
    /* <- force background to stay */
}


#addUserSpinner {
    color: white !important;
}

.msp-gelocation-browser.input-group {
    border-radius: 4px;
}

#Org-name-error {
    margin-bottom: 20px;
}

#addSingleUserBtnmsp {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 400px;
    height: 40px;
    left: calc(50% - 400px/2);
    top: calc(50% - 40px/2);
    background: #216767;
    border-radius: 4px;
    position: relative;

}

.msp-error-Organization-Name {
    margin-top: 50px;
}

.email-content-orgs label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}


.email-content-orgs input {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}


.email-content-orgs input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}

.example-mail {
    width: 270px;
    height: 17px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #696969;
}


.firstname-content-org {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    /* margin-top: 30px; */
}

.firstname-content-org label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

.firstname-content-org input {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}

.firstname-content-org input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}


.Coconut-Portal {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    margin-top: 32px;
}

.Coconut-Portal label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

.Coconut-Portal input {
    width: 276px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}

.Coconut-Portal input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}



.email-content-orgs {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    margin-top: 32px;
}


.email-content-orgs label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}


.email-content-orgs input {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}


.email-content-orgs input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}



.custom-Orgs-flex-container {
    width: 136px;
    height: 40px;
    display: flex !important;
    align-items: center;
    padding: 0px;

}

.licences-text {
    width: 270px;
    height: 17px;
    font-family: Inter;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #696969;

}

.Custom-flex-container {
    width: 270px;
    height: 65px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

.orgs-status {
    width: 376px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    margin-top: 32px;
}


.Admin-name-content-org {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 8px;
    width: 376px;
    height: auto;
    margin-top: 32px;
}

.Admin-name-content-org label {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #28396A;
}

.Admin-name-content-org input {
    width: 376px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 4px 8px;
    gap: 10px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #323233;
}

.Admin-name-content-org input:focus {
    box-shadow: none;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}


.status-disabled-content-orgs {
    width: 376px;
    height: 46px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

}

.status-disabled-content-orgs label {
    width: 279px;
    height: 34px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: #323233;
    margin-top: 25px;
}


.custom-offcanvas {
    max-height: 100vh;
    overflow-y: scroll;
    /* Allows vertical scrolling */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    box-sizing: border-box;
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
    /* For Internet Explorer and Edge */
}

.custom-offcanvas::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, and Opera */
}

.no-border-org {
    border: none !important;
    background-color: transparent !important;
    /* padding-left: 0; */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    /* Bold */
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 2px;
    color: #28396A;
    margin-bottom: 23px;
    margin-left: 2px;
}

.dropdown-icon-wrapper-orgs {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 8px;
    top: 31.5%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.send-invite-container-orgs {
    width: 358px;
    height: auto;
    position: absolute;
    left: 24px;
    /* X-Axis */
    top: 1251px;
    /* Y-Axis */
    display: flex;
    justify-content: flex-start;
    /* Align Left */
    gap: 8px;
    /* Horizontal gap between items */
    padding: 0;
    /* Padding: vertical and horizontal 0 */
    opacity: 1;
    /* 100% opacity */
    border-radius: 0;
    /* Corner radius 0 */

}

.send-invite-container-orgs label {
    width: 326px;
    height: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
    padding-bottom: 22px;
    position: relative;
    right: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;


}


.browser-checkbox-orgs {
    width: 24px;
    height: 24px;

}

.browser-checkbox-input-orgs {
    position: relative;
    width: 18px;
    height: 18px;
    right: 30px;
    flex: none;
    order: 0;
    flex-grow: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    opacity: 50%;
}

.browser-checkbox-orgs-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34b1b1;
    border-radius: 3px;
    cursor: pointer;
}

.browser-checkbox-orgs-input:checked::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 1.5px;
    top: 1.5px;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
}

.browser-checkbox-input-orgs:checked,
.browser-checkbox-orgs-input:checked {
    opacity: 100%;
}

.add-user-msp-footer {
    position: absolute !important;
    bottom: 0 !important;
    width: 424px !important;
    height: 64px !important;
    background: #FFFFFF !important;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12) !important;
    top: 1330px !important;
}

.button-text-Msp {
    color: #FFFFFF !important;
}

#editSingleUserBtn {
    background-color: var(--primary-green) !important;
    /* Primary blue background for visibility */
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    width: 400px !important;
    text-align: center !important;
    margin: 10px auto !important;
    /* Center the button */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.status-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-actions {
    width: 161px;
    height: 62px;
    display: none;
    gap: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 4px;
}

.status-container:hover .icon-actions {
    display: flex;
}

.icon-actions i {
    color: #246261;
    /* Adjust based on your design */
    cursor: pointer;
    font-size: 16px;
}

.trash-icon {
    width: 24px;
    height: 24px;
}

.edit-icon-btn-msp {
    width: 24px;
    height: 24px;
    cursor: pointer;
    /* Optional: shows hand cursor on hover */
}



#deleteConfirmationModal .modal-dialog {
    max-width: var(--modal-max-width);
}

#deleteConfirmationModal .modal-content {
    position: relative;
    height: var(--modal-height);
    border-radius: var(--modal-radius);
    padding: var(--modal-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}

#deleteConfirmationModal .modal-header {
    width: var(--delete-modal-width);
    height: var(--delete-modal-header-height);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: var(--delete-gap-small);
}

#deleteConfirmationModal .modal-header .modal-title {
    width: var(--delete-title-width);
    height: var(--delete-title-height);
    font-family: var(--delete-font-secondary);
    font-style: normal;
    font-weight: var(--delete-font-weight-bold);
    font-size: var(--delete-font-size-header);
    line-height: 100%;
    color: var(--delete-color-header);
    position: relative;
}

#deleteConfirmationModal .modal-header-container {
    width: var(--delete-modal-width);
    height: var(--delete-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-gap-large);
    position: relative;
    left: 10px;
}

#deleteConfirmationModal .header-inner-content {
    width: var(--delete-modal-width);
    height: var(--delete-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-gap-small);
}

/* #deleteConfirmationModal .modal-body {
    padding-top: 0;
    font-size: var(--font-size-body);
}  */

#deleteConfirmationModal .header-inner-content .delete-users-message {
    font-family: var(--delete-font-primary);
    font-style: normal;
    font-weight: var(--delete-font-weight-bold);
    font-size: var(--delete-font-size-body);
    line-height: 140%;
    color: var(--delete-color-primary);
}

#deleteUsersCount {
    position: relative;
    color: var(--delete-color-primary);
}

.bold-part {
    font-weight: var(--delete-font-weight-bold);
    display: inline;
    white-space: nowrap;
}

.normal-part {
    display: inline;
    font-weight: var(--delete-font-weight-regular);
}

#deleteConfirmationModal .btn-close {
    margin-left: auto;
    font-size: 1rem;
    padding: 0.5rem;
    opacity: 0.6;
}

#deleteConfirmationModal .btn-close:hover {
    opacity: 1;
}

#deleteConfirmationInput {
    width: var(--deleteConfirmInput-input-width);
    height: var(--deleteConfirmInput-input-height);
    border-radius: var(--deleteConfirmInput-input-radius);
    padding: var(--deleteConfirmInput-input-padding);
    gap: var(--deleteConfirmInput-input-gap);
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
}

#deleteConfirmationInput:focus {
    background: #F6FFF8;
    box-shadow: none;
}

input#deleteConfirmationInput:-webkit-autofill,
input#deleteConfirmationInput:-webkit-autofill:hover,
input#deleteConfirmationInput:-webkit-autofill:focus,
input#deleteConfirmationInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

#confirmDeleteButton {
    background-color: var(--btn-bg-confirm);
    border: none;
    padding: var(--btn-padding);
    width: var(--btn-width);
    height: var(--btn-height);
    gap: var(--btn-gap);
}

#deleteConfirmationModal .modal-footer {
    width: var(--delete-modal-width);
    height: var(--delete-footer-height);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);

}

#deleteConfirmationModal .type-delete-container {
    width: var(--delete-modal-width);
    height: var(--delete-input-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);
    position: relative;
    bottom: 10px;

}

#deleteConfirmationModal .type-delete-content {
    width: 273px;
    height: var(--delete-input-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    position: relative;
    left: 10px;

}

#deleteConfirmationModal .delete-btn-container {
    width: var(--delete-button-width);
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);
    position: relative;
    right: 140px;
    bottom: 15px;
}

.delete-button-modal {
    width: 53px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding-bottom: 8px;
    padding-left: 4px;
}

.delete-modal-button-text {
    width: 56px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    padding-top: 16px;
}

.cancel-button-modal,
.cancel-button-modal:hover {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;
    box-sizing: border-box;
    background: var(--action-button-bg-color) !important;
    border: 1px solid var(--action-button-border-color) !important;
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 4px;
    color: var(--action-button-text-color);
}

.cancel-modal-button-text {
    width: 56px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--action-button-text-color) !important;
    padding-top: 16px;
}




/* MSP SETTINGS START */
.msp-settings-subtitle {
    width: 516px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-home-subtitle-text-color);

}

.msp-settings-card-container {
    width: 1250px;
    height: 270px;
    /* height: auto; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    position: relative;
    top: 83px;
}

.browserMsp-settings-group-item {
    width: 100%;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 32px;
    background: #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
}

.browserMsp-settings-group-item,
.company-settings-group-item,
.permissions-group-item,
.sessions-settings-group-item,
.settings-license-group-item,
.settings-whitelist-group-item,
.settings-blacklist-group-item,
.settings-role-group-item,
.settings-group-item {
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.company-settings-group-item,
.permissions-group-item,
.sessions-settings-group-item {
    width: 1250px;
    height: 84px;
    ;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
}

.browserMsp-settings-inner-content {
    width: 497px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.browserMsp-settings-card-text {
    width: 497px;
    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;
    white-space: nowrap;

}

.company-settings-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;

}

.settings-company-title {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}


.settings-company-subtitle {
    width: 185px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--org-home-title-text-color);

}

.settings-company-text {

    height: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;
    padding-left: 32px;

}

.settings-company-subtext {
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.msp-company-container {
    width: 224px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;

}

.msp-company-content {

    width: 176px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 12px;

}

.msp-company-text {
    width: 176px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    text-align: right;
    color: #28396A;

}

.settings-permissions-content {
    width: 538px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.settings-permissions-title {
    width: 199px;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

}

.settings-permissions-subtitle {
    width: 199px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.settings-permissions-text {
    width: 538px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;

}

.settings-permissions-subtext {
    width: 538px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;
}

.settings-permissions-text {
    width: 538px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 10px;

}

.settings-permissions-subtext {
    width: 538px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;

}

.permissions-container {
    width: 157px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;

}

.permissions-content {
    width: 109px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 12px;

}

.permissions-text {
    width: auto;
    height: auto;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    text-align: right;
    color: #28396A;
    white-space: nowrap;
}

.settings-sessions-content {
    width: 251px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.settings-sessions-title {
    width: 157px;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

}

.settings-sessions-subtitle {
    width: 157px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
    white-space: nowrap;

}

.settings-sessions-text {
    width: 270px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
    padding-left: 32px;

}

.settings-sessions-subtext {
    width: 251px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;

}

.sessions-container {
    width: 123px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
}

.sessions-content {
    width: 75px;
    height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 12px;

}

.sessions-text {
    width: auto;
    height: auto;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    text-align: right;
    color: #28396A;
    white-space: nowrap;
}

.msp-browser-container {
    display: none;
    width: 100%;
    margin-top: 16px;
}

.browserMsp-settings-group-item.expanded {
    width: 1250px;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 32px;
    background: #FFFFFF;
    border-radius: 4px;
}

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

.msp-browser-select {
    width: 681px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 32px;
    gap: 12px;
    position: relative;
    top: 32px;

}

.msp-browser-select-container {
    width: 649px;
    height: 71px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 24px;

}

.msp-browser-select-content {
    width: 376px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.msp-browser-select-title {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.msp-browser-select-title label {
    width: 376px;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #323233;
}

.msp-success-notification {
    width: 549px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 8px;
    position: absolute;
    left: calc(50% - 514px / 2);
    top: 50px;
    background: #C6EEC6;
    border: 1px solid #216767;
    box-shadow: 0px 6px 10px rgba(84, 113, 211, 0.14), 0px 1px 18px rgba(84, 113, 211, 0.12);
    border-radius: 4px;

}

.msp-notification-text {
    width: 467px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    border-radius: 2px;
    display: flex;
    align-items: center;

}

.company-settings-group-item.expanded {
    width: 1250px;
    min-height: 475px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    background: #FFFFFF;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.user-msp-company-expanded-container,
.msp-company-expanded-container {
    display: none;
    width: 100%;
    margin-top: 16px;
}

.user-msp-company-expand-content,
.msp-company-expand-content {
    width: 408px;
    height: 295px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 32px;
    gap: 24px;

}

.user-msp-btn-container,
.msp-btn-container {
    width: 281px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 0px 32px;
    gap: 16px;
    position: relative;
    top: 24px;
}

.user-msp-company-edit-container,
.msp-company-edit-container {

    width: 408px;
    height: 295px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 32px;
    gap: 24px;
    position: relative;
    right: 33px;
}

.user-msp-company-edit-title-container,
.msp-company-edit-title-container {
    width: 376px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.user-msp-company-edit-title,
.msp-company-edit-title {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.user-msp-company-edit-title label,
.msp-company-edit-title label {
    width: 376px;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-home-title-text-color);

}

.user-msp-company-edit-input,
.msp-company-edit-input {
    width: 376px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 13px;
    background: var(--org-modal-inputfield-bg-color) !important;
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    border-radius: 4px;
    box-sizing: border-box;
}

#usercompanyName,
#companyName {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-modal-inputfield-text-color) !important;
    background: transparent !important;
    outline: none;
    border: none;
}

#companyName::placeholder,
#usercompanyName::placeholder {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-modal-inputfield-text-color) !important;
    background: transparent;
    outline: none;
    border: none;
}

#companyName:focus #usercompanyName:focus {
    outline: none;
    border: none;
}

.user-msp-company-logo-container,
.msp-company-logo-container {
    width: 376px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    position: relative;
    /* top:24px; */

}

.user-msp-company-logo-text,
.msp-company-logo-text {
    width: 376px;
    height: 18px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: var(--org-home-title-text-color);
}

.user-msp-company-logo-file-upload,
.msp-company-logo-file-upload {
    width: 376px;
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

.user-msp-company-logo-file-upload label,
.msp-company-logo-file-upload label,
.msp-company-logo-upload-process label,
.msp-company-success-process label {
    width: 110px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: var(--org-modal-sub-text-color);
}

.user-msp-company-dragAndDrop,
.msp-company-dragAndDrop {
    width: 376px;
    height: 154px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 11.67px;

}

.user-msp-company-dragAndDrop-content,
.msp-company-dragAndDrop-content {
    width: 376px;
    height: 154px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 17.5px 11.6667px;
    gap: 5.83px;
    box-sizing: border-box;
    background: var(--org-modal-inputfield-bg-color) !important;
    border: 2px dashed var(--org-modal-inputfield-border-color) !important;
    border-radius: 5.83333px;
}

.user-msp-dragAndDrop-text,
.msp-dragAndDrop-text {
    width: 199px;
    height: 53px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 8px;
}

.msp-dragAndDrop-subtext1,
.user-msp-dragAndDrop-subtext1,
.msp-dragAndDrop-subtext2,
.user-msp-dragAndDrop-subtext2,
.msp-dragAndDrop-subtext3,
.usersetting-msp-dragAndDrop-subtext3 {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-card-subvalue-text-color);
    border-radius: 2px;
    margin: 0 !important;
    padding: 0 !important;
}

.user-msp-dragAndDrop-subtext1,
.msp-dragAndDrop-subtext1 {
    width: 235px;
    height: 12px;
}

.msp-dragAndDrop-subtext2 {
    width: 35px;
    height: 12px;
}

.usersetting-msp-dragAndDrop-subtext3,
.msp-dragAndDrop-subtext3 {
    width: 164px;
    height: 12px;
}

.msp-save-btn-container {
    width: 116px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
}

.user-msp-save-outline-btn,
.msp-save-outline-btn {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    color: var(--adduser-button-text-color);
    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 4px;
}

.user-msp-save-btn,
.msp-save-btn {
    width: 40px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;

}

.msp-cancel-outline-btn {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    box-sizing: border-box;
    background-color: var(--action-button-bg-color);
    border: 1px solid var(--action-button-border-color);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 4px;

}

.msp-cancel-btn {
    width: 56px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: var(--action-button-text-color);
}

.user-msp-save-btn,
.user-msp-save-btn:hover,
.user-msp-save-btn:focus,
.user-msp-save-btn:active,
.msp-save-btn,
.msp-save-btn:hover,
.msp-save-btn:focus,
.msp-save-btn:active {
    width: 63px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    opacity: 100%;
    background: transparent;
}

.user-msp-save-btn:active,
.msp-save-btn:active {
    transform: scale(0.96);
    box-shadow: none;
}

.msp-cancel-btn,
.msp-cancel-btn:hover,
.msp-cancel-btn:focus,
.msp-cancel-btn:active {
    width: 56px;
    height: 24px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    letter-spacing: 5%;
    text-align: center;
    vertical-align: middle;
    color: var(--action-button-text-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background-color: transparent;
}

.msp-cancel-btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 4px #ffffff;
}

.msp-company-portal-container,
.user-msp-company-portal-container {

    width: 472px;
    height: 71px;
    position: absolute;
    left: 472px;
}

.msp-company-portal-content,
.user-msp-company-portal-content {
    width: 442px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.user-msp-company-portal-title,
.msp-company-portal-title {
    width: 376px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.user-msp-company-portal-title label,
.msp-company-portal-title label {
    width: 376px;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-home-title-text-color);
}


.user-msp-companyPortal-input-content,
.msp-companyPortal-input-content {
    width: 442px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 16px;

}

.msp-company-portal-input,
.user-msp-company-portal-input {
    width: 308px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    gap: 13px;
    box-sizing: border-box;
    background: var(--org-modal-inputfield-bg-color) !important;
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    border-radius: 4px;
}

#UsercompanyPortal,
#companyPortal {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-modal-inputfield-text-color) !important;
    outline: none;
    background: transparent !important;
    border: none;
}

.user-msp-company-edit-input,
.msp-company-edit-input {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    /* Default border */
    border-radius: 4px;
    background: var(--org-modal-inputfield-bg-color) !important;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 13px;
    transition: border-color 0.3s ease;
    /* Smooth transition for border color */
}

.user-msp-company-edit-input,
.msp-company-edit-input:focus-within {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    /* Highlight outer border when input is focused */
}

.msp-company-portal-input,
.user-msp-company-portal-input {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    /* Default border */
    border-radius: 4px;
    background: var(--org-modal-inputfield-bg-color) !important;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 13px;
    transition: border-color 0.3s ease;
    /* Smooth transition for border color */
}

.msp-company-portal-input:focus-within {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    /* Highlight outer border when input is focused */
}

.user-msp-company-portal-input:focus-within {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    /* Highlight outer border when input is focused */
}


.user-msp-company-edit-input,
.msp-company-edit-input input:focus {
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    outline: none;
}

#companyPortal::placeholder,
#UsercompanyPortal::placeholder {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-modal-inputfield-text-color) !important;
    background: transparent;
    outline: none;
    border: none;
}

.user-msp-company-portal-subtext,
.msp-company-portal-subtext {
    width: 118px;
    height: 18px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-home-title-text-color);
    position: relative;
    top: 5px;
    right: 13px;
}

#companyPortal:focus #UsercompanyPortal:focus {
    outline: none;
    border: none;
}

.msp-company-upload-container {
    width: 376px;
    height: 226px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
    position: relative;

}

.msp-company-logo-upload-process {
    width: 376px;
    height: 196px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

.msp-company-upload-content {
    width: 376px;
    height: 180px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 11.67px;
    isolation: isolate;

}

.msp-company-upload {
    width: 376px;
    height: 180px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 17.5px 11.6667px;
    gap: 5.83px;
    box-sizing: border-box;
    background-color: var(--org-modal-template-drop-bg-color) !important;
    border: 2px dashed var(--org-modal-template-drop-border) !important;
    border-radius: 5.83333px;
}

.msp-company-img-validate {
    width: 360px;
    height: 147px;
}

.msp-validate-cancel-text {
    width: 100%;
    height: 12px;
    position: relative;
    top: 51px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-modal-success-text-color);
}

.msp-validate-text {
    width: 219px;
    height: 12px;
    position: relative;
    left: 0px;
    top: 28px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-modal-bar-succes-color);
    white-space: nowrap;
}

.percent-upload {
    position: absolute;
    width: 34px;
    height: 12px;
    left: 286.34px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-modal-bar-succes-color);


}

.msp-logo-text-content {
    width: 278px;
    height: 41px;
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.015em;
    color: var(--org-modal-inputfield-text-color);


}

.msp-progress-container {
    width: 314px;
    height: 9px;
    background-color: var(--org-modal-progressbar-bg-color);
    overflow: hidden;
    position: relative;
    top: 42px;
}

.msp-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--org-modal-progressbar-background-color);
    border-radius: 4.5px;
    transition: width 0.3s ease;
    border-radius: 0;
}

.file-upload-message {
    width: 376px;
    height: 19px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
    position: relative;
    top: 12px;
    right: 10px;

}

.file-upload-message p {
    width: 350.17px;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: var(--org-modal-success-text-color);

}

.file-upload-message img {
    position: relative;
    top: 2px;
}

.msp-upload-content {
    width: 376px;
    height: 203px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

}

.success-percent-upload {
    position: absolute;
    width: 41px;
    height: 12px;
    left: 286.34px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-modal-bar-succes-color);
}

.msp-successful-text {
    position: relative;
    width: 219px;
    height: 12px;
    top: 38px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-modal-bar-succes-color);
    white-space: nowrap;
}

input#companyName:-webkit-autofill,
input#companyName:-webkit-autofill:hover,
input#companyNamet:-webkit-autofill:focus,
input#companyName:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

input#usercompanyName:-webkit-autofill,
input#usercompanyName:-webkit-autofill:hover,
input#usercompanyNamet:-webkit-autofill:focus,
input#usercompanyName:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

input#companyPortal:-webkit-autofill,
input#companyPortal:-webkit-autofill:hover,
input#companyPortal:-webkit-autofill:focus,
input#companyPortal:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

input#UsercompanyPortal:-webkit-autofill,
input#UsercompanyPortal:-webkit-autofill:hover,
input#UsercompanyPortal:-webkit-autofill:focus,
input#UsercompanyPortal:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

.msp-expand-browser-permission {
    display: none;
    width: 100%;
    margin-top: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.permissions-group-item.expanded {
    width: 1250px;
    min-height: 234px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 4px;
}

.msp-session-expand {
    display: none;
    width: 100%;
    margin-top: 16px;
}

.sessions-settings-group-item.expanded {
    min-height: 171px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 4px;
    margin-bottom: 15px;

}

.msp-session-inner-content {
    width: 1136px;
    height: 79px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 32px;
    gap: 8px;
}

.msp-hour-title {
    width: 1104px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

.msp-hour-title label {
    width: 133px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #323233;
}

.msp-session-button {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
}

.msp-custom-flex-container {
    width: 136px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
}


.msp-number-container {
    width: 56px;
    height: 40px;
    position: relative;
    background-color: var(--number-container-background-color);
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    overflow: hidden;
    word-break: break-word;
    text-align: center;

}

.msp-session-number {
    position: absolute;
    top: var(--license-number-top);
    left: 2px;
    width: var(--license-number-width);
    height: var(--license-number-height);
    font-family: var(--license-number-font-family);
    font-weight: var(--license-number-font-weight);
    font-size: var(--license-number-font-size);
    line-height: var(--license-number-line-height);
    letter-spacing: var(--license-number-letter-spacing);
    color: var(--license-number-color);
    outline: none;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: nowrap;
    outline-color: #f6fff8;

}

.msp-session-number:focus {
    outline: none;

}

.session-minus-btn-container,
.session-minus-btn-container:hover {
    width: var(--minus-btn-container-width);
    height: var(--minus-btn-container-height);
    /* border-top-right-radius: var(--minus-btn-container-border-top-right-radius); */
    /* border-bottom-right-radius: var(--minus-btn-container-border-bottom-right-radius); */
    border-top-left-radius: var(--minus-btn-container-border-top-left-radius);
    border-bottom-left-radius: var(--minus-btn-container-border-bottom-left-radius);
    background-color: var(--minus-btn-container-background-color);
    opacity: var(--minus-btn-container-opacity);
    color: var(--minus-btn-container-color);
}

.session-minus-btn-container.disabled,
.session-minus-btn-container.disabled:hover {
    opacity: 50%;
    cursor: not-allowed;
}

.session-add-btn-container,
.session-add-btn-container:hover {
    width: var(--add-btn-container-width);
    height: var(--add-btn-container-height);
    border-top-right-radius: var(--add-btn-container-border-top-right-radius);
    border-bottom-right-radius: var(--add-btn-container-border-bottom-right-radius);
    background-color: var(--add-btn-container-background-color);
    color: var(--add-btn-container-color);
}

.session-minus-input,
.session-add-input {
    width: var(--minus-input-width);
    height: var(--minus-input-height);
    position: relative;
    top: var(--minus-input-top);
    left: var(--minus-input-left);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: inherit;
}

.session-minus-btn i,
.session-add-btn i {
    position: relative;
    background: none;
    border: none;
    color: var(--minus-btn-i-color);
    padding: 0;
    width: var(--minus-btn-i-width);
    height: var(--minus-btn-i-height);
    top: var(--minus-btn-i-top);
    left: var(--minus-btn-i-left);
    right: 5px;
    bottom: 11px;
}

.msp-session-button {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.msp-session-btn-container {
    width: 249px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.msp-session-notification {
    width: 549px;
    height: 48px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 8px;
    position: absolute;
    left: calc(50% - 514px / 2);
    top: 50px;
    background: #C6EEC6;
    border: 1px solid #216767;
    box-shadow: 0px 6px 10px rgba(84, 113, 211, 0.14), 0px 1px 18px rgba(84, 113, 211, 0.12);
    border-radius: 4px;

}

.msp-success-text-notify {
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    border-radius: 2px;
    position: relative;
    bottom: 3px;
}

.msp-permission-card-content {
    width: 1136px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.msp-permission-inner-content {
    width: 538px;
    height: 126px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;

}

.msp-title-select-permission {
    width: 345px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 0px 0px 32px;
    gap: 16px;
}

.msp-title-select-text,
.update-heolocation-text {
    width: 313px;
    height: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    color: #323233;

}

.geolocation-btn-check-container {
    width: 538px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
}

.update-select-input {
    position: relative;
    width: 376px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #d2e0d5;
    background: #f6fff8;
    opacity: 100%;
    outline: none;
    appearance: none;
    /* Removes default arrow (most browsers) */
    -webkit-appearance: none;
    /* Safari/Chrome */
    -moz-appearance: none;
}

#updateSelectCountry {
    position: relative;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    letter-spacing: 0%;
    color: #216767 !important;
    margin: 0 auto;
}

.geolocation-check-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.update-save-text {
    height: 40px !important;
    width: 116px !important;
    padding-left: 40px;
    box-sizing: border-box;
    border: 1px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s;
    /* smooth fade */
}

.update-save-text.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}


.update-cancel-text {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    font-family: "Mulish", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #216767 !important;
}

.permission-btn-check-container {
    width: 538px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
}

.permission-check-content {
    width: 538px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 0px 32px;
    gap: 40px;
}

.permission-checkbox-container {
    width: 113px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
}

.permission-checkbox-container p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #323233;
}

.permission-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.permission-checkbox-input {
    position: relative;
    left: calc(50% - 18px/2);
    top: 12.5%;
    bottom: 12.5%;
    width: 18px;
    height: 18px;
    right: 28px;
    background: #34B1B1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.permission-checkbox-input::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0px;
    top: 0px;
    background: #34B1B1;
    border-radius: 3px;
    cursor: pointer;
    border-radius: 3px;
}

.permission-checkbox-input:checked::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #34b1b1;
    background-image: url("/assets/img/Vector.png");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.permission-checkox-container p {
    width: 85px;
    height: 22px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #323233;
}

.permission-btn-container {
    width: 281px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 0px 32px;
    gap: 16px;
}

.msp-session-card-content {
    width: 524px;
}

/* MSP SETTINGS UI END */


/* MSP DASHBOARD UI START */
.msp-main-container {
    position: absolute;
    top: 64px;
    left: 88px;
}

.msp-home-title-container {
    width: 290px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.msp-home-title h1 {
    width: 67px;
    height: 38px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    color: var(--org-home-title-text-color);
    margin: 0 !important;
    padding: 0 !important;

}

.msp-home-subtitle p {
    width: 374px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-home-content {
    position: absolute;
    top: 96px;
}

.msp-card-primary,
.msp-card-second,
.msp-card-third {
    width: 372px;
    height: 182px;
    background: #ffffff;
}

.msp-card-primary {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.msp-card-second {
    position: absolute;
    left: 397px;
    border: none;
}

.msp-card-third {
    position: absolute;
    left: 794px;
    border: none;
}

.msp-second-row {
    position: absolute;
    top: 209px;
}

.msp-license-req-card {
    width: 770px;
    height: 443px;
    background: #FFFFFF;
    border-radius: 4px;
    border: none;
}

.license-req-title {
    width: 283px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 12px;
    top: 12px;
}

.license-req-title h2 {
    width: 251px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 38px;
    color: #28396A;
    position: relative;
    bottom: 4px;
}

.msp-newReq-table {
    position: absolute;
    top: 72px;
    left: 12px;
    display: flex;
    flex-direction: column;
}

.msp-license-header {
    display: flex;
    flex-direction: row;
}

.msp-header1 {
    width: 199px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    background: #FFFFFF;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;

}


.msp-header1 p {
    width: 89px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-header2 {
    width: 175px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;

}

.msp-header2 p {
    width: 91px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-header2 i {
    color: #4D6ABF;
    font-size: 20px;
}

.msp-header3 {
    width: 156px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.msp-header3 p {
    width: 113px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-header4 {
    width: 156px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
}

.msp-header4 p {
    width: 113px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-license-row1,
.msp-license-row2,
.msp-license-row3,
.msp-license-row4 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.msp-license-row2-data1,
.msp-license-row4-data1 {

    width: 199px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    background: #F4F4F4;
    border-bottom: 1px solid #EFF0F1;

}

.msp-license-row2-data1 p {
    width: 175px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-license-row2-data2,
.msp-license-row4-data2 {
    width: 175px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    box-sizing: border-box;
    background: #F4F4F4;
    border-bottom: 1px solid #EFF0F1;

}

.msp-license-row2-data2 p {
    width: 91px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 5px;
}

.msp-license-row2data3-container,
.msp-license-row4data3-container {
    width: 358px;
    height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    background: #F4F4F4;
    border-bottom: 1px solid #EFF0F1;

}


.msp-license-data1,
.msp-license-row3-data1 {
    width: 202px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;

}

.msp-license-data1 p {
    width: 178px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-license-data2,
.msp-license-row3-data2 {
    width: 175px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;

}

.msp-license-data2 p {
    width: 91px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-license-data3-container {

    width: 358px;
    height: 64px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;

}

.msp-admin-text1,
.msp-admin-text2,
.msp-admin-text3,
.msp-admin-text4 {
    width: 113px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-admin-text4,
.msp-admin-text2 {
    position: relative;
    left: 3px;
}

.msp-action-data-content1,
.msp-action-data-content2,
.msp-action-data-content3,
.msp-action-data-content4 {
    width: 182px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 32px;
}

.msp-action-data-content1 p,
.msp-action-data-content2 p,
.msp-action-data-content3 p,
.msp-action-data-content4 p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.msp-action-data-content2 p,
.msp-action-data-content4 p {
    position: relative;
    left: 3px;
}

.msp-action-card {
    position: absolute;
    left: 794px;
    bottom: -2px;
    width: 373px;
    height: 444px;
    border: none;
}

.activeOrgs-title {
    width: 284px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: relative;
    left: 16px;
    top: 16px;
}

.activeOrgs-title {
    position: absolute;
    left: 16px;
    top: 16px
}

.activeOrgs-title h2 {
    width: 252px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 38px;
    color: #28396A;
    position: relative;
    bottom: 5px;
}

.activeOrgs-card p {

    width: 60px;
    height: 23px;
    position: absolute;
    left: 146px;
    top: 80px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396A;
    white-space: nowrap;
    border-top: none;
}

.pending-invite-org {
    width: 219px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 16px;

}

.pending-invite-org h2 {
    width: 187px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 38px;
    color: #28396A;
    position: relative;
    bottom: 5px;
}

.pending-org-card p {
    width: 57px;
    height: 23px;
    position: absolute;
    left: 148px;
    top: 80px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396A;
    white-space: nowrap;
}

.msp-resend-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 145px;
}

.msp-license-title {
    width: 117px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 16px;
}

.msp-license-title h2 {
    width: 85px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 38px;
    color: #28396A;
    position: relative;
    bottom: 5px;
}

.msp-license-btn-container {
    width: 136px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;
    position: absolute;
    left: 225px;
    top: 130px;
    background: #216767;
    box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;

}

.msp-license-btn,
.msp-license-btn:hover,
.msp-license-btn:focus {
    width: 107px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF !important;
    border: none;
    outline: none;
    background: transparent;
    white-space: nowrap;
    position: relative;
    right: 10px;
}

.msp-license-btn:active {
    color: #FFFFFF;
}

.msp-license-chart {
    position: absolute;
    left: 12.87%;
    right: 64.61%;
    top: 47.25%;
    bottom: 6.59%;
    width: 84px;
    height: 84px;
}

.msp-used-box {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 48px;
    top: 55px;
    background: #216767;
    border-radius: 4px;
}

.msp-used-text {
    width: 74px;
    height: 12px;
    position: absolute;
    left: 72px;
    top: 45px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 38px;
    color: #000000;
}

.msp-available-box {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 170px;
    top: 55px;
    background: #28396A;
    border-radius: 4px;
}

.msp-available-text {
    position: absolute;
    left: 51.21%;
    right: 20.91%;
    top: 45px;
    bottom: 62.09%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 38px;
    color: #000000;
}

.msp-license-row3-data1 p {
    width: 175px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
}

.msp-license-row3-data2 p {
    width: 91px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;
}

.msp-license-row4-data1 p {
    width: 175px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
}

.msp-license-row4-data2 p {
    width: 91px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #28396A;
    position: relative;
    left: 5px;
}

.msp-view-text {
    position: absolute;
    left: 3%;
    top: 91.4%;
    bottom: 7.17%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #90B3B3;
    white-space: nowrap;
    cursor: pointer;
}

.msp-action-card-title {
    width: 164px;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;
    position: absolute;
    left: 16px;
    top: 17px;
}

.msp-action-card-title h2 {
    width: 133px;
    height: 15px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 38px;
    color: #28396A;
    padding-bottom: 22px;
}

.msp-add-users-text {
    position: absolute;
    width: 95px;
    height: 12px;
    left: 16px;
    top: 89px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    cursor: pointer;
    text-decoration: none;
}

.msp-add-users-content {
    width: 329px;
    height: 17px;
    position: absolute;
    left: 16px;
    top: 105px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-top: 6px;

}

.msp-enable-users-text {
    position: absolute;
    width: 117px;
    height: 12px;
    left: 16px;
    top: 154px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    text-decoration: none;
    white-space: nowrap;
}

.msp-enable-users-content {
    position: absolute;
    width: 240px;
    height: 17px;
    left: 18px;
    top: 174px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-top: 3px;
}

.msp-disable-users-text {
    position: absolute;
    width: 120px;
    height: 12px;
    left: 16px;
    top: 227px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    text-decoration: none;
    white-space: nowrap;

}

.msp-disable-users-content {
    width: 237px;
    height: 17px;
    position: absolute;
    left: 16px;
    top: 243px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-top: 6px;
}

.msp-delete-users-text {
    position: absolute;
    width: 120px;
    height: 12px;
    left: 16px;
    top: 298px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 28px;
    color: #216767;
    text-decoration: none;
    white-space: nowrap;
}

.msp-delete-users-content {
    position: absolute;
    width: 220px;
    height: 17px;
    left: 16px;
    top: 312px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #000000;
    margin-top: 6px;

}

/* MSP DASHBOARD UI END */
/* Custom modal dialog */
.custom-delete-dialog {
    max-width: 500px;
    width: 100%;
}

/* Custom modal content */
.custom-delete-content {
    width: 456px;
    height: 196px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    /* vertical gap */
    padding: 24px;
    opacity: 1;
    border-radius: 4px;
    background-color: #FFFFFF;
}

/* Custom header */
.custom-delete-header {
    background-color: #ffecec;
    border-bottom: 1px solid #ffcccc;
}

/* Custom body */
.custom-delete-body {
    font-size: 16px;
    color: #333;
    padding: 20px;
}

/* Custom footer */
.custom-delete-footer {
    background-color: #ffecec;
    border-top: 1px solid #ffcccc;
    justify-content: space-between;
}

.Delete-model-mspbody {
    width: 408px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    /* vertical gap */
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
}

.Delete-model-mspbody-frame1 {
    width: 408px;
    height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* vertical gap */
    padding: 0px;
    opacity: 1;
    border-radius: 0px;

}

.Delete-model-mspbody-frame2 {
    width: 408px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 auto;
    justify-content: space-between;
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
}

.Delete-model-mspbody-frame3 {
    width: 340px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    opacity: 1;
    border-radius: 0px;
}

.msp-delete-model-cls {
    width: 13.5px;
    height: 13.5px;
    color: #28396A;
}

.Delete-model-mspbody-frame4 {
    width: 376px;
    height: 34px;
    font-family: 'Inter', sans-serif;
    /* Make sure Inter font is loaded */
    font-weight: 500;
    /* Medium weight (Inter typically uses 400, 500, 600, etc.) */
    font-size: 16px;
    /* Font size 16px */
    line-height: 140%;
    /* Line height 140% (22.4px relative to 16px) */
    letter-spacing: 0;
    /* No additional letter spacing */
    text-align: left;
    opacity: 1;
    border-radius: 0px;
    color: #323233;
}

.Bottom-frame-msp-delete {
    width: 408px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    opacity: 1;
    border-radius: 0px;
}

.Bottom-frame1-msp-delete {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    opacity: 1;
    border-radius: 0px;

}

.Bottom-frame2-msp-delete {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* gap: 16px; */
    opacity: 1;
    border-radius: 0px;

}

.btn custom-ok-button {
    width: 117px;
    height: 40px;
    display: flex;
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center */
    gap: 0 13.37px;
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
    color: #216767
}

/* Unique Button Styling */
.btn-delete-inactive-user {
    background-color: #6c757d;
    color: #fff;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-delete-inactive-user:hover {
    background-color: #5a6268;
}

/* Editable Modal Dimensions */
.custom-modal-size {
    max-width: 500px;
    /* You can change this width */
    height: auto;
    /* Change to fixed height if needed */
}

.delete-inactive-modal-content {
    width: 456px;
    height: 308px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    /* vertical gap */
    padding: 24px;
    opacity: 1;
    border-radius: 4px;
    background-color: #FFFFFF;
}

/* Optional: Modal Buttons */
.cancel-delete-btn {
    background-color: #adb5bd;
    color: #fff;
    font-weight: 500;
}

.confirm-delete-btn {
    background-color: #dc3545;
    color: #fff;
    font-weight: 500;
}

.delete-inactive-modal-frame1 {
    width: 408px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    /* vertical gap */
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
}

.delete-inactive-modal-frame2 {
    width: 408px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* vertical gap */
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
}

.inactive-delete-frame {
    width: 408px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 auto;
    justify-content: space-between;
    padding: 0px;
    opacity: 1;
    border-radius: 0px;
}

.inactive-delete-title {
    width: 240px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    opacity: 1;
    border-radius: 0px;
}

.inactive-delete-sub-title {
    width: 376px;
    height: 56px;
    font-family: 'Inter', sans-serif;
    /* Make sure Inter font is loaded */
    font-weight: 500;
    /* Medium weight (Inter typically uses 400, 500, 600, etc.) */
    font-size: 16px;
    /* Font size 16px */
    line-height: 140%;
    /* Line height 140% (22.4px relative to 16px) */
    letter-spacing: 0;
    /* No additional letter spacing */
    text-align: left;
    opacity: 1;
    border-radius: 0px;
    color: #323233;
}

.Inactive-bottom-frame {
    width: 408px;
    height: 128px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    padding: 0;
    opacity: 1;
    border-radius: 0px;
}

.Inactive-bottom-frame1 {
    width: 408px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    padding: 0;
    opacity: 1;
    border-radius: 0px;

}

.Inactive-bottom-frame2 {
    width: 273px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    opacity: 1;
    border-radius: 0px;

}

.Inactive-bottom-frame-input {
    width: 273px;
    height: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 0;
    opacity: 1;
    border-radius: 0px;

}

.Inactive-bottom-frame1-input {
    width: 273px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* Regular weight */
    font-size: 16px;
    line-height: 100%;
    /* Equal to font size (16px) */
    letter-spacing: 0;
    text-align: left;
    color: #28396A;
    opacity: 1;
    border-radius: 0px;

}

.Inactive-delete-frame {
    width: 273px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    /* aligns content to the right */
    align-items: center;
    /* vertical alignment */
    gap: 10px;
    /* space between child elements */

    /* Padding */
    padding: 4px 8px;
    /* vertical: 4px, horizontal: 8px */

    /* Color */
    background-color: #F6FFF8;
    /* background color */
    color: #F6FFF8;
    /* text color (same as background - adjust if needed) */

    /* Stroke (Border) */
    border: 1px solid #D2E0D5;
    /* stroke */
    border-radius: 0;
    /* sharp corners - adjust if needed */
    outline: none;
    box-shadow: none;


    /* If you need space between this element and others */
    margin-left: auto;
}

.my-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    color: #000;
    /* make sure this is readable */
    font-size: 14px;
}

.disabled-info-text {
    font-size: 14px;
    color: #333;
    margin: 0;
    padding-left: 24px;
    /* simulate space where radio would have been */
    position: relative;
}

.disabled-info-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 2px solid #36B4A6;
    /* teal color like in image */
    border-radius: 50%;
}

.Orgtable-row {
    width: 1168px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #EFF0F1;
}

.Orgtable-row:nth-child(odd) {
    background: #F4F4F4;
}

.Orgtable-row:nth-child(even) {
    background: #FFFFFF;
}

.Orgtable-row:hover {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15.493px 0px;
    isolation: isolate;
    width: 1168px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 1px;
}

.Orgs-header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 1168px;
    height: 64px;
    background: #FFFFFF;
}

.Orgtable-row:hover .Orgsstatus {
    display: none;
}

.Orgtable-row:hover .status-buttons {
    display: flex;
    gap: 24px;
    position: relative;
    right: 38px;

}

.status-buttons {
    display: none;
    position: relative;
    z-index: var(--action-buttons-z-index);

}

.Orgtable-row.active-row .status-buttons {
    display: flex !important;

}

.Orgsbtn {
    border: none;
    background: #FFFFFF;
}

/* ORGS TABLE HOVER END */

/* MSP COMPANY BRANDING  */
.msp-validate-content {
    width: 376px;
    height: 226px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;
}

.msp-success-content {
    width: 376px;
    height: 249px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

}

.msp-company-success-process {
    width: 376px;
    height: 219px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

#addUserOffcanvas::-webkit-scrollbar,
#addUserOffcanvasmsp::-webkit-scrollbar {
    display: none;
}

#addUserOffcanvas,
#addUserOffcanvasmsp {
    max-height: 100vh;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}



.add-user-csv-footer {
    position: absolute !important;
    bottom: 0 !important;
    width: 424px !important;
    height: 64px !important;
    background: #FFFFFF !important;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12) !important;
    top: 800px !important;
}

.button-text-csv {
    color: #FFFFFF !important;
}

.org-empty-heading {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0.5px;
    /* adjust as needed */
    color: #28396A;
    margin-bottom: 12px;
}


/* MSP BROWSER GEOLOCATION SETTINGS BUG FIX */
.browser-select-dropdown.msp-browser-select-dropdown {
    position: relative;
    width: 376px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 8px;
    border: 1px solid #d2e0d5;
    background: #f6fff8;
    opacity: 100%;
}

/* MSP BROWSER GEOLOCATION SETTINGS BUG FIX */


/* MSP ORGS TABLE PAGINATION */
#orgRowsPerPageSelect {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #28396A;
    appearance: none;
    position: relative;
    right: 6px;
    top: 2px;
    cursor: pointer;
    padding-right: 30px;
    background-image: var(--org-card-dropdown-icon);
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 24px 24px;
}

#orgRowsPerPageSelect:focus {
    box-shadow: none;
    cursor: pointer;

}

/* .error-message {
    height: auto;
    display: flex;
    align-items: center;
} */

/* MSP BROWSER GEO BUG FIX  */
.geolocation-container.msp-geo {
    width: 134px;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.Orgsheader-cell3 {
    position: relative;
}

#licenseFilterDropdown,
#cpuFilterDropdown,
#systemCpuFilterDropdown {
    width: 173px;
    height: 104px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    position: absolute;
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    cursor: pointer;
    position: relative;
    top: 50px;
    /* right: 20px; */
    z-index: 1000;
}


.filter-option,
.mssp-filter-option {
    width: 173px;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    background: var(--filtersort-bg-color);
    white-space: nowrap;
    cursor: pointer;
}

.filter-option:hover,
.mssp-filter-option:hover {
    background: var(--filtersort-hover-bg-color);
}

.filter-option span,
.mssp-filter-option span {
    width: 111px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-text-color);
}


.filter-option:hover span,
.mssp-filter-option span {
    width: 116px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-hover-text-color);
}

.checkmark img {
    visibility: hidden;
    width: 12px;
    height: 12px;
}

.Orgsheader-cell6 {
    position: relative;
}

#statusFilterDropdown {
    width: 140px;
    height: 136px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    position: absolute;
    top: 46px;
    right: 12px;
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    cursor: pointer;
    z-index: 1000;
}

.orgs-status-option,
.mssp-status-option {
    width: 140px;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    background: var(--filtersort-bg-color);

}

.orgs-status-option:hover,
.mssp-status-option:hover {
    background: var(--filtersort-hover-bg-color);
    color: var(--filtersort-hover-text-color);
}

.orgs-status-option span,
.mssp-status-option span {
    width: 47px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-text-color);
}

.orgs-status-option:hover span,
.mssp-status-option:hover span {
    width: 20px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-hover-text-color);
}

.checkmark {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.checkmark img {
    width: 100%;
    height: 100%;
}

.orgs-status-option,
.mssp-status-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
}


.orgs-status-option .sort-tick,
.mssp-status-option .sort-tick {
    display: flex;
    align-items: flex-end;
    position: absolute;
    left: 115px;
}

.geolocation-filter-content,
.mssp-geolocation-filter-content {
    width: 193px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 16px;
    background: var(--filtersort-bg-color);
}

.geolocation-filter-text,
.mssp-geolocation-filter-text {
    width: 103px;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: var(--org-home-title-text-color) !important;
}

#geolocationList label,
#msspGeolocationList label {
    width: 71px;
    height: 19px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #000000;
}

.filter-option .sort-tick,
.mssp-filter-option .sort-tick {
    display: flex;
    align-items: flex-end;
    position: absolute;
    left: 150px;
}

/* MSP ORGS SEARCH START */
#orgsFrameBar.showing {
    width: 406px;
    height: 16px;
    position: absolute;
    bottom: 965px;
    opacity: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #28396A;
    line-height: 100%;
    letter-spacing: 0;
}

.search-container.orgs .search-input {
    width: 300px;
    height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12.5px 12px;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--org-listing-sort-text-color);
    background-color: var(--org-listing-sort-bg-color) !important;
}

.search-container.orgs .search-input::placeholder {
    color: var(--org-listing-sort-placeholder-color) !important;
    opacity: 1;
}


/* TOOLTIP FOR HOVER ICONS ORGS */
.tooltip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px;
    gap: 10px;
    z-index: 1;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    white-space: nowrap;
    background-color: #4D6ABF;
    color: #FFFFFF;
    text-align: center;
    visibility: hidden;
    border-radius: 4px;
}

.Orgsbtn:hover .tooltip {
    visibility: visible;
    opacity: 1;
    overflow-x: hidden;
}

.tooltip.edit {
    width: 84px;
    height: 32px;
    position: absolute;
    top: 48px;
    left: 60px;

}

.tooltip.delete {
    width: 103px;
    height: 32px;
    position: absolute;
    top: 48px;
    left: 140px;
}

.tooltip.action {
    width: 119px;
    height: 32px;
    position: absolute;
    top: 48px;
    left: 150px;
}

.filter-status-bar {
    position: absolute;
    width: 439px;
    height: 16px;
    left: 88px;
    top: 227px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #28396A;
}


.filter-status-bar span:not(:last-child)::after {
    /* content: "•"; */
    margin-left: 5px;
    color: #6c757d;
}

.filter-status-bar span:last-child::after {
    content: "";
}

#rowCountText {
    padding-left: 4px;
}

.dropdown-item .msp-dropdown {
    color: var(--org-listing-sort-dropdown-text-color) !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* SUSPEND USER CONTAINER */
.suspend-user-container {
    position: fixed;
    /* Stays in view */
    width: 100%;
    height: 36px;
    left: 0;
    top: 0;
    display: none;
    /* Hidden by default */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 10px 24px;
    gap: 10px;
    background: #be5050;
    z-index: 1040;
    /* Higher than topbar's z-index (1030) */
}

.suspend-user-container.show {
    display: flex;
    /* Show container when .show is applied */
}

.suspend-user-alert {
    width: 329px;
    height: 17.22px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.suspend-user-alert i {
    color: white;
}

.suspend-user-link {
    width: 230px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.suspend-user-link p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 38px;
    display: flex;
    align-items: flex-end;
    color: white;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.suspend-user-text {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: flex-end;
    color: white;
    white-space:nowrap;
}

/* REQUEST LICENSE CONTAINER */
.req-license-container {
    position: fixed;
    /* Stays in view */
    width: 100%;
    height: 36px;
    left: 0;
    top: 0;
    display: none;
    /* Hidden by default */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 10px 24px;
    gap: 10px;
    background: #F4E96E;
    z-index: 1040;
    /* Higher than topbar's z-index (1030) */
}

.req-license-container.show {
    display: flex;
    /* Show container when .show is applied */
}

.req-license-alert {
    width: 329px;
    height: 17.22px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.req-license-alert i {
    color: #BE5050;
}

.req-license-link {
    width: 230px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.req-license-link p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 38px;
    display: flex;
    align-items: flex-end;
    color: #BE5050;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.req-license-text {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: flex-end;
    color: #BE5050;
}

.req-license-exhausted {
    position: fixed;
    /* Changed to fixed to match req-license-container */
    width: 100%;
    /* Full viewport width */
    height: 36px;
    left: 0;
    top: 0;
    display: none;
    /* Hidden by default */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 10px 24px;
    gap: 10px;
    background: #BE5050;
    z-index: 1040;
    /* Higher than topbar's z-index (1030) */
}

.req-license-exhausted.show {
    display: flex;
    /* Show container when .show is applied */
}

.req-exhaust-alert {
    width: 430px;
    height: 17.22px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
}

.req-exhaust-alert i {
    color: #FFFFFF;
}

.req-exhaust-text {
    width: 406px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: flex-end;
    color: #FFFFFF;
}

.req-exhaust-link {
    width: 127px;
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 24px;
}

.req-exhaust-link p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 38px;
    display: flex;
    align-items: flex-end;
    color: #FFFFFF;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    white-space: nowrap;
}

#reqLicenseModal .modal-content {
    width: 456px;
    height: 287px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 64px;
    background: var(--modal-background-color);
    border-radius: 4px;
    backdrop-filter: blur(16px);
}

#reqLicenseModal .modal-inner-content {
    width: 408px;
    height: 135px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
}

#reqLicenseModal .modal-header {
    width: 408px;
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

#reqLicenseModal .modal-titleClose {
    width: 408px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;
}

#reqLicenseModal .modal-titleClose h5 {
    width: 282px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--org-home-title-text-color) !important;
}

#reqLicenseModal .close-btn-modal {
    width: 126px;
    height: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    gap: 10px;
}

#reqLicenseModal .delete-close-btn {
    width: 13.15px;
    height: 13.15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    color: var(--org-home-title-text-color) !important;
}

#reqLicenseModal .modal-header p {
    width: 363px;
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    display: flex;
    align-items: center;
    color: var(--org-card-subvalue-text-color);
    margin: 0 !important;
    padding: 0 !important;
}

#reqLicenseModal .modal-body {
    width: 408px;
    height: 71px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

#reqLicenseModal .modal-body .license-max-text {
    width: 408px;
    height: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;
}

#reqLicenseModal .modal-body .license-max-text p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: var(--org-card-subvalue-text-color);
    margin: 0 !important;
    padding: 0 !important;
}

#reqLicenseModal .modal-footer {
    width: 274px;
    height: 40px;
    position: relative;
    top: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
}

.request-text {
    width: 67px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23.4px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 5%;
    color: #FFFFFF;
    padding-bottom: 10px;
}

#reqLicenseModal .license-value-alert {
    width: 416px;
    height: 19px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
}

.license-value-alert i {
    width: 24px;
    height: 17.22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4.41px;
    gap: 4.41px;
    color: #BE5050;
}

.license-value-alert p {
    width: 267px;
    height: 19px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    color: #BE5050;
    margin: 0 !important;
}

#reqLicenseModal .modal-body-container {
    width: 416px;
    height: 98px;
    position: relative;
    left: -8px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0px;
    gap: 8px;
}

#reqLicense {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    gap: 8px;
    position: absolute;
    width: 514px;
    height: 48px;
    left: calc(50% - 514px / 2);
    top: 80px;
    background: #c6eec6;
    border: 1px solid #216767;
    border-radius: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #216767;
    white-space: nowrap;
    z-index: 9999;
}


#OrgsresetUserModal .modal-content,
#activateOrgsModal .modal-content,
#OrgsResendInviteModal .modal-content {
    width: var(--modal-width);
    height: var(--modal-height-msp);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--modal-padding) !important;
    gap: var(--modal-gap);
    position: absolute;
    background: var(--modal-bg);
    border-radius: var(--modal-radius);
}

#OrgsresetUserModal .modal-header,
#activateOrgsModal .modal-header,
#OrgsResendInviteModal .modal-header {
    width: var(--modal-header-width);
    height: var(--modal-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--modal-header-gap);

}

#OrgsresetUserModal .modal-inner-header,
#activateOrgsModal .modal-inner-header,
#OrgsResendInviteModal .modal-inner-header {
    width: var(--modal-inner-header-width);
    height: var(--modal-inner-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--modal-inner-header-gap);
}

#OrgsresetUserModal .modal-title,
#activateOrgsModal .modal-title,
#OrgsResendInviteModal .modal-title {
    width: var(--modal-title-width);
    height: var(--modal-title-height);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: var(--modal-title-gap);

}

#OrgsresetUserModal .modal-title h5,
#OrgsResendInviteModal .modal-title h5 {
    width: var(--reset-title-width);
    height: var(--reset-title-height-height);
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--reset-title-font-weight);
    font-size: var(--reset-title-font-size);
    line-height: var(--reset-title-line-height);
    color: var(--primary-blue);

}

.modal-reset-orgs {
    width: var(--reset-orgs-width);
    height: var(--reset-orgs-height-height);
    font-family: var(--font-family-inter);
    font-style: normal;
    font-size: var(--reset-orgs-font-size);
    line-height: var(--reset-orgs-line-height);
    display: flex;
    flex-direction: row;
    align-items: center;

}

.modal-reset-orgs p {
    font-weight: var(--reset-orgs-p-font-weight);
    margin: 0 !important;
    padding: 0 !important;
}

#OrgsResetSelected,
#selectedOrgsCount {
    font-weight: var(--reset-title-font-weight);
    color: var(--selected-orgs-color);

}

#activateOrgsSelected,
#OrgsResendInviteSelected,
#suspendOrgsCount,
#modalBulkDeleteCount {
    font-weight: var(--reset-title-font-weight);
    color: var(--activate-resend-orgs-color);
}

#OrgsresetUserModal .modal-footer {
    width: var(--reset-footer-width);
    height: var(--reset-footer-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--reset-footer-gap);
}

#activateOrgsModal .modal-title h5 {
    width: var(--activate-title-width);
    height: var(--activate-title-height);
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--activate-title-font-weight);
    font-size: var(--activate-title-font-size);
    line-height: var(--activate-title-line-height);
    color: var(--activate-title-color);


}

#activateOrgsModal .modal-footer,
#OrgsResendInviteModal .modal-footer {
    width: var(--activate-resend-footer-width);
    height: var(--activate-resend-footer-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--activate-resend-footer-gap);
}

.msp-org-activate-outline {
    width: var(--activate-outline-width);
    height: var(--activate-outline-height);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--activate-outline-padding);
    gap: var(--activate-outline-gap);
    background: var(--activate-outline-bg);
    box-shadow: var(--activate-outline-shadow);
    border-radius: var(--activate-outline-radius);
}

.msp-org-btn-container {
    width: var(--btn-container-width);
    height: var(--btn-container-height);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--btn-container-gap);

}

.msp-org-resend-btn {
    width: var(--resend-btn-width);
    height: var(--resend-btn-height);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--resend-btn-gap);
}

#suspendOrgsModal .modal-content,
#modalBulkDelete .modal-content {
    position: relative;
    max-width: var(--modal-max-width);
    height: var(--modal-height);
    border-radius: var(--modal-radius);
    padding: var(--modal-padding) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--modal-gap);
}

#suspendOrgsModal .modal-header-container,
#modalBulkDelete .modal-header-container {
    width: var(--delete-modal-width);
    height: var(--delete-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-gap-large);
    position: relative;
    left: 10px;
}

#suspendOrgsModal .header-inner-content,
#modalBulkDelete .header-inner-content {
    width: var(--delete-modal-width);
    height: var(--delete-header-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-gap-small);
}

#suspendOrgsModal .modal-header,
#modalBulkDelete .modal-header {
    width: var(--delete-modal-width);
    height: var(--delete-modal-header-height);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: var(--delete-gap-small);
}

#suspendOrgsModal .modal-header .modal-title,
#modalBulkDelete .modal-header .modal-title {
    width: var(--delete-title-width);
    height: var(--delete-title-height);
    font-family: var(--delete-font-secondary);
    font-style: normal;
    font-weight: var(--delete-font-weight-bold);
    font-size: var(--delete-font-size-header);
    line-height: 100%;
    color: var(--delete-color-header);
}

#suspendOrgsModal .modal-footer,
#modalBulkDelete .modal-footer {
    width: var(--delete-modal-width);
    height: var(--delete-footer-height);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);

}

.modal-suspend-orgs {
    width: var(--suspend-orgs-width);
    font-family: var(--font-family-inter);
    font-style: normal;
    font-weight: var(--suspend-orgs-font-weight);
    font-size: var(--suspend-orgs-font-size);
    display: flex;
    align-items: center;
    position: relative;
    bottom: var(--suspend-orgs-bottom);

}

.modal-suspend-orgs p,
.modal-Bulk-Delete p {
    font-weight: var(--suspend-orgs-p-font-weight);
    margin: 0 !important;
    padding: 0 !important;
}

#suspendOrgsModal .type-delete-container,
#modalBulkDelete .type-delete-container {
    width: var(--delete-modal-width);
    height: var(--delete-input-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);
    position: relative;
    bottom: 10px;

}

#suspendOrgsModal .type-delete-content,
#modalBulkDelete .type-delete-content {
    width: var(--type-delete-content-width);
    height: var(--delete-input-height);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: var(--type-delete-content-gap);
    position: relative;
    left: var(--type-delete-content-left);

}

#suspendOrgInput,
#deleteOrgInput {
    width: var(--deleteConfirmInput-input-width);
    height: var(--deleteConfirmInput-input-height);
    border-radius: var(--deleteConfirmInput-input-radius);
    padding: var(--deleteConfirmInput-input-padding);
    gap: var(--deleteConfirmInput-input-gap);
    background: var(--suspend-input-bg);
    border: var(--suspend-input-border);
}

#suspendOrgInput:focus,
#deleteOrgInput:focus {
    background: var(--suspend-input-bg);
    box-shadow: none;
}

input#suspendOrgInput:-webkit-autofill,
input#suspendOrgInput:-webkit-autofill:hover,
input#suspendOrgInput:-webkit-autofill:focus,
input#suspendOrgInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}

#suspendOrgButton,
#modalBulkDeleteButton,
#suspendOrgButton:focus,
#modalBulkDeleteButton:focus,
#suspendOrgButton:hover,
#modalBulkDeleteButton:hover {
    background-color: var(--btn-bg-confirm);
    border: none;
    padding: var(--btn-padding);
    width: var(--btn-width);
    height: var(--btn-height);
    gap: var(--btn-gap);
    color: var(--delete-btn-text-color);
}

#suspendOrgsModal .delete-btn-container,
#modalBulkDelete .delete-btn-container {
    width: var(--delete-button-width);
    height: var(--btn-height);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: var(--delete-button-gap);
    position: relative;
    right: var(--delete-btn-container-right);
    bottom: var(--delete-btn-container-bottom);
}

#suspendOrgsModal .delete-modal-button-text {
    width: var(--delete-btn-text-width);
    height: var(--delete-btn-text-height);
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--delete-btn-text-font-weight);
    font-size: var(--delete-btn-text-font-size);
    line-height: var(--delete-btn-text-line-height);
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: var(--delete-btn-text-letter-spacing);
    color: var(--delete-btn-text-color);
    position: relative;
    top: var(--delete-btn-text-top);
    right: var(--delete-btn-text-right);

}

.modal-Bulk-Delete {
    width: var(--modal-Bulk-Delete-width);
    font-family: var(--font-family-inter);
    font-style: normal;
    font-weight: var(--suspend-orgs-font-weight);
    font-size: var(--suspend-orgs-font-size);
    display: flex;
    align-items: center;
    position: relative;
    bottom: var(--suspend-orgs-bottom);
    line-height: 140%;

}

#modalBulkDelete .delete-modal-button-text {
    width: var(--delete-btn-text-width);
    height: var(--delete-btn-text-height);
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--delete-btn-text-font-weight);
    font-size: var(--delete-btn-text-font-size);
    line-height: var(--delete-btn-text-line-height);
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: var(--delete-btn-text-letter-spacing);
    color: var(--delete-btn-text-color);
    position: relative;
    top: var(--delete-btn-text-top);
    left: var(--bulk-delete-btn-text-left);

}

input#deleteOrgInput:-webkit-autofill,
input#deleteOrgInput:-webkit-autofill:hover,
input#deleteOrgInput:-webkit-autofill:focus,
input#deleteOrgInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--delete-color-autofill-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    color: inherit;
}


.mssp-deny-approve .approve-action:disabled {
    color: var(--card-approve-text-color);
    cursor: default;
    opacity: 0.5;
    pointer-events: none !important;
}

/* COMPANY BRANDING BUG FIX START*/
.msp-text.msp-company-name {
    width: auto;
    height: auto;
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--reset-title-font-weight);
    font-size: var(--reset-title-font-size);
    line-height: var(--reset-title-line-height);
    text-align: right;
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
}

.msp-text.user-msp-company-name {
    width: auto;
    height: auto;
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--reset-title-font-weight);
    font-size: var(--reset-title-font-size);
    line-height: var(--reset-title-line-height);
    text-align: right;
    color: var(--primary-blue);
    white-space: nowrap;
}

/* COMPANY BRANDING BUG FIX END */



.whitelist-editlist-container {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 30px;
    gap: 24px;
    width: 1136px;
    height: auto;
    flex: none;
    order: 1;
    flex-grow: 1;
    background-color: #000;
}

.settings-whitelist-group-item.expanded.edit-mode {
    height: 339px;
}

.whitelist-editlist-container.expanded {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 24px;
    width: 1136px;
    height: 231px;
    background: #ffffff;
    border-radius: 4px;
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

.whitelist-editlist-container.hidden {
    overflow: hidden;
    visibility: hidden;
}

.whitelist-url-textarea {
    width: 100%;
    min-height: 100px;
    padding: 4px;
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #323233;
    border: 1px solid #f6fff8;
    border-radius: 4px;
    resize: vertical;
    background-color: #f6fff8;
    border: 0;
    outline: none;
}


/* MSSP DASHBOARD START */
.mssp-main-container {
    width: calc(var(--dashboard-full-width) - var(--dashboard-sidebar-offset));
    overflow-x: hidden;
    overflow-y: hidden;
}

.mssp-card {
    width: var(--dashboard-full-width);
    height: var(--dashboard-card-height);
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: var(--dashboard-margin-bottom-card);
    border-radius: var(--org-card-border-radius);
    padding: var(--dashboard-card-padding);
    box-sizing: border-box;
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);
}

.mssp-subscrption {
    width: var(--dashboard-full-width);
    height: 376px !important;
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    border-radius: var(--org-card-border-radius);
    padding-top: 8px;
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);

}

.mssp-quickActions {
    width: var(--dashboard-full-width);
    height: 376px;
    background: var(--org-card-background-color);
    border: var(--org-card-border-color);
    border-radius: var(--org-card-border-radius);
    position: relative;
    /* padding-left: 3px; */
    box-shadow: var(--org-card-box-shadow);
    backdrop-filter: blur(10px);
}

.mssp-activeOrgs,
.mssp-pendingOrgs,
.mssp-planOrgs {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.mssp-activeOrgs img,
.mssp-pendingOrgs img {
    width: 24px;
    /* adjust to your icon size */
    height: 24px;
    position: relative;
    top: -2px;
    /* move slightly up */
    left: -2px;
    /* move slightly left */
}

.mssp-planOrgs img {
    width: 24px;
    /* adjust to your icon size */
    height: 24px;
    position: relative;
    top: -2px;
    /* move slightly up */
    left: -3px;
    /* move slightly left */
}

.mssp-card-footer {
    text-align: left;
}

.mssp-activeOrgs-title,
.mssp-pendingOrgs-title,
.mssp-planOrgs-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mssp-activeOrgs-title img,
.mssp-pendingOrgs-title img,
.mssp-planOrgs-title img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.mssp-activeOrgs-title,
.mssp-pendingOrgs-title,
.mssp-planOrgs-title {
    width: var(--dashboard-full-width);
    height: var(--dashboard-title-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: var(--dashboard-section-padding);
    padding-top: var(--dashboard-section-padding);
    gap: var(--dashboard-gap-medium);
    flex-wrap: wrap;
}


.mssp-activeOrgs-title h2,
.mssp-pendingOrgs-title h2,
.mssp-planOrgs-title h2 {
    position: relative;
    bottom: 4px;
    min-width: 0;
    height: var(--dashboard-small-text-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-title-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--org-card-title-color);
    white-space: nowrap;
    flex: 1;
}

#mssp-active-orgs-count,
#mssp-pendingOrgs-count,
#running-count {
    width: auto;
    height: var(--dashboard-count-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-count-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--org-card-count-color);
    white-space: nowrap;
    text-align: center;
    position: relative;
    top: 10px;
}

.org-view-text,
.org-resend-text {
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    letter-spacing: var(--dashboard-link-letter-spacing);
    color: var(--org-card-bottom-text-color);
    text-decoration: none;
    cursor: pointer;
    padding-left: var(--dashboard-section-padding);
    padding-bottom: var(--dashboard-section-padding);
    align-self: flex-start;
    position: static;
}

.mssp-view-text,
.mssp-resend-text {
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    letter-spacing: var(--dashboard-link-letter-spacing);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
    cursor: pointer;
    padding-left: var(--dashboard-section-padding);
    padding-bottom: var(--dashboard-section-padding);
    align-self: flex-start;
    position: static;
}

.mssp-view-details {
    position: static;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    letter-spacing: var(--dashboard-link-letter-spacing);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
    align-self: flex-start;
    cursor: pointer;
    padding-left: var(--dashboard-section-padding);
}

.mssp-scale-license {
    width: var(--dashboard-full-width);
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: var(--dashboard-large-padding);
    gap: var(--dashboard-gap-medium);
    position: relative;
    top: var(--dashboard-section-padding);
}

.scale-text {
    width: var(--dashboard-scale-text-width);
    height: 13px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-medium-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--filtersort-text-color);
    margin: 0 !important;
    white-space: nowrap;
    left: 0;
}

#mssp-renews-date {
    width: var(--dashboard-renews-date-width);
    height: 7px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-small-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--org-listing-sort-dropdown-email-color);
}

.mssp-license-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dashboard-gap-large);
    position: relative;
    top: var(--dashboard-section-padding);
    left: var(--dashboard-large-padding);
}

.mssp-license-available {
    width: var(--dashboard-license-available-width);
    height: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-card-padding);
    gap: var(--dashboard-gap-tiny);
    background: var(--dashboard-green-highlight);
    border-radius: var(--dashboard-card-radius);
}

#msspLicenseAvailable {
    width: auto;
    height: 10px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--dashboard-link-color);
    padding-bottom: 20px;
    white-space: nowrap;
}

@media (min-width: 992px) {

    .mssp-license-available,
    .mssp-license-use {
        word-wrap: break-word;
        white-space: normal;
        text-align: center;
    }
}


.mssp-license-use {
    width: var(--dashboard-license-use-width);
    height: 26px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-card-padding);
    gap: var(--dashboard-gap-tiny);
    background: var(--dashboard-gray-background);
    border-radius: var(--dashboard-card-radius);
}

#msspLicenseUse {
    width: auto;
    height: 10px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--dashboard-header-text-color);
    padding-bottom: 20px;
    white-space: nowrap;
}

.mssp-subscrptionOrgs-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mssp-subscription-planOrgs {
    position: relative;
    top: 8px;
    left: 16px;
    /* Distance from left */
    width: 292px;
    /* Explicit width */
    height: 24px;
    /* Explicit height */
    display: flex;
    /* For icon + text alignment */
    align-items: center;
    /* Vertically center children */
    gap: 8px;
    /* Space between icon and text */
}


.mssp-subscrption img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.mssp-subscrptionOrgs-title h2 {
    position: relative;
    bottom: 5px;
    min-width: 0;
    height: var(--dashboard-small-text-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-title-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--org-home-title-text-color);
    white-space: nowrap;
    flex: 1;
    margin: 0 !important;

}

.mssp-subscription-table {
    width: var(--dashboard-full-width);
    max-height: var(--dashboard-max-table-height);
    position: static;
    /* padding-top: var(--dashboard-table-top-padding); */
    padding-left: var(--dashboard-table-left-padding);
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: var(--action-button-text-color) transparent;
    z-index: var(--dashboard-base-z-index);
}

.mssp-subscription-table::-webkit-scrollbar {
    width: var(--dashboard-scrollbar-width);
}

.mssp-subscription-table::-webkit-scrollbar-track {
    max-height: var(--dashboard-scrollbar-track-max-height);
}

.mssp-subscription-table::-webkit-scrollbar-thumb {
    background-color: var(--dashboard-scrollbar-thumb-color);
    border-radius: 10px;
}

.mssp-subscription-header {
    position: sticky;
    width: var(--dashboard-full-width);
    height: var(--dashboard-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    border-bottom: var(--dashboard-card-border) var(--dashboard-light-gray-border);
}

.mssp-subscription-mspName {
    height: var(--dashboard-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-medium);
    /* background: var(--dashboard-card-background); */
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;
    white-space: nowrap;
}

.mssp-subscription-mspName p {
    height: var(--dashboard-text-height);
    font-family: var(--dashboard-font-family-mulish), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-medium-font-size);
    line-height: var(--dashboard-tight-line-height);
    color: var(--org-home-title-text-color);
    padding-left: 10px;
}

.mssp-subscription-mspName img {
    position: relative;
    bottom: 6px;
}

.mssp-requested-header {
    height: var(--dashboard-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-medium);
    /* background: var(--dashboard-card-background); */
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;

}

.mssp-requested-header p {
    height: var(--dashboard-text-height);
    font-family: var(--dashboard-font-family-mulish), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-medium-font-size);
    line-height: var(--dashboard-tight-line-height);
    color: var(--org-home-title-text-color);
}

.mssp-requested-header img {
    position: relative;
    bottom: 6px;
}

.mssp-actions-header {
    height: var(--dashboard-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-medium);
    /* background: var(--dashboard-card-background); */
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;
    position: relative;
    right: 7px;
}

.mssp-actions-header p {
    height: var(--dashboard-text-height);
    font-family: var(--dashboard-font-family-mulish), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-medium-font-size);
    line-height: var(--dashboard-tight-line-height);
    color: var(--org-home-title-text-color);
}

.mssp-license-admin {
    height: var(--dashboard-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-medium);
    /* background: var(--dashboard-card-background); */
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;
    flex: 1;
}

.mssp-license-admin p {
    height: var(--dashboard-text-height);
    font-family: var(--dashboard-font-family-mulish), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-medium-font-size);
    line-height: var(--dashboard-tight-line-height);
    color: var(--org-home-title-text-color);
}

.mssp-subscription-data-row1 {
    width: var(--dashboard-full-width);
    height: var(--dashboard-row-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    background-color: var(--org-card-background-color) !important;
    border-bottom: var(--org-listing-container-bottom-line) !important;
    box-sizing: border-box;
}

.mssp-subscription-row1-data1 {
    height: var(--dashboard-row-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-large);
}

.mssp-subscription-row1-data2 {
    height: var(--dashboard-row-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--dashboard-header-padding);
    gap: var(--dashboard-gap-large);
}


.mssp-subscription-row1-data1 p,
.mssp-subscription-row1-data2 p,
.mssp-subscription-row1-data3 p {
    width: 100%;
    height: var(--dashboard-text-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-regular);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-normal-line-height);
    color: var(--org-listing-container-row-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mssp-subscription-row1-data1 p,
.mssp-subscription-row1-data2 p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mssp-deny-approve {
    height: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: var(--dashboard-gap-extra-large);

}

.mssp-deny-approve .approve-action {
    all: unset;
    height: var(--dashboard-text-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 16px;
    gap: var(--dashboard-gap-extra-large);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--card-approve-text-color);
    cursor: pointer;
    opacity: 0.5;
}

.mssp-deny-approve p {
    height: var(--dashboard-text-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: var(--dashboard-gap-extra-large);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-modal-template-download-color);
    cursor: pointer;
}

.mssp-action-card-title {
    width: var(--dashboard-action-card-title-width);
    height: var(--dashboard-title-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: var(--dashboard-gap-medium);
    position: relative;
    left: var(--dashboard-section-padding);
    top: 16px;
}

.mssp-action-card-title h2 {
    width: 133px;
    height: var(--dashboard-small-text-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-medium);
    font-size: var(--dashboard-title-font-size);
    line-height: var(--dashboard-header-line-height);
    color: var(--org-home-title-text-color);
}

.mssp-add-msp-container {
    width: var(--dashboard-add-msp-width);
    height: 33px;
    position: relative;
    top: 20px;
}

.org-add-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 36px;
    width: 95px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-card-bottom-text-color);
    text-decoration: none;
}

.mssp-add-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 36px;
    width: 95px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
}

.mssp-add-users-content {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 32px;
    width: var(--dashboard-add-msp-width);
    height: var(--dashboard-small-line-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-regular);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-small-line-height);
    color: var(--org-card-quickaction-subtext-color);
}

.mssp-enable-msp-container {
    position: relative;
    top: 75px;
    width: var(--dashboard-enable-msp-width);
    height: 33px;
}

.org-enable-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 4px;
    width: 117px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-card-bottom-text-color);
    text-decoration: none;
}

.mssp-enable-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 4px;
    width: 117px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
}
.mssp-enable-users-content {
    position: relative;
    left: var(--dashboard-section-padding);
    width: 100%;
    height: var(--dashboard-small-line-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-regular);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-small-line-height);
    color: var(--org-card-quickaction-subtext-color);
    white-space: nowrap;
}

.mssp-disable-msp-container {
    position: relative;
    top: 105px;
}

.org-disable-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 4px;
    width: 120px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-card-bottom-text-color);
    text-decoration: none;
}
.mssp-disable-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    top: 4px;
    width: 120px;
    height: 12px;
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
}

.mssp-disable-users-content {
    position: relative;
    left: var(--dashboard-section-padding);
    width: 100%;
    height: var(--dashboard-small-line-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-regular);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-small-line-height);
    color: var(--org-card-quickaction-subtext-color);
}

.mssp-delete-msp-container {
    position: relative;
    top: 110px;
}

.org-delete-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-card-bottom-text-color);
    text-decoration: none;
}

.mssp-delete-users-text {
    position: relative;
    left: var(--dashboard-section-padding);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-bold);
    font-size: var(--dashboard-standard-font-size);
    line-height: var(--dashboard-link-line-height);
    color: var(--org-modal-template-download-color);
    text-decoration: none;
}
.mssp-delete-users-content {
    position: relative;
    left: var(--dashboard-section-padding);
    bottom: 5px;
    width: 100%;
    height: var(--dashboard-small-line-height);
    font-family: var(--dashboard-font-family-inter), sans-serif;
    font-style: normal;
    font-weight: var(--dashboard-font-weight-regular);
    font-size: var(--dashboard-base-font-size);
    line-height: var(--dashboard-small-line-height);
    color: var(--org-card-quickaction-subtext-color);
}


@media (min-width: 401px) and (max-width: 982px) {
    .mssp-main-container {
        overflow-x: hidden;
        width: calc(100% - 32px);
    }

    .mssp-card {
        padding: 12px;
    }

    .mssp-activeOrgs-title,
    .mssp-pendingOrgs-title,
    .mssp-planOrgs-title {
        position: relative;
        width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }


    #mssp-active-orgs-count,
    #mssp-pendingOrgs-count,
    #running-count {

        font-size: var(--dashboard-count-font-size);
        line-height: var(--dashboard-header-line-height);
        position: relative;
        top: 10px;
    }

    .mssp-view-text,
    .mssp-resend-text,
    .mssp-view-details {
        padding-left: 12px;
    }

    .mssp-scale-license {

        padding-left: 48px;
        position: relative;
        top: 12px
    }

    .scale-text {
        position: relative;
        bottom: 16px;
    }

    #mssp-renews-date {
        position: relative;
        bottom: 20px;
        left: 2px;
    }

    .mssp-license-row {

        display: flex;
        flex-direction: row;
        gap: 16px;
        position: relative;
        top: 5px;
        left: 60px;
    }

    .mssp-license-available,
    .mssp-license-use {
        flex-direction: row;
        min-width: 70px;
        padding: 4px;
    }


    .mssp-pendingOrgs-container,
    .mssp-activeOrgs-container,
    .mssp-planOrgs-container {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mssp-quickActions-container {
        padding-top: 18px;
    }
}

@media (max-width: 980px) {
    .mssp-subscription-planOrgs {
        position: relative;
        /* stop using fixed coordinates */
        top: auto;
        left: auto;
        width: 100%;
        /* let it resize fluidly */
        height: auto;
        padding: 16px 0 0 16px;
        /* simulate same offset visually */
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .mssp-subscription-planOrgs {
        position: relative;
        /* stop using fixed coordinates */
        top: auto;
        left: auto;
        width: 100%;
        /* let it resize fluidly */
        height: auto;
        padding: 16px 0 0 16px;
        /* simulate same offset visually */
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .mssp-main-container {
        overflow-x: hidden;
        width: calc(100% - 16px);

    }

    .mssp-card {
        padding-top: 5px;
        padding-left: 0px;

    }

    .mssp-activeOrgs-title,
    .mssp-pendingOrgs-title,
    .mssp-planOrgs-title {
        position: relative;
        bottom: 10px;
        width: 100%;
        height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    #mssp-active-orgs-count,
    #mssp-pendingOrgs-,
    #running-count {
        font-size: var(--dashboard-count-font-size);
        line-height: var(--dashboard-header-line-height);
        position: relative;
        top: 10px;
    }

    /* .mssp-view-text,
    .mssp-resend-text,
    .mssp-view-details {
        padding-left: 10px;
    } */

    .mssp-scale-license {
        padding-left: 48px;
        position: relative;
        top: 12px
    }

    .scale-text {
        position: relative;
        bottom: 16px;
        right: 4px;
    }

    #mssp-renews-date {
        position: relative;
        bottom: 20px;
        left: 2px;
    }

    .mssp-license-row {
        position: relative;
        top: 5px;
        left: 60px;
        display: flex;
        flex-direction: row;
        gap: 16px;


    }
}

@media (max-width: 700px) {
    .mssp-subscription-table {
        min-width: 600px;
        overflow-y: auto !important;
        overflow-x: auto !important;
        min-width: unset;
        z-index: 1;
    }

    .mssp-subscription-header {
        min-width: 600px;
    }

    .mssp-subscription-data-row1 {
        min-width: 600px;
    }
}

@media (max-width: 398px) {
    .mssp-license-row {
        display: flex;
        flex-direction: row;
        gap: 16px;
        position: relative;
        top: 5px;
        left: 60px;
    }

    .mssp-card {
        padding: 12px;
    }

    .mssp-activeOrgs-title,
    .mssp-pendingOrgs-title,
    .mssp-planOrgs-title {
        flex-wrap: nowrap;
        padding-left: 12px;
    }

    .mssp-activeOrgs-title h2,
    .mssp-pendingOrgs-title h2,
    .mssp-planOrgs-title h2 {
        font-size: var(--dashboard-title-font-size);
        line-height: var(--dashboard-header-line-height);
    }

    #mssp-active-orgs-count,
    #mssp-pendingOrgs-count,
    #running-count {
        font-size: var(--dashboard-count-font-size);
        line-height: var(--dashboard-header-line-height);
        position: relative;
        top: 10px;
    }

    .mssp-view-text,
    .mssp-resend-text,
    .mssp-view-details {
        padding-left: 12px;
    }

    .mssp-scale-license {

        padding-left: 48px;
        position: relative;
        top: 12px
    }

    .scale-text {
        font-size: 14px;
        line-height: 20px;
    }

    #mssp-renews-date {
        position: relative;
        bottom: 18px;
        left: 2px;
    }

    .mssp-license-row {
        flex-direction: row;
        gap: 16px;
    }

    .mssp-license-available,
    .mssp-license-use {
        min-width: 70px;
        padding: 4px;
    }

    .mssp-quickActions-container {
        padding-top: 18px;
    }


}

/* MSSP DASHBOARD END */

/* MSSP ORGANISATIONS START */


.mssp-orgs-title-container {
    width: 100%;
    height: 47px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;


}

.mssp-orgs-title {
    width: 100%;
    height: 47px;
    font-style: var(--font-family-mulish);
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-24-bold);
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-home-title-text-color) !important;
    white-space: nowrap;
}

.mssp-orgs-subtitle {
    width: 400px;
    height: 15px;
    font-style: var(--font-family-inter);
    font-weight: var(--inter-weight-regular);
    font-size: var(---inter-body-16-regular);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: var(--org-home-subtitle-text-color) !important;
}

.search-mssp {
    width: 320px;
    height: 44px;
    opacity: 1;
    position: absolute;
    left: 0px;
    border-radius: var(--org-listing-sort-border-radius);
    background-color: var(--org-listing-sort-bg-color);
    border: var(--org-listing-sort-border);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 42px;
    padding: 0px;

}

.search-mssp-input::placeholder {
    color: #28396A;
    opacity: 1;
}

.search-mssp-icon-color {
    color: var(--org-listing-sort-icon-color);
}

.lic-search-mssp {
    width: 320px;
    height: 44px;
    opacity: 1;
    position: absolute;
    left: 84px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #DBDBDB;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 42px;
    padding: 0px;

}

.lic-search-mssp-input::placeholder {
    color: #28396A;
    opacity: 1;
}

.lic-search-mssp-icon-color {
    color: var(--org-listing-sort-icon-color);
}


.mssp-table-orgs {
    position: relative;
    top: 50px;
}

.mssp-orgs-table-container {
    width: 100%;
    min-height: 543px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--org-card-background-color);
    box-shadow: var(--org-listing-container-box-shadow);
    border-radius: var(--org-listing-container-border-radius);
    border: var(--org-listing-sort-border);
    box-sizing: border-box;
    opacity: 100%;
    backdrop-filter: blur(5px);
}

.mssp-table-inner-content {
    width: 100%;
    /* min-height: 496px; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    flex: 1 1 auto;
    backdrop-filter: blur(5px);
    border-radius: var(--org-listing-container-border-radius);
}

.mssp-table-header-orgs {
    width: 100%;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* background: #FFFFFF; */
    border-bottom: var(--org-listing-container-bottom-line);
    box-sizing: border-box;
    position: relative;
}

.mssp-checkbox-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 12px;
    gap: 12px;
    flex: 0 0 80px;
    min-width: 80px;


}

.msspheader-cell1 {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 2.5;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell1 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;

}

.msspheader-cell2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 2.2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell2 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;
    white-space: nowrap;
}

.msspheader-cell3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 3;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell3 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;
    white-space: nowrap;
}

.msspheader-cell4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell4 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;

}

.msspheader-cell5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 2.3;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell5 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;
    white-space: nowrap;

}

.msspheader-cell6,
.msspheader-cell7,
.msspheader-cell8 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    flex: 2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.msspheader-cell6 p,
.msspheader-cell7 p,
.msspheader-cell8 p {
    font-family: var(--font-family-mulish);
    font-style: normal;
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    line-height: 90%;
    color: #4D6ABF;

}

#msspAddedOn,
#mspNameSortIcon {
    display: inline-block;
    /* background: url("/assets/img/Arrow1.png") no-repeat center center; */
    background-size: contain;
    font-size: 0;
    vertical-align: middle;

}




.mssp-navbar-container {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--org-card-background-color);
    bottom: 0;
    z-index: 10;
}

.mssp-navbar-subcontainer {
    width: 100%;
    min-width: max-content;
    height: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 626px;
}

.mssp-table-row-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
}

.mssp-table-row-container label {
    /* width: 92px; */
    height: 17px;
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    color: var(--org-home-subtitle-text-color);
    white-space: nowrap;
}

#msspRowsPerPageSelect {
    position: relative;
    top: 2px;
    right: 15px;
    min-width: 60px;
    max-width: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--org-home-subtitle-text-color);
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    padding-right: 30px;
    background-image: var(--org-card-dropdown-icon);
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

.mssp-rows-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    top: 2px;
    right: 15px;
}

.mssp-rows-dropdown-wrapper #msspRowsPerPageSelect {
    top: 0;
    right: 0;
    padding-right: 24px;
    background-image: none !important;
}

.mssp-rows-dropdown-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#msspRowsPerPageSelect:focus {
    box-shadow: none;
    cursor: pointer;
}


#msspRowsPerPageSelect option {
    color: #000;
}

#msspRowsPerPageSelect option:hover,
#msspRowsPerPageSelect option:focus {
    color: #fff;
}

.mssptable-pagination-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 70px;
    padding-bottom: 12px;
}

.mssp-table-pagination-text {
    position: relative;
    left: 60px;
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
}

.mssp-table-pagination-text .mssp-pagination-text {
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    color: var(--org-home-subtitle-text-color);
    text-decoration: none;
    height: 17px;
}

.mssp-table-pagination-text span {
    color: var(--org-card-subvalue-text-color);
}


.mssp-pagination-dropdown {
    cursor: pointer;
    text-decoration: none;
}

.mssp-pagination-dropdown {
    cursor: pointer;
    text-decoration: none;
}


.mssp-data-checkbox-container {

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 12px;
    flex: 0 0 80px;
    min-width: 80px;
    gap: 12px;



}

.mssp-data-cell1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 2.5;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 2.2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 3;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 2.3;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell6,
.mssp-data-cell7,
.mssp-data-cell8 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 12px;
    flex: 2;
    min-width: 0;
    position: relative;
    left: 12px;
}

.mssp-data-cell1 p,
.mssp-data-cell2 p,
.mssp-data-cell3 p,
.mssp-data-cell4 p,
.mssp-data-cell5 p,
.mssp-data-cell6 p,
.mssp-data-cell7 p,
.mssp-data-cell8 p {
    font-family: var(--font-family-inter);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--org-listing-container-row-text-color);
    margin: 0;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    max-width: 9ch;

}

.mssp-data-cell6 p {
    position: relative;
    top: 0.5px;
}

.mssp-table-header-orgs>div {
    white-space: nowrap;
    align-items: center;
    gap: 6px;
}

.mssp-table-header-orgs p {
    margin: 0;
    font-family: var(--font-family-mulish);
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-18-bold);
    color: var(--org-listing-container-header-text-color);

}

.mssp-table-header-orgs img,
#mspNameSortIcon,
#msspAddedOn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (max-width: 1200px) {
    .mssp-table-header-orgs p {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .mssp-table-header-orgs p {
        font-size: 18px;
        text-overflow: ellipsis;
    }

    #mspNameSortIcon,
    #msspAddedOn {
        width: 10px;
        height: 12px;
    }
}


.mssp-data-row {
    display: flex;
    width: 100%;
    height: 64px;
    border-bottom: var(--org-listing-container-bottom-line);
    align-items: center;
    padding: 0 0px;
    box-sizing: border-box;
    margin: 0;
}

.mssp-data-row>div {
    padding: 12px;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-inter);
    font-size: 16px;
    color: var(--org-listing-container-row-text-color);
    font-weight: 500;
}


.mssp-search-butttons {
    margin-top: 50px;
}

.action_and_addmsp__button {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;

}

@media (max-width: 768px) {
    .action_and_addmsp__button {
        right: 16px;
        top: 120px;
        width: 200px;
    }
}

.action_and_addmsp__button .dropdown .btn {
    width: 104px;
    height: 44px;
    padding: 10px 8px;
    border-radius: 4px;
    border: var(--action-button-border);
    background-color: var(--action-button-bg-color);
    color: var(--action-button-text-color);
    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);

}

.action_and_addmsp__button .btn-primary {
    width: 126px;
    height: 44px;
    background-color: var(--adduser-button-bg-color);
    color: var(--adduser-button-text-color);
    border-radius: 4px;
    border: var(--adduser-button-border);
    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);
}

.action_and_addmsp__button button.btn-primary:active {
    background-color: var(--primary-green);
    border: none;
}

.action_and_addmsp__button.btn-secondary {
    width: 104px;
    height: 44px;
}

.mssp-table {
    height: auto;
    overflow: visible;
}

@media (max-width: 768px) {
    .action_and_addmsp__button {
        justify-content: flex-start;
        gap: 12px;
    }
}


@media (max-width: 1200px) {
    .mssp-table-header-orgs {
        width: 100%;
    }

    .mssp-table-header-orgs>div {
        min-width: 80px;
        padding: 12px;

    }

    .mssp-table-header-orgs p {
        font-size: 18px;
        margin: 0;
    }


}

@media (max-width: 1200px) {
    .mssp-data-cell4 {
        position: relative;
        right: 0px;
    }
}

@media (max-width: 1100px) {
    .mssp-orgs-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    .mssp-orgs-table-container::-webkit-scrollbar {
        height: 2px;
    }

    .mssp-orgs-table-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .mssp-orgs-table-container::-webkit-scrollbar-thumb {
        background: #216767;
        border-radius: 4px;
    }

    .mssp-orgs-table-container::-webkit-scrollbar-thumb:hover {
        background: #1a5252;
    }


    .mssp-orgs-table-container {
        scrollbar-width: thin;
        scrollbar-color: #216767 #f1f1f1;
    }


    .mssp-table-inner-content {
        min-width: 1160px;
    }

}



@media (max-width: 1015px) {
    #auditlogTimeOnDropdown {
        position: absolute;
        right: 10px;
    }
}

#auditNameSortDropdown {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: var(--dropdown-z-index);
    top: 40px;
    left: 380px;
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

#audituserRoleDropdown {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: 155px;
    height: 140px;
    z-index: var(--dropdown-z-index);
    top: 40px;
    left: 545px;
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

#activityFilterDropdown {
    position: absolute;
    left: 40px;
    top: 48px;
    display: none;
    background: white;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    padding: 8px;
    width: 370px;
    z-index: 999;
    max-height: 250px;
    overflow-y: auto;
}

#auditPerformedBySortDropdown {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 80px;
    z-index: var(--dropdown-z-index);
    top: 100%;
    right: 185px;
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}


#mspNameSortDropdown {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 4px;
    background: var(--filtersort-bg-color) !important;
    border: var(--filtersort-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: var(--dropdown-z-index);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}



#adminmspNameSortDropdown {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: var(--dropdown-z-index);
    /* left: 78px; */
    /* top: 40px; */
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

#msspAddedOnDropdown {
    display: none;
    position: absolute;
    background: var(--filtersort-bg-color) !important;
    border: var(--filtersort-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: 10000;
    top: 21px;
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

#auditlogTimeOnDropdown {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: 10000;
    top: 40px;
    right: -63px;
    left: 15px;
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

#accountStatusFilterDropdown,
#orgAdminAccountStatusFilterDropdown {
    width: 143px;
    height: 136px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    position: absolute;
    top: 28px;
    background: var(--filtersort-bg-color);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    cursor: pointer;
    z-index: 10000;
    border: var(--filtersort-border);
}

/* @media screen and (min-width: 1920px) {
    #accountStatusFilterDropdown,
    #orgAdminAccountStatusFilterDropdown {
        left: -20px;
    }
} */

/* @media (min-width:1600px) and (max-width:1800px) {

    #accountStatusFilterDropdown,
    #orgAdminAccountStatusFilterDropdown {
        width: 140px;
        height: 136px;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 16px 8px 0px;
        position: absolute;
        top: 46px;
        right: 7px;
        left: 90px;
        background: #FFFFFF;
        box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 4px 4px;
        cursor: pointer;
        z-index: 10000;
    }
} */

/* @media (min-width:1801px) {

    #accountStatusFilterDropdown,
    #orgAdminAccountStatusFilterDropdown {
        width: 140px;
        height: 136px;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 16px 8px 0px;
        position: absolute;
        top: 46px;
        right: 130px;
        left: 120px;
        background: #FFFFFF;
        box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 4px 4px;
        cursor: pointer;
        z-index: 10000;
    }
} */

#msspLicenseFilterDropdown {
    width: 173px;
    height: 104px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    position: absolute;
    background: var(--filtersort-bg-color);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    cursor: pointer;
    top: 26px;
    z-index: 10000;
}


#msspGeolocationList .form-check {
    width: 193px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 16px;
    background: var(--filtersort-bg-color);
}

#msspGeolocationList input[type="checkbox"] {
    position: relative;
    left: 12.5%;
    right: 12.5%;
    top: 12.5%;
    bottom: 12.5%;
    width: 18px;
    height: 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 7.5px;
    padding: 0px;
    background: #34B1B1;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}



@media (max-width:1240px) {
    .mssp-navbar-subcontainer {
        display: flex;
        gap: 120px;
    }

    /* .mssp-checkbox-container{
    margin-left: 15px !important;
  
    } */
}

@media (max-width: 1100px) {
    .mssp-navbar-subcontainer {
        width: 100%;
        display: flex;
        gap: 670px;
    }
}

@media (min-width: 1241px) and (max-width: 1490px) {
    .mssp-checkbox-container {
        margin-left: 0 !important;
    }
}

/* 
@media (min-width: 1250px) and (max-width: 1590px) {
 .mssp-checkbox-container{
    margin-left: 10px !important;
    }
} */

/* @media (min-width: 1750px) {
 .mssp-checkbox-container{
    position: relative;
    right: 5px;
    }
} */

@media (min-width: 1751px) {
    .mssp-checkbox-container {
        position: relative;
        right: 0;
    }
}

@media (min-width: 1901px) {
    .mssp-checkbox-container {
        position: relative;
        right: 0;
    }
}

.mssp-data-row:nth-child(odd) {
    background-color: var(--org-listing-container-row-child-bg-color);
}

.mssp-data-row:hover .status-default {
    display: none;
}

.mssp-data-row:hover .mssp-status-buttons {
    display: flex;
    gap: 24px;

}

.mssp-status-buttons {
    display: none;
    position: absolute !important;
    right: 20px;
    top: 0px;
    z-index: var(--action-buttons-z-index);
}


.mssp-data-row.active-row .mssp-status-buttons {
    display: flex !important;

}


.mssp-data-row:hover {
    width: 100%;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--org-listing-contaniner-row-hover-color);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 1px;
    z-index: 100;
}

.status-default {
    display: flex;
    flex-direction: row;
    gap: 8px;

}

.mssp-status {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 1px;
    right: 8px;
}

.msp-btn {
    border: none;
    background: var(--org-listing-contaniner-row-insidehover-color);
}

.mssp-sort-status {
    position: relative;
    top: 25px;
    width: 100%;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--org-listing-sort-text-color);

}

/* Place this in your CSS file */
.url-error-message {
    display: block;
    margin-top: 98px;
    margin-left: -1090px;
    /* Adjust as needed */
    color: red;
    font-size: 13px;
    position: static;
    /* Ensure it's not absolutely positioned */
}

textarea.blacklist-url-textarea,
textarea.whitelist-url-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    /* No margin-bottom needed, error message will add spacing */
}

.browser-select-dropdown {
    position: relative;
    width: 100%;
}

.browser-select-input {
    width: 100%;
    appearance: none;
    /* Hides default dropdown icon */
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    padding-right: 30px;
    /* Leaves space for custom icon */
}

.dropdown-icon-wrapper {
    position: absolute;
    right: 10px;
    top: 42%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Makes icon click-through */
    color: #333;
    /* Optional: icon color */
    font-size: 14px;
    /* Optional: icon size */
}

.dropdown-icon-wrapper-loc {
    position: absolute;
    left: 340px;
    top: 30%;
    pointer-events: none;
    color: #216767;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 24px;
    height: 24px;
}


.cpu-usage {
    width: 180px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;
    white-space: nowrap;
}

.session-time-live {
    width: 240px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;

}

.users-manage-actions {
    width: 180px;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    color: #4D6ABF;

}

.data-cpu {
    width: 180px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

.data-row:hover .data-cpu {
    width: 180px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}


.data-session-time {
    width: 240px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    border-bottom: 1px solid #EFF0F1;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

.data-row:hover .data-session-time {
    width: 240px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.data-usermanage-actions {
    width: 180px;
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    border: none;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    color: #BE5050;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;

}

.data-row:hover .data-usermanage-actions {
    width: 240px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    gap: 12px;
    background: #FFFFFF;
    border: none;
}

.icon-button.shutdown-link {
    text-decoration: none;
    color: var(--usage-shutdown-btn-bg-color);
    /* Specified red color */
    font-size: 16px;
    /* Specified font size */
    font-family: 'Inter', sans-serif;
    /* Specified font family */
    cursor: pointer;
    /* Specified cursor */
    display: inline-block;
    padding: 0px;
    background: none;
}

.icon-button.restart-link {
    text-decoration: none;
    color: var(--usage-restart-btn-bg-color);
    /* Specified red color */
    font-size: 16px;
    /* Specified font size */
    font-family: 'Inter', sans-serif;
    /* Specified font family */
    cursor: pointer;
    /* Specified cursor */
    display: inline-block;
    padding: 0px;
    background: none;
}


/* MSP USER LISTING HOVER START */

.msp-tooltip {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    white-space: nowrap;
    background-color: var(--org-listing-container-row-tooltip-bg-color);
    color: #FFFFFF;
    border-radius: 4px;
    padding: 8px;
    z-index: 9999 !important;
    text-align: center;
    /* visibility: hidden; */
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    transition: opacity 0.3s, transform 0.3s;
    position: absolute;
    top: 25px
}

.msp-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.msp-tooltip-trigger:hover+.msp-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Allow tooltips to escape their grid cell */
.mssp-data-usage>div,
.mssp-table-header-usage>div {
    overflow: visible !important;
}

/* Make sure tooltip wrapper can position relative to cell */
.msp-tooltip-wrapper {
    position: relative !important;
    overflow: visible !important;
}


.msp-btn {
    position: relative;
    display: inline-block;
}

.msp-btn:hover .msp-tooltip {
    visibility: visible;
    opacity: 1;

}


.msp-tooltip.edit {
    width: 90px;
    height: 32px;
    position: absolute;
    top: 30px;
    left: 50%;

}

.msp-tooltip.delete {
    width: 108px;
    height: 32px;
    position: absolute;
    top: 30px;
    right: 50%;
}

.msp-tooltip.action {
    width: 119px;
    height: 32px;
    position: absolute;
    top: 30px;
    right: 10px;
}


.mssp-status-dropdown {
    width: 170px;
    height: auto;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 0px 0px;
    background-color: var(--hover-dropdown-bg-color);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    position: absolute;
    /* z-index: 10000; */

}


.mssp-status-dropdown.active .msp-btn .msp-tooltip {
    display: none;
}

.mssp-status-text1-dropdown {
    width: 170px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    cursor: pointer;
    position: relative;
    bottom: 6px;
}

.mssp-status-text2-dropdown,
.mssp-dropdown-text-option {
    width: 170px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    border-bottom: var(--org-listing-container-bottom-line);
    cursor: pointer;
    position: relative;
    bottom: 6px;
}


.mssp-status-text1-dropdown:hover,
.mssp-status-text2-dropdown:hover,
.mssp-dropdown-text-option:hover {
    background-color: var(--hover-dropdown-hover-bd-color) !important;
    color: var(--hover-dropdown-text-color);
}

.hover-dropdown-menu li:hover {
    width: 170px;
    background-color: var(--hover-dropdown-hover-bd-color) !important;
    color: var(--hover-dropdown-text-color);
}


.mssp-status-text1-dropdown p,
.mssp-status-text2-dropdown p,
.mssp-dropdown-text-option p {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--hover-dropdown-text-color);
    white-space: nowrap;
    margin-top: 10px;
    overflow: visible;
}

.mssp-status-dropdown.active {
    display: block;
    margin-top: 100px;
    z-index: 10000;
}

.mssp-status-dropdown.active+.mssp-status-buttons .msp-tooltip {
    display: none;
}


/* MSP USER LISTING HOVER END */
/* Add to your CSS section */
/* .change-btn.disabled {
    pointer-events: none !important;
    opacity: 100%;
    
} */
/* ...existing code... */
.change-btn.disabled,
#changeGeolocationBtn:disabled {
    pointer-events: none;
    opacity: 1;
    /* Optional: visually indicate disabled */
}

/* ...existing code... */

/* Add to your <style> block */
.change-outline-btn:has(.change-btn.disabled) {
    pointer-events: none !important;
    opacity: 0.5;
}

/* Add to your CSS */
.user-msp-save-btn.disabled,
.msp-save-btn.disabled {
    pointer-events: none;
    opacity: 1;

}

/* For .msp-save-outline-btn when its child button is disabled */
.msp-save-outline-btn:has(button:disabled) {
    opacity: 0.5;
    pointer-events: none;
}

.user-msp-save-outline-btn:has(button:disabled) {
    opacity: 0.5;
    pointer-events: none;
}

/* Add to your CSS file */
.user-msp-save-btn.disabled,
.msp-save-btn.disabled,
.user-msp-save-btn-container-mssp-settings.disabled,
.msp-save-btn-container-mssp-settings.disabled {
    pointer-events: none;
    opacity: 1;

}

.change-btn-container-mssp-browser-gelocation {
    width: 116px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    height: 40;
    opacity: 100%;
}

.user-msp-save-btn-container-mssp-settings,
.msp-save-btn-container-mssp-settings {
    width: 116px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
}

.user-msp-save-btn.disabled,
.msp-save-btn.disabled {
    pointer-events: none;
}

/* visual + functional disabled for containers */
.disabled {
    opacity: 0.5;
    transition: opacity 0.25s ease;
    /* container should show not-allowed cursor on hover */
    cursor: not-allowed !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Prevent clicks on children, but allow the container itself to show cursor */
.request-btn-container.disabled *,
.minus-btn-container.disabled * {
    pointer-events: none !important;
}

/* ensure the container remains hoverable (so cursor shows) */
.request-btn-container.disabled,
.minus-btn-container.disabled {
    pointer-events: auto !important;
}



#usageActions {
    width: 140px;
    height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 16px 8px 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    position: relative;
    top: 55px;
    right: 150px;
    z-index: 1000;
}

.users-manage-option1,
.users-manage-option2 {
    width: 140px;
    height: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    gap: 70px;
    background: var(--filtersort-bg-color);
    cursor: pointer;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-text-color);

}

.users-manage-option1:hover,
.users-manage-option2:hover {
    background-color: var(--filtersort-hover-bg-color);
    color: var(--filtersort-hover-text-color);
}

.dropdown-content.usage-user-sort {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: 0px 4px 6px var(--shadow-color);
    width: var(--dropdown-min-width);
    height: 72px;
    z-index: var(--dropdown-z-index);
    right: -190px;
    left: 10px;
    top: var(--dropdown-top-position);
    margin-top: var(--dropdown-top-margin);
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 0px 16px 8px 0px;
}

/* Bug fixed in the blacklisted and whitelisted URL in ORG Admin screen */
.addurl-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.url-error-message-orgadmin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: red;
    font-size: 12px;
    display: none;
    /* show via JS when needed */
    margin-top: -15px;
    white-space: nowrap;
}

/* New accessdenied page */

.full-height-center-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.center-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Full height of viewport */
    background-color: #f6fff8;
    /* Optional background */
}

.custom-box-unique-1038 {
    width: 1038.7px;
    height: 378.71px;
    padding: 24px;
    border-radius: 0;
    background-color: var(--white-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 39px;
    opacity: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Optional: subtle shadow */
}

.access-denied-image-330 {
    width: 330px;
    height: 330px;
    object-fit: contain;
    background-color: #D2E0D5;
}


.access-denied-image-frame {
    background-color: #D2E0D5;


}

.Access-denied-frame {
    width: 621px;
    height: 297px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 46px;
}

.Access-denied-frame2 {
    width: 621px;
    height: 187px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.Access-denied-title {
    width: 621px;
    height: 48px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    text-align: left;
    color: var(--primary-color);
}

.Access-denied-subtitle {
    width: 621px;
    height: 135px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 32px;
    line-height: 140%;
    text-align: left;
    color: var(--primary-color);
}

.Access-denied-button {
    width: 299px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 40px;
    border-radius: 8px;
    background-color: var(--secondary-color);
    border: none;
}

.Access-denied-button-text {
    width: 219px;
    height: 24px;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    text-align: center;
    color: var(--white-color);
    text-decoration: none;
    background: transparent;
    padding: 0;
    border: none;
}

/* --- Responsive styles for small screens/mobiles --- */
@media (max-width: 767.98px) {
    .custom-box-unique-1038 {
        width: 95vw;
        min-width: unset;
        max-width: 99vw;
        height: auto;
        padding: 10vw 3vw;
        position: static;
        top: auto;
        left: auto;
        transform: none;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
        gap: 20px;
        /* reduce vertical spacing for mobile */
        border-radius: 0 0 12px 12px;
        /* Example: add corner radius on small screens */
        align-items: center;
    }

    /* Bootstrap grid columns fix */
    .custom-box-unique-1038 .col-sm-4,
    .custom-box-unique-1038 .col-md-4,
    .custom-box-unique-1038 .col-sm-8,
    .custom-box-unique-1038 .col-md-8 {
        width: 100%;
        max-width: 100%;
        flex: unset;
        display: block;
        margin-bottom: 12px;
    }

    .access-denied-image-330 {
        width: 64vw;
        min-width: 120px;
        max-width: 95vw;
        height: auto;
        margin: 0 auto 8vw auto;
        display: block;
    }

    .Access-denied-frame,
    .Access-denied-frame2 {
        width: 100%;
        max-width: 99vw;
        height: auto;
        align-items: center;
        gap: 16px;
        padding: 0;
    }

    .Access-denied-title,
    .Access-denied-subtitle {
        width: 100%;
        height: auto;
        text-align: center;
        font-size: 7vw;
        line-height: 1.15;
    }

    .Access-denied-title {
        font-size: 8vw;
        font-weight: 700;
        margin-bottom: 2vw;
    }

    .Access-denied-subtitle {
        font-size: 5vw;
        margin-bottom: 2vw;
    }

    .Access-denied-button {
        width: 100%;
        max-width: 250px;
        height: auto;
        padding: 10px 2vw;
        margin: 16px auto 0 auto;
        flex-direction: row;
        border-radius: 8px;
    }

    .Access-denied-button-text {
        width: 100%;
        font-size: 5vw;
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .custom-box-unique-1038 {
        width: 90vw;
        height: auto;
        padding: 24px;
        position: static;
        transform: none;
        top: auto;
        left: auto;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
        gap: 24px;
        align-items: flex-start;
        /* Keep content aligned to the left */
        flex-direction: column;
    }



    .Access-denied-frame,
    .Access-denied-frame2 {
        width: 100%;
        align-items: flex-start;
        /* ✨ Keep text left aligned */
        height: auto;
        gap: 20px;
        text-align: left;
        /* ✨ Ensure text is left aligned */
    }

    .Access-denied-title {
        font-size: 32px;
        width: 100%;
        height: auto;
        text-align: left;
        /* ✨ Explicitly enforce */
    }

    .Access-denied-subtitle {
        font-size: 20px;
        width: 100%;
        height: auto;
        text-align: left;
        /* ✨ Explicitly enforce */
    }

    .Access-denied-button {
        width: 200px;
        height: auto;
        padding: 16px 24px;
        /* margin: 0 auto; */
    }

    .Access-denied-button-text {
        font-size: 18px;
        width: 100%;
        height: auto;
    }
}


/* 404 error page starts here  */
.error-page-404 {
    background-color: #f6fff8;
}

.error-page-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #90B3B3;
    text-align: center;
    /* Center text inside */
    width: 100%;
    /* Take full width of parent */
    max-width: 663px;
    /* Limit width for large screens */
    margin: 0 auto 20px auto;
    /* Center horizontally with margin */
}


.error-digit {
    font-size: 96px;
    font-weight: 700;
    color: #28396A;
}

.error-coconut-img {
    width: 590px;
    height: 321px;
    object-fit: contain;
}

/* Subtext */
.error-subtext {
    font-size: 24px;
    color: #28396A;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* width:395px; */
    height: 31px;
}

/* Button styling */
.error-btn {
    background-color: #1D7C6F;
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.error-btn:hover {
    background-color: #155e53;
    color: white;
}

/* Responsive tweaks for smaller screens */
@media (max-width: 576px) {
    .error-digit {
        font-size: 64px;
    }

    .error-coconut-img {
        width: 70px;
        height: 70px;
    }

    .error-page-heading {
        font-size: 22px;
    }


    .error-btn {
        font-size: 16px;
        padding: 12px 24px;
    }
}


/* 404 error page ends here */

/* session error page start */
.session-timeout-page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1038.7px;
    height: 378.71px;
    background-color: #FFFFFF;
    opacity: 1;
    border-radius: 0;
    padding: 24px;
    display: flex;
    flex-direction: row;
    column-gap: 39px;
    align-items: flex-start;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    /* Stronger drop shadow */
}

.session-timeout-image-frame {
    width: 330px;
    height: 330px;
    background-color: #D2E0D5;
    opacity: 1;
    border-radius: 0;
}

.session-timeout-image {
    position: absolute;
    top: 50%;
    left: 18%;
    transform: translate(-50%, -50%);
    width: 161px;
    height: 203px;
    opacity: 1;
    border-radius: 0;
}

/* .session-timeout-frame1{
    position:absolute;
    top: 0.35px;
    left: 5.35;
    width: 318.96px;
    height: 330px;
    opacity: 1;
    border-radius: 4.84px;
    background-color: #D2E0D5;
} */

.session-timeout-content {
    width: 621px;
    height: 252px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 46px;
    opacity: 1;
    border-radius: 0;

}

.session-timeout-content1 {
    width: 621px;
    height: 142px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    opacity: 1;
    border-radius: 0;
}

.session-timeout-title {
    width: 621px;
    height: 48px;
    opacity: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: auto;
    align-items: start;
    color: #28396A;
}

.session-timeout-subtitle {
    width: 621px;
    height: 90px;
    opacity: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 140%;
    align-items: start;
    color: #28396A;
}

.session-timeout-button {
    width: 301px;
    height: 64px;
    /* top: 490px;
    left: 606px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 40px;
    border-radius: 8px;
    background-color: var(--secondary-color);
    border: none;
}


.session-timeout-button-text {
    width: 221px;
    height: 24px;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    text-align: center;
    color: var(--white-color);
    text-decoration: none;
    background: transparent;
    padding: 0;
    border: none;
}

.session-timeout-page-color {
    background-color: #f6fff8;
    min-height: 100vh;
    height: 100%;

}

@media (max-width: 768px) {
    .session-timeout-page {
        width: 90%;
        height: auto;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        position: static;
        transform: none;
        margin: 40px auto;
    }

    .session-timeout-image-frame {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        background-color: transparent;
        margin-bottom: 20px;
    }

    .session-timeout-image {
        position: static;
        transform: none;
        width: 120px;
        height: auto;
    }

    .session-timeout-content {
        width: 100%;
        gap: 20px;
        align-items: center;
        text-align: center;
    }

    .session-timeout-content1 {
        width: 100%;
        gap: 8px;
    }

    .session-timeout-title {
        font-size: 28px;
        width: 100%;
    }

    .session-timeout-subtitle {
        font-size: 20px;
        width: 100%;
    }

    .session-timeout-button {
        width: auto;
        padding: 12px 24px;
    }

    .session-timeout-button-text {
        font-size: 18px;
        width: auto;
    }
}

@media (max-width: 576px) {
    .session-timeout-title {
        font-size: 24px;
    }

    .session-timeout-subtitle {
        font-size: 18px;
    }

    .session-timeout-button-text {
        font-size: 16px;
    }

    .session-timeout-image {
        width: 100px;
    }
}

#addedOnDropdown {
    left: 110px;
}

.role-dropdown-content.addedby {
    left: 0px;
}

#orgNameSortDropdown {
    left: 65px;
}

/* #adminmsspAddedOnDropdown {
    left: 1040px;
} */

@media(min-width:1200px) {
    .mssp-data-cell4 {
        position: relative;
        right: 10px;

    }

    .mssp-data-cell5 {
        position: relative;
        right: 15px;

    }
}

@media(min-width:1400px) {
    .msspheader-cell5 {
        right: 17px;

    }
}

@media(max-width:1500px) {
    .msspheader-cell6 {
        position: relative;
        left: 5px;

    }
}

@media(min-width:1500px) {
    .msspheader-cell6 {
        position: relative;
        right: 10px;

    }
}

@media(min-width:1500px) {
    .msspheader-cell4 {
        position: relative;
        right: 0px;

    }
}


.email-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(10ch + 2px);
}

.msp-tooltip.disable {
    width: 145px;
    height: 32px;
    position: absolute;
    top: 30px;
    right: 50%;

}

.msp-tooltip.invite {
    width: 120px;
    height: 32px;
    position: absolute;
    top: 30px;
    left: 50%;

}


.msp-tooltip.browser {
    width: 148px;
    height: 32px;
    position: absolute;
    top: 30px;
    /* left: 50%; */
    right: 50%;
}

/* ADMIN DASHBOARD START */

.admin-container {
    position: relative;
    top: 20px;
    padding-right: 26px;
}

.admin-title h1 {
    height: 38px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    color: #28396A;
    margin: 0 !important;
    padding: 0 !important;

}

.admin-subtitle p {
    height: 12px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    color: #28396A;
    white-space: nowrap;
    margin: 0 !important;
    padding: 0 !important;
}

.admin-cards {
    position: relative;
    top: 36px;
}

.total-mssps-card,
.total-msps-card,
.total-orgs-card,
.total-users-card {
    height: 135px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
}

.total-mssps-card h2,
.total-msps-card h2,
.total-orgs-card h2,
.total-users-card h2 {
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.total-mssp-content,
.total-msp-content,
.total-orgs-content,
.total-users-content {
    position: relative;
    bottom: 34px;
    display: flex;
    gap: 8px;
}

.total-msps-card p,
.total-mssps-card p,
.total-orgs-card p,
.total-users-card p {
    position: relative;
    right: 10px;
    width: auto;
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396A;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    text-align: center;
}

@media(max-width: 1350px) {

    .total-msps-card p,
    .total-mssps-card p,
    .total-orgs-card p,
    .total-users-card p {
        font-size: 32px;
        position: relative;
        right: 25px;
    }
}

@media(max-width: 1254px) {

    .total-msps-card p,
    .total-mssps-card p,
    .total-orgs-card p,
    .total-users-card p {
        font-size: 32px;
        position: relative;
        right: 55px;
    }
}

@media(min-width: 1800px) {

    .total-msps-card p,
    .total-mssps-card p,
    .total-orgs-card p,
    .total-users-card p {
        font-size: 32px;
        position: relative;
        left: 20px;
    }
}

.mssp-manage {
    position: relative;
    top: 34px;
}

.mssp-manage a {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-decoration-line: underline;
    color: #216767;

}


.mssp-manage {
    position: relative;
    right: 150px;
    top: 34px;
}

.mssp-manage.mssps {
    position: relative;
    left: -164px;
}

.mssp-manage.orgs {
    position: relative;
    left: -144px;
}

.mssp-manage.msps {
    position: relative;
    right: 150px;
}


@media (max-width: 1300px) {
    .mssp-manage {
        position: relative;
        right: 150px;
        top: 34px;
    }

    .mssp-manage.mssps {
        position: relative;
        left: -164px;
    }

    .mssp-manage.orgs {
        position: relative;
        left: -144px;
    }

    .mssp-manage.msps {
        position: relative;
        right: 150px;
    }
}

.admin-geolocations-card {
    height: 368px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
}

.admin-geolocations-content {
    width: auto;
    display: flex;
    gap: 8px;
}

.admin-geolocations-content h2 {
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.coconut-overview-card {
    height: 368px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
}

.coconut-overview-content {
    width: auto;
    display: flex;
    gap: 8px;
}

.coconut-overview-content h2 {
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.month-text {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.month-text span {
    position: relative;
    top: 2px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #216767;
    cursor: pointer;
}

.coconut-overview-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.admin-total-revenue {
    display: flex;
    flex-direction: row;
    padding-top: 25px;
    gap: 120px;
}

.admin-total-revenue span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 38px;
    color: #28396A;

}


.admin-mssp-activities-container {
    height: 368px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px;
    gap: 24px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 8px;
}

.admin-mssp-activity-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* gap: 95px; */
}

.admin-mssp-activity-title-container h5 {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
    white-space: nowrap;
}

.admin-mssp-activity-title-container a {
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-decoration-line: underline;
    color: #216767;
    z-index: 2;
    white-space: nowrap;

}

.admin-mssp-activities-content {
    width: 100%;
    min-height: 291px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    z-index: 1;
    overflow-y: auto;
    gap: 16px;

}

.admin-mssp-activities-content::-webkit-scrollbar {
    width: 8px !important;

}

.admin-mssp-activities-content::-webkit-scrollbar-track {
    background: #FFFFFF;
}

.admin-mssp-activities-content::-webkit-scrollbar-thumb {
    background-color: #216767;
    border-radius: 4px;
}

.admin-mssp-activities-content {
    scrollbar-width: thin;
    scrollbar-color: #216767 #f1f1f1;
}




.admin-mssp-activity-first-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #DBDBDB;
    padding-bottom: 8px;

}



.admin-activity-text {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;

    color: #323233;
    align-items: center;
    flex: 1;

}


.admin-activity-date {
    white-space: nowrap;
    color: #696969;
    flex-shrink: 0;
    text-align: right;
}


.admin-average-usage-card {
    height: 319px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;

}

.admin-instance-systemLoad {
    height: 319px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.average-systemLoad {
    margin-bottom: 100px;
}

.active-instance-content {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.active-instance-content h5 {
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;
    white-space: nowrap;
}

.admin-average-usage-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.admin-average-usage-card h4 {
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396A;
    padding-top: 15px;
    padding-left: 29px;

}

.admin-compare-daily-average {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
    gap: 4px;
    padding-top: 20px;
    padding-left: 29px;
}

.admin-daily-average-count-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 0px;
}

.admin-daily-average-count-content img {
    position: relative;
    bottom: 3px;
}


.admin-daily-average-count {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    color: #398700;
    padding: 0 !important;
    margin: 0 !important;
}

.admin-daily-average-month p {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #696969;
    padding: 0 !important;
    margin: 0 !important;

}

.admin-instance-content {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.admin-instance-content h5 {
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.admin-instance-systemLoad p {
    height: 23px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    color: #28396A;
    padding-left: 50px;
    padding-top: 10px;

}

.admin-countries-container {
    height: 167px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 25px;
    padding-left: 35px;
    gap: 15px;
}

.country-content {
    width: 100%;
    /* height: 11px; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 8px;
}

.country-content span {
    min-width: 100px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.05em;
    color: #222222;

}

.country-content p {
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.05em;
    color: #696969;
    flex-shrink: 0;
}

.instance-line {
    position: relative;
    right: 50px;
    width: 242px;
    height: 0px;
    border: 1px solid #DBDBDB;
    transform: rotate(90deg);
    margin-left: 0px;
    margin-top: 140px;
}

.admin-system-load-content {
    flex-direction: row;
    gap: 8px;
    position: relative;
    right: 108px;
    white-space: nowrap;
}

@media (min-width:1140px) and (max-width:1152px) {
    .admin-system-load-content {
        position: relative;
        /* right: 160px;  */
    }

    .last-updated-text {
        position: relative;
        /* right: 50px; */
    }
}

@media (min-width:1162px) and (max-width:1199px) {
    .admin-system-load-content {
        position: relative;
        /* right: 190px;  */
    }

    .last-updated-text {
        position: relative;
        /* right: 50px; */
    }
}

@media (min-width:1350px) and (max-width:1599px) {
    .admin-system-load-content {
        position: relative;
        right: 130px;
    }
}

.admin-system-load-content h5 {
    position: relative;
    bottom: 20px;
    left: 30px;
    height: 20px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: #28396A;

}

.last-updated-text span {
    position: relative;
    top: 5px;
    right: 15px;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    display: flex;
    align-items: center;
    color: #696969;
}

.view-details-text a {
    position: relative;
    bottom: 5px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-decoration-line: underline;
    color: #216767;
    white-space: nowrap;
    cursor: pointer;
}

@media (min-width:1200px) {

    .total-mssps-card h2,
    .total-msps-card h2,
    .total-orgs-card h2,
    .total-users-card h2 {
        white-space: nowrap;
    }
}

@media (min-width:1391px) and (max-width:1399px) {
    .mssp-manage {
        position: relative;
        right: 150px;
        top: 34px;
    }

    .mssp-manage.mssps {
        position: relative;
        left: -164px;
    }

    .mssp-manage.orgs {
        position: relative;
        left: -140px;
    }

    .mssp-manage.msps {
        position: relative;
        right: 150px;
    }
}

.geolocation-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 55px;
}

.geolocationChart {
    top: 20px;
    right: 255px;
    height: 200px !important;
    width: 400px !important;
}

.geolocation-chart-img {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* top: 44px; */
    width: 100%;
    max-width: 250px;
    height: auto;
}

.month-toggle {
    display: none;
}

.month-dropdown {
    position: relative;
    display: inline-block;
}

.admin-mssp-activities-content-header {
    display: flex;
    justify-content: space-between;
    gap: 11px;
}

.admin-dropdown-icon {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.admin-dropdown-menu {
    position: absolute;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 1000;
    display: none;
    margin-top: 8px;
}

.admin-dropdown-item {
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #28396A;
    cursor: pointer;
}

.admin-dropdown-item:hover {
    background-color: #F5F5F5;
}

.month-toggle:checked~.admin-dropdown-menu {
    display: block;
}

.month-toggle:checked+.month-text .admin-dropdown-icon {
    transform: rotate(180deg);
}

.month-toggle:checked {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}


@media(min-width: 768px) and (max-width: 1350px) {
    .instance-line {
        position: relative;
        right: 30px;
    }
}

.country-distribution-chart {
    position: relative;
    top: 20px;
    right: 255px;
    height: 250px;
    width: 100%;
}

.system-content {

    display: flex;
    justify-content: space-between;
}

@media (min-width:900px) and (max-width:1070px) {
    .last-updated-text {
        position: relative;
        /* bottom: 13px; */
    }
}


@media (min-width:1450px) and (max-width:1530px) {
    .last-updated-text {
        position: relative;
        right: 45px;
    }

    .admin-system-load-content {
        position: relative;
        right: 120px;
    }
}

@media (min-width:1600px) and (max-width:1700px) {
    .last-updated-text {
        position: relative;
        right: 55px;
    }

    .admin-system-load-content {
        position: relative;
        right: 160px;
    }

}

@media (min-width:1701px) and (max-width:1800px) {
    .last-updated-text {
        position: relative;
        right: 70px;
    }

    .admin-system-load-content {
        position: relative;
        right: 200px;
    }
}

@media (min-width:1801px) {
    .last-updated-text {
        position: relative;
        right: 95px;
    }

    .admin-system-load-content {
        position: relative;
        right: 240px;

    }
}


@media (min-width:1300px) {
    .country-content {
        gap: 58px;
    }

}

.average-usage-chart {
    width: 100%;
    height: 170px;

}

@media (min-width: 1200px) and (max-width: 1450px) {
    .active-instance-content h5 {
        font-size: 16px;
    }

    .month-text span {
        position: relative;
        top: 2px;
        font-size: 12px;
    }
}

@media (min-width: 706px) and (max-width: 930px) {
    .admin-system-load-content {
        position: static !important;
        right: auto !important;
        margin-left: 30px;
        /* margin-top: 20px;  */
        margin-right: 30px;
    }

    .last-updated-text {
        position: relative !important;
        right: auto !important;
        margin-left: 30px;
        bottom: 15px;
    }

    .view-details-text {
        position: relative !important;
        bottom: 9px !important;
        margin-left: 30px;
        /* margin-top: 10px; */

    }

    .instance-line {
        transform: none !important;
        width: 100% !important;
        margin: 50px 40px !important;
    }


    .admin-instance-systemLoad {
        flex-direction: column !important;
        height: 800px;
    }

    .system-info-row {
        position: relative;
        bottom: 270px;
        right: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        /* margin-top: 20px; */
        padding-left: 30px;
        /* flex-wrap: wrap;  */
    }
}

.system-info-row {
    position: relative;
    bottom: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width:705px) {
    .system-info-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;

    }

    .admin-system-load-content {
        position: static !important;
        right: auto !important;
        margin-left: 30px;
        margin-right: 30px;
    }

    .last-updated-text {
        position: relative !important;
        right: auto !important;
        margin-left: 30px;

    }

    .view-details-text {
        position: static !important;
        bottom: auto !important;
        margin-left: 30px;
    }

    .instance-line {
        transform: none !important;
        width: 100% !important;
        margin: 50px 40px !important;
    }


    .admin-instance-systemLoad {
        flex-direction: column !important;
        height: 800px;
    }
}


/* ADMIN DASHBOARD END */


@media (min-width:1210px) and (max-width:1450px) {
    .mssp-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 8px;

    }

}

@media (min-width:1101px) and (max-width:1209px) {
    .mssp-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 3px;
    }

}

@media (max-width:1100px) {
    .mssp-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 0px;
    }

}

.role-dropdown-content.userRole.show {
    display: block;
}

.role-dropdown-content.userBrowser.show {
    display: block;
}

.msspheader-cell8 {
    position: relative;
}

.role-dropdown-content.userBrowser {
    display: none;
    position: absolute;
    background-color: var(--dropdown-bg);
    z-index: var(--dropdown-z-index);
    top: 19px;
    margin-top: var(--dropdown-top-margin);
    border-radius: var(--dropdown-border-radius);
    font-size: var(--role-drop-content-font-size);
    /* left: -52px; */
    width: var(--role-dropdown-min-width);
    white-space: nowrap;
    height: 104px;
    padding: 0px 16px 8px 0px;
    background: var(--filtersort-bg-color);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    border: var(--filtersort-border);
}

.role-dropdown-content.useraddedby.show {
    display: block;
}

.dropdown-content.user.show {
    display: block;
}

.dropdown-content.orgName.show {
    display: block;
}

.dropdown-content.userName.show {
    display: block;
}


@media(max-width: 930px) {
    #map-container {
        position: static !important;

    }
}

#map-container {
    position: absolute;
    /* right: 250px; */
    bottom: -50px;
}


/* @media (min-width: 1101px) and (max-width: 1190px) {
   .hover-dropdown-menu {
    display: none;
    position: absolute;
    right: -120px;
}
} */


.session-error-message {
    position: fixed;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #F9D7D7;
    color: #BE5050;
    padding: 12px 12px;
    border-radius: 4px;
    border: 1px solid #BE5050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    gap: 8px;
    height: 48px;

}

.session-error-message span {
    height: 12px !important;
    width: auto !important;
    white-space: nowrap !important;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    width: 100%;
    height: 48px;
    line-height: 140%;

}

.session-error-message .close-btn {
    background: none;
    border: none;
    font-size: 25px;
    cursor: pointer;
    color: #BE5050;
    line-height: 0%;
    transform: scale(1.3);
    opacity: 100%;
}

input[type="radio"] {
    accent-color: auto;
    /* Resets to browser's default radio button color */
}

.chart-canvas {
    position: absolute;
    left: 142px;
    top: -36px;
    width: 280px;
    height: 200px;
    margin: 0 auto;
}

@media (max-width: 980px) {
    .chart-canvas {
        position: relative;
        /* let it stay inside container */
        top: 0;
        left: 0;
        transform: none;
        width: 220px;
        /* smaller chart */
        height: 180px;
        margin: 0 auto;
        /* center using flex or auto margin */
        display: block;
    }
}

/* For screens below 770px */
@media (max-width: 770px) {
    .chart-canvas {
        width: 180px;
        height: 150px;
        margin: 20px auto;
    }
}


/* OrgAdminSettings Start */


/* browser-Geolocation */
.setting-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background: var(--org-card-background-color);
    border: var(--org-listing-sort-border);
    border-radius: var(--org-listing-container-border-radius);
    padding: 16px;
    box-shadow: var(--org-card-box-shadow);
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.browser-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.browser-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.browser-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.browser-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.browser-header-subtitlecontainer,
.allow-location-text {
    padding-left: 32px;
}

.browser-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.allow-location-text p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.user-header-container-right,
.header-container-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.user-hearder-subcontainer-right,
.hearder-subcontainer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hearder-subcontainer-right.country-flag {
    font-size: 20px;
    color: #28396A;
}

.user-hearder-subcontainer-right,
.hearder-subcontainer-right span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-subtitle-text-color);
}

.expand-down-arrow {
    font-size: 16px;
    color: var(--enduser-download-dropdown-color);
    transition: transform 0.3s;
}

.expand-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    height: 107px;
    padding: 0px;
}

.expand-content-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    height: 71px;
    padding: 0px;
}

.expand-content-subconatainer2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 71px;
    padding-left: 32px;
}

.expand-content-subconatainer3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.expand-content-subconatainer3 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--org-card-subvalue-text-color);
    line-height: 120%;
}

.select-geolocation-country {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    width: 344px;
}

.select-geolocation-country span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #216767;
}

.select-geolocation-country i {
    color: #216767;
}

.geolocation-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 40px;
    width: 249px;
}

.geolocation-change-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    width: 116px;
}

.geolocation-change-button-subcontainer {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    background-color: var(--adduser-button-bg-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 16px 24px;
    color: var(--adduser-button-text-color);
    border: var(--adduser-button-border);
}

.geolocation-change-button-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--adduser-button-text-color);
    opacity: 100%
}

.geolocation-cancel-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    width: 116px;
}

.geolocation-cancel-button-subcontainer {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    background-color: var(--action-button-bg-color);
    border-radius: 4px;
    cursor: pointer;
    padding: 16px 24px;
    border: var(--action-button-border);
}

.geolocation-cancel-button-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--action-button-text-color);
    opacity: 100%
}

.apply-existing-user-checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    height: 24px;
    padding-left: 32px;
}


.apply-existing-user-checkbox-subcontainer {
    height: 24px;
    width: 24px;
}


.apply-existing-user-checkbox-subcontainer1 {
    display: flex;
    flex-direction: row;
    height: 18px;
    width: 18px;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    background: #34B1B1;
    border-radius: 3px;
}

.apply-existing-user-checkbox-subcontainer1 input {
    width: 18px;
    height: 18px;
    text-align: center;
    accent-color: #34B1B1 !important;
    /* background-color: #34B1B1 !important; */
}

.apply-existing-user-checkbox-subcontainer1 {
    display: inline-flex;
    align-items: center;
}

.apply-existing-user-checkbox-subcontainer1 input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #34B1B1;
    border-radius: 4px;
    background-color: var(--org-listing-container-checkbox-color);
    cursor: pointer;
    position: relative;
    opacity: 50%;
}

/* .browser-permission-checkboxdownload-container input[type="checkbox"]:checked {
    background-color: #FFFFFF !important;
    border-color: #34B1B1;
} */
.apply-existing-user-checkbox-subcontainer1 input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

.apply-existing-user-checkbox-subcontainer1 input[type="checkbox"]:checked {
    opacity: 100%;
}

.browser-permission-download-container span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #323233;
}

.apply-existing-user-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--org-card-checkbox-tick-text-color);
    opacity: 50%;
}



/* Browser-Geolocation end */
/* License Threshold Start */
.setting-license-threshold-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background-color: var(--org-card-background-color);
    /* box-shadow: var(--org-listing-container-box-shadow); */
    border-radius: var(--org-listing-container-border-radius);
    border: var(--org-listing-sort-border);
    padding: 16px;
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.user-setting-license-threshold-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.threshold-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.threshold-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.threshold-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.threshold-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.threshold-header-subtitlecontainer {
    padding-left: 32px;
}

.threshold-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.license-threshold-expand-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 79px;

}

.license-threshold-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    height: 23px;
}

.license-threshold-subconatainer1 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--org-card-subvalue-text-color);
    line-height: 160%;
}

.license-threshold-incrment-decrement-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    /* width: 136px; */
}


.license-thresold-decrement-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    background-color: var(--adduser-button-bg-color);
}

.license-thresold-decrement-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.license-thresold-decrement-button-subcontainer i {
    color: #FFFFFF;

}

.license-threshold-incrment-decrement-input-container {
    display: flex;
    width: 56px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: var(--action-button-bg-color);
    color: var(--action-button-text-color);
}

.license-threshold-incrment-decrement-input-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
}

.license-thresold-decrement-button-subcontainer span {
    color: #323233;

}

.license-thresold-increment-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: #216767;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    background-color: var(--adduser-button-bg-color);
}

.license-thresold-increment-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.license-thresold-increment-button-subcontainer i {
    color: #FFFFFF;

}

.license-threshold-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    height: 40px;
    width: 249px;
    margin-left: 24px;
}

/* License Threshold End */
/* BrowserPermission Start */

.browser-permission-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 126px;
    width: 538px;
}

.browser-permission-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 22px;
}

.browser-permission-header-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: row;
    gap: 4px;
    height: 22px;
}

.browser-permission-header-subcontainer span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--org-card-subvalue-text-color);
    line-height: 165%;
}

.browser-permission-checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 88px;
}

.browser-permission-checkbox-subcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    height: 24px;
    width: 400px;
}

.browser-permission-download-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.browser-permission-checkboxdownload-container {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.browser-permission-checkboxdownload-container input {
    width: 18px;
    height: 18px;
    text-align: center;
    accent-color: #34B1B1 !important;
    /* background-color: #34B1B1 !important; */
}

.browser-permission-checkboxdownload-container {
    display: inline-flex;
    align-items: center;
}

.browser-permission-checkboxdownload-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--org-listing-container-checkbox-color);
    border-radius: 4px;
    background-color: var(--org-listing-container-checkbox-color);
    cursor: pointer;
    position: relative;
}

/* .browser-permission-checkboxdownload-container input[type="checkbox"]:checked {
    background-color: #FFFFFF !important;
    border-color: #34B1B1;
} */
.browser-permission-checkboxdownload-container input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

.browser-permission-download-container span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--org-card-subvalue-text-color);
}

.browser-permission-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    gap: 16px;
}

.browser-permission-save-button-container {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);
    border-radius: 4px;
}

.browser-permission-save-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--adduser-button-text-color);
}

.browser-permission-cancel-button-container {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--action-button-bg-color);
    border-radius: 4px;
    border: 1px solid var(--action-button-border-color);
}

.browser-permission-cancel-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--action-button-text-color);
}

.select-geolocation-country {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    background: var(--org-modal-inputfield-bg-color) !important;
    border: 1px solid var(--org-modal-inputfield-border-color) !important;
    width: 344px;
    position: relative;
    cursor: pointer;
    user-select: none;
    color: var(--org-modal-inputfield-text-color) !important;
}

.select-geolocation-country span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--org-modal-inputfield-text-color) !important;
}

.select-geolocation-country i {
    color: var(--action-button-text-color);
    transition: transform 0.2s ease;
}

/* 1. Hide everything inside expanded area */
.expand-content-conatainer {
    display: none !important;
}

/* 2. Show only when card is open */
.setting-card-container[data-state="open"] .expand-content-conatainer,
.setting-card-container[style*="height: 237px"] .expand-content-conatainer {
    display: flex !important;
}

/* 3. Let dropdown fly out */
.setting-card-container {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* .setting-card-container[data-state="open"] {
    z-index: 10020;
} */

.setting-card-container[data-state="open"] .select-geolocation-country {
    z-index: 10021;
}

.setting-card-container[data-state="open"] .select-geolocation-country.open {
    z-index: 10022;
}

.country-options {
    position: absolute;
    /* change from top → bottom so the menu grows upwards */
    left: 0;
    width: 100%;
    height: 150px;
    overflow-y: auto;

    background: var(--dropdown-card-bg-color);
    border: 1px solid var(--dropdown-card-border-color);
    border-radius: 4px;
    box-shadow: var(--dropdown-card-box-shadow);
    /* shadow upwards */
    z-index: 10030 !important;
    top: 45px;

    /* open animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* start a little lower */
    transition: all 0.2s ease;
    padding: 8px;
}

/* when opened */
.country-options.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.country-options.hover {
    background: var(--dropdown-card-hover-bg-color);
}

.country-options .option.preferred {
    background: var(--settings-preferred-color) !important;
    font-weight: 600;
    border-left: 3px solid var(--settings-preferred-border-color);
    padding-left: 9px !important;
}

.geolocation-change-button-container.disabled {
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.geolocation-change-button-container.enabled {
    opacity: 1 !important;
    pointer-events: auto;
    cursor: pointer;
}


/* settings-blocklist start */

.blocklisturl-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.blocklisturl-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.blocklisturl-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.blocklisturl-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.blocklisturl-header-subtitlecontainer {
    padding-left: 32px;
}

.blocklisturl-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.blocklisturl-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 111px;
    padding-left: 30px;
}

.blocklisturl-content-conatainer2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 231px;
    padding-left: 30px;
}

.blocklisturl-subcontainer-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    height: 47px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.blocklisturl-subcontainer-header span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15.04px;
    color: var(--org-card-subvalue-text-color);
}

.blocklisturl-button-conatainer {
    display: flex;
    align-items: flex-start;
    height: 40px;


}

.blocklisturl-button-subconatainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    background-color: #216767;
    width: 117px;

}

.blocklisturl-button-subconatainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
}

#blocklistUrlEditMode {
    display: none;


}

.blocklistUrlEditMode-subcontainer {
    display: flex;
    height: 167px;
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
    background-color: #F6FFF8;
    opacity: 100%;
    border: 1px solid #D2E0D5;
    width: 100%;
    align-items: flex-start;
    /* TEXT STARTS FROM TOP */
    justify-content: flex-start;
    box-sizing: border-box;

}

.blocklist-sub-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 257px;
    height: 40px;
}

.blocklist-sub-changebutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.blocklist-sub-changebutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);
    cursor: pointer;
}

.blocklist-sub-changebutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--adduser-button-text-color);
    opacity: 100%
}

.blocklist-sub-cancelbutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.blocklist-sub-cancelbutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--action-button-bg-color);
    cursor: pointer;
    border: var(--action-button-border);
}

.blocklist-sub-cancelbutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--action-button-text-color);
    opacity: 100%
}

.blocklistUrlEditMode-input-wrapper {
    width: 100%;
    min-height: 167px;
    padding: 16px 12px;
    background-color: var(--org-modal-inputfield-bg-color);
    border: 1px solid var(--org-modal-inputfield-border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.blocklistUrlEditMode-input-wrapper:focus-within {
    border: 1px solid var(--org-modal-inputfield-border-color);
}

.blocklistUrlEditMode-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 15.04px;
    color: var(--org-modal-inputfield-text-color);
    font-weight: 400;
    resize: none;
    line-height: 1.6;
    min-height: 150px;

}

.blocklistUrlEditMode-input::placeholder {
    color: var(--org-modal-inputfield-placeholder-color);
}

.zero-block-list-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-modal-sub-text-color);
    line-height: 16px;
    font-weight: 400;
}

.zero-block-list-text strong {
    color: var(--org-modal-sub-text-color);
    font-weight: 700;
    opacity: 1;
}

/* settings-block end */

/* whitelist start */

.whitelisturl-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.whitelisturl-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.whitelisturl-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.whitelisturl-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.whitelisturl-header-subtitlecontainer {
    padding-left: 32px;
}

.whitelisturl-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.whitelisturl-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 111px;
    padding-left: 30px;
}

.whitelisturl-subcontainer-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    height: 47px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.whitelisturl-subcontainer-header span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15.04px;
    color: var(--org-card-subvalue-text-color);
}


.whitelisturl-button-conatainer {
    display: flex;
    align-items: flex-start;
    height: 40px;


}

.whitelisturl-button-subconatainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    background-color: #216767;
    width: 117px;

}

.whitelisturl-button-subconatainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
}

.whitelisturl-content-conatainer2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 231px;
    padding-left: 30px;
}

#whitelistUrlEditMode {
    display: none;


}

.whitelistUrlEditMode-input-wrapper {
    width: 100%;
    min-height: 167px;
    padding: 16px 12px;
    background-color: var(--org-modal-inputfield-bg-color);
    border: 1px solid var(--org-modal-inputfield-border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.whitelistUrlEditMode-input-wrapper:focus-within {
    border: 1px solid var(--org-modal-inputfield-border-color);
}

.whitelistUrlEditMode-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 15.04px;
    color: var(--org-modal-inputfield-text-color);
    font-weight: 400;
    resize: none;
    line-height: 1.6;
    min-height: 150px;

}

.whitelistUrlEditMode-input::placeholder {
    color: var(--org-modal-inputfield-placeholder-color);
}

.whitelist-sub-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 257px;
    height: 40px;
}

.whitelist-sub-changebutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.whitelist-sub-changebutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--adduser-button-bg-color);
    cursor: pointer;
    border: var(--adduser-button-border);
}

.whitelist-sub-changebutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--adduser-button-text-color);
    opacity: 100%
}

.whitelist-sub-cancelbutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.whitelist-sub-cancelbutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--action-button-bg-color);
    cursor: pointer;
    border: var(--action-button-border);
}

.whitelist-sub-cancelbutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--action-button-text-color);
    opacity: 100%
}

/* whitelist end */


/* settings-session-timeout */

.setting-sessiontimeout-card-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 84px;
    background-color: var(--org-card-background-color) !important;
    /* box-shadow: var(--org-listing-container-box-shadow) !important; */
    border-radius: var(--org-listing-container-border-radius) !important;
    border: var(--org-listing-sort-border) !important;
    padding: 16px !important;
    transition: height 0.3s ease, gap 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
    backdrop-filter: blur(10px) !important;
}


.sessiontimeout-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.sessiontimeout-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}


.sessiontimeout-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.sessiontimeout-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.sessiontimeout-header-subtitlecontainer {
    padding-left: 32px;
}

.sessiontimeout-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.session-timeout-expand-content-conatainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    height: 79px !important;

}

.session-timeout-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    height: 23px;
}

.session-timeout-subconatainer1 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--org-card-subvalue-text-color);
    line-height: 160%;
}

.session-timeout-incrment-decrement-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    /* width: 136px; */
}

.session-timeout-decrement-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: var(--adduser-button-bg-color);
    align-items: center;
    justify-content: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
}

.session-timeout-decrement-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.session-timeout-decrement-button-subcontainer i {
    color: #FFFFFF;

}

.session-timeout-decrement-button-subcontainer span {
    color: #323233;

}

.session-timeout-incrment-decrement-input-container {
    display: flex;
    width: 56px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: var(--action-button-bg-color);
    color: var(--action-button-text-color);
}


.session-timeout-increment-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: var(--adduser-button-bg-color);
    align-items: center;
    justify-content: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
}

.session-timeout-increment-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.session-timeout-increment-button-subcontainer i {
    color: #FFFFFF;

}

.session-timeout-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    height: 40px;
    width: 249px;
    margin-left: 24px;
}

/* session timeoutend */

.browser-permission-setting-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background-color: var(--org-card-background-color);
    /* box-shadow: var(--org-listing-container-box-shadow); */
    border-radius: var(--org-listing-container-border-radius);
    border: var(--org-listing-sort-border);
    padding: 16px;
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* settingsroles */

.user-setting-role-card-container,
.allow-geolocation-card-container,
.setting-role-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background-color: var(--org-card-background-color);
    border: var(--org-listing-sort-border);
    border-radius: var(--org-listing-container-border-radius);
    padding: 16px;
    /* box-shadow: var(--org-listing-container-box-shadow); */
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}



.setting-role-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.setting-role-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}




.setting-role-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.setting-role-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: var(--org-home-title-text-color);
    height: 20px;
    display: flex;
    align-items: center;
}

.setting-role-header-subtitlecontainer {
    padding-left: 32px;
}

.setting-role-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}



.setting-role-expand-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 79px;

}


.setting-role-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    height: 40px;
    width: 400px;
    /* margin-left: 32px; */


}

/* .setting-role-subconatainer1 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #323233;
    line-height: 160%;
} */

.setting-role-radio-button-container {
    display: flex;
    height: 40px;
    align-items: center;
    flex-direction: row;
    width: 373px;
    gap: 36px;
    padding: 16px 0 16px 30px;
    color: var(--org-card-subvalue-text-color);

}

.setting-role-standard-user-container {
    display: flex;
    flex-direction: row;
    gap: 4px;
    height: 24px;
    width: 151px;
}

.setting-role-standard-user-radiobutton-container {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
}


/* Hide default radio button */
.setting-role-standard-user-radiobutton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    position: relative;
    outline: none;
}

/* Outer circle (18px radius → 36px diameter) */
.setting-role-standard-user-radiobutton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: transparent;
    border: var(--org-modal-radiobutton-border);
    /* default border */
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

/* Inner filled circle (12px radius → 24px diameter) */
.setting-role-standard-user-radiobutton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--org-modal-radiobutton-color);
    /* selected color */
    transform: translate(-100%, -100%) scale(0);
    transition: transform 0.2s ease;
    box-sizing: border-box;
}

/* When checked: show inner circle */
.setting-role-standard-user-radiobutton:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

.setting-role-standard-user-text {
    width: 123px;
    height: 22px;
}

.setting-role-standard-user-text span {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #323233;
    font-weight: 600px;
    line-height: 120%;

}

.setting-role-button-conatainer {
    display: flex;
    flex-direction: row;
    width: 249px;
    height: 40px;
    gap: 16px;
    align-items: flex-start;
}

.setting-role-button-subconatainer {
    display: flex;
    width: 116px;
    height: 40px;
    align-items: flex-start;
}

.usersetting-role-button-subconatainer1,
.setting-role-button-subconatainer1 {
    width: 117px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);

}

.usersetting-role-button-subconatainer1 span,
.setting-role-button-subconatainer1 span {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--adduser-button-text-color);
    line-height: 23.4%;
}

.setting-role-cancelbutton-subconatainer {
    display: flex;
    width: 116px;
    height: 40px;
    align-items: flex-start;
}

.setting-role-cancelbutton-subconatainer1 {
    width: 117px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: var(--action-button-bg-color);
    border: var(--action-button-border);

}

.setting-role-cancelbutton-subconatainer1 span {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--action-button-text-color);
    line-height: 23.4%;
}

/* License Page  */

.license-sort-status {
    position: relative;
    top: 25px;
    width: 100%;
    height: 16px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    display: flex;
    align-items: center;
    color: #28396A;
}

.license-search-mssp {
    width: 320px;
    height: 44px;
    opacity: 1;
    position: absolute;
    left: 72px;
    border-radius: 4px;
    background-color: #FFFFFF;
    border: 1px solid #DBDBDB;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 42px;
    padding: 0px;

}

.license-search-mssp-input::placeholder {
    color: #28396A;
    opacity: 1;
}

.license-search-mssp-icon-color {
    color: var(--org-listing-sort-icon-color);
}

.license-orgs-title-container {
    width: 100%;
    height: 47px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;


}

.license-orgs-title {
    width: 100%;
    height: 47px;
    font-style: var(--font-family-mulish);
    font-weight: var(--mulish-weight-bold);
    font-size: var(--mulish-header-24-bold);
    line-height: 100%;
    display: flex;
    align-items: center;
    color: var(--primary-blue);
    white-space: nowrap;
}

.license-orgs-subtitle {
    width: 400px;
    height: 15px;
    font-style: var(--font-family-inter);
    font-weight: var(--inter-weight-regular);
    font-size: var(---inter-body-16-regular);
    line-height: 140%;
    display: flex;
    align-items: center;
    color: var(--primary-blue);
}

.license-search-butttons {
    margin-top: 50px;
}

.license-search-container input:focus {
    box-shadow: none;
    border: none;
}

.license-search-icon {
    position: absolute;
    right: var(--search-icon-right);
    top: var(--search-icon-top);
    transform: translateY(-50%);
    color: var(--search-icon-color);
    pointer-events: none;
}

.license-search-icon-color {
    color: #28396A;
}

.dropdown-search-menu {
    position: absolute;
    top: var(--dropdown-search-menu-top);
    left: var(--dropdown-search-menu-left);
    right: var(--dropdown-search-menu-rigt);
    background-color: var(--org-listing-sort-dropdown-bg-color);
    border: var(--org-listing-sort-border);
    max-height: var(--dropdown-search-menu-max-height);
    overflow-y: auto;
    z-index: var(--dropdown-search-menu-z-index);
    border-radius: var(--dropdown-search-menu-border-radius);
    box-shadow: var(--org-card-box-shadow);
    width: 100%;
}

.license-dropdown-search-menu .dropdown-search-item {
    padding: var(--dropdown-search-menu-item-padding);
    cursor: pointer;
    border-bottom: var(--dropdown-search-menu-item-border);
}

.license-dropdown-search-menu .dropdown-search-item:last-child {
    border-bottom: none;
}

.license-dropdown-search-menu .dropdown-search-item:hover {
    background-color: var(--dropdown-search-menu-hover-bg);
}

.license-action_and_addmsp__button {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;

}

@media (max-width: 768px) {
    .license-action_and_addmsp__button {
        right: 16px;
        top: 120px;
        width: 200px;
    }
}

.license-action_and_addmsp__button .dropdown .btn {
    width: 104px;
    height: 44px;
    padding: 10px 8px;
    border-radius: 4px;
    border: 1px solid var(--primary-green);
    background-color: #FFFFFF;
    color: var(--primary-green);
    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);

}

.license-action_and_addmsp__button .btn-primary {
    width: 126px;
    height: 44px;
    background-color: var(--primary-green);
    color: #ffffff;
    border-radius: 4px;

    font-family: var(--font-family-mulish);
    font-size: var(--mulish-body-16-semibold);
    font-weight: var(--mulish-weight-bold);
    opacity: var(--opacity);
}

.license-action_and_addmsp__button button.btn-primary:active {
    background-color: var(--primary-green);
    border: none;
}

.license-action_and_addmsp__button.btn-secondary {
    width: 104px;
    height: 44px;
}

.license-table-orgs {
    position: relative;
    top: 50px;
}

.license-orgs-table-container {
    width: 100%;
    min-height: 543px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #FFFFFF;
    filter: drop-shadow(4px 4px 18px rgba(92, 92, 92, 0.25));
    box-sizing: border-box;
    opacity: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 1100px) {
    .license-orgs-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    .license-orgs-table-container::-webkit-scrollbar {
        height: 2px;
    }

    .license-orgs-table-container::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .license-orgs-table-container::-webkit-scrollbar-thumb {
        background: #216767;
        border-radius: 4px;
    }

    .license-orgs-table-container::-webkit-scrollbar-thumb:hover {
        background: #1a5252;
    }


    .license-orgs-table-container {
        scrollbar-width: thin;
        scrollbar-color: #216767 #f1f1f1;
    }
}

.license-table-inner-content {
    width: 100%;
    /* min-height: 496px; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    flex: 1 1 auto;
}

.license-table-inner-content {
    min-width: 1000px;
}

.license-checkbox-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* padding: 12px 24px; */
    padding: 12px 12px;
    gap: 12px;
    flex: 0 0 112px;
    min-width: 112px;

}

@media (min-width: 1241px) and (max-width: 1490px) {
    .license-checkbox-container {
        margin-left: 0 !important;
    }
}

@media (min-width: 1751px) {
    .license-checkbox-container {
        position: relative;
        right: 0;
    }
}

@media (min-width: 1901px) {
    .license-checkbox-container {
        position: relative;
        right: 0;
    }
}


.license-data-row {
    display: flex;
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #EFF0F1;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
    margin: 0;
}

.license-data-row>div {
    padding: 12px;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-mulish);
    font-size: 14px;
    color: #28396A;
}

.license-data-row:nth-child(odd) {
    background-color: #F4F4F4;
}

/* .license-data-row:hover .status-default {
    display: none;
} */

.license-data-row:hover .mssp-status-buttons {
    display: flex;
    gap: 24px;

}


.license-data-row.active-row .mssp-status-buttons {
    display: flex !important;

}

/* 
.license-data-row:hover {
    width: 100%; 
    height: 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 1px;
    z-index: 100;
} */

@media (min-width:1210px) and (max-width:1450px) {
    .license-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 8px;

    }

}

@media (min-width:1101px) and (max-width:1209px) {
    .license-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 3px;
    }

}

@media (max-width:1100px) {
    .license-data-row:hover .mssp-status-buttons.users {
        display: flex;
        gap: 0px;
    }
}

.license-data-checkbox-container {

    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    padding: 12px 24px;
    flex: 0 0 66px;
    min-width: 66px;
    gap: 12px;
}

.license-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.license-tooltip-wrapper {
    position: relative !important;
    overflow: visible !important;
}

.license-tooltip-trigger:hover+.license-tooltip {
    visibility: visible;
    opacity: 1;
}

.license-orgs-main-container {
    margin-left: -15px !important;
    padding-left: 0px !important;
}

/* ===========================================
   GLOBAL SCROLL FIX (Horizontal + Vertical)
   =========================================== */
.license-orgs-table-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 160px);
    position: relative;
}

.license-table-inner,
.license-table-inner-content {
    min-width: 1200px !important;
}

.license-planTable-header-orgs>div,
.license-data-row>div {
    white-space: nowrap !important;
}

/* ===========================================
   RESPONSIVE RANGES 1980px → 1280px
   =========================================== */

/* 1980px – 1600px */
@media (max-width: 1980px) and (min-width: 1601px) {

    .license-table-inner,
    .license-table-inner-content {
        min-width: 1350px !important;
    }
}

/* 1600px – 1440px */
@media (max-width: 1600px) and (min-width: 1440px) {

    .license-table-inner,
    .license-table-inner-content {
        min-width: 1280px !important;
    }
}

/* 1440px – 1280px */
@media (max-width: 1440px) and (min-width: 1280px) {

    .license-orgs-table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .license-table-inner,
    .license-table-inner-content {
        min-width: 1000px !important;
    }

    .license-navbar-subcontainer {
        gap: 320px !important;
    }

    .license-Plandata-cell1 p,
    .license-Plandata-cell2 p,
    .license-Plandata-cell3 p,
    .license-Plandata-cell4 p,
    .license-Plandata-cell5 p {
        max-width: 14ch !important;
        font-size: 15px !important;
    }
}

/* ───────────── License history ─────────────────*/

.cba-download-container {
    position: absolute;
    top: 105%;
    left: 12%;
    width: 542px;
    height: 34px;
    display: flex;
    align-items: flex-start;
    gap: 38px;
}

.cba-download-window-container {

    width: 251px;
    height: 34px;
}

.cba-download-window-subcontainer {
    display: flex;
    flex-direction: row;
    height: 34px;
    align-items: flex-start;
    gap: 8px;
    padding-top: 5px;
}

.cba-download-window-dropcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.cba-download-window-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
}

.cba-download-window-text-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    /* gap: 2px; */
}

.cba-download-window-span-text1 {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--enduser-download-text-color);
    line-height: 160%;
    height: 22px;
    width: 220px;
}

.cba-download-window-span-text2 {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--enduser-cba-text-color-new);
    line-height: 140%;
    height: 10px;
    width: 220px;
}

.cba-download-window-expand-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}

.cba-download-window-subcontainer.expanded .cba-download-window-expand-container {
    max-height: 50px;
    opacity: 1;
    margin-top: 2px;
}

.cba-download-window-expand-subcontainer1 a,
.cba-download-window-expand-subcontainer2 a {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--org-modal-template-download-color);
    line-height: 160%;


}

.cba-download-window-subcontainer.expanded .expand-down-arrow {
    transform: rotate(180deg);
}

.expand-down-arrow {
    transition: transform 0.3s ease;
}

.cba-download-window-dropcontainer,
.cba-download-window-text-subcontainer {
    cursor: pointer;
}




/* ──────────────────────────────
   DESKTOP APP STYLES (copy of Window)
   ────────────────────────────── */
.cba-download-desktop-container {
    width: 251px;
    height: 34px;
}

.cba-download-desktop-subcontainer {
    display: flex;
    flex-direction: row;
    height: 34px;
    align-items: flex-start;
    gap: 8px;
    padding-top: 5px;
}

.cba-download-desktop-dropcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

.cba-download-desktop-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
}

.cba-download-desktop-text-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    /* gap: 2px; */
}

.cba-download-desktop-span-text1 {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--enduser-download-text-color);
    line-height: 160%;
    height: 22px;
    width: 220px;
}

.cba-download-desktop-span-text2 {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--enduser-cba-text-color-new);
    line-height: 140%;
    height: 10px;
    width: 220px;
}

/* Expandable links (hidden by default) */
.cba-download-desktop-expand-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
}

.cba-download-desktop-subcontainer.expanded .cba-download-desktop-expand-container {
    max-height: 50px;
    opacity: 1;
    margin-top: 2px;
}

.cba-download-desktop-expand-subcontainer1 a,
.cba-download-desktop-expand-subcontainer2 a {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--org-modal-template-download-color);
    line-height: 160%;
}

/* Arrow rotation */
.cba-download-desktop-subcontainer.expanded .expand-down-arrow {
    transform: rotate(180deg);
}

.cba-download-desktop-dropcontainer,
.cba-download-desktop-text-subcontainer {
    cursor: pointer;
}


.dynamic-text,
.email-truncate {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* v1-Billing-Module Start*/

.billing-purchase-model {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 35px;
    width: 456px;
    border-radius: 4px;
    background: var(--modal-background-color);
    padding: 24px;
    border: none !important;
    backdrop-filter: blur(10px);

}

.billing-purchase-model-subcontainer {
    width: 408px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
    padding: 0px !important;
}

.billing-purchase-model-header-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.billing-purchase-model-header-subcontainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.billing-purchase-model-header-subcontainer span {
    font-family: 'Mulish', sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    color: var(--org-home-title-text-color) !important;
    line-height: 100% !important;


}

.billing-purchase-model-header-subcontainer .btn-close {
    position: relative;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.billing-purchase-model-body-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

}

.billing-purchase-model-body-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.billing-purchase-model-body-progress-main-container {
    display: flex;
    align-items: center;
}

.billing-purchase-model-progressbar-container,
.billing-purchase-model-progressbar-container2,
.billing-purchase-model-progressbar-container3 {
    width: 136px;
    height: 40px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    /* background-color: red !important; */

}

.billing-purchase-model-progressbar-step-indicator {
    width: 136px !important;
    height: 4px !important;
}

.billing-purchase-model-progressbar-step-active {
    background-color: var(--org-modal-template-download-color) !important;
    /* Active step */
}

.billing-purchase-model-progressbar-step-inactive {
    background-color: #D2E0D5 !important;
    /* Inactive steps */
}

.billing-purchase-model-progressbar-step1-details-container,
.billing-purchase-model-progressbar-step2-details-container,
.billing-purchase-model-progressbar-step3-details-container {
    display: flex !important;
    width: 136px !important;
    height: 32px !important;
    align-items: center !important;
    gap: 8px !important;
}

.billing-purchase-model-progressbar-step1-details-number-container,
.billing-purchase-model-progressbar-step2-details-number-container,
.billing-purchase-model-progressbar-step3-details-number-container {
    display: flex !important;
    flex-direction: column !important;
    width: 32px !important;
    height: 32px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 100% !important;
    gap: 10px !important;
    background-color: #216767 !important;

}





.billing-purchase-model-progressbar-step1-details-number-container span,
.billing-purchase-model-progressbar-step2-details-number-container span,
.billing-purchase-model-progressbar-step3-details-number-container span {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
}



/* Active state */
.step-number.step-active {
    background-color: var(--org-modal-template-download-color) !important;
}

.step-number.step-active span {
    color: #FFFFFF !important;
}

/* Inactive state */
.step-number.step-inactive {
    background-color: var(--mssp-billing-table-inactive-color) !important;
}

.step-number.step-inactive span {
    color: #323233 !important;
}

.billing-purchase-model-progressbar-step1-details-text-container span,
.billing-purchase-model-progressbar-step2-details-text-container span,
.billing-purchase-model-progressbar-step3-details-text-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--mssp-billing-table-text-color) !important;
}

/* Step label colors: inactive white, active green (as in Figma). */
.billing-purchase-model-progressbar-step1-details-container > div:not(.step-number) span,
.billing-purchase-model-progressbar-step2-details-container > div:not(.step-number) span,
.billing-purchase-model-progressbar-step3-details-container > div:not(.step-number) span {
    color: #FFFFFF !important;
}

.billing-purchase-model-progressbar-step1-details-container .step-number.step-active + div span,
.billing-purchase-model-progressbar-step2-details-container .step-number.step-active + div span,
.billing-purchase-model-progressbar-step3-details-container .step-number.step-active + div span {
    color: var(--org-modal-template-download-color) !important;
}

.billing-purchase-model-body-no-active-plan-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #323233 !important;

}

.billing-purchase-model-body-table-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.billing-purchase-model-body-table-header-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

}

.billing-purchase-model-body-table-header-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.billing-purchase-model-body-table-header-text-subcontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;

}

.billing-purchase-model-body-table-header-text-subcontainer span {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--org-home-title-text-color) !important;
}

.billing-purchase-model-body-table-monthly-annual-checkbox-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
}

.billing-purchase-model-body-table-monthly-annual-checkbox-subcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.billing-purchase-model-body-table-monthly-checkbox-container,
.billing-purchase-model-body-table-annual-checkbox-container {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
}

/* Hide default radio button */
.billing-purchase-model-body-table-monthly-radiobutton,
.billing-purchase-model-body-table-annual-radiobutton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    position: relative;
    outline: none;
}

/* Outer circle (18px radius → 36px diameter) */
.billing-purchase-model-body-table-monthly-radiobutton::before,
.billing-purchase-model-body-table-annual-radiobutton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: transparent;
    border: 1px solid var(--org-modal-progressbar-background-color);
    /* default border */
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

/* Inner filled circle (12px radius → 24px diameter) */
.billing-purchase-model-body-table-monthly-radiobutton::after,
.billing-purchase-model-body-table-annual-radiobutton::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--org-modal-progressbar-background-color);
    /* selected color */
    transform: translate(-100%, -100%) scale(0);
    transition: transform 0.2s ease;
    box-sizing: border-box;
}

/* When checked: show inner circle */
.billing-purchase-model-body-table-monthly-radiobutton:checked::after,
.billing-purchase-model-body-table-annual-radiobutton:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

.billing-purchase-model-body-table-checkbox-monthly-text-container span,
.billing-purchase-model-body-table-checkbox-anuual-text-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 140%;
    color: var(--org-card-subvalue-text-color) !important;

}

.billing-purchase-model-body-table-plan-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* height: 200px; */
}

.billing-purchase-model-body-table-plan-title-container span {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--org-home-title-text-color) !important;
}

.billing-purchase-model-body-table-plan-row-column-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: -1px;
    width: 100%;
    border-radius: 4px;

}

.billing-purchase-model-body-table-plan-row-column-subcontainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    gap: 0px;
    border: 1px solid #CCE6D2;
    height: 170px;
    overflow-y: auto;
    /* Add vertical scroll when needed */
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: #216767 #F0F0F0;
}

.billing-purchase-model-body-table-plan-column1-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    width: 111px;

}


.price-per-user {
    display: none;
}

.billing-plan-cell.selected .price-per-user {
    display: block;
}

.billing-purchase-model-body-table-plan-column1-item-cell2-text-subcontainer .sub-price-per-user,
.billing-cycle-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    color: var(--org-home-subtitle-text-color) !important;
    line-height: 130%;
}

/* More specific selector */
.billing-purchase-model-body-table-plan-column2-item-cell2-text-container .billing-plan-price-detail .price-value {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    color: var(--org-home-subtitle-text-color) !important;
    line-height: 130% !important;
}


/* Default state - UPDATED with !important to ensure override */
.billing-purchase-model-body-table-plan-column1-item-cell1-container,
.billing-purchase-model-body-table-plan-column1-item-cell2-container,
.billing-purchase-model-body-table-plan-column1-item-cell3-container {
    width: 111px !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 10px !important;
    border: 1px solid #EFF0F1 !important;

    /* border-right: 0 !important; */
    /* background-color: #F4F4F4; */
}

/* Selected state - should override default */
.billing-purchase-model-body-table-plan-column1-item-cell2-container.selected,
.billing-purchase-model-body-table-plan-column2-item-cell2-container.selected,
.billing-purchase-model-body-table-plan-column3-item-cell2-container.selected {
    /* width: 111px !important; */
    height: 72px !important;
    /* This will override the 48px */
    border: 2px solid var(--org-modal-template-download-color) !important;
    border-right: 0 !important;
    /* Add background color for visual feedback */
}

.billing-purchase-model-body-table-plan-column2-item-cell2-container.selected,
.billing-purchase-model-body-table-plan-column3-item-cell2-container.selected {

    border-left: 0 !important;

}



/* For column 3, keep right border */
.billing-purchase-model-body-table-plan-column3-item-cell2-container {
    border-right: 1px solid #EFF0F1 !important;
}

.billing-purchase-model-body-table-plan-column3-item-cell2-container.selected {
    border-right: 1px solid #216767 !important;
}

.billing-purchase-model-body-table-plan-column1-item-cell3-container {
    background-color: #F4F4F4;
}



/* Column 1 */
.billing-purchase-model-body-table-plan-column1-item-cell2-container.selected .billing-purchase-model-body-table-plan-column1-item-cell2-text-container {
    /* width: 87px; */
    height: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Column 2 */
.billing-purchase-model-body-table-plan-column2-item-cell2-container.selected .billing-purchase-model-body-table-plan-column2-item-cell2-text-container {
    /* width: 87px; */
    height: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Column 3 */
.billing-purchase-model-body-table-plan-column3-item-cell2-container.selected .billing-purchase-model-body-table-plan-column3-item-cell2-text-container {
    /* width: 87px; */
    height: 46px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Default styles for all */
.billing-purchase-model-body-table-plan-column1-item-cell2-text-container,
.billing-purchase-model-body-table-plan-column2-item-cell2-text-container,
.billing-purchase-model-body-table-plan-column3-item-cell2-text-container {
    width: 87px;
    height: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.billing-purchase-model-body-table-plan-column1-item-cell1-text-container span{
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--mssp-billing-table-title-color) !important;
    line-height: 100%;
}
.billing-purchase-model-body-table-plan-column1-item-cell2-text-container span,
.billing-purchase-model-body-table-plan-column1-item-cell3-text-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--org-home-subtitle-text-color) !important;
    line-height: 100%;
}




.billing-purchase-model-body-table-plan-column2-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    width: 153px;

}

.billing-purchase-model-body-table-plan-column2-item-cell1-container,
.billing-purchase-model-body-table-plan-column2-item-cell2-container,
.billing-purchase-model-body-table-plan-column2-item-cell3-container {
    width: 153px;
    min-height: 48px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 12px;
    border: 1px solid #EFF0F1;
}

.billing-purchase-model-body-table-plan-column2-item-cell3-container {
    background-color: #F4F4F4;
}

.billing-purchase-model-body-table-plan-column2-item-cell1-text-container,
.billing-purchase-model-body-table-plan-column2-item-cell2-text-container,
.billing-purchase-model-body-table-plan-column2-item-cell3-text-container {
    width: 129px;
    height: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}


.billing-purchase-model-body-table-plan-column2-item-cell1-text-container span{
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--mssp-billing-table-title-color) !important;
    line-height: 100%;
}
.billing-purchase-model-body-table-plan-column2-item-cell2-text-container span,
.billing-purchase-model-body-table-plan-column2-item-cell3-text-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--org-home-subtitle-text-color) !important;
    line-height: 100%;
}



.billing-purchase-model-body-table-plan-column3-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    width: 144px;

}

.billing-purchase-model-body-table-plan-column3-item-cell1-container,
.billing-purchase-model-body-table-plan-column3-item-cell2-container,
.billing-purchase-model-body-table-plan-column3-item-cell3-container {
    width: 144px;
    min-height: 48px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 12px;
    border: 1px solid #EFF0F1;
}

.billing-purchase-model-body-table-plan-column3-item-cell3-container {
    background-color: #F4F4F4;
}

.billing-purchase-model-body-table-plan-column3-item-cell1-text-container,
.billing-purchase-model-body-table-plan-column3-item-cell2-text-container,
.billing-purchase-model-body-table-plan-column3-item-cell3-text-container {
    width: 129px;
    height: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}


.billing-purchase-model-body-table-plan-column3-item-cell1-text-container span{
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--mssp-billing-table-title-color) !important;
    line-height: 100%;
}
.billing-purchase-model-body-table-plan-column3-item-cell2-text-container span,
.billing-purchase-model-body-table-plan-column3-item-cell3-text-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--org-home-subtitle-text-color) !important;
    line-height: 100%;
}

.billing-purchase-model-body-available-for-toast-container {
    width: 100%;
    min-height: 35px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: var(--mssp-billing-table-planbackground-color);
    border-radius: 2px;
    color: #28396A;

}

.billing-purchase-model-body-available-for-toast-container {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #28396A !important;
}

.billing-purchase-model-automatically-renew-container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    height: 24px;

}

.billing-purchase-model-automatically-renew-checkbox-container {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}





.billing-purchase-model-automatically-renew-checkbox-container input {
    width: 18px;
    height: 18px;
    text-align: center;
    accent-color: #34B1B1 !important;
}

.billing-purchase-model-automatically-renew-checkbox-container {
    display: inline-flex;
    align-items: center;
}

.billing-purchase-model-automatically-renew-checkbox-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--org-modal-progressbar-background-color);
    border-radius: 4px;
    background-color: var(--org-modal-progressbar-background-color);
    cursor: pointer;
    position: relative;
}


.billing-purchase-model-automatically-renew-checkbox-container input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: 400;
    font-size: 12px;
}

.billing-purchase-model-automatically-renew-container span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
}

.billing-purchase-model-button-container {
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.billing-purchase-model-cancel-button-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 6.69px;
    justify-content: center;
    align-items: center;
    border-radius: 3.34px;
    background: var(--action-button-bg-color) !important;
    border: var(--action-button-border) !important;
    color: var(--action-button-text-color) !important;
    cursor: pointer;

}

.billing-purchase-model-cancel-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--action-button-text-color) !important;
}

.billing-purchase-model-next-button-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 6.69px;
    justify-content: center;
    align-items: center;
    border-radius: 3.34px;
    background: var(--adduser-button-bg-color) !important;
    /* border: 1.67px solid #FFFFFF; */
    color: var(--adduser-button-text-color) !important;
    cursor: pointer;
}

.billing-purchase-model-next-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
}




/* billing summary module start */
.billing-summary-model {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 20px;
    width: 456px;
    border-radius: 4px;
    background: var(--modal-background-color);
    padding: 24px;
    border: none !important;
    backdrop-filter: blur(10px);

}

.billing-summary-model-subcontainer {
    width: 100%;

    display: flex;
    flex-direction: column;
    /* gap: 36px; */
    align-items: flex-start;
    padding: 0px !important;
}

.billing-summary-model-body-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

}

.billing-summary-model-body-header-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: 24px;

}

.billing-summary-model-body-header-subcontainer {
    width: 100%;
    height: 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.billing-summary-model-body-header-subcontainer span {
    font-family: 'Mulish', sans-serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    color: var(--org-home-title-text-color) !important;
    line-height: 100% !important;


}

.billing-summary-model-body-header-subcontainer .btn-close {
    position: relative;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.billing-summary-model-body-subcontainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.billing-summary-model-body-summary-details-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;

}

.billing-summary-model-body-summary-details-header-container {
    width: 100%;
    height: 10px;

}

.billing-summary-model-body-summary-details-header-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--org-card-subvalue-text-color) !important;
    line-height: 140% !important;
}

.billing-summary-model-body-summary-details-body-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 4px;
    background-color: var(--mssp-billing-table-next-plan-bg-color);
    height: 350px;
    opacity: 100%;

}

.billing-summary-model-body-summary-details-startdate-container {
    width: 100%;
    height: 41px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
}

.billing-summary-model-body-summary-details-startdate-title-container {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.billing-summary-model-body-summary-details-startdate-title-key-container {
    height: 12px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
}

.billing-summary-model-body-summary-details-startdate-title-key-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--org-card-subvalue-text-color) !important;
    line-height: 140% !important;
}

.billing-summary-model-body-summary-details-startdate-title-value-container {
    height: 30px;
    display: flex;
    flex-direction: 10px;
    align-items: center;
    padding: 10px;
}

.billing-summary-model-body-summary-details-startdate-title-value-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--org-home-title-text-color) !important;
    line-height: 140% !important;
}

.billing-summary-model-body-summary-details-startdate-subtitle-container {
    width: 100%;
    height: 17px;
    display: flex;
    flex-direction: row;
    gap: 134px;
    align-items: center;

}

.billing-summary-model-body-summary-details-startdate-subtitle-subcontainer {
    width: 100%;
    height: 17px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 0px 10px;

}

.billing-summary-model-body-summary-details-startdate-subtitle-container span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--org-listing-sort-dropdown-email-color) !important;
}

.billing-summary-model-button-container {
    margin-top: 160px;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;


}

.billing-stripe-payment-model-button-container {
    /* margin-top: 20px; */
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;


}

.billing-summary-model-backbutton-container,
.billing-stripe-payment-model-cancelbutton-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 6.69px;
    justify-content: center;
    align-items: center;
    background-color: var(--action-button-bg-color);
    border: var(--action-button-border);
    border-radius: 3.34px;
    cursor: pointer;
}

.billing-summary-model-backbutton-container span,
.billing-stripe-payment-model-cancelbutton-container span {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--action-button-text-color) !important;
}

.billing-summary-model-nextbutton-container,
.billing-stripe-payment-model-nextbutton-container {
    width: 117px;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 6.69px;
    justify-content: center;
    align-items: center;
    background-color: var(--adduser-button-bg-color);
    /* border: 1px solid #FFFFFF; */
    border-radius: 3.34px;
    cursor: pointer;
}

.billing-summary-model-nextbutton-container span,
.billing-stripe-payment-model-nextbutton-container span {
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--adduser-button-text-color) !important;
}


/* billing summary model end  */


/* billing stripe model start  */

.billing-stripe-payment-model {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 35px;
    width: 456px;
    border-radius: 4px;
    background: var(--modal-background-color);
    padding: 24px;
    border: none !important;
    backdrop-filter: blur(10px);
}

.billing-stripe-payment-model-subcontainer {
    width: 100%;

    display: flex;
    flex-direction: column;
    /* gap: 36px; */
    align-items: flex-start;
    padding: 0px !important;
}

.billing-stripe-payment-model-body-summary-details-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;

}

.billing-stripe-payment-ui-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* border: 1px solid #CCE6D2; */
    height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: #216767 #F0F0F0;
    padding: 2px;
}

#payment-element {
    width: 100%;
    min-height: 100%;
    /* Or a specific min-height if needed */
}

.billing-close-button-conatiner {
    position: relative;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    /* background-color: red; */
}

.v1-billing-close-btn::before,
.v1-billing-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 15.5px;
    background-color: var(--org-modal-close-btn-color);
    transform: translate(-50%, -50%) rotate(45deg);
}


.v1-billing-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* User Settings Page */
.mssp-settings-link {
    width: 100%;
    height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px;
}

.mssp-settings-link span {
    width: 6px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #69708A;

}

.mssp-settings-link p {
    width: 55px;
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    color: #69708A;
    padding: 0 !important;
    margin: 0 !important;

}

.admin-link-name {
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #216767;

}

.orgs-link-name {
    height: 17px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #216767;

}

.admin-mssp-container {
    position: relative;
    top: 20px;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: hidden;
}


.landingPage-Settings-title {
    width: 223px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

}

.landingPage-Settings-title h5 {
    width: 223px;
    height: 24px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #28396A;

}


.admin-mssp-container {
    position: relative;
    overflow-x: hidden;
}

.settings-title-container-usersettings {
    position: absolute;
    width: 290px;
    height: 47px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    opacity: 100%;
}

.usersetting-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.usersetting-card-container[data-state="open"] .expand-content-conatainer,
.usersetting-card-container[style*="height: 237px"] .expand-content-conatainer {
    display: flex !important;
}

.usersetting-card-container {
    overflow: visible !important;
}

.usersetting-browser-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.usersetting-browser-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.usersetting-browser-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.usersetting-browser-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
    height: 20px;
    display: flex;
    align-items: center;
}

.usersetting-browser-header-subtitlecontainer {
    padding-left: 32px;
}

.usersetting-browser-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #28396A;
}

.usersetting-header-container-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.usersetting-hearder-subcontainer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usersetting-hearder-subcontainer-right.country-flag {
    font-size: 20px;
    color: #28396A;
}

.usersetting-hearder-subcontainer-right span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
}

.usersetting-expand-down-arrow {
    font-size: 16px;
    color: #28396A;
    transition: transform 0.3s;
}

.usersetting-expand-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    height: 107px;
    padding: 0px;
}

.usersetting-expand-content-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 24px;
    height: 71px;
    padding: 0px;
}

.usersetting-expand-content-subconatainer2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 71px;
    padding-left: 32px;
}

.usersetting-expand-content-subconatainer3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.usersetting-expand-content-subconatainer3 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #323233;
    line-height: 120%;
}

.usersetting-select-geolocation-country {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    width: 344px;
}

.usersetting-select-geolocation-country span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #216767;
}

.usersetting-select-geolocation-country i {
    color: #216767;
}

.usersetting-select-geolocation-country {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    background: #F6FFF8;
    border: 1px solid #D2E0D5;
    width: 344px;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.usersetting-select-geolocation-country span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #216767;
}

.usersetting-select-geolocation-country i {
    color: #216767;
    transition: transform 0.2s ease;
}

.usersetting-country-options {
    position: absolute;
    /* change from top → bottom so the menu grows upwards */
    left: 0;
    width: 100%;
    max-height: 70v;
    overflow-y: auto;
    background: white;
    border: 1px solid #D2E0D5;
    border-radius: 4px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    /* shadow upwards */
    z-index: 9999 !important;
    top: 45px;

    /* open animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* start a little lower */
    transition: all 0.2s ease;
    padding: 8px;
}

/* when opened */
.usersetting-country-options.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.usersetting-country-options .option.preferred {
    background: #E8F5E9 !important;
    font-weight: 600;
    border-left: 3px solid #216767;
    padding-left: 9px !important;
}

.usersetting-country-select-content {
    width: 408px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
}

.usersetting-country-select-content label {
    width: 408px !important;
    height: 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 120% !important;
    color: #000000 !important;
}

.usersetting-geolocation-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 40px;
    width: 249px;
}

.usersetting-geolocation-change-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    width: 116px;
}

.usersetting-geolocation-change-button-container.disabled {
    opacity: 0.5 !important;
    pointer-events: none;
    cursor: not-allowed;
}

.usersetting-geolocation-change-button-container.enabled {
    opacity: 1 !important;
    pointer-events: auto;
    cursor: pointer;
}

.usersetting-geolocation-change-button-subcontainer {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    background-color: #216767;
    border-radius: 4px;
    cursor: pointer;
    padding: 16px 24px;
    color: white;
}

.usersetting-geolocation-change-button-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    opacity: 100%
}

.usersetting-geolocation-cancel-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    width: 116px;
}

.usersetting-geolocation-cancel-button-subcontainer {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
    padding: 16px 24px;
    border: 1px solid #216767;
}

.usersetting-geolocation-cancel-button-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #216767;
    opacity: 100%
}

.usersetting-apply-existing-user-checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    height: 24px;
    padding-left: 32px;
}


.usersetting-apply-existing-user-checkbox-subcontainer {
    height: 24px;
    width: 24px;
}


.usersetting-apply-existing-user-checkbox-subcontainer1 {
    display: flex;
    flex-direction: row;
    height: 18px;
    width: 18px;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    background: #34B1B1;
    border-radius: 3px;
}

.usersetting-apply-existing-user-checkbox-subcontainer1 input {
    width: 18px;
    height: 18px;
    text-align: center;
    accent-color: #34B1B1 !important;
    /* background-color: #34B1B1 !important; */
}

.usersetting-apply-existing-user-checkbox-subcontainer1 {
    display: inline-flex;
    align-items: center;
}

.usersetting-apply-existing-user-checkbox-subcontainer1 input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #34B1B1;
    border-radius: 4px;
    background-color: #34B1B1;
    cursor: pointer;
    position: relative;
    opacity: 50%;
}

.usersetting-apply-existing-user-checkbox-subcontainer1 input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

.usersetting-apply-existing-user-checkbox-subcontainer1 input[type="checkbox"]:checked {
    opacity: 100%;
}

.usersetting-apply-existing-user-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    opacity: 50%;
}

.browser-permission-usersetting-card-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 84px;
    background: #FFFFFF;
    border: 1px solid #CCE6D2;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    transition: height 0.3s ease, gap 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.usersetting-browser-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.usersetting-browser-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.usersetting-browser-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.usersetting-browser-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
    height: 20px;
    display: flex;
    align-items: center;
}

.usersetting-browser-header-subtitlecontainer {
    padding-left: 32px;
}

.usersetting-browser-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #28396A;
}

.usersetting-header-container-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.usersetting-hearder-subcontainer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.usersetting-hearder-subcontainer-right.country-flag {
    font-size: 20px;
    color: #28396A;
}

.usersetting-hearder-subcontainer-right span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
}

.usersetting-browser-permission-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 126px;
    width: 538px;
}

.usersetting-browser-permission-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 22px;
}

.usersetting-browser-permission-header-subcontainer {
    display: flex;
    flex-direction: column;
    align-items: row;
    gap: 4px;
    height: 22px;
}

.usersetting-browser-permission-header-subcontainer span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #323233;
    line-height: 165%;
}

.usersetting-browser-permission-checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 88px;
}

.usersetting-browser-permission-checkbox-subcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    height: 24px;
    width: 400px;
}

.usersetting-browser-permission-download-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.usersetting-browser-permission-checkboxdownload-container {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.usersetting-browser-permission-checkboxdownload-container input {
    width: 18px;
    height: 18px;
    text-align: center;
    accent-color: #34B1B1 !important;
    /* background-color: #34B1B1 !important; */
}

.usersetting-browser-permission-checkboxdownload-container {
    display: inline-flex;
    align-items: center;
}

.usersetting-browser-permission-checkboxdownload-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #34B1B1;
    border-radius: 4px;
    background-color: #34B1B1;
    cursor: pointer;
    position: relative;
}

.usersetting-browser-permission-checkboxdownload-container input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

.usersetting-browser-permission-download-container span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #323233;
}

.usersetting-browser-permission-button-container {
    display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
    gap: 16px;
}

.usersetting-browser-permission-save-button-container {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #216767;
    border-radius: 4px;
}

.usersetting-browser-permission-save-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
}

.usersetting-browser-permission-cancel-button-container {
    display: flex;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #216767;
}

.usersetting-browser-permission-cancel-button-container span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 20px;
    color: #216767;
}

/* settings-session-timeout */

.usersetting-sessiontimeout-card-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: 84px;
    background: #FFFFFF !important;
    border: 1px solid #CCE6D2 !important;
    border-radius: 4px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    transition: height 0.3s ease, gap 0.3s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
}


.usersetting-sessiontimeout-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.usersetting-sessiontimeout-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}


.usersetting-sessiontimeout-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.usersetting-sessiontimeout-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
    height: 20px;
    display: flex;
    align-items: center;
}

.usersetting-sessiontimeout-header-subtitlecontainer {
    padding-left: 32px;
}

.usersetting-sessiontimeout-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #28396A;
}

.usersetting-session-timeout-expand-content-conatainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    height: 79px !important;
    position: relative;
    top: 5px;
}

.usersetting-session-timeout-subconatainer1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    height: 23px;
}

.usersetting-session-timeout-subconatainer1 span {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #323233;
    line-height: 160%;
}

.usersetting-session-timeout-incrment-decrement-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    /* width: 136px; */
}

.usersetting-session-timeout-decrement-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: #216767;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    background-color: #216767;
}

.usersetting-session-timeout-decrement-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.usersetting-session-timeout-decrement-button-subcontainer i {
    color: #FFFFFF;

}

.usersetting-session-timeout-decrement-button-subcontainer span {
    color: #323233;

}

.usersetting-session-timeout-incrment-decrement-input-container {
    display: flex;
    width: 56px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: #F6FFF8;
}


.usersetting-session-timeout-increment-button-container {
    display: flex;
    width: 40px;
    height: 40px;
    background-color: #216767;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    background-color: #216767;
}

.usersetting-session-timeout-increment-button-subcontainer {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
    justify-content: center;
    cursor: pointer;


}

.usersetting-session-timeout-increment-button-subcontainer i {
    color: #FFFFFF;

}

.usersetting-session-timeout-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    height: 40px;
    width: 249px;
    margin-left: 24px;
}

/* user setting session timeoutend */


/* usersettings-blocklist start */

.usersetting-blocklisturl-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
}

.usersetting-blocklisturl-header-subcontainer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 52px;
}

.usersetting-blocklisturl-header-titlecontainer {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
}

.usersetting-blocklisturl-header-titlecontainer span {
    font-family: Mulish;
    font-weight: bold;
    font-size: 20px;
    color: #28396A;
    height: 20px;
    display: flex;
    align-items: center;
}

.usersetting-blocklisturl-header-subtitlecontainer {
    padding-left: 32px;
}

.usersetting-blocklisturl-header-subtitlecontainer small {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #28396A;
}

.usersetting-blocklisturl-content-conatainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 111px;
    padding-left: 30px;
}

.usersetting-blocklisturl-content-conatainer2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    height: 231px;
    padding-left: 30px;
}

.usersetting-blocklisturl-subcontainer-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    height: 47px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.usersetting-blocklisturl-subcontainer-header span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15.04px;
    color: #323233;
}

.usersetting-blocklisturl-button-conatainer {
    display: flex;
    align-items: flex-start;
    height: 40px;


}

.usersetting-blocklisturl-button-subconatainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    background-color: #216767;
    width: 117px;

}

.usersetting-blocklisturl-button-subconatainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
}

#blocklistUrlEditMode {
    display: none;


}

.usersetting-blocklistUrlEditMode-subcontainer {
    display: flex;
    height: 167px;
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
    background-color: #F6FFF8;
    opacity: 100%;
    border: 1px solid #D2E0D5;
    width: 100%;
    align-items: flex-start;
    /* TEXT STARTS FROM TOP */
    justify-content: flex-start;
    box-sizing: border-box;

}

.usersetting-blocklist-sub-button-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 257px;
    height: 40px;
}

.usersetting-blocklist-sub-changebutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.usersetting-blocklist-sub-changebutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #216767;
    cursor: pointer;
}

.usersetting-blocklist-sub-changebutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    opacity: 100%
}

.usersetting-blocklist-sub-cancelbutton-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 40px;
    width: 116px;
    cursor: pointer;

}

.usersetting-blocklist-sub-cancelbutton-subcontainer {
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 117px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #FFFFFF;
    cursor: pointer;
    border: 1px solid #216767;
}

.usersetting-blocklist-sub-cancelbutton-subcontainer span {
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #216767;
    opacity: 100%
}

.usersetting-blocklistUrlEditMode-input-wrapper {
    width: 100%;
    min-height: 167px;
    padding: 16px 12px;
    background-color: #F6FFF8;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.usersetting-blocklistUrlEditMode-input-wrapper:focus-within {
    border: 1px solid #D2E0D5;
}

.usersetting-blocklistUrlEditMode-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 15.04px;
    color: #323233;
    font-weight: 400;
    resize: none;
    line-height: 1.6;
    min-height: 150px;

}

.usersetting-blocklistUrlEditMode-input::placeholder {
    color: #94a3b8;
}

.zero-block-list-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #28396A;
    line-height: 16px;
    font-weight: 400;
}

.zero-block-list-text strong {
    color: var(--org-modal-sub-text-color);
    font-weight: 700;
    opacity: 1;
}

/* usersettings-block end */
/* billing stripe model end */

.billing-header-container {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    position: absolute;
    width: 304px;
    height: 44px;
    left: 88px;
    top: 76px;
    /* background-color: red; */


}

.billing-header-subcontainer {
    /* Title */

    width: 304px;
    height: 24px;

    /* Title/Page Title H1 */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

    /* background-color: blue; */


}

.billing-header-subtilecontainer {
    /* Subtitle */

    width: 416px;
    height: 12px;


    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;


    /* Primary/Primary - Blue */
    color: var(--org-home-subtitle-text-color);


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}


.billing-active-subscription-container {

    position: absolute;
    /* width: 100%; */
    height: 204px;
    left: 88px;
    top: 171px;
    right: 16px;


}



.billing-active-subscription-subcontainer {
    /* Frame 1984078043 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    position: absolute;
    width: 100%;
    height: 206px;
    left: 0px;
    top: -2px;



}

.billing-active-subscription-subcontainer .billing-active-subscription-subcontainer-text {
    /* Active subscription */

    /* height: 14px; */

    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;

    color: var(--org-home-title-text-color);

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-past-subscription-subcontainer {
    /* Frame 1984078043 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    position: absolute;
    width: 341px;
    height: 20px;
    left: 0px;

    max-height: 600px;
    /* Limit the height */
    margin-bottom: 24px;
    /* Added bottom gap */

}

.billing-past-subscription-subcontainer .billing-past-subscription-subcontainer-text {
    /* Active subscription */

    /* height: 14px; */

    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;

    color: var(--org-home-title-text-color);

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer1 {
    /* Frame 1984078038 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 24px;

    width: 100%;
    height: 220px;

    background-color: var(--org-card-background-color);
    box-shadow: var(--org-listing-container-box-shadow);
    border-radius: var(--org-listing-container-border-radius);
    border: var(--org-listing-sort-border);
    backdrop-filter: blur(5px);

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

.billing-past-subscription-header-container {
    /* Frame 1984078038 */

    /* Auto layout */
    position: relative;
    top: 32px;
    width: 100%;
    height: 100%;
    gap: 24px;
    background-color: var(--org-card-background-color);
    box-shadow: var(--org-listing-container-box-shadow);
    border-radius: var(--org-listing-container-border-radius);
    border: var(--org-listing-sort-border);
    backdrop-filter: blur(5px);

}

.billing-active-subscription-subcontainer2 {
    /* Frame 1984078040 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 100%;
    height: 132px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    /* background-color: red; */

}

.billing-active-subscription-subcontainer2-next-queue-container {
    /* Frame 2147209154 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 100%;
    height: 19px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

html[data-theme="glass"] .billing-active-subscription-subcontainer2-next-queue-container {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    height: auto;
    min-height: 0;
}

.billing-active-subscription-subcontainer2-next-queue-container-text {
    /* Next plan in queue - None */

    width: 100%;
    height: 19px;

    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    /* flex: none;
order: 0;
flex-grow: 0; */

}

html[data-theme="glass"] .billing-active-subscription-subcontainer2-next-queue-container-text {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #15E073;
    color: #164848;
    font-weight: 500;
    line-height: 130%;
}

html[data-theme="glass"] .billing-active-subscription-subcontainer2-next-queue-container-text strong {
    color: #164848;
}

.billing-active-subscription-subcontainer2-plan-details-container {
    /* Frame 1984078039 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;

    width: 100%;
    height: 68px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer {
    /* Frame 1984078038 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;

    width: 100%;
    height: 68px;
    justify-content: space-between;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}



.billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-container {
    /* Frame 1984078034 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;

    width: 360px;
    height: 68px;

    background: var(--org-card-background-color);
    border: var(--mssp-active-container-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-subcontainer1 {
    /* Frame 126764 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-subcontainer1-text {
    /* Plan (No. of licenses) */

    width: 165px;
    height: 21px;

    /* Text/Body Inter 16 Reg */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    /* identical to box height, or 21px */

    /* Neutral/Grey 100 */
    color: var(--mssp-active-container-title-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-subcontainer2 {
    /* Frame 1984078033 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-subcontainer2-text {
    /* Scale (1000) */

    width: 100%;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-container {
    /* Frame 1984078035 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;

    width: 140px;
    height: 68px;

    background: var(--org-card-background-color);
    border: var(--mssp-active-container-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-subcontainer1 {
    /* Frame 126764 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-subcontainer1-text {
    /* Allocated */

    width: 100%;
    height: 21px;

    /* Text/Body Inter 16 Reg */
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    /* identical to box height, or 21px */

    /* Neutral/Grey 100 */
    color: var(--mssp-active-container-title-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-subcontainer2 {
    /* Frame 1984078033 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-subcontainer2-text {
    /* 0 */

    width: 100%;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish', sans-sarif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-container {
    /* Frame 1984078036 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;

    width: 140px;
    height: 68px;

    background: var(--org-card-background-color);
    border: var(--mssp-active-container-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);


    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-subcontainer1 {
    /* Frame 126764 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-subcontainer1-text {
    /* Remaining */

    width: 100%;
    height: 21px;

    /* Text/Body Inter 16 Reg */
    /* font-family: 'Inter'; */
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    /* identical to box height, or 21px */

    /* Neutral/Grey 100 */
    color: var(--mssp-active-container-title-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-subcontainer2 {
    /* Frame 1984078033 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;



}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-subcontainer2 {
    /* 1000 */

    width: 100%;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish', sans-sarif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-container {
    /* Frame 1984078037 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;

    width: 150px;
    height: 68px;

    background: var(--org-card-background-color);
    border: var(--mssp-active-container-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);


    /* Inside auto layout */
    flex: none;
    order: 3;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer1 {
    /* Frame 126764 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer1-text {
    /* Ends On */

    width: 100%;
    height: 21px;

    /* Text/Body Inter 16 Reg */
    /* font-family: 'Inter'; */
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    /* identical to box height, or 21px */

    /* Neutral/Grey 100 */
    color: #696969;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer2 {
    /* Frame 1984078033 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer2-text {
    /* 30 June, 2025 */

    width: 118px;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish', sans-sarif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-container {
    /* Frame 1984078039 */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 12px;

    width: 245px;
    height: 68px;

    background: var(--org-card-background-color);
    border: var(--mssp-active-container-border);
    border-radius: 4px;
    backdrop-filter: blur(10px);

    /* Inside auto layout */
    flex: none;
    order: 4;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-subcontainer1 {
    /* Frame 126764 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    /* gap: 8px; */

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer1-text {
    /* Subscription type */

    margin: 0 auto;
    width: 100%;
    height: 21px;

    /* Text/Body Inter 16 Reg */
    /* font-family: 'Inter'; */
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    /* identical to box height, or 21px */

    /* Neutral/Grey 100 */
    color: var(--mssp-active-container-title-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer1-text2 {
    /* DotsThreeVertical */

    margin: 0 auto;
    width: 16px;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-subcontainer1-text2 i {
    color: var(--action-button-text-color);

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-subcontainer2 {
    /* Frame 1984078033 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 100%;
    height: 16px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-subcontainer2-text {
    /* Monthly (Automatic) */

    width: 100%;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-subcontainer2-text-cancel-sub {
    /* Monthly (Automatic) */

    width: 100%;
    height: 16px;

    /* Title/Table Title 18 Bd */
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 90%;
    /* or 16px */

    /* Primary/Primary - Blue */
    color: #BE5050;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-button-container {
    /* Frame 1984078046 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0px;
    gap: 42px;

    width: 100%;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;


}

.billing-active-subscription-subcontainer2-button-subcontainer {
    /* Frame 1984078041 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;

    /* margin: 0 auto; */
    width: 100%;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;


}

.billing-active-subscription-renew-container {
    /* Button component */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;

    width: 88px;
    height: 40px;

    /* Disabled Button (Green) */
    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);
    border-radius: var(--org-listing-container-border-radius);

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;

}

.billing-active-subscription-renew-container span {
    /* Renew */

    width: 56px;
    height: 24px;

    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    /* White */
    color: var(--adduser-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-upgrade-container {
    /* Component 6 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 104px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    cursor: pointer;


}

.billing-active-subscription-upgrade-subcontainer {
    /* Button component */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;

    width: 104px;
    height: 40px;

    /* Primary/Primary - Green */
    border: var(--action-button-border);
    border-radius: var(--org-listing-container-border-radius);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-upgrade-subcontainer span {
    /* Upgrade */

    width: 72px;
    height: 24px;

    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    /* Primary/Primary - Green */
    color: var(--action-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;


}

.billing-active-subscription-downgrade-container {
    /* Component 8 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 129px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;
    cursor: pointer;


}

.billing-active-subscription-downgrade-subcontainer {
    /* Button component */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;

    width: 129px;
    height: 40px;

    /* Primary/Primary - Green */
    border: var(--action-button-border);
    border-radius: var(--org-listing-container-border-radius);

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-downgrade-subcontainer span {
    /* Downgrade */

    width: 97px;
    height: 24px;

    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    /* Primary/Primary - Green */
    color: var(--action-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;


}

.billing-active-subscription-cancelsubscription-container {
    /* Component 7 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 202px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 3;
    flex-grow: 0;
    cursor: pointer;

}

.billing-active-subscription-cancelsubscription-subcontainer {
    /* Button component */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;

    /* width: 200px; */
    height: 40px;

    /* Primary/Primary - Green */
    border: var(--action-button-border);
    border-radius: var(--org-listing-container-border-radius);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-cancelsubscription-subcontainer span {
    /* Request */

    /* width: 170px; */
    height: 24px;

    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    /* Primary/Primary - Green */
    color: var(--action-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-downloadInvoice-container {
    /* Frame 1984078388 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 24px;

    margin: 0 auto;
    width: 151px;
    height: 22px;
    margin: 0;
    margin-left: auto;


    /* Inside auto layout */
    flex: none;
    order: 4;
    flex-grow: 0;
    align-self: center;

}

.billing-active-subscription-subcontainer2-downloadInvoice-subcontainer {
    /* Frame 1984078388 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    /* gap: 24px; */

    margin: 0 auto;
    width: 151px;
    height: 22px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-subcontainer2-downloadInvoiceimg-container {
    /* Download */

    width: 20px;
    height: 20px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

/* .billing-active-subscription-subcontainer2-downloadInvoiceimg-subcontainer {
    

    position: absolute;
    left: 20.82%;
    right: 20.85%;
    top: 12.5%;
    bottom: 16.67%;


} */

.billing-active-subscription-subcontainer2-downloadInvoiceimg-subcontainer-text {
    /* Download invoice */

    width: 128px;
    height: 22px;

    /* Text/Text 14 Bold Inter */
    /* font-family: 'Inter',sans-sarif; */
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 160%;
    /* or 22px */
    letter-spacing: 0.02em;

    color: var(--action-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;

}

.billing-active-subscription-purchase-container {
    /* Component 9 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: 96px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-active-subscription-purchase-subcontainer {
    /* Button component */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 24px;

    width: 96px;
    height: 40px;

    background-color: var(--adduser-button-bg-color);
    border: var(--adduser-button-border);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: var(--org-listing-container-border-radius);

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;

}

.billing-active-subscription-purchase-subcontainer span {
    /* Purchase */

    width: 77px;
    height: 24px;

    font-family: 'Mulish';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    color: var(--adduser-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

@media screen and (min-width: 1400px) and (max-width: 1600px) {

    .billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-container {
        width: 200px !important;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1900px) {

    .billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-container {
        width: 260px !important;
    }
}

@media screen and (min-width: 1920px) {

    .billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-container {
        width: 295px !important;
    }
}

@media screen and (max-width: 1279.98px) {
    .billing-active-subscription-container {
        height: auto;
    }

    .billing-active-subscription-subcontainer,
    .billing-active-subscription-subcontainer1,
    .billing-active-subscription-subcontainer2,
    .billing-active-subscription-subcontainer2-plan-details-container {
        height: auto;
    }

    .billing-active-subscription-subcontainer2-plan-details-subcontainer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        height: auto;
        align-items: stretch;
    }

    .billing-active-subscription-subcontainer2-plan-details-subcontainer-planname-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-allocated-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-remaininglicense-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-endson-container,
    .billing-active-subscription-subcontainer2-plan-details-subcontainer-subscriptiontype-container {
        width: 100%;
        min-width: 0;
    }

    .billing-past-subscription-container {
        top: 560px;
    }
}

@media screen and (max-width: 1279.98px) {
    .billing-past-subscription-container {
        top: 600px !important;
    }

    .billing-past-subscription-header-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .billing-past-header-container,
    .billing-past-cell-container,
    .billing-past-subscription-header-container .mssp-navbar-container {
        min-width: 1100px;
    }

    .billing-past-header-subcontainer1,
    .billing-past-header-subcontainer2,
    .billing-past-header-subcontainer3,
    .billing-past-header-subcontainer4,
    .billing-past-header-subcontainer5,
    .billing-past-header-subcontainer6,
    .billing-past-cell-subcontainer1,
    .billing-past-cell-subcontainer2,
    .billing-past-cell-subcontainer3,
    .billing-past-cell-subcontainer4,
    .billing-past-cell-subcontainer5,
    .billing-past-cell-subcontainer6 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media screen and (max-width: 991.98px) {
    .billing-past-subscription-container {
        left: 16px;
    }
}


/* v1-Billing-Module End */

/* =========================
   DELETE USER MODAL
   ========================= */

.user-delete-modal .modal-dialog {
    max-width: 456px;
}

/* Modal container */
.user-delete-modal .modal-content {
    background: var(--modal-background-color);
    border-radius: 6px;
    padding: 24px;
    min-height: 308px;
    /* or your preferred base height */
    height: auto !important;
    max-height: 90vh;
    /* prevent overflow off screen */
    overflow: auto;
    border: none;
    backdrop-filter: blur(16px);
}

/* =========================
   HEADER
   ========================= */

.user-delete-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-delete-title {
    margin: 0;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    color: var(--org-home-title-text-color);
}

.user-delete-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #28396A;
    cursor: pointer;
    padding: 0;
}

/* =========================
   DESCRIPTION
   ========================= */

.user-delete-description {
    margin-top: 16px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: var(--org-card-subvalue-text-color);
}

.user-delete-email {
    font-weight: 700;
}

/* =========================
   INPUT
   ========================= */

.user-delete-input-group {
    margin-bottom: 0px;
}

.user-delete-label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--org-home-title-text-color);
}

.user-delete-input {
    width: 273px;
    height: 40px;
    background: var(--org-modal-inputfield-bg-color);
    border: 1px solid var(--org-modal-inputfield-border-color);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--org-modal-inputfield-text-color) !important;
}

.user-delete-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--org-modal-inputfield-border-color);
    background: var(--org-modal-inputfield-bg-color);
    color: var(--org-modal-inputfield-text-color) !important;
}

/* =========================
   ACTION BUTTONS
   ========================= */

.user-delete-actions {
    display: flex;
    gap: 16px;
}

/* Delete button */
.user-delete-btn {
    width: 117px;
    height: 40px;
    background: var(--adduser-button-bg-color);
    color: var(--adduser-button-text-color);
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

/* Disabled state */
.user-delete-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Cancel button */
.user-delete-cancel {
    width: 117px;
    height: 40px;
    background: var(--action-button-bg-color);
    border: 1px solid var(--action-button-border-color);
    border-radius: 4px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--action-button-text-color);
    cursor: pointer;
}

.user-delete-cancel:hover {
    border: 1px solid var(--action-button-border-color);
    color: var(--action-button-text-color);
    background: var(--action-button-bg-color);
}


/* =========================
   SAFETY FIXES
   ========================= */

/* Prevent tooltips inside modal */
.user-delete-modal [title] {
    pointer-events: none !important;
}

/* Prevent Bootstrap modal-footer spacing conflicts */
.user-delete-modal .modal-footer {
    padding: 0;
    margin: 0;
    border: none;
}

.user-delete-close {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-delete-close-icon {
    width: 14px;
    /* match Figma */
    height: 14px;
    object-fit: contain;
}

/* Disabled state for Delete button in user delete modal */
.user-delete-btn.disabled,
.user-delete-btn:disabled {
    background: #a3bcbc !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: not-allowed;
    border: none;
}

.user-delete-btn:not(.disabled):hover,
.user-delete-btn:focus {
    background: var(--adduser-button-bg-color) !important;
    color: var(--adduser-button-text-color) !important;
    border: none;
}


/* Billing Past Subscription Header */

.billing-past-subscription-container {

    position: absolute;
    height: 544px;
    left: 88px;
    top: 440px;
    right: 16px;
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    /* Added bottom gap */

}

.billing-past-subscription-header-container {
    position: relative;
    padding-bottom: 56px;
}

.billing-past-header-container {
    display: grid;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--org-listing-container-header-text-color);
    border-bottom: var(--org-listing-container-bottom-line);
    align-items: center;
}

.billing-past-header-subcontainer1,
.billing-past-header-subcontainer2,
.billing-past-header-subcontainer3,
.billing-past-header-subcontainer4,
.billing-past-header-subcontainer5,
.billing-past-header-subcontainer6 {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
}

.billing-past-header-subcontainer6 {
    justify-content: center;
}

.billing-filter-icon {
    position: relative;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
}

.billing-past-cell-container {
    display: grid;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--org-home-subtitle-text-color);
    align-items: center;
    border-bottom: var(--org-listing-container-bottom-line);
}

.billing-past-cell-subcontainer1,
.billing-past-cell-subcontainer2,
.billing-past-cell-subcontainer3,
.billing-past-cell-subcontainer4,
.billing-past-cell-subcontainer5,
.billing-past-cell-subcontainer6 {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
}

.billing-past-cell-subcontainer6 {
    justify-content: center;
    cursor: pointer;
}

.billing-past-header-container,
.billing-past-cell-container {
    grid-template-columns:
        minmax(180px, 1.8fr)
        /* Plan */
        minmax(130px, 1.4fr)
        /* Cost */
        minmax(190px, 2fr)
        /* Payment */
        minmax(220px, 2.2fr)
        /* Subscription */
        minmax(180px, 1.6fr)
        /* Paid on */
        minmax(90px, 0.8fr);
    /* Invoice */
}


.billing-past-header-container p,
.billing-past-cell-container p {
    white-space: nowrap;
}


.billing-past-cell-container:nth-of-type(even) {
    background-color: var(--org-listing-container-row-child-bg-color);
}

.billing-past-cell-container:nth-of-type(odd) {
    color: var(--org-listing-container-row-text-color);
}

.billing-empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60vh;
    padding: 40px 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.billing-empty-state-icon-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 16px;
}


.billing-empty-state-text {
    font-size: 16px;
    color: var(--org-card-subvalue-text-color);
    margin-bottom: 20px;
}

.billing-empty-state-btn {
    background-color: var(--adduser-button-bg-color);
    color: var(--adduser-button-text-color);
    border: var(--adduser-button-border);
    padding: 8px 20px;
    border-radius: var(--org-listing-container-border-radius);
    cursor: pointer;
}

.billing-subscription-history-footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 14px;
    position: absolute;
    left: 0;
    right: 0;
}



/* LEFT */
.billing-subscription-history-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-label {
    height: 17px;
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    color: #28396A;
    white-space: nowrap;
}

.footer-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

/* RIGHT */
.billing-subscription-history-footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-showing-text {
    font-size: 14px;
    font-family: var(--font-family-inter);
    font-weight: 400;
    color: #28396A;
    white-space: nowrap;
}

/* PAGINATION */
.footer-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.pagination-btn img {
    width: 16px;
    height: 16px;
}

/* Disabled state (like image) */
.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Styles for responsive and limited height for past subscription listing */
.billing-past-subscription-container {
    max-height: 600px;
    /* Limit the height */

}

.billing-past-cell-container {
    min-height: 48px;
    box-sizing: border-box;
}

.text-muted {
    color: var(--dropdown-card-subtext-color) !important;
}

.billing-table-body {
    min-height: 484px;
}

#orgRowsPerPageForm select {
    border: none;
    outline: none;
}

#msspRowsPerPageSelect {
    top: 10px;
}

.applied-box {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--sort-filter-dropdown-bg-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 253px; /* or 240px for filters */
    right: 0; /* keep popup under chevron and open toward left */
    top: 100%; /* places dropdown directly below trigger */
    margin-top: 4px; /* small gap below trigger, optional */
}

.applied-pill-license {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 16px;
    color: var(--org-listing-sort-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    font-weight: 600;
}

.applied-pill-license i {
    cursor: pointer;
    font-size: 14px;
    color: var(--org-listing-sort-text-color);
}

/* #activeFiltersDropdown {
    display: none;
    position: absolute;
    top: 150%;
    left: 0;
    background: #fff;
    border: 1px solid #E5E7EB;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 999;
} */

/* #activeFiltersList div:hover {
         background: #F5F7FA; 
    } */

.mssp-filter-option .sort-tick {
    float: right;
    visibility: hidden;
    left: 185px;
}

.mssp-filter-option.active .sort-tick {
    visibility: visible;
}

.mssp-filter-options .sort-tick {
    display: none;
}

.sort-tick {
    float: right;
    visibility: hidden;
}

    .mssp-filter-options {
        width: 173px;
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 8px;
        gap: 8px;
        background: var(--filtersort-bg-color);
        white-space: nowrap;
        cursor: pointer;
    }

    .mssp-filter-options:hover {
        background: var(--filtersort-bg-color);
    }

.mssp-filter-options span {
    width: 116px;
    height: 16px;
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: var(--filtersort-hover-text-color);
}
#planQualityFilterDropdown{
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: max-content;      /* auto width based on content */
    min-width: 220px;        /* optional base width */
    max-width: 350px;        /* prevents too large dropdown */
    padding: 6px 0;
}

#planQualityFilterDropdown .mssp-filter-option {
    width: auto;
    /* remove fixed width */
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    white-space: nowrap;
    /* keep single line */
}

.billing-resume-subscription-modal-container {
    /* Frame 1984078026 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 64px;

    position: absolute;
    width: 456px;
    height: 236px;
    left: calc(50% - 456px/2);
    top: calc(50% - 236px/2 + 20.5px);

    background: var(--modal-background-color);
    border-radius: 4px;
    backdrop-filter: blur(16px);

}

.billing-resume-subscription-modal-subcontainer {
    /* Frame 1984078017 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 408px;
    height: 84px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-resume-subscription-modal-subcontainer1 {
    /* Frame 1984077985 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px;

    width: 408px;
    height: 84px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-resume-subscription-modal-header-container {
    /* Frame 1984077990 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px;

    width: 408px;
    height: 24px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

}

.billing-resume-subscription-modal-header-container-text {
    /* Cancel Subscription? */

    margin: 0 auto;
    width: 275px;
    height: 20px;

    /* Title/Card Title H2 | Mulish */
    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    /* identical to box height, or 20px */

    /* Primary/Primary - Blue */
    color: var(--org-home-title-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-resume-subscription-modal-closeicon-container {
    /* Close */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    gap: 10px;

    margin: 0 auto;
    width: 133px;
    height: 24px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 1;

}

.billing-resume-subscription-modal-title-text {
    /* Subtitle */

    width: 390px;
    height: 56px;

    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    /* or 22px */
    /* leading-trim and text-edge are draft CSS properties.

Read more: https://drafts.csswg.org/css-inline-3/#leading-trim
*/

    /* display: flex;
align-items: center; */

    /* Text Color */
    color: var(--org-card-subvalue-text-color);


    /* Inside auto layout */
    /* flex: none;
order: 1;
flex-grow: 0; */

}

.billing-resume-subscription-modal-buttoncontainer {
    /* Frame 1984077988 */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 160px;

    width: 408px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}

.billing-resume-subscription-modal-dismiss-button-container {
    /* Button component */

    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;

    margin: 0 auto;
    width: 117px;
    height: 40px;

    background-color: var(--action-button-bg-color);
    border: var(--action-button-border);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 3.34262px;

    /* Inside auto layout */
    flex: none;
    order: 0;

    flex-grow: 0;
    cursor: pointer;

}

.billing-resume-subscription-modal-dismiss-button-container-text {
    /* Cancel */

    width: 64px;
    height: 24px;

    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    color: var(--action-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-resume-subscription-modal-confirm-button-container {
    /* buttons */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 13.37px;

    margin: 0 auto;
    width: 117px;
    height: 40px;


    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;


}

.billing-resume-subscription-modal-confirm-button-subcontainer {
    /* Button component */

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13.3705px 26.7409px;
    gap: 6.69px;

    width: 117px;
    height: 40px;

    /* Primary/Primary - Green */
    background-color: var(--adduser-button-bg-color);
    /* box-shadow: 0px 0.835655px 4.17827px rgba(0, 0, 0, 0.3); */
    border-radius: 3.34262px;
    border: var(--adduser-button-border);
    color: var(--adduser-button-text-color);

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
    

}

.billing-resume-subscription-modal-confirm-button-container-text {
    /* Request */

    width: 28px;
    height: 24px;

    font-family: 'Mulish', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    /* identical to box height, or 146% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;

    /* White */
    color: var(--adduser-button-text-color);


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

.billing-resume-subscription-modal-automatic-renew-container {
    /* Selectors */

    width: 14px;
    height: 14px;


    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;

}

#resumeSubscriptionModal .btn-close.smaller {
    --bs-btn-close-bg: none;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background-image: none !important;
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
}

#resumeSubscriptionModal .btn-close.smaller::before,
#resumeSubscriptionModal .btn-close.smaller::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background-color: var(--org-card-subvalue-text-color);
}

#resumeSubscriptionModal .btn-close.smaller::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#resumeSubscriptionModal .btn-close.smaller::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#cancelDowngradeModal .btn-close.smaller {
    --bs-btn-close-bg: none;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background-image: none !important;
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
}

#cancelDowngradeModal .btn-close.smaller::before,
#cancelDowngradeModal .btn-close.smaller::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background-color: var(--org-card-subvalue-text-color);
}

#cancelDowngradeModal .btn-close.smaller::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#cancelDowngradeModal .btn-close.smaller::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#cancelSubscriptionModal .btn-close.smaller {
    --bs-btn-close-bg: none;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background-image: none !important;
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
}

#cancelSubscriptionModal .btn-close.smaller::before,
#cancelSubscriptionModal .btn-close.smaller::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 14px;
    background-color: var(--org-card-subvalue-text-color);
}

#cancelSubscriptionModal .btn-close.smaller::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#cancelSubscriptionModal .btn-close.smaller::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#cancelDowngradeModal label {
    color: var(--org-card-subvalue-text-color);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover-bg-color);
}

#messageArea {
    color: var(--org-modal-error-text-color);
}

.no-active-session {
    color: var(--org-card-subvalue-text-color);
}

.role-radio-group {
    color: var(--org-card-subvalue-text-color);
}

.no-license-requests {
    color: var(--org-card-subvalue-text-color);
}

.license-multiple-note {
    color: var(--org-listing-sort-dropdown-email-color);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.sort-filter-wrapper {
    color: var(--org-listing-sort-text-color);
}

/* Billing page: keep applied filters and filter menus aligned like other tables */
.billing-past-subscription-subcontainer .sort-filter-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.billing-past-subscription-subcontainer .applied-box {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
}

#paymentMethodFilterDropdown,
#subscriptionTypeFilterDropdown {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    background: var(--filtersort-bg-color) !important;
    border: var(--filtersort-border) !important;
    border-radius: 0px 0px 4px 4px;
}

#planQualityFilterDropdown {
    background: var(--filtersort-bg-color) !important;
    border: var(--filtersort-border) !important;
    border-radius: 0px 0px 4px 4px;
}

.billing-resume-subscription-modal-automatic-renew-text{
    color:var(--org-card-subvalue-text-color);
}
.discount-field,
.edit-discount-field{
    width: 65px;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 4px 8px;
        gap: 10px;
        background: #F6FFF8;
        border: 1px solid #D2E0D5;
        border-radius: 4px;
}
 .discount-input,
 .edit-discount-input {
        width: 100% !important;
        border: none;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        color: #323233;
        outline: none;
        min-width: 0;
    }

    .discount-input:focus,
    .edit-discount-input:focus {
        outline: none;
    }

    .discount-label,
    .edit-discount-label {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        color: #323233;
    }

    /* Self User My Plan */

            .self-user-my-plan-page {
            min-height: calc(100vh - 88px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 24px;
            background: transparent;
        }

        .self-user-my-plan-back-wrap {
            width: 100%;
            max-width: none;
            padding-left: 70px;
            margin-top: 8px;
            margin-bottom: 52px;
        }

        .self-user-my-plan-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: var(--profile-back-button-color);
            font-family: 'Mulish', sans-serif;
            font-size: 18px;
            font-weight: 600;
            line-height: 100%;
        }

        .self-user-my-plan-back i {
            font-size: 20px;
            line-height: 1;
        }

        .self-user-my-plan-card {
            width: 100%;
            max-width: 640px;
            background: var(--profile-pagemodal-main-container-bg);
            box-shadow: var(--profile-pagemodal-main-container-box-shadow);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 36px;
        }

        .self-user-my-plan-header {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .self-user-my-plan-title {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 32px;
            line-height: 39px;
            color: var(--profile-page-my-profile-title-color);
        }

        .self-user-my-plan-recharge {
            margin: 0;
            font-family: 'Mulish', sans-serif;
            font-weight: 600;
            font-size: 16px;
            line-height: 100%;
            color: var(--profile-back-button-color);
        }

        .self-user-my-plan-meta {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .self-user-my-plan-row {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 24px;
            border-bottom: var(--profile-body-name-container-border-bottom);
            padding-bottom: 8px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 18px;
            line-height: 120%;
            color: var(--profile-page-my-profile-title-color);
        }

        .self-user-my-plan-icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            flex-shrink: 0;
        }

        html[data-theme="glass"] .self-user-my-plan-icon {
            /* Tint icon images to #15E073 in glass theme only */
            filter: brightness(0) saturate(100%) invert(77%) sepia(88%) saturate(1233%) hue-rotate(84deg) brightness(93%) contrast(89%);
        }

        .self-user-my-plan-label {
            font-size: 18px;
            color: var(--profile-page-my-profile-title-color);
        }

        .self-user-my-plan-value {
            font-size: 18px;
            color: var(--profile-back-button-color);
        }

        .self-user-my-plan-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .self-user-my-plan-btn {
            height: 40px;
            border-radius: 4px;
            font-family: 'Mulish', sans-serif;
            font-weight: 700;
            font-size: 16px;
            line-height: 23px;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            padding: 8px 24px;
        }

        .self-user-my-plan-btn-renew {
            background-color: var(--adduser-button-bg-color);
            color: #ffffff;
            border: 1px solid var(--adduser-button-bg-color);
        }

        .self-user-my-plan-btn-cancel {
            background: var(--action-button-bg-color);
            color: var(--action-button-text-color);
            border: var(--action-button-border);
        }

        .self-user-my-plan-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .self-user-my-plan-page {
                padding: 16px;
                align-items: flex-start;
            }

            .self-user-my-plan-back-wrap {
                padding-left: 16px;
                margin-top: 0;
                margin-bottom: 28px;
            }

            .self-user-my-plan-back {
                font-size: 18px;
            }

            .self-user-my-plan-card {
                gap: 24px;
            }

            .self-user-my-plan-title {
                font-size: 28px;
                line-height: 34px;
            }

            .self-user-my-plan-row {
                font-size: 16px;
            }

            .self-user-my-plan-label,
            .self-user-my-plan-value {
                font-size: 16px;
            }

            .self-user-my-plan-icon {
                width: 20px;
                height: 20px;
            }
        }

    /* End of Self User My Plan */

    /* Signup Plans */
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Mulish:wght@400;700&display=swap');

    .signup-plans-page {
        width: 100%;
        min-height: calc(100vh - 56px);
        position: relative;
        padding: 20px;
        box-sizing: border-box;
        background: transparent;
    }

    .signup-shell {
        position: fixed;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(688px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .signup-panel {
        width: 100%;
        min-height: 580px;
        background: var(--org-card-background-color);
        box-shadow: var(--org-card-box-shadow);
        border: var(--org-card-border-color);
        border-radius: 4px;
        padding: 24px;
        display: flex;
        align-items: center;
        backdrop-filter: blur(10px);
    }

    .signup-content {
        width: 620px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        color: #323233;
    }

    .signup-brand img {
        width: 64px;
        height: auto;
        display: block;
    }

    .signup-title {
        margin: 0;
        font-family: 'Mulish', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 1;
        color: var(--org-modal-bar-succes-color);
    }

    .signup-plan-tabs {
        display: flex;
        gap: 12px;
        width: 100%;
        border-bottom: var(--individual-business-border-color);
        /* margin-bottom: 18px; */
    }

    .signup-plan-tab {
        background: transparent;
        border: 0;
        border-bottom: 2px solid var(--org-listing-sort-dropdown-email-color);
        padding: 0 0 4px;
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;
        color: var(--org-listing-sort-dropdown-email-color);
        cursor: pointer;
    }

    .signup-plan-tab.active {
        color: var(--enduser-message-text-color);
        font-weight: 600;
        border-bottom: 4px solid var(--enduser-message-text-color);
    }

    .signup-tab-content {
        display: none;
    }

    .signup-tab-content.active {
        display: block;
    }

    .signup-plan-grid {
        display: grid;
        grid-template-columns: repeat(2, 312px);
        gap: 16px;
    }

    .signup-plan-card {
        position: relative;
        background: var(--profile-edit-inputfield-color);
        border: var(--org-card-border-color);
        border-radius: 4px;
        padding: 60px 22px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        min-height: 370px;
    }

    .saver-plan-badge {
        position: absolute;
        top: 15px;
        right: 12px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 12px;
        gap: 10px;
        width: 96px;
        height: 30px;
        background: var(--selfuser-plansaver-bg-color);
        border-radius: 24px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--selfuser-plansaver-text-color);
        white-space: nowrap;
        box-sizing: border-box;
    }

    .signup-plan-inner {
        width: 270px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        flex: 1;
    }

    .signup-plan-head {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .signup-plan-name,
    .signup-plan-price,
    .signup-plan-total {
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        line-height: 1;
        font-weight: 600;
        color: var(--org-modal-bar-succes-color);
    }

    .signup-plan-list {
        margin: 0;
        list-style: disc;
        padding: 0 0 0 25px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 180px;
        font-family: 'Mulish', sans-serif;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 400;
        color: var(--org-modal-bar-succes-color);
        width:100%;
        padding-bottom: 18px;
    }

    .signup-plan-list li {
        margin: 0;
    }

    .signup-plan-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 124px;
        height: 42px;
        border-radius: 3.34px;
        border: 1.67px solid var(--adduser-button-border);
        background-color: var(--adduser-button-bg-color);
        color: var(--adduser-button-text-color);
        text-decoration: none;
        font-family: 'Mulish', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.02em;
        transition: opacity 0.2s ease;
    }

    .signup-plan-btn:hover {
        opacity: 0.92;
    }

    .signup-bottom-link {
        margin: 0;
        font-family: 'Mulish', sans-serif;
        font-size: 18px;
        line-height: 1.4;
        font-weight: 400;
        color: var(--org-modal-bar-succes-color);
    }

    .signup-bottom-link a {
        color: var(--enduser-message-text-color);
        text-decoration: none;
        font-weight: 700;
        margin-left: 6px;
    }

    .signup-bottom-link a:hover {
        text-decoration: underline;
    }

    @media (max-width: 640px) {
        .signup-plans-page {
            padding: 12px;
        }

        .signup-shell,
        .signup-panel,
        .signup-content {
            width: 100%;
        }

        .signup-shell {
            width: min(100%, calc(100vw - 24px));
            max-height: calc(100vh - 24px);
        }

        .signup-panel {
            padding: 16px;
        }

        .signup-plan-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .signup-plan-card {
            min-height: auto;
        }

        .signup-plan-inner {
            width: 100%;
        }

        .signup-plan-list {
            width: auto;
        }

        .signup-plan-btn {
            width: 100%;
        }
    }

/* End of Signup Plans */

/* Create Account Page */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Mulish:wght@400;700&display=swap');

    .create-account-page {
        min-height: calc(100vh - 56px);
        position: relative;
        padding: 16px;
    }

    .create-account-shell {
        position: fixed;
        top: 53%!important;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(440px, calc(100vw - 32px));
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .create-account-card {
        width: 100%;
        background: var(--org-card-background-color);
        box-shadow: var(--org-card-box-shadow);
        border: var(--org-card-border-color);
        backdrop-filter: blur(10px);
        padding: 24px!important;
        transition: min-height 0.2s ease;
    }

    .create-account-card.is-step-1 {
        min-height: 472px !important;
    }

    .create-account-card.is-step-2 {
        min-height: 560px;
    }

    .create-account-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .create-account-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .create-account-logo {
        width: 64px;
        height: auto;
        display: block;
    }

    .create-account-title {
        margin: 0;
        font-family: 'Mulish', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 100%;
        color: var(--org-modal-bar-succes-color);
    }

    .create-account-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .create-account-fields {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .create-account-row {
        display: flex;
        gap: 18px;
    }

    .create-account-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .create-account-label {
        margin: 0;
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 120%;
        color: var(--org-home-subtitle-text-color);
    }

    .create-account-input {
        width: 100%;
        height: 40px;
        border: 1px solid var(--org-modal-inputfield-border-color)!important;
        border-radius: 4px;
        background: var(--org-modal-inputfield-bg-color)!important;
        padding: 4px 8px;
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        color: var(--org-modal-inputfield-text-color)!important;
        outline: none;
    }

    .create-account-input:focus {
        border-color: #216767;
        box-shadow: 0 0 0 2px rgba(33, 103, 103, 0.12);
    }

    .create-account-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .create-account-actions-submit {
        display: block;
    }

    .create-account-btn {
        width: 117px;
        height: 40px;
        border-radius: 3.34px;
        font-family: 'Mulish', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 23px;
        letter-spacing: 0.05em;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
    }

    .create-account-btn-back {
        color: var(--action-button-text-color) !important;
        background: var(--action-button-bg-color) !important;
        border: var(--action-button-border) !important;
    }

    .create-account-btn-next {
        border: 1.67px solid var(--adduser-button-border);
        background-color: var(--adduser-button-bg-color);
        color: var(--adduser-button-text-color);
    }

    .create-account-btn-submit {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        border: 1.67px solid var(--adduser-button-border);
        background-color: var(--adduser-button-bg-color);
        color: var(--adduser-button-text-color);
        font-family: 'Mulish', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        cursor: pointer;
    }

    .create-account-step {
        display: none;
    }

    .create-account-step.active {
        display: flex;
        flex-direction: column;
        gap: 64px !important;
    }

    .create-account-login-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Mulish', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 140%;
        color: var(--org-modal-bar-succes-color);
    }

    .create-account-login-row a {
        color: var(--enduser-message-text-color);
        text-decoration: none;
        font-weight: 700;
    }

    .create-account-login-row a:hover {
        text-decoration: underline;
    }

    @media (max-width: 575px) {
        .create-account-page {
            padding: 16px;
        }

        .create-account-shell,
        .create-account-card,
        .create-account-content,
        .create-account-form {
            width: 100%;
        }

        .create-account-shell {
            width: min(100%, calc(100vw - 32px));
            max-height: calc(100vh - 32px);
        }

        .create-account-row {
            flex-direction: column;
            gap: 24px;
        }

        .create-account-title {
            font-size: 30px;
        }

        .create-account-card.is-step-1,
        .create-account-card.is-step-2 {
            min-height: unset;
        }
    }

/* End of Create Account Page */

/*Self-user-geolocation*/

    .self-user-profile-body-geolocation-img-container {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--profile-page-my-profile-title-color);
        }

        .self-user-profile-body-geolocation-img-container img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            content: var(--selfuser-profile-card-location-icon, url('/assets/profile-page-icons/location.png'));
        }

        .self-user-profile-body-geolocation-flag {
            width: 18px;
            height: 18px;
            object-fit: contain;
            border-radius: 2px;
            margin-right: 6px;
            vertical-align: text-bottom;
        }

         .self-user-geolocation-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .self-user-geolocation-modal .modal-content {
            width: 456px;
            max-width: calc(100vw - 24px);
            min-height: 308px;
            background: #FFFFFF;
            border-radius: 4px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 64px;
            box-sizing: border-box;
            position: relative;
        }

        .self-user-geolocation-modal-top {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .self-user-geolocation-modal-header {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .self-user-geolocation-modal-header-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
        }

        .self-user-geolocation-modal-title {
            margin: 0;
            font-family: 'Mulish', sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 20px;
            line-height: 100%;
            color: #28396A;
        }

        .self-user-geolocation-modal-close {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            color: #28396A;
            cursor: pointer;
            font-size: 24px;
            line-height: 1;
            padding: 0;
        }

        .self-user-geolocation-modal-desc {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 140%;
            color: #414141;
        }

        .self-user-geolocation-available-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-right: 8px;
            white-space: nowrap;
        }

        .self-user-geolocation-available-flag {
            width: 16px;
            height: 16px;
            object-fit: contain;
            border-radius: 2px;
        }

        .self-user-geolocation-modal-field {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .self-user-geolocation-modal-field-label {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: 18px;
            line-height: 120%;
            color: #000000;
        }

        .self-user-geolocation-modal-select-wrap {
            width: 100%;
            height: 40px;
            background: #F6FFF8;
            border: 1px solid rgba(33, 103, 103, 0.2);
            border-radius: 4px;
            padding: 8px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }

        .self-user-geolocation-custom-dropdown {
            width: 100%;
            position: relative;
        }

        .self-user-geolocation-dropdown-trigger {
            width: 100%;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 0;
        }

        .self-user-geolocation-dropdown-trigger-left {
            display: flex;
            align-items: center;
            gap: 8px;
            overflow: hidden;
            width: calc(100% - 24px);
        }

        .self-user-geolocation-modal-flag-preview {
            width: 18px;
            height: 18px;
            object-fit: contain;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .self-user-geolocation-dropdown-input {
            width: 100%;
            border: none;
            background: transparent;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Inter', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            color: #216767;
            outline: none;
            padding: 0;
        }

        .self-user-geolocation-dropdown-input::placeholder {
            color: #216767;
            opacity: 1;
        }

        .self-user-geolocation-dropdown-arrow {
            font-size: 18px;
            line-height: 1;
            color: #216767;
        }

        .self-user-geolocation-dropdown-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            width: 100%;
            background: #F6FFF8;
            border: 1px solid rgba(33, 103, 103, 0.2);
            border-radius: 4px;
            z-index: 10010;
            max-height: 220px;
            overflow: hidden;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
        }

        .self-user-geolocation-options-list {
            max-height: 220px;
            overflow-y: auto;
        }

        .self-user-geolocation-option-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #216767;
        }

        .self-user-geolocation-option-item:hover,
        .self-user-geolocation-option-item.active {
            background: rgba(33, 103, 103, 0.12);
        }

        .self-user-geolocation-option-item-empty {
            padding: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #6c7f7f;
        }

        .self-user-geolocation-modal-actions {
            width: 100%;
            display: flex;
            gap: 16px;
        }

        .self-user-geolocation-modal-change-btn,
        .self-user-geolocation-modal-cancel-btn {
            width: 117px;
            height: 40px;
            border-radius: 4px;
            font-family: 'Mulish', sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 16px;
            line-height: 23px;
            letter-spacing: 0.05em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        }

        .self-user-geolocation-modal-change-btn {
            border: none;
            background: #90B3B3;
            color: #FFFFFF;
            cursor: not-allowed;
        }

        .self-user-geolocation-modal-change-btn.enabled {
            background: #216767;
            cursor: pointer;
        }

        .self-user-geolocation-modal-cancel-btn {
            box-sizing: border-box;
            border: 1px solid #216767;
            background: #FFFFFF;
            color: #216767;
            cursor: pointer;
        }

        .no-plans-message{
            color: var(--org-modal-bar-succes-color);
        }


        /* End of Self-user-geolocation */

        /* Theme appearence */

                .new-modal-overlay-first-login {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
            z-index: 999;
        }

        /* Modal */
        .new-modal-modal-first-login {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            /* width: 798px; */
            background: #fff;
            border-radius: 4px;
            padding: 24px;
            z-index: 1000;
            opacity: 0;
            transition: 0.3s;
            font-family: Arial, sans-serif;
        }

        .new-modal-overlay-first-login.new-modal-active-first-login {
            opacity: 1;
            pointer-events: all;
        }

        .new-modal-modal-first-login.new-modal-active-first-login {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Header */
        .new-modal-modal-header-first-login {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .new-modal-modal-header-first-login h2 {
            font-weight:700;
            margin: 0;
            font-size: 20px;
            color: #28396A;
        }

        .new-modal-modal-header-first-login p {
            font-weight:400;
            margin: 4px 0 0;
            font-size: 14px;
        }

        .new-modal-close-btn-first-login {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }

        /* Options */
        .new-modal-options-first-login {
            display: flex;
            gap: 24px;
            margin-top: 36px;
        }

        .new-modal-card-first-login {
            width: 234px;
            padding: 16px;
            background: #D9D9D9;
            border-radius: 4px;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .new-modal-card-first-login.new-modal-active-first-login {
            border-color: #34B1B1;
        }

        .new-modal-preview-first-login {
            width: 202px;
            height: 152px;
            margin-top: 10px;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }

        .new-modal-light-first-login { background: #F6FFF8; }

        /* Light theme preview rectangles */
        .new-modal-light-rect-bg-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 202px;
            height: 152px;
            left: 0px;
            top: 0px;
            background: #F6FFF8;
            border-radius: 4px;
        }
        .new-modal-light-rect-sidebar-first-login {
            position: absolute;
            width: 23px;
            height: 136px;
            left: 6px;
            top: 8px;
            background: #216767;
            border-radius: 4px;
        }
        .new-modal-light-rect-btn-filled-first-login {
            position: absolute;
            width: 18px;
            height: 8px;
            left: 176px;
            top: 17px;
            background: #216767;
            border-radius: 1px;
        }
        .new-modal-light-rect-btn-outline-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 18px;
            height: 8px;
            left: 156px;
            top: 17px;
            border: 1px solid #216767;
            border-radius: 1px;
            background: transparent;
        }
        .new-modal-light-rect-search-first-login {
            position: absolute;
            width: 73px;
            height: 8px;
            left: 37px;
            top: 17px;
            background: #FFFFFF;
            border-radius: 1px;
        }
        .new-modal-light-rect-content-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 157px;
            height: 113px;
            left: 37px;
            top: 31px;
            background: #FFFFFF;
            border: 1px solid #F2F2F2;
            border-radius: 1px;
        }
        .new-modal-dark-first-login { background: #111111; }

        /* Dark theme preview rectangles */
        .new-modal-dark-rect-bg-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 202px;
            height: 152px;
            left: 0px;
            top: 0px;
            background: #111111;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
        }
        .new-modal-dark-rect-sidebar-first-login {
            position: absolute;
            width: 23px;
            height: 136px;
            left: 6px;
            top: 8px;
            background: #224C4C;
            border-radius: 4px;
        }
        .new-modal-dark-rect-btn-filled-first-login {
            position: absolute;
            width: 18px;
            height: 8px;
            left: 174px;
            top: 17px;
            background: #1E8D8D;
            border-radius: 1px;
        }
        .new-modal-dark-rect-btn-outline-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 18px;
            height: 8px;
            left: 154px;
            top: 17px;
            border: 1px solid #1E8D8D;
            border-radius: 1px;
            background: transparent;
        }
        .new-modal-dark-rect-search-first-login {
            position: absolute;
            width: 73px;
            height: 8px;
            left: 38px;
            top: 17px;
            background: #3B3B3B;
            border-radius: 1px;
        }
        .new-modal-dark-rect-content-first-login {
            position: absolute;
            width: 155px;
            height: 113px;
            left: 38px;
            top: 31px;
            background: #3B3B3B;
            border-radius: 1px;
        }
        .new-modal-glass-first-login {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0) 100%), url('/assets/img/new-theme.jpg');
            background-size: cover;
            background-position: center;
        }

        /* Glass theme preview rectangles */
        .new-modal-glass-rect-bg-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 202px;
            height: 152px;
            left: 0px;
            top: 0px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0) 100%), url('/assets/img/new-theme.jpg');
            background-size: cover;
            background-position: center;
            border: 1px solid #F2F2F2;
            border-radius: 4px;
        }
        .new-modal-glass-rect-btn-filled-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 18px;
            height: 8px;
            left: 175px;
            top: 17px;
            background: #AA6709;
            border: 1px solid #AA6709;
            border-radius: 1px;
        }
        .new-modal-glass-rect-btn-outline-first-login {
            box-sizing: border-box;
            position: absolute;
            width: 18px;
            height: 8px;
            left: 155px;
            top: 17px;
            border: 1px solid #AA6709;
            border-radius: 1px;
            background: transparent;
        }
        .new-modal-glass-rect-search-first-login {
            position: absolute;
            width: 94px;
            height: 8px;
            left: 31px;
            top: 17px;
            background: rgba(0, 0, 0, 0.004);
            border: 1px solid #fff;
            border-radius: 4px;
        }
        .new-modal-glass-rect-content-first-login {
            position: absolute;
            width: 158px;
            height: 113px;
            left: 35px;
            top: 31px;
            background: rgba(0, 0, 0, 0.004);
            border: 1px solid #fff;
            border-radius: 4px;
        }
        .new-modal-glass-rect-sidebar-first-login {
            position: absolute;
            width: 23px;
            height: 138px;
            left: 4px;
            top: 6px;
            background: rgba(0, 0, 0, 0.004);
            border: 1px solid #fff;
            border-radius: 4px;
        }

        /* Buttons */
        .new-modal-actions-first-login {
            height: 40px;
            margin-top: 36px;
            display: flex;
            gap: 16px;
        }

        .new-modal-btn-first-login {
            padding: 10px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .new-modal-primary-first-login {
            background: #216767;
            width: 110px;
            color: white;
            border: none;
        }

        .new-modal-secondary-first-login {
            background: white;
            width: 110px;
            border: 1px solid #216767;
            color: #216767;
        }

                /* Custom radio button styling */
        .new-modal-card-first-login input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            background-color: #F6F8FA;
            margin: 0 8px 0 0;
            font: inherit;
            width: 24px;
            height: 24px;
            border: 2px solid #22C1C3;
            border-radius: 50%;
            display: inline-grid;
            place-content: center;
            vertical-align: middle;
            transition: border-color 0.2s;
        }
        .new-modal-card-first-login input[type="radio"]:checked {
            border: 2px solid #22C1C3;
            background-color: #F6F8FA;
        }
        .new-modal-card-first-login input[type="radio"]:checked::before {
            content: '';
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #22C1C3;
            margin: 3px auto;
        }
        .new-modal-card-first-login input[type="radio"]:not(:checked)::before {
            content: '';
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: transparent;
            margin: 3px auto;
        }

        /* end of Theme appearence */

        /*Added by filter csss*/
        
.role-dropdown-content.useraddedby {
    width: 201px;
    background: #FFFFFF;
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 4px 4px;
    padding: 8px 0;
}

/* Header */
.useraddedby-header {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #28396A;
    padding: 0 8px;
    height: 32px;
    display: flex;
    align-items: center;
}

/* Row */
.useraddedby-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 8px;
    height: 32px;
    background: #FFFFFF;
}

/* Name */
.useraddedby-name {
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #323233;
}

/* Checkbox */
.useraddedby-checkbox {
    width: 18px;
    height: 18px;
    background: #34B1B1;
    border-radius: 3px;
    position: relative;
}

/* Checked state */
.useraddedby-checkbox.checked {
    background: #34B1B1;
}

/* Tick */
.useraddedby-checkbox.checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}