@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700&display=swap');

.page-special-auth{
    background-color: #194356;
    font-family: 'Montserrat', sans-serif;
}

.page-special-auth .iframe{
    background-color: #ffffff;
    position: absolute;
    top: 15vh;
    left: 15vw;
    min-width: 70vw;
    min-height: 50vh;
    border: 0;
    border-radius: 20px;
    vertical-align: middle;
}

.page-special-auth .image-box{
    min-width: 8vw;
    margin: 3rem 3rem;
    float: left;
}

.page-special-auth .image-box > img {
    width: 35vw;
}

.page-special-auth .boxGCPwCh{
    border: 1px solid rgba(218, 223, 225, 1);
    border-radius: 1rem;
    margin: 10rem 10rem 0 0;
    min-width: 10rem;
    padding: 0 2em 2rem 2rem;
    float: right;
}

.page-special-auth .title{
    color: #194356;
    margin: 3rem 0 3rem;
    text-align: center;
}

.page-special-auth input[type="text"]:focus,
.page-special-auth input[type="password"]:focus{
    border-color: rgb(16, 52, 68);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgb(16, 52, 68);
    outline: 0 none;
}

.page-special-auth input[type="text"],
.page-special-auth input[type="password"]{
    border-color: rgba(187, 206, 80, 1);
}

.page-special-auth .list-group{
    z-index:10;
    display:none;
	position:absolute;
    color:red;
    overflow: hidden;
}

.page-special-auth .msg{
	position:absolute;
    color:red;
}

.page-special-auth .recovery-link{
    color: rgb(16, 52, 68);
    text-decoration: underline;
}

/* Ipad 3, 4, Pro 9.7 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .page-special-auth .iframe{
        top: 6vh;
        left: 16vw;
        max-width: 80vw;
        min-height: 70vh;
    }

    .page-special-auth .image-box{
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin-left: 3rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth .image-box > img{
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1.5rem;
    }

    .page-special-auth .title{
        font-size: 2rem;
    }
}

/* ------------ IPHONE X --------------- */

/* VERTICAL */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait)
{
    .page-special-auth .iframe{
        top: 10%;
        left: 10%;
        max-width: 80vw;
        min-height: 70vh;
    }

    .page-special-auth .image-box{
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin: 0 0.5rem 2rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth .image-box > img{
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1rem;
    }

    .page-special-auth .title{
        font-size: 2rem;
    }
}

/* HORIZONTAL */
@media only screen 
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

    .page-special-auth .iframe{
        top: 5vh;
        left: 10%;
        width: 100vw;
    }

    .page-special-auth .image-box{
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin: 0 3rem 2rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth .image-box > img {
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1rem;
    }

    .page-special-auth .title{
        font-size: 2rem;
    }
}

/* ------------ Fin IPHONE X --------------- */


/* ----------- IPHONE 6, 7, 8 ------------- */

/* HORIZONTAL PLUS */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

    .page-special-auth .iframe{
        top: 5vh;
        left: 3vw;
        width: 94vw;
    }

    .page-special-auth .image-box {
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin: 0 3rem 2rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth .image-box > img {
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1rem;
    }

    .page-special-auth .title{
        font-size: 2rem;
    }
}

/* Vertical Normal */
@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .page-special-auth .iframe{
        top: 1vh;
        left: 10vw;
        max-width: 80vw;
        min-height: 70vh;
    }

    .page-special-auth .image-box{
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin: 0 0.5rem 1rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth  .image-box > img{
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1rem;
    }

    .page-special-auth .title{
        font-size: 1.5rem;
    }
}

/* Horizontal Normal */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

    .page-special-auth .iframe{
        top: 5vh;
        left: 3vw;
        width: 94vw;
    }

    .page-special-auth .image-box{
        text-align: center;
        margin: 1rem;
        float: none;
    }

    .page-special-auth .boxGCPwCh{
        border: 1px solid rgba(218, 223, 225, 1);
        border-radius: 1rem;
        margin: 0 3rem 2rem;
        min-width: 8rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        float: none;
    }

    .page-special-auth  .image-box > img{
        width:50%;
    }

    .page-special-auth input[type="text"],
    .page-special-auth input[type="password"],
    .page-special-auth input[type="submit"],
    .page-special-auth label{
        font-size: 1rem;
    }

    .page-special-auth .title{
        font-size: 2rem;
    }
}

/* -------- FIN IPHONE 6, 7, 8 ----------- */