body {
    background: #0e0e0e;
}


/* Header */
.head-top {
    max-width: 1200px;
    margin: 0 auto;
    min-width: 1100px;
}

#menu {
    margin: 15px;
    font-size: 20px;
    color: #d94a4a;
    text-decoration: inherit
}

#menu:hover {
    color: #fff8ea;
}

.head-menu {
    padding: 10px 5px 10px 5px;
    background: #131c1c;
    border-radius: 5px;
    box-shadow: 1px -2px 4px 0px;
    color: #0bcfff;
    border: 5px solid;
}

.head-img {
    padding-top: 120px;
    padding-bottom: 12px;
    max-width: 1200px;
    margin: 8px auto;
}

.active-head-menu {
    background: #a53737;
    padding: 2px 5px 5px 5px;
    border-radius: 3px;
    color: #fbfbfb !important;
    text-decoration: inherit;
}


#head-all {
    float: right;
    color: #98d8e7;
    padding-right: 30px;
}

#head-login {
    font-size: larger;
    font-weight: bold;
}

.logo-header {
    float: right;
    margin: -68px 10px;
}

.banner-img-top {
    width: 941px;
    background: url("/template/img/banner-cs.png") center;
    border: 2px solid  #a53737;
    height: 100px;
    margin: -111px 0 0 127px;
    border-radius: 3px;
}

.pod-name {
    background: #2e34526b;
    height: 100%;
}

.name-site {
    color: #81e568;
    font-size: 40px;
    margin: 14px;
}

.sub-site {
    float: right;
    color: #f3f3f3;
    margin: 22px 671px -13px -14px;
    font-size: 20px;
}


/* Header */






/* Footer */

.footer-site {

    left: 0;
    bottom: 0;
    right: 0;
    padding: 0px;

}


.footer-bottom {
    height: 80px;
    background: #131c1c;
    max-width: 1314px;
    margin: 0 auto;
    border-radius: 4px;
    border: 4px solid #d90505;
    box-shadow: 1px -2px 13px 0px;
    color: #ca0c0c;
    min-width: 1314px;

}

.logo-footer {
    float: right;
    margin-right: 30px;
    margin-top: -47px;
}

.footer-menu {
    margin: 27px 0px 0px 0px;
}

.footer-copyright {
    float: left;
    color: #a1bd9b;
    margin: -20px 0 0 739px;
}

.footer-copyright:hover {
    color: #4f8f11;
}

.href-footer {
    text-decoration: none;

}


/* Footer */


/*  HOME PAGE */







.home-page {
    max-width: 1415px;
    margin: 0 auto;
    height: auto;
}

.slider-contener {
    height: 405px;
    background: url("/template/img/content-slide.jpg") center;
    min-width: 1250px;
    width: 1400px;
    margin: 0 auto;
    border: 3px solid #0995b7;
    border-radius: 4px;
    background-size: 1420px 717px;
    /*transform: scale(1) rotate(3turn);*/
    /*transition-duration: 1000ms;*/
}
.info-contener {
    width: 1400px;
    min-width: 1250px;
    height: 320px;
    background: url("/template/img/info-content.jpg") center;
    margin: 25px 6px;
    background-size: 1410px 800px;
    border: 3px solid #a53737;
    border-radius: 4px;
}

.sub-contener {
    width: 1400px;
    min-width: 1250px;
    height: 400px;
    background: url("/template/img/sub-content.jpg");
    margin: 25px 6px;
    border: 2px solid #81e568;
    border-radius: 4px;
}

/*---1---*/
.slide-one {
    z-index: -1;
    opacity: 0;
    height: 397px;
    width: 440px;
    margin: 1px 0px 0px 2px;
    border: 3px solid #9da7b5;
    transform: translateY(-1500px);
    transition: transform 1s ease-in;
}

.openslideone {
    width: 415px;
    height: 380px;
    background: #111314ab;
    margin: 9px 12px;
    border: 10px;
}

.up-block {
    text-align: center;
    color: antiquewhite;
    font-size: 23px;
    padding-top: 32px;
}

.norm-block {
    color: aliceblue;
    font-size: 19px;
}

.down-block {
    color: aliceblue;
    text-align: center;
    padding: 3px;
    font-size: 20px;
}

.href-one {
    font-size: 21px;
    color: #dbdbdb;
    background: #057e57;
    padding: 0px 5px 2px 5px;
    text-decoration: auto;
    border-radius: 3px;
    float: right;
    margin: 15px 145px 12px;
    border: 2px solid #f0f8f2;
    box-shadow: -1px 0px 8px 1px;
}

.href-one:hover {
    color: #81e568;
    background: #162822;
    border: 2px solid #1a8334;

}


.slide-one-show {
    z-index: 1;
    opacity: 1;
    transform: translateY(0px);
    transition: transform 1s ease-in;
}

.slide-one-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(-1500px);
    transition: transform 1s ease-in;
}

/*---2---*/
.slide-two {
    z-index: -1;
    opacity: 0;
    height: 397px;
    width: 440px;
    border: 3px solid #9da7b5;
    margin: -403px 0 0 477px;
    transform: translateY(-1700px);
    transition: transform 1s ease-in;
}

.openslidetwo {
    width: 415px;
    height: 380px;
    background:#111314ab;
    margin: 9px 12px;
    border: 10px;
}

.slide-two-show {
    z-index: 1;
    opacity: 1;
    transform: translateY(0px);
    transition: transform 1s ease-in;
}

.slide-two-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(-1700px);
    transition: transform 1s ease-in;
}

.href-two {
    font-size: 21px;
    color: #dbdbdb;
    background: #a53737;
    padding: 0px 5px 2px 5px;
    text-decoration: auto;
    border-radius: 3px;
    float: right;
    margin: -46px 166px 12px;
    border: 2px solid #f0f8f2;
    box-shadow: -1px 0px 8px 1px;
}

.href-two:hover {
    color: #eb3838;
    background: #3e1c1c;
    border: 2px solid #b3262c;

}



/*---3---*/

.slide-three {
    z-index: -1;
    opacity: 0;
    height: 397px;
    width: 440px;
    border: 3px solid #9da7b5;
    margin: -403px 0 0 952px;
    transform: translateY(-1900px);
    transition: transform 1s ease-in;
}

.openslidethree {
    width: 415px;
    height: 380px;
    background: #111314ab;
    margin: 9px 12px;
    border: 10px;
}

.slide-three-show {
    z-index: 1;
    opacity: 1;
    transform: translateY(0px);
    transition: transform 1s ease-in;
}

.slide-three-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(-1900px);
    transition: transform 1s ease-in;
}


.href-three {
    font-size: 21px;
    color: #dbdbdb;
    background: #2488a1;
    padding: 0px 5px 2px 5px;
    text-decoration: auto;
    border-radius: 3px;
    float: right;
    margin: -44px 145px 12px;
    border: 2px solid #f0f8f2;
    box-shadow: -1px 0px 8px 1px;
}

.href-three:hover {
    color: #0995b7;
    background: #32565e;
    border: 2px solid #0bcfff;

}



/*-------------info-contener-------------------------*/
/*----1--------------*/
.info-one {
    z-index: -1;
    opacity: 0;
    background: #302e2c9c;
    width: auto;
    height: 100px;
    margin: 2px 2px 2px 2px;
    border: 2px solid #fff;
    transform: translateX(-2000px);
    transition: transform 1s ease-in;
}

.infostringone {
    text-align: center;
    padding: 20px 11px;
    font-size: 50px;
    color: #d1ffe3;
    font-variant: all-small-caps;
}

.info-one-show {
    z-index: 1;
    opacity: 1;
    transform: translateX(0px);
    transition: transform 1s ease-in;
}

.info-one-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(-2000px);
    transition: transform 1s ease-out;
}
/*----2--------------*/
.info-two {
    z-index: -1;
    opacity: 0;
    background: #302e2c9c;
    width: auto;
    height: 100px;
    margin: 2px 2px 2px 2px;
    border: 2px solid #fff;
    transform: translateX(3000px);
    transition: transform 1s ease-in;
}

.infostringtwo {
    text-align: center;
    padding: 20px 11px;
    font-size: 50px;
    color: #d1ffe3;
    font-variant: all-small-caps;
}

.info-two-show {
    z-index: 1;
    opacity: 1;
    transform: translateX(0px);
    transition: transform 1s ease-in;
}

.info-two-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(3000px);
    transition: transform 1s ease-out;
}

/*----2--------------*/
.info-three {
    z-index: -1;
    opacity: 0;
    background: #302e2c9c;
    width: auto;
    height: 100px;
    margin: 2px 2px 2px 2px;
    border: 2px solid #fff;
    transform: translateX(-2000px);
    transition: transform 1s ease-in;
}

.infostringthree {
    text-align: center;
    padding: 20px 11px;
    font-size: 50px;
    color: #d1ffe3;
    font-variant: all-small-caps;
}

.info-three-show {
    z-index: 1;
    opacity: 1;
    transform: translateX(0px);
    transition: transform 1s ease-in;
}

.info-three-hide {
    z-index: 1;
    opacity: 1;
    transform: translateX(-2000px);
    transition: transform 1s ease-out;
}

/*-----------------SUB-CONTENER----------------*/

.end-one {
    background: #355f838a;
    float: left;
    width: 286px;
    margin: 24px 17px 14px 40px;
    height: 354px;
    transform: scale(1);
    animation: pulse 3s ease-in-out;
    border: 2px solid #fff;
}

@keyframes pulse {
    from {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    to {
        transform: scale(1);
    }
}


.in-down-homepage {
    text-align: center;
    color: aliceblue;
    padding: 60px 0;
}

.text-down-homepage {
    padding: 30px 15px;
    font-size: 29px;
}

.href-don-home-page {
    text-decoration: none;
    color: white;
    background: #39a14b;
    padding: 4px 10px 4px 10px;
    line-height: 2;
}

.href-don-home-page:hover {
    background: #4f8f11;
}


/*  HOME PAGE */

/* Profile - Регистрация - Авторизация - Восстановление пароля*/
.profile {
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    border: 3px solid #0bcfff;
    border-radius: 5px;
    padding-bottom: 50px;
    height: 550px;
    box-shadow: 1px -2px 9px 8px;
    color: #a53737;
    margin-bottom: 35px;
}
#submit{
    margin-top: 10px;
    font-size: 17px;
    background: cornflowerblue;
    color: aliceblue;
    border-radius: 3px;
    padding: 3px 5px 3px 5px;
    cursor: pointer;
}

#submit:hover{
    background: blue;
}

#buts {
    font-size: 15px;
    background: #24859d;
    border-radius: 3px;
    height: 32px;
    color: blanchedalmond;
    cursor: pointer;
}

#buts:hover{
    background: red;
}


#show-pas-lab{
    display: inline-block;
    margin-bottom: 10px;
}
input{

    margin-bottom: 7px;
}

.input-profile {
    font-size: 17px;
    border-radius: 3px;
    color: brown;
    border-color: cornflowerblue;
}

.label-profile {
    font-size: 20px;
}

.ok-rules {
    text-decoration: none;
    color: #b7cdc5;
}

/* Profile - Регистрация - Авторизация - Восстановление пароля*/




/*SECTION LK -------------------------------------------------- */
#drop-menu-id {
    position: absolute;
    display: unset;
}

.drop-money {
    background: green;
    color: white;
    margin: 0 0 0 3px;
    padding: 4px 3px 4px 3px;
    border-radius: 3px;
    border: 1px solid #cabd67;
    display: none;
    cursor: pointer;
}

.drop-money:hover {
    background: #2f316b;
}



#balance-up {
    float: right;
    padding: 15px 110px 0 0;
    color: teal;
}

#strong-balance{
    color: chocolate;
    font-size: 17px;
}

#add-money{
    border: 2px #cabd67 solid;
    padding: 3px 3px 3px 3px;
    border-radius: 5px;
    background: #2f316b;
    color: white;
    box-shadow: 1px -2px 2px 3px;
    cursor: pointer;
    margin: 18px;
    line-height: 1.7em;
}
#add-money:hover{
    background: green;
    color: white;
}


.lk-class {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1250px;
    border: 3px solid #15d0ff;
    border-radius: 5px;
    padding-bottom: 66px;
    box-shadow: -3px 4px 11px 6px;
    color: #484c49;
    min-width: 1100px;
}





/* Стиль вкладки */
.but-lk {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Стиль кнопок, которые используются для открытия содержимого вкладки */
.but-lk button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Изменение цвета фона кнопок при наведении курсора */
.but-lk button:hover {
    background-color: #ddd;
}

/* Создание активного/текущего класса связи вкладки */
.but-lk button.active {
    background-color: #a5a5a5;
    color: #12ffe9;
    font-weight: 700;
}


/* Стиль содержимого вкладки */
.tabcontent {
    display: none;
    border: 3px solid #15d0ff;
    float: left;
    padding: 4px 26px 15px 18px;
    border-radius: 5px;
    box-shadow: 1px -2px 9px 8px;
    width: 96%;
    min-width: 960px;
}



.name-page-lk {
    color: #8dc0cd;
}

.name-block {
    color: #cce3c7;
}

/*------------------info-----------------------------*/





.tabl-lk-info-profile {
    margin: 0 auto;
    padding-top: 10px;
}

#tabl-info-border {
    border: 2px solid;
    border-radius: 5px;
    text-align: center;
    float: left;
    padding: 10px 15px 10px 15px;
    margin: 20px 20px 0px 25px;
    background: #174b58;
}

#info-game {
    color: black;
}

.fsock {
text-align: center;
}

.sock-name {
color: khaki;
}

.sock-value {
    font-weight: 600;
    color: palegreen;
}

.tabl-lk-td-one {
    padding: 7px 7px 7px 7px;
    background: #dbdbdb;
}

 .h1 {
    font-size: large;
    color:#e2f0f3;
}

.h2 {

    color: #81e568;
}

.tabl-lk-td-two {
    padding: 7px 7px 7px 7px;

}

.tabl-lk-tr {
    font-size: 20px;
    color: #2a6d87;
    background: #f1f1f1;
    text-align: center;
}

.delete-steamid {
    cursor: pointer;
}
/*------------------info-----------------------------*/


/*------------------edit-----------------------------*/
#tabl-edit-border {
    float: left;
    text-align: inherit;
    border-radius: 5px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    font-size: 19px;
}

.lk-edit {
    font-size: 15px;
    margin: 5px 0px 5px 5px;
    background: brown;
    color: #caf4ff;
    height: 20px;
    font-weight: bolder;
}

.lk-edit-but {
    font-size: 15px;
    background: #1284a1;
    color: beige;
    height: 29px;
    border-radius: 5px;
    cursor: pointer;
}

.lk-edit-but:hover {
   background: #52d285;
}


.label-edit {

    background: #21a32b;
    color: antiquewhite;
    padding: 2px 3px 2px 3px;
    border-radius: 3px;
}

.tabl-create-game {
    color: #d33c3c;
    font-size: 17px;
}

.show-pass {
   color: aquamarine;
}
/*------------------edit-----------------------------*/


/*------------------create-----------------------------*/
#tabl-create-border {
    float: left;
    text-align: inherit;
    border-radius: 5px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    font-size: 19px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}
#create-server-submit {
    background: #d33c3c;
    height: 30px;
    border-radius: 4px;
    color: beige;
    width: 73px;
    cursor: pointer;
}

#create-server-submit:hover{
    background: #2f316b;
}

/*------------------create-----------------------------*/


/*------------------list games-----------------------------*/

#tabl-find-border {
    padding-top: 26px;
    text-align: center;
}

#tabl-next-games {
    border-color: #63c387;
}


#tabl-next-games .games-name {
    background: #52d285;
    color: white;
    font-size: 15px;
    text-align: center;
}

#tabl-real-games {
    border-color: #3265d8b5;
}

#tabl-real-games .games-name {
    background: #5086ff;
    color: white;
    font-size: 15px;
    text-align: center;
}

#tabl-old-games {
    border-color: #d45d2fbd;
}

#tabl-old-games .games-name {
    background: coral;
    color: white;
    font-size: 15px;
    text-align: center;
}



.games-text {
    background: #dde5ec;
    color: #346b6d;
    font-size: 15px;
    text-align: center;
    cursor: pointer;

}

#tabl-next-games .games-text:hover {
    background: #65bb7b;
    color :white;
}

#tabl-real-games .games-text:hover {
    background: #527ad4;
    color :white;
}

#tabl-old-games .games-text:hover {
    background: #e07d58;
    color :white;
}


.list-games-tabl {
    border: 3px solid;
    padding: 2px 2px 2px 2px;
    border-radius: 2px;
    margin-top: 10px;
}

.list-games-tabl td {
    padding: 3px 10px 3px 10px;
}


#but-open-old-games {
    background: coral;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}

#but-open-old-games-close {
    display: none;
    background: coral;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}

.close-tabl-old {
    display: none;
}

.open-tabl-old {
    display: block;

}

#but-open-real-games {
    background: #5086ff;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}

#but-open-real-games-close {
    display: none;
    background: #5086ff;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}

.close-tabl-real {
    display: none;
}

.open-tabl-real {
    display: block;

}

#but-open-next-games {
    background: #65bb7b;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}
#but-open-next-games-close {
    display: none;
    background: #65bb7b;
    color: beige;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
}

.close-tabl-next {
    display: none;
}

.open-tabl-next {
    display: block;

}



/*----------------------------------------Model-window--Open-Info-------------------------------------*/

.modal {}

.modal.open .modal-overley,
.modal.open .modal-window {
    opacity: 1;
    z-index: 1000;
}

.modal.hide .modal-overley,
.modal.hide .modal-window {
    opacity: 1;
    z-index: 1000;
}

.modal.open .modal-window {
    transform: translateY(100px);
}

.modal.open .modal-overley {
    background: rgba(0,0,0, .5)
}

.modal.hide .modal-window {
    transform: translateY(-200px);
}

.modal.hide .modal-overley {
    background: rgba(0,0,0,0)
}

.modal-window, .modal-overley{
    opacity: 0;
    z-index: -1;
}


.modal-overley {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    background: rgba(0,0,0,0);
    transition: background .5s ease-in;
}

.modal-window {
    margin: 0 auto;
    width: 820px;
    background: #121212;
    border-radius: 4px;
    border: 4px solid #642020;
    transform: translateY(-250px);
    transition: transform .5s ease-in;
}

.modal-header {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

.modal-title {
    font-size: 18px;
    color: #dfd08c;
}

.modal-close {
    font-size: 17px;
    cursor: pointer;
    color: darkgoldenrod;
}

.modal-body {
    padding: 10px 5px 25px 5px;
    width: 96%;
    min-height: 97px;
    background: rgb(155 172 193 / 50%);
    margin: 14px auto;
}

.modal-body p {
    margin: 0 0 5px;
}
.modal-footer {
    padding: 30px 10px;
    border-top: 1px solid #eee;
}

.but-modal {
    cursor: pointer;
}

.modal-tr-one {
    background: linen;
}

.modal-tr-two {
    background: beige;
}

.modal-tr-one .modal-tr-two ,td {
    padding: 3px 5px 3px 5px;
}

.modal-in-show {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
    grid-auto-rows: 105px;
    grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
    align-items: start;
}

#modal-maps {
    float: left;  /*-----------------------------------------------*/
    width: auto;
}

.modal-tabl-class-one {
    grid-area: a;
}

.modal-tabl-class-two {
    grid-area: b;
}

.modal-tabl-class-three {
    grid-area: d;
}

#modaldopparam:hover {
    background: #65bb7b;
    color: wheat;
}

#modalmaps:hover{
    background: #65bb7b;
    color: wheat;
}

#join-modal {
    cursor: pointer;
    background: #4f8f11;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#join-modal:hover {
    background: #52d285;
    color: #2f316b;
}

#exit-modal {
    cursor: pointer;
    background: red;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#exit-modal:hover {
    background: #2a6d87;
    color: #fff8ea;
}


.pag-ul {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.pag-li {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
}

.pag-li:hover {
    background: chartreuse;
}

.pag-li.active-li {
    background: chartreuse;
}



/*-------------------------ПАГИНАЦИЯ-----------------------------------*/
.pag-ul-new {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.pag-li-new {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
    color: navy;

}

.pag-li-new:hover {
    background: chartreuse;
}

.pag-li-new.active-li-new {
    background: chartreuse;
}

.up-pag {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}

.up-pag:hover {
  background: #21a32b;
    color: white;
}

.down-pag:hover  {
    background: #21a32b;
    color: white;
}

.down-pag {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}

/*------Общая пагинация ^^^^^*/




.pag-ul-old {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.pag-li-old {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
}

.pag-li-old:hover {
    background: chartreuse;
}

.pag-li-old.active-li-old {
    background: chartreuse;
}

.up-pag-old {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}

.up-pag-old:hover {
    background: #21a32b;
    color: white;
}

.down-pag-old:hover  {
    background: #21a32b;
    color: white;
}

.down-pag-old {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}


/*-----------------------------------------------*/


.pag-ul-real {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.pag-li-real {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
}

.pag-li-real:hover {
    background: chartreuse;
}

.pag-li-real.active-li-real {
    background: chartreuse;
}

.up-pag-real {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}

.up-pag-real:hover {
    background: #21a32b;
    color: white;
}

.down-pag-real:hover  {
    background: #21a32b;
    color: white;
}

.down-pag-real {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}


/*-----------------------------------------------*/


.pag-ul-next {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.pag-li-next {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
}

.pag-li-next:hover {
    background: chartreuse;
}

.pag-li-next.active-li-next {
    background: chartreuse;
}

.up-pag-next {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}

.up-pag-next:hover {
    background: #21a32b;
    color: white;
}

.down-pag-next:hover  {
    background: #21a32b;
    color: white;
}

.down-pag-next {
    border: 2px solid #4aa795;
    border-radius: 3px;
    padding: 2px 3px 2px 3px;
    color: chartreuse;
    cursor: pointer;
    float: right;
}






/*-------------------------ПАГИНАЦИЯ-----------------------------------*/


/*----------------------------------------Model-window--Open-Info-------------------------------------*/

/*----------------------------------------Model-window--DoP PARAM-------------------------------------*/




/*----------------------------------------Model-window--DOP PARAM-------------------------------------*/



/*----------------------------------------Model-window-Join-------------------------------------*/

.modal-join {}

.modal-join.open-join .overley-join,
.modal-join.open-join .window-join {
    opacity: 2;
    z-index: 1001;
}

.modal-join.hide-join .overley-join,
.modal-join.hide-join .window-join {
    opacity: 2;
    z-index: 1001;
}

.modal-join.open-join .window-join {
    transform: translateX(0px);
}

.modal-join.open-join .overley-join {
    background: rgba(0,0,0, .5)
}

.modal-join.hide-join .window-join {
    transform: translateX(-1250px);
}

.modal-join.hide-join .overley-join {
    background: rgba(0,0,0,0)
}

.window-join, .overley-join{
    opacity: 0;
    z-index: -1;
}



.overley-join {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    overflow-x: auto;
    background: #0000007d;
    padding-top: 200px;
}
.window-join {
    margin: 0 auto;
    padding: 10px 10px 10px 10px;
    width: 500px;
    background: aliceblue;
    border-radius: 4px;
    background: #121928;
    border: 4px solid #86bd3c;
    transform: translateX(-1250px);
    transition: transform .5s ease-in;
}

.header-join {
    display: flex;
    padding: 8px 5px;
}

.title-join{
    margin: 0 auto;
}

.close-join {
    cursor: pointer;
    color: antiquewhite;
}

.body-join{
    border: 1px solid #ab9a20;
    padding: 6px 7px 6px 7px;
    border-radius: 5px;
    background: beige;
}

.footer-join{
    padding-top: 10px;
    display: flex;
    justify-content: center;
}

.but-join{
    margin: 0 10px 0px 0px;
    cursor: pointer;
}

.list-steamid {
    border-bottom: 2px solid #8baf34;
    padding: 5px 0px 5px 5px;
    text-align: center;
}



#but-join-ok {
    cursor: pointer;
    background: #4f8f11;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#but-join-ok:hover {
    background: #52d285;
    color: #2f316b;
}

#but-join-cancel {
    cursor: pointer;
    background: red;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#but-join-cancel:hover {
    background: #2a6d87;
    color: #fff8ea;
}





/*----------------------------------------Model-window-Join---------------------------------------*/


.modal-param {}


.modal-param.open-dop .dop-overley,
.modal-param.open-dop .dop-window {
    opacity: 1;
    z-index: 1000;
}

.modal-param.hide-dop .dop-overley,
.modal-param.hide-dop .dop-window {
    opacity: 1;
    z-index: 1000;
}

.modal-param.open-dop  .dop-overley {
    background: rgba(0,0,0, .5)
}

.modal-param.open-dop  .dop-window {
    transform: translatey(0px);
}


.modal-param.hide-dop  .dop-overley {
    background: rgba(0,0,0, 0)
}

.modal-param.hide-dop  .dop-window {
    transform: translatey(1500px);
}

.modal-param .dop-overley {
    opacity: 0;
    z-index: -1;

}

.dop-overley {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    overflow-y: auto;
    background: #00000073;
    padding: 250px;

}

.dop-window {
    margin: 0 auto;
    background: azure;
    width: 500px;
    padding: 10px 10px 10px 10px;
    border: 4px solid #b11f1f;
    border-radius: 4px;
    transform: translateX(1500px);
    transition: transform .8s ease-in;
}

.dop-header {
    display: flex;
    padding: 8px 5px;
    border-bottom: 1px solid #1f1c1c;
    justify-content: center;
}


.dop-title {
    cursor: pointer;
    font-family: cursive;
}

.dop-close {
    cursor: pointer;
}

.dop-body {
    padding: 5px 5px 5px 5px;
    border: 1px solid #000;
    margin: 5px 0 5px 0px;
    border-radius: 3px;

}

.dop-footer {
    border-top: 1px solid #000;
    padding: 7px 5px 5px 5px;
    justify-content: center;
    display: flex;
}

.dop-but-ok {
    cursor: pointer;
}
.dop-but-cancel {
    cursor: pointer;
}


.dop-class {
    padding: 5px 5px 5px 5px;
}

.dop-parm {
    font-size: 17px;
    color: brown;
}




/*------------------list-games-----------------------------*/

/*----PAY----------------------------------------------------*/

.lk-class-pay {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1250px;
    border: 3px solid black;
    border-radius: 5px;
    padding-bottom: 66px;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
    min-width: 1250px;
    height: 500px;
    margin-bottom: 35px;
}

.pay {
    float: left;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 20px 50px 20px 50px;
    margin: 30px;
    max-width: 270px;
}

.payh3 {
    text-align: center;
    color: aliceblue;
}

.pay-form {
    text-align: center;
    color: bisque;
}

.pay-history {
    float: right;
    border: 2px solid #fff;
    padding: 20px 20px 20px 20px;
    margin: 8px 15px;
    border-radius: 4px;
}


.pay-tables {
    border: 1px solid #fff;
    border-radius: 4px;
    margin: auto;
    min-width: 600px;
}

.pay-td-one {
    background: #434c54;
    border-radius: 3px;
    color: snow;

}
.pay-td-two {
    background: #3e564e;
    border-radius: 3px;
    color: blanchedalmond;
}

.pay-td-one-value {
    background: #2c5880;
    border-radius: 3px;
    color: snow;

}
.pay-td-two-value {
    background: #357761;
    border-radius: 3px;
    color: blanchedalmond;
}

.pay-pending{
    background: #909543;
    border-radius: 3px;
    color: blanchedalmond;
}

.pay-canceled{
    background:#b94949;
    border-radius: 3px;
    color: blanchedalmond;
}

.pay-succeeded{
    background: #2d9d2d;
    border-radius: 3px;
    color: blanchedalmond;
}

.pay-notcomplete{
    background: #464643;
    border-radius: 3px;
    color: blanchedalmond;
}

.backpaylk {
    color: #b1ad48;
    text-decoration: none;
    text-align: center;
}

.backpaylk:hover {
    color: lavender;

}

#href-pay {
    text-align: center;
    margin: -50px -15px 0 0;
}

.pay-textlabel {
    color: #71acdf;
    margin: 128px;
}

.img-pay {
    width: 250px;
    padding: 30px 0px 0 0;
}

.backpostpaylk {
    float: right;
    margin: 0 100px 0 0;
}
.backpostpaylka {
    text-decoration: none;
    color: antiquewhite;
    font-size: 18px;
}

.backpostpaylka:hover {
     color: #4f8f11;

}

.pay3 {
    text-align: center;
    color: aliceblue;
}

.op-pay {
    width: 150px;
    padding: 30px;
}

.err-pay {
    width: 120px;
    padding: 30px;
}

.pod-pay {
    width: 200px;
    padding: 30px;
}



/*----PAY----------------------------------------------------*/

/*Take Of----------------------------------------------------*/

.lk-class-takeoff {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1250px;
    border: 3px solid black;
    border-radius: 5px;
    padding-bottom: 66px;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
    min-width: 1100px;
    height: 500px;
    margin-bottom: 35px;
}

.takeh3 {
    color: antiquewhite;
}
.takeoff-textlabel {
    color: #71acdf;
}



.takeoff-class {
    text-align: center;
    margin: 0px 792px 0px 15px;
    border: 2px solid #b9997b;
    border-radius: 5px;
}

.takeoff-info {
    text-align: center;
    margin: -366px 15px 0 505px;
    border: 2px solid #b9997b;
    border-radius: 5px;
    height: 362px;
}

.takeoff-tables {
    border: 1px solid #fff;
    border-radius: 4px;
    margin: auto;
}

.takeoff-td-one {
    background: #434c54;
    border-radius: 3px;
    color: snow;

}
.takeoff-td-two {
    background: #3e564e;
    border-radius: 3px;
    color: blanchedalmond;
}

.takeoff-td-one-value {
    background: #2c5880;
    border-radius: 3px;
    color: snow;

}
.takeoff-td-two-value {
    background: #357761;
    border-radius: 3px;
    color: blanchedalmond;
}

.backlk {
    float: right;
    margin-right: 24px;
    text-decoration: none;
    color: #5b8b8d;
    font-weight: 700;
}







/*Take Of----------------------------------------------------*/


/* SECTION LK ---------------------------------------------*/



/* SECTION LIST SERVER */
.listservers-class {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    min-width: 1200px;
    border: 3px solid;
    border-radius: 5px;
    border-color: #8c9353;
    padding-bottom: 50px;
    height: 550px;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
    margin-bottom: 35px;
}

.listserverstabl {
    text-align: center;
    border: 2px solid #0bcfff;
    border-radius: 5px;
    margin: 0 auto;
    background: azure;
}

.listservers-name {
    background: #34347c;
    color: cornsilk;
}

.listservers-value {
    cursor: pointer;
}


/*.listservers-td-one {*/
/*    background: #8d3d3d;*/
/*    color: cornsilk;*/
/*}*/

/*.listservers-td-two {*/
/*    background: #34347c;*/
/*    color: cornsilk;*/
/*}*/

.class-next {
    background: #5e3d7c;
    color: cornsilk;
}

.class-old {
    background: #1a2c3c;
    color: cornsilk;
}

.class-real {
    background: #285c4b;
    color: cornsilk;
}


.class-next:hover {
    background: #6f0fc7;
    color: cornsilk;
}

.class-old:hover {
    background: #0063bb;
    color: cornsilk;
}

.class-real:hover {
    background: #1ac38b;
    color: cornsilk;
}



.list {
    text-align: center;
    color: antiquewhite;
}

#load {
    width: 70px;
    margin: -135px 0px 0px 560px;
    position: fixed;
    display: unset;

}

/*-----Modal ListServer---------*/

.modal-server {}

.modal-server.show-server .overlay-server,
.modal-server.show-server .window-server {
    opacity: 1;
    z-index: 1000;
}

.modal-server.hide-server .overlay-server,
.modal-server.hide-server .window-server {
    opacity: 1;
    z-index: 1000;
}


.modal-server.show-server  .window-server {
    transform: scale(1.1) rotate(3turn);
}


.modal-server.hide-server  .window-server {
    transform: scale(0) rotate(0turn);
}


.modal-server .overlay-server  {
    opacity: 0;
    z-index: -1;
}

.overlay-server {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    background: #000000a6;
    padding: 180px;
}

.window-server {
    margin: 0 auto;
    width: 820px;
    background: #000000;
    border: 2px solid #bb4040;
    border-radius: 4px;
    transform: scale(0) rotate(3turn);
    transition-duration: 1000ms;

}

.header-server {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #777;
    padding: 5px;
}

.title-server {
    color: antiquewhite;
}

.title-close-server {
    cursor: pointer;
    color: antiquewhite;
}

.body-server {
    background: #282825;
}

.footer-server {
    padding: 30px 10px;
    border-top: 1px solid #777;
}

.ok-server-but {
    cursor: pointer;
}

.close-server-but {
    cursor: pointer;
}

#okserverbut{
    cursor: pointer;
    background: #4f8f11;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#okserverbut:hover {
    background: #52d285;
    color: #2f316b;
}

#closeserverbut {
    cursor: pointer;
    background: red;
    color: antiquewhite;
    height: 30px;
    border-radius: 4px;
}

#closeserverbut:hover {
    background: #2a6d87;
    color: #fff8ea;
}



/*-----Modal ListServer---------*/


.pag-php{
    display: none;
}

.show-pag {
    display: initial;
    height: 24px;
    background: #0e0e0e;
    color: #f3dcbe;
    border: 2px solid;
    cursor: pointer;
}
.show-pag:hover {
    color: #00cdff;
}





/* SECTION LIST SERVER */

/*-----Pagination---------*/

.div-pagination {
    text-align: center;
    position: absolute;
    top: 0;
    margin: 785px 0 0 600px;
}

.a-pagination {
    display: unset;
    color: #e5c9a8;
    border: 2px solid #f3dcbe ;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
}

.a-pagination:hover {
    color: #00cdff;
    border-color: #00cdff;

}

.pag-hover {
    color: #00cdff;
    border-color: #00cdff;
}

/*-----Pagination---------*/

/* SECTION STAT */
.stat-class {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    border: 3px solid;
    border-radius: 5px;
    border-color: #8c9353;
    padding-bottom: 50px;
    height: 550px;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
}
/* SECTION STAT */



/* SECTION RULES */
.rules-class {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    min-width: 1200px;
    border: 3px solid;
    border-radius: 5px;
    border-color: #8c9353;
    padding-bottom: 50px;
    height: auto;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
    margin-bottom: 35px;
}

.rules-h3 {
    text-align: center;
    color: aliceblue;
}

.rules-settigs {
    color: #baddc3;
    padding: 0 39px 0 39px;
    font-size: 16px;
}

.rules-sub {
   text-align: center;
    font-family: sans-serif;
}

.rules-span {
    font-family: sans-serif;
}

/* SECTION RULES */

/* SECTION 404 */
.class-404 {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    border: 3px solid;
    border-radius: 5px;
    border-color: #8c9353;
    padding-bottom: 50px;
    height: 550px;
    box-shadow: 1px -2px 9px 8px;
    color: #0bcfff;
}
.sub-404 {
    padding: 172px;
    color: teal;
    font-size: 27px;
}

/* SECTION 404 */




/* SIDEBAR */
.sidebar {
    float: left;
    background: #ffebcd;
    height: 620px;
    width: 315px;
    border-radius: 5px;
    border: 3px solid #ffe4c4;
    box-shadow: 1px -2px 9px 8px;
    color: darkgray;
}
/* SIDEBAR */

/*-------------------ADMIN-MENU-------------------------------*/

/* ADMINBAR */

.adminbar {
    background: #000000;
    border: 3px solid #0bcfff;
    height: 840px;
    float: left;
    width: 222px;
    border-radius: 5px;
    margin-top: -174px;
    transform:  translateX(0px);
    transition: transform .5s ease-in;
}

.adminbar-open   {

    transform:  translateX(0px);
}

.adminbar-hide  {

    transform:  translateX(-230px);
}


.knopka {
    margin: 105px 0 0 240px;
    border: 3px solid #147a99;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.knopka:hover {
    border: 3px solid #4aa795;
}

.knopka-span:hover {
    border: 3px solid #4aa795;
}


.knopka-span {
    display: block;
    width: 83%;
    border: 2px solid #0373a9;
    margin-top: 3px;
}

.string-adminbar {
    text-align: center;

    padding-top: 5px;
    padding-bottom: 7px;
    font-family: cursive;
}

.string-adminbar:hover {
    color: #52d285;
}


.string-adminbar-exit {
    text-align: center;
    padding-top: 20px;
}

.string-adminbar-exit {
 color: #a74242;
}

.string-adminbar-exit:hover{
    color: #8baf34;
}

.href-a {
    color: #38b570;
    text-decoration: inherit
}

.href-a:hover {
    color: antiquewhite;
}
.adminbar-text-highlighted {
    color: #ffffff;
    text-decoration: inherit;
    background: #a53737;
    padding: 0px 6px 2px 6px;
    border-radius: 3px;
}


.razdelbar {
    color: #dfdf25;
    display: flex;
    padding-left: 10px;
    margin-bottom: 10px;
    font-family: cursive;
    cursor: pointer;
}



.razdelbar-game {
    color: #dfdf25;
    display: flex;
    padding-left: 10px;
    margin-bottom: 10px;
    font-family: cursive;
    cursor: pointer;
}

.razdelbar-service {
    color: #dfdf25;
    display: flex;
    padding-left: 10px;
    margin-bottom: 10px;
    font-family: cursive;
    cursor: pointer;
}

#users{
    display: none;
}

.plus-bar-users {
    padding: 0px 0px 0px 73px;
    transform: rotate(0deg);
}

.plus-bar-users-open {
    transform: rotate(92deg);
    transition: transform .7s ease-in;
    padding: 0px 0px 0px 45px;
    width: 76px;
    height: 30px;
}

.plus-bar-users-close {
    transform: rotate(0deg);
    transition: transform .7s ease-out;
    padding: 0px 0px 0px 73px;
}


#games{
    display: none;
}

.plus-bar-games {
    padding: 0px 0px 0px 142px;
    transform: rotate(0deg);
}

.plus-bar-games-open {
    transform: rotate(92deg);
    transition: transform .7s ease-in;
    padding: 0px 88px 0px 89px;
    width: 76px;
    height: 30px;
}

.plus-bar-games-close {
    transform: rotate(0deg);
    transition: transform .7s ease-out;
    padding: 0px 0px 0px 142px;
}


#services{
    display: none;
}

.plus-bar-services {
    padding: 0px 0px 0px 115px;
    transform: rotate(0deg);
}

.plus-bar-services-open {
    transform: rotate(92deg);
    transition: transform .7s ease-in;
    padding: 0px 88px 0px 89px;
    width: 76px;
    height: 30px;
}

.plus-bar-services-close {
    transform: rotate(0deg);
    transition: transform .7s ease-out;
    padding: 0px 0px 0px 115px;
}


/*----------------MONITORING---------*/


#dopsubparam {
    color: #dfdf25;
    display: flex;
    font-family: cursive;
    cursor: pointer;
    padding: 20px 0px 0 10px;
}

#dopsub {
    text-align: center;
    padding-top: 20px;
}


.openmonitoring {
    cursor: pointer;
    width: 101px;
    height: 28px;
    background: #2c5880;
    color: antiquewhite;
}

.openmonitoring:hover {
    background: #a53737;
}


/*---------------------------------------Monitoring-Modal-----------------------------*/

.modal-monitoring {}


.modal-monitoring.monitoring-show .monitoring-overlay,
.modal-monitoring.monitoring-show .monitoring-window {
    opacity: 1;
    z-index: 1000;
}

.modal-monitoring.monitoring-hide .monitoring-overlay,
.modal-monitoring.monitoring-hide .monitoring-window {
    opacity: 1;
    z-index: 1000;
}

.modal-monitoring.monitoring-show .monitoring-window{
    transition: opacity 1s, visibility 0s;
}

.modal-monitoring.monitoring-hide .monitoring-window{
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;

}


.modal-monitoring.monitoring-show .monitoring-overlay{
    background: #1b1d1ec4;
    transition: opacity 1s, visibility 0s;
}

.modal-monitoring.monitoring-hide .monitoring-overlay{
    background: #1b1d1e12;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;
}


.monitoring-overlay, .monitoring-window {
    opacity: 0;
    z-index: -1;
}


.monitoring-overlay {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1b1d1eb3;
    position: fixed;
    overflow: auto;
    padding-top: 130px;

}

.monitoring-window {
    margin: 0 auto;
    background: #212324;
    width: 800px;
    border: 2px
    solid #f50606;
    border-radius: 5px;

}

.monitoring-header {
    padding: 10px;
    justify-content: space-between;
    display: flex;
    border-bottom: 1px solid #e13333;
    color: antiquewhite;
}
.monitoring-close {
    cursor: pointer;
}


.monitoring-body {

}

#tablesmonitoringid {
    margin: 0 auto;
    color: aliceblue;
}

.tr-monitoring-name {
    background: cadetblue;
}

.tr-monitoring-value {
    background: slategrey;
}



.monitoring-footer {
    border-top: 1px
    solid #a93131;
    padding: 10px;
}

.monitoring-but-clear {
    cursor: pointer;
}

.monitoring-but-close {
    cursor: pointer;
}


/*------------Monitoring-Pagination---------------------*/

.ul-pag {
    list-style-type: none;
    float: right;
    margin: 0 auto;
    padding-right: 20px;
    display: flex;
}
.li-pag {
    border: 2px solid #4aa795;
    padding: 2px 4px 2px 4px;
    border-radius: 3px;
    background: powderblue;
    color: currentColor;
    cursor: pointer;
    margin: 0px 4px 2px 4px;
    color: navy;

}

.li-pag:hover {
    background: chartreuse;
}

.li-pag.active-li-pag {
    background: chartreuse;
}




/*------------Monitoring-Pagination---------------------*/


/*---------------------------------------Monitoring-Modal-----------------------------*/



/*----------------MONITORING---------*/



/* ADMINBAR */
/*-------------------ADMIN-MENU-INDEX------------------------------*/
.admin-body {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1200px;
    min-width: 1130px;
    border: 3px solid #dd1313;
    border-radius: 5px;
    padding-bottom: 50px;
    height: 600px;
    box-shadow: 1px -2px 9px 8px;
    color: #dd1313;
    background: #0e0e0e;
    margin-bottom: 45px;
}

.info-balance-admin {
    padding: 10px 0px 0px 15px;
    color: #af1212;
}

.balancetabl {
    border: 1px solid #962626;
    padding: 4px 5px 5px 5px;
}

.balance-td-one {
    background: azure;
    font-weight: 700;
}

.balance-td-two {
    background: honeydew;
    font-weight: 700;
}

.win-user {
    text-align: -webkit-center;
}

.win-tables {
    border: 1px solid #9fa903;
    border-radius: 4px;
    color: blanchedalmond;
}

.winuser-td-one {
    background: darkblue;
}

.winuser-td-two {
    background: midnightblue;
}

.winuser-td-one-value {
    background: #4545af;
}

.winuser-td-two-value {
    background: #6f4fbd;
}


.console {
    color: #6262e7;
}


#takebalanceid {
    cursor: pointer;
}


#takebalanceid:hover {
    background: black;
    color: white;
}


/* ADMIN USERLIST */

.list-users {
    float: left;
    padding-top: 20px;
    padding-left: 15px;
}

.list-users-tabl {
    border-top: 2px solid #c71313;
    border-bottom: 2px solid #c71313;
    margin: 5px 5px 5px 5px;
    background: #0bcfff;
    text-align: center;
    min-width: 880px;
}

.list-users-tr {
    font-family: sans-serif;
    color: #c5d77f;
}

.list-users-tr-name {
    font-family: fantasy;
    color: #80d1f7;
}

.userlist {
    color: brown;
    float: left;
}

.userlist-create {
    color: brown;
}

.list-users-td-one {
    background: #000000;
    border-right: 1px solid #bd9b4f;
    border-left: 1px solid #bd9b4f;
    margin: 3px 3px 3px 3px;
}

.list-users-td-two {
    border-right: 1px solid #9fa903;
    border-left: 1px solid #9fa903;
    margin: 3px 3px 3px 3px;
    background: #000000;

}

.adduser {
    margin: 0 auto;
    text-align: center;
    padding-right: 68px;
    padding-top: 40px;
}

.finduser {
    float: right;
    margin: 0px 3px 0px 0px;

}
.text-find {
    color: darkmagenta;
    font-size: larger;
}

/* ADMIN USERLIST */




/* ADMIN USER */

.info-user {
    display: grid;
    grid-template-columns: repeat(7, 2fr);
    grid-gap: 7px;
    grid-auto-rows: 73px;
    grid-template-areas:
    "a a a a a  b b b b b "
    "a a a a a  b b b b b "
    "c c c c c  d d d d d "
    "c c c c c  d d d d d "
    "e e e e e  f f f f f"
    "e e e e e  f f f f f"
    "g g g g g  j j j j j"
    "g g g g g  j j j j j";
    align-items: normal;
}

.stat-user {
    grid-area: a;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    width: 400px;
    border-radius: 4px;
}

.class-balance {
    grid-area: d;
    width: 200px;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    border-radius: 4px;
}

.edit-user {
    text-decoration: none;
    color: #bd2626;
}

.edit-user:hover {
color: #65bb7b;
}

.edit-user-block {
    grid-area: c;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    width: 400px;
    border-radius: 4px;
}

.edit-user-spec {
    grid-area: e;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    width: 450px;
    border-radius: 4px;
}

.mail-out {
    grid-area: g;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    width: 450px;
    border-radius: 4px;
}

.messge {
    grid-area: b;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    width: 450px;
    border-radius: 4px;
}

.edit-user-steamid {
    grid-area: f;
    margin: 5px 0px 0 15px;
    padding: 5px 5px 5px 5px;
    background: #5f9ea0ad;
    width: 450px;
    border-radius: 4px;
    height: 300px;
}
.adduser-label{
    color: cadetblue;
}

.user-edit-add {
    padding: 0;
    margin: 0;
    width: 70px;
    height: 21px;
}

.user-edit-key {
    font-family: sans-serif;
    color: cornsilk;
    background: repeating-linear-gradient(
            45deg, black, #00000038 100px);
    padding: 4px 9px 4px 4px;
    border-right: 2px solid #c17979;
    border-left: 2px solid #c17979;
    line-height: 1.8em;
}

.user-edit-value {
    font-family: emoji;
    font-weight: bold;
    color: #ab6a6a;
    background: cornsilk;
    padding: 4px 9px 4px 4px;
    border-right: 2px solid #c17979;
    border-left: 2px solid #c17979
}

.update {
    background: #bdaaaa;
    width: 80px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    color: #fbfbfb;
    float: right;
}
.update:hover{
    background: #cabd67;
    color: #1f1c1c;
}

.update-balance {
    background: #bdaaaa;
    width: 80px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    color: #fbfbfb;
}

.update-balance:hover{
    background: #cabd67;
    color: #1f1c1c;
}

.input-user {
    background: white;
    border-radius: 3px;
    border-color: cadetblue;
}


.tr-steamid-user {
    color: aliceblue;
    font-size: larger;
    background: black;
}

.tr-steamid-user-name {
    color: aliceblue;
    font-size: larger;
    background: black;
}

#del-steamid-user {
    text-align: -webkit-center;
    padding-top: 12px;
}

.msf-error {
    font-family: system-ui;
}

.footer-list-steamid {
    position: static;
    border-top: 2px solid #fef8db;
    display: flex;
    padding: 5px 0 0 0;
    margin-top: 5px;
}


.steamid-block {
    cursor: pointer;
}

.steamid-block:hover {
   color: #1f1c1c;
    background: #9fa903;
}

.delsteamid{
    cursor: pointer;
}

.delsteamid:hover {
    color: white;
    background: red;
}

/* ADMIN USER */



/* ADMIN TAKEOFF */

.takeoff-admin {
    text-align: center;
}

.success-ok {
    cursor: pointer;
}

.success-ok:hover {
    background: #52d285;
    color: snow;
}

.collection-success {
    cursor: pointer;
}


/* ADMIN TAKEOFF */


/* ADMIN PAY */

.pay-text-empty-info {
    text-align: center;
    font-size: 17px;
    color: aquamarine;
}

.pay-tables.pa-tables-admin {

}

.pay-class {
    cursor: pointer;
}


/* ADMIN PAY */