.button-login{
    --background: #c1272d !important;
    background: #c1272d !important;
    white-space: normal;
    color: var(--light);
    text-transform: capitalize;
    min-height: 1.0cm;
    --border-radius: 33px !important;
    border-radius: 33px !important;
    --min-height: 1.6cm !important;
    width: 315px;
}


@media only screen and (max-device-height: 640px) {
    .digital-id-image-size{
        width: 70% !important;
        height: 160% !important;
        bottom: 0% !important; 
        position: absolute !important; 
        border: 1px solid #e6e6e6 !important; 
        border-radius: 20px !important;
    }
}

.digital-id-image-size{
    width: 70%;height: 180%; ; bottom: 0%; position: absolute; border: 1px solid #e6e6e6; border-radius: 20px;
}

.font-text-style{
    font-family: 'WorkSans-Bold';
    color: black;
    font-size: 15px;
    font-weight: bold;
}

@media screen and (min-width: 400px)and (min-height:800px) and (max-height: 900px) {
    // CS
    .card-size{
        transform: rotate(90deg) !important;
        padding: 10px !important;
        padding-right: 0px !important;
    }
    .qr-style{
        left: 410px !important;
    }
    .name-ar-style{
        left: 320px !important;
    }
     // HMG
     .logo-img-hmg-style{
        left: 360px !important;
    }
    .qr-img-hmg-style{
        left: 580px !important;
    }
}

@media screen and (min-width: 400px) and (min-height:700px) and (max-height: 799px){
    // CS
    .card-size{
        transform: rotate(90deg) !important;
        padding: 10px !important;
        padding-right: 0px !important;
    }
    .qr-style{
        left: 324px !important;
    }
    .name-ar-style{
        left: 230px !important;
    }

    // HMG
    .logo-img-hmg-style{
        left: 275px !important;
    }
    .qr-img-hmg-style{
        left: 495px !important;
    }
}

@media screen and (min-width: 325px) and (max-width:399px) and (max-height: 812px){
    // CS
    .card-size{
        transform: rotate(90deg) !important;
        padding: 5px !important;
        padding-right: 0px !important;
    }
    .qr-style{
        left: 400px !important;
    }
    .name-ar-style{
        left: 310px !important;
    }
        // HMG
        .logo-img-hmg-style{
            left: 360px !important;
        }
        .qr-img-hmg-style{
            left: 550px !important;
        }
}

@media screen and (min-width: 325px) and (max-width:399px) and (max-height: 700px){
    .card-size{
        transform: rotate(90deg) !important;
        padding: 5px !important;
        padding-right: 0px !important;
    }
    .qr-style{
        left: 280px !important;
    }
    .name-ar-style{
        left: 190px !important;
    }
      // HMG
      .logo-img-hmg-style{
        left: 360px !important;
    }
    .qr-img-hmg-style{
        left: 550px !important;
    }
}

@media screen and (min-width: 325px) and (max-width:399px) and (max-height: 699px){
    .card-size{
        transform: rotate(90deg) !important;
        padding: 5px !important;
        padding-right: 0px !important;
    }
    .qr-style{
        left: 280px !important;
    }
    .name-ar-style{
        left: 190px !important;
    }
      // HMG
      .logo-img-hmg-style{
        left: 245px !important;
    }
    .qr-img-hmg-style{
        left: 430px !important;
    }
}
@media screen and (min-width: 1px) and (max-width:320px) {
    .card-size{
        transform: rotate(90deg) !important;
        position: relative;
        bottom: 30px;
        left: 26px;
    }
    .qr-style{
        width: 80px !important;
        margin-top: 50px !important;
        position: relative !important;
        left: 265px !important;
    }
    .name-ar-style{
        font-size: 15px !important;
        position: relative !important;
        left: 130px !important;
        text-align: end !important;
        padding: 10px !important;
        width: 225px !important;
    }
    .logo-img-style{
        width: 80px !important;
        margin-top: 50px !important;
    }

    // HMG
    .logo-img-hmg-style{
        width: 380px !important;
        position: fixed !important;
        left: 200px !important;
        height: 81px !important;
        bottom: 205px !important;
    }
    .qr-img-hmg-style{
        width: 105px !important;
        margin-top: 0px !important;
        position: relative !important;
        left: 390px !important;
        top: 160px !important;
    }
    .cs-card-size{
        padding: 15px !important;
        padding-top: 0px !important;
        padding-left: 1px !important;
    }
}


.card-size{
    transform: rotate(90deg);
}
.qr-style{
    width: 130px;
    margin-top: 0px;
    position: relative;
    left: 410px;
}
.name-ar-style{
    font-size: 25px; 
    position: relative; 
    left: 314px; 
    text-align: end; 
    padding: 10px; 
    width: 225px;
}
.logo-img-style{
    width: 120px;
}

.logo-img-hmg-style{
    width: 380px; 
    position: fixed; 
    left: 340; 
    height: 81px;
}

.qr-img-hmg-style{
    width: 130px;
    margin-top: 0px;
    position: relative;
    left: 560px; 
    top: 160px;
}

.cs-card-size{
    transform: rotate(90deg); 
    padding: 25px;
}