/*
    2022 login page
    Author: tjackson@homeserverepairs.co.uk
*/

body {
    font-family: 'Roboto', serif;
    background-color: #0E9BD8;
    /* background-image: url("../images/login2022/bg_bottom_grad_bw.png");
    background-repeat: no-repeat;
    background-size: 100%, 100%; */
    background: linear-gradient(-217deg, rgba(58,173,223,.8), rgba(255,255,255,0) 70.71%),
        linear-gradient(127deg, rgba(255,255,255,.8), rgba(0,255,0,0) 70.71%),
        linear-gradient(336deg, rgba(193,229,243,.8), rgba(0,0,255,0) 70.71%);
}

::placeholder {
    color: #007D99;
    font-weight: bold;
    text-align:center;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.button {
    width: 100%;
    /* Need a specific value to work */
    height: 40px;
    border-radius: 10px;
    background-color: white;
    color: #007D99;
    font-weight: bold;
    border: none;
    transition: transform .2s; /* Animation */
}

.button:hover {
    width: 100%;
    /* Need a specific value to work */
    height: 40px;
    border-radius: 10px;
    background-color: #007D99;
    color:white;
    font-weight: bold;
    border: none;
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#innerLoginBoxCircleHomeserveLogo {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    margin-left: auto;
    margin-right: auto;
    width: 30vh;
    z-index: 3;
}

#preLoginLeadingText {
    position: absolute;
    top: 8vh;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 70%;

    text-align: center;
    color: white;
    font-size: 2vh;
}

#innerLoginBox {
    position: absolute;
    top: 15%;
    left: 5%;
    height: 70%;
    width: 90%;
    border-radius: 25px;
    background-color: white;
    background: linear-gradient(217deg, rgba(58,173,223,.8), rgba(255,255,255,0) 70.71%),
        linear-gradient(-127deg, rgba(255,255,255,.8), rgba(0,255,0,0) 70.71%),
        linear-gradient(-336deg, rgba(193,229,243,.8), rgba(0,0,255,0) 70.71%);
    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
}

#innerLoginBoxCircle {
    /* position: absolute; */
    height: 99%;
    width: 100%;
    background-image: url("../images/login2022/welcome_circle_w_text.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130%, 130%;
}

#innerLoginFieldset {
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    z-index:2;
}

#innerLoginFieldset input {
    width: 100%;
    height: 5vh;
    margin-bottom: 10px;
    color: #007D99;
    font-weight: bold;
    text-align:center;
    border-radius: 10px;
    background-color:white;
    border: none;
}

#footerLeft {
    font-size: 1vh;
    position: fixed;
    bottom: 0;
    left: 0;
    max-width:40%;
    color: white;
    z-index:2;
}

#footerLeft img {
    max-width:5vw;
    max-height:3vw;
}

#footerRight {
    font-size: 1vh;
    position: fixed;
    bottom: 0vh;
    right: 0vh;
    max-width:40%;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    z-index:2;
    color: white;
}

#footerRight img {
    max-width:5vw;
    max-height:3vw;
}

#vanSplashImage {
    position:absolute;
    z-index:1;
    bottom:20%;
    right:10%;
    width:35vw;
}

#csaSplashImage {
    position:absolute;
    z-index:1;
    bottom:0%;
    left:30%;
    width:35vw;
}

#customerSplashImage {
    position:absolute;
    z-index:1;
    top:50%;
    left:10%;
    width:35vw;
}

#workSmartSlpashImage {
    position:absolute;
    z-index: 2;
    right:0;
    max-height:20vh;
}


/* 
    Media Query for desktop users
    - This will adjust the page for desktop users so things fit correctly
    - Yes this means this page is built to be mobile first
    - tablet, landscape iPad, lo-res laptops ands desktops
*/
@media (min-width:801px)  { 
    #innerLoginBox {
        position: absolute;
        top: 15%;
        left: 15%;
        height: 70%;
        width: 70%;
        border-radius: 25px;
        background-color: white;
        background: linear-gradient(217deg, rgba(58,173,223,.8), rgba(255,255,255,0) 70.71%),
            linear-gradient(-127deg, rgba(255,255,255,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(-336deg, rgba(193,229,243,.8), rgba(0,0,255,0) 70.71%);
        -webkit-box-shadow: 0 0 30px grey;
        box-shadow: 0 0 30px grey;
    }

    #innerLoginBoxCircle {
        background-image: url("../images/login2022/welcome_circle_w_text.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%, 100%;
        height: 99%;
        width: 80%;
        margin-left: 10%;
    }

    #footerLeft {
        font-size: 2vh;
    }

    #footerRight {
        font-size: 2vh;
    }

    #vanSplashImage {
        width:25vw;
        right:0px;
    }
    #csaSplashImage {
        width:25vw;
        left:30%;
    }
    #customerSplashImage {
        width:25vw;
        left:2%;
    }
}