/* CSS Document */

#imagewrapper {
    width: 48%;
    float: right;
    /*background-color:green;*/
}

#textwrapper {
    width: 48%;
    /*background-color:red;*/
}

@media screen and (max-width: 640px) {
    #imagewrapper {
        width: 100%;
        float: none;
        margin-top: 0px;
    }
    #textwrapper {
        width: 100%;
    }
}

#cloudtagouter {
    padding: 10px;
    margin: 00px;
    box-shadow: 3px 3px 1px #7c7c7c;
    border-radius: 5px;
    background-color: #DBE3D0;
    width: 95%;
    display: block;
}

#startercloudtag {
    width: 99%;
    font-family: annie use your telescope;
    font-size: 20px;
}

#startercloudtag a {
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: black;
    text-transform: lowercase;
}

#startercloudtag a:first-child {
    padding-left: 0px;
}

#startercloudtag a:last-child {
    padding-right: 0px;
}

#startercloudtag a:hover {
    font-weight: bold;
    cursor: pointer;
}

.DateEditable {

    white-space: nowrap;
}
.page-loader {
    position: fixed;
    /* top: 40%;
    left: 40%; */
    background: #cccccc94;
    width: 100%;
    height: 100%;
    padding: 58px;
    /* border-radius: 10px; */
    display: none;
    text-align: center;
    z-index: 9999;
}

.spinner-border {
    position: relative;
    top: 50%;
}

 /* Set the height of the table body */
 .table-responsive {
    max-height: 400px; /* Adjust the height as needed */
    overflow-y: auto;
}

/* Ensure the header aligns with the body */
.table-responsive table.dataTable thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Adjust the color as needed */
    z-index: 1;
}

.table-responsive::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners */
}
.swal2-input,
.swal2-textarea {
    font-size: 14px;
}

.calendly-popup-text {
    text-decoration: underline;
}

.fr-adr_link_button {
    text-decoration: none;
}

a:link {
    text-decoration: underline;
}
a.formButton,
a.fr-adr_link_button {
    text-decoration: none
}
.calendly-popup-text:hover {
    cursor: pointer;
}
.swalDialogStyle .swal2-content {
    font-size: 14px;
}
.fr-command .fa-save {
    color: red;
    font-size: 20px !important;
}
.row-highlight {
    background-color: #aaaaaa;
    color: black
}
.row-highlight-1 {
    background-color: #f9f2f2;
    color: black
}

.row-highlight-2 {
    background-color: #FFFDE0;
    color: black
}
/* ================================
   Froala dropdown + outside submenu
   ================================ */

/* 1. Froala containers must NOT clip */
.fr-toolbar,
.fr-dropdown-wrapper,
.fr-dropdown-content {
    overflow: visible !important;
}

/* 2. MAIN dropdown scroll ONLY */
.fr-dropdown-content {
    max-height: 260px;
}

.fr-dropdown-content > .fr-dropdown-list {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
}

/* 3. Submenu parent */
.fr-dropdown-submenu {
    position: relative;
}


/* 5. Show submenu on hover */
.fr-dropdown-submenu:hover > .fr-submenu {
    display: block;
}

/* 6. Basic item styling */
.fr-dropdown-list {
    padding: 0;
}

.fr-dropdown-list li a {
    padding: 8px 12px;
    display: block;
    white-space: nowrap;
    cursor: pointer;
}

/* 7. Hover polish */
.fr-dropdown-list a:hover {
    background-color: #f1f3f5;
}


/* Submenu base */
.fr-dropdown-submenu > .fr-submenu {
    display: none;
    position: fixed;
    min-width: 180px;
    background: #fff;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* Parent menu item styling */
.fr-dropdown-submenu > .fr-has-submenu {
    position: relative;
    padding-right: 28px; /* space for arrow */
    cursor: pointer;
}

/* Arrow icon */
.fr-dropdown-submenu > .fr-has-submenu::after {
    content: "▶";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.6;
}

/* Hover effect (nice but optional) */
.fr-dropdown-submenu:hover > .fr-has-submenu::after {
    opacity: 1;
    transform: translateY(-50%) translateX(2px);
}
/* Only this table – no borders, no lines */
.no-lines-table,
.no-lines-table td,
.no-lines-table th {
    border: none !important;
}

.no-lines-table tbody tr {
    border-bottom: none !important;
}
table.no-lines-table.dataTable.no-footer {
    border-bottom: none !important;
}

.BirthdayContentTbl .switch-after-email {
    padding-left: 0 !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-label {
    padding-right: 3rem !important;
    cursor: pointer !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-label::before {
    left: auto !important;
    right: 0 !important;
    width: 2rem !important;
    height: 1.25rem !important;
    border-radius: 1rem !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-label::after {
    left: auto !important;
    right: calc(2rem - 1rem) !important;
    width: 1rem !important;
    height: 1rem !important;
    border-radius: 50% !important;
    transform: none !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-input:checked
~ .custom-control-label::after {
    right: 0 !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-input:not(:checked)
~ .custom-control-label::before {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.BirthdayContentTbl .switch-after-email .custom-control-input:checked
~ .custom-control-label::before {
    background-color: #007bff !important;
    border-color: #007bff !important;
}

/* Roles style */

.heading{
    font-size : 18 px;
    font-weight : 600
}
body { background:#f8f9fa; }
.sidebar-menu .nav-link {
    cursor: pointer;
    padding: 12px 16px;
    color: #333;
}

.sidebar-menu .nav-link.active {
    background: #adb5bd;
    color: black;
}

.tab-page {
    display: none;
}

.tab-page.active {
    display: block;
}

.stepper {
    display:flex;
    justify-content:space-between;
}

.step {
    flex:1;
    text-align:center;
    font-size:13px;
    color:#aaa;
    position:relative;
}

.step::after {
    content:'';
    position:absolute;
    top:15px;
    right:-50%;
    width:100%;
    height:2px;
    background:#ddd;
    z-index:-1;
}

.step:last-child::after { display:none; }

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: #fff;
    font-weight: 600;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 5px;
    flex-shrink: 0;
}

.step.active .circle,
.step.done .circle {
    background:#28a745;
}

.step.active, .step.done { color:#000; }

.step-content { display:none; }

.step-content.active { display:block; }

.access-box {
    border:1px solid #ddd;
    padding:15px;
    border-radius:6px;
    margin-bottom:10px;
    cursor:pointer;
}

.access-box:hover {
    border-color:#28a745;
}
.btn-assign {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #212529;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px 14px;
    transition: all 0.2s ease;
}

.btn-assign:hover {
    background: #e9ecef;
    border-color: #ced4da;
}

.btn-ellipsis {
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.btn-ellipsis:hover {
    background: #f1f3f5;
}

.assign-role-modal {
    border-radius: 14px;
}

.assign-stepper-2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.assign-step-2 {
    text-align: center;
    flex: 1;
    opacity: 0.4;
}

.assign-step-2.active {
    opacity: 1;
}

.assign-step-2 .circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 5px;
}

.assign-step-2.active .circle {
    background:#28a745;
    color: #fff;
}

.assign-progress-2 {
    height: 6px;
    background: #e5e7eb;
    border-radius: 10px;
    margin-bottom: 20px;
}

.assign-progress-bar-2 {
    height: 100%;
    width: 50%;
    background:#28a745;
    border-radius: 10px;
    transition: 0.3s ease;
}

.assign-step-content-2 {
    display: none;
}

.assign-step-content-2.active {
    display: block;
}

.custom-dropdown-2 {
    position: relative;
    margin-top: 15px;
}

.dropdown-selected-2 {
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
}

.dropdown-options-2 {
    display: none;
    position: absolute;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 5px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
}

.dropdown-item-2 {
    padding: 10px;
    cursor: pointer;
}

.dropdown-item-2:hover {
    background: #f3f4f6;
}

.preview-box {
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}
.ti-menu-2{
    font-style : normal !important;
}
.sidebar-collapsed {
    flex: 0 0 70px !important;
    max-width: 70px !important;
    transition: all 0.3s ease;
}

.sidebar-collapsed .sidebar-text {
    display: none;
}

.sidebar-collapsed .nav-link {
    text-align: center;
}

.sidebar-collapsed .sidebar-icon {
    margin-right: 0 !important;
}

/* Smooth transition */
#roleSidebar {
    transition: all 0.3s ease;
}

/* Collapsed sidebar */
.sidebar-collapsed {
    width: 70px;
}

/* Hide text when collapsed */
.sidebar-collapsed .sidebar-text {
    display: none;
}
/* Layout */
.security-layout {
    display: flex;
    width: 100%;
}

/* SIDEBAR DEFAULT */
.sidebar {
    width: 220px;
    transition: width 0.3s ease;
    overflow: hidden;
}

/* COLLAPSED SIDEBAR */
.sidebar.collapsed {
    width: 56px;
}

/* Sidebar menu alignment */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    white-space: nowrap;
    cursor: pointer;
}

/* Icon spacing */
.sidebar-icon {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

/* Hide text when collapsed */
.sidebar.collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

/* Center icons when collapsed */
.sidebar.collapsed .nav-link {
    justify-content: center;
}
.BackEndPage .pm_menu_btn{
    font-size: 1.8em;
    padding: 0px 8px 0px 8px;
    border-radius: 4px;
    background: #F2F4F9;
    cursor: pointer;
}

/* CONTENT AREA */
.content-area {
    flex: 1;
    transition: margin-left 0.3s ease;
    height: fit-content;
}
@media (max-width: 768px) {

    .stepper {
        flex-direction: column;
        align-items: flex-start;
    }

    .step {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .step .circle {
        margin: 0;
    }


    .step::after {
        display: none;
    }

    .circle {
        margin: 0 10px 0 0;
    }

    .card {
        margin: 0 !important;
    }

    #permission_details .mx-3.my-2 {
        display: flex;
        flex-direction: column;
    }

    #permission_details label {
        margin-left: 0 !important;
        margin-bottom: 8px;
    }
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card-body {
        padding: 15px !important;
    }
}