/***************************************************************/
/**************** PROACTECH LOGIN PAGE STYLES ******************/
/***************************************************************/


/************* WEBFONTS *************/
@import url('https://fonts.googleapis.com/css2?&family=Readex+Pro:wght@300;400;500;700&family=Lato:wght@300;400;700&display=swap');


/************* VARS *************/
* {
    --primary-color:            #93278F;
    --primary-color-light:      #DC5ED6;
    --blue-color:               #6484CB;
    --blue-color-light:         #aec4fa;
    --blue-color-dark:          #335EB5;
    --green-color:              #28CE4E;
    --yellow-color:             #F7931E;
    
    --text-color:               #29589B;
    --box-color:                #6484CB;
    --login-btn-color:          #F7931E;
    --body-bg:                  #EDF0F6;
    --shadow:                   0 7px 8px rgba(4,29,68,0.58);

    --box-width:                25rem;
    --position-left:            8rem;
    --position-top:             auto;
    --spacing:                  2rem;
}


/************* GLOBAL *************/

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Readex Pro', Lato, sans-serif;
    font-size: 100%;
    font-weight: normal;
    color: #FFF;
    background-color: var(--body-bg);
    
    /* Responsive Text Size */
    font-size: calc( 8px + 0.390625vw );
}

#demoSignup {
    visibility: hidden;
    pointer-events: none;
}

/************* MAIN SIZE & POSITION *************/

#container {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-image: url(../images/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#divHeader {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: max-content;
    pointer-events: none;
    user-select: none;
    padding: var(--spacing);
}

#divOptions {
    max-width: var(--box-width);
    margin: var(--position-top) auto auto var(--position-left);
    padding: 0;
}

#footer {
    margin: auto auto 0 auto;
    
    & * {
        color: var(--text-color) !important;
    }
}


/************* TOP *************/

#divLangs {
    font-size: 1.125em;
    text-transform: uppercase;
    pointer-events: all;
    margin-top: -1rem;
    
    & a {
        color: var(--blue-color);
        width: min-content;
        padding: 0 0.25em;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
        
        &:hover, &.current {
            color: var(--text-color);
        }
    }
}

#divLogo {
    & img {
        width: 14em;
    }
}


/************* MAIN *************/

#title {
    width: max-content;
    margin-bottom: 2em;
    
    & #divTitle1 {
        width: max-content;
        font-size : 2.25em;
        line-height: 1.25;
        letter-spacing: 11px;
        text-transform : uppercase;
        color : var(--text-color);
        text-shadow : 0px 2px 1px lightgrey;
    }
    
    & #divTitle2 {
        display: none;
    }
}



#loginForm {
    min-width: 100%;
    padding: 2.5em;
    background: var(--box-color);
    border-radius: 2rem;
/* 	outline: 1px solid #F8FBFF; */
	box-shadow: var(--shadow);
    
    & label {
        display: none;
    }
    
    & input,
    & .btn-primary {
        height: 3.25rem;
        border-radius: 50%;
    }
    
    & #loginInput,
    & #passwordInput {
        background: white;
        padding: 0 1em;
        border-radius: 2.5rem;
        outline: 1px solid var(--blue-color-dark);
        box-shadow: var(--shadow);
    }
    
    & input::placeholder,
    & span i {
        color: var(--blue-color-dark);
    }
    
    & input:focus
    {
        box-shadow: none;
    }
    
    & .btn-primary {
        font-size : 1.4em;
        font-weight: bold;
        letter-spacing : 7px;
        text-transform : uppercase;
        background: var(--login-btn-color);
        border: 1px solid var(--blue-color-dark);
        border-radius: 2.5em;
        box-shadow: var(--shadow);
        transition: all 0.3s ease-in-out;
    }
    
    & .btn-primary:hover {
        background: var(--blue-color-dark);
    }
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset !important;
}


/************* MOBILE *************/

@media
only screen
and (max-device-width: 1000px)
and (orientation: portrait)
{
    body {
        font-size: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    #container {
        background-size:  auto;
    }
    
    #divHeader {
        flex-direction: column;
        
        & #divLangs {
            font-size: 95%;
            align-self: flex-end;
            margin-bottom: 2rem;
        }
    }
    
    
    
    #divOptions {
        width: auto;
        margin: auto 1rem !important;
        
        & #title {
            display: none;
        }
        
        & #loginForm {
            padding: 1.5em;
        }
    }
    
    #footer {
        font-size: 85%;
    }
}


/************* RTL *************/

html[lang=ar] {
    
    & #container {
        background-image: url("../images/bg-rtl.png");
    }
    
    & #divOptions {
        margin: auto var(--position-left) auto auto;
        
        & #submit {
            letter-spacing: 0;
        }
        
        & .inputGroup {
            text-align: right;
        }
    }
}