@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');


/* font color 
green
#31724e
#49a370
#1a3f26

gold
#ecc65b
#d19f47
#b78242

*/

/* general styling */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background-color: #fcfbf6;
    text-align: right
}

main{
    margin-bottom: 50px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.site-content {
    min-height: 110vh;
}

.loader {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fcfbf6;
    z-index: 9999;
}

svg {
    overflow: visible;
    width: 100px;
    height: 150px;
}

    svg g {
        animation: slide 2s linear infinite;
    }

        svg g:nth-child(2) {
            animation-delay: 0.5s;
        }

            svg g:nth-child(2) path {
                animation-delay: 0.5s;
                stroke-dasharray: 0px 158px;
                stroke-dashoffset: 1px;
            }

    svg path {
        stroke: url(#gradient);
        stroke-width: 20px;
        stroke-linecap: round;
        fill: none;
        stroke-dasharray: 0 157px;
        stroke-dashoffset: 0;
        animation: escalade 2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
    }

@keyframes slide {
    0% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(50px);
    }
}

@keyframes escalade {
    0% {
        stroke-dasharray: 0 157px;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 156px 157px;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 156px 157px;
        stroke-dashoffset: -156px;
    }
}


.hidden {
    animation: scale-display--reversed 1s;
    animation-fill-mode: forwards;
    display: inline-flex;
}

@keyframes scale-display--reversed {
    0% {
        display: inline-flex;
        opacity: 1;
    }

    99% {
        display: inline-flex;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

.page-footer {
    background-color: #49a370 !important;
}

.footer-copyright {
    background-color: #31724e !important;
}

$height: 24px;
$iconwidth: 12px;
$iconheight: 12px;
$iconwidth-inner: 6px;
$iconheight-inner: 6px;
$fontsize: 12px;
$fontweight: 500;
$tag-opacity: 0.07;
//Start Brand Colors
$brand-low: 228, 0, 43;
$brand-medium: 200, 16, 47;
$brand-high: 166, 25, 46;
$brand-extrahigh: 118, 35, 47;
//End Brand Colors
//Start neutral Colors
$white: 255, 255, 255;
$background: 241, 241, 242;
$neutral-low: 230, 230, 230;
$neutral-medium: 190, 190, 190;
$neutral-high: 109, 110, 113;
$neutral-extrahigh: 77, 77, 79;
$black-low: 43, 43, 43;
$black: 0, 0, 0;
//End neutral Colors
//Start utility Colors
//positive
$positive-low: 110, 191, 93;
$positive-medium: 42, 148, 70;
$positive-high: 0, 113, 71;
//attention
$attention-low: 245, 136, 31;
$attention-medium: 205, 85, 39;
$attention-high: 173, 31, 44;
//critical
$critical-low: 200, 16, 47;
$critical-medium: 166, 25, 46;
$critical-high: 118, 35, 47;
//interaction
$interaction-low: 16, 117, 187;
$interaction-medium: 0, 53, 148;
$interaction-high: 0, 26, 112;
//informative
$informative-medium: 27, 162, 180;
//auxiliar
$auxiliar-low: 179, 62, 150;
$auxiliar-medium: 145, 40, 127;
$auxiliar-high: 112, 26, 83;
//End utility Colors

.bac-l-stack-xs {
    margin-left: 5px !important;
}

.bac-l-stack-s {
    margin-left: 10px !important;
}

.bac-l-stack-m {
    margin-left: 15px !important;
}

:root {
    --brand-low: #{$brand-low};
    --brand-medium: #{$brand-medium};
    --brand-high: #{$brand-high};
    --brand-extrahigh: #{$brand-extrahigh};
    --white: #{$white};
    --background: #{$background};
    --neutral-low: #{$neutral-low};
    --neutral-medium: #{$neutral-medium};
    --neutral-high: #{$neutral-high};
    --neutral-extrahigh: #{$neutral-extrahigh};
    --black-low: #{$black-low};
    --black: #{$black};
    --positive-low: #{$positive-low};
    --positive-medium: #{$positive-medium};
    --positive-high: #{$positive-high};
    --attention-low: #{$attention-low};
    --attention-medium: #{$attention-medium};
    --attention-high: #{$attention-high};
    --critical-low: #{$critical-low};
    --critical-medium: #{$critical-medium};
    --critical-high: #{$critical-high};
    --interaction-low: #{$interaction-low};
    --interaction-medium: #{$interaction-medium};
    --interaction-high: #{$interaction-high};
    --informative-medium: #{$informative-medium};
    --auxiliar-low: #{$auxiliar-low};
    --auxiliar-medium: #{$auxiliar-medium};
    --auxiliar-high: #{$auxiliar-high};
}

.highlight {
    position: relative;
    display: inline-flex;
    width: $iconwidth;
    height: $iconheight;
}

    .highlight::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: $iconwidth-inner;
        height: $iconheight-inner;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        border: none;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        z-index: 2;
        border-radius: 50%;
    }

    .highlight.neutral-medium::after {
        background: RGBA(var(--neutral-medium), 1);
        border: 1px solid RGBA(var(--neutral-medium), 1);
        -webkit-animation: pulse_neutral-medium 1s ease var(--iteration-count);
        animation: pulse_neutral-medium 1s ease var(--iteration-count);
    }

    .highlight.neutral-extrahigh::after {
        background: RGBA(var(--neutral-extrahigh), 1);
        border: 1px solid RGBA(var(--neutral-extrahigh), 1);
        -webkit-animation: pulse_neutral-extrahigh 1s ease var(--iteration-count);
        animation: pulse_neutral-extrahigh 1s ease var(--iteration-count);
    }

    .highlight.informative-medium::after {
        background: RGBA(var(--informative-medium), 1);
        border: 1px solid RGBA(var(--informative-medium), 1);
        -webkit-animation: pulse_informative-medium 1s ease var(--iteration-count);
        animation: pulse_informative-medium 1s ease var(--iteration-count);
    }

    .highlight.interaction-low::after {
        background: RGBA(var(--interaction-low), 1);
        border: 1px solid RGBA(var(--interaction-low), 1);
        -webkit-animation: pulse_interaction-low 1s ease var(--iteration-count);
        animation: pulse_interaction-low 1s ease var(--iteration-count);
    }

    .highlight.positive-medium::after {
        background: RGBA(var(--positive-medium), 1);
        border: 1px solid RGBA(var(--positive-medium), 1);
        -webkit-animation: pulse_positive-medium 1s ease var(--iteration-count);
        animation: pulse_positive-medium 1s ease var(--iteration-count);
    }

    .highlight.attention-low::after {
        background: RGBA(var(--attention-low), 1);
        border: 1px solid RGBA(var(--attention-low), 1);
        -webkit-animation: pulse_attention-low 1s ease var(--iteration-count);
        animation: pulse_attention-low 1s ease var(--iteration-count);
    }

    .highlight.critical-low::after {
        background: RGBA(var(--critical-low), 1);
        border: 1px solid RGBA(var(--critical-low), 1);
        -webkit-animation: pulse_critical-low 1s ease var(--iteration-count);
        animation: pulse_critical-low 1s ease var(--iteration-count);
    }

    .highlight.auxiliar-low::after {
        background: RGBA(var(--auxiliar-low), 1);
        border: 1px solid RGBA(var(--auxiliar-low), 1);
        -webkit-animation: pulse_auxiliar-low 1s ease var(--iteration-count);
        animation: pulse_auxiliar-low 1s ease var(--iteration-count);
    }

@keyframes pulse_neutral-medium {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--neutral-medium), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--neutral-medium), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_neutral-extrahigh {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--neutral-extrahigh), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--neutral-extrahigh), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_informative-medium {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--informative-medium), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--informative-medium), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_interaction-low {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--interaction-low), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--interaction-low), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_positive-medium {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--positive-medium), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--positive-medium), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_attention-low {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--attention-low), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--attention-low), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_critical-low {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--critical-low), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--critical-low), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

@keyframes pulse_auxiliar-low {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px RGBA(var(--auxiliar-low), 1);
        box-shadow: 0px 0px 0px 0px RGBA(var(--auxiliar-low), 1);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 5px transparent;
        box-shadow: 0px 0px 0px 5px transparent;
    }
}

.status-tag {
    position: relative;
    width: auto;
    display: inline-flex;
    height: $height;
    padding: 0 10px 0 5px;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
}

    .status-tag.neutral-medium {
        background: RGBA(var(--neutral-medium), $tag-opacity);
    }

    .status-tag.neutral-extrahigh {
        background: RGBA(var(--neutral-extrahigh), $tag-opacity);
    }

    .status-tag.informative-medium {
        background: RGBA(var(--informative-medium), $tag-opacity);
    }

    .status-tag.interaction-low {
        background: RGBA(var(--interaction-low), $tag-opacity);
    }

    .status-tag.positive-medium {
        background: RGBA(var(--positive-medium), $tag-opacity);
    }

    .status-tag.attention-low {
        background: RGBA(var(--attention-low), $tag-opacity);
    }

    .status-tag.critical-low {
        background: RGBA(var(--critical-low), $tag-opacity);
    }

    .status-tag.auxiliar-low {
        background: RGBA(var(--auxiliar-low), $tag-opacity);
    }

.status-tag__icon,
.status-tag__txt {
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex: 0 0 auto;
}

.status-tag__icon {
    font-size: 12px;
}

    .status-tag__icon.neutral-medium {
        color: RGBA(var(--neutral-medium), 1);
    }

    .status-tag__icon.neutral-extrahigh {
        color: RGBA(var(--neutral-extrahigh), 1);
    }

    .status-tag__icon.informative-medium {
        color: RGBA(var(--informative-medium), 1);
    }

    .status-tag__icon.interaction-low {
        color: RGBA(var(--interaction-low), 1);
    }

    .status-tag__icon.positive-medium {
        color: RGBA(var(--positive-medium), 1);
    }

    .status-tag__icon.attention-low {
        color: RGBA(var(--attention-low), 1);
    }

    .status-tag__icon.critical-low {
        color: RGBA(var(--critical-low), 1);
    }

    .status-tag__icon.auxiliar-low {
        color: RGBA(var(--auxiliar-low), 1);
    }

.status-tag__txt {
    font-family: Graphik, Helvetica, sans-serif;
    font-size: $fontsize;
    line-height: $fontsize;
    font-weight: $fontweight;
}

.status-tag.neutral-medium .status-tag__txt {
    color: RGBA(var(--neutral-medium), 1);
}

.status-tag.neutral-extrahigh .status-tag__txt {
    color: RGBA(var(--neutral-extrahigh), 1);
}

.status-tag.informative-medium .status-tag__txt {
    color: RGBA(var(--informative-medium), 1);
}

.status-tag.interaction-low .status-tag__txt {
    color: RGBA(var(--interaction-low), 1);
}

.status-tag.positive-medium .status-tag__txt {
    color: RGBA(var(--positive-medium), 1);
}

.status-tag.attention-low .status-tag__txt {
    color: RGBA(var(--attention-low), 1);
}

.status-tag.critical-low .status-tag__txt {
    color: RGBA(var(--critical-low), 1);
}

.status-tag.auxiliar-low .status-tag__txt {
    color: RGBA(var(--auxiliar-low), 1);
}

[class^="bacicon-"]::before,
[class*=" bacicon-"]::before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "bluecredomatic-iconset" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bacicon-email:before {
    content: "\31";
}

.bacicon-soccer-ball:before {
    content: "\32";
}