:root {
    --SA-25:#f7fdf9;
    --SA-50:#F3FcF6;
    --SA-100:#DFF6E7;
    --SA-200:#b8eacb;
    --SA-300:#88D8AD;
    --SA-400:#54c08a;
    --SA-500:#25935F;
    --SA-600: #1B8354;
    --SA-700:#166a45;
    --SA-800:#14573A;
    --SA-900:#104631;
    
    --Gray-25:#fcfcfd;
    --Gray-50:#F9FAFB;
    --Gray-100:#f3f4f6;
    --Gray-200:#e5e7eb;
    --Gray-300:#D2D6Db;
    --Gray-400:#9da4ae;
    --Gray-700:#384250;
    --Gray-800:#1f2a37;
    
    --Success-25:#F6FEF9;
    --Success-50:#ECFDF3;
    --Success-600:#079455;
    --Success-700:#067647;
    --Success-800:#14573a;
    
    --Error-50:#fef3f2;
    --Error-100:#fee4e2;
    --Error-300:#fda29b;
    --Error-500:#f04438;
    --Error-700:#B42318;
    
    --Info-600:#1570EF;
    --secondary-color: #DBA102;
    --tertiary-color: #80519F;
    
    --text-default:#161616;
    --spacing-0: 0px;
    --spacing-0-5: 2px;
    --spacing-1:4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --spacing-40: 160px;
    --spacing-48: 192px;
    --spacing-56: 224px;
    --spacing-64: 256px;
    --spacing-96: 384px;
    --spacing-80: 320px;
    --spacing-120: 480px;
    --spacing-140: 560px;
    --spacing-160: 640px;
    --spacing-180: 720px;
    --spacing-192: 768px;
    --spacing-256: 1024px;
    --spacing-320: 1280px;
    --spacing-360: 1440px;
    --spacing-400: 1600px;
    --spacing-480: 1920px;
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
    --shadow-2xl:0px 240px 48px -12px rgb(16 24 40 / 18%);
    --shadow-inset: inset 0px 0 4px 2px rgba(0, 0, 0, 0.05);
}

[lang*=ar] * {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

[lang*=en] * {
    font-family: "IBM Plex Sans", sans-serif !important;
}

[lang*=ar] body {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

[lang*=en] body {
    font-family: "IBM Plex Sans", sans-serif !important;
}

p {
    color: var(--Gray-700);
    line-height:28px !important;
}

a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item),.btn-digital-stamp-card{
    text-decoration:none;
    color:var(--SA-600);
}
a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item):visited,.btn-digital-stamp-card:visited{
    color:var(--SA-800);
}
a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item):hover,.btn-digital-stamp-card:hover{
    text-decoration:underline;
    color:var(--SA-400);
}
a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item):focus,.btn-digital-stamp-card:focus{
    outline:2px solid var(--text-default);
}
a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item):active,.btn-digital-stamp-card:active{
    color:var(--SA-300);
    text-decoration:underline;
    
}
a:not(.single-link):not(.action-button):not(.nav-link):not(.dropdown-item):disabled{
    color:var(--Gray-400);
}
img{
    max-width:100%;
}
/*h1,h2,h3,h4,h5,h6{*/
/*    line-height: 38px;*/
/*}*/


.body.grayScale,
.accessibility-open.grayScale,
.privacy-policy.grayScale,
.accibality-btn.grayScale,
.earthquake-alert.grayScale {
    filter: grayscale(100%);
}

.body.lowSaturation,
.accessibility-open.lowSaturation,
.privacy-policy.lowSaturation,
.accibality-btn.lowSaturation,
.earthquake-alert.lowSaturation {
    filter: saturate(0.5);
}

.body.highSaturation,
.accessibility-open.highSaturation,
.privacy-policy.highSaturation,
.accibality-btn.highSaturation,
.earthquake-alert.highSaturation {
    filter: saturate(2);
}

body.enlarge {
    font-size: x-large;
}

body.headerHighlight h1,
body.headerHighlight h2,
body.headerHighlight h3,
body.headerHighlight h4,
body.headerHighlight h5,
body.headerHighlight h6 {
    border: 2px solid var(--Info-600);
}

body.hyberlinkHighlight a {
    border: 2px solid var(--Info-600);
}

body.lineSpacing p,
body.lineSpacing a,
body.lineSpacing h1,
body.lineSpacing h2,
body.lineSpacing h3,
body.lineSpacing h4,
body.lineSpacing h5,
body.lineSpacing h6 {
    line-height: 3;
}

body.animationStop .alert-icon {
    animation-play-state: paused;
}

.grayScale-box.active,
.lowSaturation-box.active,
.highSaturation-box.active,
.box.enlarge-box.active,
.animationStop-box.active,
.lineSpacing-box.active,
.hyberlinkhighlight-box.active,
.headerHighlight-box.active,
.voiceOver-box.active {
    background-color: var(--SA-300) !important;
}

.seizure-box.active,
.visualImpairment-box.active,
.intellectualDisability-box.active,
.mobilityImpairment-box.active,
.colorBlindness-box.active {
    background-color: var(--SA-50) !important;
}

/*#header.landing-page-header.appear .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {*/
/*    color: white !important;*/
/*    background-color:transparent !important;*/
/*}*/
#header{
    box-shadow: var(--shadow-md);
}

.head-title {
    position: relative;
    color: var(--SA-600);
    font-weight: bold;
}

    .head-title::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 5px;
        background-color: var(--secondary-color);
        bottom: -20px;
        right: 0;
        border-radius: 10px;
        animation: load-in .8s ease-in-out;
    }

[lang*=en] .head-title::after {
    right: 100%;
    left: 0;
}

.box {
    border-radius: 16px;
    
    height: 100%;
    padding: 16px;
    border: 1px solid var(--Gray-300);
    background-color: white;
}

    /*.box:hover {*/
    /*    box-shadow: 0 4px 8px -2px rgb(16 24 40 / 15%), 0 2px 4px -2px rgb(16 24 40 / 6%);*/
    /*}*/

.action-button {
    background-color: var(--SA-600);
    padding: 5px 15px;
    border-radius: 4px;
    color: white;
    border: none;
    width: fit-content;
    white-space: nowrap;
    height: 40px;
        display: flex;
    align-items: center;
}

    .action-button:hover {
        background-color: var(--SA-700);
    }
    .action-button:active{
        background-color:var(--SA-900);
    }
    .action-button:checked{
        background-color:var(--SA-900);
    }

    .action-button:focus {
        box-shadow: 0 0 0 3px black;
        outline:1.5px solid white !important;
    }
    .action-button.disabled,.action-button:disabled{
        background-color:var(--Gray-200);
        cursor:auto;
    }

/*.linking-btn {*/
/*    font-weight: 500;*/
/*    color: black;*/
/*    border: 1px solid var(--Gray-200);*/
/*    width: fit-content;*/
/*    padding: 1px 16px;*/
/*    border-radius: 7px;*/
/*    height: 40px;*/
/*}*/

/*    .linking-btn:hover {*/
/*        background-color: #edeff2;*/
/*    }*/
.secondary-dga-button{
    border:none;
    outline:1px solid var(--Gray-200);
    background:transparent;
    color:var(--text-default);
    padding-inline:var(--spacing-3);
    border-radius:4px;
    height: 32px;
    
    
}
.secondary-dga-button:hover{
    background-color:var(--Gray-100);
}
.secondary-dga-button:focus-visible{
    outline:2px solid var(--text-default);
}
.secondary-dga-button:active{
    background:var(--Gray-200);
    outline:1px solid var(--Gray-300);
}

 .about ,.services, .activity, .studies,.strategy {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}


    .sub-header {
        background-color: var(--Gray-100);
        border-top: 1px solid var(--Gray-300);
        position: relative;
        z-index: 1;
        color: var(--SA-800);
    }

    .sub-header.scrolled {
        display: none;
    }

    .sub-header .hgi, .social-media li a .hgi {
        font-size: 23px;
        color: var(--SA-600);
    }

#header {
    position: relative;
    width: 100%;
}
    /*#header .dropdown-toggle,.nav-link{*/
    /*    color:white;*/
    /*}*/
    #header .colored {
        background-color: white;
        box-shadow: 0 2px 2px 0 #00000014;
    }

        #header .colored .dropdown-toggle {
            color: var(--SA-600);
        }


/*.landing{*/
/*    background: linear-gradient(90deg,rgba(27, 131, 84, 0) 0%, rgba(27, 131, 84, 0.79) 35%, rgba(7, 77, 49, 1) 100%);*/
/*    position:relative;*/
/*    height: 100vh;*/
/*    width: 100%;*/
/*}*/
.landing {
    /* background-image: url('/Greenbg.svg');*/
    /*background-size: cover; */
    position: relative;
    height: 100vh;
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    
    
}

/*    .landing img {
        width: 100%;
        height: 100%;
    }*/
.fondationDay-header-logo {
    position: absolute;
    top: 150px;
}
.leaders img {
    width: 100%;
}
/*@media(max-width:991px){*/
/*    .landing-img{*/
/*        display:none;*/
/*    }*/
/*    .landing .tab-content{*/
/*        margin-top:20%;*/
/*    }*/
/*}*/
@media(max-width:576px) {
    .only-icon {
        display: block;
    }

    .full-logo {
        display: none;
    }



    .hide-mobile {
        display: none;
    }
}

@media(min-width:577px) {
    .only-icon {
        display: none;
    }

    .full-logo {
        display: block;
    }

    /*.contactus-home {*/
    /*    display: none;*/
    /*}*/

    /*.contactus-home-box {*/
    /*    display: none;*/
    /*}*/
}

/*.strategy{*/
/*    padding-bottom:80px;*/
     
/*}*/
/*.strategy .container{*/
/*    position:relative;*/
/*    padding-top: 80px;*/
/*}*/
/*.strategy .container::after{*/
/*    position: absolute;*/
/*    content: "";*/
/*    background-image: url("/media/Frame 15.svg");*/
/*    width: 100%;*/
/*    height: 22px;*/

/*    top: 0;*/
/*    left: 0;*/

/*    display: block;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*}*/
.about,.services {
        background-color: var(--Gray-50);
    
    /*background-position: center;*/
    /*background-size: contain;*/
}

    .about .icon-box {
        width: 100px;
        height: 100px;
        background-color: var(--SA-100);
        border-radius: 100%;
        margin: 0 auto 15px;
        padding: 20px;
    }

        .about .icon-box img {
            width: 100%;
        }

    .about .flip-front {
        position: relative;
    }

        .about .flip-front::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background-image: url("/media/card-bg.png");
            background-position: center;
            background-size: cover;
            top: 0;
            left: 0;
            border-radius: inherit;
        }

    .services .hgi {
        font-size: 24px;
        color: var(--SA-600);
    }

    .services .box {
        min-height: 350px;
    }

.news {
    position: relative;
    padding-top: 80px;
}
.news .container{
    position: relative;
    padding-bottom:80px;
}
/*.news .container::after{*/
/*    position: absolute;*/
/*    content: "";*/
/*    background-image: url("/media/Frame-22.svg");*/
/*    width: 100%;*/
/*    height: 29px;*/

/*    bottom: 0;*/
/*    left: 0;*/

/*    display: block;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*}*/
.news-txt .post-date .day {
    background-color: var(--Gray-100);
    color: var(--SA-600);
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    display: block;
    border-radius: 3px 3px 0 0;
}

.news-txt .post-date .month {
    background-color: var(--SA-600);
    color: white;
    border-radius: 0 0 3px 3px;
    padding: 1px 10px;
    display: block;
    font-size: 0.8em;
    line-height: 1.8;
}

.post-content h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post-content .testing > p:first-of-type {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.testing > * {
    display: none;
}

.testing > p:first-of-type {
    display: block;
}

.news-Img {
    height: 250px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    border-radius: 16px;
    position: relative;
}

    .news-Img img {
        border-radius: 16px;
        height: 100%;
        width: 100%;
    }

.news-tags {
    background-color: var(--Gray-50);
    border: 1px solid var(--Gray-200);
    border-radius: 4px;
    font-size: 12px;
    color: var(--Gray-800);
    padding: 2px 15px;
    margin-bottom: 8px;
    display: block;
    width: fit-content;
}

.nav-header {
    background-color: var(--SA-50);
    margin-top:24px;
}
.nav-header h1,.service-hero-section h1{
    font-size:30px;
    color:#161616;
    font-weight:bold;
}
.text-editor h3 {
    color: var(--SA-600);
}

.text-editor h4 {
    color: var(--secondary-color);
}


.privacy-policy {
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 7px;
    width: 100%;
    background-color: rgb(255 255 255 / 95%);
    box-shadow: 0 2px 3px 0 #0000004a;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
}

    .privacy-policy .icon-box {
        color: var(--SA-600);
        background-color: var(--Gray-100);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        font-size: 25px;
    }

#accept-btn {
    background-color: var(--Success-600);
    color: white;
}

    #accept-btn:hover {
        background-color: var(--Success-800);
    }

.earthquake-alert {
    position: fixed;
    z-index: 1000;
    top: 150px;
}

.alert-icon {
    position: relative;
    background: var(--Error-500);
    width: 45px;
    height: 45px;
    border-radius: 100%;
    display: flex;
    margin-right: 12px;
    border: none;
    position: fixed;
    z-index: 100;
    top: 150px;
    right: 0px;
    /*box-shadow: 0 0 0 10px #f443366b;*/
    animation: earthquakeAnimation 0.8s infinite alternate;
}

    /*.alert-icon::after {*/
    /*    position: absolute;*/
    /*    content: "";*/
    /*    width: 65px;*/
    /*    height: 65px;*/
    /*    background-color: var(--Error-100);*/
    /*    border-radius: 100%;*/
    /*    top: -10px;*/
    /*    left: -10px;*/
    /*    z-index:99;*/
    /*}*/

@keyframes earthquakeAnimation {
    0% {
        box-shadow: 0 0 0 0px var(--Error-300);
    }

    100% {
        box-shadow: 0 0 0 5px var(--Error-300);
    }
}

.alert-box {
    border: 1px solid #eee;
    width: 100%;
    max-width: 450px;
    min-width:350px;
    padding: 40px 20px;
    box-shadow: 0 0 2.2px rgba(0, 0, 0, .034), 0 0 5.3px rgba(0, 0, 0, .048), 0 0 10px rgba(0, 0, 0, .06), 0 0 17.9px rgba(0, 0, 0, .072), 0 0 33.4px rgba(0, 0, 0, .086);
    background-color: white;
    top: 120px;
    border-radius: 0px;
    transition: .3s;
}

#alertBox {
    display: none;
}

footer {
    position: relative;
    background-color: #074c30;
/*background-color:rgb(35,31,32);*/
overflow:hidden;
}

    /*footer::before {*/
    /*    position: absolute;*/
    /*    content: "";*/
    /*    background-image: url("/New folder/footer-backeground.svg");*/
    /*    background-position: center;*/
    /*    background-size: contain;*/
    /*    z-index: 1;*/
    /*    bottom: -20px;*/
    /*    left:0;*/
    /*    width: 496px;*/
    /*    height: 487px;*/
    /*}*/

.breadcrumbs-box {
    background-color: var(--Gray-25);
}

.accordion-button:not(.collapsed) {
    color: black;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
        outline: 2px solid black var(--text-default);
}
.accordion-button:active{
    background-color:var(--Gray-200);
}

.about .box .box-icon,.helpandsupport .box .box-icon, .services .box .box-icon, .downloadable .box .box-icon {
    background-color: var(--SA-50);
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .about .box .box-icon img,.helpandsupport .box .box-icon img, .services .box .box-icon img, .downloadable .box .box-icon img {
        width: 100%;
    }
.FAQ .accordion-button:not(.collapsed){
    background-color:white;
}
.FAQ .accordion-button:not(.collapsed):hover {
    background-color: var(--Gray-100);
}
.accordion-item{
        border-radius: 0 !important;
    border-right: none;
border-left: none;

}
.accordion-button{
    border-radius:0 !important;
}
.accordion-button:hover{
    background-color: var(--Gray-100);
}
.accordion-button:active{
    border-color:var(--Gray-300);
    background-color:var(--Gray-200);
}
.accordion-button::focus{
    outline:1px solid ;
}

.nav-pills .nav-link {
    color: var(--Gray-700);
    font-size: 14px;
    position: relative;
}

    .nav-pills .nav-link:hover {
        background-color: var(--Gray-100) !important;
    }

        .nav-pills .nav-link:hover::after {
            position: absolute;
            content: "";
            width: calc(100% - 30px);
            height: 3px;
            background-color: var(--Gray-800);
            right: 15px;
            bottom: 0;
            border-radius: 10px;
        }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: transparent !important;
        color: var(--Gray-700) !important;
        font-weight: 500;
        font-size: 14px;
    }

    .nav-pills .nav-link.active {
        position: relative;
    }

        .nav-pills .nav-link.active::after {
            position: absolute;
            content: "";
            width: calc(100% - 30px);
            height: 3px;
            background-color: var(--SA-600);
            right: 15px;
            bottom: 0;
            border-radius: 10px;
        }

.tab-content {
    box-shadow: none;
    border: none;
}

.search-box .search-text {
    border: none;
    width: 100%;
}

.search-box .search-text-box {
    width: 100%;
    border: 1px solid var(--Gray-300);
    border-radius: 5px;
    padding: 5px;
}

.search-box .search-text:focus {
    outline: none;
}

    .search-box .search-text:focus .search-text-box {
        border: 3px solid red;
    }

.scroll-to-top {
    display: none !important;
}

#accessibilityMainBox {
    display: none;
}

.accibality-btn {
    left: 20px;
    z-index: 1000;
    background-color: var(--SA-600);
    color: white;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    font-size: 25px;
    transition: 0.3s;
    cursor: pointer;
}

.contactus-home {
    position: fixed;
    bottom: 27px;
    right: 0;
    padding: 10px;
    background-color: white;
    border-radius: 7px 0 0 7px;
    box-shadow: 0 1px 3px 0 #00000047;
    z-index: 1000;
    cursor: pointer;
    width: 40px;
    overflow: hidden;
    text-wrap: nowrap;
    transition: .8s;
}


    .contactus-home span {
        margin: 0;
    }

    .contactus-home i {
        font-size: 20px;
        color: var(--SA-600);
    }

    .contactus-home:hover {
        width: fit-content;
    }

.contactus-home-box {
    width: 100%;
    max-width: 450px;
    padding: 35px;
    box-shadow: 0 1px 4px 0 #00000038;
    position: fixed;
    bottom: 2px;
    background-color: white;
    border-radius: 7px;
    z-index: 1000;
    display: none;
    right: 0;
}

    .contactus-home-box p {
        font-size: 22px;
        font-weight: bold;
        color: var(--SA-600);
    }

.contactus-home svg {
    width: 20px;
    height: 20px;
}

.accibality-btn {
    bottom: 20px;
}

.accessibility-open {
    position: fixed;
    z-index: 1001;
    top: 85px;
    left: 0;
    height: calc(100% - 100px);
    width: 100%;
    max-width: 450px;
    overflow-y: scroll;
    background-color: white;
    text-align: right;
    padding: 40px 20px;
    box-shadow: 0 0 2.2px rgba(0, 0, 0, .034), 0 0 5.3px rgba(0, 0, 0, .048), 0 0 10px rgba(0, 0, 0, .06), 0 0 17.9px rgba(0, 0, 0, .072), 0 0 33.4px rgba(0, 0, 0, .086);
}

    .accessibility-open .box {
        height: fit-content;
        cursor: pointer;
    }

        .accessibility-open .box i {
            color: var(--SA-600);
            font-size: 24px;
        }

.fa-xmark {
    background: var(--SA-25);
    color: var(--SA-600);
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.accessibility-boxes .box {
    background-color: var(--SA-50);
    text-align: center;
    border: none;
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .accessibility-boxes .box p {
        color: var(--Gray-700);
        margin: 0;
        font-size: 13px;
    }

    .accessibility-boxes .box svg {
        margin-bottom: 5px;
    }

.sitemap a {
    text-decoration: none;
    color: var(--SA-600);
}

#rateDialogue {
    display: none;
}

.Teams-icon {
    display: none !important;
    position: fixed;
    width: 64px;
    height: 64px;
    background: #2d3a8b;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .Teams-icon a {
        display: block;
    }

        .Teams-icon a img {
            width: 40px;
        }

#rateDialogue {
    display: none;
}

label.required:after {
    color: red;
}

#loading {
    display: none;
    position: fixed;
    z-index: 1000;
    background-color: #00000047;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

    #loading p {
        text-align: center;
        margin-top: 50vh;
        font-size: 22px;
        font-weight: bold;
        color: var(--SA-600);
    }

#jobApplicationField {
    display: none;
}

#JobApplicationSuccess {
    display: none;
}
.form-control,.form-select{
    border-radius: 4px;
}
/*.form-control.is-invalid, .was-validated .form-control:invalid*/
.form-control.is-invalid{
    border-color: var(--Error-700);
    background-image:none;
    padding-left: 12px;
}
.form-select.is-invalid:not([multiple]):not([size]){
    --bs-form-select-bg-icon:none;
}
.form-select.is-invalid{
    border-color: var(--Error-700);
    padding-left: 12px;
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus,.form-control.is-valid:focus,.form-select.is-valid:focus{
    box-shadow:none;
}
/*.form-control.is-valid, .was-validated .form-control:valid*/
.form-control.is-valid{
    background-image:none;
    padding-left: 12px;
    box-shadow:none;
    border-color:#dee2e6;
}
.form-select.is-valid{
    padding-left: 12px;
    border-color:#dee2e6;
}

.form-select.is-valid:not([multiple]):not([size]){
    --bs-form-select-bg-icon:none;
}
.input-line{
    position: relative;
}
.form-control:hover,.form-select:hover{
    border-color:black;
}
/*.form-control:active{*/
/*    border-color:black;*/
/*}*/
.form-control:focus,.form-select:focus{
    border-color:#dee2e6;
    box-shadow: none;
}
.input-line::before{
  content:"";
  position:absolute;
  bottom:0;
  right:50%;
  width:50%;
  height:2px;
  border-radius:0 0 0 6px;
  background-color:black;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s;
}
.input-line.has-danger::before{
    bottom: 25px;
    background-color:var(--Error-700);
}

.input-line:focus-within::before{
  transform:scaleX(1);
}
.input-line::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:50%;
  height:2px;
  border-radius:0 0 6px 0;
  background:black;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s;
}
.input-line.has-danger::after{
    bottom: 25px;
    background-color:var(--Error-700);
}
.input-line:focus-within::after {
    transform:scaleX(1);
}


/*.form-control:checked{*/
/*    border-color:blue;*/
/*}*/

.form-check-input[type=radio]{
    border-color:#6C737F;
    position:relative;
}
.form-check-input:hover[type=radio]{
        box-shadow: 0 0 0 8px var(--Gray-100);
        background-color: var(--Gray-100);
}
.form-check-input:active[type=radio]{
    background-color:#6C737F;
}
.form-check-input:checked[type=radio]{
    --bs-form-check-bg-image:none;
}
.form-check-input:focus[type=radio]{
    box-shadow:none;
}
.form-check-input:checked{
        background-color: var(--SA-600);
    border: 3px solid white;
    outline: 1px solid var(--SA-600);
}
.form-check-input:checked:hover{
    box-shadow: 0 0 0 8px var(--Gray-100);
    background-color:var(--SA-800);
    border-color:var(--Gray-100);
    outline-color:var(--SA-800);
}
.form-check-input:checked:active{
    box-shadow: 0 0 0 8px var(--Gray-100);
    background-color:var(--SA-900);
    border-color:var(--Gray-100);
    outline-color:var(--SA-900);
}
.radioFields .form-check-input.is-invalid ~ .form-check-label, .radioFields .form-check-input.is-valid ~ .form-check-label {
    color: black !important;
}

.radioFields .form-check-input.is-invalid, .radioFields .radioFields {
    border-color: var(--bs-border-color) !important;
}
textarea.form-control:active{
    background-color:var(--Gray-100);
}
input:active[type="text"]{
    background-color:var(--Gray-100);
}
article .table tr td, .table tr th {
    padding: 14px;
}

.table tr th {
    background-color: var(--Gray-100);
    color: var(--Gray-700);
    border: 1px solid var(--Gray-300);
}

.svg-download {
    width: 24px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(303deg) brightness(103%) contrast(101%);
}

.download-btn {
    background-color: var(--SA-600);
    padding: 13px 20px;
    border-radius: 30px;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

    .download-btn:hover {
        background-color: var(--SA-700);
        transition: .3s;
    }

.digital-stamp-card {
    padding: 8px 32px;
    background: var(--Gray-100);
}

    .digital-stamp-card .digital-stamp-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .digital-stamp-card .digital-stamp-header p {
            margin: 0px;
            color: var(--text-default);
            font-size: 14px;
        }

        .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
            cursor: pointer;
        }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
                color: #1B8354;
                font-size: 14px;
            }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card svg,
            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card img {
                transition: 0.3s;
            }

        .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card svg,
        .digital-stamp-card .digital-stamp-header.open .btn-digital-stamp-card img {
            transform: rotate(180deg);
        }

.btn-digital-stamp-card img {
    margin-right: 4px;
    margin-left: 4px;
}

.digital-stamp-card .digital-stamp-body {
    padding-top: 40px;
    padding-bottom: 32px;
    display: none;
}

    /*.digital-stamp-card .digital-stamp-body .digital-stamp-container {*/
    /*    margin-bottom: 32px;*/
    /*    display: flex;*/
    /*    gap: 32px;*/
    /*}*/

        .digital-stamp-card .digital-stamp-body  .digital-box {
            display: flex;
            align-items: flex-start;
            gap: 18px;
        }

            .digital-stamp-card .digital-stamp-body  .digital-box .img-border-rounded {
                display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #067647;
    border-radius: 100%;
    flex: 0 0 48px;
    height: 48px;
            }
            .digital-stamp-card .digital-stamp-body  .digital-box .img-border-rounded img{
                width:24px;
                height:24px;
            }

            .digital-stamp-card .digital-stamp-body  .box h6 {
                margin-top: 0px;
                margin-bottom: 12px;
                color: var(--text-default);
                font-size: 18px;
            }

            .digital-stamp-card .digital-stamp-body  .box .green-text {
                color: #1B8354;
            }

            .digital-stamp-card .digital-stamp-body  .box p {
                margin: 0px;
                color: var(--Gray-700);
                font-size: 16px;
            }

    .digital-stamp-card .digital-stamp-body .stamp-link-box {
        padding: 8px 28px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 8px;
        background: #FFF;
    }
    .digital-stamp-card .digital-stamp-body .stamp-link-box-text{
        display:flex;
    }
    .stamp-en .digital-stamp-body .stamp-link-box-text{
        display:flex;
    }

        .digital-stamp-card .digital-stamp-body .stamp-link-box p {
            margin: 0px;
            color: var(--text-default);
            font-size: 16px;
        }

        .digital-stamp-card .digital-stamp-body .stamp-link-box a {
            color: #1B8354;
            font-size: 16px;
            text-decoration: underline;
        }
        .digital-stamp-card .digital-stamp-body .stamp-link-box a:hover{
            color:var(--SA-400);
        }

.stamp-ar {
    direction: rtl;
}

.stamp-en {
    direction: ltr;
}

@media (max-width: 768px) {
    .digital-stamp-card {
        padding: 8px 16px;
    }

        .digital-stamp-card .digital-stamp-header {
            flex-wrap: wrap;
        }

            .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
                /*flex: 100%;*/
                margin-right: 33px;
            }

        /*.digital-stamp-card .digital-stamp-body .digital-stamp-container {*/
        /*    flex-direction: column;*/
        /*}*/

    [dir="ltr"] .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
        margin-right: 0px;
        margin-left: 33px;
    }
    .digital-stamp-card .digital-stamp-body  .digital-box .img-border-rounded {
                
    flex: 0 0 32px;
    height: 32px;
            }
            .digital-stamp-card .digital-stamp-body  .digital-box .img-border-rounded img{
                width:16px;
                height:16px;
            }
            .digital-stamp-card .digital-stamp-body .stamp-link-box-text{
                flex-direction:column;
            }
            .stamp-en .digital-stamp-body .stamp-link-box-text{
                flex-direction:column;
            }
}

@media(max-width:1200px) {
    #header.landing-page-header.appear .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: black !important;
    }
}

.owl-next.disabled:before {
    opacity: 0.1 !important;
}

.single-link {
    color: var(--Gray-700);
    font-weight: 600;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    text-decoration: none !important;
    padding: 0 14.4px;
    margin-top: 1px;
    position:relative;
}

.landing-page-header.appear .single-link {
    color: white;
}

    .landing-page-header.appear .single-link:hover {
        color: white;
    }

.single-link:hover {
    text-decoration: none !important;
        background: var(--Gray-100);
    border-radius: 5px
}
.single-link:hover::before{
    position:absolute;
    content:"";
    width: 60%;
    height:4px;
    top:94%;
    background: rgb(151, 161, 178);
    left: 20%;
    border-radius:5px;
}
.single-link.active{
    background: var(--SA-600);
    color:white;
    border-radius: 5px
}
.single-link.active::before{
    position:absolute;
    content:"";
    width: 60%;
    height:4px;
    top:94%;
    background: #54c08a;
    left: 20%;
    border-radius:5px;
}
.show-mobile{
display:none;
}
.show-desktop{
display:inline-block;
}
@media(max-width:768px){
.show-desktop{
display:none;
}
.show-mobile{
display:inline-block;
}
}

.pagination > li > a{
    border: none;
    border-radius: 7px;
    color:black !important;
    border-radius: 4px;
}
.pagination > li > a:hover{
    background: var(--Gray-100);
    text-decoration: none;
}
.pagination > li > a:focus{
    border: 2px solid black;
    background-color:transparent !important;
}
.pagination .page-item.active .page-link{
    position: relative;
    background:transparent;
        text-decoration: none;
}
.pagination .page-item.active .page-link::after{
        position: absolute;
    content: "";
    height: 3px;
    width: 100%;
    background-color: var(--SA-600);
    border-radius: 7px;
    right: 0;
    bottom: 0;
}


.disabled>.page-link, .page-link.disabled{
        border: none;
    color: grey;
    background-color:transparent;
}
.fa-chevron-down:before{
    content:"";
}
@media (min-width: 1200px){
    .mobile-view-arrow{
        display:none;
    }
}

.upload-area{
border:1px dashed var(--Gray-300);
border-radius:4px;
padding:30px;
text-align:center;
cursor:pointer;
transition:.3s;
background-color:var(--Gray-100);
}
.upload-area.dragover{
    border-width:2px;
border-color:var(--Success-700);
background:var(--Success-25);
}
.upload-area .main-text{
    color:var(--Gray-800);
    font-size:24px;
}
.upload-area p {
    color:var(--Gray-700);
    font-size:18px;
}
.upload-area.dragover p{
    color:var(--Success-700);
}
.upload-area.dragover img{
    filter: brightness(0) saturate(100%) invert(34%) sepia(11%) saturate(3612%) hue-rotate(107deg) brightness(96%) contrast(95%);
}
.upload-area .browse{
    background:transparent;
    border:none;
    height:32px;
    border-radius:4px;
    padding:0 12px;
}
.upload-area.dragover .browse{
    background:var(--Gray-200);
    color:var(--Gray-400);
}
.file-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 12px;
border:1px solid #eee;
border-radius:6px;
margin-bottom:8px;
font-size:14px;
background-color:var(--Gray-100);
}
.file-status{
font-size:12px;
color:gray;
margin-left:10px;
}
.remove-file{
    background-color: transparent;
    border: none;
}
.remove-file svg{
    pointer-event:none;
}

@media (min-width: 1200px){
    #header .header-nav.header-nav-line nav > ul li:hover > a.active{
    background:var(--SA-700) !important;
    color:white !important;
}
    #header .header-nav.header-nav-line nav >ul li:hover li > a.active:before {
        background: #54c08a !important;
    }
     #header .header-nav.header-nav-line.header-nav-top-line nav > ul > li:hover > a.active:before{
        background: #54c08a !important;
    }
    
    #header .header-nav.header-nav-line nav > ul li:active > a.active{
    background:var(--SA-900) !important;
}
#header .header-nav.header-nav-line nav > ul li:focus-within > a.active{
    outline: 2px solid black;
    border: 1px solid white;
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li{
    padding:0 8px;
    
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a{
    color:black;
    border-radius: 4px !important;
    border-bottom:none;
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a{
    text-decoration:underline;
    background-color:var(--Gray-100);
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:active > a{
    text-decoration:underline;
    background-color:var(--Gray-200);
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:focus > a{
    text-decoration:underline;
    background-color:white !important;
    outline: 2px solid black;
    
}     
    
}

.spinner-border{
        border-top-color: transparent;
    border-bottom-color: transparent;
    color:var(--SA-600)!important;
}
.sub-sidebar ul{
    list-style:none;
    padding:0;
}
.sub-sidebar ul li a{
    color:var(--text-default) !important;
    padding:0 12px;
    text-decoration:none !important;
    outline: none !important;
}
.sub-sidebar ul li{
    padding:8px 0;
    position:relative;
    border-radius:4px;
}

.sub-sidebar ul:last-child li::before{
    position: absolute;
    content: "";
    width: 3px;
    height: calc(100% - 8px);
    border-radius: 7px;
    top: 4px;
}
.sub-sidebar ul li:not(:has(ul)):hover{
    background-color:var(--Gray-100);
}
.sub-sidebar ul li:not(:has(ul)):hover::before{
    background-color: black;
}
.sub-sidebar ul li:not(:has(ul)):focus-visible{
    outline:2px solid black;
    background-color:white;
}

.sub-sidebar ul li:not(:has(ul)):active{
    background-color:var(--Gray-200);
}
.sub-sidebar ul li:not(:has(ul)):active::before{
    background-color: black;
}
.sub-sidebar ul li.active:not(:has(ul)) a{
    font-weight:bold;
}
.sub-sidebar ul li.active:not(:has(ul))::before{
    background-color:var(--SA-600);
}
.sub-sidebar ul li.active:not(:has(ul)):hover{
    background-color:white;
}
.sub-sidebar ul li.active:not(:has(ul)):hover::before{
    background-color: var(--SA-600);
}
.sub-sidebar ul li.active:not(:has(ul)):focus-visible{
    outline:2px solid black;
    background-color:white;
}

.sub-sidebar ul li.active:not(:has(ul)):active{
    background-color:white;
}
.sub-sidebar ul li.active:not(:has(ul)):active::before{
    background-color: var(--SA-600);
}
.alert{
 border-radius: 4px;
     padding: 16px 24px;
}
.alert-success{
    position:relative;
    background-color:var(--Success-25);
    border:1px solid #ABEFC6;
}
.alert-success::before{
    position:absolute;
    content:"";
    width:8px;
    height:100%;
    top:0;
    right:0;
    background-color:var(--Success-600);
        border-radius: 0 4px 4px 0;
}
.alert-danger{
    position:relative;
    background-color:#FFFBFA;
    border:1px solid #FECDCA;
}
.alert-danger::before{
    position:absolute;
    content:"";
    width:8px;
    height:100%;
    top:0;
    right:0;
    background-color:#D92D20;
        border-radius: 0 4px 4px 0;
}
.alert-info{
    position:relative;
    border:1px solid #d7edff;
    background-color:#f5faff;
}
.alert-info::before{
    position:absolute;
    content:"";
    width:8px;
    height:100%;
    top:0;
    right:0;
    background-color:#1570EF;
    border-radius: 0 4px 4px 0;
}
.alert .icon{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert .icon img{
    width:20px;
    height:20px;
}
.alert-success .icon{
    background-color:var(--Success-50);
}
.alert-danger .icon{
    background-color:#FEF3F2;
}