.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-right: 0px !important; padding-left: 15% !important; padding: 8% !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; } .cs-card-size{ padding: 15px !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; } .cs-card-size{ padding: 20px !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; } .cs-card-size{ padding: 10px !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: 225px !important; } .qr-img-hmg-style{ left: 430px !important; } .cs-card-size{ padding:5px !important; } .name-div{ padding: 3px !important; } } @media screen and (min-width: 1px) and (max-width:320px) { .card-size{ transform: rotate(90deg) !important; position: relative; bottom: 10%; left: 8%; padding: 10% !important } .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: 240px !important; height: 81px !important; bottom: 175px !important; } .qr-img-hmg-style{ width: 105px !important; margin-top: 0px !important; position: relative !important; left: 390px !important; top: 150px !important; } .cs-card-size{ padding: 0px !important; padding-top: 0px !important; padding-left: 1px !important; } } @media screen and (min-width: 200px) and (max-width: 300px) and (max-height: 700px){ .font-text-style{ font-size: 11px !important; } .card-size{ padding: 0% !important; left: 7% !important; bottom: 0% !important; position: relative; } } .card-size{ transform: rotate(90deg); padding: 18%; } .qr-style{ width: 70%; margin-top: 0px; position: relative; left: 135%; } .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: 0px; }