.cf {
    z-index: 99999999 !important
}

.mtb20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.bgGray550 {
    background: var(--gray550);
}

.f70 {
    font-size: 70px;
}

.hf {
    height: fit-content;
}

.bgGray200 {
    background: var(--gray200);
}

.secondary {
    color: var(--secondary);
}

.bgSecondary {
    background: var(--secondary);
}

.bgLinearGradientSP {
    background: linear-gradient(150deg, var(--secondary), var(--primary));
}

.mw30p {
    max-width: 30%;
}

.exclude:hover img {
    filter: none
}

.bgLightBlue {
    background-color: var(--lightblue)
}

.tac {
    text-align: center;
}

.tas {
    text-align: start;
}

.tae {
    text-align: end;
}

.f36 {
    font-size: 36px !important;
}

.f40 {
    font-size: 40px !important;
}

.r50p {
    border-radius: 50%;
}

.aic {
    align-items: center
}

.r25 {
    border-radius: 25px !important;
}


.g10 {
    gap: 10px !important;
}

.w50p {
    width: 50%;
}

.p20 {
    padding: 20px;
}

.secondary200 {
    color: var(--secondary200);
}

.h45 {
    height: 45px;
}

.bgPrimary {
    background: var(--primary);
}

.h60 {
    height: 60px;
}

.alie {
    align-items: end;
}

.numberFlag {
    padding-left: 45px;
    background-image: url(../images/saudi.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px;
}

.cardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.error {
    background-color: var(--red150);
    border: 1px solid var(--red)
}

.error:hover {
    background-color: var(--red150);
    border: 1px solid var(--red)
}

.w200 {
    width: 200px !important;
}

.mw350 {
    max-width: 350px;
}

.h15 {
    height: 15px;
}

.cp {
    cursor: pointer;
}

.wh70 {
    width: 70px !important;
    height: 70px !important;
}

.bgSecondary200 {
    background: var(--secondary200);
}

.topIndex {
    z-index: 100000000;
}

.zIndex {
    z-index: 0;
}

.bgGray150 {
    background: var(--gray150);
}

.ma {
    margin: auto !important;
}

.tal {
    text-align: left;
}

.-h {
    background: transparent !important;
}

.py10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.r20 {
    border-radius: 20px;
}

.h85 {
    height: 85px !important;
}

.my15 {
    margin: 15px 0 15px 0;
}

.py15 {
    padding: 15px 0 15px 0;
}

.jcsp {
    justify-content: space-between;
}

.h18 {
    height: 18px !important;
}

.bbd {
    border-bottom: 1px dashed var(--border) !important;
}

.aic {
    align-items: center;
}

.rf {
    border-radius: 50%;
}

.r28 {
    border-radius: 28px;
}

.g5 {
    gap: 5px !important;
}

.g10 {
    gap: 10px !important;
}

.p15 {
    padding: 15px !important;
}

.aie {
    align-items: end;
}

.fwBook {
    font-weight: 500 !important
}

.fwMedium {
    font-weight: 700 !important
}

.fwBold {
    font-weight: 800 !important
}

.w100 {
    width: 100px !important;
}

.oys {
    overflow-y: scroll;
    overflow-x: hidden;
}

.oxs {
    overflow-x: scroll;
    overflow-y: hidden;
}

.wsno {
    white-space: nowrap !important;
}

.dib {
    display: inline-block;
}

.oxs>* {
    display: inline-block;
}

.oxs>*>* {
    display: inline-block;
}

.g20 {
    gap: 20px !important;
}

textarea {

    border: 1px solid var(--border);
    min-height: 300px;
    border-radius: 10px;
    padding: 0px 20px 0px 20px;
    width: calc(100% - var(--unit) * 2);
    margin: var(--margin);
}

textarea:hover {
    border: 1px solid var(--borderActive);
}

textarea:active,
input:focus {
    border: 1px solid var(--borderActive);
}

.autocompleteInput {
    background: url('../images/autocomplete.svg') no-repeat calc(100% - var(--unit)*4) !important;
    padding-right: 40px !important;
    background-size: 16px 16px !important;
}


.bPrimary {
    border: 1px solid var(--primary);
}

.bSecondary {
    border: 1px solid var(--secondary);
}

.actionButton {
    background-color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}

.actionButton:hover {
    background-color: var(--secondary1300) !important;
    border: 1px solid var(--secondary1300);
}

.actionButton img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(48deg) brightness(103%) contrast(102%);
}

.actionButton:hover > img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(48deg) brightness(103%) contrast(102%);
}

.actionButton img:hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(48deg) brightness(103%) contrast(102%);
}

button:not(:disabled):hover {
    background-color: var(--secondary1300) !important;
    /*border: 1px solid var(--secondary1300);*/
}

.multiSelectAutocomplete {
    background: url('../images/autocomplete.svg') no-repeat calc(100% - var(--unit)*4) !important;
    background-size: 16px 16px !important;
}

.oxs::-webkit-scrollbar {
    height: 2px !important;
    width: 10px !important;
}

.oxs::-webkit-scrollbar-thumb {
    background-color: rgb(212, 212, 212);
    border-radius: 1px;
}

canvas {
    padding: 0 !important;
    margin: 0 !important;
}

details {
    padding: 0!important;
    margin: 0 !important;
}

summary {
    padding: 0 !important;
    margin: 0 !important;
}

.maphero-ctrl-attrib-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    margin: 0!important;
    padding-right: 15px;
}

/*.selected {*/
/*    background: var(--primary) !important;*/
/*    color: white;*/
/*}*/

/*.selected img {*/
/*    filter: brightness(0) saturate(100%) invert(100%) sepia(12%) saturate(7500%)*/
/*    hue-rotate(254deg) brightness(119%) contrast(110%) !important;*/
/*}*/

.listItem:hover {
    background: var(--secondary150);
}