*, html, body, p, div, ul, ol, li, label, em, strong, a, article, figure, address, figcaption, select, input, button, img, table, tr, td, aside, header, video, b, span, h1, h2, h3, select {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.4em;
    font-weight: 600;
    box-sizing: padding-box;
}
body {
    font-size: 14px;
    line-height: 25px;
    background: #ff3236;
    background: -moz-radial-gradient(center, ellipse cover, #ff3236 0%, #9F060B 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ff3236 0%,#9F060B 100%);
    background: radial-gradient(ellipse at center, #ff3236 0%,#9F060B 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3236', endColorstr='#ce0003',GradientType=1 );
    color: #151515 !important;
    font-family: 'Open Sans', sans-serif;
}
.tdx{border-radius:20px}
.blue {
    color: #551A8B !important
}
.redx {
    color: #ff0000;
}
header {
    width: 100%;
    padding: 40px 0 0px;
}
.pg{
    display: table;
    margin: 50px auto 0;
    position: relative
}
.loginbg {
    display: table;
    margin: 0px auto;
    position: relative
}
.tableBg {
    box-shadow: 0px 0px 30px rgba(0,0,0,.1);
}
.table {
    display:table; width:100%; position:relative;
}
.ort{ display:table; margin:0px auto}
.tr {
    display: table-row
}
.td {
    width:425px;
    background: #f1f1f1;
    padding: 40px;
    display: table-cell;
    vertical-align:top
} .td.first {
     border-radius:20px 0px 0px 20px
    }
    .td.last {
     border-radius:0px 20px 20px 0px;
        background:#fff
    }

.loginCode{ position:absolute; width:100%; height:100%; left:0; top:0; z-index:5000;}
.loginBG {
    position:fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9000;
    background:rgba(0,0,0,.7);
}
.loginTxt{display:table; position:relative; z-index:9999; margin:2% auto;}

select.inp {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url(/img/downx.png) no-repeat 96% center !important
}
.wid1 {
    width: 64% !important;
    display: inline !important;
}
.wid2 {
    width: 34% !important;
    display: inline !important;
    margin-left: 7px !important;
    padding: 22px !important;
}
    h1,h2{ font-size:32px; font-weight:bold}
.form{ margin:0; display:table; width:100%}
.form label{ padding:11px 0; display:block;}
.inp {
    padding: 22px;
    box-sizing: border-box;
    margin: 6px 0;
    margin-bottom: 10px;
    display: block;
    background: #fff !important;
    border-radius: 60px;
    width: 100%
}
a {
    color: #3895BC;
    text-decoration: none
}
.srv{ display:inline-block; float:right; margin:5px 0; }
a:hover {
    text-decoration: underline
}
    ::placeholder {
        color: #888;
        font-weight: 400
    }
input[type=number], input[type=password], input[type=text], textarea {
    -webkit-appearance: none;
    appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(/img/calendar.png) no-repeat;
    width: 20px;
    height: 20px;
    border-width: thin;
}
input[type="date"] {
    padding: 20.5px 22px !important
}
input:not[type="submit"] {
    background-color: #ffffff;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:visited,
input:-webkit-autofill:focus,
input:-webkit-autofill:active, input:active, input:focus, input:hover::after input:visited {
    background-color: #fff;
    box-shadow:0px 0px 10000px #fff inset
}

textarea:focus, input:focus {
    outline: none;
}
*:focus {
    outline: none;
}
[role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {
    touch-action: manipulation;
}
.user{ background-image:url(/img/user.png) !important; background-repeat:no-repeat !important; background-position:16px center !important; text-indent:30px}
.pass {
    background-image: url(/img/pass.png) !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    text-indent: 30px
}
.mobile, .mobile1 {
    /*background-image: url(/img/mobile.png) !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;*/
    text-indent: 30px;
    font-size: 18px;
    width: 424px !important;
}
.inp1{position:relative}
    .inp1 .inp{display:inline-block; width:85%; margin-right:10px}
    .inp1 a{ display:inline; position:relative; top:0}
.help {
    background-image: url(/img/help.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    padding: 2px 12px;
}
.rand, .rand1 {
    background-image: url(/img/rand.png) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    padding: 2px 12px;
}
.rand1 {
    background-image: url(/img/randx.png) !important;
    position: absolute;
    padding: 20px;
    right: 8%; cursor:pointer;
    margin: -55px 0 0 0;
}
    label.sz{font-weight:normal; padding:5px 0}
.visible {
    background-image: url(/img/visible.png);
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    padding: 12px;
    position: absolute;
    z-index: 1000;
    right: 80px;
    cursor: pointer;
    margin-top: 27px !important;
}
    .visible.active {
        background-image: url(/img/visibleoks.png) !important;
    }
    small {
        font-size: 12px;
        color: #555;
        box-sizing: border-box;
        font-weight: normal !important
    }
    label strong {
        color: #4195BC
    }
    .trn {
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
    }
.btn, .btnx {
    background: #4eb9e6;
    background: -moz-linear-gradient(left, #4eb9e6 0%, #3896bd 100%);
    background: -webkit-linear-gradient(left, #4eb9e6 0%,#3896bd 100%);
    background: linear-gradient(to right, #4eb9e6 0%,#3896bd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eb9e6', endColorstr='#3896bd',GradientType=1 );
    padding: 17px 20px;
    cursor: pointer;
    border-radius: 60px;
    color: #fff;
    width: 100%;
    display: block;
    margin: 20px 0
}
.btnx {
    width: auto;
    margin:50px auto 0;
    display:table;
    padding: 17px 80px 17px 20px;
    border: 1px solid #3895BC;
    background: #fff url(/img/loginok.png) no-repeat 92% center;
    box-shadow: 160px 0px 0px #3895BC inset;
}
    .btn:hover{
        box-shadow: 0px 0px 100px #3896bd inset, 0px 4px 4px rgba(0,0,0,.2);
    }
    .btnx:hover {
        box-shadow: -10px 0px 0px #fff inset;
        color: #3895BC
    }
.btn1{
    transition: box-shadow .5s;
    background: #fff;
    border: 2px solid #3895BC;
    padding: 15px 20px;
    cursor: pointer;
    border-radius: 60px;
    color: #3895BC;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    margin: 20px 0
}
   footer{ padding:20px 0; margin:10px auto; display:table; text-align:center; color:#fff}
    footer a{ color:#fff; text-decoration:none}
        footer a:hover {
            text-decoration: underline;
        } .btn1:hover {
            background: #fff url(/img/loginok.png) no-repeat 96% center;
            box-shadow: 360px 0px 0px #3895BC inset;
            color: #fff;
        }
.vy{display:block; position:relative; text-align:center;}
    .vy span {
        padding: 10px 20px;
        position:relative; z-index:1000;
        background: #F1F1F1; color:#666;
    }
.vy hr{width:100%; height:2px; position:absolute; margin-top:-10px; background:#ddd;}
:disabled, :disabled:hover {
    cursor: no-drop;
    background: #CCCCCC !important;
    color: #4a4444 !important;
    box-shadow: 0px 0px 0px
}
.hide{display:none}
.code {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 53px;
    display: inline-block;
    font-size: 20px;
    border: 4px solid #4195BC;
    text-align: center;
    position:relative; z-index:100;
    padding: 20px; box-sizing:border-box;
}
.code:last-child{ margin-right:0px}
.clear{clear:both}
#hata, #hata1, #hata2, #hata3 {
    color: #ff0000;
    display: table;
    text-align: center;
    margin: 0 auto
}
.base-timer {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 20px auto;
    display: table
}

.base-timer__svg {
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: #fff;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

    .base-timer__path-remaining.green {
        color: rgb(65, 149, 188);
    }

    .base-timer__path-remaining.orange {
        color: orange;
    }

    .base-timer__path-remaining.red {
        color: red;
    }

.base-timer__label {
    position: absolute;
    width: 150px;
    height: 150px;
    color: #3895bc;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
}
#tooltip {
    font-size: 14px;
    text-align: left;
    line-height: 26px;
    max-width: 250px !important;
    color: #2A2D35;
    background-color: #fff;
    position: absolute;
    z-index: 10000;
    padding: 12px 12px;
    border-radius: 3px;
    margin-top: -15px;
    margin-left:-1px;
    box-shadow:0px 0px 4px rgba(0,0,0,.1); font-weight:normal !important
}


.tip {
    cursor: pointer
}

#tooltip strong {
    color: #2A2D35;
    margin-bottom: -15px;
    display: block;
}

#tooltip b {
    color: #2A2D35; font-weight:bold !important
}

#tooltip:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    border-top-color: #fff;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #fff;
    border-bottom-color: #fff;
    top: -20px;
    bottom: auto;
}

#tooltip.left:after {
    left: 10px;
    margin: 0;
}

#tooltip.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

.info {
    padding:0;
    position: relative;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 60px;
    margin:5px 0;
    width: 100%;
    background:#fff;
}
#vil, #vilx {
    font-size: 12px;
    display: block;
    text-align: center;
}
.sm1, .sm2, .sm3, .sm4, .sm5{
    padding:10px;
    background-repeat: no-repeat;
    background-position: 98% center
}

.tbh{ display:table; margin:0 auto}
#passDeny, #passDenyx {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    border-top-right-radius: 4px;
    padding: 3px
}

.progress-bar-danger {
    background: #008000 url(/img/loadbar.svg) repeat -55px -8px
}

.progress-bar-danger1 {
    background: #ff0000 url(/img/loadbar.svg) repeat -55px -8px
}

.progress-bar-warning {
    background: #ff5000 url(/img/loadbar.svg) repeat -55px -8px
}

.progress-bar-success {
    background: #00C333 url(/img/loadbar.svg) repeat -55px -8px
}

.progress-bar-success1 {
    background: #00C778 url(/img/loadbar.svg) repeat -55px -8px
}


.mixedTableBody {padding: 20px;border-radius: 10px;background: #fff;}.mixedTable {display: table;border-collapse: collapse;padding: 20px !important;background: #fff !important;border-radius: 10px !important;width: 750px !important;}.mixedTable thead tr {background: #FFFDFF}.mixedTable thead th {padding: 20px 10px !important;text-align: left !important;border-bottom: 1px solid #ddd !important;font-weight: bold !important;}.mixedTable tbody tr{cursor:pointer;}.mixedTable tbody td {padding: 10px !important;font-weight: 400 !important;border-bottom: 1px solid #ddd !important;}.mixedTable tbody tr:nth-child(even) {background: #f7f8f7 !important}.mixedTable tbody tr:hover, .mixedTable tbody tr.active {background: #f7f7f1 !important}.mixedTable tbody tr:last-child td {border-bottom: 0px !important}