/* V0.9.2 */

/***  implementation on input element ***/
.rass-container .rass-section-input label input {
    box-sizing                 : border-box;

    width                      : 100%;
    padding-right              : 14px;
    padding-left               : 14px;

    padding-top:2px;
    padding-bottom:7px;

    font-size                  : 1rem;
    text-align                 : left;
    border                     : 1px solid #AAA;
    border-top                 : none;
    border-right               : 1px solid #FFF;
    border-right               : 1px solid transparent;
    border-left                : 1px solid #FFF;
    border-left                : 1px solid transparent;
    border-top-left-radius     : 0;
    border-bottom-right-radius : 16px;
    border-bottom-left-radius  : 16px;

    -moz-box-sizing            : border-box;
    -webkit-box-sizing         : border-box;
}

/* disable focus box */
input[type="text"], input[type="password"], input[type="number"] ,input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
    color              : #009;
    outline            : none;
    outline-width      : 0;

    -webkit-appearance : none;
}

input, input:focus {
    outline                     : none !important;

    -webkit-tap-highlight-color : rgba(255, 255, 255, 0);
    -webkit-user-modify         : read-write-plaintext-only;
}

input[type="password"] {
    -webkit-text-security : disc;
    letter-spacing: 0.3em;
}

/*
.rass-section-input #rass-extend-prefix {
  border-bottom-right-radius: 0;
  border-right:none;
  background-color: transparent;
  border-bottom-left-radius: 16px;
  padding-right:0;

  width: 92px;

}

.rass-section-input #rass-data-reknr {
  border-bottom-left-radius: 0;
  border-left:none;
  border-bottom-right-radius: 16px;
  padding-left: 0;

  width: auto;
}

*/
/* rich password */
.rass-container .rass-section-input .rass-ui-richpassword input {
    display       : inline;

    height        : 1.8em;
    width         : 1.8em;
    padding       : 0;

    font          : 22px/21px "Myriad Regular", "myriad-pro", Helvetica, Helvetica Neue, Arial;
    text-align    : center;
    border        : 1px solid #CCC;
    border-radius : 0.7em;
}

/*
.rass-container .rass-section-input .rass-ui-richpassword input:focus {
  border:2px solid #009;
  border-left: 2px solid rgba(255, 255, 255, 0);
  border-right: 2px solid rgba(255, 255, 255, 0);
}
*/
.rass-container .rass-section-input .rass-ui-richpassword span {
    display : block;
}

/* states */
.rass-container .rass-section-input .rass-state-error input, .rass-container .rass-section-input .rass-state-error input:focus {
    color        : #009;
    border-color : red;
    border-width : 2px;
    border-right : 2px solid rgba(255, 255, 255, 0);
    border-left  : 2px solid rgba(255, 255, 255, 0);
}

.rass-container .rass-section-input .rass-state-error .rass-extend-prefix {
    color : #333;
}

.rass-container .rass-section-input label input:focus {
    border-color : #009;
    border-width : 2px;
    border-right : none;
    border-right : 2px solid rgba(255, 255, 255, 0);
    border-left  : none;
    border-left  : 2px solid rgba(255, 255, 255, 0);
}

.clearfix {
    display : block;
    clear   : both;

    height  : 1%;
}

.wrap {
    box-sizing                 : border-box;

    position                   :relative;
    height                     : 1%;
    width                      : 100%;
    padding-top                : 12px;
    padding-bottom             : 4px;
    padding-right              : 102px;
    padding-left               : 14px;

    border-right               : 1px solid transparent;
    border-bottom              : 1px solid #AAA;
    border-left                : 1px solid transparent;
    border-bottom-right-radius : 16px;
    border-bottom-left-radius  : 16px;

    -webkit-box-sizing         : border-box;
    -moz-box-sizing            : border-box;
}

.col-a {
    position   : relative;
    float      : left;
    box-sizing : border-box;

    height     : 1%;
    width      : 93px;
}

.col-b {
    position     : relative;
    float        : left;
    box-sizing   : border-box;

    height       : 1%;
    width        : 100%;
    margin-right : -93px;
}
.wrap .rass-focushelper {
    position: absolute;
    top:0;
    left: -1em;
    height: 100%;
    width: 100%;
    margin-left: 0;
    z-index: 9999;
}
.rass-container .rass-section-input .rass-wrapper-prefix .wrap input {
    width            : 99%;
    padding          : 0;

    background-color : transparent;
    line-height      : 120%;
    border           : none;
    border-radius    : 0;
}

.rass-container .rass-section-input .rass-wrapper-prefix .wrap .col-a input {
    text-align : right;

}

.rass-wrapper-prefix {
    padding-right : 0;
    /*
    margin-bottom: 1em;
    */
}

.rass-state-active .wrap {
    border-width        : 2px;
    border-bottom-color : #009;
}

.rass-state-error .wrap, .rass-state-error.rass-state-active .wrap {
    border-width        : 2px;
    border-bottom-color : red;
}

#rass-data-inlogcode2 {
    /*
    font-size:1.8em;
    */
    width : 100%;
    /*
    height: 1.2em;
    */
}

.rass-container .rass-section-input label > span {
    display: inline-block;
    padding-left : 16px;
}

.rass-container .rass-section-input .rass-ui-checkbox {
    box-sizing         : border-box;

    padding-left       : 1em;

    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
}

.rass-container .rass-section-input .rass-ui-error {
    /*padding-left: 16px;*/
    padding-right : 16px;
}

.rass-section-input .rass-input-metatext {
    display     : block;

    padding-top : 0.2em;

    font-size   : 0.9rem;
    color       : #999;
}

/* reader choice */
/*
.rass-section-input .ui-readerchoice-input {
  margin-top:1em;

}

.rass-section-input .ui-readerchoice-input label {

  box-sizing:border-box;
  -webkit-box-sizing:border-box;

  position: relative;
  display: inline-block;
  text-align: center;
  width: 48%;
  border:1px solid #CCC;
  border-radius:8px;

  height: 10em;
  padding:1em;
}

.rass-section-input .ui-readerchoice-input label img {
  display: inline-block;
  height: 60%;
}

.rass-section-input .ui-readerchoice-input label:first-child {
  margin-right:8px;
}


.rass-section-input .ui-readerchoice-input label span {
  display: block;
  padding-left: 0;
}

.rass-section-input .ui-readerchoice-input label input {
  display: inline-block;
  width: auto;
}

*/
.rass-section-input .ui-readerchoice-input {
    margin-top    : 1em;
    margin-bottom : 3em;
}

.rass-section-input .ui-readerchoice-input p {
    margin-bottom : 0.2em;
}

.rass-section-input .ui-readerchoice-input label {
    position           : relative;
    display            : inline-block;
    box-sizing         : border-box;

    height             : 7em;
    width              : 47.5%;
    margin-left        : 4px;
    padding            : 1em;

    text-align         : center;
    border             : 1px solid #CCC;
    border-radius      : 8px;

    -webkit-box-sizing : border-box;
}

.rass-section-input .ui-readerchoice-input label img {
    display : inline-block;
    height  : 100%;
}

.rass-section-input .ui-readerchoice-input label:first-child {
    margin-right : 8px;
}

.rass-section-input .ui-readerchoice-input label span {
    display      : inline;

    margin-left  : 0.4em;
    padding-left : 0;
}

.rass-section-input .ui-readerchoice-input label input {
    display : inline;
    width   : auto;
}

.rass-section-input .ui-readerchoice-input .rass-section-row {
    position    : absolute;
    bottom      : -2.2em;
    left        : 0;

    margin-left : 4px;
}


/******************************************************************************/
/*@ DPO Password widget *******************************************************/


.rass-container .rass-section-input .dpo-password-widget-label {
    color:#000;
    font-weight: bold;
    padding-left: 8px;
}

.dpo-widget-password.dpo-widget-container {
    padding: 1em 0;
}

.rass-layout-center .dpo-widget-password.dpo-widget-container {
    padding: 0.5em 0;
    margin-bottom: 1em;
    margin-top: 3em;
}

.dpo-widget-password-label + .dpo-widget-container {
    padding-top: 1em;
}

.dpo-widget-password .dpo-clipping-container {
    position: relative;
    height: 60px;
    margin: auto auto;
    overflow: hidden;
    white-space: nowrap;
}

#rass-toegangscode {
    color: transparent;
}

.dpo-widget-password input {
    font-size: 1px;
    text-indent: -9999px;
    color: transparent;
    border:none !important; /* this border really needs to be hidden */
    outline:none;
    width: 130%;
    height: 100%;
    padding-left: 17px;
    position: absolute;
    background:none;
    top:0;
    left:0;
    z-index:10;

    -webkit-highlight:           none;
    -webkit-touch-callout :      none;
    -webkit-user-select:         auto;


}

.dpo-widget-password .submask {
    display: inline-block;
    background: url(images/password-mask-80px.png) no-repeat;
    background-size: cover;
    height: 100%;
    width: 60px;
    margin: 0 2px 0 2px;
}

.dpo-widget-password .submask {
    background-position: 0 1%;
}

.dpo-widget-password .submask.active {
    background-position: 0 25.5%;
}

.dpo-widget-password .submask.touched {
    background-position: 0 74.3%;
}

.dpo-widget-password .disable .submask {
    background-position: 0 -80px;
}

.dpo-widget-password .disable .submask.touched {
    background-position: 0 -80px;
}

.dpo-widget-password.haserror .submask.touched {
    background-position: 0 98.3%;
}

.dpo-widget-password.haserror .submask {
    background-position: 0 98.3%;
}


.dpo-widget-password .ph-error {
    display: none;
    color: #F00;
    font-size: 0.75rem;
    padding-left: 10px;
    text-align: center;
}

.dpo-widget-password.haserror .ph-error {
    display: block;
}

.password {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;  /* i.e. Nexus5/Chrome and Kindle Fire HD 7'' */
}





/*** read only velden in section-info ***/
.rass-section-info {
    margin-bottom : 1em;
}

.rass-section-info .rass-ui-label {
    margin : 0.5em 0 0 1.1em;
    color  : #999;
    font-size: 0.9rem;
}

.rass-section-info .rass-ui-data {
    margin : 0 0 0 1em;
    color  : #009;
}

/*** responsive behavior ***/
@media (max-width: 300px) {

    .col-a {
        width: 100px;
    }
    .col-b {
        margin-right: -100px;
    }

    .rass-section-input .ui-readerchoice-input label {
        width         : 96%;
        margin-bottom : 3em;
    }
}

@media (max-width: 320px) {
    .submask:first-of-type {
        margin-left: -2px;
    }
    .col-a {
        width: 110px;
    }
    .col-b {
        margin-right: -110px;
    }
}




/*** read only readerchoice ***/

.ui-readerchoice-input.rass-state-disabled p {
    color: #D8D8D8;
}




/*** Layout center overwrite ***/

.rass-layout-center .rass-section-formgroup {
    text-align: center;
}

.rass-layout-center h1 {
    font-size: 1.8em;
    padding-top:8px;
    width: 100%;
    margin-bottom: 0;
}

.rass-layout-center .rass-page-title {
    /*
      padding-right: 70px;
      padding-left:90px;
    */

    border-bottom: none;
}

.rass-layout-center .rass-section-action * {
    width: 100%;
    text-align: center;
}




.rass-layout-center .rass-button-tertiary {
    margin-bottom: 1em;
    margin-top: 2em;
}



/*** profile selection list ***/


.rass-container .rass-section-profile ul {
    margin-left: 16px;
    padding-right: 20px;
}
.rass-container .rass-section-profile ul li {
    display: block;
    text-align: left;
    text-indent: 0;
    margin-left: 0;
    margin-bottom: 8px;
    border-top: 1px solid #CCC;
    padding-top: 8px;
    cursor:pointer;
}

.rass-container .rass-section-profile ul li:last-child {
    border-bottom: 1px solid #CCC;
}

.rass-container .rass-section-profile ul li * {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    font-size:1.2rem;
}

.rass-container .rass-section-profile ul li a {
    padding-left: 0;
}

.rass-container .rass-section-profile ul li a span{
    margin-right:0.4em;
}

.rass-container .rass-section-profile ul li label {
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    color: #009;
    cursor: pointer;
}

.rass-container .rass-section-profile ul li input {
    margin-left: -14px;
    visibility: hidden;
}

.rass-container .rass-section-profile ul li img {
    width: 50px;
    height: 50px;
    border:2px solid #AAA;
    margin-right:16px;
}

.rass-container .rass-section-profile ul li img:active {
    border:2px solid #999;
}

.rass-container .rass-section-profile ul li .rass-default-profile {
    padding:4px;
    box-sizing:border-box;
    width: 54px;
    height:54px;
}

.rass-container .rass-section-profile ul li .rass-icon-add {
    width: 50px;
    height: 50px;
    font-size: 36px;
    display: inline-block;
    line-height: 130%;
    text-align: center;
    padding: 2px;
}


/*** soft keyboard ***/


.richsoftkey #rass-section-softkey {
    display: block !important;
    text-align: center;
    background-color: #BFC3C6;
}

.richsoftkey #rass-section-softkey {
    width:100%;
    text-align: center;
    height: auto;
    overflow: hidden;

    position: absolute;
    bottom: 0;

    text-align: center;

    overflow:hidden;
    padding:0;

    /*
          -webkit-transform: translateZ(0);
          -webkit-transition: height 0.5s; /* Safari */
    /*
           transition: height 0.5s;
     */
}

.rass-new-context.richsoftkey #rass-section-softkey {
    width: 100%;
    text-align: center;
    height: auto;
    position: relative;
    bottom: 0;
    text-align: center;
    /* overflow: hidden; */
    padding: 0;
    /* transition: height 0.5s; */
    /* margin-right: 35%; */
    margin-left: 0px;

}


.rass-new-context .richsoftkey #rass-section-softkey {
    width: 100%;
    text-align: center;
    height: auto;
    position: relative;
    bottom: 0;
    text-align: center;
    overflow: none;
    padding: 0;
    /* transition: height 0.5s; */
}

#rass-ui-buttons {
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    height: auto;
    padding: 10px 0 5px;
    margin:auto;
}

.richsoftkey #rass-ui-buttons {
    width: 100%;
    max-width: 400px;

}

.richsoftkey #rass-section-softkey.show {
    height: auto;
    z-index: 9999;
}



#rass-ui-buttons button {
    height: 50px;
    width: 30%;
    box-sizing:border-box;
    font-size: 24px;
    display: inline-block;
    border: 0;
    border-bottom: 1px solid #aaa;
    border-radius:4px;
    background: #F7F7F7;
    color: #000;
    text-align: center !important;
    padding: 0;
    margin: 0 5px 5px 0;
    vertical-align: middle;

    -webkit-transform: translateZ(0);
    -webkit-transition: height 0.5s; /* Safari */
}

#rass-ui-buttons button:nth-child(3n) {
    margin-right: 0;
}


#rass-ui-buttons button:active {
    background-color: #666;
    color:#FFF;

}

#rass-section-softkey button:focus {
    outline: 0;
}

#rass-section-softkey #rsq11:after {
    content:'';
    background:url(images/icon_backspace.svg) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    margin: auto;
    margin-top: -20px;
}


#rass-section-softkey #rass-ui-buttons .alfa {

    display: block;
    font-size: 0.8rem;
    color: #AAA;
    letter-spacing: 0.05em;
}






/*** soft keyboard ***/


.richsoftkey #rass-section-softkey {
    display: block !important;
    text-align: center;
    background-color: #BFC3C6;
}

.richsoftkey #rass-section-softkey {
    width:100%;
    text-align: center;
    height: auto;
    overflow: hidden;

    position: absolute;
    bottom: 0;

    text-align: center;

    overflow:hidden;
    padding:0;

    /*
          -webkit-transform: translateZ(0);
          -webkit-transition: height 0.5s; /* Safari */
    /*
           transition: height 0.5s;
     */
}

.rass-new-context.richsoftkey #rass-section-softkey {
    width: 100%;
    text-align: center;
    height: auto;
    position: relative;
    bottom: 0;
    text-align: center;
    /* overflow: hidden; */
    padding: 0;
    /* transition: height 0.5s; */
    /* margin-right: 35%; */
    margin-left: 0px;

}


.rass-new-context .richsoftkey #rass-section-softkey {
    width: 100%;
    text-align: center;
    height: auto;
    position: relative;
    bottom: 0;
    text-align: center;
    overflow: none;
    padding: 0;
    /* transition: height 0.5s; */
}

#rass-ui-buttons {
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    height: auto;
    padding: 10px 0 5px;
    margin:auto;
}

.richsoftkey #rass-ui-buttons {
    width: 100%;
    max-width: 400px;

}

.richsoftkey #rass-section-softkey.show {
    height: auto;
    z-index: 9999;
}



#rass-ui-buttons button {
    height: 50px;
    width: 30%;
    box-sizing:border-box;
    font-size: 24px;
    display: inline-block;
    border: 0;
    border-bottom: 1px solid #aaa;
    border-radius:4px;
    background: #F7F7F7;
    color: #000;
    text-align: center !important;
    padding: 0;
    margin: 0 5px 5px 0;
    vertical-align: middle;

    -webkit-transform: translateZ(0);
    -webkit-transition: height 0.5s; /* Safari */
}

#rass-ui-buttons button:nth-child(3n) {
    margin-right: 0;
}


#rass-ui-buttons button:active {
    background-color: #666;
    color:#FFF;

}

#rass-section-softkey button:focus {
    outline: 0;
}

#rass-section-softkey #rsq11:after {
    content:'';
    background:url(images/icon_backspace.svg) no-repeat;
    display: block;
    width: 25px;
    height: 25px;
    margin: auto;
}


#rass-section-softkey #rass-ui-buttons .alfa {

    display: block;
    font-size: 0.8rem;
    color: #AAA;
    letter-spacing: 0.05em;
}

#rass-section-softkey #rass-ui-buttons button {
    margin:0;
    height: 54px;
    border-radius: 0;
    border-bottom: 1px solid #BFC3C6;
    border-left: 1px solid #BFC3C6;
}

#rass-section-softkey #rass-ui-buttons #rsq9,
#rass-section-softkey #rass-ui-buttons #rsq11 {
    background-color: #E9E9E9;
}

#rass-section-softkey #rass-ui-buttons #rsq11 {
    font-size: 1.2rem;
}



/*** Adaptive style mobile ***/

/* links on one horizontal row */

.mobiletc .rass-layout-center .rass-section-action {
    height: 1.5em;
    padding-bottom: 1em;
}

.mobiletc .rass-layout-center .rass-section-action a {
    float: left;
    display: inline-block;
    width: auto;
    padding: 0;
    margin-top: 0;
}

.mobiletc .rass-layout-center .rass-section-action input {
    float: right;
    display: inline-block;
    width: auto;
    padding: 0;
    margin-top: 0;
}

.mobiletc .rass-layout-center .rass-section-action.rass-action-onechild input {
    float: none;
    margin: auto;
    display: block;
}

/* header bar */

.mobiletc .rass-layout-center {
    height: 100%;
}

.mobiletc .rass-layout-center .rass-page-title .rass-section-profile {
    position: absolute;
    top:0;
    left:0;
}

.mobiletc .rass-layout-center .rass-page-title {
    padding-right: 70px;
    padding-left:90px;
    padding-top: 0;
}

.mobiletc .rass-layout-center .rass-page-title span {
    margin:0;
    width: auto;
    display: inline-block;
    padding-bottom: 0;
}

.mobiletc .rass-layout-center .rass-page-title p {
    text-align: left;
    font-size: 1.3rem;
}

.mobiletc .rass-page-title .rass-profile-avatar {
    height: 70px;
}

.mobiletc .rass-state-svrerror {
    text-align: center;
    padding-top: 8px;
}

/* tincode widget */
.mobiletc .rass-layout-center .dpo-widget-password.dpo-widget-container {
    margin-top: 1em;
}


/*** schrink header items on very small screen ***/
@media (max-width: 400px) {

    .mobiletc .rass-layout-center .rass-page-title {
        padding-right:58px;
        padding-left:68px;
        padding-top: 0;
    }

    .mobiletc .rass-layout-center .rass-page-title span {
        font-size:1.3rem;
        padding-top: 0.4em;
    }

    .mobiletc .rass-layout-center .rass-page-title p {
        font-size: 1rem;
        padding-top: 0;
    }

    .mobiletc .rass-page-title .rass-section-profile {
        padding-top: 0.3em;
    }

    .mobiletc .rass-page-title .rass-profile-avatar {
        height: 55px;
    }

    .mobiletc .rass-layout-center .rass-section-action a, .mobiletc .rass-layout-center .rass-section-action input {
        font-size: 1rem;
    }

    .mobiletc .rass-section-input {
        padding-top: 0.4em;
        font-size:0.8rem;
    }

    .mobiletc .rass-layout-center .dpo-widget-password.dpo-widget-container {
        margin-top: 0;
        margin-bottom: 0.5em;
    }
}


.rass-container .rass-section-input .rass-input-masked {
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    color: #999;
    background-color: transparent;
}


.rass-section-action .rass-button-tertiary:active{background-color:transparent}

.rass-section-action .rass-action-plus{background-image:url(images/icon_supercirkel_met_plusje.svg);background-size:30px;height:2rem;background-repeat:no-repeat;padding-left:2.4rem;margin-left:4px;}

.rass-section-action .rass-action-plus:active,
.rass-section-action .rass-action-plus:hover{background-image:url(images/icon_supercirkel_met_plusje_mo.svg);background-size:30px;background-repeat:no-repeat;padding-left:2.4rem}
.rass-section-input ul li{text-indent:0;}


/* flexbox vertical alignment */

.mobiletc form {
    box-sizing:border-box;
    height: 100%;
    padding-bottom: 220px;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}


.rass-new-context.mobiletc form {
    padding-bottom:0;
}



/*************************************************/
/* Responsive sign
/* wide layout
*/


.rass-page-dposign #rass-uicontrol-qrcode, #scanner-code {
    max-width: 4cm;
    max-height: 4cm;
}

.rass-page-dposign .rass-container {
    max-width: 648px;
    position: relative;
}

.rass-page-dposign .rass-row-container {
    list-style: none;
    padding:0;
    margin: 0;
}

.rass-page-dposign .rass-section-input ul li {
    text-indent: 0;

}

strong {
    color:#000;
}


@media screen and (min-width: 420px){

    .rass-page-dposign #rass-uicontrol-qrcode, .rass-page-dposign #scanner-code {
        width: 250px;
        height: 250px;
    }

    .rass-page-dposign .rass-page-title .rass-ui-logo {
        top:0;
    }

    .rass-page-dposign .rass-page-title {
        margin-bottom: 0;
        padding-top: 0.75em;
        padding-bottom: 0.5em;
    }

    .rass-page-dposign .rass-page-title + p {
        margin-top: 0.5em;
        margin-bottom: 0.3em;
    }

    .rass-page-dposign .rass-container .rass-section-action input {
        display: inline-block;
        width: 162px;
        margin-right: 1em;
    }



    .rass-page-dposign .rass-container .rass-section-input input {
        max-width: 324px;
    }

    .rass-page-dposign .rass-container .rass-section-input ul {
        box-sizing:border-box;
        width: 100%;
        padding-right: 180px;
        position: relative;
        margin-left: 0;
        padding-left: 4px;
    }

    .rass-page-dposign .rass-container .rass-section-input ul li {
        margin-left: 16px;
        word-wrap: break-word;
    }

    .rass-page-dposign .rass-uicontrol-qrcode {
        position: absolute;
        top: 0;
        right: 0;
    }

}






.mobiletc {
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Disable selection/copy in UIWebView */
}


/******** nasty stuff..... ********/
/*** <= IE8 ***/
.rass-container .rass-section-input .rass-wrapper-prefix .wrap input {
    line-height : 100%\9;
}




/*** only IE8 ***/
.rass-container .rass-section-input label input {
    border-left:none\0/;
    border-right:none\0/;
}


input[type="radio"] {

    border-radius: 100% !important;
    border: 1px solid #EEE !important;


}





/*** XS ***/
@media screen and (max-width: 543px){

    /*
        .rass-new-context h1 {
          font-size: 1.75rem;
        }

        .rass-new-context h2 {
          font-size: 1.375rem;
        }

        .rass-new-context h3 {
          font-size: 1.125rem;
        }

    */

    /* reset bg color on html due to body height bug */
    html {
        background:none;
    }

    .rass-page-title {
        font-size: 1.75rem;
    }

    .rass-page-dposign .rass-page-title {
        padding-bottom: 0.25em;
    }

    .rass-new-context.rass-page-dposign .rass-container .rass-section-input ul {
        padding-right: 0;
    }

    .rass-new-context.rass-page-dposign .rass-uicontrol-qrcode {
        position: relative;
    }

    .rass-new-context.richsoftkey #rass-section-softkey {
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .rass-new-context .rass-container {
        padding-bottom: 250px;
    }

}


/*** M ***/
@media screen and (min-width: 544px){

    /* reset bg color on html due to body height bug */
    html {
        background:none;
    }

    .rass-page-title {
        font-size: 2.5rem;
    }



    .rass-new-context {
        box-sizing:border-box;
        background-color: #EEF0F0;
        padding:0 24px;
        height: initial;
    }

    .rass-new-context .rass-container {
        background-color: #FFF;
        width: auto;
        margin: auto;
        max-width: 720px;
        height: initial;
        min-height: 100%;
        padding:15px;
        box-shadow: 1px 1px 9px 0 rgba(0,0,0,0.1);

    }


    .rass-new-context .rass-container .rass-state-hasvc {
        max-width: none;
        margin-right: 0;
    }


    .rass-new-context .rass-section-input,
    .rass-new-context .rass-section-action {
        margin-right: 0;
        min-width: 350px;
        max-width: 450px;
    }


    /*** specific mods ***/

    .rass-new-context .rass-layout-center .rass-section-input,
    .rass-new-context .rass-layout-center .rass-section-action {

        margin-right: 0;
        max-width: none;
        min-width: none;

    }

    .rass-new-context .rass-ui-signsteps {
        width: 300px;
    }


    .richsoftkey .rass-container {
        margin-bottom: 250px;
    }

    .rass-new-context .rass-container {
        margin-bottom: 1.5em;
    }



    .rass-new-context.richsoftkey #rass-section-softkey {
        margin-right: 0;
        width: 100%;

        position: fixed;
        left: 0;
    }



}


/*** L ***/
@media screen and (min-width: 992px){

    /* reset bg color on html due to body height bug */
    html {
        background:none;
    }

    .rass-new-context {
        padding-top:0;
        padding-bottom:0;
        height: initial;
    }

    .rass-new-context .rass-container {
        min-height: 100%;
        height: initial;
        border-radius: 0;
        max-width: calc(940px-35%);
        margin-right: 35%;
        padding:15px;
        padding-bottom: 235px;
        margin-bottom: 0;
    }


    .rass-new-context.richsoftkey .rass-container {
        height: 100%;
    }


    .rass-new-context.richsoftkey #rass-section-softkey {
        margin-right: 35%;

        position: fixed;
        width: 100%;

        padding-left: 24px;
        padding-right: 24px;
        margin-top: 15px;
        background:none;
        border-radius: 0;
        box-sizing: border-box;
    }

    .rass-new-context.richsoftkey .rass-layouthelper {
        max-width: 720px;
        margin: auto;
        margin-right: 35%;
        background:#666;
    }

}


/*** XL ***/
@media screen and (min-width: 1200px){

    /* reset bg color on html due to body height bug */
    html {
        background:none;
    }

    .rass-new-context {
        height: initial;
    }

    .rass-new-context .rass-container {
        max-width: calc(1140px-35%);
        margin-right: 35%;
        min-height:100%;
        height:initial;
    }

    .rass-new-context .rass-container form{

        /*
         padding-bottom: 220px;
         */
    }

    .rass-new-context .rass-container form#switchreaderform{
        padding-bottom: 0;
    }

    .rass-new-context.richsoftkey .rass-container {
        height: 100%;
    }

    .rass-new-context.richsoftkey #rass-section-softkey {

        /*

              margin-right: 35%;

            width: auto;
            margin: auto;
            max-width: 720px;

            margin-left: -16px;
            margin-right: -16px;
            margin-bottom:-16px;
            margin-top: 0px;
            padding-bottom: 16px;
            border-left: 1px solid #666;
            border-radius: 0;
        */


        width: 100%;
        position: fixed;
        margin: auto;

        margin-top: 15px;
        border-radius: 0;

    }

    .rass-new-context.richsoftkey .rass-layouthelper {
        max-width: 720px;
        margin: auto;
        margin-right: 35%;
        background:#666;
    }

}



.rass-new-context .rass-alert-box,
.rass-alert-box {
    margin-top: 2em;
    max-width: 720px;
    min-width: 320px;
    height: 400px;
    min-height:400px;
    border-radius: 8px;
    margin-right: auto;
}

.rass-alert-box .rass-page-title {
    margin-bottom: 0;
}




/*** footer tin section ***/


.rass-page-tinweb.mobiletc form {
    display: block;
}

.rass-page-tinweb .rass-page-title {
    border-bottom:none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.rass-alert-box .rass-section-action {
    margin-top: 3em;
}

.rass-page-tinweb .rass-section-summary {
    border-bottom:none;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 230px);
    box-sizing: border-box;
}


.rass-page-tinweb .rass-container{
    height: 100%;
    max-width: none;
    overflow: hidden;
    position: relative;

}

.rass-page-tinweb .rass-container{
    position: relative;
}

.rass-page-tinweb.richsoftkey #rass-section-softkey {
    position: absolute;
    left: 0;
}

.rass-page-tinweb.richsoftkey .rass-container {
    margin-bottom: 0;
}

.rass-page-tinweb.richsoftkey .rass-toggle-container {
    padding-bottom: 230px;
}

.rass-footer-tinsection {
    box-sizing:border-box;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #CCC;
    padding: 20px 16px 20px 16px;
    background:#FFF;

}

.rass-footer-tinsection .rass-toggle-container {
    text-align: center;
}


.rass-footer-tinsection .rass-section-action,
.rass-footer-tinsection .rass-section-formgroup,
.rass-footer-tinsection .rass-section-input {
    margin: 0;
    padding:0;
    max-width: initial;
    min-width: initial;

}



.rass-footer-tinsection .rass-section-action .rass-button-primary {
    display: inline-block;

}

.rass-footer-tinsection .rass-section-action .rass-action-cancel {
    display: inline-block;
    width: 200px;
    margin-left: 10px;

}

.rass-footer-tinsection .dpo-widget-password.dpo-widget-container {
    margin-top: 0;
}



.rass-footer-tinsection label {
    color: #333;
    margin-top: 15px;
}

.rass-footer-tinsection label::after {
    content:'';
    background-image: url(images/arrowdown.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    position: absolute;
    right: 26px;
    top:0;
    cursor: pointer;

    perspective: 800px;
}

.rass-footer-tinsection .rass-button-primary {
    width:300px;
    cursor: pointer;
}

/*
.rass-footer-tinsection.rass-state-hidetin {
  height:100px;
}

.rass-footer-tinsection.rass-state-showtin {
  height:350px;
}
*/


.rass-footer-tinsection {
    height: 80px;
}


/*** responsive ***/

/*** XS ***/
@media screen and (max-width: 543px){

    .rass-footer-tinsection {
        height: 120px;
    }

    .rass-footer-tinsection .rass-button-primary {
        width: 100%;
    }

}


/*** little height screen ***/
@media screen and (max-height: 570px) {

    .rass-container {
        transition: margin 1s;
    }

    .richsoftkey-padding .rass-container {
        margin-top: -110px;
    }

}


/*** animation ***/


.rass-footer-tinsection .rass-toggle-container {

    transform: translate3d(0, 0, 0);
    will-change: bottom;

    transition: bottom 1s;
    position: fixed;
    width: 100%;
    background:#FFF;
    border-top: 1px solid #CCC;
}

.rass-footer-tinsection.rass-state-hidetin .rass-toggle-container{
    bottom: -400px;
    left: 0;
}

.rass-footer-tinsection.rass-state-hidetin .rass-section-action {
    bottom: 0;
}


.rass-footer-tinsection.rass-state-showtin .rass-toggle-container{
    bottom: 0;
    left: 0;
}


.rass-footer-tinsection.rass-state-showtin .rass-section-action {
    bottom: 0;
}


/*** password widget refactoring ***/


.rass-state-activelms-0 .submask {
    background:url("images/tincode-empty.svg");
}

.rass-state-activelms-0 .submask:nth-child(2) {background:url("images/tincode-active.svg") no-repeat;background-size: contain;}
.rass-state-activelms-0 .submask:nth-child(3) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-0 .submask:nth-child(4) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-0 .submask:nth-child(5) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-0 .submask:nth-child(6) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}


.rass-state-activelms-1 .submask:nth-child(2) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-1 .submask:nth-child(3) {background:url("images/tincode-active.svg") no-repeat;background-size: contain;}
.rass-state-activelms-1 .submask:nth-child(4) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-1 .submask:nth-child(5) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-1 .submask:nth-child(6) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}


.rass-state-activelms-2 .submask:nth-child(2) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-2 .submask:nth-child(3) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-2 .submask:nth-child(4) {background:url("images/tincode-active.svg") no-repeat;background-size: contain;}
.rass-state-activelms-2 .submask:nth-child(5) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}
.rass-state-activelms-2 .submask:nth-child(6) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}


.rass-state-activelms-3 .submask:nth-child(2) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-3 .submask:nth-child(3) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-3 .submask:nth-child(4) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-3 .submask:nth-child(5) {background:url("images/tincode-active.svg") no-repeat;background-size: contain;}
.rass-state-activelms-3 .submask:nth-child(6) {background:url("images/tincode-empty.svg") no-repeat;background-size: contain;}


.rass-state-activelms-4 .submask:nth-child(2) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-4 .submask:nth-child(3) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-4 .submask:nth-child(4) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-4 .submask:nth-child(5) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-4 .submask:nth-child(6) {background:url("images/tincode-active.svg") no-repeat;background-size: contain;}


.rass-state-activelms-5 .submask:nth-child(2) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-5 .submask:nth-child(3) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-5 .submask:nth-child(4) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-5 .submask:nth-child(5) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}
.rass-state-activelms-5 .submask:nth-child(6) {background:url("images/tincode-filled.svg") no-repeat;background-size: contain;}


/*** Spinner ***/

.rass-spinner::after {
    content:"";
    background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyBjbGFzcz0icmZzLXNwaW5uZXJfX3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTAgNTAiPg0KICAgICAgICAgICAgICAgIDxkZWZzIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4NCiAgICAgICAgICAgICAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZnMtZGU4ODg5ZmItZDRkMS00OTFjLWI3NzEtZGUzZGE3ODY0MTUwLXBhcnQxIiB4MT0iMCIgeTE9IjEiIHgyPSIxIiB5Mj0iMCI+DQogICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBzdHlsZT0ic3RvcC1jb2xvcjogIzAwOTsiIG9mZnNldD0iMCUiPjwvc3RvcD4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxzdG9wIHN0eWxlPSJzdG9wLWNvbG9yOiAjMDA5OyIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+DQogICAgICAgICAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgICAgICAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icmZzLWRlODg4OWZiLWQ0ZDEtNDkxYy1iNzcxLWRlM2RhNzg2NDE1MC1wYXJ0MiIgeDE9IjAiIHkxPSIxIiB4Mj0iMCIgeTI9IjAiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjAlIiBzdG9wLW9wYWNpdHk9Ii43NSI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4NCiAgICAgICAgICAgICAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICAgICAgICAgICAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZnMtZGU4ODg5ZmItZDRkMS00OTFjLWI3NzEtZGUzZGE3ODY0MTUwLXBhcnQzIiB4MT0iMSIgeTE9IjEiIHgyPSIwIiB5Mj0iMCI+DQogICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBzdHlsZT0ic3RvcC1jb2xvcjogIzAwOTsiIG9mZnNldD0iMCUiIHN0b3Atb3BhY2l0eT0iLjY3NSI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjEwMCUiIHN0b3Atb3BhY2l0eT0iLjc1Ij48L3N0b3A+DQogICAgICAgICAgICAgICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgICAgICAgICAgICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icmZzLWRlODg4OWZiLWQ0ZDEtNDkxYy1iNzcxLWRlM2RhNzg2NDE1MC1wYXJ0NCIgeDE9IjEiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjAlIiBzdG9wLW9wYWNpdHk9Ii4xNSI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjEwMCUiIHN0b3Atb3BhY2l0eT0iLjY3NSI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICAgICAgICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InJmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtcGFydDUiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4NCiAgICAgICAgICAgICAgICAgICAgICAgIDxzdG9wIHN0eWxlPSJzdG9wLWNvbG9yOiAjMDA5OyIgb2Zmc2V0PSIwJSIgc3RvcC1vcGFjaXR5PSIwIj48L3N0b3A+DQogICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBzdHlsZT0ic3RvcC1jb2xvcjogIzAwOTsiIG9mZnNldD0iMTAwJSIgc3RvcC1vcGFjaXR5PSIuMTUiPjwvc3RvcD4NCiAgICAgICAgICAgICAgICAgICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICAgICAgICAgICAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZnMtZGU4ODg5ZmItZDRkMS00OTFjLWI3NzEtZGUzZGE3ODY0MTUwLXBhcnQ2IiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+DQogICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBzdHlsZT0ic3RvcC1jb2xvcjogIzAwOTsiIG9mZnNldD0iMCUiIHN0b3Atb3BhY2l0eT0iMCI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3Agc3R5bGU9InN0b3AtY29sb3I6ICMwMDk7IiBvZmZzZXQ9IjEwMCUiIHN0b3Atb3BhY2l0eT0iMCI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICAgICAgICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InJmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtc3Bpbm5lci1iZyIgeDE9IjAiIHkxPSIxIiB4Mj0iMSIgeTI9IjAiPg0KICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3AgY2xhc3M9ImJnLXNwaW5uZXIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDk7c3RvcC1vcGFjaXR5OjAuMDc7IiBvZmZzZXQ9IjAlIj48L3N0b3A+DQogICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBjbGFzcz0iYmctc3Bpbm5lciIgc3R5bGU9InN0b3AtY29sb3I6IzAwOTtzdG9wLW9wYWNpdHk6MC4wNzsiIG9mZnNldD0iMTAwJSI+PC9zdG9wPg0KICAgICAgICAgICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICAgICAgICAgIDwvZGVmcz4NCiAgICAgICAgICAgICAgICA8ZyBjbGFzcz0icmZzLXNwaW5uZXJfX2RyYXdpbmciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1LDI1KSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2Utd2lkdGg6IDNweDsiPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNLTE3LjMsLTEwIEEyMCwyMCAwIDAsMSAwLC0yMCwgTS0xNy4zLDEwIEEyMCwyMCAwIDAsMSAtMTcuMywtMTAsIE0wLDIwIEEyMCwyMCAwIDAsMSAtMTcuMywxMCwgTTE3LjMsMTAgQTIwLDIwIDAgMCwxIDAsMjAsIE0xNy4zLC0xMCBBMjAsMjAgMCAwLDEgMTcuMywxMCwgTTAsLTIwIEEyMCwyMCAwIDAsMSAxNy4zLC0xMCIgc3Ryb2tlPSJ1cmwoI3Jmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtc3Bpbm5lci1iZykiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICA8L2c+DQogICAgICAgICAgICAgICAgPGcgY2xhc3M9InJmcy1zcGlubmVyX19kcmF3aW5nIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNSwyNSkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOiAzcHg7Ij4NCiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTS0xNy4zLC0xMCBBMjAsMjAgMCAwLDEgMCwtMjAiIHN0cm9rZT0idXJsKCNyZnMtZGU4ODg5ZmItZDRkMS00OTFjLWI3NzEtZGUzZGE3ODY0MTUwLXBhcnQxKSI+PC9wYXRoPg0KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNLTE3LjMsMTAgQTIwLDIwIDAgMCwxIC0xNy4zLC0xMCIgc3Ryb2tlPSJ1cmwoI3Jmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtcGFydDIpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDIwIEEyMCwyMCAwIDAsMSAtMTcuMywxMCIgc3Ryb2tlPSJ1cmwoI3Jmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtcGFydDMpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNy4zLDEwIEEyMCwyMCAwIDAsMSAwLDIwIiBzdHJva2U9InVybCgjcmZzLWRlODg4OWZiLWQ0ZDEtNDkxYy1iNzcxLWRlM2RhNzg2NDE1MC1wYXJ0NCkiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjMsLTEwIEEyMCwyMCAwIDAsMSAxNy4zLDEwIiBzdHJva2U9InVybCgjcmZzLWRlODg4OWZiLWQ0ZDEtNDkxYy1iNzcxLWRlM2RhNzg2NDE1MC1wYXJ0NSkiPjwvcGF0aD4NCiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsLTIwIEEyMCwyMCAwIDAsMSAxNy4zLC0xMCIgc3Ryb2tlPSJ1cmwoI3Jmcy1kZTg4ODlmYi1kNGQxLTQ5MWMtYjc3MS1kZTNkYTc4NjQxNTAtcGFydDYpIj48L3BhdGg+DQogICAgICAgICAgICAgICAgPC9nPg0KICAgICAgICAgICAgPC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 50px;
    height: 50px;
    animation: rotate-spinner 1s linear infinite;
    margin: auto;
    left:0;
    right: 0;
    position: absolute;
    top: 49%;
    color: #009;
}

@keyframes rotate-spinner {
    0% {
        transform: rotate(0); }
    100% {
        transform: rotate(360deg); }
}