/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
          Custom Arabic font
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@font-face {
    font-family: "Droid Arabic Kufi";
    /* Add other properties here, as needed. For example: */
    font-weight: normal;
    font-style: normal italic;
    src: url(../../fonts/DroidArabicKufi/DroidKufi-Regular.woff2) format('woff2');
}

@font-face {
    font-family: "Droid Arabic Kufi";
    /* Add other properties here, as needed. For example: */
    font-weight: bold;
    font-style: normal italic;
    src: url(../../fonts/DroidArabicKufi/DroidKufi-Bold.woff2) format('woff2');
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Global
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
:root {
    --success-color: #1f4b1f;
    --light-yellow: #f7fef1;
    --grey-color: #787579;
    --dark-color: #1C1B1F;
    --light-dark-color: #5B6147;
    --font-droid-arabic-kufi: "Droid Arabic Kufi";
    --font-weight: 100;
    /* Transactions colors */
    --green_trans_color: #5DAA10;
    --blue_trans_color: #30A3E3;
    --red_trans_color: #DE5454;
    --black_trans_color: #212529;
}

html, body {
    block-size: 100%;
}

body {
    font-family: "Droid Arabic Kufi", "Poppins", Arial, sans-serif;
    background: url('../images/texture-bg.svg') no-repeat center;
    background-size: cover;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    color: #000;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    & .media-img {
}

& .media-body {
    -ms-flex: 1;
    flex: 1;
}

}
.scaleX-in {
    transform: scaleX(-1);
}
.scaley-in {
    transform: scaleY(-1);
}
.h-auto {
    height: auto  !important;
}
.w-auto {
    width:auto  !important;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
     Typography
 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.text-success {
    color: var(--success-color) !important;
}
.text-dark{
color:var(--dark-color);
}
.text-lightdark {
    color:var(--light-dark-color) !important;
}
.text-grey {
    color:var(--grey-color) !important;
}
.text-justify {
    text-align: justify !important;
}

.h4, h4 {
    font-size: 1.25rem;
    font-weight: calc(var(--font-weight) * 6);
    color: var(--success-color);
}

.cursor-pointer {
    cursor: pointer;
}
.collapse-heading{
    border: 1px double #787579;
    border-radius: 0.9rem 0.9rem 0 0;
    height: 46px;
    background:var(--success-color) url(../images/caret-r.png) no-repeat center right 14px;
    background-size: 12px;
    position: relative;
    cursor: pointer;
    color: #fff;
    line-height: 2.5;
}
.collapse-heading.toggleCollapseHeading{
    background:var(--success-color) url(../images/caret-d.png) no-repeat center right 14px;
    background-size: 12px;
}
.collapsed-filedset{
    display: none;
    border: 1px solid rgb(223 229 218);
    box-shadow: 2px 2px 6px 1px rgb(223 229 218 / 60%);
    padding: 1.2rem 1.2rem 2rem;
    border-radius: 0 0 0.9rem 0.9rem;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Header
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.tmt-webnavbar .navbar-brand img {
    inline-size: 215px;
}

.tmt-webnavbar {
    background-color: var(--bs-white);
    position: relative;
    /*margin-bottom: 3.2rem;*/
    &:after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: 0;
    /*top: 4.9vw;*/
    inset-block-end: -0.9vw;
    background: url(../images/heading-radiusG.png) no-repeat top center;
    background-size: cover;
    height: 4.8vw;
    z-index: 0;
}
& .dropdown-menu{
    inset-inline: auto 0;
}
& .dropdown-toggle::after {
    content: '';
    border: 0;
    background: url(../images/arrow-downW.png) no-repeat center right;
    background-size: 20px;
    block-size: 10px;
    inline-size: 17px;
    margin: 0;
    vertical-align: baseline;
}

& .dropdown-toggle.show::after {
    transition: transform 0.4s;
    transform: scaleY(-1);
}
& .profile-dropdown {
    /* margin-inline-start: 0.7rem; */
   
    & a{
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    & .profile-name{
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    & .profile-img{
        border: 1px solid var(--bs-white);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        padding: 6px;
        & img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    & .role{
        display: block;
    }
}
}
}

.tmt-webnavbar .bg-light {
    margin-block-end: 1.5vw !IMPORTANT;
    background-color: var(--success-color) !IMPORTANT;
    & .header-container {
    z-index: 4;
}

}

.navbar-light .navbar-toggler {
    border-color: transparent;
    z-index: 3;
    &:focus {
    box-shadow: none;
}

}

.tmt-webnavbar .dropdown-menu .dropdown-item:is(:hover,.active,:active) {
    color: var(--success-color);
    background-color: var(--bs-white);
}

.tmt-webnavbar .navbar-nav :is(.nav-link.active,.show > .nav-link) {
    color: var(--success-color);
}

.navbar-light .navbar-toggler {
    color: #fff;
    border-color: transparent;
  }
@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link:is(:focus,:hover) {
        color: var(--bs-white);
    }
    .tmt-webnavbar .navbar-nav :is(.nav-link.active,.show > .nav-link) {
        color: var(--bs-white);
        font-weight: bold;
    }
    .navbar-light .navbar-nav .nav-link {
        color: var(--bs-white);
    }
    .nav-link {
        padding-block: 0;
        padding-inline: 1rem;
        font-size: 14px;
        
    }

    .tmt-webnavbar .dropdown-menu {
        font-size: 0.9rem;
        border: 0;
        & .header-container {
    position: relative;
    z-index: 2;
}

}

.tmt-webnavbar {
    & .navbar-nav > li {
    transform-style: preserve-3d;
    line-height: 1
}
& .navbar-nav > li:nth-last-child(2){
    border-inline-end: 1px solid var(--bs-white);
}
& .navbar-nav > li + li:not(:last-child) {
    border-inline-start: 1px solid var(--bs-white);
}

& .dropdown-menu.show {
    transform: rotateX(0deg) translateZ(100px);
    transition: transform 0.4s linear;
}

& .navbar-nav {
    align-items: center
}

& .dropdown-menu {
    display: block;
    transform-origin: center top;
    transform: rotateX(-90deg);
    transition: transform 0.4s linear;
    display: block;
    box-shadow: 3px 3px 5px 2px rgb(0 0 0 / 8%);
}

}

.btn-lang {
    padding-block:0.15rem 0.4rem !IMPORTANT;
    padding-inline: 1.4rem !IMPORTANT;
    font-size: 12px;
    color: var(--success-color) !important;
    background-color: var(--bs-white);
    border-color: var(--success-color);
    border-radius: 2.5rem;
}

}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Footer
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.footer {
    /*background-color: #f7f7f7;*/
    background-color: var(--success-color);
    padding: 2.05rem 0 0rem;
    position: relative;
    margin-top: 7rem;
    &:before {
        content: '';
        position: absolute;
        inset-inline-end: 0;
        inset-inline-start: 0;
        inset-block-start: -5vw;
        background: url(../images/footer-radiusG.png) no-repeat center;
        background-size: cover;
        block-size: 5.1vw;
        z-index: 1;
}

& .container {
    position: relative;
    z-index: 7;
}

& .footer-logo {
    inline-size: 175px;
    margin-block-end: 0.7rem;
}

}

.footer-links-col {
    & .footer-links {
    border-inline-start: 0.5px solid #7ba782;
    list-style: none;
    padding-block: 0 0.8rem;
    padding-inline: 1.1rem;
    margin: 0;
}

& h4 {
    font-size: 20px;
    margin-block-end: 0.6rem;
    padding-inline-start: 0.8rem;
    color: #f0fdf2;
}

}

.footer-links li {
    &:not(:last-child) {
    margin-block-end: 0.3rem;
}

& a {
    text-decoration: none;
    color: var(--bs-white);
}

}

.copy-right {
    color: var(--bs-white);
    text-align: center;
    padding: 1rem;
    border-block-start: 0.5px solid #7ba782;
}

.footer-social {
    list-style: none;
    margin: 0;
    display: flex;
    padding: 0;
    & li + li {
    margin-inline-start: 0.6rem;
}

& li a {
    text-decoration: none;
    color: var(--bs-white);
    inline-size: 35px;
    block-size: 35px;
    display: block;
    font-size: 23px;
    border: 1px solid var(--bs-white);
    text-align: center;
    line-height: 1.7;
    transition: all 0.3s;
    border-radius: 50%;
    &:hover {
    color: var(--success-color);
    border-color: #bbe8c2;
    background-color: #bbe8c2;
    transition: all 0.3s;
}

}
}

.footer :is(.border-start,.border-end) {
    border-color: rgb(203 208 197) !IMPORTANT;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
        Main content
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.main-container {
    flex: 1;
    &:has(.mobile-pages){
        padding-block: 1.6rem 0;
        margin-block-end: 1rem;
    }
}

.card {
    background-color: transparent;
}

.card, .card-body, .summary-box .card, .summary-box .card-body {
    border-radius: 0.6rem;
}

.card-body, .summary-box .card-body {
    background-color: rgb(223 229 218 / 58%);
    padding-block: 2rem 1.5rem;
    padding-inline: 1.7rem;
}

.banner {
    inline-size: 100%;
    position: relative;
    margin-block-end: 1.5rem;
}

    .banner .banner-img {
        inline-size: 100%;
        object-fit: cover;
    }

.banner-caption {
    position: absolute;
    inset-inline-start: 3.9vw;
    inset-inline-end: 6.6vw;
    inset-block-start: 5%;
    inset-block-end: 5%;
}

.caption-img {
    position: relative;
    block-size: 100%;
    & img {
    max-inline-size: 100%;
    object-fit: contain;
}

}

.banner-text {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & h5 {
    color: #F5F4E8;
    /*font-size: 45px;*/
    font-size: 2.92vw;
    font-weight: 600;
    margin-block-end: 3px;
}

& p {
    color: #C4C4C4;
    margin-block-end: 0;
    font-weight: 500;
    /*font-size: 18px;*/
    font-size: 1.17vw;
}

& hr {
    background-color: #809E22;
    border-color: #809E22;
    block-size: 3.5px;
    margin-inline: 10.9vw;
    margin-block-start: 11px;
    opacity: 1;
}

& .btn {
    color: #1f4b1f;
    background-color: #f5f4e8;
    block-size: auto;
    border-radius: 0.35rem;
    &.btn-store{
        position: relative;
        &::after{
            content: 'Coming Soon';
            position: absolute;
            background-color: rgb(245 244 232 / 79%);
            inset-block: 0;
            inset-inline: 0;
            z-index: 1;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            line-height: 3.2;
            border-radius: 2.5rem;
        }
    &:is(:hover,:focus,:active) {
    box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.3);
    
}

}

& + & {
    margin-inline-start: 0.6rem;
}

& .media-img .bx {
    font-size: 40px;
    /*font-size: 2.63vw;*/
    vertical-align: middle;
}

& .media-body {
    text-align: initial;
    & b {
    font-weight: 600;
    font-size: 15px;
    /*font-size: 1.1vw;*/
}

& span {
    font-size: 12px;
    /*font-size: 0.79vw;*/
}

}
}
}
@media screen and (min-width:1499px){
    .banner-text {
        & h5 {
            font-size: 2.4rem;
        }
        & p {
            font-size: 1.1rem;
        }
    }
}
 .g-recaptcha > div{
         display: block;
        margin: auto;
        }
/*===============================
    Home
==============================*/
.servicebox {
    padding: 1.2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0px 0px 0px 0.9px rgb(31 75 31 / 28%);
    border-radius: 0.6rem;
    position: relative;
    & img {
    block-size: 50px;
    object-fit: contain;
}

& h5 {
    margin-block-start: 0.8rem;
    margin-block-end: 0;
    font-weight: calc(var(--font-weight) * 6);
    font-size: 1.05rem;
}

}

.ourservices .media {
    border: 1px solid var(--success-color);
    border-radius: 0.6rem;
    background: linear-gradient(90deg, var(--success-color) 0.1%, #539B5A 99.91%);
    color: #F9F9F9;
    padding: 1rem;
    min-block-size: 65px;
    margin-block-end: 0.7rem;
    aspect-ratio: 2/0.5;
    & .media-img img {
    border-radius: 50%;
    box-shadow: 1px 1px 1px 0.4px #1f4b1f8f;
    inline-size: 45px;
}

}

/*======================*/
.summary-box .card-body {
    background: #dfe5da url('../images/dollar-bg.png') no-repeat left top;
    background-size: cover;
}

.summary-detail {
    background-color: var(--light-yellow);
    padding-block: 2rem 1.5rem;
    padding-inline: 1.7rem;
    border-radius: 0.6rem;
    min-block-size: 8.37rem;
    text-align: center;
    & h2 {
    font-size: 1.8rem;
    font-weight: calc(var(--font-weight) * 6);
}

&:not(:last-child) {
    margin-block-end: 1.75rem;
}

.tracking & {
    background-color: var(--light-yellow);
    padding-block: 0.8rem 0.8rem;
    padding-inline:1.1rem ;
    min-block-size: auto;
}

}

.bg-overlay {
    overflow: hidden;
    &:before {
    content: '';
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    block-size: 100%;
    inline-size: 100%;
    background-color: rgb(0 0 0 / 14%);
    z-index: 5;
}

}

/*========================================
    Branch locator
=======================================*/
.branchlocation-list {
    background-color: rgb(231 231 231 / 23%);
    list-style: none;
    padding-block: 1rem 1rem;
    padding-inline: 0.7rem 1rem;
    margin: 0;
    border-radius: 1rem;
    border: 1px solid #d4d4d4;
    max-block-size: calc(100vh - 25vh);
    overflow-y: auto;
    & li {
    border-block-end: 1px solid #d4d4d4;
    padding-block: 0.7rem 0.8rem;
    padding-inline: 0.7rem;
    cursor: default;
    &:hover, &.toggleLi {
    background-color: #daeed8;
}

&:last-child {
    border-block-end: none;
}

& h4 {
    color: var(--success-color);
    font-size: 16px;
    margin-block-end: 0.1rem;
}

& p {
    margin-block-end: 0;
}

}
}

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
            Table
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.table :is(thead,tbody) :is(td,th) {
    vertical-align: middle;
    border-color: var(--success-color);
    line-height: 1.2;
}

.table thead {
    border-inline-width: 0;
    border-block-width: 1px;
    border-color: var(--success-color);
    & th + th {
    border-inline-start: 1px solid var(--success-color)
}

}

.table tbody tr:last-child td {
    border-block-end: 0;
}

.modal .table tbody tr:last-child td {
    border-block-end: 1px solid;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Form
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.form-label {
    margin-block-end: 0.2rem;
    font-weight: calc(var(--font-weight) * 6);
}

.search-input .btn {
    min-inline-size: 70px;
    font-size: 1.25rem;
}

.form-control, .form-select, .btn:not(label.btn), .input-group-text {
    border-radius: 2.5rem;
}

select.form-control {
    background-image: url(../images/arrow-down1.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center right 6px;
    padding-block: 0.375rem 0.75rem;
    padding-inline: 1.45rem 0.375rem;
}

.input-group-text {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--bs-white);
    border-inline-end: 2px solid;
    min-inline-size: 82px;
    justify-content: center;
}

:is(.form-control, .form-select):is(:focus) {
    box-shadow: 0 0 8px 0.05rem rgb(72 108 54 / 26%);
    border-color: var(--light-yellow);
}


.form-select, .form-control, .btn {
    font-size: 0.9rem;
    block-size: 45px;
    line-height: 1.9;
}

.form-select, .form-control {
    background-color: var(--light-yellow);
    border: 1px solid var(--light-yellow);
}

.form-control1 {
    background-color: var(--light-yellow);
    block-size: 50px;
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    font-size: 0.9rem;
    font-weight: calc(var(--font-weight) * 4);
    line-height: 2.7;
    color: #212529;
    border-radius: 0.45rem;
}
input:-webkit-autofill,
input:-webkit-autofill:is(:hover,:focus,:active) {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}
/*----------Input file------*/
#documents-container input[type=file]::file-selector-button,#documents-container input[type=file]::file-selector-button:hover {
    background-color:var(--success-color) !important;
    border-color: var(--success-color);
    color: var(--bs-white);
    font-weight:500;
    padding: 0.5em;
    border: thin solid var(--success-color);
    border-radius: 4px;
    cursor: pointer
}
#documents-container input:is([type=text],[type=date]){
    min-width: 100px;
}
#documents-container input[type=file]{
    min-width: 220px;
}
#documents-container .table-responsive{
    overflow: hidden;
    overflow-x: auto;
}
/*===============================
    Button
================================*/
.btn-success {
    color: var(--bs-white);
    background-color: var(--success-color);
    border-color: var(--success-color);
}

    .btn-success:is(:hover,.active:focus,:active:focus,:focus,:active) {
        background-color: rgb(31 75 31 / 85%);
        border-color: rgb(31 75 31 / 85%);
    }

.btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
}


.btn-outline-success {
    background-color: var(--light-yellow);
    &:is(:active,:focus,:active:focus,:hover) {
    color: var(--bs-white);
    background-color: var(--success-color);
    border-color: var(--success-color);
}

}
.btn-outline-primary{ 
    color: var(--success-color);
    background-color: var(--bs-white);
    border-color: var(--success-color);
    &:is(:hover, :focus, :active, :active:focus) {
        color: #fff;
        background-color: var(--success-color);
        border-color: var(--success-color);
}
}
.btn-check:active+.btn-outline-success, 
.btn-check:checked+.btn-outline-success,
 .btn-outline-success.active, 
 .btn-outline-success.dropdown-toggle.show,
  .btn-outline-success:active {
    color: #fff;
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-link{
    color:var(--success-color) !important;
    &:is(:hover,:focus,:active,:active:focus){
        outline: none;
        box-shadow: none;
    }
}
/*==========================
    Radio Group
============================*/
.radio-group .custom-control-label {
    border: 1px solid rgb(26 28 25 / 86%);
    padding: 5px;
    border-radius: 2.5rem;
    margin-block-end: 7.5px;
    display: block;
    text-align: center;
    background-color: var(--light-yellow);
    font-size: 11.5px;
    & input[type=radio] {
    display: none;
}

}

.checked-label {
    background-color: #005318 !important;
    color: var(--bs-white);
}

/*=============================
    Custom checkbox
================================*/
.radio-custom {
    position: relative;
    padding-block: 0;
    padding-inline: 0 25px;
    margin-block-start: 0;
    & input[type="radio"] {
    opacity: 0;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 3px;
    margin-block: -6px 0 ;
    margin-inline: 0;
    z-index: 2;
    cursor: pointer;
    &:checked + label:after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 4px;
    margin-top: -5px;
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    inline-size: 10px;
    block-size: 10px;
    background-color: #157347;
    border-radius: 50px;
    box-shadow: 0px 0px 1px #157347;
}

&:disabled {
    cursor: not-allowed;
}

    &:disabled:checked + label:after {
        color: #999;
    }

    &:disabled + label {
        cursor: not-allowed;
    }

        &:disabled + label:before {
            background-color: #eee;
        }

}

& label {
    cursor: pointer;
    margin-block-end: 0;
    text-align: start;
    line-height: 1.2;
    &:before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    margin-block-start: -9px;
    inline-size: 18px;
    block-size: 18px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #157347;
    background: var(--bs-white);
}

}
}


/*=============================
    Custom Radio
================================*/
.checkbox-custom {
    position: relative;
    padding-block: 0;
    padding-inline: 0 25px;
    margin-block-end: 7px;
    margin-block-start: 0;
    & input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 3px;
    margin-inline: 0;
    margin-block: -6px 0;
    z-index: 2;
    cursor: pointer;
    &:checked + label:after {
    position: absolute;
    display: inline-block;
    font-family: "boxicons" !important;
    content: "\ea41";
    inset-block-start: -1px;
    inset-inline-start: 0;
    font-size: 20px;
    line-height: 1;
    inline-size: 16px;
    block-size: 16px;
    font-weight: bold;
    color: #157347;
}

&:disabled {
    cursor: not-allowed;
}

    &:disabled:checked + label:after {
        color: #999;
    }

    &:disabled + label {
        cursor: not-allowed;
    }

}

& label {
    cursor: pointer;
    margin-block-end: 0;
    text-align: start;
    line-height: 1.5;
    &:before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    margin-block-start: -9px;
    inline-size: 19px;
    block-size: 18px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #157347;
    background: var(--bs-white);
}

}
}

/*==================================
    Flag Switcher
==================================*/
.flag-switcher {
    position: relative;
    block-size: 42px;
    & label {
    block-size: 100%;
    display: block;
    background: var(--success-color);
    border-radius: 2.5rem;
    padding: 1.5px;
}

& input[type=checkbox] {
    display: none;
}

}

.switch-input ~ b {
    position: absolute;
    inline-size: calc(100% - 3.5px);
    &:before {
    position: absolute;
    content: '';
    inline-size: 10.3em;
    block-size: 37px;
    border-radius: 2.5rem;
    background: var(--light-yellow);
    inset-block-start: 1px;
    inset-inline-start: 1px;
    z-index: 2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

}

.switch-input:checked ~ b:before {
    inset-inline-start: calc(100% - 10.3em);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.switch-input ~ .currency-flag span {
    color: #212529;
    font-size: 14px;
    &:last-child {
    color: var(--bs-white)
}

}

.switch-input:checked ~ .currency-flag span {
    color: var(--bs-white);
    &:last-child {
    color: #212529
}

}

.flag-switcher .currency-flag {
    display: flex;
    position: relative;
    z-index: 3;
    block-size: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.75em;
    & img {
    inline-size: 30px;
    vertical-align: top;
    margin-inline-start: 0.4rem;
}

}


/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Modal
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
.modal-title {
    font-size: 1.35rem;
    font-weight: calc(var(--font-weight) * 6);
}

.modal :is(.form-select, .form-control) {
    background-color: var(--bs-white);
    border: 1px solid var(--success-color);
}

.modal :is(.form-select[disabled], .form-control[disabled],.form-control[readonly]) {
    background-color: #ecede6;
    border: 1px solid #ecede6;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Swal Modal
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Google Map
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
#map {
    block-size: calc(100vh - 25vh);
    inline-size: 100%;
    /* box-shadow: 0px 0px 3px 2px rgb(51 52 56 / 11%); */
    border: 1px solid #d4d4d4;
    border-radius: 1rem;
}
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Media queries
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media (min-width: 1200px) {
   body:has(mobile-pages) .h2, h2 {
        font-size: 1.8rem;
    }
}
@media (min-width: 992px) {
    .main-container {
        flex: 1;
        padding-inline: 0;
        padding-block: 1.6rem 4.5rem;
    }

    .servicebox {
        padding-inline: 0;
        padding-block: 1.8rem;
    }
}

@media (max-width: 991px) {
    .main-container:has(.mobile-pages) {
            padding-block: 0.6rem 0;
        
    }
    body:has(mobile-pages) .h2, h2 {
        font-size: 1.4rem;
    }
    .tmt-webnavbar .dropdown-menu {
        font-size: 0.8rem;
        border: none;
        box-shadow: 4px 5px 6px 1px rgb(0 0 0 / 9%);
        inset-inline-end: 0;
        inset-inline-start: auto;
        box-shadow: none;
    }

    .tmt-webnavbar .navbar-nav {
        margin-block-start: 0.7rem;
        padding-block: 0;
        padding-inline: 1.4rem;
    }
    .tmt-webnavbar {
        & .dropdown-toggle::after {
        background: url(../images/arrow-down.png) no-repeat center right;
        inline-size: 22px;
        
    }
}
    .summary-box {
        margin-block-start: 1rem;
    }

    .branchlocation-list {
        margin-block-start: 1.3rem;
    }

    .tmt-webnavbar {
        margin-block-end: 0rem;
        z-index: 7;
    }

        .tmt-webnavbar .navbar-brand img {
            inline-size: 155px;
        }

    .h4, h4 {
        font-size: 1.3rem;
        font-weight: calc(var(--font-weight) * 6);
    }

    .tmt-webnavbar .nav-item.border-start {
        border: 0 !important
    }
    /*====================
        navbar slide
    =====================*/
    .tmt-webnavbar .bg-light {
        margin-block-end: 0rem !IMPORTANT;
    }

    .navbar-toggler {
        position: absolute;
        inset-block-start: 16px;
        inset-inline-start: 10px;
    }

    .tmt-webnavbar .navbar > .container {
        justify-content: center;
    }

    .tmt-webnavbar .collapse:not(.show) {
        display: block;
    }

    .tmt-webnavbar .navbar-collapse {
        inset-block-start: 65px;
        block-size: calc(100vh - 65px);
        inline-size: 320px;
        inset-inline-start: 0;
        inset-block-end: 0;
        position: fixed;
        z-index: 0;
        background-color: var(--bs-white);
        transform: translateX(-100%);
        transition: transform 0.3s;
        &.toogle-navbar-collapse {
    transform: translateX(0);
    transition: transform 0.3s;
}

}

.tmt-webnavbar:after {
    inset-block-end: -3.1vw;
}
/*====================
        navbar slide Ends
    =====================*/
.serviceboxs .servicebox h5 {
    font-size: 0.7rem;
}

.main-container {
    margin-block-start: 1rem;
}

.select-hours :is(.border-start,.border-end) {
    border-color: transparent !important
}

.footer-links-col {
    margin-block-start: 1rem;
    & .footer-links {
    border: 0;
    padding-block: 0 0.8rem;
    padding-inline: 0;
}

& h4 {
    padding-inline-start: 0
}

}

.footer {
    padding-block: 2.05rem 0rem;
    padding-inline: 0.7rem;
    margin-block-start: 2.1rem;
    & .footer-logo {
    inline-size: 175px;
    margin-block-end: 1rem;
}

}
}

@media (max-width: 767px) {
    .servicebox {
        & img {
            block-size: 70px;
            object-fit: contain;
        }
    }
    .banner-text .btn {
        padding-block: 0.275rem;
        padding-inline: 0.25rem;
        & .media-img .bx {
    font-size: 4.53vw;
}

& .media-body span {
    font-size: 8.9px;
}

& .media-body b {
    font-size: 11px;
}

& + .btn {
    margin-inline-start: 0.1rem;
    &.btn-store::after{
        font-size: 0.7rem;
        line-height: 2.9;

    }
}

}

.banner-text hr {
    block-size: 2.8px;
    margin-block:6.5px 7.2px;
}

}

@media (max-width: 575px) {
    [class^="col-"] + [class^="col-"] > .servicebox {
        margin-block-start: 1rem;
    }

    .banner-text .btn {
        font-size: 0.8rem;
        .media-body {
    text-align: initial;
    line-height: 0.8 !IMPORTANT;
    & span {
    font-size: 7px;
}

& b {
    font-size: 9px;
}

}
}
}

/*----------------------------
    Mobile Screens
----------------------*/
body:has(.mobile-pages){
    color: #212529;
}

.mobile-pages{
    height: 100%;
    & .card{
        border:none;
        & .card-body{
            /* padding: 0 !important;*/
            background-color: transparent !important; 
            border: 1px solid rgb(223 229 218);
            box-shadow:2px 2px 6px 1px rgb(223 229 218 / 60%);
        }
    }
   
    /* color: var(--grey-color); */
    &:has(:is(.mcard,.mdetail-list)) .card {
        border:none;
        & .card-body{
            /* padding: 0 !important; */
        }
    } 
    & .g-recaptcha > div{
        margin-inline: auto !important;
    } 
    & :is(h1,h2,h3,h4,h5,h6){
        text-align: center;
        
    }
    & :is(h2){
        font-weight: 300;
    }
    & p{
        color: var(--grey-color);
    }
    
    & .log-page{
        height: 100%;
       & #loginForm .avatar-upload{
        max-width: none;
        margin: 0.7rem;
        margin-bottom: 0;
        aspect-ratio: 1;
        & #imagePreview[style^="background-image:"][style*="placeholder"]{
            width: 85%;
            height: 85%;
        }
        & .avatar-preview{
                aspect-ratio: 1;
                width:auto;
                height: auto;
        }
       }
        & > .row {
            height: 100%;
            & > [class^=col-lg]{
                height: 100%;
                & .card{
                    height: calc(100% - 30px);
                    border-radius: 1.3rem;
                    & .card-body{
                        height: 100%;
                        padding-inline: 1.4rem;
                        padding-block: 2.2rem 1.1rem;
                        border-radius: 1.8rem;
                        & form{
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                        }
                    }
                }
            }
        }
   
    } 
    & > .row {
        height: 100%;
        & > [class^=col-lg]{
            height: 100%;
            & .card{
                height: calc(100% - 44px);
                border-radius: 1.3rem;
                & .card-body{
                    height: 100%;
                    padding-inline: 2.5rem;
                    padding-block: 2rem 2.2rem;
                    border-radius: 1.3rem;
                    & form{
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                    }
                }
            }
        }
    }
    & fieldset{
        margin: initial;
        border: 1px solid #787579;
        padding-block: 0.15em 0.725em;
        padding-inline: 0.75em;
        border-radius: 0.9rem;
        background-color: #fff;
        position: relative;
        color:var(--dark-color);
        &:focus-within{
        border-color: var(--success-color);
        & legend{
            color:var(--success-color);
        }
        & :is(.far,.fas.bx){
            color:var(--success-color)
        }
        }
        & + fieldset{
            margin-block-start: 1rem;
            color:var(--text-dark);
        }
        &.greyed:has(:is(.select-control,.form-control):is([disabled],[readonly])) ,&.greyed:has(:is(.select-control,.form-control):is([disabled],[readonly])) .iti__selected-flag{
                background-color: #e9ecef !important;
        }
            & :is(.fas,.far,.bx){
                position: absolute;
                font-size: 1rem;
                inset-inline-end: 1rem;
                inset-block-start: 0.3rem;
            }
            & .fa-eye::before {
            content: '';
            background: url(../images/eye.png) no-repeat center right;
            background-size: 23px;
            height: 18px;
            width: 24px;
            display: block;
            }
            & .fa-eye-slash::before {
                content: '';
                background: url(../images/eye-off.png) no-repeat center right;
                background-size: 23px;
                height: 18px;
                width: 24px;
                display: block;
                }
        }
    & legend{
            float: none;
            width: auto;
            padding: 0;
            margin-bottom: initial;
            padding-inline: 0.3rem 0.4rem;
            font-size: 0.8rem;
            line-height: inherit;
            color: #484649;
        }
      & :is(.form-control,.form-select):not(.otp-fake-input)  {
            background-color: transparent;
            border: 1px solid var(--light-yellow);
            border-radius: 0;
            border-color: transparent;
            block-size: 25px;
            padding-inline: 0.2rem;
            padding-block: 0;
            color:var(--dark-color);
            caret-color: var(--success-color);
            line-height: 1;
            &:focus{
                outline: none;
                box-shadow: none;
            }
            
           
        }
        & .form-control.otp-fake-input{
            border-block-end: 1.4px solid var(--success-color);
            border-radius: 0 !IMPORTANT;
            background-color: #fff;
            margin-inline: 0.15rem ! IMPORTANT;
            width: 45px !important;
            height: 32px !important;
           & .otp-content{
                font-size: 27px  !important;
                font-weight: 400  !important;
                color: currentColor !important;
            }
        }
        & .otp-fake-input.otpdesigner__focus__{
            border-color:  var(--success-color) !important;
            border-width: 1px 1px 2px 1px;
        }
        & :is(.iti input, .iti input[type=tel], .iti input[type=text]){
            border-color: transparent !important;
            outline: none;
            width: 100%;

            &:focus,&:focus-visible{
                border-color: transparent !important;
                outline: none;

            }
        }
    & :is(.btn:not(label.btn)){
        border-radius: 0.8rem;
        &:is(.btn-block){
            height: 47px;
        }
        }
    & :is(a:not(.btn),button:not(.btn)){
        color:var(--success-color);
        font-weight: 400;
        text-decoration: none;
    }  
    & .form-select, .form-control, .btn.d-block{
        block-size: 50px;
    }
    & .profile-list{
        list-style: none;
        margin: 0;
        padding: 0.8rem 1.7rem;
        background-color: var(--light-yellow);
        border: 1px solid var(--grey-color);
        border-radius: 1.5rem;
        & li{
            padding: 1rem 0;
            font-size: 1rem;
            display: flex
;
            align-items: center;
            word-wrap: break-word;
            word-break: break-word;
            line-height: 1.2;

            
            & + li{
                border-block-start: 1px solid var(--grey-color);
            }
            & :is(.fas,.far){
                margin-inline-end: 1rem;
                font-size: 17px;
                vertical-align: bottom;
            }
        }
      
    }
    & .user-avarter{
        block-size: 130px;
        inline-size: 130px;
        margin-inline: auto;
        text-align: center;
        border: 1px solid var(--success-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-block-end: 0.6rem;
        background-color: var(--light-yellow);


    & img{
        
    }
       } 
       & .transactions-list {
        list-style: none;
        margin: 0;
        padding:0;
        max-height: 55vh;
        overflow-y: auto;
        padding-inline: 0.3rem;
        & li {
            border:1px solid var(--grey-color);
            border-radius: 1.4rem;
            background-color: #fff;
            position: relative;
             & > a:has( + a){
                    position: relative;
                     &::before{
                        content: '';
                    position: absolute;
                    width: 100%;
                    height: calc(100% + 1rem);
                    inset-block-start: 0;
                    inset-inline-start: 0;
                     }
                }
                & > a:has( + a) .list-stauts{
                    border-radius: 0 !important;
                    margin-block-end: 1rem;
                    position: relative;
                    display: block;
                    &::before {
                    content: '\27A7';
                    font-size: 2.5rem;
                    position: absolute;
                    inset-inline: 50%;
                    inset-block-start: 3px;
                    transform: rotate(90deg);
                    color: var(--success-color);
                    z-index: 2;
                    direction: ltr;

                    }
                }
                & > a + a {
                    position: relative;
                    display: block;
                    
                }
            & + li {
                margin-block-start:1.1rem;
            }
            & .list-info{
                display: grid;
                grid-template-columns: 50px 1fr 1fr;
                padding: 1.2rem 1.7rem 1.3rem;
                align-items: center;
                
                & .stretched-link {
                    & :is(.fas,.far){
                        font-size: 1.2rem;
                        vertical-align: middle;
                    }
                }
               
                & .list-name{
                    font-size: 1.3rem;
                }
                & .list-date{
                    font-size: 1rem;
                }
                & .list-amount{
                    font-size: 1.4rem;
                    text-align: end;
                    display: flex;
                    justify-content: end;
                    & .payment-fee{
                    display: block;
                     font-size: 1rem;
                    text-align: end;
                    }
                }
            }
            & .list-stauts{
                font-size: 1.2rem;
                text-align: center;
                padding-block: 0.2rem 0.4rem;
                padding-inline: 2rem;
                border-block-start: 1px solid currentColor;
                display: block;
                border-radius: 0 0 1rem 1rem;
                position: relative;
                & .status-icon{
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    text-align: center;
                    padding: 2px;
                    background-color: #fff;
                     font-size: 0.8rem;
                     margin-inline-end: 0.5rem;
                    & :is(.fas,.far,.bx){
                        
                        vertical-align: middle;
                    }
                }
                & .rem-numb {
                    position: absolute;
                    inset-inline-start: 2rem;
                    inset-block-start: 50%;
                    transform: translateY(-50%);
                }
            }



            & :is(b,strong,small){
                font-weight: normal;
                display: block;
            }
            &.green_trans {
                border-color:#5DAA10;
                & .list-info{
                    & :is(.fas,.far,.bx){
                        color:#5DAA10;
                    }
                   
                    & .list-amount{
                        color:#5DAA10;
                    }
                   
                }
                & .list-stauts{
                    color:#fff;
                    background-color: var(--green_trans_color);
                    
                }
            }
            &.blue_trans {
                border-color:#30A3E3;
                & .list-info{
                    & :is(.fas,.far,.bx){
                        color:#30A3E3;
                    }
                   
                    & .list-amount{
                        color:#30A3E3;
                    }
                   
                }
                & .list-stauts{
                    color:#fff;
                    background-color: var(--blue_trans_color);
                    
                }
            }
            &.red_trans {
                border-color:#DE5454;
                & .list-info{
                    & :is(.fas,.far,.bx){
                        color:#DE5454;
                    }
                   
                    & .list-amount{
                        color:#DE5454;
                    }
                   
                }
                & .list-stauts{
                    color:#fff;
                    background-color: var(--red_trans_color);
                    
                }
            }
            &.black_trans {
                border-color:#212529;
                & .list-info{
                    & :is(.fas,.far,.bx){
                        color:#212529;
                        transform: scaleY(-1);
                    }
                   
                    & .list-amount{
                        color:#212529;
                    }
                   
                }
                & .list-stauts{
                    color:#fff;
                    background-color: var(--black_trans_color);
                    
                }
            }
            
        }
        
       }


       & .forex-list{
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 55vh;
        overflow-y: auto;
        padding-inline: 0.5rem;
        & li {
            border: 1px solid var(--grey-color);
            border-radius: 1.4rem;
            background-color: #fff;
            
            & + li {
                margin-block-start: 1.1rem;
            }
            & :is(b,strong,small) {
                font-weight: normal;
                display: block;
            }
            & .trans-amout{
                display: grid;
                grid-template-columns:  1fr 32px 1fr;
                padding: 1.5rem 1.9rem 0rem;
                font-size: 1.1rem;
                text-align: center;
                & :is(.fas,far,.bx){
                    text-align: center;
                }
            }
            & .trans-feerates{
                display: grid;
                grid-template-columns: 1fr 1fr;
                text-align: center;
                font-size: 0.9rem;
            }
            & .trans-date{
                text-align: center;
                display: block;
                padding-block-end: 0.6rem;
            }
            & .trans-number{
                font-size: 0.85rem;
                text-align: center;
                padding-block: 0.5rem 0.4rem;
                border-block-start: 1px solid currentColor;
                display: block;
                border-radius: 0 0 1rem 1rem;
                color: #fff;
                background-color: #737373;
            }

        }
       }
       & [data-otpdesigner-id]{
        background-color: #fff;
        
       }
       & .list-pagination {
        justify-content: center;
        margin-block: 1rem 0;
        align-items: center;
        width: 230px;
        max-width: 100%;
        margin: 0 auto 0;
        padding: 0.6rem 1rem 0.4rem;
        column-gap: 0.5rem;
        & li {
            &:is(:first-child.active.page-item) {
                margin-inline-start: auto;
            }
            &:is(:first-child.page-item:not(.active))  {
                margin-inline-end: auto;
            }
            &:is(:last-child.page-item:not(.active))  {
                margin-inline-start: auto;
            }
            &:last-child.page-item.active {
                margin-inline-end: auto;
                cursor: no-drop;
            }
            & .page-link{
                width: 30px;
                height: 30px;
                padding: 0;
                font-size: 1rem;
                text-align: center;
                display: block;
                &:focus{
                    box-shadow: 0 0 0 .25rem rgb(31 75 31 / 32%);
                }
            }
            &:not(.active):is(:first-child,:last-child) .page-link{
                font-size: 1.5rem;
                border: 0;
                width: auto;
         }
         & .page-link:not([rel="next"],[rel="prev"]){
            border-radius: 50%;
            background-color: var(--success-color);
            box-shadow: 1px 3px 3px rgb(31 75 31 / 45%);
            color:#bcd3bc;
            line-height: 2;
            font-size: 0.9rem;
            display: block;
                
        }
        &.active .page-link:not([rel="next"],[rel="prev"]){
            color: #fff;
            font-weight: 600;
        }
       
        }
        
     
    }
}
@media (max-width: 991px) {
    .mobile-pages {
        & .log-page {
        & #loginForm .avatar-upload {
            margin: 0;
        }
        }
    & legend {
        padding-inline: 0.1rem 0.1rem;
        font-size: 0.75rem;
    }
    & .transactions-list {
        & li {
              & .list-info {
                & .list-name {
                    font-size: 1.1rem;
                }
            }

            & .list-stauts {
                font-size: 1rem;
            }
        }
    }
}
}
@media (max-width: 575px) {
    .mobile-pages{
        & .transactions-list {
        & li {
                        & > a:has(+ a) .list-stauts {
                &::before {
                    inset-block-start: 3rem;
                }
            }
            & .list-info{
                grid-template-columns: 23px 1fr 1.2fr;
                padding: 1.2rem 0.9rem 1.3rem;
                
                & .list-name{
                    font-size: 0.9rem;
                }
                & .list-date{
                    font-size: 0.75rem;
                }
                & .list-amount{
                    font-size: 1rem;
                }
            }
            & .list-stauts{
                font-size: 1rem;
                padding-block: 0.2rem 0.4rem;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                & .rem-numb{
                    inset-inline-start: 0.8rem;
                    font-size: 0.85rem;
                }
            }

            
        }
        
       }
       & .switch-wrapper2 {
        & .switch2 + b {
            block-size: 38px;

        }
        & strong {
            &::before,&::after {
                font-size: 15px;

            }
        }
    }
    & .forex-list{
        & li {
            & + li {
                margin-block-start: 1.1rem;
            }
          
            & .trans-amout{
                padding: 1.5rem 0.5rem 0rem;
                font-size: 0.85rem;
               
            }
            & .trans-feerates{
                font-size:0.82rem;
            }
            & .trans-date{
                padding-block-end: 0.4rem;
                font-size: 0.82rem;
            }
            & .trans-number{
                font-size: 0.85rem;
                padding-block: 0.5rem 0.4rem;
            }
    
        }
       }
}


}




.iti {
    direction: ltr;
    display: block;
}
.iti-mobile .iti--container{
    max-height: 234px !important;
}
.iti--separate-dial-code .iti__selected-flag {
    background-color: #fff !important;
    border-inline-end: 1px solid #787579;
}
.flex-cardbody {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/*---------Send Remittance-------------*/
.mcard{
    border:1px solid var(--success-color);
    background-color: var(--light-yellow);
    padding: 1rem 1.5rem;
    color: var(--light-dark-color);
    border-radius: 1.3rem;
    & + & {
        margin-block-start: 1rem;
    }
    & .table{
        margin-block-end: 0;
        & :is(th,td,thead,tbody){
            border: 0;
        }
        & :is(th,td):first-child{
            color:var(--success-color);
        }
        & caption {
            text-align: center;
            font-size: 0.8rem;
        }
    }
}
/*---------Remittance Status-----*/
.stat-remittance{
    position: relative;
    font-size: 1.1rem;
    text-align: center;
    padding-block: 0.7rem;
    border-radius: 1.3rem;
    color: #fff;
    font-weight: 500;
    
    &::before{
        content: '';
        content: '';
        display: inline-block;
        /*background: url(../images/down-arrow-doubleW.png) no-repeat center center;*/
        background-size: 9px;
        width: 22px;
        height: 11px;
        vertical-align: middle;
    }
}
.stat-green{
    background-color: var(--green_trans_color);
}
.stat-blue{
    background-color: var(--blue_trans_color);
}
.stat-red{
    background-color: var(--red_trans_color);
}
.stat-grey{
    background-color: var(--grey-color);
}
/*----Remittance Detail-----*/
.mdetail-heading:has(+ :is(.remitdetail-list,.mdetail-list)) {
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding-block: 0.65rem;
    border-block-end: 1px solid var(--light-dark-color);
    display: block;
    border-radius: 1rem 1rem 0 0;
    color: #fff;
    background-color: var(--light-dark-color);
    margin-block-end: 0;
    &.Green-trans-BG-Col{
        background-color: var(--green_trans_color);
        border-color: var(--green_trans_color);
    }
    &.Red-trans-BG-Col{
        background-color: var(--red_trans_color);
        border-color: var(--red_trans_color);
    }
    &.Blue-trans-BG-Col{
        background-color: var(--blue_trans_color);
        border-color: var(--blue_trans_color);
    }
    &.Black-trans-BG-Col{
        background-color: var(--black_trans_color);
        border-color: var(--black_trans_color);
    }
}
.mdetail-heading + :is(.remitdetail-list,.mdetail-list) {
    border-radius: 0 0 1.4rem 1.4rem;
}
.remitdetail-list,.mdetail-list{
    list-style: none;
    padding: 0 1rem 0.4rem 1rem;
    margin: 0;
    border: 1px solid var(--grey-color);
    background-color: var(--light-yellow);
    border-radius: 1.4rem;
    color: var(--light-dark-color);
    max-height: 53.7vh;
    overflow-y: auto;
    & h4{
        font-size: 0.85rem;
        text-align: center;
        padding-block: 0.6rem;
        margin-inline: -1rem;
        border-block-end: 1px solid var(--light-dark-color);
        display: block;
        border-radius: 1rem 1rem 0 0;
        color: #fff;
        background-color:var(--light-dark-color);
    }
    & li {
        display: flex;
        padding-block: 0.5rem;
        & + li{
            border-block-start:1px solid rgb(115 115 115 / 30%)  ;
        }
        & > :not(span:first-child,span:first-child:last-child:only-child,span:last-child:only-child,span:last-child) {
            padding-inline: 1rem;
        }
        & span {
            flex:1;
            & + span:last-child{
                text-align: end;
            }
            & .lbl-val{
                font-size: 1.2rem;
                line-height: 1;
            }
            & .lbl{
                font-size: 0.8rem;
                color: var(--grey-color);
                margin-top: 0.4rem;
                line-height: 1.25;
            }
            & b {
                font-weight: normal;
                display: block;
            }
            & + span{
                border-inline-start: 1px solid rgb(115 115 115 / 30%);

            }
        }
       
       
    }
}
@media (max-width: 575px) {
    .mobile-pages{
        .card{
            & .card-body{
                padding-inline: 0.9rem !important;
                padding-block: 1.8rem 1.2rem !important;
                & .mcard{
                    padding: 0.7rem 0.6rem;
                }
                .remitdetail-list ,.mdetail-list{
                    & li {
                        & span {
                            & .lbl-val {
                                font-size: 0.9rem;
                            }
                            & .lbl {
                                font-size: 0.75rem;
                            }
                        }
                    }
                }
            }
        }
       

    }
    
}
/*------------------------
Form
--------------------*/
.mobile-pages{
   & :is(.btn-group, .btn-group-vertical):has(.btn-check){
    display: flex;
    }
    & .btn-group:has(.btn-check) label.btn{
        line-height: 2.2;
    }
    & .btn-group:has(.btn-check) label.btn:nth-child(2){
         border-start-start-radius:0.8rem;
         border-start-end-radius:0;
         border-end-start-radius:0.8rem;
         border-end-end-radius:0;
    }
    & .btn-group:has(.btn-check) label.btn:last-child{
        border-start-start-radius:0;
         border-start-end-radius:0.8rem;
         border-end-start-radius:0;
         border-end-end-radius:0.8rem;
   }
   & .form-select{
    appearance: none;
    -webkit-appearance: none;
    background: url(../images/arrow-r.png) no-repeat center right 6px;
    background-size: 8px;
   }
   & .form-control[type=date]{
    background: url(../images/calendar.png) no-repeat center right 6px;
    background-size: 14px;
    &::-webkit-calendar-picker-indicator{
    opacity: 0;
    }
   }
  & .btn.btn-icon {
    height:50px;
    & + & {
        margin-inline-start: 1rem;
    }
  }
}
/*-----Checkbox------------*/
.tcheckbox{
    display: flex;
    column-gap: 0.7rem;
    & + &{
    margin-block-start: 0.7rem;
    }
    & label{
        color:var(--light-dark-color)
    }
& input[type='checkbox'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 0;
    border: 1.9px solid #000;
    vertical-align: middle;
    &:checked {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAACECAYAAAB79HIIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMC1jMDAwIDc5LjE3MWMyN2ZhYiwgMjAyMi8wOC8xNi0yMjozNTo0MSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIzNzRGQzg5QkUwQTExRUZBNzA5RDg5ODY3MDE1NDQyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIzNzRGQzhBQkUwQTExRUZBNzA5RDg5ODY3MDE1NDQyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjM3NEZDODdCRTBBMTFFRkE3MDlEODk4NjcwMTU0NDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjM3NEZDODhCRTBBMTFFRkE3MDlEODk4NjcwMTU0NDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4z3SxLAAAMgklEQVR42uxd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');
        background-size: 90%;
        background-position: right center;
        background-repeat: no-repeat;
    }
    
}
& label{
    flex:1;
}
}

    
/*-----------------------------
    Avarter
-------------------------------*/
.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 1rem auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        inset-inline-end: 10px;
        z-index: 1;
        inset-block-end: 0px;
    }

        .avatar-upload .avatar-edit input {
            display: none;
        }

            .avatar-upload .avatar-edit input + label {
                display: inline-block;
                width: 34px;
                height: 34px;
                margin-bottom: 0;
                border-radius: 100%;
                background: #FFFFFF;
                border: 2px solid var(--grey-color);
                cursor: pointer;
                font-weight: normal;
                line-height: 1;
                transition: all 0.2s ease-in-out;
            }

                .avatar-upload .avatar-edit input + label:hover {
                    background: #f1f1f1;
                    border-color: #d6d6d6;
                }

                .avatar-upload .avatar-edit input + label:after {
                    content: "\002B";
                    color: var(--grey-color);
                    font-size: 27px;
                    position: absolute;
                    bottom: 8px;
                    inset-inline: 0;
                    text-align: center;
                    margin: auto;
                }

    .avatar-upload .avatar-preview {
        width: 160px;
        height: 160px;
        position: relative;
        border-radius: 100%;
        border: 3px solid var(--grey-color);
        background-color: var(--light-yellow);
    }

        .avatar-upload .avatar-preview > div {
            width: 100%;
            height: 100%;
            border-radius: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
       .avatar-upload:has(#imagePreview[style^="background-image:"][style*="placeholder"]) .avatar-preview{
            border: 3px dotted var(--grey-color);
        }
        .avatar-upload:not(:has(#imagePreview[style^="background-image:"][style*="placeholder"])) .avatar-edit input + label:after{
            content: "\2716";
            font-size: 20px;
            bottom: 11px;
        }
        .avatar-upload #imagePreview[style^="background-image:"][style*="placeholder"]{
            width: 110px;
            height: 110px;
            background-size: contain;
        }
        .avatar-upload:has(#imagePreview[style^="background-image:"][style*="placeholder"]) .avatar-preview{
            display: flex;
            align-items: center;
            justify-content: center;
        }
 /* ------switcher------ */
.switch-wrapper2 {
	position:relative;
    max-width: 500px;
    margin: 0 auto;
    & > label{
        display: block;
    }
    & input[type=checkbox] {
        display: none;
    }
   & .switch2:checked + b {
        background:#fff;
        transition:all 0.3s;
        & ~ strong{
            &::after{
                color: #fff;
                transition: all 0.3s;
            }
            &::before{
                color:var(--dark-color);
                transition: all 0.3s;
            }
        }
    }
    & .switch2:checked + b:before {
        inset-inline-start: 50%;
        transition: all 0.3s;
    }
   & .switch2 + b {
    background: #fff;
    border: 1px solid var(--success-color);
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 100%;
    display: block;
    block-size: 45px;
    border-radius: 22px;
    transition: all 0.3s;
        &:before {
            position: absolute;
            content: '';
            inline-size: 50%;
            block-size: 100%;
            border-radius: 22px;
            background: var(--success-color);
            inset-block-start: 0;
            inset-inline-start: 0;
            z-index: 2;
            transition: all 0.3s;
        }
    }
    & strong{
        inline-size: 100%;
        display: block;
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 5; 
        line-height: 2.5;
        &:after {
            content: 'Forex';
            position: absolute;
            inset-block-start: 0;
            inset-inline-end: 0;
            z-index: 2;
            inline-size: 50%;
            font-size: 18px;
            font-weight: normal;
            text-align: center;
            display: inline-block;
            transition: all 0.3s;
        }
        &:before {
            position: absolute;
            content: 'Remittance';
            inset-block-start: 0;
            inset-inline-start: 0;
            z-index: 2;
            font-size: 18px;
            font-weight: normal;
            inline-size: 50%;
            text-align: center;
            color:#fff;
            transition: all 0.3s;
        }
    }
   
}
  /*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Loader
  \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
  /*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Loader
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
 .inline-loader {
    position: relative;
    &:after {
        content: "";
        position: absolute;
        background: url(../images/Ellipsis.gif) no-repeat;
        background-size: 75px;
        background-position: center;
        inline-size: 100px;
        block-size: 50px;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%,-50%);
        z-index: 55;
    }  &:before {
        content: '';
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        block-size: 100%;
        inline-size: 100%;
        background-color: rgba(255,255,255,0.7);
        z-index: 50;
    }
}
    
    .block-loader {
        position: relative;
        &:before {
            position: fixed;
            content: '';
            position: fixed;
            inset-block-start: 0;
            inset-inline-start: 0;
            block-size: 100%;
            inline-size: 100%;
            background-color: rgba(255,255,255,0.7);
            z-index: 2000;
        }
        &:after {
            content: "";
            position: fixed;
            background: url(../images/notch-loader.gif) no-repeat;
            background-size: 75px;
            background-position: center;
            inline-size: 100px;
            block-size: 100px;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            transform: translate(-50%,-50%);
            z-index: 2005;
        }
    }
    
        
 /*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    Scrollbar
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
body::-webkit-scrollbar {
    inline-size: 12px;
    -webkit-appearance: none;
}

::-webkit-scrollbar {
    inline-size: 7px;
    block-size: 4px;
    -webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
    background-color: var(--success-color) !important;
    border-radius: 0;
    border: 2px solid var(--bs-white) !important;
    border-inline-width: 2px !IMPORTANT;
    border-block-width: 0 !IMPORTANT;
    block-size: 40px;
}

body::-webkit-scrollbar-thumb {
    border: 1px solid var(--bs-white) !important;
}

body::-webkit-scrollbar-track {
    margin-block: 0;
    margin-inline: 0;
    border: 1px solid rgb(212 212 212 / 72%);
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: var(--bs-white);
    border: 2px solid rgb(212 212 212 / 72%);
    border-block-width: 0 !IMPORTANT;
    border-inline-width: 2px !IMPORTANT;
    margin-block: 1vw;
    margin-inline: 0;
}   
    
.mdetail-list::-webkit-scrollbar-track{
    margin-block-end: 1.5rem;
}