/* All small device Specially phone*/

/* not phone */
@media only screen and (min-width: 481px) {
    .cpc-card{
        /*background-color: yellow;*/
    }
    .cpc-card-with-border{
       /* background-color: red;*/
    }
}
/* all phone */
@media only screen and (min-width: 390px) and (max-width: 480px) {
    /* reset the height */
    .flex-container{
         display: block;
    }
    .flex-container-height{
        height: auto;
    }
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }

    .cpc-card-with-border{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }
    .eid-header{
        padding: 0 64px;
    }
   .form-submit{
        padding: 24px 64px 0 64px;
    }
    .eid-footer{
        padding: 24px 64px 0 64px;
    }

    .rp-logo{
        padding-bottom: 16px;
    }
    .rp-title{
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        padding-bottom: 24px;
    }
    .wl-eidme-login-rp-logo-hw{
        max-width: 100%;
        height: auto;
    }
    .wl-eidme-login-float-left-align-left{
        width: 75%;
        float: left;
    }
    .wl-eidme-login-right-align{
        float: right;
        width: 25%;
    }

    .fake-link{
        font-size: 16px;
        line-height: 24px;
        font-weight: 300;
    }
    a, a:visited, a:active {
        text-decoration:none;
    }

    /* App page */
    .app-cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
    }
    .app-title-column, .wl-eidme-app-already-eid {
        padding: 24px 64px 0 64px;
    }
    .qrcode-row{
        display: flex;
        flex-direction: row;
        padding: 24px 99px 24px 100px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 389px) {
    .flex-container{
        display: block;
    }
    /* reset the height */
    .flex-container-height{
        height: auto;
    }
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }

    .cpc-card-with-border{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }
    .eid-header, .form-submit, .eid-footer{
        padding: 12px 32px;
    }

    .rp-logo{
        padding-bottom: 16px;
    }
    .wl-eidme-login-rp-logo-hw{
        max-width: 100%;
        height: auto;
    }
    .wl-eidme-login-float-left-align-left{
        width: 75%;
        float: left;
    }
    .wl-eidme-login-right-align{
        float: right;
        width: 25%;
    }
    .rp-title{
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        padding-bottom: 24px;
    }
    .fake-link{
        font-size: 16px;
        line-height: 24px;
        font-weight: 300;
    }
    a, a:visited, a:active {
        text-decoration:none;
    }

    /* App page */
    .app-cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
    }
    .app-title-column, .wl-eidme-app-already-eid {
        padding: 12px 32px;
    }
    .qrcode-row{
        display: flex;
        flex-direction: row;
        padding: 24px 99px 24px 100px;
    }
}

/* all the small device */
@media only screen and (max-width: 319px) {
    .flex-container{
        display: block;
    }
    /* reset the height */
    .flex-container-height{
        height: auto;
    }
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }
    .cpc-card-with-border{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 0;
    }

    .eid-header, .form-submit, .eid-footer{
        padding: 12px 16px;
    }
    .rp-logo{
        padding-bottom: 16px;
    }
    .wl-eidme-login-rp-logo-hw{
        max-width: 100%;
        height: auto;
    }
    .form-submit{
        padding: 12px 0;
    }
    #eid-submit{
        padding: 0 16px;
    }
    .wl-eidme-login-float-left-align-left{
        width: 75%;
        float: left;
    }
    .wl-eidme-login-right-align{
        width: 25%;
        float: right;
    }
    .rp-title {
        font-size: 18px;
        text-align: center;
        line-height: 24px;
    }
    .fake-link{
        font-size: 16px;
        line-height: 20px;
    }
    a, a:visited, a:active {
        text-decoration:none;
    }
    .flex-container-height{
        margin-top: 40px;
    }
    /* App page */
    .app-cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
    }
    .app-title-column, .wl-eidme-app-already-eid {
        padding: 12px 16px;
    }
    .qrcode-row{
        display: flex;
        flex-direction: row;
        padding: 12px 32px;
    }



}

/* All small device  */
/*@media only screen and (min-width: 320px) and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 3) {
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }
}*/

/** Iphone Case **/
/* Iphone 15 and pro 1179×2556 pixels at 460ppi */
/*
@media only screen and (width: 393px) and (height: 852px) and (-webkit-min-device-pixel-ratio: 3) {
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
    }
}
*/

/* Iphone 15 plus and pro max 1284×2778 pixels at 460ppi */
/*@media only screen and (width: 430px) and (height: 932px) and (-webkit-device-pixel-ratio: 3) {

}*/

/* For iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14: 1170×2532 pixels at 460ppi */
/*@media only screen and (width: 390px) and (height: 844px) and (-webkit-device-pixel-ratio: 3) {

}*/

/* For iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus: 1284×2778 pixels at 458ppi */
/*@media only screen and (width: 428px) and (height: 926px) and (-webkit-device-pixel-ratio: 3) {

}*/

/* For iPhone X, iPhone Xs, iPhone 11 Pro, iPhone 12 Mini, and iPhone 13 Mini: 1080×2340 pixels at 476ppi */
/*
@media only screen and (width: 375px) and (-webkit-device-pixel-ratio: 3) {
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
        background-color: green;
    }
}
*/


/* Iphone Xr and 11 828×1792 pixels at 326ppi */
/*@media only screen and (width: 414px)  and (-webkit-device-pixel-ratio: 2) {
    .cpc-card{
        width: 100%;
        border: none;
        border-radius: 0;
        padding: 64px 0;
        background-color: yellow;
    }
}*/

/* For iPhone Xs Max, and iPhone 11 Pro Max: 1242×2688 pixels at 458ppi */
/*@media only screen
and (width: 414px)
and (height: 896px)
and (-webkit-device-pixel-ratio: 3) { }*/

/* For iPhone 7 (2016), iPhone 8 (2017), and iPhone SE (1st to 3rd gen): 750×1334 pixels at 326ppi */
/*
@media only screen
and (width: 375px)
and (height: 667px)
and (-webkit-device-pixel-ratio: 2) { }*/