@media only screen and (max-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }



    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }
}

html {
}

.sidebar a {
    background-color: #851111 !important;
    color: white !important;
}

.form-control {
    color: #666 !important;
}

.sidebar .nav > li > a.active {
    background-color: white !important;
    color: #851111 !important;
    border-color: black !important;
}

    .sidebar .nav > li > a.active .lnr {
        color: #851111 !important;
    }

#sidebar-nav {
    background-color: #851111 !important;
    color: white !important;
}

.sidebar a :focus {
    background-color: white !important;
    color: #851111 !important;
}

.navbar-right a {
    color: #851111 !important;
    /*text-decoration:solid;*/
}

.sidebar .lnr {
    color: white !important;
}

.lnr .lnr-arrow-left-circle {
    color: #851111 !important;
}

.btn .button, .html input[type=button], .input[type=reset], .input[type=submit] {
    padding: 6px 22px;
    border-radius: 9px !important;
}

.breadcrumb {
    /*padding:0px 0px !important;*/
    /*background-color: aliceblue !important;*/
    /*background-color: #cb9898 !important;*/
    background-color: #FFFFFF !important;
    font-size: medium !important;
    /*border-bottom: #851111 thin solid;*/
}

.panel-heading {
    background-color: #f5b12b !important;
}

.panel .panel-heading {
    padding-top: 2px !important;
    padding-bottom: 0px !important;
}

.main-content {
    padding: 0px 0px !important;
}

footer {
    /*background-color: #FFFFFF !important;*/
    align-items: center;
    text-align: right;
    /*border-top: #851111 thin solid;*/
}

body {
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;*/
    font-size: 14px !important;
    line-height: 1.42857143 !important;
    /*color: #333;
            background-color: #fff;*/
}

.brand {
    background-color: #851111 !important;
}

.navbar-btn .brand {
    padding: 30px 67px !important;
    background-color: #851111 !important;
}

.navbar-default .brand {
    padding: 30px 67px !important;
    background-color: #851111 !important;
}

.navbar-right {
    font-size: medium !important;
    font-weight: bold !important;
}

.navbar-nav > li > a {
    padding: 30px 2px !important;
    font-weight: bold !important;
}

.sidebar .nav .nav > li > a {
    background-color: #ffffff !important;
    color: #851111 !important;
}

body {
    /*color: #851111 !important;*/
}

.btn-primary {
    background-color: #003087 !important;
    /*border-color : #727272 !important;*/
    border-color: #003087 !important;
}

.btn-Cancel {
    background-color: #a7a7a7 !important;
}

.btn-default {
    color: #851111 !important;
}

.table {
    border-radius: 0.25rem !important;
}

thead {
    /*background-color: #ffdc97 !important;
    color: #851111 !important;*/
    background-color: #851111 !important;
    color: white !important;
}

.btn-warning {
    background-color: #f5b12b !important;
}

h4 {
    color: #851111 !important;
}

#myFooter {
    position: fixed;
    bottom: 0;
    margin: 0;
    padding: 0;
    left: 0;
    width: 100%;
    /*background-color: #C54031;*/
    background-color: #C53F30;
    text-align: center;
    /*font-family:'Dosis', sans-serif;*/
    font-size: 16px;
    font-weight: normal;
}

#myFooterText {
    color: white !important;
}

.brand {
    border-bottom: 1px solid white !important;
}

.sidebar .nav {
    padding: 0px 1px !important;
}



.nav > li > a:hover i {
    color: #f5b12b !important;
}

.nav > li > a:focus i {
    color: #f5b12b !important;
}

.btn-info {
    background-color: darkcyan !important;
}

/*table Decoration*/
.mGrid {
    margin: 5px 0px 5px 5px;
    padding: 10px 0px 10px 15px;
    background-color: #fff;
    margin: 5px 0 10px 0;
    border: solid 1px #525252;
    border-collapse: collapse;
    text-align: left;
    border-radius: 5px;
    /*top: expression(Sys.UI.DomElement.getBounds(document.getElementById("panelContainer")).y-25);*/
    font-family: Calibri;
    font-size: 18px !important;
    /*font-size:large;*/
}

    .mGrid td {
        padding: 2px;
        border: solid 1px #c1c1c1;
        color: #717171;
    }

    .mGrid th {
        padding: 4px 2px;
        color: #fff;
        background: #424242 url(grd_head.png) repeat-x top;
        border-left: solid 1px #525252;
        font-size: 0.9em;
    }

    .mGrid .alt {
        background: #fcfcfc url(grd_alt.png) repeat-x top;
    }

    .mGrid .pgr {
        background: #424242 url(grd_pgr.png) repeat-x top;
    }

        .mGrid .pgr table {
            margin: 5px 0;
        }

        .mGrid .pgr td {
            border-width: 0;
            padding: 0 0px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .mGrid .pgr a {
            color: #666;
            text-decoration: none;
        }

            .mGrid .pgr a:hover {
                color: #000;
                text-decoration: none;
            }
/*table Decoration*/


.btn-group-sm > .btn, .btn-sm {
    padding: 5px 4px !important;
}


.drpfontColor {
    color: #851111 !important;
}

.btn {
    -webkit-border-radius: 2px !important;
}

.datepicker::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #851111 !important;
}

.datepicker:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #851111 !important;
    opacity: 1;
}

.datepicker::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #851111 !important;
    opacity: 1;
}

.datepicker:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #851111 !important;
}

::placeholder {
    color: #666 !important;
}

::-webkit-input-placeholder { /* Edge */
    color: #666; /*red;*/
}



:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #666; /*red;*/
}

.div_logo_setup {
    width: 260px !important;
    background: #851111;
    height: 70px;
}

    .div_logo_setup img {
        width: 100%;
        padding: 10px 10px 0 10px;
    }

.div_otherthanLogo_setup {
    width: calc(100% - 260px);
}


.buttons-excel {
    color: green !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.buttons-pdf {
    color: red !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.welcome {
    font-size: 14px;
    line-height: 22px;
}

.panel {
    border-style: solid;
    border-width: 2px;
    border-color: #fbd5d5;
    box-shadow: 0 0px 4px #fbd5d5;
}

.card {
    border-style: solid;
    border-width: 2px;
    border-color: #f7f0f0;
    box-shadow: 0 0px 15px #bdbdbd;
}

#MainBodyDiv .card-header {
    background-color: #ffdc97 !important;
    color: #851111;
}
/*#MainBodyDiv .form-control:focus {
    border-color: #e9ecef;
    border: 2px solid #e9ecef !important;
    box-shadow: 2px 2px 2px 0 rgba(233, 236, 239, 5);
    transition : none !important;
}

#MainBodyDiv .form-control-sm:focus {
    border-color: #e9ecef;
    border: 2px solid #e9ecef !important;
    box-shadow: 2px 2px 2px 0 rgba(233, 236, 239, 5);
    transition: none !important;
}*/
/*#MainBodyDiv .form-control:focus {
    border-color: #e9ecef;
    box-shadow: 3px 3px 5px 1px #D3D3D3;
}*/
.form-control:focus {
    border-color: #e9ecef;
    box-shadow: 3px 3px 5px 1px #D3D3D3;
}

.btn-primary:focus {
    border-color: #e9ecef;
    box-shadow: 5px 5px 7px 2px #D3D3D3;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/*.flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }*/

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #060d24;
    color: black;
    box-shadow: 10px 22px 25px #808080;
}

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
    box-shadow: 10px 22px 25px #808080;
}

#imagecontainer {
    /*background: url("../Images/sbmcard1.png") no-repeat;*/
    background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
    background-size: contain !important;
    /*background-color: #ffffff;*/
    /*border-radius: 25px;*/
    /*box-shadow: 10px 22px 25px #808080;*/
    height: 100%;
    padding: 10px;
}

.TextLabel {
    /*font-weight: 500 !important;*/
    padding-top: 5px !important;
    padding-bottom: 5% !important;
    font-size: 155%;
    /*color: #060d24;*/
    color: white;
    font-family: cursive;
    margin-left: 5%;
}

.TextLabel1 {
    /*font-weight: 400 !important;*/
    padding: 48px 0 0 19px !important;
    font-size: 2em;
    /*color: #060d24;*/
    color: white;
    font-family: cursive;
}

.TextLabel2 {
    /*font-weight: 500 !important;*/
    padding-top: 5px !important;
    padding-bottom: 5% !important;
    font-size: 102%;
    /*color: #060d24;*/
    color: white;
    font-family: cursive;
}

.TextLabel3 {
    padding-bottom: 5% !important;
    font-size: 104%;
    /*color: #060d24;*/
    color: white;
}

.TextLabelCvv {
    padding-bottom: 5% !important;
    font-size: 110%;
    /*color: #060d24;*/
    color: white;
    font-style: italic;
    font-weight: 600 !important;
}

.TextLableinputs {
    padding-top: 5px !important;
    padding-bottom: 2% !important;
    font-size: 115%;
    color: #4a4949;
}

@media screen and (max-width: 1093px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }


    .TextLabel {
        padding-top: 25px !important;
        padding-bottom: 5% !important;
        font-size: 1.3em;
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 20px 0 0 17px !important;
        font-size: 1.8em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: 102%;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: 110%;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: 115%;
        color: #4a4949;
    }

    .test {
        margin-top: -6%;
    }

    .test1 {
        margin-top: 0%;
        margin-left: 5%;
    }

    .test3 {
        margin-top: -2%;
    }
}

@media screen and (max-width: 1024px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .8em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 22px 0 0 14px !important;
        font-size: .9em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .7em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -1%;
    }

    .test1 {
        margin-top: -1.8em;
        margin-left: 32%;
    }

    .test3 {
        margin-top: -7% !important;
    }
}

@media screen and (max-width: 1000px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .8em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 1px 0 0 14px !important;
        font-size: .9em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .7em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -1%;
    }

    .test1 {
        margin-top: -2.2em;
        margin-left: 39%;
    }

    .test3 {
        margin-top: -7% !important;
    }
}

@media screen and (max-width: 683px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.6em;
        color: white;
        font-family: cursive;
        margin-left: 1%;
    }

    .TextLabel1 {
        padding: 0px 0 0 1px !important;
        font-size: .7em;
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
        margin-left: -5%;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
        margin-left: -3%;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -3%;
    }

    .test1 {
        margin-top: -26px;
        margin-left: 47%;
    }

    .test3 {
        margin-top: -25% !important;
    }
}

@media screen and (max-width: 600px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .9em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 48px 0 0 14px !important;
        font-size: 1em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .7em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -1%;
    }

    .test1 {
        margin-top: -2.5em;
        margin-left: 37%;
    }

    .test3 {
        margin-top: -7% !important;
    }
}

@media screen and (max-width: 547px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.9em;
        color: white;
        font-family: cursive;
        margin-left: 3%;
    }

    .TextLabel1 {
        padding: 95px 0 0 15px !important;
        font-size: 1.2em;
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
        margin-left: -2% !important;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
        margin-left: 0%;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -3%;
    }

    .test1 {
        margin-top: -2.9em;
        margin-left: 30%;
    }

    .test3 {
        margin-top: -17% !important;
    }
}

@media screen and (max-width: 456px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.8em;
        color: white;
        font-family: cursive;
        margin-left: 3%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 62px 0 0 12px !important;
        font-size: .9em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -1%;
    }

    .test1 {
        margin-top: -35.5px;
        margin-left: 33%;
    }

    .test3 {
        margin-top: -17% !important;
    }
}

@media screen and (max-width: 400px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.8em;
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        /*font-weight: 400 !important;*/
        padding: 62px 0 0 14px !important;
        font-size: .9em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -1%;
    }

    .test1 {
        margin-top: -11%;
        margin-left: 37%;
    }

    .test3 {
        margin-top: -17% !important;
    }
}

@media screen and (max-width: 342px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.7em;
        color: white;
        font-family: cursive;
        margin-left: 3%;
    }

    .TextLabel1 {
        padding: 33px 0 0 1px !important;
        font-size: .7em;
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -3%;
    }

    .test1 {
        margin-top: -30px;
        margin-left: 37%;
    }

    .test3 {
        margin-top: -17% !important;
        margin-left: 3% !important;
    }
}

@media screen and (max-width: 320px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.7em;
        color: white;
        font-family: cursive;
        margin-left: 5%;
    }

    .TextLabel1 {
        padding: 30px 0 0 9px !important;
        font-size: .7em;
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -3%;
    }

    .test1 {
        margin-top: -1.9em;
        margin-left: 43%;
    }

    .test3 {
        margin-top: -17% !important;
    }
}

@media screen and (max-width: 300px) {
    #imagecontainer {
        /*background: url("../Images/sbmcard1.png") no-repeat;*/
        background: url("../Images/Demo ATM Card-weithout-rupaypng.png") no-repeat;
        background-size: contain !important;
        /*background-color: #ffffff;*/
        /*border-radius: 25px;*/
        /*box-shadow: 10px 22px 25px #808080;*/
        height: 100%;
    }

    .TextLabel {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        font-size: 0.7em;
        color: white;
        font-family: cursive;
        margin-left: 1%;
    }

    .TextLabel1 {
        padding: 4px 0 0 1px !important;
        font-size: .7em;
        color: white;
        font-family: cursive;
    }

    .TextLabel2 {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 5% !important;
        font-size: .5em;
        /*color: #060d24;*/
        color: white;
        font-family: cursive;
    }


    .TextLabel3 {
        padding-bottom: 5% !important;
        font-size: 104%;
        /*color: #060d24;*/
        color: white;
    }

    .TextLabelCvv {
        padding-bottom: 5% !important;
        font-size: .6em;
        /*color: #060d24;*/
        color: white;
        font-style: italic;
        font-weight: 600 !important;
    }

    .TextLableinputs {
        /*font-weight: 500 !important;*/
        padding-top: 5px !important;
        padding-bottom: 2% !important;
        font-size: .7em;
        color: #4a4949;
    }

    .test {
        margin-top: -3%;
    }

    .test1 {
        margin-top: -1.9em;
        margin-left: 43%;
    }

    .test3 {
        margin-top: -17% !important;
    }
}