.validation-error {
    border: 1px solid #d35847 !important;
}
.modal{
    z-index: 100000000!important;
}

.reg-loader-wrap {
    z-index: 100000000!important;
    opacity: 0.6;
}

div.g-recaptcha {
    text-align: -webkit-right;
    margin-bottom: -5px;
}

div.g-recaptcha div:first-child {
    margin: 0 auto;
    padding: 0px;
}
.display-none{
    display: none!important;
}
tr.pendingXen td.uid, tr.pendingSop td.uid, tr.pendingOne td.uid, tr.pendingLan td.uid {
    background-image: url("../img/pending.svg");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 0px 13px;
}
tr.loadingXen td.uid, tr.loadingSop td.uid, tr.loadingOne td.uid, tr.loadingLan td.uid  {
    background-image: url("../img/processing.svg");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 0px 13px;
}

.xenwidget-container {
    width: 100%;
    text-align: center;
}

.navInfo{
    position: relative;
    float: none;
    margin: 0 20px;
}
.navFull:hover, .navFirst:hover, .navPrev:hover, .navNext:hover, .navLast:hover {
    background: #1380cf;
    cursor: pointer;
}
.navFull, .navFirst, .navPrev, .navNext, .navLast{
    border-radius: 2px;
    background: #1992ea;
    display: inline-block;
    width: 30px;
    height: 22px;
    text-align: center;
    line-height: 10px;
    color: #ffffff;
    font-size: 13px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
}
.navFull{
    width: 60px!important;
}
.navFull[disabled], .navFirst[disabled], .navPrev[disabled], .navNext[disabled], .navLast[disabled]{
    background-color: #a0a0a0!important;
}
#devicesStatus{
    display: none;
}
#devicesStatus.pendingXen, #devicesStatus.pendingSop, #devicesStatus.pendingOne {
    background-image: url("../img/pending.svg");
    background-repeat: no-repeat;
    background-size: 19px;
    display: block!important;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 32px;
    left: 5px;
}
#devicesStatus.loadingXen, #devicesStatus.loadingSop {
    background-image: url("../img/processing.svg");
    background-repeat: no-repeat;
    background-size: 19px;
    display: block!important;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 32px;
    left: 5px;
}

.modal-backdrop.in {
    z-index: 1000000;
}

#pageSelect{
    width: auto!important;
    height: auto!important
}
#waiting{
    opacity:0.9;
}
div.actionline button{
    border: none!important;
    background-color: transparent!important;
    color: #666666!important;
}
div.actionline button img{
    background-image: url('../img/state1.svg');
    background-repeat: no-repeat;
    background-position: 0px 0px !important;
    width: 30px;
    height: 30px;
    padding-right: 5px;
    vertical-align: middle;
    border-style: none;
    margin-right: 8px;
}
div.actionline button img.loadingImg {
    background-image: url("../img/state2.svg") !important;
}
div.actionline {
    width: 100%;
    padding-top: 6px;
}
div.actionline button {
    min-width: 200px;
    text-align: left;
    line-height: 30px;
    font-weight: 600;
    font-size: 13px;;
}
div.actionline button.pending img.loadingImg{
    background-image: url("../img/state3.svg") !important;
}
div.actionline button.done img.loadingImg{
    background-image: url("../img/state4.svg") !important;
}
div.actionline button.failed img.loadingImg{
    background-image: url("../img/state5.svg") !important;
}

div.actionline span{
    font-size: 20px;
    padding-top: 0px;
    position: relative;
    float: left;
    width: 100%;
    font-weight:700;
}
input:-ms-input-placeholder {
    color: #bdbdbd !important;
}

.navbar-nav-settings ul li a{
    color: #7f8fa4;
    text-decoration: none;
    font-weight: 400;
}

.navbar-nav-settings ul li.current a{
    color: #2b3e51;
    text-decoration: none;
    font-weight: 600;
}
.goList{
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
}
.goList li{
    padding: 12px;
    background: #2494c5;
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.goList li a{
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
}
.goList div.migLeft{
    padding: 10px 0;
    width: calc(55% - 10px);
    position: relative;
    float: left;
    font-weight: 600;
    margin-left: 4px;
}
.goList div.migRight{
    padding: 10px 0;
    width: calc(45% - 10px);
    position: relative;
    float: right;
    font-weight: 400;
    word-break: break-all;
}

.buttonNoflicker:before {
    background-color: #187bab;
    color: transparent;
    content: "x";
    width: 100%;
    height: 45px;
    position: absolute;
    margin-top: 2px;
    border-radius: 2px;
}

.button-hover {
    background-color: #187bab!important;
}

@media (min-width: 1200px) {
    .button-hover:before {left:0px;width: 100%;background-color: transparent;}
    .buttonNoflicker:before {width: calc(100% - 30px);background-color: transparent;}
}
@media (min-width: 992px) and (max-width: 1199px) {
    .button-hover:before {left: 0px;width: 100%;background-color: transparent;}
    .buttonNoflicker:before {width: calc(100% - 30px);}
}
@media (min-width: 768px) and (max-width: 991px) {
    .button-hover:before {left: 0px;width: 100%;background-color: transparent;}
    .buttonNoflicker:before {width: calc(100% - 30px);}
}

@media (min-width: 577px) and (max-width: 767px) {
    .button-hover:before {left: 0px;width: 100%;background-color: transparent;}
    .buttonNoflicker:before {width: calc(100% - 30px);}
}

@media (max-width: 576px) {
    .button-hover:before {left: 0px;width: 100%;background-color: transparent;}
    .buttonNoflicker:before {width: calc(100% - 30px);}
}

div.kaptcha div{
    border-bottom: none;
    margin-bottom: -4px;
}
div.kaptcha div button{
    position: relative;
    top: 0;
    right: 9px;
    float: right;
    width: 25px;
    height: 25px;
    background-image: url(../img/reload.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 0px 0px;
    background-color: transparent;
    border: 1px solid #cfd9db;
    border-radius: 3px;
}
div.kaptcha div button:hover, div.kaptcha div button:focus{
    background-image: url(../img/reload-blue.svg);
    border: 1px solid #2494c5;
    cursor: pointer;
}
div.kaptcha div img{
    position: relative;
    top: 0;
    left: 10px;
}

.eula{
    overflow: scroll;
}

.eulaTable h1{
    color: #2494c5 !important;
    font-weight: 700;
    font-size: 16px!important;
    text-align: left!important;
}
.eulaTable h2{
    color: #2494c5 !important;
    font-weight: 700;
    font-size: 16px!important;
    text-align: left!important;
}

.eulaTable {
    width: 100%!important;
    font-size: calc(100% - 4px);
}

.eulaTable strong{
    font-size: 100%!important;
    line-height: initial;
    font-weight: 700;
}
.container.eula{
    font-size: calc(100% + 4px);
}

.settingsPage #raw{
    width: 100%;
    height: 400px;
    background-color: #000000;
    color: #f3f3f3;
    font-family: monospace;
    font-size: 12px;
    white-space: nowrap;
    overflow: auto;
}

body.locked{
    background-image: url(../img/locked-bg.png);
    color: #ffffff;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: 700px;
    background-position: center 70px;
    background-color: #9ec7db;
}
body.locked p{
    font-size: 32px;
    width: 100%;
    text-align: center;
    padding-top: 40px;
}

body.locked .navbar, body.settingsPage .navbar{
    border-radius: 0px!important;
}

#btnStripeNew .blue-button-fullwidth, #btnManualNew .blue-button-fullwidth{
    background-image: linear-gradient(rgb(171, 24, 50) 0%, rgb(197, 36, 61) 100%)!important;
}

.invalidReg h1{
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-shadow: 1px 1px 2px #e0e0e0, 0 0 25px #666666, 0 0 5px #ffffff;
}
.invalidReg h1::before{
    content: '';
    background-image: url(../img/crying.svg);
    width: 100%;
    height: 100px;
    position: relative;
    background-repeat: no-repeat;
    display: block;
    background-position: center;
}
.invalidReg{
    background-image: url(../img/UEM_357306915.jpeg);
    background-size: cover;
}

#adminLogin {
    background: transparent;
    width: 40px;
    height: 40px;
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 1000001;
}

.otp-message {
    background-color: #ececec;
    margin-top: 10px;
    padding: 10px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
}

.otp-input-container, .tan-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.otp-input, .tan-input {
    width: 40px;
    height: 60px;
    text-align: center;
    font-size: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 8px;
    padding: 0;
}

.otp-input:focus, .tan-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Hide arrows in Chrome, Safari, Edge, Opera */
.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button,
.tan-input::-webkit-outer-spin-button,
.tan-input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
.otp-input,
.tan-input{
    -moz-appearance: textfield;
}

.otp-input[disabled], .tan-input[disabled] {
    color: #2b3e5187;
}