.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: 5% !important; padding-right: 0px !important; } .qr-style{ left: 260% !important; } .name-ar-style{ left: 175% !important; padding: 0%; } // 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: 6% !important; padding-right: 2% !important; } .qr-style{ width: 80%; left: 220% !important; } .name-ar-style{ left: 140% !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: 6% !important; padding-right: 0px !important; } .qr-style{ left: 280% !important; } .name-ar-style{ left: 205%!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: 6% !important; padding-right: 0% !important; } .qr-style{ left: 200% !important; } .name-ar-style{ left: 116% !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: 3%; left: 8%; } .qr-style{ width: 70% !important; margin-top: 30% !important; position: relative !important; left: 200% !important; } .name-ar-style{ font-size: 15px !important; position: relative !important; left: 115% !important; text-align: end !important; padding: 1% !important; width: 170% !important; } .logo-img-style{ width: 60% !important; margin-top: 35% !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); padding: 6%; } .qr-style{ width: 70%; margin-top: 0px; position: relative; left: 200%; } .name-ar-style{ font-size: 20px; position: relative; left: 120%; text-align: end; padding: 1%; width: 145%; } .logo-img-style{ width: 70%; } .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; }