/* ----------------------------------------------------------
                    Global Css Start
---------------------------------------------------------- */

:root {
    --Primary-Color: #56469C;
    --Secondary-Color: #6c757d;
    --Grays-100: #f7f8f9;
    --Grays-200: #e9ecef;
    --Text-Color: #000000;
    --fs16: 16px;
    --ff_DMSerif: 'DM Serif Text', serif;
    --ff_roboto: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

body {
    font-family: 'Roboto', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

h4,
h5 {
    font-family: 'DM Serif Text', serif;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-60 {
    margin-top: 60px;
}

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

.greenTxt {
    color: #34C759;
}

.purpleTxt {
    color: var(--Primary-Color);
}

a {
    transition: 0.3s ease;
    color: var(--Primary-Color);
}

.p-20 {
    padding: 20px;
}

.white-box {
    background-color: #ffffff;
    border-radius: 16px;
}

/* ----------------------------------------------------------
                    Global Css End
---------------------------------------------------------- */


/* ----------------------------------------------------------
                    Login CSS Start
---------------------------------------------------------- */

.login-card {
    border-radius: 24px;
    padding: 45px 80px;
    background-color: #fff;
    position: relative;
    border-top-left-radius: 130px;
}



.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: var(--Primary-Color);
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 25px;
    box-shadow: 0px 0px 12px 0px #00000024;
}


.footer-text {
    text-align: center;
    padding: 12px 8px;
    font-size: 0.9rem;
    color: #000000;
    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.14);
    position: relative;
    z-index: 9;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}




.h-100vh {
    min-height: 100vh;
}

.login-wrapper {
    background: var(--Grays-100);
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 30px;

}



.dark-btn {
    font-weight: 700;
    border: 2px solid var(--Primary-Color);
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    padding: 10px 15px;
    position: relative;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
    background: #ffffff;
    text-decoration: none;
}

.dark-btn:hover svg path {
    fill: var(--Primary-Color);
}

.dark-btn::before {
    content: '';
    background: var(--Primary-Color);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--Primary-Color);
}

.dark-btn span {
    position: relative;
    display: inline-flex;
    margin: 0 auto;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.dark-btn:hover span {
    color: var(--Primary-Color);
}

.dark-btn:hover::before {
    transform: translate3d(0, -100%, 0);
}
.color-primary {
    color: var(--Primary-Color);
}

.form-design-1 .form-control {
    background-color: #ffffff;
    border: 1px solid var(--Gray---Client-100, #ECECED);
    border-radius: 8px;
    height: auto;
    padding: 12px 20px;
    font-size: 16px;
    color: #2E2E2E;
}

.form-design-1 .form-control:focus {
    box-shadow: none;
    outline: none;
}

.form-design-1 .pwd-input-group .view-hide-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: transparent;
    border: none;
    width: 50px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.get-help-link,
.get-help-link:hover {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--Primary-Color);
    font-size: var(--fs16);
    border-bottom: 1px solid var(--Primary-Color);
    font-weight: 600;
}

.form-design-1 .input-group.pwd-input-group .form-control {
    border-radius: 8px !important;
}

.grey-text {
    color: #929BA0;
}

.get-help-link svg path {
    fill: var(--Primary-Color);
}

.title-1 {
    font-size: 40px;
    font-weight: 400;
    color: var(--Text-Color);
    margin-bottom: 20px;
    font-family: var(--ff_DMSerif);
}

.title-2 {
    font-size: 24px;
    font-weight: 500;
    color: var(--Text-Color);
    margin-bottom: 20px;
    font-family: var(--ff_roboto);
}

.login-wrapper:before {
    background: #E5E7FA;
    width: 930px;
    height: 930px;
    content: "";
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 10%;
    left: 100%;
    z-index: -1;
    filter: blur(400px);
}

.login-wrapper:after {
    background: #E5E7FA;
    width: 930px;
    height: 930px;
    content: "";
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 100%;
    left: 0%;
    z-index: -1;
    filter: blur(400px);
}

.customHeight {
    min-height: calc(100vh - 76px);
}


.passMatch a {
    color: #000000;
}


.get-help-btn {
    position: absolute;
    bottom: 30px;
    right: 40px;
}

.get-help-btn:hover svg path {
    fill: var(--Primary-Color);
}



/* ----------------------------------------------------------
                    Login CSS End
---------------------------------------------------------- */



/* ----------------------------------------------------------
                    Dashboard CSS Start
---------------------------------------------------------- */

/* -----------------------------
       Header CSS Start
------------------------------ */

#header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99;
}


.headerRight sup {
    background: #B8030A;
    width: 23px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border-radius: 14px;
    left: -15px;
    top: -8px;
}

.headerRight {
    display: flex;
    align-items: center;
    gap: 10px;
}


.profile-dropdown>.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}
.profile-dropdown .dropdown-toggle::after {
    display: none;
}

.headerContainer {
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
}

.headerLogo img {
    max-width: 170px;
    width: 100%;
}


#header 
 .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
    z-index: 9;
}




#header .dropdown ul {
    margin: 0;
    padding:  0;
    background: #ffffff;
    display: block;
    position: absolute;
    visibility: hidden;
    right: 0;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    min-width: 355px;
    max-width: 355px;
    border-radius: 8px;
    border-bottom: 1px solid #E4E8E9;
}
#header .dropdown .dropdown-menu {
    display: none;
}
#header .dropdown .dropdown-menu.show {
    display: block !important;
    visibility: visible;
    opacity: 1;
}

#header .dropdown ul li {
    padding: 16px;
    border-bottom: 1px solid #E4E8E9;
}

.dropdown ul li:last-child {
    border-bottom: none;
}

#header .dropdown ul li a {
    display: flex;
    gap: 8px;
    color: #2E2E2E;
    text-decoration: none;
}


#header .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
    z-index: -1;
}



/* -----------------------------
       Header CSS End
------------------------------ */


.main-content {
    background-color: #F1F2FC;
    position: relative;
    min-height: calc(100svh - 78px);
    padding: 20px;
    display: flex;
    gap: 24px;
}

.main-wrapper {
    width: 100%;
    flex: 1 1;
}

/* -----------------------------
       SideBar CSS Start
------------------------------ */


.sidebar.active {
    max-width: 320px;
    width: 100%;
}


.sidebar {
    min-width: 72px;
    max-width: 72px;
    transition: all 0.3s ease;
    padding: 12px 8px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #ffffff;
    height: fit-content;
    position: sticky;
    top: 6.1rem;
}

.sidebar li a svg {
    min-width: 24px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 185px);
    justify-content: space-between;
    overflow: auto;
    padding: 12px 0;
}
.sidebar-nav .top-nav {
    margin: 0;
}
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--Primary-Color);
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: #6a5acd;
}

.sidebar-nav::-webkit-scrollbar-track {
    background-color: #f1f2fc;
    border-radius: 2px;
}

#sidebarToggle {
    padding: 2px;
    border: 1px solid #E4E8E9;
    border-radius: 4px;
    background-color: transparent;
}

#sidebarToggle.active {
    transform: scaleX(-1);
    transition: all 0.3s ease;
}

#sidebarToggle:hover svg path {
    fill: var(--Primary-Color);
}

#sidebarToggle:hover {
    background-color: #F1F2FC;
    border: 1px solid var(--Primary-Color);
}

.sidebar-nav li {
    padding: 12px 16px;
    height: 50px;
}

.sidebar-nav li a {
    text-decoration: none;
    color: #333333;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sidebar.active li a {
    font-size: 16px;
    white-space: nowrap
}



.sidebar li a {
    font-size: 0;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.sidebar-nav li.active,
.sidebar-nav li:hover {
    background-color: #F1F2FC;
    border-radius: 8px;
    position: relative;
}

.sidebar-nav li.active::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: var(--Primary-Color);
    width: 5px;
    height: calc(100% - 16px);
    border-radius: 0 8px 8px 0;
}


.sidebar-nav li.active a {
    color: var(--Primary-Color);
    font-weight: 700;
}

.sidebar-nav li:hover a {
    color: var(--Primary-Color);
}


.sidebar-nav li.active svg path,
.sidebar-nav li:hover svg path {
    fill: var(--Primary-Color);
}
.sidebar.active {
    min-width: 250px;
}



/* -----------------------------
       SideBar CSS End
------------------------------ */


/* -----------------------------
       Breadcrumb CSS Start
------------------------------ */
.breadcrumb {
    margin-bottom: 24px;
    display: inline-flex;
    padding: 14px 16px;
    background: #ffffff;
    border-radius: 8px;
    color: #2E2E2E;
    border: 1px solid #E4E8E9;
}

.breadcrumb-item {
    font-size: 16px;
    color: #2E2E2E;
    font-weight: 500;
}

/* -----------------------------
       Breadcrumb CSS End
------------------------------ */




.search-box {
    position: relative;

}

.search-box input.form-control {
    padding: 12px;
    min-width: 320px;
    width: 100%;
}

.search-box input.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--Primary-Color);
}

svg.search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}



/* -----------------------------
       Table CSS Start
------------------------------ */

table.table td,
table.table th {
    border: 1px solid #DCDDDE;
    color: #2E2E2E;
    padding: 8px 16px;
}

table.table th {
    background-color: #E5E7FA;
    font-weight: 500;
    vertical-align: middle;
}
table.table th.action-col {
    min-width: 140px;
}
table.table th.phone-col {
    min-width: 160px;
}
table.table th.rank-col {
    min-width: 130px;
}
table.table th.col-date-time {
    min-width: 120px;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: #e5e7faa1;
}

table.table {
    overflow: hidden;
    border-collapse: collapse;
    border-spacing: 0;
}

table tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

table tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.company-table-info {
    display: flex;
    min-width: 135px;
    gap: 10px;
}
.company-table-info .cti-img {
    width: 32px;
    flex: 0 0 32px;
}
.company-table-info .cti-content {
    width: calc(100% - 42px);
    flex: 0 0 calc(100% - 42px);
    align-self: center;
}

ul.pagination {
    margin: 10px 0 0;
}

ul.pagination li a {
    color: #788287;
}

ul.pagination li.page-item.active a,
ul.pagination li.page-item.active:hover a {
    background-color: #E5E7EB;
    border-color: #E5E7EB;
    color: #2E2E2E;
}


ul.pagination .nextBtn a,
ul.pagination .PrevBtn a {
    color: #2E2E2E;
    font-weight: 500;
}
.showing-result {
    font-family: var(--ff_roboto);
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #929BA0;
}
ul.pagination .page-link:focus {
    outline: none;
    box-shadow: none;
}

/* -----------------------------
       Table CSS End
------------------------------ */

/* ----------------------------------------------------------
                    Dashboard CSS End
---------------------------------------------------------- */





/* From Shubham */


/* __________________________________________________________________________ */
.breadcrumnbWrapper .breadcrumb-item a {
    color: #2AA5C9;
    text-decoration: none;
}
.breadcrumnbWrapper .breadcrumb-item.active a{
    color: #2E2E2E;
}
/* __________________________________________________________________________ */



/* ----------------------------------------------------------
                    Company Card CSS Start
---------------------------------------------------------- */

.company-card {
    background: #ffffff;
    border-radius: 0px;
    display: flex;
}
.company-card .cc-logo {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.company-card .cc-content {
    flex: 0 0 calc(100% - 62px);
    max-width: calc(100% - 62px);
    padding-left: 16px;
}
.title-fs-24 { 
    font-family: var(--ff_roboto);
    font-weight: 500;
    font-size: 24px;
    margin: 0 0 5px;
}
.icon-in-left {
    display: flex;
    gap: 5px;
}
.icon-in-left .iil-icon {
    flex: 0 0 24px;
    max-width: 24px;
}
.company-card .cc-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.company-card .cc-logo  .status-online {
    position: absolute;
    top: 2px;
    right: 3px;
    width: 14px;
    height: 14px;
    background-color: #34C759;
    border-radius: 50%;
    border: 2px solid #ffffff;
}


/* ----------------------------------------------------------
                    Company Card CSS End
---------------------------------------------------------- */


/* -----------------------------------------------------------
                    btns
-------------------------------------------------------------- */


.light-btn {
    font-weight: 700;
    border: 2px solid var(--Primary-Color);
    border-radius: 8px;
    overflow: hidden;
    color: var(--Primary-Color);
    padding: 10px;
    position: relative;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
    background: #ffffff;
    text-decoration: none;
}

.light-btn:hover svg path {
    fill: #ffffff;
}

.light-btn::before {
    content: '';
    background: var(--Primary-Color);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--Primary-Color);
    transform: translate3d(0, -100%, 0);
}

.light-btn span {
    position: relative;
}

.light-btn:hover span {
    color: #ffffff;
}

.light-btn:hover::before {
    transform: translate3d(0, 0%, 0);
}






.red-btn {
    font-weight: 700;
    border: 2px solid #B8030A;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
    padding: 10px;
    position: relative;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
    background: #ffffff;
    text-decoration: none;
}

.red-btn:hover svg path {
    fill: #B8030A;
}

.red-btn::before {
    content: '';
    background: #B8030A;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #B8030A;
}

.red-btn span {
    position: relative;
}

.red-btn:hover span {
    color: #B8030A;
}

.red-btn:hover::before {
    transform: translate3d(0, -100%, 0);
}


/* ------------------------------------------------------------ 
                    Number Info card
--------------------------------------------------------------- */

.numberinfocard {
    border-radius: 10px;
    padding: 16px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--Grays-300, #E4E8E9);
    min-width: 250px;
    height: 100%;
}
.numberinfocard:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 232px;
    height: 232px;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}
.numberinfocard.card-theme-1:before {
    background: linear-gradient(0deg, #F1F2FC 0%, #9593E6 100%);
}
.numberinfocard.card-theme-2:before {
    background: linear-gradient(0deg, #D6F1F7 0%, #B2E3EF 100%);
}
.numberinfocard.card-theme-3:before {
    background: linear-gradient(0deg, #F9EEF8 0%, #F2DCEF 100%);
}
.numberinfocard.card-theme-4:before {
    background: linear-gradient(0deg, #E1F7E8 0%, #C4EED2 100%);
}
.numberinfocard.card-theme-5:before {
    background: linear-gradient(0deg, #FCF1D8 0%, #F8E0B0 100%);
}

.numberinfocard .nic-icon {
    flex-shrink: 0;
}

.numberinfocard .nic-content {
    text-align: right;
}

.numberinfocard .nic-content h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.numberinfocard .nic-content p {
    margin: 0;
    color: #6c757d;
}
.numberinfocard p {
    font-size: 14px;
}
.numberinfocard h5 {
    font-family: var(--ff_roboto);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: right;

}

/* ------------------------------------------------------------ 
                    Number Info card End
--------------------------------------------------------------- */




/* -----------------------------------------------------------
                    User allocation
-------------------------------------------------------------- */
.user-allocation-wrapper {
    display: flex;
    gap: 0px;
}

.ua-icon {
    width: 36px;
    height: 36px;
    background-color: #6a5acd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    border-radius: 8px;
    flex: 0 0 36px;
    align-self: center;
}

.legend-header {
    display: flex;
    align-items: center;
    gap: 10px;
    
}

.legend-header span {
    display: flex;
    gap: 5px;
    font-family: var(--ff_roboto);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.legend-header span .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.dot.bg-super-admin {
    background-color: green;
}

.dot.bg-company-admin {
    background-color: orange;
}

.dot.bg-user {
    background-color: orange;
}

.dot.bg-unassigned {
    background-color: #929BA0;
}

.progress_bar-wrapper {
    width: 100%;
    background-color: #929BA0;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0;
}

.progress_bar {
    display: flex;
    height: 100%;
    gap: 0px;
}
.progress_bar  .color-Info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ffffff;
}

.progress_bar .progress-super-admin {
    width: 7%;
    background: #ffffff;
    padding: 0 2px 0 0;
}
.progress_bar .progress-super-admin span {
    background-color: #34C759;
}

.progress_bar .progress-company-admin {
    width: 12%;
    background: #ffffff;
    padding: 0 2px 0 0;
}
.progress_bar .progress-company-admin span {
    background-color: #FFCC00;
    
}

.progress_bar .progress-1 {
    width: 70%;
    background: #ffffff;
    padding: 0 2px 0 0;
}

.progress_bar .progress-1 span {
    background-color: #FFCC00;
}
.progress_bar .progress-2 {
    width: 30%;
    background: #EFF1F2;
    padding: 0 5px 0 0;
}

.progress_bar .progress-2 span {
    background-color: #EFF1F2;
    
}

.progress_bar .progress-user {
    width: 55%;
    background: #ffffff;
    padding: 0 2px 0 0;
}
.progress_bar .progress-user span {
    background-color: #FF9500;
    
}

.progress_bar .progress-unassigned {
    width: 0%;
    background: #ffffff;
    padding: 0 0px 0 0;
}
.progress_bar .progress-unassigned span {
    background-color: #929BA0;
    
}

.user-allocation-footer {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-top: 10px;
}

.user-allocation-footer span {
}
.user-allocation-wrapper .progress-wrap {
    flex: 0 0 calc(100% - 36px);
    max-width: calc(100% - 36px);
    padding-left: 15px;
}

.user-allocation-row {
    margin-top: 0;
    margin-bottom: 0;
}

.progres-bar-wrapper {
    border: 1px solid #E4E8E9;
    padding: 24px;
    border-radius: 12px;
    margin: 30px 0;
}

.divider-1 {
    border-color:#E4E8E9;
    opacity: 1;
    margin-top: 30px;
    margin-bottom: 30px;
}
.progres-bar-wrapper .col-md-6:first-child {
    border-right: 1px solid #E4E8E9;
    padding-right: 24px;
    
}
.progres-bar-wrapper .col-md-6:last-child {
    padding-left: 24px;
}

/* -----------------------------------------------------------
                    User allocation end
-------------------------------------------------------------- */


.badge-1 {
    background-color: #D6F1F7;
    color: #227798;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
}
.badge-2 {
    background-color: #F2DCEF;
    color: #A55495;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
}
.badge-3 {
    background-color: #FDE9E1;
    color: #FF5E5B;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
}
.badge-4 {
    background-color: #FCF1D8;
    color: #DB751B;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 14px;
    display: inline-block;
}
.user-allocation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.user-allocation-header h4 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 5px;
}
.progres-bar-wrapper .col-xl-6:first-child {
    border-right: 1px solid #E4E8E9;
    padding-right: 25px;
}

.progres-bar-wrapper .col-xl-6:last-child {
    padding-left: 25px;
}


/* -----------------------------------------------------------
                    Table-sort-icons
-------------------------------------------------------------- */
.table-sort-icons a {
    color: #2E2E2E;
    line-height: 1;
}
.table-sort-icons a:hover {
    color: #703864;
}

/* -----------------------------------------------------------
                    Modal Design - 1                    
-------------------------------------------------------------- */


.modal-design-1 .modal-title {
    font-size: 32px;
    color: #56469C;
    font-family: var(--ff_roboto);
}
.modal-design-1 .modal-dialog .modal-content {
    border-radius: 18px;
}
.modal-design-1  .btn-close {
    background-color: #ffffff;
    color: #ffffff;
    position: absolute;
    top: -10px;
    right: -10px;
    border: 1px solid #D5DADD;
    opacity: 1;
    border-radius: 50%;
    background-size: 12px 12px;
    height: auto;
    width: auto;
    background-image: none;
    padding: 5px;
}
.modal-design-1 .btn-close:hover, 
.modal-design-1 .btn-close:focus {
    box-shadow: none;
    background: #b12828;
    border-color: #b12828;
}

.modal-design-1 .btn-close svg path {
    fill: #56469C;
}

.modal-design-1 .btn-close:focus svg path,
.modal-design-1 .btn-close:hover svg path {
    fill: #ffffff;
}

.step-wrapper:not(.show) {
    display: none;
}

.icon-radio {
    position: relative;
    width: 100%;
}
.icon-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
}
.icon-radio .step-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #F7F8F9;
    cursor: pointer;
}
.icon-radio .step-option svg {
    flex: 0 0 24px;
    max-width: 24px;
}
.icon-radio .step-option p {
    flex: 0 0 calc(100% - 24px);
    max-width: calc(100% - 24px);
}
.icon-radio input[type="radio"]:checked + .step-option {
    background: #56469c;
}
.icon-radio input[type="radio"]:checked + .step-option p {
    color: #ffffff;
}
.icon-radio input[type="radio"]:checked + .step-option path {
    fill: #ffffff;
}
.step-wrapper .step-footer {
    margin-top: 25px;
}
.step-wrapper .step-footer a {
    min-width: 120px;
    text-align: center;
    justify-content: center;
    margin: 0;
}
.step-wrapper .step-inner-box {
    background-color: #F1F2FC;
    border-radius: 16px;
    padding: 12px;
}
.form-design-1 .form-group label {
    font-family: var(--ff_roboto);
    font-weight: 500;
    font-size: 14px;
    color: #2E2E2E;
    display: block;
}

.upload-box {
    position: relative;
    padding: 0px 0;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    /* max-width: 350px; */
    flex-wrap: wrap;
}
.upload-box input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.form-design-1 .form-group .upload-box .dark-btn  {
    padding: 6px 12px;
    color: #ffffff;
    z-index: 0;
}
.form-design-1 .form-group .upload-box .dark-btn:hover  {
    color: var(--Primary-Color);
}
.upload-box .dark-btn span {
    font-size: 16px;
}
.upload-box.selected .nofile-selected {
    display: none;
}
.upload-box .profilePreview {
    width: 63px;
    height: 63px;
    object-fit: cover;
    border-radius: 50%;
}

.form-design-1 .form-control {
    border-radius: 8px;
    background-color: #FFFFFF;
    height: auto;
    padding: 14px 15px;
    line-height: 18px;
    border: 1px solid var(--Grays-300, #E4E8E9)
}
.form-design-1 .form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: #56469C;   
}
.upload-box .delete-selected-btn {
    position: relative;
    z-index: 999;
    color: #B8030A;
    text-decoration: none;
    border: 1px solid #B8030A;
    padding: 6px 20px;
    border-radius: 8px;
}
.upload-box .delete-selected-btn:focus, .upload-box .delete-selected-btn:hover {
    background: #B8030A;
    border-color: #B8030A;
    color: #ffffff;
}
.upload-box:not(.selected) .delete-selected-btn  {
    display: none;   
}
.form-design-1 .form-control[disabled] {
    background-color: #E4E8E9;
}
.contactNumber-box {
    position: relative;
    z-index: 1;
}
.contactNumber-box .country-flag {
    position: absolute;
    top: 0;
    left: 0px;
    width: 65px;
    height: 100%;
    padding: 0;
}
.contactNumber-box .form-control {
    padding-left: 80px;
}
.contactNumber-box .country-flag img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.dropdown-country-flag {

}
.contactNumber-box .country-flag>span:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #e4e8e9;
    width: 1px;
    height: 50%;
}


.contactNumber-box .country-flag .dropdown-menu {
    border-color: #d9d9d9;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 8px;
}
.contactNumber-box .country-flag>span {
    padding: 12px;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    position: relative;
}
.step-wrapper .modal-header {padding: 0px 0px 5px;margin: 0 0 20px;}

.modal-design-1 .modal-body {
    padding: 16px;
}

.title-fs-20 {
    font-family: var(--ff_roboto);
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: left;
    color: #2E2E2E;
}
.btns-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.tab-btn {
    display: inline-block;
    border: 1px solid #E4E8E9;
    padding: 7px 14px;
    border-radius: 8px;
    color: #2E2E2E;
    text-decoration: none;
    font-weight: 500;
    font-family: var(--ff_roboto);
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 16px;
}
.tab-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 100%;
    background: #F1F2FC;
    z-index: -1;
    transition: width 0.3s ease-in-out;
    
    transform-origin: left;
}
.tab-btn:hover::before {
    width: 100%;
}
.tab-btn:hover {
    color: #56469C;
}
.tab-btn.active {
    background: #F1F2FC;
    border: 1px solid #9593E6;
    color: #56469C;
}
.tab-btn svg path{
    fill: #2E2E2E;
}
.tab-btn.active svg path{
    fill: #56469C;
}
.btns-group .dark-btn, .btns-group .tab-btn {
    font-size: 16px;
    line-height: 1;
}

.title-wrapper .left-title-wrap {
    flex: 0 0 35%;
    max-width: 35%;
}
.title-wrapper .right-action-wrap {
    flex: 0 0 65%;
    max-width: 65%;
    display: inline-flex;
    justify-content: end;
    gap: 16px;
}
.title-wrapper .right-action-wrap .form-select:focus {
    outline: none;
    box-shadow: none;
}
.search-box {
    position: relative;
}
.search-box input.form-control {
    padding: 12px 40px 12px 20px;
    min-width: 320px;
    width: 100%;
}
.search-box .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
.title-wrapper .right-action-wrap .form-select {
    border-radius: 8px;
    padding: 10px 35px 10px 15px;
    line-height: 26px;
}
.title-wrapper .right-action-wrap .form-control {
    box-shadow: none;
    outline: none;
}

.rank-box {
    display: inline-flex;
    align-items: center;
    color: #333333;
    background-color: #00000024;
    padding: 6px 10px;
    line-height: 1;
    border-radius: 4px;
    gap: 5px;
}
.rank-box.shade-green {
    background: #C4EED2;
    color: #25703F;
}
.rank-box.shade-red {
    background: #EEC4C4;
    color: #B8030A;
}
.rank-box.shade-gray {
    background: #D5DADD;
    color: #525356;
}


.bordered-card-1 {
    border: 1px solid #E4E8E9;
    padding: 12px;
    border-radius: 13px;
    margin-top: 40px;
}
.bordered-list-1 {
    border: 1px solid #E4E8E9;
    padding: 24px;
    border-radius: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bordered-list-1 li {
    display: flex;
}
.bordered-list-1 .list-title  {
    flex: 0 0 50%;
    max-width: 50%;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    padding: 12px 16px;
    border: 1px solid #E4E8E9;
    border-style: none solid none none;
}
.bordered-list-1  li .list-value {
    flex: 0 0 50%;
    max-width: 50%;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 16px;
    color: #2E2E2E;
}
.bordered-list-1 li:not(:last-child) {
    border-bottom: 1px solid #E4E8E9;
}


.popover-custom {
    background: #2E2E2E;
}
.popover-custom .popover-body  {
    padding: 10px;
}

.popover-custom .list-group , .popover-custom .list-group-item {
    background: #2E2E2E !important;
    border-style: none;
    padding: 0;
}

.popover-custom .list-group-item span {
    color: #ffffff;
    font-weight: 400;
    font-size: 14px;
    font-family: var(--ff_roboto);
}
.popover-custom.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, 
.popover-custom.bs-popover-top>.popover-arrow::before {
    border-top-color: #2E2E2E;
}

.popover-custom.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, 
.popover-custom.bs-popover-top>.popover-arrow::after {
border-top-color: #2E2E2E;
}
.popover-custom.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, 
.popover-custom.bs-popover-right>.popover-arrow::before {
    border-right-color: #2E2E2E;
}

.popover-custom.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, 
.popover-custom.bs-popover-right>.popover-arrow::after {
border-right-color: #2E2E2E;
}
.popover-custom.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, 
.popover-custom.bs-popover-left>.popover-arrow::before {
    border-left-color: #2E2E2E;
}

.popover-custom.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, 
.popover-custom.bs-popover-left>.popover-arrow::after {
border-left-color: #2E2E2E;
}
.popover-custom.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, 
.popover-custom.bs-popover-bottom>.popover-arrow::before {
    border-bottom-color: #2E2E2E;
}

.popover-custom.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, 
.popover-custom.bs-popover-bottom>.popover-arrow::after {
border-bottom-color: #2E2E2E;
}

.popover-custom .list-group-item {
    padding: 5px 0;
}
.icon-action-btn {
    text-decoration: none;
    padding: 0px;
    display: inline-block;
}
.action-btns-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}
.text-gray {
    color: #666666;
}


/* Delet Modal  */
.delet-modal .modal-footer {
    padding: 15px 0 0;
    border-style: none;
    justify-content: space-between;
}

.delet-modal .modal-footer a {
    flex: 0 0 calc(50% - 15px);
    text-align: center;
    max-width: calc(50% - 15px);
}

.modal .modal-dialog.modal-small {
    max-width: 392px;
}

.label-1 {
    font-weight: 500;
}

.settings-wrapper .profilePreview {
    width: 120px;
    height: 120px;
}
.title-fs-12 {
    font-size: 12px !important;
    font-family: var(--ff_roboto);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    color: #929BA0;
}

.notification-item {
    display: flex;
    margin-bottom: 24px;
}
.notification-item svg {
    flex: 0 0 32px;
    max-width: 32px;
}
.notification-item p {
    flex: 0 0 calc(100% - 200px);
    max-width: calc(100% - 200px);
    padding-left: 15px;
    align-self: center;
    margin: 0;
}
.notification-item .notification-info {
    display: flex;
    justify-content: end;
    flex: 0 0 168px;
    max-width: 168px;
    align-items: center;
}
.notification-item .notification-info .notification-dot-wrap {
    flex: 0 0 34px;
    width: 34px;
    text-align: center;
}
.notification-dot {
    border-radius: 50%;
    background-color: #8278DC;
    align-self: auto;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0px 4px #E5E7FA;
    margin: 0 auto;
    display: inline-block;
}

.setting-table {
}
.setting-table thead, .setting-table thead th {
    background: #8278DC;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    vertical-align: top;
}
.setting-table thead th p {
    margin: 0px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--ff_roboto);
}

.form-design-1 .form-check-input[type=radio] {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C8.07164 0 6.18657 0.571828 4.58319 1.64317C2.97982 2.71451 1.73013 4.23726 0.992179 6.01884C0.254225 7.80042 0.061142 9.76082 0.437348 11.6521C0.813554 13.5434 1.74215 15.2807 3.10571 16.6443C4.46928 18.0079 6.20656 18.9365 8.09787 19.3127C9.98919 19.6889 11.9496 19.4958 13.7312 18.7578C15.5127 18.0199 17.0355 16.7702 18.1068 15.1668C19.1782 13.5634 19.75 11.6784 19.75 9.75C19.7473 7.16498 18.7192 4.68661 16.8913 2.85872C15.0634 1.03084 12.585 0.00272983 10 0ZM10 18C8.36831 18 6.77326 17.5161 5.41655 16.6096C4.05984 15.7031 3.00242 14.4146 2.378 12.9071C1.75358 11.3996 1.5902 9.74085 1.90853 8.1405C2.22685 6.54016 3.01259 5.07015 4.16637 3.91637C5.32016 2.76259 6.79017 1.97685 8.39051 1.65852C9.99085 1.34019 11.6497 1.50357 13.1571 2.12799C14.6646 2.75242 15.9531 3.80984 16.8596 5.16655C17.7661 6.52325 18.25 8.1183 18.25 9.75C18.2475 11.9373 17.3775 14.0343 15.8309 15.5809C14.2843 17.1275 12.1873 17.9975 10 18Z" fill="%23929BA0"/></svg>');
    width: 19px;
    height: 19px;
    vertical-align: middle;
    line-height: 1;
    outline: none !important;
    background-size: contain;
    box-shadow: none !important;
    filter: none !important;
    border-style: none !important;
}

.form-design-1 .form-check-input:checked[type=radio] {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C8.07164 0 6.18657 0.571828 4.58319 1.64317C2.97982 2.71451 1.73013 4.23726 0.992179 6.01884C0.254225 7.80042 0.061142 9.76082 0.437348 11.6521C0.813554 13.5434 1.74215 15.2807 3.10571 16.6443C4.46928 18.0079 6.20656 18.9365 8.09787 19.3127C9.98919 19.6889 11.9496 19.4958 13.7312 18.7578C15.5127 18.0199 17.0355 16.7702 18.1068 15.1668C19.1782 13.5634 19.75 11.6784 19.75 9.75C19.7473 7.16498 18.7192 4.68661 16.8913 2.85872C15.0634 1.03084 12.585 0.00272983 10 0ZM10 18C8.36831 18 6.77326 17.5161 5.41655 16.6096C4.05984 15.7031 3.00242 14.4146 2.378 12.9071C1.75358 11.3996 1.5902 9.74085 1.90853 8.1405C2.22685 6.54016 3.01259 5.07015 4.16637 3.91637C5.32016 2.76259 6.79017 1.97685 8.39051 1.65852C9.99085 1.34019 11.6497 1.50357 13.1571 2.12799C14.6646 2.75242 15.9531 3.80984 16.8596 5.16655C17.7661 6.52325 18.25 8.1183 18.25 9.75C18.2475 11.9373 17.3775 14.0343 15.8309 15.5809C14.2843 17.1275 12.1873 17.9975 10 18ZM15.25 9.75C15.25 10.7884 14.9421 11.8034 14.3652 12.6667C13.7883 13.5301 12.9684 14.203 12.0091 14.6004C11.0498 14.9977 9.99418 15.1017 8.97578 14.8991C7.95738 14.6966 7.02192 14.1965 6.28769 13.4623C5.55347 12.7281 5.05345 11.7926 4.85088 10.7742C4.64831 9.75582 4.75228 8.70022 5.14964 7.74091C5.547 6.7816 6.2199 5.96166 7.08326 5.38478C7.94662 4.80791 8.96165 4.5 10 4.5C11.3919 4.50149 12.7264 5.05509 13.7107 6.03933C14.6949 7.02358 15.2485 8.35807 15.25 9.75Z" fill="%2356469C"/></svg>');
    background-color: transparent;
    border-color: transparent;
}
.form-design-1 .form-check-label,
.form-design-1 .form-check-input {
    cursor: pointer;
}


.form-check-input[type=checkbox] {
    background-image: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 18.75C1.45 18.75 0.979167 18.5542 0.5875 18.1625C0.195833 17.7708 0 17.3 0 16.75V2.75C0 2.2 0.195833 1.72917 0.5875 1.3375C0.979167 0.945833 1.45 0.75 2 0.75H16C16.55 0.75 17.0208 0.945833 17.4125 1.3375C17.8042 1.72917 18 2.2 18 2.75V16.75C18 17.3 17.8042 17.7708 17.4125 18.1625C17.0208 18.5542 16.55 18.75 16 18.75H2ZM2 16.75H16V2.75H2V16.75Z" fill="%23929BA0"/></svg>');
    outline: none;
    border-style: none;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-color: transparent;
}

.form-check-input[type=checkbox]:checked {
    background-image: url('data:image/svg+xml,<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.6 13.95L14.65 6.9L13.25 5.5L7.6 11.15L4.75 8.3L3.35 9.7L7.6 13.95ZM2 18.75C1.45 18.75 0.979167 18.5542 0.5875 18.1625C0.195833 17.7708 0 17.3 0 16.75V2.75C0 2.2 0.195833 1.72917 0.5875 1.3375C0.979167 0.945833 1.45 0.75 2 0.75H16C16.55 0.75 17.0208 0.945833 17.4125 1.3375C17.8042 1.72917 18 2.2 18 2.75V16.75C18 17.3 17.8042 17.7708 17.4125 18.1625C17.0208 18.5542 16.55 18.75 16 18.75H2Z" fill="%2356469C"/></svg>');
}


.user-allocation-wrapper.text-info-box {

}
.field-info {
    color: #929BA0;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--ff_roboto);
    margin: 5px 0 0;
}

.legend-header b {
    color: #333333;
}

.user-allocation-footer b, .user-allocation-header b {
    color: #2E2E2E;
}

.offcanvas-design-1 {
    min-width: 39%;
}
.offcanvas-design-1 .offcanvas-body {
    padding: 25px 32px;
}
.offcanvas-design-1 .offcanvas-header {
    border-bottom: 1px solid #D5DADD;
}
.offcanvas-design-1 .offcanvas-header {
    border-bottom: 1px solid #D5DADD;
    padding: 16px 32px;
}

.offcanvas-design-1 .offcanvas-header .btn-close {
    background-color: #E5E7FA;
    box-shadow: none;
}
.offcanvas-design-1 .offcanvas-header .offcanvas-title {
    font-size: 16px;
    font-weight: 400;
    color: #929BA0;
}
.table-table-1.table tr:first-child th:first-child {
    border-radius: 0px;
}
.table-table-1.table tr th {
    background: #F1F2FC;
}
.anchor-1 {
    font-weight: 700;
    color: var(--Primary-Color);
    font-family: var(--ff_roboto);
    text-underline-offset: 8px;
}



.company-small-card {
    border-radius: 16px;
    padding: 16px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    border: 1px solid #D5DADD;
  }
  
  .company-small-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
    padding-right: 100px;
  }
  
  .company-small-card-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .company-small-card-actions {
    display: flex;
    gap: 4px;
    position: absolute;
    top: 16px;
    right: 16px;
  }
  
  .action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    border: 1px solid #D5DADD;
    line-height: 1;
  }
  
  .action-btn:hover {
    background-color: #f0f0f0;
  }

  .company-small-card-body {
    text-align: left;
  }
  
  .company-small-card-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 0px;
    font-family: var(--ff_roboto);
  }
  
  .company-small-card-url {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
  }
  
  .company-small-card-url:hover {
    text-decoration: underline;
  }
  
  .company-small-card-details {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #555;
  }
  
  .company-small-card-details li {
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    color: #2E2E2E;
  }

  .company-small-card .company-small-card-info {
    
  }
.scenario-table-info {
    display: flex;
    min-width: 135px;
}

.scenario-table-info .sti-icon {
    width: 32px;
    flex: 0 0 32px;
}

.scenario-table-info .sti-content {
    width: calc(100% - 65px);
    flex: 0 0 calc(100% - 65px);
    align-self: center;
    padding-left: 10px;
}

.scenario-table-info .sti-content h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 500;
    color: #2E2E2E;
    font-family: var(--ff_roboto);
}

.scenario-table-info .sti-content p {
    margin: 0;
    font-size: 14px;
    color: #929BA0;
}

.text-profile-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.text-profile-wrapper .text-profile {
    margin-right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    color: #ffffff;
    border: 1px solid #FFFFFF;
    background-color: #6B7280;
    font-size: 12px;
}
.text-profile-wrapper .text-profile.bg-1 {
    background: #3B82F6;
}
.text-profile-wrapper .text-profile.bg-2 {
    background: #8B5CF6;
}
.text-profile-wrapper .text-profile.bg-3 {
    background: #D946EF;
}
.text-profile-wrapper .text-profile.bg-4 {
    background: #00BFA6;
}
.text-profile-wrapper .text-profile.bg-5 {
    background: #FF3F6C;
}
table.table.vertical-td-centered td {
    vertical-align: middle;
}


.scenario-info {
    display: flex;
    min-width: 135px;
    position: relative;
}

.scenario-info .si-img {
    width: 80px;
    flex: 0 0 80px;
    height: 80px;
    align-self: start;
    background: #E5E7FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 5px;
}

.scenario-info .si-content {
    width: calc(100% - 80px);
    flex: 0 0 calc(100% - 80px);
    align-self: center;
    padding-left: 10px;
}

.scenario-info .si-content h4 {
    margin: 0 0 2px;
    font-size: 32px;
    font-weight: 700;
    color: #2E2E2E;
    font-family: var(--ff_roboto);
}

.scenario-info .si-content p {
    margin: 0;
    font-size: 14px;
    color: #929BA0;
}

.category-badge {
    background-color: #F9EEF8;
    color: #703864;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 16px;
    display: inline-block;
    margin: 0 0 5px;
}

.Safety-time-box {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    color: #929BA0;
    font-weight: 700;
    font-family: var(--ff_roboto);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.statusInfo_active {
    background-color: #E1F7E8;
    color: #2B8E4E;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
}
.statusInfo_pending {
    background-color: #FCF1D8;
    color: #DB751B;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
}
.link_accept-request {
    color: #56469C;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.color-dark-1 {
    color: #000000;
}

.guest-full-info-box {
    border: 1px solid #E4E8E9;
    padding: 16px;
    border-radius: 12px;
}
.guest-full-info-box {
    
}

.number-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.number-list li {
    position: relative;
    z-index: 1;
    padding-left: 25px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--ff_roboto);
}
.number-list li .numberbox {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 7px;
    padding-bottom: 0px;
}
.number-list li .numberbox:before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #E5E7FA;
    display: inline-block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}
.skils-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.skils-tag {
    color: #56469C;
    background: #F1F2FC;
    padding: 5px 10px;
    border-radius: 2px;
}



.search-box2 {
    position: relative;
}
.search-box2 input.form-control {
    min-width: 320px;
    width: 100%;
}
.search-box2 input.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--Primary-Color);
}
.form-design-1 .form-control.form-select {
    padding-right: 35px;
}


.model-form-wrapper .modal-header {
    padding: 0px 0px 5px;
    margin: 0 0 20px;
}
.modal-wrapper-2 {
    background-color: #F1F2FC;
    padding: 20px;
    border-radius: 8px;
}

.company-list-select-modal .list-group-item:hover {
    background: #F1F2FC;
}

.modal-wrapper-2 .search-box2 input.form-control {
    padding-top: 12px;
    padding-bottom: 12px;
}