html, body {
    background: #FFFFFF;
    font-family: UniversNextArabic;
}

/*UniversNextArabic Style*/

.d-flex {
    display: flex !important;
}

.d-block {
    display: block !important;
}

.d-flex-R {
    display: flex !important;
    flex-direction: row !important;
}

.d-flex-C {
    display: flex !important;
    flex-direction: column !important;
}

.flexWarp {
    flex-wrap: wrap;
}

.text-center {
    text-align: center !important;
}

.align-items-center {
    align-items: center !important;
    display: flex !important;
}

.m-auto {
    margin: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

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

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

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

.widfit {
    width: fit-content !important;
}

.wid100 {
    width: 100%;
}

.servicesSec {
    padding: 30px 10%;
    background: white;
}

.servicesSec .servicesLink {
    position: relative;
    width: 25%;
    border-left: 3px solid #0084bd;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
    color: black !important;
    transition: 0.5s ease-in-out;
    cursor: pointer;

}

.servicesSec .servicesLink:last-child {
    border-left: 0;
}

.servicesSec .servicesLink .servicesSvg {
    margin: 0 auto 7px;
    fill: #0084bd;
}

.servicesSec .servicesLink:hover .servicesSvg, .servicesSec .servicesLink.active .servicesSvg {
    scale: 1.1;
}

.servicesSec .servicesLink:hover, .servicesSec .servicesLink.active {
    text-shadow: 0 0 10px #0084bd;
}

.servicesSec .servicesLink .sec1, .servicesSec .servicesLink .sec2, .servicesSec .servicesLink .sec3, .servicesSec .servicesLink .sec4 {
    position: absolute;
    background: white;
    padding: 0;
    transform: translate(-50%, 0);
    left: 50%;
    top: 75px;
    width: max-content;
    border-radius: 5px;
    box-shadow: 0 0 15px #8e8e8e;
    z-index: 9;
}

.secSerLinkItem .flexWarp tr:hover span {
    color: white;
}


.secSerLinkItem .flexWarp tbody {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.secSerLinkItem .flexWarp tr {
    background: transparent;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    border-bottom: dashed 1px #c6c6c6;
}

.secSerLinkItem .flexWarp tr:last-child {
    border: none;
}

.secSerLinkItem .flexWarp tr td a {
    border-bottom: none;
}

.secSerLinkItem .flexWarp tr:hover {
    background: #0084bd;
}

.secSerLinkItem .flexWarp tr:nth-child(4n) {
    flex-grow: 1;
}


.secSerLinkItem .flexWarp {
    display: none !important;
}

.secSerLinkItem .flexWarp.op {
    display: flex !important;
}

.secSerLinkItem .flexWarp tr td span {
    line-height: 40px;
}

.secSerLinkItem .flexWarp tr td span:before {
    content: "»";
    margin: 0 7px;
    position: relative;
    top: 0;
    color: orange;
}

.secSerLinkItem .flexWarp tr td:has(span:empty) {
    display: none;
}

.servicesLinkItem span {
    font-size: 1rem;
    color: #000000;
    padding: 0 10px 0 25px;
    text-shadow: none;
}

.topBarlinks .langTopBar {
    float: left;
    font-size: 1.3rem;
    margin: auto 5px;
    font-weight: bold;
    display: flex;
    color: #0773b9;
}

.topBarlinks .langTopBar:hover {
    opacity: 0.7;
}

.topBarlinks svg {
    margin: auto 0;
}

.topBarlinks {
    padding: 0 8%;
}

.inputSec {
    position: relative;
    width: 400px !important;
    margin: 5px auto 10px !important;
}

.inputSec input::placeholder {
    color: #6AABD5;
}

/*.inputSec img {*/
/*    position: absolute;*/
/*    left: 10px;*/
/*    top: 11px;*/
/*}*/

.loginInput {
    padding: 10px 15px !important;
    font-size: 1rem !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    border: 1px solid #0773B9 !important;
    border-right: 7px solid #0773B9 !important;
    width: -webkit-fill-available !important;
    width: -moz-available !important;
}


.login-tab {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
}

.login-tab label {
    padding: 5px 30px;
    text-align: center;
    color: #000;
    border-bottom: 2px solid #929292;
    margin: 5px;
    font-weight: bold;
}

.login-tab label:hover, .login-tab input:checked + label {
    color: #0773B9;
    cursor: pointer;
    border-bottom: 2px solid #F9AD3B;
}

.login_form {
    width: fit-content;
    /*margin: 10px auto 0;*/
    min-width: max-content;
}

.BtnLogin {
    font-size: 1rem !important;
    font-weight: bold;
    padding: 5px 8px;
    width: 382px;
    margin: 5px auto;
    background: #0773B9;
    border: none;
    border-radius: 5px;
    color: white !important;
    text-align: center;
    display: block;
}

.BtnLogin:hover {
    box-shadow: 0 0 7px #979797;
}

#forgetPassLink {
    margin: 10px 0 0 !important;
    padding: 0;
    color: #0084bd !important;
    font-weight: bold;
    font-size: 1rem;
}

#forgetPassLink:hover {
    opacity: 0.7;
}

.headerResLogin {
    font-size: 1.33rem;
    font-weight: bold;
    color: #0773b9;
    border-bottom: 3px solid #f9ad3b;
    padding: 10px 0 5px;
}


.footer {
    color: #1673b9;
}

#footer {
    border: none !important;
}