@import url('bootstrap.min.css');

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue.eot');
    src: url('../fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue.woff2') format('woff2'), url('../fonts/HelveticaNeue.woff') format('woff'), url('../fonts/HelveticaNeue.ttf') format('truetype'), url('../fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Medium.eot');
    src: url('../fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'), url('../fonts/HelveticaNeue-Medium.woff') format('woff'), url('../fonts/HelveticaNeue-Medium.ttf') format('truetype'), url('../fonts/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeue-Bold.eot');
    src: url('../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'), url('../fonts/HelveticaNeue-Bold.woff') format('woff'), url('../fonts/HelveticaNeue-Bold.ttf') format('truetype'), url('../fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Helvetica Neue';
    background-color: #F3F4F8;
    margin: 0;
}

a.active,
a:focus,
button:focus,
button.active {
    outline: none;
}

a {
    text-decoration: none;
}

a:focus,
a:hover,
a:active {
    outline: 0;
}

a:focus,
a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

a:hover {
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

img {
    border-style: none;
    display: inline-block;
    max-width: 100%;
    height: auto;
}


/****** SUPER ADMIN *******/

.login-header {
    background-color: #fff;
    padding: 15.5px 0px;
}

.login-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    color: #28313C;
    font-weight: normal;
    font-size: 21px;
}

.login-inner {
    padding: 48px 0;
}


/***** LOGIN BOX *****/

.login-box {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px rgba(232, 238, 243, 1);
    padding: 32px;
    max-width: 452px;
    width: 100%;
    margin: 0 auto;
}

.login-box h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 21px;
    line-height: normal;
    text-align: center;
    margin-bottom: 26px;
}

.label-text {
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    display: flex;
    margin-bottom: 16px;
    align-items: center;
    gap: 6px;
}

.label-text span {
    color: #ED4040;
    display: inline-flex;
    align-items: center;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-control {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 48px;
    width: 100%;
    color: black;
    font-size: 15px;
    line-height: 1;
    font-weight: normal;
    box-shadow: none;
}

.login-form .form-control::placeholder {
    color: #99A5B5;
}

.relative {
    position: relative;
}

.eyes-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-left: 1px solid #E7ECF0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

.forgot-link {
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.form-check {
    display: flex;
    align-items: center;
    min-height: auto;
    padding-left: 0;
    margin-bottom: 0;
    gap: 8px;
    cursor: pointer;
}

.form-check .form-check-input {
    float: none;
    margin: 0;
    border: 1px solid #99A5B5;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-check-label {
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    display: flex;
    line-height: normal;
    cursor: pointer;
    align-items: center;
    gap: 10px;
}

.form-check-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: none;
}

.form-check-input:checked {
    background-color: #1D82F5;
    border-color: #0d6efd;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    gap: 6px;
    background-color: #1D82F5;
    height: 48px;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
}


/***** LOGIN FOOTER *****/

.login-footer {
    max-width: 452px;
    width: 100%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login-footer p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 13px;
    line-height: normal;
}

.login-footer ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.login-footer ul li a {
    color: #616E80;
    font-size: 13px;
    line-height: normal;
    font-weight: normal;
    display: flex;
    align-items: center;
}

.login-footer ul li a:hover {
    color: #1D82F5;
}

.success-alert {
    text-align: center;
    background-color: #D4EDDA;
    border: 1px solid #C3E6CB;
    padding: 12px 20px;
    margin-bottom: 24px;
}

.success-alert p {
    color: #155724;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}


/***** SIDEBAR *******/

.sidebar {
    background-color: #171F29;
    max-width: 240px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    left: 0;
    height: 100vh;
    overflow-y: scroll;
}


/* Hide scrollbar for Chrome, Safari and Opera */

.sidebar::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */

.sidebar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar-top {
    padding: 12px 20px;
}

.user-link {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 13px;
}

.sidebar-top p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 13px;
    line-height: normal;
    display: flex;
    gap: 8px;
    margin-top: 6px;
    align-items: center;
}

.sidebar-top p span {
    background-color: #28A745;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.navigation ul li a {
    display: flex;
    align-items: center;
    color: #99A5B5;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    gap: 17px;
    padding: 17px 20px;
    border-top: 1px solid #28313C;
    position: relative;
}

.navigation ul li a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
}

.navigation ul li a:hover,
.navigation ul li a.active {
    color: #fff;
}

.navigation ul li a:hover svg path,
.navigation ul li a.active svg path {
    fill: #fff;
}

.navigation ul li a:hover .drop-arrow img,
.navigation ul li a.active .drop-arrow img {
    filter: brightness(1000%);
    transition: all 0.5s ease-in-out;
}

.navigation ul li a[aria-expanded="true"] .drop-arrow img,
.navigation ul li a.active .drop-arrow img {
    transform: rotate(0deg);
}

.navigation .dropdown-menu {
    position: static !important;
    transform: translate(0, 0) !important;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding: 0px 0 16px 52px;
}

.navigation .dropdown-menu ol li {
    margin-bottom: 16px;
}

.navigation .dropdown-menu ol li:last-child {
    margin: 0;
}

.navigation .dropdown-menu ol li a {
    border: none;
    padding: 0;
    color: #99A5B5;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

.navigation .dropdown-menu ol li a:hover,
.navigation .dropdown-menu ol li a.active {
    color: #fff;
}

.drop-arrow {
    margin-left: auto;
}

.drop-arrow img {
    transform: rotate(-90deg);
    transition: all 0.5s ease-in-out;
}


/***** DASHBOARD CONTENT ******/

.dashboard-content {
    padding: 0 0 0 240px;
}


/***** HEADER ******/

header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E7ECF0;
    padding: 20px 24px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
}

.menu-btn.active .menu-icon {
    display: none;
}

.menu-btn.active .close-icon {
    display: block;
}

.menu-btn .menu-icon {
    height: 18px;
}

.close-icon {
    height: 24px;
    display: none;
}

.header-left h1 {
    color: #28313C;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.breadcrumb li a,
.breadcrumb li {
    color: #99A5B5;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
}

.breadcrumb li span {
    background-color: #99A5B5;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: block;
}

.header-right ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification {
    width: 24px;
    height: 24px;
    position: relative;
}

.notification span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    background-color: #ED4040;
    border-radius: 4px;
    width: 22px;
    height: 16px;
    position: absolute;
    right: -15px;
    top: -5px;
}

.power-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}


/***** SUPER ADMIN DASHBOARD ******/

.super-admin-dashboard {
    padding: 24px;
}

.dashboard-statistics {
    margin-top: -14px;
}

.dashboard-statistics .row {
    margin: 0 -16px;
}

.dashboard-statistics [class*="col-"] {
    padding: 0 16px;
}

.stat-card {
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(232, 238, 243, 1);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0;
}

.stat-card .text-box h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 24px;
}

.stat-card .text-box p {
    display: flex;
    color: #ED4040;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    align-items: center;
}

.stat-card span {
    display: flex;
    align-items: center;
}

.stat-card span img {
    height: 20px;
}

.dashboard-malls {
    margin-top: 30px;
}


/*****/

.malls-card {
    background-color: #fff;
    border-radius: 4px;
}

.malls-card-head {
    padding: 20px;
}

.malls-card-head h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 18px;
}

table {
    width: 100%;
}

table thead tr th {
    color: #99A5B5;
    font-weight: normal !important;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 1px solid #E7ECF0;
    padding: 8px;
}

table thead tr th span {
    display: flex;
    align-items: center;
    gap: 0px;
    width: 20px !important;
}

table tbody tr td {
    color: #28313C;
    font-weight: normal;
    font-size: 13px;
    line-height: normal;
    padding: 8px;
}

table tbody tr td .media {
    display: flex;
    align-items: center;
    gap: 8px;
}

table tbody tr td .media span {
    border: 1px solid #F3F4F8;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

table tbody tr td .media h5 {
    color: #28313C;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
}

.date-recod {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 28px 20px;
}

.date-recod span {
    display: flex;
    align-items: center;
}

.date-recod span img {
    height: 16px;
}

.date-recod p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 15px;
    line-height: normal;
    margin-top: 20px;
}


/***** ADMIN NOTIFICATION ******/

.admin-notifications {
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(232, 238, 243, 1);
}

.admin-notifications h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 16px;
    padding: 16px 20px;
    line-height: normal;
}

.admin-notifications-box {
    background-color: #fff;
    border-top: 1px solid #E7ECF0;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-notifications-box .image-holder {
    width: 36px;
    height: 36px;
}

.admin-notifications-box .text-box {
    flex: 1;
    width: 100%;
}

.admin-notifications-box .text-box h5 {
    color: #28313C;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
}

.admin-notifications-box .text-box p {
    color: #616E80;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    margin: 5px 0 4px 0;
}

.admin-notifications-box .text-box span {
    color: #99A5B5;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    display: block;
}


/******* FILTER BAR ******/

.filter-bar {
    background-color: #FFF;
    border-bottom: 1px solid #E7ECF0;
    padding: 0 12px;
    display: flex;
}

.filter-right {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
}

.filter-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid #E7ECF0;
    padding: 8px 12px;
    height: 100%;
}

.filter-duration span {
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    display: block;
}

.filter-duration .form-control {
    color: #000;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    height: 32px;
    width: 200px;
}

.filter-duration .form-control::placeholder {
    color: #99A5B5;
}

.filter-duration .form-control:hover {
    border-color: #28313C;
}

.filter-duration .form-control:hover::placeholder {
    color: #28313C;
}

.filter-search {
    border-right: 1px solid #E7ECF0;
    padding: 8px 12px;
}

.filter-search .form-control {
    color: #000;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    height: 32px;
    padding: 0 0 0 40px;
    width: 400px;
}

.filter-search .form-control:hover,
.filter-search .relative:hover .form-control {
    border-color: #28313C;
}

.filter-search .form-control:hover::placeholder,
.filter-search .relative:hover .form-control::placeholder {
    color: #28313C;
}

.filter-search .form-control::placeholder {
    color: #99A5B5;
}

.filter-search .relative:hover .search-btn {
    background-color: #F3F4F8;
    border-right: 1px solid #28313C;
}

.search-btn {
    border-right: 1px solid #E7ECF0;
    height: 31px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 4px 0 0 4px;
}

.filter-left {
    border-left: 1px solid #E7ECF0;
    padding: 4px 12px;
}

.filter-btn {
    display: flex;
    align-items: center;
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    gap: 6px;
    line-height: normal;
    height: 40px;
    padding: 0 12px;
    border-radius: 4px;
}

.filter-btn:hover {
    background-color: #F3F4F8;
}

.mall-btn {
    margin-bottom: 24px;
}

.mall-btn ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

.add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    gap: 6px;
    border-radius: 4px;
    background-color: #ED4040;
    height: 40px;
    width: 100px;
}

.add-btn:hover {
    background-color: #171F29;
}

.export-btn {
    border: 1px solid #616E80;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    background-color: #fff;
    line-height: 1;
    width: 86px;
}

.export-btn:hover {
    background-color: #616E80;
    color: #fff;
}

.export-btn:hover img {
    filter: brightness(1000%);
}

.dashboard-malls table thead tr th,
.dashboard-malls table tbody tr td {
    padding: 14.5px 20px;
    border-bottom: 1px solid #E7ECF0;
    box-shadow: none !important;
}

/*****/
table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: none;
    outline-offset: 0;
}

/*****/
.dashboard-malls table tbody tr td p {
    line-height: 20px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    width: 32px;
    height: 32px;
    margin-left: auto;
}

.action-btn:hover {
    background-color: #F3F4F8;
    border-color: #E7ECF0;
}

.action-btn svg path {
    transition: all 0.5s ease-in-out;
}

.action-btn:hover svg path {
    fill: #616E80;
    transition: all 0.5s ease-in-out;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    color: #28313C;
}

.status span {
    background-color: #28A745;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: block;
}

.status strong {
    background-color: #28A745;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: block;
}

.status.red-bg strong {
    background-color: #D21010;
}


/***** SORTING *****/

.mall-sorting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.sorting-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sorting-left p {
    color: #28313C;
    line-height: 1;
    font-weight: normal;
    font-size: 14px;
}

.sorting-left .form-control {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 32px;
    width: 52px;
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    padding: 0 6px;
    width: 52px;
    box-shadow: none;
}

.select-arrow {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 10px;
}

.sorting-right p {
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
}

.sorting-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.pag-link {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 36px;
    color: #616E80;
    font-size: 13px;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 13.5px;
}

.pag-link:hover {
    background-color: #F3F4F8;
}

.pag-link.active {
    border-color: #ED4040;
    background-color: #ED4040;
    color: #fff;
}

.dt-layout-row.dt-layout-table {
    padding: 0;
    border: none;
}

div.dt-container div.dt-layout-row {
    gap: 16px;
    justify-content: flex-end;
}

.dt-layout-row {
    margin: 0 !important;
    padding: 20px;
    border-top: 1px solid #E7ECF0;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: flex-end;
    margin: 0 !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
    margin: 0 !important;
}

div.dt-container .dt-paging .dt-paging-button {
    border: 1px solid #E7ECF0 !important;
    border-radius: 4px;
    height: 36px;
    margin-left: 7px;
    padding: 0 13.5px;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    border-color: #ED4040;
    background-color: #ED4040 !important;
    color: #fff !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: #F3F4F8 !important;
    color: #616E80 !important;
}

.dt-info {
    color: #28313C !important;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
}

.dt-length {
    position: absolute;
    left: 20px;
    bottom: 25px;
}

.dt-layout-row:first-child {
    display: none;
    padding: 0 !important;
    border: none;
}

.dt-search {
    display: none !important;
}

div.dt-container .dt-input {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 32px;
    width: 52px;
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    padding: 0 6px;
    box-shadow: none;
    appearance: none;
    background: url(../images/select-arrow.svg) no-repeat;
    background-size: 8px;
    background-position: 37px center;
}

.dt-length label {
    color: #28313C;
    line-height: 1;
    font-weight: normal;
    font-size: 14px;
    margin-left: 8px;
}

div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: none;
    box-shadow: none !important;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before {
    background: url(../images/sorting-top.svg) no-repeat;
    background-size: 9px;
    background-position: center center;
    content: '';
    width: 10px;
    height: 10px;
    position: static;
}

table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    background: url(../images/sorting-bottom.svg) no-repeat;
    background-size: 9px;
    background-position: center center;
    content: '';
    width: 10px;
    height: 10px;
    position: static;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.4;
}

table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.9;
}

/******** OFFCANVAS ADD MALL *******/

.add-mall-canvas {
    width: 100% !important;
    max-width: 1632px;
    background-color: #F3F4F8;
    border: 1px solid #E7ECF0;
}

.add-mall-canvas .offcanvas-body {
    padding: 28px 24px;
}

.canvas-close {
    background-color: #ED4040;
    width: 56px;
    height: 36px;
    border-radius: 99px 0 0 99px;
    border: none;
    padding: 0 14px;
    position: absolute;
    top: 20px;
    left: -56px;
    display: flex;
    align-items: center;
}

.add-mall h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 21px;
    font-family: 'Helvetica Neue';
    list-style: none;
}

.add-mall-box {
    margin-top: 24px;
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
}

.add-mall-box h5 {
    color: #28313C;
    font-size: 21px;
    font-weight: normal;
    line-height: 24px;
    padding: 20px;
}

.add-mall-top {
    border-top: 1px solid #E7ECF0;
    padding: 20px 20px 0 20px;
}

.add-mall-form form .form-group {
    margin: 0 0 32px 0;
}

.add-mall-form form .form-group .form-control {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    color: #000;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    height: 40px;
    box-shadow: none;
}

.add-mall-form form .form-group .form-control:hover {
    border-color: #28313C;
}

.add-mall-form form .form-group .form-control:hover::placeholder {
    color: #28313C;
}

.add-mall-form form .form-group .form-control::placeholder {
    color: #99A5B5;
}

.add-mall-form form .form-group textarea.form-control {
    height: 80px;
    padding: 10px;
}

input[type="file"] {
    display: none;
}

.choose-file {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #99A5B5;
    font-size: 14px;
    font-weight: normal;
    gap: 8px;
    cursor: pointer;
}

.title-head a {
    padding: 20px;
    color: #28313C;
    font-size: 21px;
    font-weight: normal;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 14px;
}

.add-mall-inner {
    padding: 20px 20px 0 20px;
}

.add-mall-footer {
    padding: 20px;
    border-top: 1px solid #E7ECF0;
}

.add-mall-footer ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

.save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    height: 40px;
    color: #fff;
    gap: 6px;
    font-size: 14px;
    font-weight: normal;
    background-color: #ED4040;
    border: 1px solid #ED4040;
    padding: 0 13px;
}

.save-btn:hover {
    background-color: #171F29;
    border-color: #171F29;
}

.save-btn.save-more {
    border-color: #616E80;
    background-color: #fff;
    color: #616E80;
}

.save-btn.save-more:hover {
    background-color: #616E80;
    color: #fff;
}

.save-btn.save-more:hover img {
    filter: brightness(1000%);
}

.cancel-btn {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #616E80;
    font-weight: normal;
    width: 72px;
    font-size: 14px;
}


/****** MALL LISTING DETAIL *****/

.mall-detail-top {
    background-color: #fff;
    border-bottom: 1px solid #E7ECF0;
}

.mall-detail-top ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    height: 48px;
    line-height: normal;
    padding: 0 25px;
    border-bottom: 4px solid #ED4040;
}

.CardMall {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.CardMall .image-holder {
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CardMall .image-holder img {
    border-radius: 4px;
}

.CardMall .text-box {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.CardMall .text-box .text-inner {
    flex: 1;
    width: 100%;
}

.CardMall .text-box .text-inner h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: normal;
    padding-bottom: 4px;
    line-height: normal;
}

.CardMall .text-box .text-inner span {
    color: #616E80;
    font-weight: normal;
    font-size: 11px;
    line-height: normal;
    display: block;
    margin-top: 4px;
}

.CardMall .text-box .text-inner p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 11px;
    line-height: normal;
    display: block;
    margin-top: 4px;
}

.more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mall-detail-info {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
}

.mall-prefix {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
    padding: 20px;
}

.mall-prefix h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.mall-prefix p {
    color: #99A5B5;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    margin: 8px 0;
}

.mall-prefix .media {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link-bnt {
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    border-radius: 4px;
    background: #ED4040;
    padding: 0 8px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.url-btn {
    border: 1px solid #616E80;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #616E80;
    font-size: 12px;
    line-height: normal;
    padding: 0 8px;
    height: 32px;
}

.url-btn:hover {
    background-color: #616E80;
    color: #fff;
}

.url-btn:hover img {
    filter: brightness(1000%);
}

.mall-detail-info {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-top: 24px;
}

.mall-detail-info h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    padding-bottom: 10px;
}

.mall-detail-info ul li {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.mall-detail-info ul li strong {
    color: #99A5B5;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    display: block;
    max-width: 305px;
    width: 100%;
}

.mall-detail-info ul li p {
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

.mall-detail-info ul li p a {
    color: #1D82F5;
    display: block;
}

.mall-detail-info .status {
    font-size: 14px;
    color: #616E80;
}

.mall-detail-info .status span {
    width: 12px;
    height: 12px;
}

.mall-detail-statistics {
    background-color: #fff;
    border-radius: 4px;
    margin-top: 24px;
    padding-bottom: 16px;
}

.mall-detail-statistics h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    padding: 20px;
}

.mall-detail-statistics ul li {
    color: #28313C;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 1px solid #E7ECF0;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/****** APP SETTING PAGE ******/

.app-setting-sec {
    display: flex;
    align-items: flex-start;
}

.app-setting-sidebar {
    border-right: 1px solid #E7ECF0;
    background-color: #fff;
    max-width: 280px;
    width: 100%;
    height: calc(100vh - 65px);
    position: fixed;
    bottom: 0;
    left: 240px;
}

.setting-sidebar-head {
    padding: 18px 24px;
}

.app-setting-sidebar form {
    position: relative;
}

.app-setting-sidebar form .form-control {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 32px;
    width: 100%;
    padding-left: 28px;
    color: #99A5B5;
    font-size: 14px;
    font-weight: normal;
    box-shadow: none;
}

.app-setting-sidebar form span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translate(0, -50%);
}

.setting-sidebar-body {
    height: calc(100% - 68px);
    overflow-y: auto;
}

.setting-sidebar-body {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.setting-sidebar-body::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.app-setting-sidebar ul {
    border-top: 1px solid #E7ECF0;
}

.app-setting-sidebar ul li a {
    display: flex;
    align-items: center;
    color: #616E80;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    border-bottom: 1px solid #E7ECF0;
    padding: 16px 24px;
    border-right: 2px solid transparent;
}

.app-setting-sidebar ul li a:hover,
.app-setting-sidebar ul li a.active {
    border-right-color: #28313C;
    background-color: #E7ECF0;
    color: #28313C;
}


/****** APP SETTING RIGHT ******/

.app-setting-right {
    padding: 24px;
    flex: 1;
    width: 100%;
    padding-left: 308px;
}

.app-setting-box {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
}

.setting-tab ul {
    border-bottom: 1px solid #E7ECF0;
    padding: 0 20px;
}

.setting-tab ul .nav-item .nav-link {
    color: #28313C;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    height: 60px;
    border-bottom: 4px solid transparent;
    display: flex;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
}

.setting-tab ul .nav-item .nav-link.active {
    background-color: transparent;
    border-color: #ED4040;
}

.add-mall-top.add-mall-form {
    border: none;
}

.setting-app .media {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.setting-app .media .form-group {
    margin: 0;
}

.down-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.setting-app .form-check-label {
    color: #28313C;
}

.file-size {
    padding: 20px;
}

.file-size ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.file-size ul li {
    color: #17A2B8;
    font-weight: normal;
    font-size: 14px;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 4px;
}

.file-size ul li span {
    font-weight: bold;
    display: inline-flex;
}

.setting-app.setting-app-upload .media {
    grid-template-columns: 1fr 1fr;
}

.mb-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #E7ECF0;
    width: 50px;
    height: 38px;
    background-color: #fff;
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 0 4px 4px 0;
}

.value {
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    color: #616E80;
    margin-top: 4px;
}

.setting-title {
    padding: 20px;
    border-bottom: 1px solid #E7ECF0;
}

.setting-title h4 {
    color: #28313C;
    font-size: 21px;
    font-weight: normal;
    line-height: normal;
}


/***** PROFILE SETTING *****/

.profile-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    padding: 31px 10px;
}

.setting-app.profile-setting .media {
    grid-template-columns: 4fr 4fr 4fr;
    gap: 32px;
}

.password-list {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0;
}

.password-list li {
    border-left: 1px solid #E7ECF0;
}

.password-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}


/****** RADIO BTN ******/

.radio-check {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 26px 0 0 0;
}

.radio-check .form-check .form-check-input {
    border: 1px solid #99A5B5;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}

.radio-check .form-check-input:checked {
    background-color: #ED4040;
    border-color: #ED4040;
}

.setting-notification .eyes-btn {
    height: 40px;
}


/***** SETTING NOTIFICATION *****/

.setting-notification-left {
    padding: 20px;
}


/***** ALRTS *****/

.alert {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background-color: #D4EDDA;
    border-color: #C3E6CB;
    color: #155724;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

.setting-notification-right {
    border-left: 1px solid #E7ECF0;
    height: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storage-setting {
    padding: 20px;
}

.setting-notification-right p {
    color: #28313C;
    font-size: 13px;
    font-weight: normal;
    font-size: 13px;
    list-style: 20px;
}

.storage-list {
    background-color: #E2E3E5;
    border: 1px solid #D6D8DB;
    border-radius: 4px;
    margin-bottom: 32px;
}

.storage-list ul {
    list-style: circle;
    padding: 16px 26px;
}

.storage-list ul li {
    color: #28313C;
    font-size: 14px;
    font-weight: normal;
    list-style: inside;
    line-height: 20px;
    margin-bottom: 8px;
}

.storage-list ul li:last-child {
    margin: 0;
}

.storage-list ul li strong {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

.storage-list ul li a {
    color: #1D82F5;
    display: inline-flex;
    align-items: center;
}


/******** CONTRACTOR PAGES *******/

.contractor-sidebar .sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.brand-logo a {
    display: flex;
    align-items: center;
}

.contractor-dashboard-inner {
    padding: 24px;
}

.contractor-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.person-list {
    background-color: #FFFFFF;
    border: 1px solid #616E80;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 6fr 6fr;
    max-width: 82px;
    width: 100%;
}

.person-list li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-list li:last-child a {
    border: none;
}

.person-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-right: 1px solid #616E80;
}

.person-list li a:hover,
.person-list li a.active {
    background-color: #171F29;
}

.person-list li a:hover img,
.person-list li a.active img {
    filter: brightness(1000%);
    transition: all 0.5s ease-in-out;
}

.person-list li a:hover img {
    transition: all 0.5s ease-in-out;
}

.contractor-cards table thead tr th {
    padding: 15px 12px;
}

.contractor-cards table thead tr th:first-child,
.contractor-cards table tbody tr td:first-child {
    padding-left: 20px;
}

.contractor-cards table thead tr th:last-child,
.contractor-cards table tbody tr td:last-child {
    padding-right: 20px;
}

.contractor-cards table tbody tr td .media span {
    border-radius: 50%;
}

.contractor-cards table tbody tr td {
    border-bottom: 1px solid #E7ECF0;
    padding: 12px;
}

.contractor-cards table tbody tr td .media .text-box p {
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}

.all-dropdown {
    display: flex;
    align-items: center;
    color: #28313C;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    gap: 10px;
}


/******** CONTRACTOR PROJECT ******/

.contractor-cards .malls-card-head {
    border-bottom: 1px solid #E7ECF0;
    padding: 12px 20px
}

.progress {
    background-color: #E7ECF0;
    border-radius: 4px;
    height: 15px;
    width: 192px;
    margin-top: 8px;
}

.progress-bar {
    background-color: #ED4040;
}

.progress-bar span {
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    justify-content: center;
}


/***** PROJECT DETAIL ******/

.project-tab {
    background-color: #fff;
    border-bottom: 1px solid #E7ECF0;
}

.project-tab .nav-pills .nav-item {
    border-right: 1px solid #E7ECF0;
}

.project-tab .nav-pills .nav-item .nav-link {
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    gap: 10px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-bottom: 4px solid transparent;
    background-color: transparent;
    border-radius: 0;
    height: 48px;
}

.project-tab .nav-pills .nav-item .nav-link.active,
.project-tab .nav-pills .nav-item .nav-link:hover {
    border-bottom-color: #ED4040;
}

.dropdown-menu.project-menu {
    border: 1px solid #E7ECF0;
    background-color: #fff;
    border-radius: 4px;
    padding: 8px 0;
    min-width: 200px;
}

.menu-link {
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    padding: 8px 18px;
}

.menu-link:hover {
    background-color: #E7ECF0;
}

.project-info {
    background-color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
}

.info-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.info-title h4 {
    color: #28313C;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.info-title a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #28313C;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    gap: 4px;
}

.project-info-inner {
    padding: 0 20px 20px;
}

.project-info-left {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
}

.info-text-box {
    padding: 16px;
}

.info-text-box h4 {
    color: #28313C;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 16px;
}

.info-text-box:nth-child(even) {
    background: #F3F4F8;
    border-top: 1px solid #E7ECF0;
    border-bottom: 1px solid #E7ECF0;
}

.info-text-box ul {
    display: grid;
    grid-template-columns: 6fr 6fr;
    row-gap: 16px;
}

.info-text-box ul li {
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
}

.info-text-box ul li span {
    color: #616E80;
    display: inline-flex;
}

.info-text-box ul li .status {
    color: #28313C;
    font-size: 14px;
    line-height: 20px;
}

.project-planned {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    text-align: center;
    max-width: 200px;
    width: 100%;
    padding: 33px;
}

.project-planned h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 14px;
    max-width: 103px;
    width: 100%;
    margin: 0 auto 20px;
    line-height: 20px;
}


/****** PROJECT DETAIL PRINT MODAL ********/

.project-pring-modal .modal-dialog {
    max-width: 874px;
    width: 100%;
    padding: 0 16px;
}

.project-pring-modal .modal-content {
    border: 1px solid #E7ECF0;
    background-color: #fff;
    border-radius: 4px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    border-bottom: 1px solid #E7ECF0;
    border-radius: 4px 4px 0 0;
}

.modal-header h4 {
    color: #28313C;
    font-weight: normal;
    font-size: 21px;
    line-height: 24px;
}

.close-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contractor-cards.project-detail-unit table tbody tr td a.unit-link {
    color: #1D82F5;
    display: block;
    text-decoration: underline;
}

.contractor-cards.project-detail-unit table tbody tr td .media2 ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}


/**** PROJECT DESIGN STAGE *****/

.defects-detail-media {
    display: flex;
}

.stage-media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.stage-list ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stage-list ul li {
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}

.stage-list ul li span {
    display: flex;
    align-items: center;
    border-radius: 50%;
    background-color: #616E80;
    width: 7px;
    height: 7px;
}

.stage-file ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stage-file ul li a {
    color: #28313C;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mid-left {
    border-left: 1px solid #E7ECF0;
}

.drawing-lins {
    display: flex;
    align-items: center;
    text-decoration: underline;
    color: #1D82F5;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    gap: 6px;
}

.design-stage table tbody tr td .status {
    font-size: 13px;
}

.status.red-bg span {
    background-color: #ED4040;
}

.status.yellow-bg span {
    background-color: #F5C308;
}

.status.gray-bg span {
    background-color: #99A5B5;
}

.status.blue-bg2 span {
    background-color: #1D82F5;
}

.status-icon.yellow-bg {
    background-color: #F5C308;
}

.status-icon.red-bg {
    background-color: #ED4040;
}

.drawing-lins.red-clr {
    color: #ED4040;
}

.collapse-box {
    background-color: #F7FAFF;
}

.design-stage .contractor-cards table tbody tr.collapse-box td {
    border-bottom: none;
}

.arrow-btn {
    display: flex;
    align-items: center;
}

.arrow-btn.active img {
    transform: rotate(90deg);
}


/***** PROJECT DRAWING MODAL ******/

.project-drawing-modal .modal-dialog {
    max-width: 1232px;
    width: 100%;
}

.gray-bg2 {
    background-color: #F3F4F8;
}

.project-drawing-modal .modal-body {
    padding: 20px;
}

.submittle-drop {
    border: 1px solid #E7ECF0;
    background-color: #fff;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #28313C;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding-left: 10px;
    padding-right: 15px;
}

.dropdown-menu {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    padding: 8px 0;
    min-width: 200px;
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding: 8px 20px;
    color: #28313C;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #ED4040;
    color: #fff;
}

.comments-box {
    border: 1px solid #E7ECF0;
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.comments-box:last-child {
    margin: 0;
}

.comments-box .image-holder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comments-box .image-holder img {
    border-radius: 4px;
}

.comments-box .text-box {
    flex: 1;
    width: 100%;
}

.comments-box .text-box h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 16px;
}

.comments-box .text-box span {
    color: #99A5B5;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}

.comments-box .text-box a {
    display: flex;
    align-items: center;
    color: #1D82F5;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
}

.comments-box .text-box p {
    display: flex;
    align-items: center;
    color: #616E80;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
}

.comments-box .text-box ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.comments-box .text-box ul li {
    color: #616E80;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    background-color: #F3F4F8;
    border-radius: 2px;
    height: 24px;
    padding: 0 9px;
}

.download-action {
    width: auto;
    display: inline-flex;
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    padding: 0 10px;
}

.library-media2 ul {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.project-library-modal .modal-dialog {
    max-width: 640px;
}


/* MALL ADMIN CSS */

.mall-logo {
    width: 36px;
    height: 36px;
}

.mall-page .sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arrow {
    margin-left: auto;
}

.navigation ul li .menu-item {
    color: #99A5B5;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    padding: 0px 16px 16px 52px;
    line-height: 20px;
    border: none !important;
}

.dropdown-menu-items {
    display: none;
}

.dropdown.open .dropdown-menu-items {
    display: block;
}

.arrow.rotate {
    transform: rotate(90deg);
    filter: brightness(80);
}

.status-dropdown {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 0px;
    height: 32px;
}

.inspection-boxes {
    border-radius: 4px;
    background: #FFF;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 4fr 4fr;
}

.inspection-box {
    padding: 24px;
}

.inspection-box h4 {
    color: #171F29;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 16px;
}

.inspection-result {
    display: flex;
    align-items: center;
    grid-gap: 12px;
}

.inspection-result h2 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 48px;
    font-weight: 400;
    line-height: 48px;
}

.inspection-result ul li {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.inspection-result ul li span,
.progress-list span {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
}

.progress-list {
    display: flex;
    align-items: center;
    grid-gap: 8px;
}

.bg-gray {
    background: #616E80;
}

.bg-green {
    background: #28A745;
}

.bg-red {
    background: #D21010;
}

.mall-page .dashboard-malls table thead tr th,
.mall-page .dashboard-malls table tbody tr td {
    padding: 12px 12px;
}

.mall-page .dashboard-malls table tbody tr td {
    white-space: nowrap;
}

.heading-4 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 24px;
}

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

.flex {
    display: flex;
    align-items: center;
    justify-content: end;
    grid-gap: 8px;
}

.btn-project {
    color: #616E80;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    border-radius: 4px;
    border: 1px solid #616E80;
    background: #FFF;
    padding: 8px;
}

table tbody tr td .media h5 small {
    font-size: 12px;
    color: #616E80;
    display: block;
}

.tag {
    display: inline-block;
    color: #FFF;
    font-family: "Helvetica Neue";
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    border-radius: 2px;
    background: var(--Gray-Gray3, #616E80);
    padding: 1px 3px;
    margin-left: 4px;
}


/******* 7-4-2025 ********/

.construction-stage-box {
    margin-bottom: 24px;
}

.construction-stage-box:last-child {
    margin-bottom: 0;
}

.construction-stage-box .mall-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.construction-stage-box .stage-media {
    margin-bottom: 12px;
}

.construction-stage-box h4 {
    color: #28313C;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 12px;
}

.status.status-drop {
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    height: 32px;
    padding: 0 6px;
}

.status-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.payment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    border-radius: 4px;
    height: 32px;
    width: 112px;
    background-color: #ED4040;
}

.payment-btn:hover {
    background-color: #171F29;
}

.payment-btn.green-bg {
    background-color: #28A745;
}

.error {
    color: #ED4040;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    margin-top: 14px;
}

.ql-toolbar.ql-snow {
    border: 1px solid #E7ECF0;
    border-radius: 4px 4px 0 0;
    transition: 0.5s ease-in-out;
}

.add-mall-form form .form-group:hover .ql-toolbar.ql-snow,
.add-mall-form form .form-group:hover .form-control.ql-container {
    border-color: #28313C;
    transition: 0.5s ease-in-out;
}

.ql-toolbar.ql-snow:hover {
    border-color: #28313C;
}

.add-mall-form form .form-group .form-control.ql-container {
    height: 80px;
    border-radius: 0 0 4px 4px;
    transition: 0.5s ease-in-out;
}

.requested-box h5 {
    color: #28313C;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}

.requested-box p {
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}


/*** MALL ADMIN ***/


/*** FLAG DROPDOWN ***/

.dropdown-country {
    position: relative;
    width: 100%;
}

.dropdown-country .dropdown-selected {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    color: #28313C;
    font-size: 14px;
    font-weight: normal;
    list-style: 20px;
    height: 40px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.flag-img img {
    width: 20px;
    margin-right: 10px;
}

.dropdown-country .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #E7ECF0;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    display: none;
    z-index: 10;
}

.dropdown-country .dropdown-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-country .dropdown-item:hover {
    background-color: #f0f0f0;
}

.arrow-img {
    display: flex;
    align-items: center;
    margin-left: auto;
}


/****** INPUT TEL *******/

.iti {
    width: 100%;
}

.iti__country-list {
    width: 100%;
    min-width: 367px;
}

.iti__country {
    font-size: 12px;
    padding: 4px 6px;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
}

.iti__selected-flag {
    border-right: 1px solid #E7ECF0;
}

.iti--separate-dial-code .iti__selected-dial-code {
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}


/*******/

.user-add {
    background-color: #fff;
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.user-add span {
    display: flex;
    align-items: center;
}

.user-add h4 {
    color: #28313C;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    gap: 10px;
    display: flex;
    align-items: center;
}

.user-add h4 strong {
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    border-radius: 2px;
    background-color: #616E80;
    line-height: 16px;
    height: 16px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-btn {
    background-color: #fff;
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
}

.add-row ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

.add-row-btn {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    height: 40px;
    color: #616E80;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    gap: 6px;
    padding: 0 13px;
}

.add-row-btn:hover {
    background-color: #F3F4F8;
}

.remove-btn {
    border-color: transparent;
}


/****** USER NEW ****/

.user-media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.user-media h6 {
    color: #28313C;
    font-weight: normal;
    font-size: 21px;
    line-height: 24px;
}


/***** USER DETAIL *****/

.user-detail-page .project-tab .nav-pills {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.user-detail-page .project-tab .nav-pills .nav-link {
    width: 100%;
    text-align: center;
}

.mall-user {
    padding: 24px;
}

.user-detail-box {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
    padding: 20px;
    position: relative;
}

.more-dot {
    position: absolute;
    right: 20px;
    top: 33px;
}

.more-dot a {
    display: flex;
    align-items: center;
}

.user-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.user-detail-box .image-holder {
    max-width: 120px;
    width: 100%;
}

.user-detail-box .image-holder img {
    width: 100%;
}

.user-detail-box .text-box {
    flex: 1;
    width: 100%;
}

.user-detail-box .text-box .text-inner h4 {
    color: #000;
    font-weight: normal;
    font-size: 15px;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-detail-box .text-box .text-inner ul {
    display: flex;
    align-items: center;
    margin: 8px 0 4px;
}

.user-detail-box .text-box .text-inner ul li {
    color: #616E80;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    border-right: 1px solid #616E80;
    padding-right: 10px;
}

.user-detail-box .text-box .text-inner ul li:last-child {
    padding-left: 10px;
    border: none;
    padding-right: 0;
}

.user-detail-box .text-box .text-inner p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
}

.info-list {
    border-top: 1px solid #E7ECF0;
    padding-top: 12px;
    margin-top: 12px;
}

.info-list ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info-list ul li {
    color: #28313C;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}

.info-list ul li span {
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
    display: block;
    margin-bottom: 16px;
}

.user-detail-page .date-recod {
    padding: 36px 20px;
}

.reporting ul {
    display: grid;
    grid-template-columns: 6fr 6fr;
}

.reporting ul li {
    color: #616E80;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.task-chart {
    padding: 20px;
}

.chart-container {
    width: 100%;
    height: 170px;
    display: flex;
    padding-right: 0;
    max-width: 292px;
    margin: 0 auto;
}

.chart-wrapper {
    flex: 1;
}

.user-detail-page .progress {
    width: 100%;
}

.user-detail-page .status-btn {
    height: 32px;
}

.status.blue-bg span {
    background-color: #00B5FF;
}

.task-filter {
    display: flex;
    gap: 32px;
    margin-bottom: 24px;
    align-items: center;
}

.task-filter .filter-search {
    padding: 0 !important;
}

.task-filter .dropdown {
    width: 400px;
}

.task-filter .filter-search .form-control {
    height: 40px;
    padding: 0 0 0 50px;
}

.task-filter .search-btn {
    height: 38px;
    width: 40px;
}

.user-document {
    padding: 20px;
}

.add-files {
    display: flex;
    align-items: center;
    color: #1D82F5;
    font-size: 14px;
    font-weight: normal;
    gap: 4px;
    line-height: 20px;
    margin-bottom: 32px;
}

.document-contract {
    background-color: #fff;
    border: 1px solid #E7ECF0;
    padding: 26px 56px 26px 20px;
    display: inline-flex;
    border-radius: 4px;
    align-items: center;
    gap: 20px;
}

.document-contract .image-holder {
    display: flex;
    align-items: center;
}

.document-contract .text-box {
    flex: 1;
    width: 100%;
}

.document-contract .text-box h4 {
    color: #28313C;
    font-weight: normal;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 8px;
}

.document-contract .text-box p {
    color: #99A5B5;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
}

.mall-user2 .malls-card {
    padding: 0 20px;
}

.ticket-btn {
    padding: 0 11px;
    width: auto;
}

.tag.green-bg {
    background-color: #28A745;
}

.request-work {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    margin-bottom: 20px;
}

.request-work h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid #E7ECF0;
}

.request-work-box ul {
    padding: 20px;
}

.request-work-box ul li {
    gap: 20px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.request-work-box ul li:last-child {
    margin: 0;
}

.request-work-box ul li span {
    color: #99A5B5;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: block;
    max-width: 320px;
    width: 100%;
}

.request-work-box ul li p {
    color: #616E80;
    font-size: 14px;
    font-weight: 400;
    max-width: 540px;
    width: 100%;
    line-height: 20px;
    white-space: normal;
}

.request-work-box ul li p a {
    color: #1D82F5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.response-work-inner {
    padding: 20px;
}

.response-work-box {
    padding: 12px 20px;
    border-left: 2px solid #E7ECF0;
    margin-bottom: 20px;
}

.response-work-box ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

.response-work-box ul li {
    color: #99A5B5;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px
}

.response-work-box ul li h5 {
    color: #28313C;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px
}

.response-work-box p {
    color: #616E80;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 8px;
    margin-bottom: 20px;
}

.response-work-box a {
    color: #616E80;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.response-work-inner .add-files {
    margin-bottom: 20px;
}

.response-bototm {
    background-color: #F3F4F8;
    border-radius: 4px;
    padding: 16px;
}

.response-bototm ul {
    display: flex;
    align-items: center;
    gap: 32px;
}

.response-bototm ul li {
    display: flex;
    align-items: center;
    color: #616E80;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    gap: 10px;
}

.response-bototm ul li .status {
    font-size: 14px;
}

.response-bototm ul li a {
    color: #28313C;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}


/**** TAG ****/

.tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.tag-box {
    background-color: #F3F4F8;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    gap: 6px;
}

.tag-box p {
    color: #616E80;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    gap: 6px;
    display: flex;
    align-items: center;
}

.tag-box a {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 10px;
}

.save-btn.green-bg {
    background-color: #28A745;
    border-color: #28A745;
}

.save-btn.green-bg img {
    filter: brightness(1000%);
}


/* MALL ADMIN NEW PAGES */

.status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dropdown {
    display: flex;
    align-items: center;
    grid-gap: 4px;
}

.mall-page .dashboard-malls table tbody tr td .export-btn {
    padding: 8px 10px;
    width: fit-content;
    border: 1px solid #E7ECF0;
}

.document-table {
    max-width: 600px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.document-table table tbody tr td {
    border-bottom: 1px solid #E7ECF0;
}

.document-table table thead tr th {
    border-top: 1px solid #E7ECF0;
}

.document-table table thead tr th:last-child {
    border-right: 1px solid #E7ECF0;
}

.document-table table tbody tr td:last-child {
    border-right: 1px solid #E7ECF0;
}

.document-table table thead tr th:first-child {
    border-left: 1px solid #E7ECF0;
}

.document-table table tbody tr td:first-child {
    border-left: 1px solid #E7ECF0;
}

.contractor-cards table tbody tr td .save-btn {
    width: 104px;
    border: none;
}

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

.detail-box .project-tab .nav-pills {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.classification-table table tbody tr td .export-btn {
    height: 32px;
    border: 1px solid #616E80 !important;
}

.evaluation-table table {
    width: 1920px;
}

.evaluation-table table thead tr th:first-child {
    padding-left: 20px;
}

.evaluation-table table tbody tr td:first-child {
    padding-left: 20px;
}

.indicator-box {
    border-radius: 4px;
    background: var(--Gray-White, #FFF);
    box-shadow: 0px 0px 4px 0px #E8EEF3;
    padding: 12px 20px;
}

.indicator-box ul {
    display: flex;
    align-items: center;
    justify-content: end;
    grid-gap: 7px;
}

.indicator-box ul li a {
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    background: #FFF;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*******  CONTRACTOR PRODUCT DETAIL *****/

.listing-head {
    padding: 16px 20px;
    border-bottom: 1px solid #E7ECF0;
}

.listing-head h5 {
    color: #28313C;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.listing-head h4 {
    color: #28313C;
    font-size: 21px;
    font-weight: normal;
    line-height: 20px;
}

.services-status .status-btn {
    height: 32px;
    width: 232px;
}

.request-services-modal h3 {
    color: #28313C;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.comments-right ol {
    display: flex;
    gap: 12px;
    align-items: center;
}

.confirm-box p {
    color: #28313C;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 26px;
    line-height: 20px;
}

.confirm-box p:last-child {
    margin: 0;
}


/******* NOTICES OF DELAY ******/

.notice-delay-sec .dashboard-statistics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 32px;
}

.notice-delay-sec .dashboard-statistics {
    margin: 0;
}

.notice-delay-sec .stat-card {
    margin: 0;
}

.dropdown-second .status-btn {
    padding-right: 65px;
}

.add-select {
    color: #616E80;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    border-left: 1px solid #E7ECF0;
    width: 54px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
}

.filter-bar-inner {
    width: 100%;
    display: flex;
}

.filter-btn {
    border: none;
}

.filter-btn ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-btn .save-btn {
    height: 32px;
    padding: 0 6px;
    gap: 3px;
}

.filter-btn .export-btn {
    height: 32px;
    width: 51px;
}

.drawing-page .filter-search .form-control {
    width: 380px;
}


/* new css */

.investor-project-page .investor-heading {
    font-size: 16px;
    color: #28313C;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    /* 125% */
    padding: 24px;
    padding-bottom: 0;
}

.investor-project-page .mall-btn {
    margin-bottom: 0;
}

.investor-filter-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    padding-inline: 24px;
}

.investor-filter-main select {
    font-size: 14px;
    color: #99A5B5;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.investor-filter-main select:focus {
    box-shadow: none;
}

.investor-filter-main .filter-search .search-btn {
    border: 0;
}

.investor-filter-main .filter-search input {
    height: 40px;
}

.investor-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.investor-filter-right select {
    width: 240px;
    height: 40px;
}

.investor-project-page .contractor-cards table tbody tr td .investor-tag .tag {
    border-radius: 5px;
    width: 44px;
    padding-inline: 3px;
    height: 19px;
}

.investor-project-page .contractor-cards table tbody tr td .investor-tag h5 {
    display: flex;
    align-items: center;
}


/* new-css */

.progress-bar-wrapper {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

.project-as-page .mall-btn ul {
    justify-content: space-between;
}

.project-as-page .nav {
    border-radius: 4px;
    border: 1px solid #616E80;
    background: #FFF;
}

.project-as-page .nav .nav-link.active {
    border: 1px solid var(--Gray-Gray1, #171F29);
    background: var(--Gray-Gray1, #171F29);
}

.project-as-page .nav .nav-link.active svg path {
    fill: #fff;
}

.action-btns {
    display: flex;
}

.bottom-divider {
    border-bottom: 1px solid #E7ECF0;
}

.contractor-box {
    background: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    grid-gap: 16px;
    padding: 16px;
    max-width: 422px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    z-index: 99;
    display: none;
}

.box-show.show {
    position: relative;
}

.box-show.show::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
}

.contractor-box h6 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.box-show.show .contractor-box {
    display: flex;
}

.details-list {
    padding: 20px;
    max-width: 660px;
}

.details-list li {
    margin-bottom: 20px;
}

.details-list li h6 {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-gap: 20px;
    color: #99A5B5;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.details-list li span {
    color: #28313C;
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.mall-page .add-mall-box h5 {
    border-bottom: 1px solid #E7ECF0;
}

.heading-6 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}

.report-body {
    background: #F3F4F8;
    height: 520px;
}

.print-icon {
    filter: brightness(24);
}

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

.comments-box {
    position: relative;
}

.commetns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 20px;
    position: absolute;
    top: 16px;
    right: 16px;
}

.yellow-bg2 {
    background: #F99117;
    border: 1px solid #F99117;
}

.permalink {
    display: flex;
    align-items: center;
}

.copyLink {
    border: 1px solid #616E80;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    gap: 4px;
    width: 63px;
    color: #616E80;
    font-weight: normal;
    cursor: pointer;
    font-size: 12px;
}

.textLink {
    border: none;
    border-radius: 0;
    height: auto;
    color: #28313C;
    font-weight: normal;
    width: 100%;
    font-size: 14px;
    max-width: 570px;
}

.error2 {
    font-size: 14px;
    color: #ED4040;
}

.group-media {
    display: flex;
    align-items: center;
}

.add-mall-form form .form-group .group-media .relative select {
    width: 65px;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.add-mall-form form .form-group .group-media .form-control.form-user {
    border-radius: 0 4px 4px 0;
}

.group-media:hover .form-control {
    border-color: #28313C !important;
}

.group-media:hover .form-control::placeholder {
    color: #28313C !important;
}

.dot-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background-color: #ED4040;
    border-radius: 50%;
    margin-left: 6px;
}

.notification-email {
    display: flex;
}

.notification-choose {
    padding: 40px 20px;
    flex: 1;
    width: 100%;
}

.notification-choose p {
    color: #28313C;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.notification-settings {
    max-width: 456px;
    width: 100%;
    border-left: 1px solid #E7ECF0;
    margin: -61px 0 0 0;
}

.notification-settings h4 {
    color: #28313C;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 20px;
}

.notification-list {
    padding: 20px;
}

.notification-list ul li {
    margin-bottom: 20px;
}

.notification-list ul li:last-child {
    margin: 0;
}

.form-control:disabled {
    background-color: #E7ECF0;
}

.add-mall-form form .form-group .form-control.dark-field {
    background-color: #E7ECF0;
    color: #28313C;
}

.add-mall-form form .form-group .form-control.dark-field::placeholder {
    color: #28313C;
}


/**** ROLES PERMISSION *****/

.role-permision {
    padding: 20px;
}

.role-permisio-box {
    background-color: #fff;
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.role-permisio-box:last-child {
    margin: 0;
}

.role-permisio-box .text-box h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.role-permisio-box .text-box span {
    color: #99A5B5;
    font-size: 14px;
    font-weight: 400;
    display: block;
    line-height: 20px;
}

.role-permisio-box p {
    color: #99A5B5;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.key-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #616E80;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid #616E80;
    background: #FFF;
    height: 40px;
    width: 121px;
}

.key-btn:hover {
    background-color: #616E80;
    color: #fff;
}

.key-btn:hover img {
    filter: brightness(1000%);
}

.permisio-detail {
    border: 1px solid #E7ECF0;
    border-radius: 4px;
    margin-bottom: 16px;
}

.permisio-detail table {
    width: 100%;
}

.permisio-detail table thead tr th {
    border-bottom: 1px solid #E7ECF0;
    background-color: #F3F4F8;
    color: #28313C;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 20px;
}

.permisio-detail table tbody tr td {
    color: #28313C;
    font-size: 13px;
    padding: 8px 20px;
    font-weight: 400;
    line-height: 20px;
    border-bottom: 1px solid #E7ECF0;
}

.permisio-detail table tbody tr td .relative {
    width: 112px;
    margin-left: -8px;
}

.permisio-detail table tbody tr td .relative .form-control {
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #28313C;
    height: 32px;
    width: 100%;
    background-color: transparent;
    padding: 0 6px;
    border-radius: 4px;
}

.permisio-detail table tbody tr td .relative .form-control:hover {
    border-color: #28313C;
}

.permisio-detail table tbody tr td:last-child {
    background-color: #F3F4F8;
}

.permisio-detail table tbody tr td:last-child .relative {
    margin: 0 auto;
}

.permisio-detail table tbody tr td:last-child .relative .form-control {
    text-align: center;
    color: #616E80;
}

.permisio-detail table tbody tr:last-child td {
    border-bottom: none;
}

.task-setting {
    padding: 20px 20px 5px 20px;
    border-bottom: 1px solid #E7ECF0;
}

.task-setting .add-mall-form form .form-group {
    margin: 14px 0;
}

.task-setting h4 {
    color: #28313C;
    font-size: 21px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 12px;
}

.task-setting ul {
    margin: 16px 0;
}

.task-setting ul li {
    margin-bottom: 4px;
}

.task-setting ul li:last-child {
    margin: 0;
}

.contractors-setting-page .app-setting-sec .label-text {
    flex-wrap: wrap;
}


/****** DEFECT DETAIL *****/

.defect-detail-page {
    background-color: #fff;
}

.defect-detail-page .super-admin-dashboard {
    padding: 0;
}

.defects-detail-top {
    background-color: #fff;
    border-bottom: 1px solid #E7ECF0;
    padding: 14px 12px;
}

.defects-detail-top ul {
    display: flex;
    align-items: center;
}

.defects-detail-top ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #616E80;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    border-right: 1px solid #E7ECF0;
    padding: 0 16px;
}

.defects-detail-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.defects-detail-left .media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.defects-detail-left .media .heading h4 {
    color: #28313C;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}

.defects-detail-left .media .heading p {
    color: #99A5B5;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.defects-detail-left .media ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

.defects-info {
    background-color: #F7FAFF;
    padding: 20px;
    border-top: 1px solid #E7ECF0;
}

.defects-info {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.defects-info .image-holder {
    width: 60px;
}

.defects-info .text-box {
    flex: 1;
    width: 100%;
}

.defects-info .text-box .mediabox {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.defects-info .text-box .mediabox h4 {
    overflow: hidden;
    color: #28313C;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 400;
    line-height: 20p
}

.defects-info .text-box .mediabox span {
    color: #99A5B5;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    display: block;
}

.defects-info .text-box ul {
    padding-left: 15px;
    margin-bottom: 20px;
}

.defects-info .text-box ul li {
    color: #616E80;
    font-size: 12px;
    font-weight: 400;
    list-style: auto;
    line-height: 16px;
}

.defects-info .text-box p {
    color: #616E80;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
}

.defects-detail-right {
    border-left: 1px solid #E7ECF0;
    max-width: 330px;
    width: 100%;
}

.defects-detail-right .setting-tab .nav-pills {
    padding: 0;
    flex-wrap: wrap;
}

.defects-detail-right .setting-tab ul .nav-item .nav-link {
    padding: 0 31px;
}

.export-btn.add-not {
    width: auto;
    padding: 0 13px;
}


/***** INVESTOR PAGE *******/

.salutation-media {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    justify-content: space-between;
}

.salutation-media .form-group {
    flex: 1;
}

.salutation-media .form-group.investor-salutation {
    width: 120px;
    flex: auto;
}

.sorting-noti {
    background-color: #fff;
    border-top: 1px solid #E7ECF0;
}

.investor-project-page .contractor-cards table thead tr th {
    padding: 15px 9px;
}

.investor-project-page .contractor-cards table tbody tr td {
    padding: 12px 9px;
}

.not-assigned {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ED4040;
}


/***** MALL NEW *****/


/* new css */

.contractor-project-page .site-modal {
    max-width: 624px;
}

.site-picture {
    display: block;
    margin: 0 auto;
}

.contractor-project-page .site-modal .modal-body.gray-bg2 {
    background: #FFF;
}

.status.fail span {
    border-radius: 50%;
    border: 1px solid #99A5B5;
    background: #FFF;
    width: 16px;
    height: 16px;
}

.status.pass-large span {
    width: 16px;
    height: 16px;
}

.drawing-lins.no-underline {
    text-decoration: none;
}

.contractor-project-page .water-supply-modal {
    max-width: 1000px;
}

.pass-large.danger span {
    background: #ED4040;
}

.inspection-heading {
    font-size: 14px;
    color: #616E80;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
    padding-bottom: 12px;
}

.contractor-project-page .project-inspection-modal .modal-dialog {
    max-width: 1000px;
}

.contractor-project-page .upload-link {
    font-size: 12px;
    color: #616E80;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
    display: flex;
    align-items: center;
    gap: 4px;
}

.contractor-project-page .inspection-table {
    border: 1px solid #E7ECF0;
}

.inspection-paragraph {
    font-size: 12px;
    color: #ED4040;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */
}

.inspection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inspection-header {
    padding: 20px;
    border-bottom: 1px solid #E7ECF0;
}

.project-list li {
    display: flex;
    align-items: center;
}

.project-list li {
    color: #616E80;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}

.project-list {
    padding: 20px;
}

.project-list li h6 {
    min-width: 320px;
    color: var(--Gray-Gray4, #99A5B5);
}

.work-list {
    display: flex;
    align-items: center;
    grid-gap: 8px;
}

.circle {
    border-radius: 99px;
    background: #1D82F5;
    width: 10px;
    height: 10px;
    display: block;
}

.incomplete-box {
    border-radius: 4px;
    background: var(--Gray-White, #FFF);
    padding: 20px;
    box-shadow: 0px 0px 4px 0px #E8EEF3;
}

.incomplete-box ul {
    margin-top: 20px;
}

.incomplete-box ul li {
    color: #616E80;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    grid-gap: 20px;
    margin-bottom: 20px;
}

.incomplete-box ul li h6 {
    color: #99A5B5;
    min-width: 148px;
}

.add-projects .add-mall-top {
    border-bottom: 1px solid #E7ECF0;
}

.add-projects .add-mall-top:last-child {
    border-bottom: none;
}

.add-mall-top-inner h4 {
    color: #28313C;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    padding-bottom: 20px;
}

.dropdown-dashboard {
    padding: 8px 0;
    border: 1px solid #E7ECF0;
    border-radius: 4px;
}

.dropdown-dashboard .dropdown-item {
    display: flex;
    align-items: center;
    color: #28313C;
    font-weight: normal;
    font-size: 14px;
    gap: 10px;
}

.dropdown-dashboard .dropdown-item.active,
.dropdown-dashboard .dropdown-item:hover {
    background-color: #ED4040;
    color: #fff;
}

.dropdown-dashboard .dropdown-item.active img,
.dropdown-dashboard .dropdown-item:hover img {
    filter: brightness(1000%);
}

.project-w {
    width: 200px;
}

.project-w .submittle-drop {
    height: 32px;
}

.search-investor .form-control {
    padding-left: 44px;
    width: 240px;
}

.filter-duration .search-investor span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spend-btn {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 82px;
    margin-left: auto;
    font-size: 12px;
    font-weight: normal;
    color: #616E80;
}

.spend-btn:hover {
    background-color: #F3F4F8;
}

.dop-feild {
    padding: 0 20px;
}


/**** PROJECT LOG MODAL *****/

.project-log-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.project-log-box .image-holder {
    max-width: 40px;
    width: 100%;
    border-radius: 40px;
}

.project-log-box .image-holder img {
    border-radius: 4px;
}

.project-log-box .text-box {
    flex: 1;
    width: 100%;
}

.project-log-box .text-box h4 {
    color: #28313C;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.project-log-box .text-box ul {
    display: flex;
    align-items: center;
    margin-top: 6px;
    gap: 4px;
    flex-wrap: wrap;
}

.project-log-box .text-box ul li {
    display: flex;
    align-items: center;
}

.log-tag {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    padding: 0 4px;
}

.bg-lightred {
    background-color: #ED4040;
}

.bg-yellow {
    background-color: #F5C308;
}

.project-log-box .text-box ul p {
    color: #99A5B5;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.mall-setting-profile {
    padding: 0 0 0 280px;
}

.mall-setting-profile .setting-ane {
    padding: 24px;
}

.export-btn-tb {
    margin-left: auto;
    width: 55px;
    height: 32px;
    font-size: 12px;
}

.export-btn-tb img {
    height: 12px;
}

.submit {
    display: flex;
    align-items: center;
    gap: 5px;
}

.submit span {
    color: #616E80;
    font-weight: normal;
    font-size: 12px;
    line-height: 1;
    background-color: rgb(97, 110, 128, 0.12);
    border-radius: 2px;
    height: 18px;
    display: inline-flex;
    padding: 0 6spx;
    align-items: center;
}

.more-add {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #616E80;
    font-size: 12px;
    font-weight: normal;
}


/* new-css */

.tab-btn {
    border-radius: 4px;
    border: 1px solid var(--Gray-Gray3, #616E80);
    background: var(--Gray-White, #FFF);
    display: flex;
    align-items: center;
}

.tab-btn a {
    border-right: 1px solid var(--Gray-Gray3, #616E80);
    background: var(--Gray-White, #FFF);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btn a.active {
    border: 1px solid var(--Gray-Gray1, #171F29);
    background: var(--Gray-Gray1, #171F29);
}

.tab-btn a:last-child {
    border-right: 0px;
}

.setting-card .export-btn-tb {
    margin-left: auto;
    width: 66px;
}

.project-template-box .template-form {
    display: flex;
    grid-gap: 32px;
    align-items: end;
}

.project-template-box .template-form label {
    margin-bottom: 12px;
}

.flex-1 {
    flex: 1;
}

.template-boxes {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 4fr;
    grid-gap: 16px;
}

.template-box {
    border-radius: 4px;
    border: 1px solid #E7ECF0;
    background: #F3F4F8;
    padding: 16px;
}

.template-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.template-box-left {
    display: flex;
    align-items: center;
}

.template-box-left span {
    border-radius: 99px;
    background: #D21010;
    width: 15px;
    height: 15px;
    display: block;
}

.template-box-left h4 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    margin: 0px 16px 0px 8px;
}

.number-box {
    color: #616E80;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    background: #E7ECF0;
    line-height: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-box-right a {
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-box-right {
    display: flex;
    justify-content: space-between;
    grid-gap: 4px;
}

.approved-box span {
    border-radius: 99px;
    background: var(--Blue-Blue1, #1D82F5);
    width: 8px;
    height: 8px;
    display: block;
}

.approved-box {
    display: flex;
    grid-gap: 4px;
    justify-content: end;
    align-items: center;
}

.approved-box .bg-red {
    background: var(--Red-Red, #D21010);
}

.checklist-box {
    border-radius: 4px;
    border-left: 3px solid var(--Yellow-Yellow, #F5C308);
    background: rgba(245, 195, 8, 0.04);
    padding: 12px;
    display: flex;
    margin-bottom: 8px;
    align-items: start;
    grid-gap: 12px;
}

.checklist-box-right h6 {
    color: #28313C;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.checklist-box .work-list {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    margin: 18px 0px 6px;
}

.checklist-box h6.text-gray {
    color: #99A5B5 !important;
}

.avatar-group {
    display: flex;
    grid-gap: 4px;
}

.calendar-box {
    display: flex;
    align-items: center;
    grid-gap: 8px;
}

.checklist-inner-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.checklist-box-right {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.btns-list {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    margin-top: 15px;
}

.btns-list li {
    width: 50%;
}

.btns-list li a {
    border-radius: 4px;
    border: 1px solid var(--Gray-Gray7, #E7ECF0);
    background: var(--Gray-White, #FFF);
    color: var(--Gray-Gray3, #616E80);
    text-align: center;
    font-family: "Helvetica Neue";
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 100%;
}

.checklist-box.box-red {
    border-left: 3px solid var(--Red-Red, #D21010);
    background: rgba(210, 16, 16, 0.04);
}

.template-box-left .bg-yellow {
    background-color: #F5C308 !important;
}

.template-box-left .bg-blue {
    background-color: #00B5FF !important;
}

.template-box-left .bg-green {
    background-color: #28A745 !important;
}

.list-btns {
    display: flex;
    align-items: center;
    grid-gap: 8px;
    justify-content: end;
}


/* hasnain-css */

.spacing-0 {
    padding-top: 0px;
    padding-left: 280px;
}

.spacing-0 .setting-tab ul .nav-item .nav-link {
    border-right: 1px solid #E7ECF0;
    padding: 0px 15px !important;
}

.spacing-0 .tab-content {
    padding: 24px;
    background: #F3F4F8;
}

.status .bg-red {
    background: #D21010;
}

.status .bg-yellow {
    background: #F5C308;
}

.status .bg-blue {
    background: #1D82F5;
}

.status .bg-gray {
    background: #99A5B5;
}

.form-check.form-switch input {
    width: 32px;
    height: 16px;
    border-radius: 999px;
}

.form-check.form-switch .form-check-input:checked {
    background-color: #28A745;
    border-color: #28A745;
}

.p-20 {
    padding: 20px;
}

.p-20 .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.p-20 .form-check .label-text {
    margin-bottom: 0px;
}

.form-box {
    max-width: 416px;
}

.mt-32 {
    margin-top: 32px;
    margin-bottom: 40px;
}

.setting-tab {
    overflow-x: auto;
}

.setting-tab .nav {
    width: 1345px;
}

.criteria-list {
    display: flex;
    align-items: center;
    grid-gap: 16px;
    margin-bottom: 24px;
}

.criteria-list li {
    color: var(--Gray-Gray3, #616E80);
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}


/****/

.mall-admin-tb .setting-tab .nav {
    width: 100%;
    padding: 0;
}

.temp-box {
    color: #28313C;
    font-weight: normal;
    font-size: 21px;
    line-height: normal;
}

.temp-box ul li {
    display: flex;
    align-items: center;
    color: #616E80;
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    gap: 8px;
    margin-top: 16px;
}

.add-cd {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    height: 34px;
    width: 84px;
    color: #616E80;
    font-weight: normal;
    font-size: 12px;
    gap: 4px;
}

.group-media2 {
    display: flex;
    align-items: center;
    gap: 4px;
}

.move-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trash-bar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-input {
    width: 100%;
    flex: 1;
}

.all-btn {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Success Toast */
.toast-success {
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Error Toast */
.toast-error {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Info Toast */
.toast-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

/* Warning Toast */
.toast-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Optional: consistent font for all toasts */
.toast {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #dc3545 !important;
    background-image: none !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    background-image: none !important;
}

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

.profile-picture-wrapper img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
}

.profile-picture-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.profile-box {
    text-align: center;
    margin-bottom: 20px;
}

/* Switch container */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

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

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

/* Checked style */
.switch-input:checked+.switch-toggle-slider {
    background-color: #4CAF50;
    /* green */
}

/* Move slider on check */
.switch-input:checked+.switch-toggle-slider::before {
    transform: translateX(26px);
}

/* Optional red when off */
.switch-toggle-slider {
    background-color: #f44336;
    /* red */
}

.switch-input:checked+.switch-toggle-slider {
    background-color: #4CAF50;
    /* green */
}