/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(245, 4, 4, 0);
    border-radius: 0;
    background-color: #ddd;
}
::-webkit-scrollbar {
    float: right;
    width: 10px;
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    /* -webkit-box-shadow: inset 0 0 6px #fff; */
    background-color: #9d9d9d;
    border-radius: 10px;
}
@import url("https://fonts.googleapis.com/css2?family=cairo:wght@200..1000&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");

@font-face {
    font-family: "Tajawal", sans-serif;
    src: url("https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
}

@font-face {
    font-family: "riyal-sar";
    src: url("../fonts/riyal-sar.eot?62hz23");
    src: url("../fonts/riyal-sar.eot?62hz23#iefix") format("embedded-opentype"),
        url("../fonts/riyal-sar.ttf?62hz23") format("truetype"),
        url("../fonts/riyal-sar.woff?62hz23") format("woff"),
        url("../fonts/riyal-sar.svg?62hz23#riyal-sar") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.ltr {
    direction: ltr;
}
p,
a,
h2,
h3,
h4,
h5,
h6,
span,
ul,
li,
MARQUEE,
input,
button,
.textarea,
textarea,
label,
select,
tr,
table,
th {
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    margin: 0;
}
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
    outline: 0 !important;
}
i {
    line-height: 0;
}
p {
    margin-top: 0;
    margin-bottom: 0;
}
a {
    cursor: pointer;
}
.container-full .row {
    margin-left: 0;
    margin-right: 0;
}
.pdd_l_0 {
    padding-left: 0;
}
.pdd_0 {
    padding: 0;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #e3e3e3;
}
.form-check {
    padding-right: 1.5em;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}
.form-check,
.form-check label,
.form-check input {
    cursor: pointer;
}
.flex-2 .form-check label.form-check-label {
    margin: 0;
    font-size: 15px;
    margin-top: 3px;
}
.form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
    flex: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
/*----------------------------------------*/
/*  MY STYLE
/*----------------------------------------*/
body {
    background: #ebebeb;
    color: #000;
    text-align: right;
    padding-top: 50px;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.alignleft {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
    margin-bottom: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
    outline: 0px solid;
}
img {
    max-width: 100%;
    height: auto;
}
a {
    transition: all 0.3s ease 0s;
    text-decoration: none;
}
a:active,
a:hover {
    outline: 0 none;
}
a:hover,
a:focus {
    text-decoration: none;
}
#scrollUp {
    background: var(--main-background) none repeat scroll 0 0;
    border-radius: 2px;
    bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    color: var(--font-light-color);
    font-size: 20px;
    height: 34px;
    line-height: 30px;
    /* opacity: 0.6; */
    left: 15px;
    text-align: center;
    transition: all 0.3s ease 0s;
    width: 34px;
}
#scrollUp:hover {
    background: #2f2d51;
    opacity: 1;
}
.clear {
    clear: both;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
input,
select,
textarea,
input[type="text"],
input[type="date"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="tel"],
button,
button[type="submit"] {
    /* -moz-appearance: none; */
    box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
}
.navbar-collapse {
    padding-left: 0px;
}
::-moz-selection {
    background: var(--main-color);
    text-shadow: none;
    color: var(--font-light-color);
}
::selection {
    background: var(--main-color);
    text-shadow: none;
    color: var(--font-light-color);
}
.text-right {
    text-align: right;
}
.lg-hidden {
    display: none;
}
.card-box {
    position: relative;
    border-radius: 20px;
    padding: 25px 25px;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(95, 95, 95, 0.02);
}
/*----------------------------------------*/
/*   Padding Size
/*----------------------------------------*/
.padd-100 {
    padding: 100px 0;
}
.padd-80 {
    padding: 80px 0;
}
.padd-60 {
    padding: 60px 0;
}
.padd-50 {
    padding: 50px 0;
}
.padd-40 {
    padding: 40px 0;
}
.padd-30 {
    padding: 30px 0;
}
.padd-20 {
    padding: 20px 0;
}
.padd-10 {
    padding: 10px 0;
}
.padd-botm {
    padding-bottom: 100px !important;
}
.padd-botm-150 {
    padding-bottom: 150px !important;
}
.padd-rt-lft-15 {
    padding: 0 15px;
}
.padd-btm-15 {
    padding-bottom: 15px;
}
/*----------------------------------------*/
/*   Main Button Style
/*----------------------------------------*/
/* Main Button Style */
.main-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif;
    padding: 7px 20px;
    min-width: 130px;
    text-align: center;
    border-radius: 7px;
    font-weight: 800;
    min-height: 44px;
}
/* Primary Button */
.primary-btn {
    color: var(--main-color);
    border: 1px solid var(--main-color);
    background: color-mix(in srgb, var(--main-color), #0000 92%);
}
.primary-btn:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
    border: 1px solid var(--secondary-color);
}
.primary-btn.solid {
    background: var(--main-color);
    color: var(--font-light-color);
    border: 1px solid var(--main-color);
}
.primary-btn.solid:hover {
    background: var(--secondary-color);
    color: var(--font-light-color);
    border: 1px solid var(--secondary-color);
}
/* Secondary Button */
.secondary-btn {
    background: rgba(255, 255, 255, 0);
    color: var(--main-color);
    border: 1px solid var(--main-color);
}
.secondary-btn:hover {
    background: var(--main-color);
    color: var(--font-light-color);
}

/* Third Button */
.thrd-btn {
    display: inline-flex;
    gap: 13px;
    padding: 21px 15px;
    font-size: 14px;
    color: #000;
}
.thrd-btn i {
    font-size: 21px;
}

.delete-btn {
    color: #ee4946;
    border: 1px solid #ee4946;
}
.main-btn i {
    font-size: 19px;
    vertical-align: middle;
}
.main-btn .arrow-rt {
    font-size: 13px;
    vertical-align: middle;
}
.delete-btn:hover {
    background: #ee494612;
    color: #ee4946;
}
.outline-btn {
    color: #4f4f4f;
    border: 1px solid #4f4f4f;
}
.outline-btn:hover {
    color: #4f4f4f;
    background: #4f4f4f20;
    border: 1px solid #4f4f4f;
}
/*----------------------------------------*/
/*   Text Colors
/*----------------------------------------*/
.white-color {
    color: var(--font-light-color);
}
.main-color {
    color: #492a66;
}
/*----------------------------------------*/
/*   Background Colors
/*----------------------------------------*/
.bg-w {
    background: #fff;
}
/*----------------------------------------*/
/*   Width Classes
/*----------------------------------------*/
.width-50 {
    min-width: 50px;
}
.width-70 {
    min-width: 70px;
}
.width-80 {
    min-width: 80px;
}
.width-100 {
    min-width: 100px;
}
.width-120 {
    min-width: 120px;
}
.width-150 {
    min-width: 150px;
}
.width-170 {
    min-width: 170px;
}
.width-180 {
    min-width: 180px;
}
.width-200 {
    min-width: 200px;
}
.width-220 {
    min-width: 220px;
}
.width-240 {
    min-width: 240px;
}
.width-250 {
    min-width: 250px;
}

/*----------------------------------------*/
/*   Main Form
/*----------------------------------------*/
/* Main Form */
.main-form .form-group {
    margin: 10px 0;
    padding: 0 8px;
    text-align: right;
}
.main-form label {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 10px;
    display: block;
    line-height: 15px;
}
.main-form .imp-inpt {
    color: #e02828;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    margin-left: 2px;
}
.main-form .form-control {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #afbac7;
    background: #fbfbfb;
    color: #000000;
    font-size: 14px;
    min-height: 45px;
    padding: 10px 13px;
    font-weight: 500;
    line-height: 0;
}
.main-form textarea.form-control {
    line-height: 17px;
    padding-top: 17px;
}
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(110 51 169 / 0%);
}
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: var(--main-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(110 51 169 / 0%);
}
.main-form .select-options {
    text-align: right;
    padding-right: 13px;
    height: calc(33px + 0.75rem + 0px);
    line-height: 22px;
    font-size: 12px;
    padding: 10px 23px;
    font-weight: 500;
    color: #6a7587;
}
.add-soci-card .select-options {
    font-weight: 700;
}
.nice-select {
    position: relative;
}
.nice-select .option {
    color: #000000;
}
.nice-select:after {
    content: "";
    display: block;
    height: 7px;
    margin-top: -3px;
    pointer-events: none;
    position: absolute;
    right: auto;
    left: 15px;
    top: 49%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 7px;
}
.nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 5;
    width: 100%;
    overflow-y: auto;
    height: 200px;
}
::placeholder {
    color: #5a5a5a;
    font-weight: 300;
    opacity: 1; /* Firefox */
}
::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: #5a5a5a;
    font-weight: 300;
}

.input-grp {
    position: relative;
}
.form-group .input-grp input {
    padding-left: 100px;
}
.num-input input {
    direction: ltr;
}
.st-no {
    position: absolute;
    top: 9px;
    left: 16px;
    direction: ltr;
}
.st-no img {
    height: auto;
    width: 30px;
    border-radius: 3px;
}
.st-no span {
    font-size: 14px;
    font-weight: 700;
    font-family: "Inter";
    margin-left: 8px;
    vertical-align: middle;
}
.eml-spn {
    background: rgba(72, 6, 137, 0.11);
    border-radius: 6px;
    color: var(--main-color);
    padding: 7px 22px;
    position: absolute;
    top: 14%;
    left: 7px;
    font-size: 12px;
}
.eml-spn:hover {
    background: rgb(72 6 137 / 21%);
    color: var(--main-color);
}
.eml-spn-msg {
    display: none;
}
.sm-msg {
    color: #5d2396;
    font-size: 12px;
    font-weight: 900;
    padding: 15px 0 0 0;
}
/* .main-form form input.form-control{
    height: 60px;
} */
.check-flex {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
}
.check-flex label {
    margin: 0;
    padding-top: 7px;
}
.form-check-input:checked {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.main-form .iti {
    display: block;
    text-align: left;
}
.iti .form-control {
    text-align: left;
}
.iti__selected-flag {
    padding: 0 15px 0 20px;
    direction: ltr;
}
.iti__country-list {
    left: 0;
    right: auto;
}
.main-form form .iti--allow-dropdown .form-control {
    padding-left: 110px !important;
}
.iti--separate-dial-code .iti__selected-dial-code {
    margin-left: 12px;
    font-weight: 700;
    vertical-align: middle;
    margin-top: -1px;
}
.iti--separate-dial-code .iti__selected-flag {
    background-color: rgb(0 0 0 / 0%);
}
.iti--separate-dial-code .iti__selected-flag:hover {
    background-color: rgb(0 0 0 / 0%) !important;
}
.iti__country {
    direction: ltr;
}
.iti .form-control {
    text-align: left;
    direction: ltr;
}
/*----------------------------------------*/
/*   Header Area 
/*----------------------------------------*/
/* ====  Navbar  ==== */
.navbar-toggler {
    width: 42px;
    height: 40px;
    background: var(--secondary-color);
    line-height: 24px;
    padding: 10px;
}
.navbar-toggler i {
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="false"] .menu-icon {
    display: block;
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="false"] .close-icon {
    display: none;
}
.navbar-toggler[aria-expanded="true"] .close-icon {
    display: block;
    color: var(--font-light-color);
}
.navbar-toggler[aria-expanded="true"] .menu-icon {
    display: none;
}
.navbar {
    padding: 10px 30px;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom: 1px solid rgba(113, 92, 110, 0.22);
    background: var(--main-background);
}
.navbar::after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
        97deg,
        #392d2369 2.69%,
        #0000003b 64.4%,
        #120c19e0 107.58%
    );
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.navbar .container,
.navbar .container-fluid {
    position: relative;
    z-index: 2;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--font-light-color);
    font-weight: 600;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: #462cff;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #462cff;
}
.navbar-brand img {
    width: 123px;
    height: 30px;
    margin-right: 0;
}
.navbar.active {
    position: fixed;
    top: 0;
    margin: 0;
    display: flex;
    align-content: center;
    align-items: center;
    box-shadow: 0px 10px 20px 2px #190d252e;
}
.navbar-brand-logo {
    padding: 0;
    margin: 0;
}
.navbar-brand-logo img {
    display: block;
    height: 40px;
    margin-top: 0px !important;
    transition: all 0.3s ease;
    margin-top: -11px !important;
}
.navbar-nav .nav-link {
    color: var(--font-light-color);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}
.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    gap: 10px;
    margin-right: 0;
    margin-left: auto;
    margin: auto;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus {
    color: var(--secondary-color);
}
.navbar-brand {
    float: right;
    flex: 1 0 0%;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        flex: 1 0 60%;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 5px 10px;
    }
}

.dropdown-btn-log.show {
    background: #fff;
    color: #261325;
}
.dropdown .dropdown-menu {
    width: 100%;
    border-radius: 7px;
    background: var(--main-background);
    color: var(--font-light-color);
    margin: 0 0;
    padding: 0;
    margin-top: 10px;
    left: 0;
    right: auto;
}
.dropdown .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dropdown-item {
    width: 100%;
    padding: 15px 20px;
    clear: both;
    font-weight: 400;
    color: var(--font-light-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 12px;
}
.dropdown-item i {
    font-size: 17px;
    margin-left: 8px;
    vertical-align: middle;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 15px 20px;
    color: var(--font-light-color);
    border-bottom: 1px dashed #252525;
}
.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--font-light-color);
    background-color: #f8f8f814;
}
.navbar-nav .dropdown li:last-child .dropdown-item {
    border-bottom: 1px dashed #25252500;
}

.navbar-nav .dropdown .dropdown-menu {
    background: #ffffff;
    color: #000;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 15px 20px;
    color: #000;
    border-bottom: 1px solid #ededed;
}
.navbar-nav .dropdown .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown .dropdown-menu .dropdown-item:focus,
.navbar-nav .dropdown .dropdown-menu .dropdown-item:active {
    background-color: var(--main-color);
    color: var(--font-light-color);
    padding-right: 15px;
}
.dropdown-btn-log {
    color: var(--font-light-color);
    border: 1px solid #fff;
    padding: 8px 22px;
    border-radius: 50px;
    font-size: 13px;
    padding-top: 11px;
}
.dropdown-btn-log:hover {
    background: #fff;
    color: #261325;
}
.dropdown-btn-log i {
    line-height: 0;
    vertical-align: middle;
    margin-left: 4px;
    font-size: 19px;
}
.reg-accc-mob-scrn {
    margin-left: 12px;
}
/* Mobile Nav Links */
.mobile-nav {
    display: flex;
    width: 100%;
    background: var(--main-background);
    padding: 7px 13px;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 99;
    bottom: -1px;
    right: 0;
    min-height: 73px;
    border-radius: 25px 25px 0 0;
    display: none;
}
.mobile-nav-links {
    display: flex;
    width: 100%;
    padding: 10px 10px;
    border-radius: 25px;
    align-content: center;
    align-items: center;
    justify-content: space-around;
}
.mobile-nav-links a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    align-content: flex-start;
    color: var(--font-light-color);
    font-size: 14px;
    font-weight: 600;
}
.mobile-nav-links a i {
    font-size: 20px;
    color: var(--font-light-color);
}
.mobile-nav-links a.active {
    color: var(--main-color);
}
.mobile-nav-links a.active i {
    font-weight: bold;
    color: var(--main-color);
}
/* hd-left */
.hd-left {
    display: flex;
    margin-right: 30px;
    position: relative;
    align-items: center;
    gap: 5px;
}
.reg-log-buttons {
    padding: 0;
    margin-left: 0;
}
.reg-log-buttons a {
    border-radius: 50px;
    background: var(--main-color);
    display: flex;
    padding: 15px 26px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--font-light-color);
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 166.667% */
}
.reg-log-buttons a:hover {
    background: #117b72;
    color: var(--font-light-color);
}
.arrow-rt {
    transform: rotate(37deg);
}
.hd-profile-button .drop-profile-btn {
    width: 35px;
    height: 35px;
    padding: 0;
}
.drop-profile-btn img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
}

/* Dashboard Navbar Links || Mobile Screens */

.dashboard-sidebar {
    width: 80%;
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(
            90deg,
            var(--main-background) 0%,
            var(--main-background) 72.36%
        );
}
body[data-theme-value="default-theme"] .dashboard-sidebar {
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(90deg, #371b30 0%, #1f102e 72.36%);
}

.dashboard-sidebar .navbar-nav {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
}
.dashboard-sidebar .sidebar-head {
    text-align: center;
    padding: 10px 0 30px 0;
    border-bottom: 1px solid var(--main-background);
    margin-bottom: 15px;
}
.dashboard-sidebar .prf-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f6f6f6;
    border: 1px solid #c6c6c6;
    overflow: hidden;
    margin: auto;
}
.dashboard-sidebar .prf-img img {
    width: 100%;
    height: 100%;
}
.dashboard-sidebar .prf-titles {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.dashboard-sidebar .prf-titles h3 {
    text-align: center;
    font-size: 17px;
    color: var(--font-light-color);
    font-weight: 700;
}
.dashboard-sidebar .prf-titles h5 {
    font-size: 14px;
    color: var(--font-light-color);
}
/* Links */
.dashboard-sidebar .nav-item .pg-link {
    display: flex;
    width: 100%;
    padding: 12px 25px 12px 15px;
    color: var(--font-light-color);
    font-size: 15px;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    align-items: center;
    flex-direction: row;
    font-weight: 700;
}
.dashboard-sidebar .nav-item .pg-link i {
    width: 28px;
    height: 27px;
    font-size: 19px;
    color: var(--font-light-color);
    margin-left: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.dashboard-sidebar .sidebar-pages .pg-link.active {
    color: var(--main-color);
}
.dashboard-sidebar .sidebar-pages .pg-link.active I {
    background: var(--secondary-color);
    color: var(--font-light-color);
    font-size: 13px;
}
.dashboard-sidebar .site-nav-pgs {
    padding-right: 25px;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px solid #fea31c14 !important;
}
.dashboard-sidebar .site-nav-pgs h5 {
    font-size: 15px;
    color: var(--secondary-color);
    margin-bottom: 10px;
    font-weight: 500;
}
/* notifications */
.notifications.notify-mobile-scrn {
    margin-left: 20px;
}
.notifications.notify-mobile-scrn .notification_dd {
    right: auto;
    left: -40px;
    width: 330px;
}
.notifications.notify-mobile-scrn .notification_dd:before {
    left: 50px;
    right: auto;
}
.notify-btn {
    width: 45px;
    height: 45px;
    background: #fff0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: var(--font-light-color);
    position: relative;
}
.notify-btn.notify-active::after {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: var(--secondary-color);
    position: absolute;
    top: 7px;
    right: 8px;
    border: 3px solid var(--main-background);
}
.notify-btn:hover {
    color: var(--font-light-color);
}
.notify-btn i {
    font-size: 22px;
    color: var(--font-light-color);
}
.notifications {
    position: relative;
}
.notifications .notification_dd {
    position: absolute;
    top: 58px;
    left: -14px;
    user-select: none;
    background: #fff;
    border: 1px solid #c7d8e200;
    width: 350px;
    height: auto;
    display: none;
    border-radius: 3px;
    box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.125),
        -10px -10px 35px rgba(0, 0, 0, 0.125);
    border-radius: 20px;
}
.notifications .notification_dd:before {
    content: "";
    position: absolute;
    top: -18px;
    left: 25px;
    border: 10px solid;
    border-color: transparent transparent #fff transparent;
}
.notification-list {
    overflow: hidden;
    border-radius: 20px;
}
.notifications .notification_dd li {
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    padding: 12px 15px;
}
.notifications .notification_dd li:last-child {
    border-bottom: 0px;
}
.notifications .notification_dd li .notify_sts_icon {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notifications .notify_sts_icon i {
    font-size: 21px;
}
.notifications .sts-success .notify_sts_icon {
    border: 1px solid #19875524;
    background: #19875524;
}
.notifications .sts-success .notify_sts_icon i {
    color: #1a9e61;
}
.notifications .sts-failed .notify_sts_icon {
    border: 1px solid#d248481c;
    background: #d248481c;
}
.notifications .sts-failed .notify_sts_icon i {
    color: #d24848;
}
.notifications .sts-msg .notify_sts_icon {
    border: 1px solid#2c38521c;
    background: #2c38521c;
}
.notifications .sts-msg .notify_sts_icon i {
    color: #2c3852;
}
.notifications .sts-pymnt .notify_sts_icon {
    border: 1px solid#d5b18a30;
    background: #d5b18a30;
}
.notifications .sts-pymnt .notify_sts_icon i {
    color: #ca751b;
}
.notifications .notification_dd li .notify_data {
    margin: 0 13px;
    width: 280px;
}
.notifications .notify-title {
    flex: 80%;
}
.notifications .notify-title h5 {
    color: #000;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}
.notifications .notify-title h5 a {
    font-size: 13px;
    font-weight: 800;
    color: var(--main-color);
}
.navbar .notifications.active .notification_dd {
    display: block;
}
.navbar .notifications.active .notification_dd .notification_ul {
    max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
}
.navbar
    .notifications.active
    .notification_dd
    .notification_ul::-webkit-scrollbar {
    width: 4px;
    display: none;
}
.navbar
    .notifications.active
    .notification_dd
    .notification_ul::-webkit-scrollbar-thumb {
    background-color: rgba(180, 180, 180, 0.812);
}
.notifications-btn {
    padding: 12px 15px;
    box-shadow: 0px 0px 20px 0px #c6c6c65e;
}
.notifications-btn .noti-btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 14px;
    background: color-mix(in srgb, var(--main-color), #0000 92%);
    color: var(--main-color);
    text-align: center;
    width: 100%;
    font-weight: 700;
}
.notifications-btn .noti-btn:hover {
    background: var(--main-color);
    color: var(--font-light-color);
}
/* Breadcrumb */
.breadcrumb {
    background: rgba(255, 255, 255, 0.58);
    display: flex;
    padding: 5px 10px;
    align-items: center;
    gap: 12px;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    border: 0;
}
.breadcrumb a {
    color: rgba(0, 0, 0, 0.38);
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 14px */
}
.breadcrumb-item.active {
    color: #000;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 171.429% */
}
.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 12px;
    color: #b2b9c0;
    content: var(--bs-breadcrumb-divider, "/");
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 0;
}

/*==========================================*/
/* CSS Pages
/*==========================================*/
/*--------------------------------*/
/* Register Steps Pages CSS
/*--------------------------------*/
.acc-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    justify-content: center;
}
.acc-item-bx {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    padding: 25px 20px;
    border-radius: 20px;
    border: 1px solid #e1e1e1;
    background: #fefefe;
    flex: 0 0 23%;
}
.typ-img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: rgba(235, 230, 239, 0.57);
    display: flex;
    justify-content: center;
    align-items: center;
}
.typ-img img {
    width: 45px;
    height: 45px;
}
.acc-item-bx h3 {
    color: #000;
    text-align: center;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}
.acc-item-bx:hover {
    border: 1px solid var(--main-color);
    background: #ebe6ef;
}
.acc-item-bx:hover h3 {
    color: var(--main-color);
}
.acc-item-bx:hover .typ-img {
    background: #fff;
}

.stps-form-card {
    padding: 35px 70px;
}
.head-title .head-title-crd {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 35px 0;
}
.head-title .head-title-crd a {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 1px solid #6e6e6e;
    color: #6e6e6e;
    background: rgba(232, 232, 232, 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.head-title .head-title-crd a:hover {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background: #47068914;
}
.head--txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.head--txt h3 {
    color: var(--main-color);
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 21px;
    font-weight: 800;
}
.head--txt h5 {
    color: #696969;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 18px;
}
.stp-mn-ttl {
    border-radius: 10px;
    border: 1px solid #e8e2ed;
    background: rgba(72, 6, 137, 0.06);
    display: flex;
    padding: 14px 18px;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}
.stp-mn-ttl h3 {
    color: #141522;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}
.stp-mn-ttl i {
    color: #49088a;
    font-size: 22px;
    vertical-align: middle;
    margin-left: 8px;
}
.stp-mn-ttl h5 {
    color: rgba(27, 29, 31, 0.9);
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}
.flex-2 {
    display: flex;
    gap: 15px;
}
.imp-inp {
    color: #e02828;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}
.stepForm-step p {
    margin-top: 35px;
    padding-left: 15px;
}
.stepForm-row {
    display: flex;
    justify-content: space-between;
}
.stepForm-row:before {
    top: 4px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 85%;
    left: 0;
    right: 0;
    margin: auto;
    height: 1.5px;
    background-color: #cccccc5e;
    z-index: 0;
}
.stepForm {
    display: table;
    width: 100%;
    position: relative;
    margin-bottom: 5px;
    padding: 15px 10px;
    border-radius: 15px;
}
.stepForm-step {
    position: relative;
    padding: 0 10px;
}
.stepForm-bg {
    background: var(--main-background);
}
.stepForm-bg .stepForm-step {
    background: var(--main-background);
}
.stepForm-step .btn {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepForm-step .tab-done {
    color: var(--secondary-color) !important;
    font-weight: 700;
}
.stepForm-step .tab-done .stp-no {
    color: var(--font-light-color);
    background: #00000000;
    border: 1px solid #ffffff;
}
.stp-done {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    color: var(--font-light-color);
    align-content: center;
    justify-content: center;
    align-items: center;
    font-family: Arial;
}
.stp-done i {
    font-size: 14px;
}
.stepForm-step .btn-stp-active.tab-done .stp-no {
    display: flex;
}
.stepForm-step .btn-stp-active.tab-done .stp-done {
    display: none;
}
.stepForm-step .tab-done .stp-done {
    display: flex;
}
.stepForm-step .tab-done .stp-no {
    display: none;
}
.tab-done {
    position: relative;
}
/* .tab-done::before{
    content: "";
    width: 150%;
    height: 1px;
    background: var(--secondary-color);
    position: absolute;
    left: 107%;
    top: 55%;
    z-index: 1;
} */
.stepForm-step:first-child .tab-done::before {
    display: none;
}
.stepForm-step h4 {
    margin-top: 40px;
    font-size: 14px;
    color: #262626;
    font-weight: 600;
}
.stepForm-step button {
    color: var(--font-light-color);
}
.stepForm-step a,
.stepForm-step button {
    color: var(--font-light-color);
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 21px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 0;
    align-items: baseline;
}
body[data-theme-value="default-theme"] .stepForm-step a,
body[data-theme-value="default-theme"] .stepForm-step button {
    color: #9e9e9e;
}
body[data-theme-value="default-theme"] .stepForm-step a:hover,
body[data-theme-value="default-theme"] .stepForm-step button:hover {
    color: var(--font-light-color);
}
.stepForm-step a:hover,
.stepForm-step button:hover {
    color: var(--font-light-color);
}
.stepForm-step .stp-no {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid #bbb;
    background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    flex: none;
}
.btn-check:focus + .btn,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 109, 253, 0);
}

.stepForm-row.stepForm-step .btn-stp-active {
    background: #492a6600;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}
.stepForm-bg .stepForm-row.stepForm-step .btn-stp-active {
    color: var(--secondary-color);
}

/* Step Gray Color */
.stepForm-gray {
    border: 1px solid #e7e7e7;
    background: #f6f6f6;
}
.stepForm-gray .stepForm-step {
    background: #f6f6f6;
}
.stepForm-gray .stepForm-row .stepForm-step .btn-stp-active {
    background: #492a6600;
    color: #000000;
}
.stepForm-gray .stepForm-step .tab-done .stp-no {
    color: #000;
    background: #00000000;
    border: 1px solid #000;
}
/* // Step Gray Color */

#step-3 {
    overflow-x: hidden;
}
.has-error input,
.has-error select,
.has-error textarea {
    border: 1px solid #e02828 !important;
}
.main-form .has-error input,
.main-form .has-error textarea,
.has-error .nice-select.select-options {
    border: 1px solid #e02828 !important;
    background-color: #c0307308;
}
.invalid-feedback {
    color: #e02828;
    margin-top: 8px;
    font-weight: 600;
    font-size: 13px;
}
.show-password-btn .toggle-password {
    position: absolute;
    left: 17px;
    top: 16px;
    cursor: pointer;
}
.stepForm-row .btn[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 1;
}
.has-error .invalid-feedback {
    /* display: block; */
    display: inline-block;
    width: 100%;
}
.steps-content-sec {
    padding-top: 10px;
    min-height: 300px;
}
.btn-stp-active {
    display: block;
}
/* upload profile image */
.upload-img-item {
    position: relative;
    display: inline-block;
    margin: auto;
}
.upload-img-item .preview-p-img {
    width: 110px;
    height: 110px;
    background: #f1fbff7d;
    border: 0px solid #181818;
    overflow: hidden;
    position: relative;
    margin: auto;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 8px #e8eafd7a;
}
.upload-img-item .preview-p-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.upload-img-item .customFile {
    width: 45px;
    height: 45px;
    background: #f3f4fe;
    padding: 4px 9px;
    border-radius: 50%;
    cursor: pointer !important;
    border: 4px solid #ffffff;
    position: absolute;
    bottom: -6px;
    right: -8px;
    z-index: 2;
}
.upload-img-item .customFile img {
    width: 100%;
    height: 100%;
}
.upload-img-item .customFile input {
    width: 100%;
    cursor: pointer;
}
.customFile input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 88888;
    width: 100%;
    height: 35px;
    cursor: pointer;
    opacity: 0 !important;
    color: #000000;
}

.upload-file {
    background-color: #f8f9fc;
    border: 1px solid #e2e9f3;
    border-radius: 6px;
    height: 40px;
    width: 500px;
    color: #565a90;
    padding-right: 28px !important;
}
.upload-file::file-selector-button {
    border: none;
    border-radius: 4px;
    color: #586980;
    background-color: #e4eaef;
    border: 1px solid #d9e2e9;
    height: 30px;
    cursor: pointer;
    transition: all 0.25s ease-in;
    cursor: pointer;
    margin-top: -3px;
    padding: 5px 15px;
    position: relative;
    right: -3px;
}
.upload-file::file-selector-button:hover {
    background-color: #e4eaef;
    color: #000;
    transition: all 0.25s ease-in;
}
.txt-center {
    text-align: center;
}
.up-profile-img {
    text-align: center;
    margin-bottom: 40px !important;
}
.stp-frm-btn {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid#d5d5d5;
    padding-top: 27px;
    margin-top: 22px;
}
/*Bootstrap Calendar*/
.datepicker {
    border-radius: 0;
    padding: 0;
}
.datepicker-days table thead,
.datepicker-days table tbody,
.datepicker-days table tfoot {
    padding: 10px;
    display: list-item;
}
.datepicker-days table thead,
.datepicker-months table thead,
.datepicker-years table thead,
.datepicker-decades table thead,
.datepicker-centuries table thead {
    background: var(--main-color);
    color: var(--font-light-color);
    border-radius: 0;
}
.datepicker-days table thead tr:nth-child(2n + 0) td,
.datepicker-days table thead tr:nth-child(2n + 0) th {
    border-radius: 3px;
}
.datepicker-days table thead tr:nth-child(3n + 0) {
    text-transform: uppercase;
    font-weight: 300 !important;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
    padding: 11px 13px;
}
.datepicker-months table thead td,
.datepicker-months table thead th,
.datepicker-years table thead td,
.datepicker-years table thead th,
.datepicker-decades table thead td,
.datepicker-decades table thead th,
.datepicker-centuries table thead td,
.datepicker-centuries table thead th {
    border-radius: 0;
}
.datepicker td,
.datepicker th {
    border-radius: 50%;
    padding: 0 12px;
}
.datepicker-days thead tr,
.datepicker-days thead th {
    color: var(--font-light-color);
}
.datepicker-days table thead,
.datepicker-months table thead,
.datepicker-years table thead,
.datepicker-decades table thead,
.datepicker-centuries table thead {
    background: var(--main-color);
    color: var(--font-light-color);
    border-radius: 0;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-image: none;
}
.datepicker .prev,
.datepicker .next {
    color: rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    width: 37px;
    height: 37px;
}
.datepicker .prev:hover,
.datepicker .next:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.99);
    font-size: 21px;
}
.datepicker .datepicker-switch {
    font-size: 18px;
    font-weight: 400;
    transition: 0.3s;
    color: var(--font-light-color);
}
.datepicker .datepicker-switch:hover {
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
.datepicker table tr td span {
    border-radius: 2px;
    margin: 3%;
    width: 27%;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-color: var(--main-color);
    background-image: none;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td.active.active {
    background-color: var(--secondary-color);
}
.datepicker-dropdown:after {
    border-bottom: 6px solid var(--main-color);
}
.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.datepicker-dropdown.datepicker-orient-top:before {
    border-top: 7px solid rgba(0, 0, 0, 0.1);
}
.datepicker-days,
.datepicker-months,
.datepicker-years {
    border-radius: 10px;
    overflow: hidden;
}
.datepicker-dropdown {
    top: auto;
    left: auto;
}
.dropdown-menu.datepicker {
    right: auto;
    left: 0;
    float: none;
    text-align: right;
    margin-top: 53px;
    margin-left: 10px;
    border-radius: 10px;
}
/* ====================== Register Completed Section ====================== */
.com-icon i {
    font-size: 72px;
    margin-bottom: 40px;
    color: #23a26d;
    border-radius: 100px;
    border: 20px solid #23a26d21;
}
.card-btn {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #dfdfdf;
}
.comp-box {
    padding: 50px 40px;
    text-align: center;
    position: relative;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(95, 95, 95, 0.02);
}
.comp-box .log-txt h3 {
    color: #000;
    text-align: center;
    font-size: 25px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px;
    margin-bottom: 17px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}
.comp-box .log-txt h5 {
    color: #696969;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}
.comp-box .ord-no-sts {
    background: #eee;
    display: inline-block;
    padding: 12px 29px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 14px;
}
.btn-sec {
    padding: 15px 0;
    margin-top: 10px;
}
.btn-sec .btn {
    display: inline-flex;
}

/* ====================== Login Page  ====================== */
/* Login Page */
.login-area {
    padding: 20px 0 30px;
}
.login-box {
    padding: 50px 45px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 39px;
}
.log-header {
    align-items: center;
}
.login-box .btn {
    width: 100%;
    margin: 12px 0;
    padding: 15px 12px;
    font-size: 14px;
}
.log-ft {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    align-items: center;
}
.log-ft .form-check-label {
    flex: none;
    margin-bottom: 0;
}
.frgt-pass {
    font-size: 15px;
    color: #5a5a5a;
    text-align: left;
    padding: 0;
}
.frgt-pass:hover {
    color: #000;
}
.dnt-hv-acc {
    padding: 30px 10px 10px;
    text-align: center;
}
.dnt-hv-acc h5 {
    font-size: 15px;
    color: #696969;
}
.dnt-hv-acc a {
    color: var(--main-color);
    text-decoration-line: underline;
    margin-right: 4px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}

/*-================================--*/
/* Dashboard Page
/*-================================--*/
@media (min-width: 1400px) {
    .dashboard-area .container,
    .dashboard-area .container-lg,
    .dashboard-area .container-md,
    .dashboard-area .container-sm,
    .dashboard-area .container-xl,
    .dashboard-area .container-xxl {
        max-width: 1470px;
    }
}
.dashboard-area {
    padding-bottom: 20px;
}
.dsh-header {
    min-height: 180px;
    padding: 60px 45px 25px 45px;
    position: relative;
}
.bg-sec {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 320px;
    z-index: 1;
    background: var(--main-background);
}
.bg-sec::after {
    content: "";
    width: 100%;
    height: 100%;
    /* background: rgba(21, 8, 34, 0.69); */
    background: linear-gradient(
        97deg,
        #392d2347 2.69%,
        #0000002b 64.4%,
        #1b1225d4 107.58%
    );
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.dsh-header-txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    position: relative;
    z-index: 3;
}
.dsh-header-txt h3 {
    font-size: 35px;
    color: var(--secondary-color);
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-weight: 700;
}
.dsh-header-txt h5 {
    font-size: 16px;
    color: var(--font-light-color);
    text-align: right;
    font-weight: 400;
}
.dashboard-container {
    position: relative;
    z-index: 1;
}
.dashboard-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: nowrap;
}
.cardBox {
    border-radius: 20px;
    background: #fff;
    padding: 22px 20px;
}
.main-sidebar {
    border-radius: 20px;
    background: #fff;
    padding: 22px 16px;
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.sidebar-head {
    text-align: center;
    padding: 10px 0 30px 0;
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 15px;
}
.prf-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f6f6f6;
    border: 1px solid #c6c6c6;
    overflow: hidden;
    margin: auto;
}
.prf-img img {
    width: 100%;
    height: 100%;
}
.prf-titles {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.prf-titles h3 {
    text-align: center;
    font-size: 17px;
    color: #000;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-weight: 700;
}
.prf-titles h5 {
    font-size: 14px;
    color: #000;
}
.prf-titles .ttl-spn {
    border-radius: 6px;
    background: var(--main-color);
    padding: 5px 16px;
    color: var(--font-light-color);
    font-size: 12px;
    margin-top: 1px;
}
.sidebar-pages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.sidebar-pages .pg-link {
    display: flex;
    width: 100%;
    padding: 12px 10px;
    color: #000;
    font-size: 15px;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    align-items: center;
    flex-direction: row;
    font-weight: 700;
}
.sidebar-pages .pg-link:not(:last-child) {
    border-bottom: 1px solid#EAEAEA;
}
.sidebar-pages .pg-link i {
    width: 28px;
    height: 27px;
    font-size: 19px;
    color: #000;
    margin-left: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.sidebar-pages .pg-link.active {
    color: var(--main-color);
}
.sidebar-pages .pg-link.active I {
    background: var(--secondary-color);
    color: var(--font-light-color);
    font-size: 13px;
}
/* Main Page Title */
.main-page-title {
    background: #e8e8e8;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    min-height: 50px;
    line-height: 23px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.main-page-title h3 {
    text-align: right;
    font-size: 16px;
    line-height: 100%;
    color: #141522;
    position: relative;
    padding-right: 21px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-weight: 800;
}
.main-page-title h3::before {
    content: "\f0d9";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px;
}
/* page-content */
.page-content {
    width: 100%;
    min-height: 400px;
}
.pg-ttl-lft {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    gap: 13px;
}
.pg-ttl-lft .btn {
    font-size: 12px;
    min-height: 45px;
}
.clndr-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.clndr-group .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
}
.clndr-group label {
    color: #5a5a5a;
    font-size: 14px;
    font-weight: 400;
}
.pg-ttl-lft .form-control {
    min-height: 40px;
}
.pg-ttl-lft .datepicker-dropdown.datepicker-orient-left:after,
.pg-ttl-lft .datepicker-dropdown.datepicker-orient-left:before {
    left: 30px;
    right: auto;
}
.mob-show {
    display: none;
}
.table-box {
    border: 1px solid #ddd;
    border-radius: 14px;
    margin-top: 20px;
}
.table-head-bx {
    padding: 15px 16px;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.table-head-bx h3 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-weight: 800;
}
.table-head-bx h3 .ttl-spn {
    color: var(--main-color);
}
.main-table {
    padding: 10px 0;
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    font-size: 14px;
    font-weight: 500;
    color: #636363;
}
.dataTables_length {
    display: none;
}
.dataTables_filter {
    display: none;
}
.dataTables_wrapper .dataTables_info {
    padding-left: 25px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}
.dataTables_wrapper .dataTables_paginate {
    padding-right: 5px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}
table tbody th,
table tbody td {
    padding: 8px 10px;
}
.pg-ttl-lft label {
    margin: 0;
}
.pg-ttl-lft .srch-grb-iptn {
    position: relative;
    margin: 0;
}
.pg-ttl-lft .srch-grb-iptn input {
    padding-right: 34px;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    background: #f5f5f5;
    min-height: 40px;
}
.pg-ttl-lft .srch-grb-iptn .search-input {
    position: absolute;
    top: 13px;
    right: 19px;
    color: #656565;
    font-size: 15px;
}
table.display tbody tr.even > .sorting_1,
table.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: #f9f9f900;
}
table.stripe tbody tr.odd,
table.display tbody tr.odd {
    background-color: #f2f2f2;
}
table tbody th,
table tbody td {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #000;
    height: 33px;
    vertical-align: middle;
    font-weight: 500;
    text-align: right;
}
table thead th,
table thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #dad8dadd;
    color: #151515;
    text-align: right;
    font-size: 14px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    height: 33px;
}
table.no-footer {
    border-bottom: 1px solid #cbcbcb;
    margin-bottom: 12px;
}
table.dataTable thead th,
table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #cbcbcb;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-repeat: no-repeat;
    background-position: center left;
    position: relative;
}
table tbody th.dt-body-center,
table tbody td.dt-body-center {
    text-align: right;
    padding-right: 18px;
}
table.display tbody tr:hover > .sorting_1,
table.order-column.hover tbody tr:hover > .sorting_1 {
    background-color: #eaeaea00;
}
table .form-check-input {
    width: 18px;
    height: 18px;
    border: 0;
    background: #e2e2e2;
    border: 1px solid rgb(0 0 0 / 8%);
}
.sorting_disabled {
    max-width: 25px;
}
.table > :not(:first-child) {
    border-top: 0;
}
/* Table Btns */
.table-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 5px;
}
.table-btns .tb-btn {
    width: 38px;
    height: 36px;
    background: #ddd0;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 6px;
    border: 1px #e6e6e6;
    background: #fff;
}
.table-btns .tb-btn:hover {
    color: var(--secondary-color);
}
.tb-btn.delete-btn-icon {
    color: #df3939;
}
.tb-btn.download-btn-icon {
    color: var(--secondary-color);
}
.tb-btn-text {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 100%;
}
.tb-btn-text i {
    font-size: 16px;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f1f1f1;
}
table.row-border tbody th,
table.row-border tbody td,
table.display tbody th,
table.display tbody td {
    border-top: 1px solid #ddd;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: #f9f9f900;
}
table td a {
    color: var(--main-color);
}
table td a:hover {
    color: var(--secondary-color);
}
.paginate_button {
    background: #eee;
    border-radius: 6px;
    width: auto;
    height: 33px;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    line-height: 22px;
    border: 1px solid#eee;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #000;
    background: #eee;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #e2e2e2;
    color: #333333 !important;
    border: 1px solid#e2e2e2;
}
.opt-crd {
    position: relative;
}
.options-list.dropdown-menu {
    background-color: #fff;
}
.options-list {
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 8;
    border-radius: 10px;
    width: 160px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.options-list .btn {
    color: black;
    padding: 14px 16px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}
.options-list .btn:hover {
    color: var(--secondary-color);
}
.options-list .btn i {
    font-size: 17px;
}
.options-list .btn:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
/* Notifications page -- table */
.read-all-btn {
    width: 100%;
    padding: 2px 15px 10px;
    border-bottom: 1px solid #d5d5d5;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.read-btn {
    border-radius: 10px;
    background: #eee;
    color: #454545;
    font-size: 12px;
    display: flex;
    padding: 10px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    min-width: 171px;
    flex-direction: row;
}
.read-btn i {
    font-size: 16px;
    color: #5c5c5c;
}
.sle-all {
    position: absolute;
    margin-right: 0;
    top: 20px;
    right: 48px;
}
.noti-txt-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 2px 0;
}
.noti-txt-item .img-icon {
    width: 38px;
    height: 38px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.noti-txt-item .img-icon i {
    font-size: 20px;
    color: #000;
}
.noti-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.noti-txt {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.noti-date-time {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 9px;
}
.noti-date-time h5 {
    display: flex;
    gap: 5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #000;
}
.noti-date-time h5 i {
    font-size: 13px;
    color: #000;
}
.noti-txt-item .img-icon.order-icon {
    border-radius: 100px;
    border: 1px solid rgba(50, 112, 206, 0.12);
    background: rgba(50, 112, 206, 0.11);
    color: #3270ce;
}
.noti-txt-item .img-icon.order-icon i {
    color: #3270ce;
}
.noti-txt-item .img-icon.done-icon {
    border-radius: 100px;
    border: 1px solid rgba(35, 162, 109, 0.12);
    background: rgba(35, 162, 109, 0.11);
}
.noti-txt-item .img-icon.done-icon i {
    color: #23a26d;
}
.noti-txt-item .img-icon.rejected-icon {
    border-radius: 100px;
    border: 1px solid rgba(238, 73, 70, 0.12);
    background: rgba(238, 73, 70, 0.11);
}
.noti-txt-item .img-icon.rejected-icon i {
    color: #ee4946;
}
.unreadable-item {
    background-color: #f5f5f5 !important;
}
.unreadable-item .noti-txt {
    font-weight: 600;
}
/* Notification Details Page */
.notif-dt-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 12px;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    background: #f2f2f2;
    border: 1px solid #e5e5e5;
}
.notif-dt-title-txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 9px;
}
.notif-dt-title-txt h5 {
    color: #727272;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.notif-dt-title-txt h3 {
    color: #1e1e1e;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
}
.notif-dt-btn .btn {
    display: flex;
    padding: 8px 15px;
    border-radius: 12px;
    border: 1px #e3e3e3;
    background: #fff;
    color: #454545;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
}
.notif-dt-btn .btn:hover {
    background: var(--main-color);
    color: var(--font-light-color);
}
.notif-dt-p {
    padding: 20px 11px;
}
.notif-dt-p p {
    line-height: 26px;
}
.notif-dt-p .p-btn {
    color: var(--main-color);
    padding: 0;
}
/* Status style */
.status {
    position: relative;
    background: #ddd;
    padding: 6px 24px 6px 15px;
    border-radius: 100px;
    color: #151515;
    font-weight: 700;
    font-size: 11px;
    border: 1px solid #ddd0;
    line-height: initial;
    display: inline-block;
    align-items: center;
}
.status::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #666464;
    position: absolute;
    right: 12px;
    /* top: 11px; */
    top: 38%;
    border-radius: 50%;
}
.sts-done {
    color: #00aa4e;
    background: #00aa4e12;
    border-color: #00aa4e;
}
.status.sts-done::before {
    background: #00aa4e;
}

.sts-pending {
    color: #f2841e;
    background: #f2841e12;
    border-color: #f2841e;
}
.status.sts-pending::before {
    background: #f2841e;
}
.sts-under_review {
    color: #3270ce;
    background: #3270ce12;
    border-color: #3270ce;
}
.status.sts-under_review::before {
    background: #3270ce;
}

.sts-rejected {
    color: #ee4946;
    background: #ee494612;
    border-color: #ee4946;
}
.status.sts-rejected::before {
    background: #ee4946;
}
.sts-waiting {
    color: #5d2396;
    background: #5d239612;
    border-color: #5d2396;
}
.status.sts-waiting::before {
    background: #5d2396;
}
/* Modal Styles */
@media (min-width: 576px) {
    .modal-dialog {
        margin: 9rem auto;
    }
    .extra-lg-modal-card .modal-dialog {
        max-width: 990px;
    }
}
@media (min-width: 576px) {
    .lg-modal-card .modal-dialog {
        max-width: 650px;
        margin: 1.75rem auto;
    }
    .extra-lg-modal-card .modal-dialog {
        max-width: 990px;
    }
}
.lg-modal-card .modal-content {
    padding: 20px 25px 23px 25px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0px 0px 9.3px 0px rgba(0, 0, 0, 0.2);
}
.modal-header {
    border-bottom: 1px solid #dee2e600;
    padding: 0;
    padding-bottom: 15px;
}
.modal-header .btn-close {
    margin-left: 0;
    opacity: 1;
    background-color: #00000000;
    border-radius: 50px;
    width: 14px;
    height: 14px;
    font-size: 7px;
    position: absolute;
    left: 25px;
    top: 28px;
    border: 1px solid rgb(0 0 0 / 22%);
    color: #626262;
}
.modal-body {
    padding: 0;
}
.modal-title {
    text-align: right;
    width: 100%;
    color: #000000;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
    position: relative;
    padding-right: 18px;
}
.modal-title::before {
    content: "\f0d9";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    position: absolute;
    right: 0;
    top: 0px;
    font-size: 17px;
}

.modal-content {
    padding: 40px 21px 30px 21px;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0px 0px 9.3px 0px rgba(0, 0, 0, 0.2);
}
.modal-txt {
    margin-bottom: 20px;
}
.modal-txt h3 {
    color: #000;
    font-size: 18px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    margin-bottom: 15px;
}
.modal-txt h5 {
    color: #3b3b3b;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 23px;
}
.modal-btns {
    display: flex;
    gap: 10px;
}
.center-items {
    text-align: center;
    justify-content: center;
}
.right-items {
    text-align: right;
    justify-content: right;
}
.left-items {
    text-align: left;
    justify-content: left;
}
.border-top {
    border-top: 1px solid #dee2e6 !important;
    padding-top: 15px;
}
.iBan-txt {
    position: absolute;
    top: 15px;
    left: 17px;
    font-family: "Inter";
    font-size: 13px;
    font-weight: 700;
    color: #000;
}
.form-group .iBan-input input {
    text-align: left;
    padding-left: 65px;
    font-family: "Inter";
    direction: ltr;
}
.dsh-order-steps .stps-form-card {
    padding: 35px 160px;
}
.modal-form input {
    width: 100%;
}
/* Order Details */
.in-ttl {
    display: flex;
    padding: 15px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #e7e7e7;
    border-radius: 13px 13px 0 0;
    flex-direction: row;
    justify-content: space-between;
}
.in-ttl h3 {
    color: #141522;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
}
.in-ttl .btn {
    font-size: 12px;
    padding: 9px 15px;
    min-height: 44px;
}
.bd-cont-bx {
    border: 1px solid #e4e4e4;
    border-radius: 13px;
    margin-bottom: 15px;
}
.prf-info-list {
    margin-bottom: 5px;
    padding-top: 10px;
}
.prf-info-list ul li {
    display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 12px 13px;
}
.odd {
    background: #f1f1f1 !important;
}
.odd td {
    border-top: 1px solid #ddd;
}
.ord-prc {
    border-top: 1px dashed #b7b7b7;
    margin-top: 27px;
    padding-top: 17px !important;
}
.prf-info-list ul li h4 {
    color: #727272;
    text-align: right;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    min-width: 180px;
}
.ord-prc h4 {
    color: #000 !important;
}
.prf-info-list ul li h5 {
    color: #1e1e1e;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: 27px;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 15px;
}
.prf-info-list ul li h5 a {
    color: #000;
    text-decoration-line: underline;
}
.cop h5 {
    display: flex;
    flex-direction: row !important;
}
.grn {
    color: #10998d !important;
}
.pdf-file {
    color: #eb5757;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}
.pdf-file i {
    font-size: 21px;
    color: #eb5757;
    vertical-align: middle;
    margin-left: 3px;
}
.pdf-file span {
    text-decoration-line: underline;
}
.pdf-file:hover {
    color: #d15555;
}
.hreo-msg {
    border-radius: 18px;
    /* background: #2C1F39; */
    background: var(--main-background);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.hreo-msg::after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(
        97deg,
        #f5f5f514 2.69%,
        #4e4e4e17 64.4%,
        #2727277d 107.58%
    );
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.hreo-msg * {
    position: relative;
    z-index: 2;
}
.hreo-msg .hr-msg-test {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}
.hreo-msg .hr-msg-test h3 {
    font-size: 21px;
    color: var(--font-light-color);
    text-align: right;
    font-weight: 600;
}
.hreo-msg .hr-msg-test h5 {
    font-size: 14px;
    color: var(--font-light-color);
    text-align: right;
    font-weight: 400;
}
.hr-msg-btns {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 11px;
}
.hr-msg-btns .btn {
    display: flex;
    padding: 11px 22px;
    color: var(--font-light-color);
    background: #fff0;
    gap: 10px;
    border: 1px solid #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    flex-direction: row;
}
.hr-msg-btns .btn:hover {
    background: #ffffff1a;
    border: 1px solid #ffffff1a;
}
.btn.yl-col {
    background: var(--secondary-color);
    color: var(--font-light-color);
    border: 1px solid var(--secondary-color);
}
.hr-msg-btns .btn i {
    font-size: 19px;
}
.btn.yl-col:hover {
    background: #d1902f;
    color: var(--font-light-color);
    border: 1px solid #d1902f;
}
.fixed-sec {
    position: fixed;
    bottom: 0px;
    margin: auto;
    width: 940px;
    left: 9%;
}
.hreo-msg.flex-items {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex: auto;
    padding: 15px 26px 15px 15px;
}
.hreo-msg.flex-items .hr-msg-test h3 {
    font-size: 16px;
}
/* preview pdf */
.prev-pdf {
    margin: auto;
    text-align: center;
}
/* Copy Button */
.copy-button {
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}
.copy-button i {
    font-size: 17px;
    vertical-align: middle;
}
.copy-button span {
    color: #e02828;
    margin-right: 5px;
    transition: 3s ease;
}
/*--------------------------------*/
/* Chat Page & Side box
/*--------------------------------*/
.chatButton {
    cursor: pointer;
}
#chatBox {
    position: fixed;
    /* bottom: -100%;
    left: 10px; */
    left: -40%;
    bottom: 2px;
    width: 480px;
    height: 95%;
    margin-bottom: 2px;
    margin-left: 5px;
    background-color: white;
    box-shadow: 6px -7px 20px rgb(57 57 57 / 16%);
    border-radius: 18px 18px 0 0;
    transition: left 2s;
    z-index: 99999999;
    border: 1px solid #d4d4d4;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
}
.chatHeader {
    background-color: #ececec;
    color: var(--font-light-color);
    padding: 15px 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
}
.chatHeader h4 {
    color: #000;
    font-size: 15px;
    font-weight: 600;
}
#closeButton {
    background: none;
    color: #777777;
    font-size: 20px;
    cursor: pointer;
    width: 29px;
    height: 29px;
    border: 1px solid #777;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    padding: 0;
    align-items: center;
}
.chatMessages {
    flex: 1;
    padding: 10px 18px 10px 12px;
    overflow-y: auto;
    background-color: #f1f1f1;
    height: 100%;
}
.message {
    margin: 10px 0;
    max-width: 75%;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
}
.self {
    color: black;
    border: 1px solid rgba(72, 6, 137, 0.1);
    background: rgba(72, 6, 137, 0.1);
    padding: 12px 15px 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.user-msg {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    max-width: 98%;
    align-items: flex-start;
    justify-content: flex-start;
    margin-right: auto;
    gap: 8px;
}
.user-msg img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #e7e6e6;
}
.user {
    padding: 12px 15px;
    border-radius: 10px;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: #dedede;
    text-align: left;
}
.chatInput {
    display: flex;
    border-top: 1px solid #ddd;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
    padding: 15px;
    gap: 10px;
}
.chat-input-text {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--main-color);
    border-radius: 50px;
    overflow: hidden;
    padding: 5px 15px 5px 8px;
}
.chat-input-text textarea {
    width: 100%;
    border: 0px;
    padding: 0px 10px;
    min-height: 45px;
}
#messageInput {
    flex: 1;
    border: none;
    border-radius: 0;
    width: 100%;
}
#sendButton {
    width: 40px;
    height: 40px;
    padding: 10px;
    background-color: var(--main-color);
    color: var(--font-light-color);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
img.uploaded-image {
    max-width: 100%;
    border-radius: 10px;
}

video.uploaded-video {
    max-width: 100%;
    border-radius: 10px;
}

.uploaded-file {
    display: flex;
    align-items: center;
}

.uploaded-file span {
    margin-left: 10px;
    font-weight: bold;
    width: 100%;
}

#fileInput {
    display: none;
}

#uploadButton {
    padding: 10px;
    background-color: #fff;
    color: #636363;
    border: 1px solid #b9b9b9;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-dropdown {
    position: relative;
    display: inline-block;
    z-index: 9;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 8;
    bottom: 100%;
    left: 0;
    border-radius: 10px;
    width: 135px;
    padding: 7px;
}
.dropdown-content button {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}
.dropdown-content button:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
.dropdown-content button i {
    font-size: 17px;
}
.cht-download-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #ffffff45;
    border: 1px solid var(--main-color);
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
}
.cht-download-button:hover {
    background: var(--main-color);
    border: 1px solid var(--main-color);
}

.msg-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;
}
.self-msg {
    align-items: flex-start;
}
.msgTime {
    font-size: 12px;
    margin-top: 5px;
    color: #000000a8;
    direction: ltr;
}
/*--------------------------------*/
/* Chat Page
/*--------------------------------*/
.chat-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}
.chat-list-header {
    background-color: #ececec;
    color: var(--font-light-color);
    padding: 15px 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d0d0d0;
}
.chat-list-header h4 {
    color: #000;
    font-size: 15px;
    font-weight: 600;
}
.chat-list {
    flex: 0 0 30%;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    overflow: hidden;
    border-radius: 20px;
}
.chtList {
    height: 780px;
    overflow-y: auto;
}
.cht-crd {
    display: flex;
    gap: 11px;
    padding: 18px 15px;
    background-color: #fff;
}
.chtList .cht-crd:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
.cht-crd.active {
    border-right: 6px solid rgb(133 92 152 / 24%);
    background: linear-gradient(
        90deg,
        rgba(243, 243, 243, 0.51) 0%,
        rgba(172, 148, 183, 0.23) 100%
    );
}
.cht-crd-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #cacaca;
    flex: none;
}
.cht-crd-img img {
    width: 100%;
    height: 100%;
}
.cht-crd-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
}
.cht-crd-text .cht-ttl {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    width: 100%;
    display: block;
    line-height: 17px;
}
.cht-crd-text h5 {
    font-weight: 500;
    font-size: 12px;
    text-overflow: ellipsis;
    height: 30px;
    overflow: hidden;
    width: 100%;
    color: #646464;
}

/* Chat */
.chat-content .chatHeader {
    background: #e0e0e0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}
.chat-content #chatBox {
    display: block;
    opacity: 1;
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-shadow: 6px -7px 20px rgb(57 57 57 / 0%);
    border-radius: 20px;
}
.chat-content img.uploaded-image {
    max-width: 200px;
    height: auto;
}
.chat-content .chatMessages {
    flex: 1;
    padding: 10px 18px 10px 12px;
    overflow-y: auto;
    background-color: #f1f1f1;
    height: 700px;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
}

/*--------------------------------*/
/* Profile Page & Edit
/*--------------------------------*/
.link-file {
    color: #224ad7;
    font-size: 14px;
    font-weight: 700;
    text-decoration-line: underline;
}
.link-file i {
    color: #224ad7;
    margin-right: 5px;
    font-size: 12px;
    transform: rotate(43deg);
}
.link-file:hover {
    color: #1f3893;
    text-decoration-line: underline;
}
.profile-page .page-content .main-form {
    margin: auto;
    width: 80%;
}

/*--------------------------------*/
/* Financial Page
/*--------------------------------*/
.cards-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}
.rec-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid #dddddd;
    border-radius: 20px;
    flex: 0 0 32%;
    cursor: pointer;
}
.rec-card:hover {
    border: 1px solid var(--main-color);
}
.rec-card .rec-card-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.rec-card .rec-card-info i.pdf-icon {
    font-size: 35px;
    color: #eb5757;
}
.rec-card-rt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.rec-card-info-txt {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rec-card-info-txt h3 {
    color: #1e1e1e;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
}
.rec-card-info-txt h3:hover {
    color: var(--main-color);
}
.rec-card:hover h3 {
    color: var(--main-color);
}
.rec-card:hover .arrow-btn {
    color: var(--main-color);
}
.rec-card-info-txt h5 {
    color: #1e1e1e;
    text-align: right;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.arrow-btn {
    padding: 0;
}
.arrow-btn i {
    font-size: 25px;
    color: #c6c6c6;
}
.arrow-btn:hover i {
    color: var(--main-color);
}
.rec-card-sts {
    width: 100%;
    border-top: 1px solid #d8d8d8;
    margin-top: 20px;
    padding-top: 15px;
}
.rec-card-sts .btn {
    width: 100%;
    border: 1px solid #b7b7b7;
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
.rec-card-sts .btn.snd-ord {
    border-color: var(--main-color);
    background: #fff;
    color: var(--main-color);
}
.rec-card-sts .btn.snd-ord:hover {
    background: var(--main-color);
    color: var(--font-light-color);
}
.rec-card-sts .btn.snd-done {
    border-color: #00aa4e;
    background: #fff;
    color: #00aa4e;
}
.rec-card-sts .btn.snd-done i {
    width: 20px;
    height: 20px;
    background: #00aa4e;
    color: var(--font-light-color);
    display: inline-flex;
    border-radius: 50%;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

@media (min-width: 576px) {
    .xtr-lg-modal-card .modal-dialog {
        max-width: 1100px;
    }
}

/*------------------------------------*/
/* New Login & Register Pages CSS
/*------------------------------------*/
.register-area-2 {
    background: #ebebeb;
}
.register-area-2 .login-box {
    padding: 50px 45px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 39px;
}
.register-area-2 .log-intro-sec .logo-img {
    margin-bottom: 20px;
}
.register-area-2 .log-intro-sec .logo-img img {
    width: 140px;
    height: auto;
}
.register-area-2 .log-intro-sec h3 {
    color: #190d25;
    text-align: right;
    font-size: 29px;
    font-weight: 700;
}
.register-area-2 .log-intro-sec h5 {
    color: #000;
    text-align: right;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 13px;
}
.register-area-2 .acc-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    justify-content: right;
}
.register-area-2 .acc-item-bx {
    flex: 0 0 49%;
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 25px 28px;
    border-radius: 16px;
    border: 1px solid #d1d1d1;
    background: #fefefe;
}
.register-area-2 .acc-item-bx-text {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    justify-content: right;
}
.register-area-2 .acc-item-bx h3 {
    color: #000;
    text-align: right;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 21px;
    font-style: normal;
    font-weight: 600;
}
.register-area-2 .acc-item-bx h5 {
    color: #404040cf;
    text-align: right;
    font-size: 15px;
}
.register-area-2 .arrow-icon {
    display: flex;
    width: 40px;
    height: 40px;
    background: #fff0;
    border: 1px solid #b2b2b2;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 20px;
    color: #b1b1b1;
    flex: none;
}
.register-area-2 .acc-item-bx:hover {
    border: 1px solid #696969;
    background: #e9e9e9;
    transition: all 0.3s ease 0s;
}
.register-area-2 .acc-item-bx:hover .arrow-icon {
    color: #190d25;
    border: 1px solid #190d25;
    transition: all 0.3s ease 0s;
}
.register-area-2 .arrow-icon:hover {
    background: #532648;
    color: var(--font-light-color);
    transition: all 0.3s ease 0s;
}
.register-area-2 .arrow-icon:hover i {
    color: var(--font-light-color);
    transition: all 0.3s ease 0s;
}
/* Register Style #2 */
.register-page-area {
    padding: 0 30px 50px;
}
.register-page-area .reg-frm-crd {
    padding: 15px 45px;
    width: 100%;
}
.register-page-area .reg-st-card-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    justify-content: flex-start;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    height: 100%;
}
.register-page-area .reg-st-card-2 .reg-img-crd {
    flex: 0 0 35%;
    height: 100%;
    background: #342e4b;
    position: relative;
}
.register-page-area .reg-st-card-2 .reg-img-crd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.register-page-area .reg-st-card-2 .reg-img-crd::after {
    content: "";
    background: linear-gradient(
        180deg,
        rgb(61 48 83 / 60%) 0%,
        var(--main-color) 112.21%
    );
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.reg-side-text .log-intro-sec {
    margin-bottom: 50px;
}
.register-page-area .reg-side-text {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    padding: 50px 40px;
}
.register-page-area .reg-side-text .logo-img {
    margin-bottom: 20px;
}
.register-page-area .reg-side-text .logo-img img {
    width: auto;
    height: auto;
    max-height: 75px;
    object-fit: scale-down;
}
.register-page-area .reg-side-text h3 {
    color: var(--font-light-color);
    text-align: right;
    font-size: 25px;
    font-weight: 700;
}
.register-page-area .reg-side-text h5 {
    color: var(--font-light-color);
    text-align: right;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    margin-top: 13px;
}
.acc-text {
    color: var(--font-light-color);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-top: 13px;
}
.acc-text a {
    color: var(--font-light-color);
    font-weight: 400;
}
.acc-text a:hover {
    color: var(--secondary-color);
    font-weight: 400;
}
/* Login Style #2 */
.login-page-area {
    padding-top: 60px;
}
.login-page-area .reg-st-card-2 {
    height: 95%;
}
.login-page-area .log-header {
    align-items: flex-start;
    width: 100%;
}
.login-page-area .reg-st-card-2 .reg-img-crd {
    flex: 0 0 45%;
}
.login-page-area .login-box {
    height: 100%;
    justify-content: center;
}
.login-page-area .reg-side-text {
    padding: 30px 25px;
}
.login-page-area .log-intro-sec {
    margin-bottom: 40px;
}
/*--------------------------------*/
/* FOOTER CSS
/*--------------------------------*/
.footer-area {
    padding: 30px 0 0 0;
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.2) 100%
        ),
        linear-gradient(90deg, #371b30 0%, #1f102e 72.36%);
}
.copyRights {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 24px;
    padding-bottom: 16px;
    margin-top: 5px;
}
.copyRights h5 {
    color: var(--font-light-color);
    text-align: center;
    font-family: var(--bs-font-sans-serif), "Tajawal", sans-serif, "riyal-sar";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}
/*--------------------------------*/
/* .End CSS
/*--------------------------------*/

/* NEW CSS */

.hidden {
    display: none;
}
.bd-info {
    margin-top: 40px;
    padding: 0 20px;
}
.sm-dv-ttl h2 {
    color: #000;
    text-align: right;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 600;
}
.dv-bx-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.form-check-div.active label {
    font-weight: bold;
}
.form-check-div {
    border-radius: 8px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #d5dde7;
    flex: 0 0 49.3%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.item-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.item-check .form-check-label {
    margin-right: 5px;
    width: 100%;
    cursor: pointer;
    padding: 13px 6px;
}
.radio-checked {
    background: #eff7ff;
    border: 1px solid #abc;
}
.item-check .form-check-input {
    cursor: pointer;
}
.form-check-input:checked[type="radio"] {
    background-image: none;
    position: relative;
}
.item-check .form-check-input {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1px solid #acb8c6;
}
.item-check .form-check-input:checked {
    background-color: #3db3922e;
    border-color: #3db392;
}
.form-check-input:checked[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    background: #3db392;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50px;
}
.frm-box {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    padding: 20px 20px;
}
.frm-rdio-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}
.frm-rdio-box .form-control {
    border: 1px solid #ced4da;
    /* padding: 12px 13px; */
}
.rd-2-flx {
    border-radius: 10px;
    padding: 6px 22px 6px;
    background: #f8f9fa;
    border: 1px solid #d5dde7;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}
.hidden.frm-rdio-box {
    display: none;
}
.wrt-canvas {
    width: 100%;
    position: relative;
}
.wrt-canvas canvas {
    width: 100%;
    height: 220px;
    border-radius: 10px;
}
.eraser-btn {
    position: absolute;
    left: 17px;
    bottom: 20px;
    padding: 6px 20px;
    border-radius: 6px;
    border: 1px solid rgba(223, 57, 77, 0.13);
    background: #df394d0f;
    color: #df394d;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.eraser-btn i {
    padding-left: 6px;
}
.eraser-btn:hover {
    border: 1px solid rgba(223, 57, 77, 0.13);
    background: rgba(223, 57, 77, 0.12);
    color: #df394d;
}
.rd-2-flx .item-check .form-check-label {
    padding: 10px 6px;
}
.mainform .form-label {
    color: #000;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 8px;
}
.gap-0 {
    gap: 0;
}
.frm-grb {
    width: 100%;
    margin-bottom: 10px;
}
.conf-btn {
    width: 100%;
}
.frm-btn-sec {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #cbd7e5;
}
.btn-conf {
    padding: 12px 35px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #3344b2;
    color: #3344b2;
    background: rgba(51, 68, 178, 0.07);
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
}
.btn-conf:hover {
    border: 1px solid #3344b2;
    background: #3344b2;
    color: #fff;
}
.view-file-box {
    padding: 13px 16px;
}
.view-file-box .pdf-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
.btn-view-file {
    border-radius: 6px;
    border: 1px solid #c3c3c3;
    background: rgba(125, 125, 125, 0.06);
    padding: 11px 20px;
    color: #3f3f3f;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.btn-view-file:hover {
    background: rgba(125, 125, 125, 0.152);
    color: #3f3f3f;
}
.btn-view-file i {
    font-size: 17px;
}
.view-file-box .pdf-box .pdf-file {
    color: #eb5757;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}
.view-file-box .pdf-box .pdf-file i {
    font-size: 24px;
    color: #eb5757;
    vertical-align: middle;
    margin-left: 3px;
}
.view-file-box .pdf-box .pdf-file span {
    text-decoration-line: underline;
}

/* Products Pages || 20/1/2025 */
/* sidebar */
.sidebar-pages .dropdown {
    width: 100%;
}
.sidebar-pages .dropdown .dropdown-menu {
    padding: 8px 37px 5px 5px;
    background: #fff;
    margin: 0;
}
.sidebar-pages .dropdown .dropdown-menu .dropdown-item {
    color: #000000;
    font-size: 14px;
    text-align: right;
    font-weight: 600;
    padding: 5px 0px;
}
.sidebar-pages .dropdown .dropdown-menu.show {
    position: relative !important;
    transform: none !important;
    border: 0;
    box-shadow: none;
}
.sidebar-pages .dropdown.pg-link {
    display: block;
}
.sidebar-pages .dropdown.pg-link .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    color: #000000;
}
.sidebar-pages .dropdown.pg-link .nav-link.show {
    color: var(--main-color);
}
.sidebar-pages .dropdown.pg-link .nav-link.show i {
    color: var(--main-color);
}
.sidebar-pages .dropdown.pg-link .dropdown-toggle::after {
    position: absolute;
    top: 23px;
    left: 0;
}
.sidebar-pages .dropdown.pg-link .dropdown-toggle.show::after {
    transform: rotate(180deg);
}
.sidebar-pages .dropdown.pg-link .dropdown-item.active,
.sidebar-pages .dropdown.pg-link .dropdown-item:hover {
    background-color: #e3e3e300;
    color: var(--main-color);
}

.header .navbar-nav .dropdown {
    padding: 0 22px;
}
.header .navbar-nav .dropdown .dropdown-menu {
    background: #ffffff08;
    color: #ffffff;
}
.header .navbar-nav .dropdown .dropdown-menu .dropdown-item {
    color: #ffffff;
    border-bottom: 1px solid #ededed00;
}
.header .dropdown-item.active,
.header .dropdown-item:active {
    background-color: var(--main-color);
}
.header .nav-item i {
    width: 26px;
    height: 24px;
    font-size: 16px;
    color: #ffffff;
    margin-left: 9px;
}
/* Header */
.dsh-header-sec {
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px 19px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 9;
}
.dsh-prf-head {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex: auto;
}
.dsh-prf-ttl-lst {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 60px;
}
.dsh-prf-head .dsh-prf-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 7px;
    margin-top: 0;
}
.dsh-prf-head .dsh-prf-title:not(:last-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.19);
    padding-left: 30px;
}
.dsh-prf-title h6 {
    color: rgba(255, 255, 255, 0.53);
    font-size: 13px;
    font-weight: 500;
}
.dsh-prf-title h3 {
    color: #fff;
    text-align: right;
    font-size: 17px;
}
.dsh-prf-img {
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
}
.dsh-header-stcs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
}
.dsh-prf-lft {
    display: flex;
    gap: 30px;
}
.dsh-header-stcs .dsh-stc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    min-width: 100px;
}
.dsh-header-stcs .dsh-stc-card:not(:last-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.19);
    padding-left: 50px;
}
.dsh-header-stcs .dsh-stc-card h5 {
    font-size: 13px;
    color: #fff;
}
.dsh-header-stcs .dsh-stc-card h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}
.dsh-header-btns .main-btn {
    background: var(--main-color);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    gap: 7px;
    padding: 10px 25px;
    align-items: center;
}
.dsh-header-btns .main-btn i {
    font-size: 18px;
}
.dsh-header-btns .main-btn:hover {
    background: var(--secondary-color);
}
/* Products Page */
.cards-sections {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}
.cards-sections .card-3 {
    flex: 0 0 calc(33.333% - 16px);
}
.prd-card {
    padding: 10px;
    border-radius: 10px;
    background: #e8e8e8;
}
.prd-card .prd-img {
    border-radius: 8px;
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.prd-card .prd-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prd-card .crd-dt-info h3 {
    font-size: 14px;
    color: #000;
    font-weight: 600;
    padding: 18px 5px 15px;
}
.prd-card .crd-dt-info .crd-dt-date {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    padding: 12px 30px 12px 10px;
}
.prd-card .crd-dt-info .crd-dt-date h4 {
    color: #431d68;
    font-size: 13px;
    font-weight: 500;
    position: relative;
}
.prd-card .crd-dt-info .crd-dt-date h4::before {
    content: "\f0d9";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    position: absolute;
    right: -16px;
    top: 1px;
    font-size: 13px;
}
.prd-card .crd-dt-info .crd-dt-date h5 {
    color: #000;
    font-size: 13px;
}
.prd-card .prd-btn {
    width: 100%;
    border-radius: 6px;
    background: rgba(72, 6, 137, 0.08);
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 10px;
    color: var(--main-color);
}
.prd-card .prd-btn:hover {
    color: #fff;
    background: var(--secondary-color);
}

/* Product Details */
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.flex-row .flex-strt-lg {
    flex: 0 0 64%;
}
.prd-dts-img {
    height: 380px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.prd-dts-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flex-row .flex-end-sm {
    flex: 0 0 33%;
    background: #f6f6f6;
    border-radius: 10px;
    border: 1px dashed #9e9e9e;
    background: #f6f6f6;
    padding: 15px 15px 15px 15px;
}
.fixed-pos {
    position: sticky;
    top: 80px;
}
.crd-ttl {
    border-bottom: 1px solid #d1d1d1;
    padding: 5px 0 16px 0;
    padding-right: 20px;
}
.crd-ttl h3 {
    color: #000;
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    position: relative;
}
.crd-ttl h3::before {
    content: "\f0d9";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    position: absolute;
    right: -17px;
    top: 1px;
    font-size: 15px;
}
.prd-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
}
.prd-dt-crd {
    margin: 10px 0;
    padding: 15px 15px 15px 15px;
    border-radius: 6px;
    background: rgba(67, 29, 104, 0.09);
}
.prd-dt-crd h5 {
    color: #1c191e;
    font-size: 14px;
    font-weight: 700;
}
.prd-dt-crd h5 span {
    color: var(--main-color);
    margin-right: 6px;
}
.prd-dts-text {
    padding: 0 10px 0 25px;
}
.prd-dts-text .text-card {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 20px 0;
}
.prd-dts-text .text-card:not(:last-child) {
    border-bottom: 1px solid #d8d8d8;
}
.prd-dts-text .text-card .p-title {
    min-width: 200px;
    font-size: 14px;
    font-weight: 700;
    color: #1e1e1e;
    text-align: right;
    margin-top: 5px;
}
.prd-dts-text .text-card p {
    color: #000;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    white-space: pre-line;
}
.prd-dts-text .text-card .numbers-style li {
    list-style: decimal;
    margin-right: 15px;
}
.prd-dts-text .text-card .dots-style li {
    list-style: disc;
    margin-right: 15px;
}
.crd-list {
    border-bottom: 1px solid #a8a8a8;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.crd-list .crd-item {
    padding: 12px 0px 12px 0px;
}
.crd-list .crd-item:not(:last-child) {
    border-bottom: 1px dashed #9e9e9e;
}
.crd-list .crd-item h4 {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.crd-list .crd-item h4 i {
    font-size: 11px;
    background: rgba(163, 15, 111, 0.15);
    color: var(--main-color);
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid var(--main-color);
    font-weight: 900;
    line-height: 0;
}
.check-flex .form-check-label {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 10px;
    display: block;
    line-height: 15px;
    cursor: pointer;
}
.check-flex .form-check-label span {
    color: #480689;
    text-decoration-line: underline;
    cursor: pointer;
}
.flex-end-sm .main-btn {
    margin-top: 10px;
    width: 100%;
}
.modal-header {
    border-bottom: 1px solid #dee2e6de;
    padding: 0;
    padding-bottom: 15px;
}
.modal-content ul li {
    margin: 5px 0;
}

/* Product || Request */
.req-tb {
    border-radius: 10px;
    background: #f6f6f6;
    padding: 12px 12px 12px 12px;
    border: 1px solid #e0e0e0;
}
.prd-dts-details .ttl-item {
    width: 45%;
}
.prd-dts-details .li-item {
    width: 15%;
}
.req-tb .tb-header {
    padding: 7px 10px 13px;
}
.req-tb .tb-header ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.req-tb .tb-header ul li h5 {
    font-size: 13px;
    color: #000;
    font-weight: 700;
}
.req-tb .tb-body-list:not(:last-child) {
    margin-bottom: 8px;
}
.req-tb .tb-body-list ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}
.req-tb .tb-body-list ul li {
}
.req-tb .tb-body-list .title-item {
    font-size: 13px;
    color: #000;
    font-weight: 700;
}
.req-tb .tb-body-list .prc-item {
    font-size: 13px;
    color: #000;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
.req-tb .tb-body-list .prc-item span {
    font-size: 14px;
    color: #000;
    font-weight: 700;
}
.req-tb .tb-body-list .qnt-item {
}
.quantity-container {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ffffff00;
    border-radius: 7px;
    border: 1px solid #d7d6d6;
    padding: 8px 13px;
    width: max-content;
}
.quantity-btn {
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #bebebe;
    background: #0000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.quantity-btn:hover {
    color: #393939;
}
.quantity-input {
    font-size: 15px;
    border-radius: 4px;
    text-align: center;
    max-width: 55px;
    border: 0;
    padding: 0;
}

.crd-frm .crd-frm-ttl {
    border-bottom: 1px solid #d1d1d1;
    padding: 5px 0 16px 0;
    margin-bottom: 10px;
}
.crd-frm .crd-frm-ttl h3 {
    color: #000;
    font-size: 15px;
    font-weight: 600;
}
.item-crd-ttl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0 5px 0;
}
.item-crd-ttl h4 {
    color: #000000;
    padding: 0 15px 0 0;
    font-weight: 500;
    font-size: 14px;
    position: relative;
}
.item-crd-ttl h4::before {
    content: "\f0d9";
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: var(--main-color);
    position: absolute;
    right: 0;
    top: 1px;
    font-size: 15px;
}
.item-crd-ttl .btn {
    color: var(--main-color);
    padding: 0;
    font-weight: 500;
    font-size: 14px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 9.5%;
    text-underline-offset: 25%;
}
.item-crd-ttl .btn:hover {
    color: #000;
}

.bnk-dts-list .bnk-dts-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 0;
}
.bnk-dts-list .bnk-dts-item:not(:last-child) {
    border-bottom: 1px dashed #9e9e9e;
}
.bnk-dts-list .bnk-dts-item h4 {
    color: #000;
    font-size: 13px;
    font-weight: 500;
}
.bnk-dts-list .bnk-dts-item h5 {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}
.bnk-dts-list .bnk-dts-item a {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 500;
}
.bnk-dts-list .bnk-dts-item a:hover {
    color: var(--secondary-color);
}
.flex-end-sm .main-form label {
    font-weight: 500;
    font-size: 13px;
}
.flex-end-sm .main-form .form-control {
    background: #fff;
    min-height: 45px;
    padding: 10px 15px;
}
.flex-end-sm .main-form .form-group {
    padding: 0;
}
.total-prices {
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 17px 0 12px 0;
    margin-top: 5px;
}
.total-prices h5 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.total-prices h4 {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}
.total-prices h4 span {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.modal .comp-box {
    padding: 0;
}
.modal .com-icon i {
    font-size: 55px;
    margin-bottom: 26px;
    border-radius: 100px;
    border: 16px solid #23a26d21;
}
.modal .comp-box .log-txt h3 {
    color: #000;
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 800;
    line-height: 25px;
    margin-bottom: 8px;
}
.comp-box .log-txt h5 {
    font-size: 15px;
    text-align: center;
    font-style: normal;
    font-weight: 500;
}
.modal .comp-box .btn-sec {
    padding: 8px 0;
    margin-top: 10px;
}
.ord-title {
    padding: 13px 20px 13px 20px;
    border-radius: 6px;
    background: rgba(67, 29, 104, 0.09);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ord-title h3 {
    margin: 0;
    font-size: 16px;
}
.ord-title h3 span {
    margin-right: 12px;
}
.ord-title a {
    font-size: 13px;
    color: var(--main-color);
    font-weight: 700;
}
.ord-title a:hover {
    color: var(--secondary-color);
}

.resn-div {
    border-radius: 10px;
    border: 1px solid rgba(155, 22, 80, 0.29);
    background: rgba(155, 22, 80, 0.1);
    padding: 21px 18px 16px 18px;
    margin: 20px 0 10px 0;
}
.resn-div h5 {
    color: #9b1650;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 10px;
}
.resn-div li,
.resn-div p {
    color: #9b1650;
    font-weight: 500;
    font-size: 14px;
    padding: 1px 0;
}
.resn-div .resn-div-btn {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.resn-div .resn-div-btn .btn {
    min-height: 42px;
}
ul.dots-style li {
    list-style: disc;
    margin-right: 15px;
}

.prd-flex-section table {
    width: 100%;
    border-collapse: collapse;
    background: #ff000000;
}
.prd-flex-section th,
.prd-flex-section td {
    text-align: right;
}
.prd-flex-section th,
.prd-flex-section td {
    text-align: right;
}
.prd-flex-section table thead th {
    border-bottom: 0px solid #dad8da00;
    padding-bottom: 15px;
}
.prd-flex-section thead tr {
    border-radius: 8px;
}
.prd-flex-section tbody {
    border-radius: 8px;
}
.prd-flex-section tbody tr {
    border-radius: 8px;
    /* border: 1px solid #e7e6e6; */
    background: #fff;
}
.prd-flex-section tbody .sps {
    background: #f6f6f600;
    border: 0;
    height: 7px;
}
.prd-flex-section td {
    position: relative;
    height: 54px;
}
.prd-flex-section td:not(:first-child),
.prd-flex-section td:not(:last-child) {
    border-top: 1px solid #e7e6e6;
    border-bottom: 1px solid #e7e6e6;
}
.prd-flex-section td:first-child {
    border-radius: 0 8px 8px 0;
    border-top: 1px solid #e7e6e600;
    border-bottom: 1px solid #e7e6e600;
}
.prd-flex-section td:last-child {
    border-radius: 0 8px 8px 0;
    border-top: 1px solid #e7e6e600;
    border-bottom: 1px solid #e7e6e600;
}
.prd-flex-section td:first-child > *,
.prd-flex-section td:last-child > * {
    position: relative;
    z-index: 2;
}
.prd-flex-section .title-item,
.prd-flex-section .prc-item,
.prd-flex-section h5 {
    position: relative;
    /* z-index: 2; */
}
.prd-flex-section td:first-child::before,
.prd-flex-section td:last-child::after {
    content: "";
    width: 100%;
    height: 103%;
    background: #ffffff;
    position: absolute;
    border: 1px solid #e7e6e6;
    border-radius: 10px;
    /* z-index: 0; */
}
.prd-flex-section td:first-child::before {
    top: -1px;
    right: 0px;
    border-left: 0;
    border-radius: 0 10px 10px 0;
}
.prd-flex-section td:last-child {
    border-radius: 8px 0 0 8px;
}
.prd-flex-section td:last-child::after {
    top: -1px;
    left: 0px;
    border-right: 0;
    border-radius: 10px 0 0 10px;
}
.prd-flex-section .quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
}
.table-responsive::-webkit-scrollbar {
    display: none;
    overflow-x: inherit;
}
@media (max-width: 600px) {
    .prd-flex-section th,
    .prd-flex-section td {
        font-size: 14px;
        padding: 10px;
    }
    .table-responsive::-webkit-scrollbar {
        float: right;
        width: 9px;
        height: 5px;
        background-color: #fff;
    }
    .req-tb .tb-body-list .title-item {
        width: 190px;
    }
    .req-tb .tb-body-list .prc-item {
        min-width: 80px;
    }
}
/*  */
.mx-icon-calendar,
.mx-icon-clear {
    right: 12px;
}
.mx-datepicker .mx-input {
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    min-height: 40px;
    height: 40px;
}
.paginate_button {
    cursor: pointer;
    margin: 0 2px;
    padding: 5px 10px;
    color: #000000;
    background: #0000;
}
.products-section .mt-4 {
    border-top: 1px solid #ddd;
    padding-top: 20px;
}
.paginate_button_links {
    padding: 5px 10px;
    width: 30px;
    height: 30px;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    border-radius: 5px;
}
.upd-crd {
    position: relative;
}
.upd-item {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 8px;
    border: 2px dashed #b3bbc4;
    color: #000;
}
.upd-item:hover {
    color: var(--main-color);
}
.upd-crd .dlt-btn {
    position: absolute;
    left: 8px;
    top: 8px;
    background: #fbeaec;
    padding: 3px 15px;
    border: 1px solid #dc354530;
    border-radius: 6px;
}
.upd-item i {
    line-height: 0;
    font-size: 16px;
    color: #291dbb;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #291dbb26;
    border-radius: 50px;
    margin-left: 10px;
}
.bnk-dts-list .vue-treeselect__control {
    border-radius: 5px !important;
    border: 1px solid #afbac7 !important;
    background: #ffffff !important;
    min-height: 46px !important;
    padding: 0px 10px !important;
}
@media (min-width: 1850px) {
    .dashboard-area .container,
    .dashboard-area .container-lg,
    .dashboard-area .container-md,
    .dashboard-area .container-sm,
    .dashboard-area .container-xl,
    .dashboard-area .container-xxl {
        max-width: 1760px;
    }
}
.wd_30 {
    width: 30px;
}
.dlt-td-btn {
    background: #ee49461f;
    line-height: 0;
    border: 1px solid #ee49461a;
    color: #ee4946;
    padding: 6px 8px;
}
.dlt-td-btn:hover {
    background: #ee49462b;
    border: 1px solid #ee49462b;
    color: #ee4946;
}
.prd-flex-section td .btn.disable {
    background: #0000001c;
    border: 1px solid #b6b6b638;
    color: #000000;
    opacity: 0.4;
}
.tb-body-list .tb-btns {
    padding: 15px 0 5px;
    border-top: 1px solid #ddd;
    margin-top: 15px;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.tb-body-list .tb-btns .btn {
    line-height: 0;
    min-height: 40px;
    font-weight: 500;
}

/* Register CSS */
.register-area-2 .acc-item-bx h3 {
    font-size: 16px;
}
.register-area-2 .acc-item-bx-text {
    gap: 8px;
}
.input-grp {
    position: relative;
}
.inpt-spn {
    border-radius: 5px;
    background: rgba(72, 6, 137, 0.1);
    color: #480689;
    padding: 7px 22px;
    position: absolute;
    top: 5px;
    left: 7px;
    font-size: 12px;
}
.inpt-spn:hover {
    background: #ffa41c;
    color: #fff;
}
.verf-msg {
    padding: 15px 12px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    margin: 5px 0;
}
.msg-done {
    border: 1px solid rgba(203, 228, 216, 0.5);
    background: rgba(203, 228, 216, 0.37);
}
.msg-info {
    border: 1px solid #b6d4fe;
    background: rgba(207, 226, 255, 0.5);
    color: #084298;
}
.msg-info h4 {
    color: #084298;
}
.verf-msg .verf-title .msg-icon {
    display: flex;
    line-height: 0;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
}
.verf-msg .verf-title .msg-icon i {
    font-size: 18px;
    line-height: 0;
}
.msg-done .verf-title .msg-icon i {
    color: #3bb579;
}
.msg-info .verf-title .msg-icon i {
    color: #084298;
}
.verf-msg .verf-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
}
.verf-msg .verf-title h4 {
    color: #000;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
}
.verf-msg .verf-title h4 {
    color: #0d3673;
}
.verf-msg .msg-text {
    padding-right: 30px;
}
.verf-msg .msg-text .verf-eml {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
    padding: 2px 0;
}
.verf-msg .msg-text .verf-eml .msg-p {
    color: #1e1e1e;
    font-size: 13px;
    font-weight: 500;
}
.verf-msg .msg-text li .sendCode {
    color: #a30f6f;
    font-size: 11px;
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 10%;
    text-decoration-thickness: 5.5%;
    text-underline-offset: 28%;
}
.input-verf {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;
    direction: ltr;
}
.form-group .input-verf .codeInput {
    padding: 10px 7px;
    text-align: center;
    width: 45px;
}
.form-group.form-verc {
    width: 49%;
    padding: 0 0;
}
.und-inpt {
    margin-top: 12px;
}
.und-inpt h5 {
    color: #000;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
}
.und-inpt h5 .resend-code {
    color: #1812cc;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: #150fc1;
    text-decoration-thickness: 5.5%;
    text-underline-offset: 28%;
    cursor: pointer;
}
.und-inpt h5 .resend-code:hover {
    color: #151260;
}

/* Upd */
.stepForm-bg {
    border-radius: 10px;
    border: 1px solid #d1d1d1;
}
.stepForm-bg,
.stepForm-bg .stepForm-step {
    background: #f4f4f4;
}
.stepForm-step .stp-no {
    line-height: 0;
    width: 28px;
    height: 28px;
}
.btn-stp-active {
    color: #000000;
}
.btn-stp-active .stp-no {
    border: 1px solid #000000;
}
.stepForm-step .tab-done {
    color: #000000;
}
.tab-done .stp-no {
    border: 1px solid #000000;
}
.stepForm-step .btn-stp-active {
    color: #000 !important;
}
.stepForm-step .tab-done {
    color: #000000 !important;
    font-weight: 700;
}
@media (min-width: 1px) and (max-width: 3000px) {
    .stepForm-step .btn.tab-done {
        color: #000000 !important;
    }
}
.stepForm-step .tab-done .stp-no {
    border: 1px solid #bbb;
    color: #9e9e9e;
}
.stp-done {
    width: 28px;
    height: 28px;
    color: #ffffff;
    border: 1px solid #24a278;
    background: #24a278;
}
.stp-done i {
    font-size: 12px;
    line-height: 0;
}
.stepForm-step a:hover,
.stepForm-step button:hover {
    color: #000000;
}
.is-invalid-text {
    font-size: 13px;
    margin-top: 3px !important;
}
.main-form .form-control {
    border-radius: 5px;
    font-size: 13px;
}
.vue-treeselect__control {
    border-radius: 5px !important;
    padding: 0px 10px !important;
}
.main-btn {
    border-radius: 5px;
    font-weight: 800;
    min-height: 40px;
}
.mx-datepicker .mx-input {
    border-radius: 5px;
    min-height: 40px;
}
.show-password-btn .toggle-password {
    top: calc(50% - 10px);
}

.sst-info-details {
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    background: #eff2f4;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start;
    margin: 10px 0;
}
.sst-info-details h5 {
    color: #000;
    font-size: 17px;
    font-weight: 600;
}
.sst-info-details ol {
    padding-right: 30px;
}
.sst-info-details ol li:not(:last-child) {
    margin-bottom: 7px;
}
.sst-info-details ol li p {
    font-size: 14px;
    color: #000;
    text-align: right;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
}
.sst-info-details ol li p a {
    color: #3a3aad;
}
.sst-info-details ol li p a:hover {
    color: #0d6efd;
}
.sst-info {
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid rgba(88, 109, 241, 0.28);
    background: rgba(88, 109, 241, 0.12);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    flex-direction: row;
    margin-top: 15px;
}
.sst-info i {
    font-size: 16px;
    background: rgba(88, 109, 241, 0.15);
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 2px solid #586df1;
    color: #586df1;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 7px; */
}
.sst-info p {
    color: #323c82;
    text-align: right;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
}
/* -- */
.sd-pg-ttls {
    color: var(--main-color);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    padding: 20px 10px 10px 0;
}

.acc-pnd-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
}
.acc-pnd-body .pnd-img img {
    width: auto;
    height: 260px;
}
.pnd-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.pnd-text h5 {
    color: #000;
    font-size: 15px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    padding: 20px 0;
}
.flex {
    display: flex;
}
.flex-center {
    justify-content: center;
}
.pnd-form {
    width: 100%;
    padding: 10px 30px;
}
.pnd-form .main-form {
    padding: 20px 30px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: rgb(232 232 232 / 31%);
}
.sub-title {
    padding: 12px 13px;
    font-size: 16px;
    color: #000 !important;
    font-weight: 500;
    background: #c7c7c754;
    margin-bottom: 20px !important;
    width: 100%;
    border-radius: 5px;
}