@font-face {
    font-family: "Gagalin";
    font-weight: 400;
    src: url("fonts/Gagalin-Regular.otf");
}
body{
    padding: 0;
    top: 0 !important;
    color: #ccc;
    font-weight: 400;
    font-family:arial;
    font-size: 14px;
    background: linear-gradient(145deg, #555,#111);
    background-attachment: fixed;
    background-size: cover;
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    position: relative;
}
.form_login{
    width: calc(100% - 10px);
    padding: 5px;
    display: block;
    margin: 20px auto;
    position: relative;
}
.form_login a{
    display: inline-block;
    margin: 5px;
}
.name{
    display: block;
    padding: 5px;
    float: right;
}
h1 {
    font-size: 34px;
    font-family: Gagalin, tahoma;
    color: orange;
    letter-spacing: .09em;
    max-width: 96%;
}
h2 {
    color: rgb(255, 216, 82, .9);
    font-family: "Ruda", sans-serif;
    font-size: 28px;
}
h3{
    color: rgb(255, 216, 89, .8);
    font-family: "Ruda", sans-serif;
    font-size: 22px;
}
h4{
    color: rgb(255, 218, 89, .7);
    font-family: "Ruda", sans-serif;
    font-size: 16px;
}
h1, h2, h3, h4{
    margin: 10px auto;
    margin-top: 20px;
    font-weight: 500;
    font-optical-sizing: auto;
    padding: 0;
}
    h5,h6{
        margin: 0 auto;
        margin-top: 10px;
        font-family: "Ruda", sans-serif;
        color: orange;
    }
    p{
        width: 96%;
        font-size: 14px;
        text-indent: 35px;
        text-align: justify;
        color: #ccc;
        margin: 5px auto;
        font-family: arial;
        line-height: 1.2;
    }
    li {
        text-align: left;
        font-size: 14px;
        line-height: 1.2;
    }
    p b {
        color: #F9E79F;
    }
    /*adblock detect */
    .errorPlaceBlocked{
        display: block;
        margin: 5px auto;
        padding: 10px 0;
        text-align: center;
        color: rgb(255, 50, 0);
        border: 1px solid rgb(255, 50, 0);
        background: rgb(255, 50, 0, .1);
        font-size: 14px;
    }
    /*adblock detect */
    /*form style*/
    .inp_t{
        display: block;
        width: 80%;
        text-align: center;
        padding: 10px 15px;
        border: 1px solid #333;
        background: #fff;
        border-radius: 3px;
        margin: 5px auto;
    }
    .inp_t:focus {
        box-shadow: 0 0 5px #000;
        outline: none;
    }
    /*form style*/
    .btn {
        display: inline-block;
        background: orange;
        padding: 8px 14px;
        color: #000;
        font-size: 14px;
        cursor:pointer;
        border: 0;
        border-radius: 5px;
        margin: 0 3px;
        transition: .5s;
    }
    .btn:hover {
        background-color: #82BDFF;
        color: #fff;
    }
    .btn:focus{
        outline: none;
    }
    /*load pages*/
    .loadPages{
        display: block;
        margin: 40px auto;
        width: 50px;
        height: 50px;
        border-radius: 20px;
        border: 10px solid #666;
        position: relative;
    }
    .loadPages::before{
        content: ' ';
        position: absolute;
        top: -20px;
        left: -20px;
        width: 12px;
        height: 12px;
        border-radius: 5px;
        border: 4px solid rgb(252, 182, 3, .8);
        animation-name: loadPages;
        animation-duration: 1.5s;   
        animation-iteration-count: infinite;
    }
    .loadPages::after{
        content: ' ';
        position: absolute;
        bottom: -30px;
        right: -30px;
        width: 33px;
        height: 33px;
        border-radius: 5px;
        border: 2px solid rgb(255, 255, 255, .4);
        animation-name: loadPages2;
        animation-duration: 1.5s;   
        animation-iteration-count: infinite;
    }
    /*end load pages*/
    /*back button*/
    .back_button{
        display: block;
        margin: 0 auto;
        width: calc(100% - 16px);
        padding: 10px 8px;
        text-align: right;
    }
    .back_button button , .button-back, .buttonmon button, .banner_width button{
        display: inline-block;
        padding: 5px 10px;
        margin: 2px;
        margin-left: 0;
        border: none;
        border-radius: 4px;
        background: rgb(255,255,255,.1);
        color: #ccc;
        cursor: pointer;
        transition-duration: .5s;
    }
    .button-back:focus{
        outline: none;
    }
    .back_button button:hover, .buttonmon button:hover, .banner_width button:hover{
        background: rgb(255,255,255, .2);
        transition-duration: .5s;
        
    }
    /*img stat*/
    .tabletimg{
        display:inline-block;
        margin: -25px 0;
        width: 100px;
        height: 100px;
        overflow: auto;
        position: relative;
    }
    .superimg{
        width: 100px;
        height: 100px;
        animation-name: floating;
        animation-duration: 4s;   
        animation-iteration-count: infinite;
    }
    .shadow{
        margin: 0 auto;
        background: #111;
        box-shadow: 0 0 5px #000;
        animation-name: shadowmaster;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
    /*end img stat*/
    /*bonus light*/
    .normal, .normal-2{
        display: inline-block;
        margin: 10px;
        padding: 0;
        vertical-align: top;
    }
    .light{
        box-shadow: 0 0 10px red;
    }
    .light div, a, img , .normal-2 div, a, img{
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: top;
        bottom: 0;
    }
    /*end bonus light*/
    /*checkbox*/
    .rules_row {
        display:flex;
        align-items:center;
        justify-content:center;
        margin:0 auto;
        width:100%;
        height:30px
    }
    .custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
        border-color:#b3d7ff
    }
    .custom-checkbox:not(:disabled):active+label::before {
        background-color:#b3d7ff;
        border-color:#b3d7ff
    }
    .custom-checkbox:focus+label::before {
        box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)
    }
    .custom-checkbox:focus:not(:checked)+label::before {
        border-color:#80bdff
    }
    .custom-checkbox:disabled+label::before {
        background-color:#e9ecef
    }
    .custom-checkbox {
        position:absolute;
        z-index:-1;
        opacity:0
    }
    .custom-checkbox+label {
        display:inline-flex;
        align-items:center;
        user-select:none
    }
    .custom-checkbox+label::before {
        content:'';
        display:inline-block;
        width:1em;
        height:1em;
        flex-shrink:0;
        flex-grow:0;
        border:1px solid #adb5bd;
        border-radius:.25em;
        margin-right:1em;
        background-repeat:no-repeat;
        background-position:center center;
        background-size:50% 50%
    }
    .custom-checkbox:checked+label::before {
        border-color:#0b76ef;
        background-color:#0b76ef;
        color:#fff;
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e")
    }
    /*end chackbox*/

   /*статистика пользователя */
   .row, .row2{
       min-width: 468px;
       width: calc(96% - 2px);
       display: block;
       color: #888;
       background: #222;
       border: 1px solid #444;
       border-radius: 5px;
       margin: 2px auto;
       padding: 5px 0;
       cursor: pointer;
       transition-duration: .5s;
   }
   .minitext{
       display: block;
       margin: 0 10px;
       font-size: 11px;
       color: #777;
   }
   .row_td2{
       display: inline-block;
       width: 24%;
       font-size: 14px;
       margin: 2px auto;
   }
   .row:hover{
       background: rgb(255,255,255,.1);
       color: #fff;
       transition-duration: .5s;
   }
   
   .arr_b{
       cursor: pointer;
       color: #999;
       margin: 0;
       display: inline-block;
   }
   .arr_b:hover{
       color: orange;    
   }
   /*конец статистики пользователя*/
   .status2{
       display: block;
       margin: 10px auto;
       width: calc(100% - 80px);
       padding: 10px 20px;
       background: rgb(255, 195, 0, .5);
       border-radius: 5px;
       color: #fff;
   }
   .status1{
    display: block;
    width: calc(96% - 22px);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #fa9600;
    background: rgb(255, 245, 112,.1);
    color: #fa9600;
    font-size: 14px;
    text-align: center;
    margin: 15px auto;
}.status2{
    display: block;
    width: calc(96% - 22px);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #13d3d6;
    background: rgb(121, 245, 247,.1);
    color: #13d3d6;
    font-size: 14px;
    text-align: center;
    margin: 15px auto;
}.status3{
    display: block;
    width: calc(96% - 22px);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f21707;
    background: rgb(242, 23, 7,.1);
    color: #f21707;
    font-size: 14px;
    text-align: center;
    margin: 15px auto;
}.status4{
    display: block;
    width: calc(96% - 22px);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #25fc12;
    background: rgb(37, 252, 18,.1);
    color: #25fc12;
    font-size: 14px;
    text-align: center;
    margin: 15px auto;
}
@keyframes Opacity{
    0%{ 
        
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes floating {
    0% {
        transform: translateY(0%);
        
    }
    50% {
        transform: translateY(12%);  
    }   
    100% {
        transform: translateY(0%);
    }           
}
@keyframes shadowmaster {
    0% {
        width: 65%;
        height: 16px;
        border-radius: 50%;
        background: #111;
        box-shadow: 0 0 10px #000;
        
    }
    50% {
        width: 45%;
        border-radius: 50%;
        background: #000;
        box-shadow: 0 0 5px #000  
    }   
    100% {
        width: 65%;
        height: 16px;
        border-radius: 50%;
        background: #111;
        box-shadow: 0 0 10px #000
    }           
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes pulsare{
    0%{
        padding: 0;
        background: rgb(252, 182, 3, .6);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    10%{
        padding: 2px;
        background: rgb(252, 182, 3, .5);
        position: absolute;
        top: -2px;
        left: -2px;
        z-index: -1;
    }
    20%{
        padding: 4px;
        background: rgb(252, 182, 3, .4);
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: -1;
    }
    30%{
        padding: 6px;
        background: rgb(252, 182, 3, .3);
        position: absolute;
        top: -6px;
        left: -6px;
        z-index: -1;
    }
    40%{
        padding: 8px;
        background: rgb(252, 182, 3, .2);
        position: absolute;
        top: -8px;
        left: -8px;
        z-index: -1;
    }
    50%{
        padding: 10px;
        background: rgb(252, 182, 3, .1);
        position: absolute;
        top: -10px;
        left: -10px;
        z-index: -1;
    }
    60%{
        padding: 8px;
        background: rgb(252, 182, 3, .2);
        position: absolute;
        top: -8px;
        left: -8px;
        z-index: -1;
    }
    70%{
        padding: 6px;
        background: rgb(252, 182, 3, .3);
        position: absolute;
        top: -6px;
        left: -6px;
        z-index: -1;
    }
    80%{
        padding: 4px;
        background: rgb(252, 182, 3, .4);
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: -1;
    }
    90%{
        padding: 2px;
        background: rgb(252, 182, 3, .5);
        position: absolute;
        top: -2px;
        left: -2px;
        z-index: -1;
    }
    100%{
        padding: 0;
        background: rgb(252, 182, 3, .6);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

@keyframes loadPages{
    0%{
        position: absolute;
        top: -20px;
        left: -20px;
    }
    4%{
        position: absolute;
        top: -10;
        left: -20px;
    }
    8%{
        position: absolute;
        top: 0;
        left: -20px;
    }
    12%{
        position: absolute;
        top: 10px;
        left: -20px;
    }
    16%{
        position: absolute;
        top: 20px;
        left: -20px;
    }
    20%{
        position: absolute;
        top: 30px;
        left: -20px;
    }
    24%{
        position: absolute;
        top: 40px;
        left: -20px;
    }
    28%{
        position: absolute;
        top: 50px;
        left: -20px;
    }
    32%{
        position: absolute;
        top: 50px;
        left: -10px;
    }
    36%{
        position: absolute;
        top: 50px;
        left: 0;
    }
    40%{
        position: absolute;
        top: 50px;
        left: 20px;
    }
    44%{
        position: absolute;
        top: 50px;
        left: 30px;
    }
    46%{
        position: absolute;
        top: 50px;
        left: 40px;
    }
    50%{
        position: absolute;
        top: 50px;
        left: 50px;
    }
    54%{
        position: absolute;
        top: 40px;
        left: 50px;
    }
    58%{
        position: absolute;
        top: 30px;
        left: 50px;
    }
    62%{
        position: absolute;
        top: 20px;
        left: 50px;
    }
    66%{
        position: absolute;
        top: 10px;
        left: 50px;
    }
    70%{
        position: absolute;
        top: 0;
        left: 50px;
    }
    74%{
        position: absolute;
        top: -10px;
        left: 50px;
    }
    78%{
        position: absolute;
        top: -20px;
        left: 50px;
    }
    82%{
        position: absolute;
        top: -20px;
        left: 40px;
    }
    86%{
        position: absolute;
        top: -20px;
        left: 30px;
    }
    90%{
        position: absolute;
        top: -20px;
        left: 20px;
    }
    94%{
        position: absolute;
        top: -20px;
        left: 10px;
    }
    96%{
        position: absolute;
        top: -20px;
        left: 0;
    }
    100%{
        position: absolute;
        top: -20px;
        left: -10px;
    }
}

@keyframes loadPages2{
    0%{
        position: absolute;
        bottom: -20px;
        right: -20px;
    }
    25%{
        position: absolute;
        bottom: 40px;
        right: -20px;
    }
    50%{
        position: absolute;
        bottom: 40px;
        right: 40px;
    }
    75%{
        position: absolute;
        bottom: -20px;
        right: 40px;
    }
    100%{
        position: absolute;
        bottom: -20px;
        right: -20px;
    }
}