:root{
    --orange : #FFAA23;
    --red : #FE6150;
    --blue : #124E70;
    --light-blue : #1BC0C6;
    --gray : #DFE0E5;
    --skyblue : #5DBEC5;
    --white : #fff;
    --main-font: 'El Messiri', sans-serif;
    --main-font2: 'Tajawal', sans-serif;
}
@font-face {
  font-family: testfont;
  src: url(../fonts/ArbFONTS-Montserrat-Arabic-Regular.ttf);
}
@font-face {
  font-family: testfont2;
  src: url(../fonts/ArbFONTS-Montserrat-Arabic-ExtraLight.ttf);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: transparent;
    overflow-x: hidden;
}
.register{
    direction: rtl;
    text-align: right;
    font-family: testfont;
    margin: 10vh auto 0 ;
}
.register-row{
    display: flex;
    flex-direction: row-reverse;
    height: 90vh;
}
.login-col{
    font-family: testfont;    
    position: relative;
    background-color: #5CBEC5;
    padding-bottom: 5vh;
}
.register-col{
    background-color: #254E6D;
}
.login-title{
    position: absolute;
    bottom: 10vh;
    right: 10vh;
    padding-bottom: 15px;
    font-size: 8.5vh;
    width: 55%;
    text-align: right;
    direction: rtl;
    border-bottom: 3px solid var(--white);
    color: var(--white);
}
.register-title{
    right : unset;
    bottom: 20vh;
    left : 2vh;
}

.form-parent-col{
    text-align: center;
    margin:  0 auto;
    background-color: #f6f6f6;
    padding-top: 3vh;
}
.login-logo{
    width: 70px;
    height: auto;
}
.register-form{
    margin: 0 auto;
    padding: 0;
}
.title{
    margin: 2vh auto ;
    font-size: 26px;
}
.login-header-title{
    color : var(--blue);
}
.subtitle{
    margin: 3vh auto 0;
    width: 45%;
    padding: 0;
    font-size: 18px;
    color: #A6A6A6;
    font-family : testfont2;
}
.register-subtitle{
    width: 80%;
}
.form-col{
    margin: 1vh auto;
}
.login-label{
    display: block;
    text-align: right;
    width: 45%;
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
}
.log-only-label{
    color : var(--blue);
    font-family : testfont2;
}
.register-label{
    width: 52.5%;
}
.input-form{
    margin: 1vh auto 0;
    height: 36px;
    width: 45%;
    padding: 0;
    padding-right: 10px;
    border: 1px solid #D9D9D9;
}
.register-input{
    width: 52.5%;
}
.input-4{
    width : 100% ;
}
textarea{
    margin: 1vh auto 0;
    width: 45%;
    padding: 0;
    padding-right: 10px;
    border: 1px solid #D9D9D9;    
}
.submit-form{
    background-color: #5CBEC5;
    color: var(--white);
    margin: auto;
    font-weight: bold;
}
.register-submit{
    width: 52.5%;
}
::-webkit-input-placeholder {
    font-family : testfont2;
    padding: 0;
    color: #bbb;
    }
:-ms-input-placeholder { 
    font-family : testfont2;
    padding: 0;
    color: #bbb;
    }
::placeholder {
    font-family : testfont2;
    padding: 0;
    color: #bbb;
    }

    .register-note-row{
        width: 45%;
        margin: auto;
        padding: 0;
        text-align: right;
    }
    .register-note-row-register{
        width: 52.5%;
    }
    .register-note-row .col-12{
        padding: 0;
    }
    .register-note{
        margin: 2vh auto 0;
        font-family : testfont2;
    }
    .register-note-btn{
        color: #A6A6A6;
    }
    .register-note a{
        color: #A6A6A6;
        padding: 0;
        margin: 0;
    }
    .register-note .register-btn{
        color: #000;
    }
    
    input[type="file"] {
        display: none;
    }   
    .upload-row{
      text-align: right;
    }
    .custom-file-hr {
        display: inline-block;
        color: var(--blue);
        margin: 15px 0 25px 0;
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid #D9D9D9;
    }
    #tax-chosen,
    #id-chosen{
        margin-left: 0.3rem;
        font-size: 12px;
        color: #D9D9D9;
        }    
      
@media only screen and (min-width : 1400px){
    .form-parent-col{
        padding-top: 10vh;
    }
    .login-title{
        font-size: 8.5vh;
        width: 65%;
    }    
    .register-title{
        bottom: 15vh;
    }
    .log-only-label{
        font-family : testfont;
    }
}    
@media only screen and (max-width : 850px){
    .login-logo{
       display : none;
    }  
    .register{
        margin: 7.5vh auto 0 ;
    }
    .login-col{
        display: none;
    }
    .register-col{
        display: none;
    }
    .subtitle{
        width: 80%;
    }
    .register-subtitle{
        width: 100%;
    }
    .login-label{
        width: 75%;
    }
    .register-label{
        width: 75%;
    }
    .input-form{
        width: 75%;
    }
    .register-input{
        width: 75%;
    }
    .register-submit{
        width: 75%;
    }    
        .register-note-row{
            width: 60%;
            margin: auto;
            padding: 0;
            text-align: right;
        }
        .register-note-row-register{
            width: 75%;
        }
        .register-note-row .col-12{
            padding: 0;
        }
        .register-note{
            margin: 2vh auto 0;
        }
        .register-note-btn{
            color: #bbb;
        }
        .register-note a{
            color: #bbb;
            padding: 0;
            margin: 0;
        }
        .register-note .register-btn{
            color: #000;
            font-weight: bold;
        }
}

.load{
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 50;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  text-align: center;
}
.load .spinner{
  width: 10%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.load{
    display : none;
}