.theme-dark .text-white {
    color: #000 !important
}

.text-primary {
    color: #1d4d8b !important
}

.theme-dark .text-black {
    color: #fff !important
}

.theme-light {
    --text: #000;
    --bg: #fff
}

.theme-dark {
    --text: #fff;
    --bg: #333
}

@font-face {
    font-family: "Sarmady";
    src: local(""), url("/ar/IReports/Reports2022/SiteAssets/fonts/Sarmady-Regular.otf") format("opentype")
}

@font-face {
    font-family: "Sarmady Extra Light";
    src: local(""), url("/ar/IReports/Reports2022/SiteAssets/fonts/Sarmady-ExtraLight.otf") format("opentype")
}

@font-face {
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    src: url("/ar/IReports/Reports2022/SiteAssets/fonts/fonts/bootstrap-icons.woff2") format("woff2")
}

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

html {
    background: none !important;
    border: none
}

body {
    --bs-body-line-height: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-align: start;
    font-size: 16px !important;
    font-family: "Sarmady", sans-serif !important;
    color: #6d6e71;
    background-color: #fefefe;
    overflow-x: hidden
}

@media(max-width: 991px) {
    body {
        font-size: clamp(.75rem, 3.5vw, 1rem) !important
    }
}

html:lang(ar) body,
html[dir=rtl] body {
    direction: rtl
}

html:lang(en) body,
html[dir=ltr] body {
    direction: ltr
}

@media(max-width: 991px) {
    body.home {
        background: url(/ar/IReports/Reports2022/SiteAssets/images/home-bg-sm.png) no-repeat top center
    }
}

::-webkit-scrollbar {
    width: .63rem;
    height: .5rem
}

@media(max-width: 767px) {
    ::-webkit-scrollbar {
        width: .5rem
    }
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background-color: rgba(29, 77, 139, .5)
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: rgba(29, 77, 139, .5)
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(29, 77, 139, .6)
}

.theme-dark::-webkit-scrollbar-track,
.theme-dark *::-webkit-scrollbar-track {
    background-color: #ddd;
    box-shadow: none
}

.theme-dark::-webkit-scrollbar-thumb,
.theme-dark *::-webkit-scrollbar-thumb {
    background-color: #919191
}

.theme-dark::-webkit-scrollbar-thumb:hover,
.theme-dark *::-webkit-scrollbar-thumb:hover {
    background-color: #6b6b6b
}

section+section {
    margin-top: 2.5rem
}

@media(max-width: 991px) {
    section+section {
        margin-top: 1.5rem
    }
}

img[src*=".svg"] {
    max-width: 100%;
    height: auto
}

img:not([src*=".svg"]) {
    object-fit: cover
}

@media(max-width: 991px) {
    img {
        max-width: 100% !important
    }
}

p,
h6 {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: normal
}

h1,
h2,
h3,
h4,
h5 {
    margin-bottom: 0
}

a {
    text-decoration: none;
    cursor: pointer;
    outline: none !important
}

ol,
ul {
    padding-left: 0;
    margin-bottom: 0
}

ul {
    list-style-type: none
}

textarea {
    resize: none
}

video,
input {
    outline: 0 !important
}

button,
[class*=btn],
.btn {
    outline: 0 !important;
    font-size: 1.13rem
}

button:hover,
[class*=btn]:hover,
.btn:hover {
    filter: saturate(1.2)
}

html:lang(ar) .form-control.en,
html:lang(ar) [type=email] {
    direction: ltr;
    text-align: end
}

label {
    margin-bottom: .25rem
}

.bi::before {
    vertical-align: middle
}

.white-img {
    filter: brightness(0) invert(1)
}

.absolute-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%)
}

[class*=grid] {
    display: grid !important;
    gap: 1rem
}

@media(max-width: 991px) {
    [class*=grid]:not(.grid-icon):not([class*=grid-md]):not([class*=grid-xs]) {
        display: flex !important;
        flex-direction: column
    }
}

.grid-icon {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0 .5rem;
    width: fit-content
}

.grid-icon label {
    margin-bottom: 0
}

.grid-icon :first-child {
    grid-row: 1/3
}

.grid-icon :nth-child(2) {
    grid-row: 1/2
}

.grid-icon :last-child {
    grid-row: 2/3
}

.grid-center {
    justify-content: center;
    margin: auto
}

.flex-center,
.flex-y-center,
.flex-y-row,
.flex-between,
.flex-start,
.flex-end {
    display: flex !important;
    align-items: center
}

.flex-start {
    margin-inline-end: auto !important
}

.flex-end {
    margin-inline-start: auto !important
}

.flex-center {
    justify-content: center !important
}

.flex-between {
    justify-content: space-between !important;
    gap: 1rem
}

@media(max-width: 767px) {

    .flex-y-center,
    .flex-between {
        flex-direction: column
    }
}

.rotate-180 {
    rotate: 180deg;
    transition: all .2s ease-in-out
}

.h-fit {
    height: fit-content !important
}

.w-fit {
    width: fit-content !important
}

@media(min-width: 992px) {
    .w-fit {
        max-width: fit-content !important
    }
}

.dashed {
    border-style: dashed !important
}

.round-start {
    border-start-start-radius: .5rem !important;
    border-end-start-radius: .5rem !important
}

.round-leaf {
    border-radius: 5rem .5rem !important
}

.round-end {
    border-start-end-radius: .5rem !important;
    border-end-end-radius: .5rem !important
}

.underline {
    text-decoration: underline
}

.text-primary-dark {
    color: #2b5c7f
}

.light {
    font-family: "Sarmady Extra Light"
}

html:lang(en) .en-reverse {
    transform: rotate(180deg)
}

.underline-hover:hover {
    text-decoration: underline
}

@media(max-width: 767px) {
    .m-xs-0 {
        margin: 0 !important
    }
}

.fw-3 {
    font-weight: 300 !important
}

.fw-4 {
    font-weight: 400 !important
}

.fw-5 {
    font-weight: 500 !important
}

.fw-6 {
    font-weight: 600 !important
}

.fw-7 {
    font-weight: 700 !important
}

.fw-8 {
    font-weight: 800 !important
}

.fw-9 {
    font-weight: 900 !important
}

.grid-1 {
    grid-template-columns: repeat(1, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-1 {
        grid-template-columns: repeat(1, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-1 {
        grid-template-columns: repeat(1, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-1 {
        grid-template-columns: repeat(1, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-1 {
        grid-template-columns: repeat(1, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-1 {
        grid-template-columns: repeat(1, 1fr) !important
    }
}

.rounded-1 {
    border-radius: .25rem !important
}

.span-1 {
    grid-column: span 1
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-2 {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-2 {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-2 {
        grid-template-columns: repeat(2, 1fr) !important
    }
}

.rounded-2 {
    border-radius: .5rem !important
}

.span-2 {
    grid-column: span 2
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr) !important
    }
}

.rounded-3 {
    border-radius: .75rem !important
}

.span-3 {
    grid-column: span 3
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-4 {
        grid-template-columns: repeat(4, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-4 {
        grid-template-columns: repeat(4, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr) !important
    }
}

.rounded-4 {
    border-radius: 1rem !important
}

.span-4 {
    grid-column: span 4
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-5 {
        grid-template-columns: repeat(5, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-5 {
        grid-template-columns: repeat(5, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-5 {
        grid-template-columns: repeat(5, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-5 {
        grid-template-columns: repeat(5, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-5 {
        grid-template-columns: repeat(5, 1fr) !important
    }
}

.rounded-5 {
    border-radius: 1.25rem !important
}

.span-5 {
    grid-column: span 5
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr)
}

@media(min-width: 1450px) {
    .grid-xxl-6 {
        grid-template-columns: repeat(6, 1fr) !important
    }
}

@media(min-width: 1200px) {
    .grid-xl-6 {
        grid-template-columns: repeat(6, 1fr) !important
    }
}

@media(min-width: 992px) {
    .grid-lg-6 {
        grid-template-columns: repeat(6, 1fr) !important
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .grid-md-6 {
        grid-template-columns: repeat(6, 1fr) !important
    }
}

@media(max-width: 767px) {
    .grid-xs-6 {
        grid-template-columns: repeat(6, 1fr) !important
    }
}

.rounded-6 {
    border-radius: 1.5rem !important
}

.span-6 {
    grid-column: span 6
}

.gapx-0 {
    column-gap: 0rem
}

.gapy-0 {
    row-gap: 0rem
}

.gapx-1 {
    column-gap: .25rem
}

.gapy-1 {
    row-gap: .25rem
}

.gapx-2 {
    column-gap: .5rem
}

.gapy-2 {
    row-gap: .5rem
}

.gapx-3 {
    column-gap: .75rem
}

.gapy-3 {
    row-gap: .75rem
}

.gapx-4 {
    column-gap: 1rem
}

.gapy-4 {
    row-gap: 1rem
}

.gapx-5 {
    column-gap: 1.25rem
}

.gapy-5 {
    row-gap: 1.25rem
}

.gapx-6 {
    column-gap: 1.5rem
}

.gapy-6 {
    row-gap: 1.5rem
}

.gapx-7 {
    column-gap: 1.75rem
}

.gapy-7 {
    row-gap: 1.75rem
}

.gapx-8 {
    column-gap: 2rem
}

.gapy-8 {
    row-gap: 2rem
}

.gapx-9 {
    column-gap: 2.25rem
}

.gapy-9 {
    row-gap: 2.25rem
}

.gapx-10 {
    column-gap: 2.5rem
}

.gapy-10 {
    row-gap: 2.5rem
}

.gapx-11 {
    column-gap: 2.75rem
}

.gapy-11 {
    row-gap: 2.75rem
}

.gapx-12 {
    column-gap: 3rem
}

.gapy-12 {
    row-gap: 3rem
}

.op-1 {
    opacity: .1 !important
}

.bg-danger-1 {
    background-color: rgba(181, 39, 39, .1)
}

.bg-white-1 {
    background-color: rgba(var(--background), 0.1)
}

.bg-gray-1 {
    background-color: rgba(235, 206, 206, .1) !important
}

.fs-1 {
    font-size: 1.1em
}

@media(min-width: 768px) {
    .w-md-1 {
        width: 10% !important
    }
}

@media(min-width: 992px) {
    .w-lg-1 {
        width: 10% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-1 {
        width: 10% !important
    }
}

.op-2 {
    opacity: .2 !important
}

.bg-danger-2 {
    background-color: rgba(181, 39, 39, .2)
}

.bg-white-2 {
    background-color: rgba(var(--background), 0.2)
}

.bg-gray-2 {
    background-color: rgba(235, 206, 206, .2) !important
}

.fs-2 {
    font-size: 1.2em
}

@media(min-width: 768px) {
    .w-md-2 {
        width: 20% !important
    }
}

@media(min-width: 992px) {
    .w-lg-2 {
        width: 20% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-2 {
        width: 20% !important
    }
}

.op-3 {
    opacity: .3 !important
}

.bg-danger-3 {
    background-color: rgba(181, 39, 39, .3)
}

.bg-white-3 {
    background-color: rgba(var(--background), 0.3)
}

.bg-gray-3 {
    background-color: rgba(235, 206, 206, .3) !important
}

.fs-3 {
    font-size: 1.3em
}

@media(min-width: 768px) {
    .w-md-3 {
        width: 30% !important
    }
}

@media(min-width: 992px) {
    .w-lg-3 {
        width: 30% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-3 {
        width: 30% !important
    }
}

.op-4 {
    opacity: .4 !important
}

.bg-danger-4 {
    background-color: rgba(181, 39, 39, .4)
}

.bg-white-4 {
    background-color: rgba(var(--background), 0.4)
}

.bg-gray-4 {
    background-color: rgba(235, 206, 206, .4) !important
}

.fs-4 {
    font-size: 1.4em
}

@media(min-width: 768px) {
    .w-md-4 {
        width: 40% !important
    }
}

@media(min-width: 992px) {
    .w-lg-4 {
        width: 40% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-4 {
        width: 40% !important
    }
}

.op-5 {
    opacity: .5 !important
}

.bg-danger-5 {
    background-color: rgba(181, 39, 39, .5)
}

.bg-white-5 {
    background-color: rgba(var(--background), 0.5)
}

.bg-gray-5 {
    background-color: rgba(235, 206, 206, .5) !important
}

.fs-5 {
    font-size: 1.5em
}

@media(min-width: 768px) {
    .w-md-5 {
        width: 50% !important
    }
}

@media(min-width: 992px) {
    .w-lg-5 {
        width: 50% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-5 {
        width: 50% !important
    }
}

.op-6 {
    opacity: .6 !important
}

.bg-danger-6 {
    background-color: rgba(181, 39, 39, .6)
}

.bg-white-6 {
    background-color: rgba(var(--background), 0.6)
}

.bg-gray-6 {
    background-color: rgba(235, 206, 206, .6) !important
}

.fs-6 {
    font-size: 1.6em
}

@media(min-width: 768px) {
    .w-md-6 {
        width: 60% !important
    }
}

@media(min-width: 992px) {
    .w-lg-6 {
        width: 60% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-6 {
        width: 60% !important
    }
}

.op-7 {
    opacity: .7 !important
}

.bg-danger-7 {
    background-color: rgba(181, 39, 39, .7)
}

.bg-white-7 {
    background-color: rgba(var(--background), 0.7)
}

.bg-gray-7 {
    background-color: rgba(235, 206, 206, .7) !important
}

.fs-7 {
    font-size: 1.7em
}

@media(min-width: 768px) {
    .w-md-7 {
        width: 70% !important
    }
}

@media(min-width: 992px) {
    .w-lg-7 {
        width: 70% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-7 {
        width: 70% !important
    }
}

.op-8 {
    opacity: .8 !important
}

.bg-danger-8 {
    background-color: rgba(181, 39, 39, .8)
}

.bg-white-8 {
    background-color: rgba(var(--background), 0.8)
}

.bg-gray-8 {
    background-color: rgba(235, 206, 206, .8) !important
}

.fs-8 {
    font-size: 1.8em
}

@media(min-width: 768px) {
    .w-md-8 {
        width: 80% !important
    }
}

@media(min-width: 992px) {
    .w-lg-8 {
        width: 80% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-8 {
        width: 80% !important
    }
}

.op-9 {
    opacity: .9 !important
}

.bg-danger-9 {
    background-color: rgba(181, 39, 39, .9)
}

.bg-white-9 {
    background-color: rgba(var(--background), 0.9)
}

.bg-gray-9 {
    background-color: rgba(235, 206, 206, .9) !important
}

.fs-9 {
    font-size: 1.9em
}

@media(min-width: 768px) {
    .w-md-9 {
        width: 90% !important
    }
}

@media(min-width: 992px) {
    .w-lg-9 {
        width: 90% !important
    }
}

@media(min-width: 1400px) {
    .w-xxl-9 {
        width: 90% !important
    }
}

.login-form {
    padding: 1rem;
    border-radius: 2.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, .4)
}

@media(min-width: 992px) {
    .login-form {
        padding: 3rem 10vw 3.5rem;
        width: 50vw;
        margin-inline: auto
    }
}

.login-form label {
    display: block
}

.login-form .pass-eye {
    color: #aaa !important;
    border: none
}

.signup-form:not(.inner) {
    background-color: var(--bg);
    padding: .5rem;
    border-radius: 2.5rem !important;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, .25)
}

@media(min-width: 992px) {
    .signup-form:not(.inner) {
        padding: 3rem 3rem 5.5rem;
        width: 50vw;
        margin-inline: auto
    }
}

.signup-form label {
    display: block;
    color: #1d4d8b !important;
    font-size: .94rem
}

.signup-form .form-control.invalid {
    background-color: #fdd
}

.signup-form .form-group {
    padding-inline: 0 !important
}

.signup-form footer {
    display: flex;
    gap: 1rem;
    overflow: auto
}

.signup-form footer button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20%;
    margin-top: 3.2rem
}

.steps {
    border-radius: .25rem;
    background-color: #fff;
    padding: 1.75rem;
    background: linear-gradient(45deg, #d9d9d9, #d9d9d9);
    background-size: 50% 1px;
    background-position: center 3rem;
    background-repeat: no-repeat
}

@media(max-width: 991px) {
    .steps {
        gap: .5rem
    }
}

.steps .step {
    flex-direction: column;
    color: rgba(0, 0, 0, .7)
}

@media(min-width: 992px) {
    .steps .step {
        width: 215px
    }
}

.steps .step .icon {
    border-radius: 50%;
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/check2.svg) no-repeat center;
    background-color: #d9f4fc;
    width: 40px;
    height: 40px
}

.steps .step img,
.steps .step i {
    display: none
}

.steps .step.current img,
.steps .step.current i {
    display: none
}

.steps .step.current .icon {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/dots.svg) no-repeat center;
    background-color: #fefefe;
    border: 1px solid #689741
}

.steps .step.current~.flex-center .icon {
    background-image: none;
    background-color: #fefefe
}

.steps .step.current~.flex-center .icon img,
.steps .step.current~.flex-center .icon i {
    display: block
}

.step-tab {
    display: none
}

.step-tab.current {
    display: block
}

.step-tab .success-icon {
    border-radius: 50%;
    background-color: #e5f7fd;
    margin-inline: auto;
    width: 150px;
    height: 150px
}

.licences-form {
    background-color: var(--bg);
    border-radius: 2.5rem;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, .25);
    padding: 9% 9% 4%;
    margin-inline: 12%;
    text-align: center
}

.licences-form ul {
    display: flex;
    gap: 2.75rem
}

.licences-form ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
    min-width: calc(33.33% - 2em);
    position: relative;
    box-shadow: 5px 8px 40px rgba(0, 0, 0, .08);
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: all .2s ease-in-out
}

.licences-form ul li:hover {
    border: 1px solid #ccc;
    transition: all .2s ease-in-out
}

.licences-form ul input {
    border-radius: 0 !important;
    border: none;
    cursor: pointer;
    margin-top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    inset: 0;
    z-index: 25;
    height: 100%;
    width: 100%
}

.licences-form ul input:checked~.title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100%;
    background-color: #e5f7fe
}

.licences-form ul span {
    white-space: nowrap;
    position: relative;
    z-index: 0
}

.licences-form ul .title {
    position: static
}

.licences-form ul .icon {
    position: relative;
    z-index: 15;
    background-color: #fff;
    border-radius: 50%;
    width: 4.13rem;
    height: 4.13rem
}

.dashboard-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.25rem;
    background-color: #fff;
    padding: 2.5rem 0 5rem;
    border-radius: .63rem
}

.dashboard-form .form-group {
    padding-inline: 1.25rem
}

.form-filters {
    background-color: #fff;
    padding: 1rem 2.5rem 2rem;
    border-radius: .63rem
}

html:lang(ar) .form-filters .icon {
    inset-inline: 0 auto
}

.filters .form-control {
    background-color: #fff !important
}

.filters select,
.filters input {
    height: 100%
}

.form-actions {
    display: flex;
    gap: 1.25rem;
    margin-top: 3rem;
    margin-inline-start: 2.4rem
}

.form-actions>* {
    width: 100%;
    padding-block: .7rem;
    font-size: .85rem;
    font-weight: 500
}

@media(min-width: 992px) {
    .form-actions>* {
        width: 15%
    }
}

.form-control:disabled {
    background-color: #f4f4f4 !important
}

.form-control.search {
    padding-inline-start: 2rem;
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/search.svg) no-repeat left 1rem center
}

html:lang(ar) .form-control.search {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/search.svg) no-repeat right 1rem center
}

.form-control::placeholder {
    opacity: .5
}

.radio-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem
}

@media(min-width: 992px) {
    .radio-wrapper .form-check-label {
        margin-inline-end: 2rem
    }
}

.radio-wrapper label {
    margin-inline-end: 1.5rem
}

.radio-wrapper label,
.radio-wrapper input {
    opacity: .7
}

.radio-wrapper input[type=radio] {
    accent-color: #1d4d8b;
    opacity: .8
}

.radio-wrapper input[type=radio]:checked+label {
    color: #1d4d8b;
    opacity: 1
}

input[type=radio]~label {
    margin-bottom: 0
}

input[type=checkbox] {
    accent-color: #689741
}

input[type=checkbox]~label {
    margin-inline: .5rem 1rem;
    margin-bottom: 0
}

.form-check {
    padding-inline-start: 1.5em;
    padding-left: 0
}

.form-check .form-check-input {
    margin-top: 0;
    margin-left: 0;
    margin-inline-start: -1.5em
}

html:lang(ar) .form-check .form-check-input {
    float: right
}

html:lang(ar) input[type=date] {
    text-align: right
}

html:lang(en) input[type=date]:disabled {
    text-indent: .75rem
}

input[type=date]:disabled,
input[type=date]::-webkit-calendar-picker-indicator {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/calendar.svg) no-repeat 2%
}

html:lang(ar) input[type=date]:disabled,
html:lang(ar) input[type=date]::-webkit-calendar-picker-indicator {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/calendar.svg) no-repeat 98%
}

.main-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 1rem;
    padding-block: 2rem 3rem
}

@media(min-width: 1200px)and (max-width: 1450px) {
    .main-content {
        padding-block: 1rem 2.4rem
    }
}

@media(max-width: 991px) {
    .main-content {
        padding-block: .3rem 2.3rem
    }
}

.mobile-header,
.main-header {
    background-color: #fff
}

.mobile-header.fixed,
.main-header.fixed {
    position: fixed;
    inset: 0 0 auto;
    z-index: 25;
    transition: all .3s ease-in-out;
    animation: headerAnimation .3s
}

@keyframes headerAnimation {
    0% {
        top: -100%
    }

    100% {
        top: 0
    }
}

.mobile-header nav,
.main-header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem
}

.mobile-header .bi-list,
.main-header .bi-list {
    transform: scale(2, 1.4);
    display: block
}

.mobile-header {
    padding-block: .8rem
}

@media(min-width: 992px) {
    .mobile-header {
        display: none
    }
}

.mobile-header .details {
    position: fixed;
    inset: 0;
    z-index: 25;
    transform: translateY(0);
    padding: 2.38rem;
    background: linear-gradient(#4186a3 40%, #60a734 45%, #08455f 100%);
    transition: transform .3s ease-in-out;
    overflow-y: auto
}

.mobile-header .details a {
    background-color: #1d4d8b;
    color: #fff !important;
    padding: .5rem;
    width: 100%;
    border-radius: .5rem
}

.mobile-header.expanded .details {
    height: 95%;
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, .1)
}

.mobile-header.collapsed .details {
    transform: translateY(-100%);
    transition: transform .3s ease-in-out
}

.main-header {
    box-shadow: 0 10px 15px rgba(63, 68, 72, .05);
    padding-block: .5rem;
    transition: all .3s ease-in-out
}

@media(max-width: 991px) {
    .main-header {
        display: none
    }
}

.main-header nav .logo-area .logo {
    height: 3.75rem;
    transform-origin: right top;
    transition: all ease-in-out .3s
}

.main-header nav .logo-area .logo:hover {
    transform: scale(1.15)
}

.main-header nav .site-name {
    transform-origin: center top;
    transition: all ease-in-out .3s
}

.main-header nav .site-name:hover {
    transform: scale(1.25)
}

.main-header nav .site-name a {
    color: #72a647
}

.inner-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    margin-block: 1rem
}

@media(max-width: 767px) {
    .inner-layout {
        display: flex;
        flex-direction: column
    }
}

@media(max-width: 767px) {
    .inner-layout aside {
        display: flex;
        margin: auto
    }
}

.side-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: .38rem;
    width: 250px;
    overflow: hidden;
    padding: .25rem .7rem;
    background: linear-gradient(#4186a3 40%, #60a734 45%, #08455f 100%);
    border-radius: .75rem
}

.side-menu a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    position: relative;
    border-radius: .75rem;
    text-align: center;
    font-size: 1.25rem;
    overflow: hidden;
    color: #fff;
    background-color: rgba(114, 166, 71, .25)
}

.side-menu a:nth-child(even) {
    background-color: rgba(29, 77, 139, .25)
}

.side-menu a:not(:hover) svg {
    opacity: 0
}

.side-menu a svg {
    height: 48px;
    left: 0;
    position: absolute;
    top: -0.5px;
    width: 100%;
    border-radius: .75rem
}

.side-menu a rect {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 422, 0;
    transition: all .35s linear
}

.side-menu a:hover rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 200;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1)
}

.side-menu a.active {
    color: rgba(29, 77, 139, .7);
    background-color: #fff;
    padding-inline-end: 2.2rem;
    margin-inline: -3px auto;
    width: 116%
}

.side-menu a.active span {
    font-family: "Sarmady";
    font-weight: 600
}

.side-menu a.active img {
    display: none
}

.side-menu a span {
    position: relative;
    z-index: 10;
    font-family: "Sarmady Extra Light";
    max-width: 80%;
    line-height: 1em
}

.side-menu a img {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    z-index: 0;
    display: none;
    width: 120%;
    height: 46px;
    border-radius: .75rem
}

.inner-side-menu {
    display: grid;
    align-items: center;
    width: 100%;
    min-height: 500px;
    margin-bottom: 2rem;
    padding: 1rem;
    border-radius: .5rem;
    animation: asideAnimation .3s;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5)
}

@media(min-width: 992px) {
    .inner-side-menu {
        position: sticky;
        top: 10%;
        z-index: 10;
        margin-bottom: 0rem
    }
}

@media(min-width: 1400px) {
    .inner-side-menu {
        min-height: 550px
    }
}

.inner-side-menu h2 {
    line-height: .5;
    font-weight: 300;
    font-family: "Sarmady Extra Light"
}

.inner-side-menu nav {
    display: grid;
    margin-top: 1rem
}

.inner-side-menu nav a {
    position: relative;
    transition: none;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.25rem;
    padding: .5rem
}

.inner-side-menu nav a:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.inner-side-menu nav a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #fff;
    transform: translateX(-100%) scaleX(0);
    transition: transform .3s
}

.inner-side-menu nav a:hover::after {
    transform: translateX(0) scaleX(1)
}

.inner-side-menu nav a.active {
    background-color: #fff !important
}

.inner-side-menu.blue {
    background: linear-gradient(180deg, #3c80b0 0.99%, #165578 97.35%)
}

.inner-side-menu.blue nav a:hover,
.inner-side-menu.blue nav a.active {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text3.svg) no-repeat 95%
}

html:lang(ar) .inner-side-menu.blue nav a:hover,
html:lang(ar) .inner-side-menu.blue nav a.active {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text3.svg) no-repeat 5%
}

.inner-side-menu.blue nav a:hover {
    color: #1d4d8b
}

.inner-side-menu.blue nav a.active {
    color: #1d4d8b
}

.inner-side-menu.green {
    background: linear-gradient(0deg, #386732 6.54%, #467836 24.54%, #5d933c 56.54%, #6ba440 84.54%, #70aa42 106.54%)
}

.inner-side-menu.green nav a:hover,
.inner-side-menu.green nav a.active {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text3-green.svg) no-repeat 95%
}

html:lang(ar) .inner-side-menu.green nav a:hover,
html:lang(ar) .inner-side-menu.green nav a.active {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text3-green.svg) no-repeat 5%
}

.inner-side-menu.green nav a:hover {
    color: #72a647
}

.inner-side-menu.green nav a.active {
    color: #72a647
}

.bottom-bar {
    background: #fff;
    box-shadow: 0 -11px 10px rgba(0, 0, 0, .01);
    padding-block: .5rem;
    margin-top: auto
}

.bottom-bar.fixed {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    width: 100%;
    transition: all .3s ease-in-out;
    animation: footerAnimation .3s
}

@keyframes footerAnimation {
    0% {
        bottom: -100%
    }

    100% {
        bottom: 0
    }
}

.mobile-header .bottom-bar {
    display: block;
    box-shadow: none
}

.bottom-bar .flex-between {
    flex-direction: row
}

.bottom-bar .qr-code {
    position: relative;
    height: 2.8rem;
    width: 2.8rem;
    overflow: hidden
}

@media(max-width: 767px) {
    .bottom-bar .qr-code {
        width: 2.3rem;
        height: 2.3rem
    }
}

.bottom-bar .qr-code img {
    max-width: 100%
}

.bottom-bar .qr-code .qr-img {
    max-height: 100%
}

.bottom-bar .qr-code .qr-img-open {
    width: 10rem;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: all ease-in-out .3s
}

.bottom-bar .qr-code:hover {
    overflow: visible
}

.bottom-bar .qr-code:hover .qr-img-open {
    position: absolute;
    z-index: 1024;
    bottom: calc(100% + .5rem);
    inset-inline-start: 0;
    transform: scaleY(1);
    opacity: 1
}

@media(max-width: 991px) {
    .bottom-bar .contact {
        column-gap: .5rem
    }
}

.bottom-bar .contact a {
    position: relative;
    font-size: 1.25rem
}

@media(max-width: 991px) {
    .bottom-bar .contact a {
        font-size: .8rem;
        display: flex
    }
}

.bottom-bar .contact a::after {
    content: "";
    position: absolute;
    inset-inline-end: -0.2rem;
    bottom: 0;
    width: 90%;
    height: 1px;
    background-color: #000;
    margin: auto;
    transform: scale(0);
    transition: all .3s
}

.bottom-bar .contact a .icon {
    margin-inline-end: .25rem
}

.bottom-bar .contact a:hover {
    color: #000 !important;
    filter: brightness(0.5)
}

.bottom-bar .contact a:hover::after {
    transform: scale(1)
}

.bottom-bar .social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    color: rgba(0, 0, 0, .5);
    overflow: hidden
}

@media(max-width: 767px) {
    .bottom-bar .social a {
        width: 1.5rem;
        height: 1.5rem
    }
}

.bottom-bar .social a .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform .5s ease-in-out;
    z-index: 3
}

@media(max-width: 767px) {
    .bottom-bar .social a .icon::before {
        font-size: .85rem
    }
}

.bottom-bar .social a:hover {
    border: 1px solid #fff
}

.bottom-bar .social a:hover::before {
    top: 0
}

.bottom-bar .social a:hover .icon {
    filter: brightness(0) invert(1);
    transform: rotateY(360deg)
}

.bottom-bar .social a::before {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #1d4d8b;
    transition: .5s
}

.bottom-bar .social a:hover {
    color: #fff;
    transform: rotateY(360deg)
}

.hero {
    display: flex;
    margin-top: 1rem;
    background: url(/ar/IReports/Reports2022/SiteAssets/images/home-bg.png) no-repeat left;
    counter-reset: slide
}

@media(min-width: 1900px) {
    .hero {
        margin-top: 2rem
    }
}

html:lang(ar) .hero {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/home-bg.png) no-repeat right
}

@media(max-width: 991px) {
    .hero {
        flex-wrap: wrap;
        justify-content: center;
        background: none !important
    }
}

.hero .hero-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline-end: 3vw;
    transition: all ease-in-out 1s
}

@media(max-width: 991px) {
    .hero .hero-desc {
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.25rem 1.25rem;
        width: 100%;
        margin-block: 1rem 2rem;
        transform: scaleX(1)
    }
}

.hero .hero-desc .year {
    font-size: 7rem;
    line-height: .5
}

@media(max-width: 991px) {
    .hero .hero-desc .year {
        font-size: calc(2.625rem + 6vw);
        font-weight: bold;
        grid-row: span 2;
        order: -1
    }
}

.hero .hero-desc .slogan {
    font-size: 3rem
}

@media(min-width: 992px) {
    .hero .hero-desc.hide {
        margin-inline-end: -10rem;
        transform: scaleX(0)
    }
}

.hero {
    position: relative
}

.hero .swiper-container {
    width: 100%
}

.hero .swiper-slide {
    border-radius: .5rem;
    transition: width ease-in-out .8s;
    overflow: hidden;
    cursor: grab
}

.hero .swiper-slide img {
    width: 100%;
    height: 580px;
    border-radius: .5rem;
    transform: scale(1.25);
    transition: all ease-in-out .8s
}

@media(min-width: 1400px)and (max-width: 1540px) {
    .hero .swiper-slide img {
        height: 400px
    }
}

@media(max-width: 1400px) {
    .hero .swiper-slide img {
        height: 350px
    }
}

.hero .swiper-slide .slide-number {
    position: absolute;
    z-index: 1;
    top: 1rem;
    inset-inline-start: 1rem;
    color: #fff;
    font-size: 4em;
    font-weight: 300
}

.hero .swiper-slide .title-wrapper {
    position: absolute;
    inset-inline: 1rem;
    top: 85%
}

@media(max-width: 1919px) {
    .hero .swiper-slide .title-wrapper {
        top: 70%
    }
}

@media(min-width: 1400px)and (max-width: 1540px) {
    .hero .swiper-slide .title-wrapper {
        top: 75%
    }
}

@media(max-width: 991px) {
    .hero .swiper-slide .title-wrapper {
        display: flex;
        align-items: center;
        gap: 6vw;
        top: auto;
        bottom: 2rem
    }
}

.hero .swiper-slide .title {
    color: #fff;
    max-width: 80%;
    line-height: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: start;
    transform: scale(1);
    opacity: 1;
    transition: all ease-in-out .16s
}

.hero .swiper-slide ul {
    width: 88%;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: all ease-in-out 1s;
    position: absolute;
    bottom: 2rem;
    inset-inline: 1.5rem
}

@media(max-width: 1399px) {
    .hero .swiper-slide ul {
        bottom: 1rem
    }
}

.hero .swiper-slide ul .item {
    position: relative;
    transition: none;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .3);
    line-height: 1
}

.hero .swiper-slide ul .item:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.hero .swiper-slide ul .item a {
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    padding-top: .5rem;
    padding-bottom: .25rem;
    padding-inline-start: 1rem;
    padding-inline-end: 3rem
}

@media(min-width: 1400px)and (max-width: 1540px) {
    .hero .swiper-slide ul .item a {
        font-size: 1.2rem
    }
}

@media(max-width: 1399px) {
    .hero .swiper-slide ul .item a {
        font-size: 1.25rem
    }
}

.hero .swiper-slide ul .item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #fff;
    transform: translateX(-100%) scaleX(0);
    transition: transform .3s
}

.hero .swiper-slide ul .item:hover {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text.png) no-repeat 95%
}

.hero .swiper-slide ul .item:hover::after {
    transform: translateX(0) scaleX(1)
}

html:lang(ar) .hero .swiper-slide ul .item:hover {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text.png) no-repeat 5%
}

.hero .swiper-slide ul .item:hover a {
    color: #689741
}

.hero .swiper-slide ul .list-title {
    margin-bottom: 1rem
}

@media(max-width: 991px) {
    .hero .swiper-slide ul .list-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: fit-content;
        gap: 10vw
    }
}

.hero .swiper-slide ul .list-title .p-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 600
}

@media(max-width: 991px) {
    .hero .swiper-slide ul .list-title .p-title {
        font-size: 1.5rem
    }
}

@media(max-width: 991px) {
    .hero .swiper-slide.expanded {
        width: 417px !important
    }
}

@media(max-width: 991px)and (min-width: 1919px) {
    .hero .swiper-slide.expanded {
        width: 464px !important
    }
}

@media(max-width: 991px) {
    .hero .swiper-slide.expanded::before {
        width: 100% !important
    }

    .hero .swiper-slide.expanded img {
        transform: scale(1)
    }

    .hero .swiper-slide.expanded .title {
        transform: scale(0);
        opacity: 0
    }

    .hero .swiper-slide.expanded ul {
        transform: scaleY(1);
        opacity: 1
    }

    .hero .swiper-slide.expanded .title-wrapper {
        display: none
    }
}

@media(min-width: 992px) {
    .hero .swiper-slide:hover {
        width: 417px !important
    }
}

@media(min-width: 992px)and (min-width: 1919px) {
    .hero .swiper-slide:hover {
        width: 464px !important
    }
}

@media(min-width: 992px) {
    .hero .swiper-slide:hover::before {
        width: 100% !important
    }

    .hero .swiper-slide:hover img {
        transform: scale(1)
    }

    .hero .swiper-slide:hover .title {
        transform: scale(0);
        opacity: 0
    }

    .hero .swiper-slide:hover ul {
        transform: scaleY(1);
        opacity: 1
    }
}

.hero .slider-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: 1rem;
    position: absolute;
    top: calc(100% + 1rem);
    width: 100%
}

.hero .slider-actions .slider-count {
    display: flex;
    align-items: center;
    justify-content: end;
    column-gap: .5rem;
    width: 25%;
    font-weight: 600;
    color: #689741
}

.hero .slider-actions .slider-count::after {
    content: "";
    width: 90%;
    height: 1px;
    background-color: #689741;
    animation: lineWidth .5s
}

@media(max-width: 1399px) {
    .hero .slider-actions .slider-count::after {
        width: 80%
    }
}

@keyframes lineWidth {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

.hero .slider-actions .swiper-button-next,
.hero .slider-actions .swiper-button-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    width: 2rem !important;
    height: 2rem !important;
    margin-top: 0;
    padding: 0;
    line-height: normal;
    border-radius: 50%;
    background-image: none;
    overflow: hidden
}

.hero .slider-actions .swiper-button-next:hover {
    color: #fff
}

.hero .slider-actions .swiper-button-next:hover i {
    animation: nextBtn .5s
}

@keyframes nextBtn {
    0% {
        transform: translateX(100%) scale(0)
    }

    100% {
        transform: translateX(0) scale(1)
    }
}

.hero .slider-actions .swiper-button-prev:hover {
    color: #fff
}

.hero .slider-actions .swiper-button-prev:hover i {
    animation: prevBtn .5s
}

@keyframes prevBtn {
    0% {
        transform: translateX(-100%) scale(0)
    }

    100% {
        transform: translateX(0) scale(1)
    }
}

.hero .slide-expand-btn,
.hero .slide-collapse-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 11px rgba(0, 0, 0, .02)
}

@media(min-width: 992px) {

    .hero .slide-expand-btn,
    .hero .slide-collapse-btn {
        display: none
    }
}

.hero .slide-expand-btn i,
.hero .slide-collapse-btn i {
    font-size: 50%
}

.videos {
    position: relative;
    margin-top: 1rem
}

.videos .abstract {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    opacity: .1
}

.videos .abstract .icon {
    font-size: 30rem;
    line-height: 0
}

.lg-container.lg-show {
    direction: ltr
}

.gallery-videos-demo .open-video {
    width: 10rem
}

@media(min-width: 992px) {
    .gallery-videos-demo .open-video {
        width: 20rem
    }
}

.gallery-videos-demo .thumbnail {
    position: relative;
    border-radius: .5rem;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .5);
    cursor: pointer;
    overflow: hidden
}

.gallery-videos-demo .thumbnail .overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background-color: rgba(0, 0, 0, .5);
    opacity: .5;
    transition: all ease-in-out .15s
}

.gallery-videos-demo .thumbnail .overlay .title,
.gallery-videos-demo .thumbnail .overlay .play-icon {
    text-align: center;
    color: #fff
}

.gallery-videos-demo .thumbnail .overlay .play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    border: 1px solid #fff;
    border-radius: 50%
}

.gallery-videos-demo .thumbnail:hover .overlay {
    opacity: 1
}

.inner-bg {
    position: absolute;
    inset-inline-end: 0;
    bottom: 50%;
    transform: translateY(50%)
}

@media(max-width: 991px) {
    .inner-bg {
        transform: translateY(50%) scale(0.9) translateX(-5%) translateY(10%)
    }
}

.inner-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: static;
    inset-inline-start: 13.3%;
    bottom: 25%
}

@media(min-width: 1900px) {
    .inner-steps {
        inset-inline-start: 10.5%;
        bottom: 35%
    }
}

@media(min-width: 1200px)and (max-width: 1450px) {
    .inner-steps {
        inset-inline-start: 18%
    }
}

@media(max-width: 991px) {
    .inner-steps {
        inset-inline-start: -7%
    }
}

@media(max-width: 767px) {
    .inner-steps {
        display: none
    }
}

.inner-steps i {
    color: rgba(29, 77, 139, .7)
}

.inner-steps .active {
    position: relative;
    margin-bottom: 6.5rem
}

.inner-steps .active i::before {
    content: "" !important;
    animation: none !important
}

.inner-steps .active i::after {
    content: "";
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    top: 115%;
    height: 7rem;
    width: .5px;
    background-color: rgba(29, 77, 139, .7);
    animation: lineHeight .3s
}

@keyframes lineHeight {
    0% {
        height: 0
    }

    100% {
        height: 7rem
    }
}

.inner-steps a:hover i::before {
    content: "";
    animation: zoom .5s
}

@keyframes zoom {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1)
    }
}

.inner-steps a:last-of-type i::after {
    content: none
}

.inner-steps.green i {
    color: rgba(114, 166, 71, .7)
}

.inner-steps.green .active i::after {
    background-color: rgba(114, 166, 71, .7)
}

.breadcrumb {
    margin-bottom: 1rem
}

.breadcrumb li {
    font-size: 24px
}

.breadcrumb a {
    color: rgba(0, 0, 0, .6)
}

.breadcrumb .active {
    color: rgba(0, 0, 0, .5)
}

@media(min-width: 992px) {
    .inner-details-wrapper {
        max-width: 75%
    }
}

@media(min-width: 1200px)and (max-width: 1450px) {
    .inner-details-wrapper {
        display: flex;
        justify-content: end;
        margin-inline-start: auto;
        max-width: 80%
    }
}

.inner-details {
    position: relative
}

@media(min-width: 992px) {
    .inner-details {
        margin-top: 3rem
    }
}

@media(max-width: 767px) {
    .inner-details {
        margin-inline: -0.75rem
    }
}

.inner-details img.inner-hero-bg {
    width: 100%
}

.inner-details .top-start {
    position: absolute;
    inset-inline-start: 7%;
    top: -2rem;
    background-color: #fff;
    padding: 3rem 1rem .5rem
}

.inner-details .top-start::after {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-part.svg);
    position: absolute;
    top: -1rem;
    inset-inline-end: -3rem
}

@media(max-width: 767px) {
    .inner-details .top-start::after {
        top: -1.2rem;
        inset-inline-end: -3rem;
        transform: scale(0.6)
    }
}

@media(max-width: 767px) {
    .inner-details .top-start {
        inset-inline-start: 0;
        top: -1rem;
        padding: 2rem 1rem .5rem
    }

    .inner-details .top-start h4 {
        font-size: 1rem
    }

    .inner-details .top-start .small {
        font-size: .75rem
    }

    .inner-details .top-start h2 {
        font-size: 1.38rem
    }

    .inner-details .top-start .display-2 {
        font-size: 2.06rem
    }
}

.inner-details .top-end {
    position: absolute;
    inset-inline-end: -2%;
    top: -3.5rem;
    background-color: #3775a3;
    color: #fff;
    padding: 3rem 5vw .5rem
}

@media(max-width: 767px) {
    .inner-details .top-end {
        inset-inline-end: 0;
        top: -1rem;
        padding: 1rem 5vw .5rem
    }

    .inner-details .top-end h4 {
        font-size: 1rem
    }

    .inner-details .top-end .small {
        font-size: .75rem
    }
}

.inner-details .top-end::after {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-part-op.svg);
    position: absolute;
    bottom: -2rem;
    right: 50%;
    transform: translateX(50%) rotate(180deg)
}

@media(max-width: 767px) {
    .inner-details .top-end::after {
        top: 4.8rem;
        inset-inline-end: -5.4rem;
        transform: translateX(50%) rotate(180deg) scale(0.6)
    }
}

.inner-details .bottom {
    position: absolute;
    top: 11.5%;
    inset-inline-start: 37%;
    background-color: #214762;
    color: #fff;
    padding: 3rem 1rem 0
}

@media(max-width: 991px) {
    .inner-details .bottom {
        top: 8.5%
    }
}

@media(max-width: 767px) {
    .inner-details .bottom {
        padding: 1rem 1rem .5rem;
        top: 4.5%
    }

    .inner-details .bottom h4 {
        font-size: 1rem
    }

    .inner-details .bottom .small {
        font-size: .75rem
    }
}

.inner-details .bottom::after {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-part-op.svg);
    position: absolute;
    top: -2.3rem;
    inset-inline-end: -1rem
}

@media(max-width: 767px) {
    .inner-details .bottom::after {
        top: -2.2rem;
        inset-inline-end: -1.4rem;
        transform: scale(0.6)
    }
}

.inner-details .article-prev-next {
    margin-top: 3rem;
    padding: 1rem;
    border-top: 1px solid #d3d3d4;
    border-radius: .5rem;
    background-color: #f5f5f5
}

.inner-details .article-prev-next .title {
    display: flex;
    justify-content: center;
    align-items: center
}

.inner-details .article-prev-next .title a {
    color: #cbb071
}

.inner-details .article-prev-next .title a i {
    border: 1px solid #cbb071;
    border-radius: 50%;
    padding: 0 2px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    vertical-align: sub
}

.inner-details .article-prev-next .title a:hover {
    color: #937240
}

.inner-details .article-prev-next .title a:hover i {
    border-color: #937240
}

.inner-details .article-prev-next.sticky {
    position: sticky;
    bottom: 4rem;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: 0 -3px 20px rgba(0, 0, 0, .16);
    transform-origin: bottom;
    animation: showUp .6s
}

@media(max-width: 767px) {
    .inner-details .article-prev-next.sticky {
        bottom: 3.5rem
    }
}

@keyframes showUp {
    0% {
        transform: scaleY(0)
    }

    100% {
        transform: scaleY(1)
    }
}

.inner-details .iconed-box .title {
    margin-top: 1rem;
    font-size: 1.6rem
}

.inner-details .iconed-box .title.blue {
    color: #5a86b0
}

.inner-details .iconed-box .title.green {
    color: #72a647
}

.inner-details .iconed-box .title.red {
    color: #7f263f
}

.inner-details .iconed-box .title.orange {
    color: #e97924
}

.inner-details .iconed-box .title.gray {
    color: #8a8b8d
}

.inner-details .iconed-box .title.purple {
    color: #5e4875
}

.inner-details .iconed-box .title .purecounter~small {
    margin-inline-start: .25rem
}

.inner-details .iconed-box .text {
    margin-top: .25rem;
    font-size: 1.5rem
}

.inner-details .iconed-box.style-2 {
    display: flex;
    align-items: center;
    column-gap: .75rem
}

.inner-details .iconed-box.style-2 .icon {
    width: 3.5rem
}

.inner-details .iconed-box.style-2 .icon img {
    width: 100%
}

.inner-details .iconed-box.style-2 .title {
    margin-top: 0;
    font-weight: bold
}

.inner-details .iconed-box.style-2 .title small {
    font-size: 1rem;
    font-weight: normal
}

.inner-details .iconed-box.style-2 .text {
    margin-top: 0;
    font-size: 1rem
}

.inner-details .iconed-box.style-2.bordered {
    padding: 1rem;
    border: 1px solid #1d4d8b;
    border-end-start-radius: 1.5rem
}

.inner-details .iconed-box.style-2.bordered.green {
    border-color: #72a647
}

.inner-details .titled-box .title {
    font-size: 3rem;
    font-weight: bold;
    color: #1d4d8b
}

.inner-details .titled-box .title small {
    font-size: 1.25rem;
    font-weight: normal
}

.inner-details .titled-box .text {
    font-size: 1.5rem
}

.inner-details .titled-box.green .title {
    color: #72a647
}

.inner-details .logo-box .box-logo {
    display: block;
    height: 4rem;
    margin-inline: auto
}

.inner-details .logo-box .text {
    margin-top: .5rem;
    text-align: center;
    font-size: 1.5rem
}

.inner-details .banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    color: #fff;
    background-color: #1d4d8b
}

.inner-details .banner+.banner {
    margin-top: 1rem
}

.inner-details .banner .banner-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem
}

@media(min-width: 992px) {
    .inner-details .banner .banner-content {
        width: 70%
    }
}

.inner-details .banner .banner-content .title {
    font-size: 1.75rem;
    font-weight: bold
}

.inner-details .banner .banner-content .text {
    margin-top: .75rem;
    font-size: 1.6rem
}

.inner-details .banner .banner-img {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0
}

.inner-details .banner .banner-img img {
    max-height: 100%
}

.inner-details .banner.green {
    color: #fff;
    background: linear-gradient(180deg, #7ea851 0%, #7ca650 10.94%, #6b9449 46.88%, #4f753d 86.46%, #446838 100%)
}

.inner-details .check-line {
    display: flex;
    column-gap: .5rem
}

.inner-details .check-line .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    color: #1d4d8b;
    border-color: #1d4d8b
}

.inner-details .check-line .icon.green {
    color: #72a647;
    border-color: #72a647
}

.inner-details .check-line .text {
    font-size: 1.5rem
}

.inner-details .article-signature .name,
.inner-details .article-signature .job {
    text-align: center;
    font-size: 1.5rem
}

.inner-details .article-signature .name {
    color: #1d4d8b
}

.inner-details .article-signature .name.green {
    color: #72a647
}

@media(min-width: 992px) {
    .inner-hero {
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }
}

.inner-hero .title {
    font-weight: bold;
    color: #fff
}

.inner-content {
    padding: 2rem;
    padding-inline-end: 0
}

@media(max-width: 991px) {
    .inner-content {
        padding: 1rem
    }
}

.double-section .title {
    font-weight: bold
}

.double-section .top-section {
    background-color: var(--bs-secondary-bg)
}

.double-section .bottom-section {
    border-end-start-radius: 3rem;
    background-color: var(--bs-tertiary-bg)
}

.content-section>.title {
    text-align: center;
    font-weight: bold
}

.content-section hr {
    border-width: 2px;
    border-color: #fff;
    opacity: .5
}

.content-section.colored {
    padding: 2.5rem
}

@media(max-width: 991px) {
    .content-section.colored {
        padding: 1rem
    }
}

.content-section.colored .title {
    color: #fff
}

.content-section.colored .iconed-box.bordered {
    border-color: #fff
}

.content-section.colored.narrow {
    padding: 1rem
}

.content-section.colored.blue {
    background: linear-gradient(0deg, #3d82b3 0%, #3d82b3 15%, #397dac 39%, #2e7099 73%, #246487 98%, #246487 100%)
}

.content-section.colored.green {
    background: linear-gradient(0deg, #386732 6.54%, #467836 24.54%, #5d933c 56.54%, #6ba440 84.54%, #70aa42 106.54%)
}

.content-section.colored.bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.charts-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 1rem;
    position: relative;
    padding: 1rem
}

@media(min-width: 992px) {
    .charts-card {
        min-height: 550px
    }
}

.charts-card canvas {
    position: relative;
    max-width: 100%;
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/charts-icon.svg) no-repeat;
    background-size: 40%;
    background-position-x: center;
    background-position-y: 55%
}

.charts-card canvas::after {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/charts-icon.svg);
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%)
}

.charts-card .legend-item {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto
}

.charts-card .legend-item .label {
    opacity: .7
}

.charts-card .legend-item .label-bullet {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: .5rem;
    width: .88rem;
    height: .88rem
}

.charts-card .legend-item .line {
    height: 1px;
    margin-inline: .75rem;
    background-color: rgba(221, 221, 221, .7)
}

.charts-card .legend-item .percent {
    font-size: 1.75rem;
    color: #689741;
    font-weight: 500
}

.charts-card .actions-btn {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 10
}

.charts-card .actions-btn .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #ecf2f7;
    color: rgba(29, 77, 139, .7)
}

.charts-card .actions-btn .btn i {
    transition: all .3s ease-in-out
}

.charts-card .actions-btn .btn.show {
    border: 1px solid #c3d8e7;
    background-color: #ecf2f7
}

.charts-card .actions-btn .btn.show i {
    transform: rotate(270deg);
    transition: all .3s
}

.charts-card .actions-btn .btn.show i::before {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%)
}

.charts-card.style-2 {
    justify-content: start;
    align-items: start;
    min-height: auto;
    padding: 2vw;
    border-color: #efefef;
    border-radius: 10px
}

.charts-card.style-2 .actions-btn {
    top: 2rem;
    inset-inline-end: 2rem
}

.chart-img {
    width: 100%
}

.chart-img img {
    display: block;
    margin-inline: auto;
    max-width: 100%
}

.go-top-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 5rem;
    inset-inline-end: 2rem;
    width: 2rem;
    height: 2rem;
    color: #fff;
    border-radius: 50%;
    background-color: rgba(203, 176, 113, .3);
    transform: translateY(100%);
    opacity: 0;
    transition: all .3s ease-in-out
}

.go-top-btn:hover {
    background-color: rgba(147, 114, 64, .7)
}

.go-top-btn.show {
    transform: translateY(0);
    opacity: 1
}

.main-modal .modal-dialog {
    margin-top: 0;
    min-width: 100%
}

.main-modal .modal-header .btn-close {
    margin-inline-start: 0;
    margin-inline-end: auto;
    background-image: none;
    background-color: #fff;
    color: #689741 !important;
    opacity: 1 !important;
    border-radius: 50%;
    box-shadow: 0px 4px 14px 10px rgba(0, 0, 0, .05);
    transform: scale(1.4)
}

.main-modal .modal-header .btn-close:hover {
    background-color: #689741
}

.main-modal .modal-header .btn-close:hover i {
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
    transition: transform .3s ease-in-out
}

.main-modal .modal-header .btn-close i {
    font-size: 70%;
    transition: transform .3s ease-in-out
}

.main-modal .modal-content {
    border: none;
    border-radius: 0
}

@media(min-width: 1900px) {
    .main-modal .modal-content {
        height: 85vh
    }
}

.download-modal .modal-content {
    padding: 2rem
}

.download-modal .modal-header .modal-title {
    font-size: 1.6rem;
    font-weight: bold;
    color: rgba(29, 77, 139, .7)
}

.download-modal .modal-header .btn-close {
    margin: 0;
    margin-inline-start: auto
}

.download-modal .modal-body {
    padding-block: 2rem
}

.download-modal .modal-footer {
    padding-top: 0;
    border: none
}

.download-modal .modal-footer>* {
    margin-block: 0
}

.download-form {
    display: flex;
    flex-direction: column;
    row-gap: 2rem
}

.download-form .file {
    display: flex;
    align-items: center;
    column-gap: .5rem
}

.download-form .file .icon {
    font-size: 3rem;
    color: rgba(29, 77, 139, .7)
}

.download-form .file .details .size {
    color: rgba(0, 0, 0, .6)
}

.download-form .download-body {
    display: flex;
    flex-direction: column;
    row-gap: 1rem
}

.download-form .download-body .form-title {
    font-size: 1.5rem;
    color: rgba(0, 0, 0, .6)
}

.details-modal .modal-dialog {
    max-width: 100vw;
    margin-block: 0
}

.details-modal .modal-content {
    border-radius: 0;
    border: none;
    height: 95vh;
    padding: 2.5rem
}

@media(min-width: 1900px) {
    .details-modal .modal-content {
        height: 85vh
    }
}

.details-modal .modal-header {
    border-bottom: 0
}

.search {
    font-size: 1.5rem
}

.lang>* {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: 1.5rem
}

.list-item {
    position: relative;
    transition: none;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .3)
}

.list-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #fff;
    transform: translateX(-100%) scaleX(0);
    transition: transform .3s
}

.list-item:hover {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text.png) no-repeat 95%
}

.list-item:hover::after {
    transform: translateX(0) scaleX(1)
}

html:lang(ar) .list-item:hover {
    background: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text.png) no-repeat 5%
}

.list-item:hover a {
    color: #689741
}

.list-item a {
    color: #fff;
    font-size: 1.5rem;
    padding-inline-start: 1rem
}

.btn-grad {
    position: relative;
    transition: all .35s;
    overflow: hidden
}

.btn-grad.btn-outline-primary:before,
.btn-grad.btn-outline-primary:after {
    background: linear-gradient(90deg, #3d85b1 -24%, #1d4d8b)
}

.btn-grad:before,
.btn-grad:after {
    content: "";
    position: absolute;
    inset-inline-start: -100%;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #3d85b1 -24%, #60a734);
    transition: all .35s
}

.btn-grad:before {
    opacity: .5
}

.btn-grad:after {
    transition-delay: .2s
}

.btn-grad:hover:before,
.btn-grad:hover:after {
    inset-inline-start: 0
}

.btn-grad:hover img[alt=download] {
    filter: brightness(0) invert(1);
    animation: dowloadIcon 1s
}

@keyframes dowloadIcon {
    0% {
        transform: translateY(-50%)
    }

    50% {
        transform: translateY(50%)
    }

    100% {
        transform: translateY(0)
    }
}

.download-report-btn {
    align-items: center;
    justify-content: center;
    display: flex;
    column-gap: .25rem
}

@media(min-width: 992px) {
    .download-report-btn {
        width: 8rem
    }
}

.download-report-btn img {
    filter: brightness(0) invert(1)
}

.download-report-btn:hover {
    background-color: #1d4d8b
}

.stats-card {
    position: relative;
    background: linear-gradient(#e9eff3, #fff);
    padding: 2.2rem;
    border: 1px solid rgba(29, 77, 139, .6)
}

.stats-card * {
    position: relative;
    z-index: 5
}

.stats-card::before {
    content: "";
    position: absolute;
    top: -0.7em;
    inset-inline-end: -0.4em;
    width: 20px;
    height: 30px;
    border-inline-start: 1px solid rgba(29, 77, 139, .6);
    background: #fff;
    transform: rotate(45deg)
}

.stats-card::after {
    content: "";
    position: absolute;
    inset: auto -1px -14px;
    height: 100%;
    width: 101%;
    background: linear-gradient(transparent, #fff)
}

@media(max-width: 991px) {
    .stats-card {
        border-start-end-radius: 2rem
    }

    .stats-card::after,
    .stats-card::before {
        content: none
    }
}

.sheet-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: .5rem
}

.content-divider {
    display: flex;
    flex-direction: column;
    row-gap: .25rem;
    width: 100%;
    margin-block: 1.5rem
}

.content-divider .line {
    height: 1px;
    width: 100%
}

.content-divider .line:nth-child(1) {
    background-color: #b9d288
}

.content-divider .line:nth-child(2) {
    background-color: #c7dba0
}

.content-divider .line:nth-child(3) {
    background-color: #d5e4b8
}

.content-divider .line:nth-child(4) {
    background-color: #e3edd0
}

.content-divider .line:nth-child(5) {
    background-color: #f1f6e7
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 100;
    height: 100vh;
    background-color: #fff
}

.loader.hide {
    display: none
}

.loader .big-img {
    position: relative;
    overflow: hidden
}

.loader .big-img .icon {
    position: absolute;
    bottom: 50%;
    inset-inline-start: 0;
    transform: translateY(50%);
    color: rgba(255, 255, 255, .25);
    font-size: 18rem;
    line-height: .5;
    animation: imgAnimate infinite 1.5s ease-in-out
}

@media(max-width: 991px) {
    .loader .big-img .icon {
        top: 28%
    }
}

.loader .title-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    position: relative;
    width: 38rem;
    height: 10rem;
    padding: 3rem;
    transform: translateX(0.6rem);
    overflow: hidden;
    color: #fff;
    background-color: #72a647;
    background: linear-gradient(90deg, #70aa42 -1.94%, #5d933c -1.93%, #6ba440 21.06%, #386732 102.6%, #467836 102.6%)
}

@media(max-width: 767px) {
    .loader .title-area {
        width: 16rem;
        height: 5rem;
        padding: 1rem;
        transform: translateX(0.25rem)
    }
}

.loader .title-area .abstract {
    position: absolute;
    inset-inline-end: 20%;
    top: 50%
}

@media(max-width: 767px) {
    .loader .title-area .abstract {
        inset-inline-end: 10%
    }
}

@keyframes imgAnimate {
    0% {
        inset-inline-start: -50%;
        opacity: 0
    }

    100% {
        inset-inline-start: 100%;
        opacity: 1
    }
}

.purecounter {
    display: inline-block
}

.table td .purecounter {
    min-width: 3rem
}

.form-select {
    cursor: pointer;
    box-shadow: none !important
}

html:lang(ar) .form-select {
    background-position: left .75rem center
}

.breadcrumb {
    flex-wrap: nowrap
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
    padding-inline-start: .5rem
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    float: none;
    padding-right: 0;
    padding-inline-end: .5rem
}

.dropdown .btn::after {
    margin: 0;
    margin-inline-start: .5rem
}

.dropdown .dropdown-menu {
    position: absolute;
    text-align: start;
    padding-block: 0;
    inset-inline: auto 0 !important;
    border: none;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .1294117647)
}

.dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -0.63rem;
    inset-inline-end: 1rem;
    width: 0;
    height: 0;
    filter: drop-shadow(0 -3px 2px rgba(0, 0, 0, 0.05));
    border-style: solid;
    border-width: 0 12.5px 12px 12.5px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff rgba(0, 0, 0, 0)
}

.dropdown .dropdown-menu li {
    padding: .25rem
}

.dropdown .dropdown-menu li>* {
    border-radius: .25rem
}

.dropdown .dropdown-menu li>*:hover {
    background-color: #f0f6eb
}

@media(min-width: 992px) {
    .dropdown .dropdown-menu[data-bs-popper] {
        margin-top: 0
    }
}

.tooltip {
    --bs-tooltip-bg: #689741
}

*[class*=ms-],
*[class*=me-] {
    margin-left: 0 !important;
    margin-right: 0 !important
}

*[class*=ps-],
*[class*=pe-] {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.m-1 {
    margin: 0.25rem !important
}

.mt-1 {
    margin-top: 0.25rem !important
}

.mt-n1 {
    margin-top: -0.25rem !important
}

.mb-1 {
    margin-bottom: 0.25rem !important
}

.my-1 {
    margin-block: 0.25rem !important
}

.mb-n1 {
    margin-bottom: -0.25rem !important
}

.ms-1 {
    margin-inline-start: 0.25rem !important
}

.me-1 {
    margin-inline-end: 0.25rem !important
}

.mx-1 {
    margin-inline: 0.25rem !important
}

.ms-n1 {
    margin-inline-start: -0.25rem !important
}

.me-n1 {
    margin-inline-end: -0.25rem !important
}

.p-1 {
    padding: 0.25rem !important
}

.pt-1 {
    padding-top: 0.25rem !important
}

.pb-1 {
    padding-bottom: 0.25rem !important
}

.ps-1 {
    padding-inline-start: 0.25rem !important
}

.pe-1 {
    padding-inline-end: 0.25rem !important
}

.px-1 {
    padding-inline: 0.25rem !important
}

.py-1 {
    padding-block: 0.25rem !important
}

.m-2 {
    margin: 0.5rem !important
}

.mt-2 {
    margin-top: 0.5rem !important
}

.mt-n2 {
    margin-top: -0.5rem !important
}

.mb-2 {
    margin-bottom: 0.5rem !important
}

.my-2 {
    margin-block: 0.5rem !important
}

.mb-n2 {
    margin-bottom: -0.5rem !important
}

.ms-2 {
    margin-inline-start: 0.5rem !important
}

.me-2 {
    margin-inline-end: 0.5rem !important
}

.mx-2 {
    margin-inline: 0.5rem !important
}

.ms-n2 {
    margin-inline-start: -0.5rem !important
}

.me-n2 {
    margin-inline-end: -0.5rem !important
}

.p-2 {
    padding: 0.5rem !important
}

.pt-2 {
    padding-top: 0.5rem !important
}

.pb-2 {
    padding-bottom: 0.5rem !important
}

.ps-2 {
    padding-inline-start: 0.5rem !important
}

.pe-2 {
    padding-inline-end: 0.5rem !important
}

.px-2 {
    padding-inline: 0.5rem !important
}

.py-2 {
    padding-block: 0.5rem !important
}

.m-3 {
    margin: 0.75rem !important
}

.mt-3 {
    margin-top: 0.75rem !important
}

.mt-n3 {
    margin-top: -0.75rem !important
}

.mb-3 {
    margin-bottom: 0.75rem !important
}

.my-3 {
    margin-block: 0.75rem !important
}

.mb-n3 {
    margin-bottom: -0.75rem !important
}

.ms-3 {
    margin-inline-start: 0.75rem !important
}

.me-3 {
    margin-inline-end: 0.75rem !important
}

.mx-3 {
    margin-inline: 0.75rem !important
}

.ms-n3 {
    margin-inline-start: -0.75rem !important
}

.me-n3 {
    margin-inline-end: -0.75rem !important
}

.p-3 {
    padding: 0.75rem !important
}

.pt-3 {
    padding-top: 0.75rem !important
}

.pb-3 {
    padding-bottom: 0.75rem !important
}

.ps-3 {
    padding-inline-start: 0.75rem !important
}

.pe-3 {
    padding-inline-end: 0.75rem !important
}

.px-3 {
    padding-inline: 0.75rem !important
}

.py-3 {
    padding-block: 0.75rem !important
}

.m-4 {
    margin: 1rem !important
}

.mt-4 {
    margin-top: 1rem !important
}

.mt-n4 {
    margin-top: -1rem !important
}

.mb-4 {
    margin-bottom: 1rem !important
}

.my-4 {
    margin-block: 1rem !important
}

.mb-n4 {
    margin-bottom: -1rem !important
}

.ms-4 {
    margin-inline-start: 1rem !important
}

.me-4 {
    margin-inline-end: 1rem !important
}

.mx-4 {
    margin-inline: 1rem !important
}

.ms-n4 {
    margin-inline-start: -1rem !important
}

.me-n4 {
    margin-inline-end: -1rem !important
}

.p-4 {
    padding: 1rem !important
}

.pt-4 {
    padding-top: 1rem !important
}

.pb-4 {
    padding-bottom: 1rem !important
}

.ps-4 {
    padding-inline-start: 1rem !important
}

.pe-4 {
    padding-inline-end: 1rem !important
}

.px-4 {
    padding-inline: 1rem !important
}

.py-4 {
    padding-block: 1rem !important
}

.m-5 {
    margin: 1.25rem !important
}

.mt-5 {
    margin-top: 1.25rem !important
}

.mt-n5 {
    margin-top: -1.25rem !important
}

.mb-5 {
    margin-bottom: 1.25rem !important
}

.my-5 {
    margin-block: 1.25rem !important
}

.mb-n5 {
    margin-bottom: -1.25rem !important
}

.ms-5 {
    margin-inline-start: 1.25rem !important
}

.me-5 {
    margin-inline-end: 1.25rem !important
}

.mx-5 {
    margin-inline: 1.25rem !important
}

.ms-n5 {
    margin-inline-start: -1.25rem !important
}

.me-n5 {
    margin-inline-end: -1.25rem !important
}

.p-5 {
    padding: 1.25rem !important
}

.pt-5 {
    padding-top: 1.25rem !important
}

.pb-5 {
    padding-bottom: 1.25rem !important
}

.ps-5 {
    padding-inline-start: 1.25rem !important
}

.pe-5 {
    padding-inline-end: 1.25rem !important
}

.px-5 {
    padding-inline: 1.25rem !important
}

.py-5 {
    padding-block: 1.25rem !important
}

.m-6 {
    margin: 1.5rem !important
}

.mt-6 {
    margin-top: 1.5rem !important
}

.mt-n6 {
    margin-top: -1.5rem !important
}

.mb-6 {
    margin-bottom: 1.5rem !important
}

.my-6 {
    margin-block: 1.5rem !important
}

.mb-n6 {
    margin-bottom: -1.5rem !important
}

.ms-6 {
    margin-inline-start: 1.5rem !important
}

.me-6 {
    margin-inline-end: 1.5rem !important
}

.mx-6 {
    margin-inline: 1.5rem !important
}

.ms-n6 {
    margin-inline-start: -1.5rem !important
}

.me-n6 {
    margin-inline-end: -1.5rem !important
}

.p-6 {
    padding: 1.5rem !important
}

.pt-6 {
    padding-top: 1.5rem !important
}

.pb-6 {
    padding-bottom: 1.5rem !important
}

.ps-6 {
    padding-inline-start: 1.5rem !important
}

.pe-6 {
    padding-inline-end: 1.5rem !important
}

.px-6 {
    padding-inline: 1.5rem !important
}

.py-6 {
    padding-block: 1.5rem !important
}

.m-7 {
    margin: 1.75rem !important
}

.mt-7 {
    margin-top: 1.75rem !important
}

.mt-n7 {
    margin-top: -1.75rem !important
}

.mb-7 {
    margin-bottom: 1.75rem !important
}

.my-7 {
    margin-block: 1.75rem !important
}

.mb-n7 {
    margin-bottom: -1.75rem !important
}

.ms-7 {
    margin-inline-start: 1.75rem !important
}

.me-7 {
    margin-inline-end: 1.75rem !important
}

.mx-7 {
    margin-inline: 1.75rem !important
}

.ms-n7 {
    margin-inline-start: -1.75rem !important
}

.me-n7 {
    margin-inline-end: -1.75rem !important
}

.p-7 {
    padding: 1.75rem !important
}

.pt-7 {
    padding-top: 1.75rem !important
}

.pb-7 {
    padding-bottom: 1.75rem !important
}

.ps-7 {
    padding-inline-start: 1.75rem !important
}

.pe-7 {
    padding-inline-end: 1.75rem !important
}

.px-7 {
    padding-inline: 1.75rem !important
}

.py-7 {
    padding-block: 1.75rem !important
}

.m-8 {
    margin: 2rem !important
}

.mt-8 {
    margin-top: 2rem !important
}

.mt-n8 {
    margin-top: -2rem !important
}

.mb-8 {
    margin-bottom: 2rem !important
}

.my-8 {
    margin-block: 2rem !important
}

.mb-n8 {
    margin-bottom: -2rem !important
}

.ms-8 {
    margin-inline-start: 2rem !important
}

.me-8 {
    margin-inline-end: 2rem !important
}

.mx-8 {
    margin-inline: 2rem !important
}

.ms-n8 {
    margin-inline-start: -2rem !important
}

.me-n8 {
    margin-inline-end: -2rem !important
}

.p-8 {
    padding: 2rem !important
}

.pt-8 {
    padding-top: 2rem !important
}

.pb-8 {
    padding-bottom: 2rem !important
}

.ps-8 {
    padding-inline-start: 2rem !important
}

.pe-8 {
    padding-inline-end: 2rem !important
}

.px-8 {
    padding-inline: 2rem !important
}

.py-8 {
    padding-block: 2rem !important
}

.m-9 {
    margin: 2.25rem !important
}

.mt-9 {
    margin-top: 2.25rem !important
}

.mt-n9 {
    margin-top: -2.25rem !important
}

.mb-9 {
    margin-bottom: 2.25rem !important
}

.my-9 {
    margin-block: 2.25rem !important
}

.mb-n9 {
    margin-bottom: -2.25rem !important
}

.ms-9 {
    margin-inline-start: 2.25rem !important
}

.me-9 {
    margin-inline-end: 2.25rem !important
}

.mx-9 {
    margin-inline: 2.25rem !important
}

.ms-n9 {
    margin-inline-start: -2.25rem !important
}

.me-n9 {
    margin-inline-end: -2.25rem !important
}

.p-9 {
    padding: 2.25rem !important
}

.pt-9 {
    padding-top: 2.25rem !important
}

.pb-9 {
    padding-bottom: 2.25rem !important
}

.ps-9 {
    padding-inline-start: 2.25rem !important
}

.pe-9 {
    padding-inline-end: 2.25rem !important
}

.px-9 {
    padding-inline: 2.25rem !important
}

.py-9 {
    padding-block: 2.25rem !important
}

.m-10 {
    margin: 2.5rem !important
}

.mt-10 {
    margin-top: 2.5rem !important
}

.mt-n10 {
    margin-top: -2.5rem !important
}

.mb-10 {
    margin-bottom: 2.5rem !important
}

.my-10 {
    margin-block: 2.5rem !important
}

.mb-n10 {
    margin-bottom: -2.5rem !important
}

.ms-10 {
    margin-inline-start: 2.5rem !important
}

.me-10 {
    margin-inline-end: 2.5rem !important
}

.mx-10 {
    margin-inline: 2.5rem !important
}

.ms-n10 {
    margin-inline-start: -2.5rem !important
}

.me-n10 {
    margin-inline-end: -2.5rem !important
}

.p-10 {
    padding: 2.5rem !important
}

.pt-10 {
    padding-top: 2.5rem !important
}

.pb-10 {
    padding-bottom: 2.5rem !important
}

.ps-10 {
    padding-inline-start: 2.5rem !important
}

.pe-10 {
    padding-inline-end: 2.5rem !important
}

.px-10 {
    padding-inline: 2.5rem !important
}

.py-10 {
    padding-block: 2.5rem !important
}

.m-11 {
    margin: 2.75rem !important
}

.mt-11 {
    margin-top: 2.75rem !important
}

.mt-n11 {
    margin-top: -2.75rem !important
}

.mb-11 {
    margin-bottom: 2.75rem !important
}

.my-11 {
    margin-block: 2.75rem !important
}

.mb-n11 {
    margin-bottom: -2.75rem !important
}

.ms-11 {
    margin-inline-start: 2.75rem !important
}

.me-11 {
    margin-inline-end: 2.75rem !important
}

.mx-11 {
    margin-inline: 2.75rem !important
}

.ms-n11 {
    margin-inline-start: -2.75rem !important
}

.me-n11 {
    margin-inline-end: -2.75rem !important
}

.p-11 {
    padding: 2.75rem !important
}

.pt-11 {
    padding-top: 2.75rem !important
}

.pb-11 {
    padding-bottom: 2.75rem !important
}

.ps-11 {
    padding-inline-start: 2.75rem !important
}

.pe-11 {
    padding-inline-end: 2.75rem !important
}

.px-11 {
    padding-inline: 2.75rem !important
}

.py-11 {
    padding-block: 2.75rem !important
}

.m-12 {
    margin: 3rem !important
}

.mt-12 {
    margin-top: 3rem !important
}

.mt-n12 {
    margin-top: -3rem !important
}

.mb-12 {
    margin-bottom: 3rem !important
}

.my-12 {
    margin-block: 3rem !important
}

.mb-n12 {
    margin-bottom: -3rem !important
}

.ms-12 {
    margin-inline-start: 3rem !important
}

.me-12 {
    margin-inline-end: 3rem !important
}

.mx-12 {
    margin-inline: 3rem !important
}

.ms-n12 {
    margin-inline-start: -3rem !important
}

.me-n12 {
    margin-inline-end: -3rem !important
}

.p-12 {
    padding: 3rem !important
}

.pt-12 {
    padding-top: 3rem !important
}

.pb-12 {
    padding-bottom: 3rem !important
}

.ps-12 {
    padding-inline-start: 3rem !important
}

.pe-12 {
    padding-inline-end: 3rem !important
}

.px-12 {
    padding-inline: 3rem !important
}

.py-12 {
    padding-block: 3rem !important
}

.ms-auto,
.me-auto {
    margin-left: 0 !important;
    margin-right: 0 !important
}

@media(min-width: 992px) {
    .ms-auto {
        margin-inline-start: auto !important
    }
}

@media(min-width: 992px) {
    .me-auto {
        margin-inline-end: auto !important
    }
}

@media(max-width: 767px) {
    .m-xs-0 {
        margin: 0 !important
    }
}

.text-start {
    text-align: start !important
}

.text-end {
    text-align: end !important
}

small,
.small {
    font-size: 1.125rem
}

.btn {
    --bs-btn-line-height: 1
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff
}

.accordion {
    --bs-accordion-btn-icon-transform: rotate(0deg)
}

.accordion.blue {
    --bs-accordion-active-color: #fff;
    --bs-accordion-active-bg: #1d4d8b
}

.accordion.green {
    --bs-accordion-active-color: #fff;
    --bs-accordion-active-bg: #72A647
}

.accordion .accordion-header {
    position: relative
}

.accordion .accordion-header .actions-btn {
    position: absolute;
    z-index: 10;
    bottom: 50%;
    inset-inline-end: 3rem;
    transform: translateY(50%)
}

.accordion .accordion-header .actions-btn .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    color: rgba(255, 255, 255, .5)
}

.accordion .accordion-header .actions-btn .btn i {
    transition: all .3s ease-in-out
}

.accordion .accordion-header .actions-btn .btn.show {
    color: #fff
}

.accordion-button {
    font-size: 1.6rem
}

.accordion-button:focus {
    box-shadow: none
}

.accordion-button:not(.collapsed)::after {
    content: "";
    background-image: none
}

.accordion-button::after {
    content: "";
    margin-left: 0;
    margin-inline-start: auto;
    font-family: bootstrap-icons;
    background-image: none
}

.accordion-body {
    font-size: 1.5rem
}

.table {
    --bs-table-color: rgba(0, 0, 0, 0.6);
    font-size: 1.5rem;
    vertical-align: middle
}

.table>:not(caption)>*>* {
    padding: 1rem .5rem
}

@media(max-width: 767px) {
    .table tr th {
        width: 100% !important;
        text-align: center
    }
}

@media(max-width: 767px) {

    .table th,
    .table td {
        white-space: nowrap
    }
}

>.table.blue>thead>tr>* {
    color: #fff;
    background-color: rgba(29, 77, 139, .75)
}

.table.green>thead>tr>* {
    color: #fff;
    background-color: #72a647
}

.table.green>tbody>tr>*[colspan] {
    background-color: rgba(114, 166, 71, 0.1);
    border-bottom-color: #72a647
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: inherit
}

.table-mapkey {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem
}

.table-mapkey .title {
    font-weight: bold
}

.table-mapkey .mapkey {
    display: flex;
    align-items: center;
    column-gap: .5rem
}

.table-mapkey .mapkey .indicator {
    display: inline-block;
    width: 2rem;
    height: .5rem
}

.table-mapkey .mapkey .indicator.green {
    background-color: #72a647
}

.table-mapkey .mapkey .indicator.yellow {
    background-color: #ded55a
}

.table-mapkey .mapkey .indicator.red {
    background-color: #c23734
}

.inner-hero .capital-dev-lines {
    padding-top: 1rem;
    padding-left: 5%;
    padding-right: 5%
}

.inner-hero .capital-dev-lines .line-row {
    display: flex;
    align-items: end;
    column-gap: 1rem;
    color: #fff
}

.inner-hero .capital-dev-lines .line-row+.line-row {
    margin-top: .25rem
}

.inner-hero .capital-dev-lines .line-row .line-img {
    position: relative
}

.inner-hero .capital-dev-lines .line-row .line-img .year {
    position: absolute;
    right: 1.5rem;
    bottom: 25%;
    font-size: 1.5rem
}

html:lang(ar) .inner-hero .capital-dev-lines .line-row .line-img .year {
    left: 1.5rem;
    right: auto
}

.inner-hero .capital-dev-lines .line-row .data {
    display: flex;
    align-items: center;
    column-gap: .25rem;
    transform: translateY(1rem)
}

.inner-hero .capital-dev-lines .line-row .data .number {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1
}

.inner-hero .capital-dev-lines .line-row .data .currency {
    font-size: .75rem;
    opacity: .5
}

@media(max-width: 991px) {
    .inner-hero .capital-dev-lines {
        display: none;
        background-color: #72a647;
        padding-bottom: 1rem
    }
}

.inner-hero .manager-stats {
    position: relative
}

@media(max-width: 991px) {
    .inner-hero .manager-stats {
        display: none
    }
}

.inner-hero .manager-stats .stats .stats-part {
    display: inline-block
}

.inner-hero .manager-stats .stats .stats-part:first-child {
    transform: translateX(-2.5rem) translateY(3.25rem)
}

@media(min-width: 1400px) {
    .inner-hero .manager-stats .stats .stats-part:first-child {
        transform: translateX(-3.75rem) translateY(4rem)
    }
}

.inner-hero .manager-stats .stats .stats-part:not(:first-child) {
    transform: translateX(2rem) translateY(-2rem)
}

@media(min-width: 1400px) {
    .inner-hero .manager-stats .stats .stats-part:not(:first-child) {
        transform: translateX(0.5rem) translateY(-1rem)
    }
}

.inner-hero .manager-stats .stats .stats-part .stats-item:not(:first-child) {
    transform: translateY(-4rem)
}

.inner-hero .manager-stats .stats-item {
    position: relative;
    width: fit-content
}

.inner-hero .manager-stats .stats-item .info {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    text-align: center;
    line-height: 1
}

.inner-hero .manager-stats .stats-item .info .title,
.inner-hero .manager-stats .stats-item .info .subtitle {
    color: #517632
}

.inner-hero .manager-stats .stats-item .info .title {
    font-size: 2.5rem;
    font-weight: bold
}

.inner-hero .manager-stats .stats-item .info .title.word {
    font-size: 1.5rem
}

.inner-hero .manager-stats .stats-item .info .subtitle {
    display: block;
    font-size: 1.25rem
}

.inner-hero .manager-stats .stats-item .info .desc {
    color: #6d6e71
}

.inner-hero .manager-stats .stats-item.green .info .title,
.inner-hero .manager-stats .stats-item.green .info .subtitle,
.inner-hero .manager-stats .stats-item.green .info .desc {
    color: #fff
}

.inner-hero .manager-stats .photo .person-img {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 50%;
    transform: translate(20%, 46%)
}

@media(min-width: 1400px) {
    .inner-hero .manager-stats .photo .person-img {
        transform: translate(10%, 55.5%)
    }
}

.board-member {
    display: flex;
    align-items: center;
    column-gap: 2rem;
    row-gap: .75rem
}

.board-member .photo .person-img {
    width: 100%
}

.board-member .info .title,
.board-member .info .name {
    color: #1d4d8b
}

.board-member .info .title {
    font-size: 1.125rem
}

.board-member .info .name {
    font-size: 1.5rem
}

.board-member .info .job {
    font-size: 1.125rem
}

.board-member .info.green .title,
.board-member .info.green .name {
    color: #72a647
}

.board-member.vertical {
    flex-direction: column;
    justify-content: center
}

.board-member.vertical .info {
    text-align: center
}

.inner-details #top-picture {
    display: none
}

.inner-hero .eco-stats {
    position: relative
}

@media(max-width: 991px) {
    .inner-hero .eco-stats {
        display: none
    }
}

.inner-hero .eco-stats .stats {
    display: flex
}

.inner-hero .eco-stats .stats-item {
    position: relative;
    width: fit-content
}

.inner-hero .eco-stats .stats-item.item-1 {
    transform: translateX(-7rem) translateY(2rem)
}

@media(min-width: 1400px) {
    .inner-hero .eco-stats .stats-item.item-1 {
        transform: translateX(-7rem) translateY(2rem)
    }
}

.inner-hero .eco-stats .stats-item.item-2 {
    transform: translateX(11rem) translateY(12rem)
}

@media(min-width: 1400px) {
    .inner-hero .eco-stats .stats-item.item-2 {
        transform: translateX(11rem) translateY(12rem)
    }
}

.inner-hero .eco-stats .stats-item.item-2 .info {
    transform: translate(50%, 35%)
}

.inner-hero .eco-stats .stats-item.item-3 {
    transform: translateX(13rem) translateY(10rem)
}

@media(min-width: 1400px) {
    .inner-hero .eco-stats .stats-item.item-3 {
        transform: translateX(13rem) translateY(10rem)
    }
}

.inner-hero .eco-stats .stats-item.item-3 .info {
    transform: translate(50%, 25%)
}

.inner-hero .eco-stats .stats-item.item-4 {
    transform: translateX(9rem) translateY(9rem)
}

@media(min-width: 1400px) {
    .inner-hero .eco-stats .stats-item.item-4 {
        transform: translateX(9rem) translateY(9rem)
    }
}

.inner-hero .eco-stats .stats-item .info {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    text-align: center;
    line-height: 1
}

.inner-hero .eco-stats .stats-item .info .title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #517632
}

.inner-hero .eco-stats .stats-item .info .title.word {
    font-size: 1.75rem
}

.inner-hero .eco-stats .stats-item .info .desc {
    font-size: 1rem;
    color: #517632
}

.inner-hero .eco-stats .stats-item.green .info .title,
.inner-hero .eco-stats .stats-item.green .info .desc {
    color: #fff
}

@media(max-width: 991px) {
    .mt-n12 {
        margin-top: 0 !important
    }
}

.table-indicator {
    display: inline-block;
    width: 3rem;
    height: 1rem
}

.table-indicator.green {
    background-color: #72a647
}

.table-indicator.yellow {
    background-color: #ded55a
}

.table-indicator.red {
    background-color: #c23734
}

.development-cards {
    counter-reset: card
}

@media(min-width: 992px) {
    .development-cards {
        margin-inline-start: 1.5rem;
        padding-inline-start: 3rem
    }
}

.development-cards .dev-card {
    position: relative;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-radius: .5rem;
    margin-top: 2rem
}

@media(min-width: 1900px) {
    .development-cards .dev-card {
        margin-inline-start: 3rem
    }
}

.development-cards .dev-card::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0;
    inset-inline-start: -3rem;
    counter-increment: card;
    content: counter(card);
    color: rgba(29, 77, 139, .7);
    font-size: 200%;
    padding-top: 6px;
    border-radius: 50%;
    border: 4px solid rgba(29, 77, 139, .7)
}

@media(max-width: 991px) {
    .development-cards .dev-card::before {
        top: -1.5rem;
        inset-inline-start: -1.5rem
    }
}

.development-cards .dev-card ul li {
    position: relative;
    display: flex
}

.development-cards .dev-card ul li::before {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-no-text3.svg);
    opacity: .7;
    margin-top: 3px;
    margin-inline-end: 1rem
}

.award-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    height: 250px;
    padding: 1rem;
    border: 1px solid rgba(29, 77, 139, .7);
    border-end-start-radius: 3rem;
    border-top: 5px solid rgba(29, 77, 139, .7)
}

.award-card img {
    position: absolute;
    top: 1rem;
    right: 50%;
    transform: translateX(50%)
}

.technical-house-table thead th {
    background: #1d4d8b;
    color: #fff
}

.vac-top,
.vac-bottom {
    position: absolute;
    inset-inline-start: 7%;
    top: 4rem;
    width: 30%;
    background-color: #fff;
    padding: 1rem
}

.vac-top::after,
.vac-bottom::after {
    content: url(/ar/IReports/Reports2022/SiteAssets/images/icons/logo-part-op.svg);
    position: absolute;
    top: -1rem;
    inset-inline-start: -3rem
}

@media(max-width: 767px) {

    .vac-top::after,
    .vac-bottom::after {
        top: -1.2rem;
        inset-inline-end: -3rem;
        transform: scale(0.6)
    }
}

@media(max-width: 767px) {

    .vac-top,
    .vac-bottom {
        inset-inline-start: 1rem;
        top: -1rem;
        padding: 2rem 1rem .5rem
    }

    .vac-top h4,
    .vac-bottom h4 {
        font-size: 1rem
    }

    .vac-top .small,
    .vac-bottom .small {
        font-size: .75rem
    }

    .vac-top h2,
    .vac-bottom h2 {
        font-size: 1.38rem
    }

    .vac-top .display-2,
    .vac-bottom .display-2 {
        font-size: 2.06rem
    }
}

.vac-bottom {
    top: 13rem;
    inset-inline: auto 4rem
}

.vac-bottom::after {
    top: -1rem;
    inset-inline: auto -2rem
}

@media(max-width: 767px) {
    .vac-bottom h2 {
        font-size: 100%
    }
}

@media(max-width: 767px) {
    .vac-bottom {
        top: 4rem;
        inset-inline-end: 2rem;
        width: 50%
    }
}

.vaccine-chain {
    grid-template-rows: auto 1fr;
    gap: 3rem 1rem
}

@media(max-width: 991px) {
    .vaccine-chain>.flex-center:nth-of-type(1) {
        order: 1
    }

    .vaccine-chain ul:nth-of-type(1) {
        order: 2
    }

    .vaccine-chain>.flex-center:nth-of-type(2) {
        order: 3
    }

    .vaccine-chain ul:nth-of-type(2) {
        order: 4
    }

    .vaccine-chain>.flex-center:nth-of-type(3) {
        order: 5
    }

    .vaccine-chain ul:nth-of-type(3) {
        order: 6
    }

    .vaccine-chain>.flex-center:nth-of-type(4) {
        order: 7
    }

    .vaccine-chain ul:nth-of-type(4) {
        order: 8
    }
}

.welcome {
    padding: 0 !important
}

.welcome .welcome-content {
    margin: 0 !important
}

.welcome .welcome-content .ms-WPBody>div {
    display: flex !important
}

.welcome .welcome-content .main-content {
    float: none !important;
    width: auto !important;
    max-width: 100% !important
}

/*# sourceMappingURL=main.min.css.map */