/*   
Theme Name: dicecon-theme
Version: 1.0
Author: PaulOats
Author URI: http://www.web-oats.com/
*/


@font-face {
    font-family: "KyivType";
    src: url("/site/templates/fonts/KyivType/OTF/KyivTypeSans-Regular.otf");
    font-weight: 400;
	font-display: swap;
}
@font-face {
    font-family: "KyivType";
    src: url("/site/templates/fonts/KyivType/OTF/KyivTypeSans-Medium.otf");
    font-weight: 500;
	font-display: swap;
}
@font-face {
    font-family: "KyivType";
    src: url("/site/templates/fonts/KyivType/OTF/KyivTypeSans-Black.otf");
    font-weight: bold;
	font-display: swap;
}
 

/*-------------------------------------------------------------------------*/
/*	1.	Browser Reset + Font Face
/*-------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend{vertical-align:baseline; font-family:inherit; font-weight:inherit; font-style:inherit; font-size:100%; outline:0; padding:0; margin:0; border:0}
*{scroll-behavior: smooth;}

:focus{outline:0} 
em{font-style: italic; font-size: 120%;}
input[type=submit]{appearance:none}

html{text-rendering: optimizeLegibility;max-width:  100%; overflow-x:hidden; overflow-y: auto;}

body{max-width:  100%; background:white; font-family:'Open Sans',sans-serif; color:#676767; position:relative; min-height: 100vh;display: flex;flex-flow: column nowrap;}

ol, ul{list-style:none}

input[type=text]::-ms-clear{    display:none}

sup{font-size:10px; vertical-align:super}

sub{font-size:10px; vertical-align:sub}
.textCenter{text-align: center;}
p:empty{display:none}
a{text-decoration: none;cursor: pointer; display: block;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{    display:block}
.divider{flex: 1;}

.flex{
	display: flex;
}
.flexColumn{
    flex-flow: column nowrap;
}

.mt_32{
    margin-top: 32px;
}
.mt_64{
    margin-top: 64px;
}
.gap{
    gap: 32px;
}

.grid{
    display: grid;
}
.col-1{
    grid-template-columns: repeat(1, 1fr);
}
.col-2{
    grid-template-columns: repeat(2, 1fr);
}
.col-3{
    grid-template-columns: repeat(3, 1fr);
}
.col-4{
    grid-template-columns: repeat(4, 1fr);
}

.games_list.col-4{
    grid-template-columns: 1fr .5fr .5fr 1fr 1fr;
}
.col-5{
    grid-template-columns: repeat(5, 1fr);
}
.col-6{
    grid-template-columns: repeat(6, 1fr);
}
.col-7{
    grid-template-columns: repeat(7, 1fr);
}
.col-8{
    grid-template-columns: repeat(8, 1fr);
}
.col-9{
    grid-template-columns: repeat(9, 1fr);
}
.col-10{
    grid-template-columns: repeat(10, 1fr);
}
.col-11{
    grid-template-columns: repeat(11, 1fr);
}

.filter.col-2{
    grid-template-columns: 266px 1fr;
    margin: 0 0 32px;
}

.breadcrumbs {padding: 0 0 32px;}
.breadcrumbs ol{padding: 0; margin: 0; display: block;}
.breadcrumbs ol li a, .breadcrumbs ol li{display: inline; color: var(--white);}
.breadcrumbs ol li a:hover{text-decoration: underline;}

.alignCenter{
    align-items: center;
}
.justifyCenter{
    justify-content: center;
}
.justifyBetween{
    justify-content: space-between;
}
.justifyStart{
    justify-content: baseline;
}


.errors,
.success{
    padding: 16px;
    border-radius: 10px;
    border: 2px solid var(--blue);
    font-weight: bold;
    font-size: 24px !important;
}
.errors{
    border-color: var(--yellow);
}

p.edit{
    z-index: 100000;
    font-size: 14px;
    background-color: #1e2835;
    padding: 16px;
    position: fixed;
    width: 100%;
}
p.edit a{
    margin: 0 32px 0 0;
    color: var(--white);
}

body:not(.home) section.content{
    padding: 200px 0 40px;
}

.h1,
body:not(.home) section.content h1{
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 18px;
}

.form__block p a{
    display: inline;
    color: #fff;
    text-decoration: underline;
}



.form__block p,
#register label p,
.game__wrap .game .text p,
body:not(.home) section.content p{
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 8px;
    font-family: Arial, Helvetica, SANS-SERIF;
}

body:not(.home) section.content h4{
    font-size: 24px;
    font-family: Arial, Helvetica, SANS-SERIF;
    font-weight: bold;
    margin: 16px 8px;
}


body:not(.home) section.content ol{
    list-style: number;
    font-family: Arial, Helvetica, SANS-SERIF;
}

.tickets__buy_button .tickets__buy_button__wrap button{
    appearance: none;
    background-image: url(/wp-content/uploads/2023/07/button_sprites.svg);
    border: unset;
    min-height: 176px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 0;
    color: var(--white);
    font-size: 48px;
    background-color: var(--light-text);
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
}
.tickets__buy_button button:hover{
    background-position: center -176px;
}

.tickets__buy_button button:focus{
    background-position: center -352px;
}

/* #content > .container > .row{
    min-height: 40vh;
} */

.table{
    margin: 0 0 100px;
    border: solid 2px #000;
    border-radius: 5px;
    background-color: #fff;
}

.table .table__masters{
    font-size: 18px;
    padding: 16px 64px;
}
.table .table__masters:not(:last-of-type){
    border-bottom: 2px solid #000;
}

#content{
    min-height: calc(100vh - 350px);
}

.table > .grid.col-6{
    grid-template-columns: auto 1fr 1fr 1fr 1fr 1fr 30px;
    column-gap: 32px;
}


.table > .table__masters.grid.col-6{
    grid-template-columns: 50px 1fr 200px 200px 30px 50px;
    column-gap: 16px;
    align-items: center;
    width: calc(100% - 48px);
    padding: 32px 24px;
}





.button.userSubmit{
    appearance: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--blue);
    color: white;
}

.button_open{
    width: 50px;
    height: 50px;
    background-color: var(--white);
    border: 2px solid var(--blue);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
}
.button_open::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    border-top: 2px solid var(--blue);
    border-right: 2px solid var(--blue);
    transform: translate(-50%, -50%) rotate(45deg);
}

.table__masters.open .button_open::after{
    transform: translate(-50%, -50%) rotate(135deg);
}

.full__info{
    display: none;
    grid-column: 1 / 7;
}
.table__masters.open .full__info{
    display: block;
}
/* Spinner Animation */
.loader {
    width: 20px;
    height: 20px;
    position: relative;
}
.spinner {
    visibility: hidden;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .spinner.active{
    visibility: visible;
  }




.games {
    padding: 0;
    column-gap: 32px;
}

.games_bg {
    background: url(/wp-content/uploads/2023/08/2206_w026_n002_2125b_p1_2125-1.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.game .image__wrap {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--white);
    height: max-content;
    margin: 0 0 16px;
}

.game .image__wrap img[src=""] {
    visibility: hidden;
}

.game__wrap{
    column-gap: 30px;
}

.img__wrap{
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
}
.img__wrap img{
    display: block;
    width: 100%;
    height: auto;
    transition: all .4s;
}
.img__wrap img:hover{
    transform: scale(1.05);
}

body.login-page .content .game,
body.page-games .content:not(.single_game) .game {
    /* grid-template-columns: 18vw; */
    width: 18vw;
    column-gap: 80px;
    backdrop-filter: blur(16px);
    border-radius: 10px;
    box-shadow: inset 0px 0px 2px #fff;
    padding: 30px 40px;
    margin: 0 0 56px;
    color: var(--white);
    background-color: rgba(0, 0, 0, .5);
}

body.login-page .content .game{
    width: auto;
}


.content.single_game .game {
    grid-template-columns: 18vw 1fr;
    column-gap: 80px;
    backdrop-filter: blur(16px);
    border-radius: 10px;
    box-shadow: inset 0px 0px 2px #fff;
    padding: 30px 40px;
    margin: 0 0 56px;
    color: var(--white);
    background-color: rgba(0, 0, 0, .5);
}

.games .name{
    margin: 0 16px 0 0;
    max-width: 250px;
}


.games .name h2,
.game h2 {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0 0 32px;
}



.btn,
#game_form_submit,
#newgame_form_submit,
.game .comfirm__button {
    color: #000;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
    /* max-width: 130px; */
    text-align: center;
    overflow: hidden;
    position: relative;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 22px 32px;
    border: none;
    max-width: 320px;
    margin: 32px 0 0;
    background-color: var(--white);
}


.game .comfirm__button{
    color: #000;
    background-color: transparent;
    border-radius: 10px;
    cursor: pointer;
    /* max-width: 130px; */
    text-align: center;
    overflow: hidden;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0px 12px;
    min-width: 160px;
    min-height: 70px;
    border: none;
    max-width: 320px;
    margin: 32px 0 0;
    background-color: var(--white);
}

.game .comfirm__button > svg{
    margin-right: 8px;
}

.btn{
    font-size: 18px;
    font-weight: 500;
    padding: 8px 12px;
    border: 1px solid var(--black);
}

.game .comfirm__button[type="submit"]{
    max-width: unset; 
}

.game .comfirm__button::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
}

#game_form_submit,
#newgame_form_submit{
    background-color: var(--yellow);
}

.game  h3{
    margin: 0 0 4px;
}
body:not(.home) section.content .game p.description{
    font-size: 18px;
    line-height: 1.5;
    display: block;
    margin: 0 0 32px;
}

body:not(.home) section.content .game p.description.clean{
    white-space: pre-wrap;
}

.systemName{
    margin: 0 0 16px;
    row-gap: 12px;
}

.systemName strong{
    font-size: 24px;
}

.filter.col-2.grid label{
    color: #fff;
    margin: 0 0 18px;
}

.filter.col-2.grid label,
.systemName span{
    font-size: 18px;
}

.game__wrap .buy__price{
    row-gap: 12px;
}

.unpub{
    text-decoration: line-through;
}

.games .name h2{
    position: sticky;
    color: var(--white);
    top: 200px;
}

.games .name h2 span{
    font-weight: normal;
}

.container.games{
    max-width: 90vw;
}

.info h3{
    margin: 0 30px 0 0;
}

.disabled{
    opacity: .3;
}

.game_register input,
.game_register h3{
    margin: 0 0 16px;
}
.game_register input {
    padding: 12px 8px;
    max-width: 300px;
    width: calc(100% - 20px);
}

.message{
    backdrop-filter: blur(16px);
    border-radius: 10px;
    box-shadow: inset 0px 0px 2px #fff;
    padding: 30px 40px;
    margin: 0 0 56px;
    color: var(--white);
    background-color: rgba(0, 0, 0, .5);
    
}
body:not(.home) section.content .message p{
    font-size: 18px;
}

.menu__swither{
    height: 38px;
    width: 58px;
    position: relative;
    margin: 0 0 0 50px;
    cursor: pointer;
}

.menu__swither span{
    width: 100%;
    height: 4px;
    display: block;
    background-color: var(--white);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    border-radius: 4px;
    transition: all .4s;
}

.menu__swither::selection,
.menu__swither span::selection{
    background-color: transparent;
}

.menu__swither span:nth-of-type(1){
    width: 42px;
    top: 0;
    transform: translate(0, 0);
}
.menu__swither span:nth-of-type(3){
    width: 42px;
    top: 100%;
    transform: translate(0, -100%);
}
.mobileOpen .menu__swither span{
    width: 0;
}

.mobileOpen .menu__swither span:nth-of-type(3),
.mobileOpen .menu__swither span:nth-of-type(1){
    top: 50%;
    width: 42px;
    transform: translate(0, -50%) rotate(45deg);
}
.mobileOpen .menu__swither span:nth-of-type(3){
    transform: translate(0, -50%) rotate(135deg);
}

.mobileOpen .header__main_menu {
    display: block;
    backdrop-filter: blur(8px);
    background-color: rgba(0,0,0,.8);
}

.header__menu  li.menu_item.top_menu_item ul.submenu li a,
.header__menu  li.menu_item.top_menu_item > a{
    font-style: normal;
    font-size: 24px;
    color: var(--white);
    margin: 0 0 20px;
    display: inline-block;
    font-weight: bold;
}

.header__menu  li.menu_item.has_children > a:hover,
.menu__phone a:hover{
    color: var(--white);
}

body.reg-page .game{
    color: #fff;
}

.header__menu.grid{
    column-gap: 32px;
    row-gap: 32px;
    grid-column: 1 / 10;
}
.header__menu__side {
    grid-column: 10 / 13;
}
.header__menu__side a.button{
    min-height: unset;
    height: 60px;
}

.header__main_menu {
    display: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(0);
    z-index: 20;
    background-color: transparent;
}
.mobileOpen .header__main_menu {
    display: block;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, .8);
    z-index: 111;
}

.header__main_menu {
    padding: 250px 0 0;
    position: fixed;
}

.header__menu li.menu_item.has_children.top_menu_item ul.submenu li a {
    font-weight: 400;
    font-size: 20px;
    margin: 0 0 16px;
}

.container.loginForm{
    padding: 200px 0 0;
    max-width: 50vw;
}
.loginForm h1{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 32px;
}

.loginForm form{
    padding: 12px 74px;
}

.mobile__only{
    display: none;
}
.game.grid.lastcall::after,
.game.grid.soldout::after{
    content: 'ВСІ МІСЦЯ ЗАЙНЯТІ';
    padding: 8px 16px;
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--white);
    color: var(--black);
    border-radius: 10px;
    font-weight: bold;
}

.game.grid.lastcall::after{
    content: 'ЗАЛИШИЛОСЬ 1 МІСЦЕ';
}

.playerName{
    font-size: 20px;
}
.playerDelete{
    cursor: pointer;
}
.playerDelete:hover{
    text-decoration: underline;
}

.loginForm form span{
    font-size: 24px;
}

.loginForm form textarea,
.loginForm form span,
.loginForm form input{
    margin: 0 0 16px;
}
.loginForm form textarea,
.loginForm form input{
    padding: 8px;
}

.loginForm form textarea{
    resize: none;
}


.page-personal h2,
.page-personal h1,
.page-personal .games__wrap h2,
.administrator-page .games__wrap h2{
    color: var(--black);
    font-size: 32px;
    font-weight: bold;
    padding: 8px 0;
    margin: 0 0 32px;
}


.page-personal .name h4,
.page-personal .day__wrap.grid.col-1 .grid,
.administrator-page .name h4,
.administrator-page .day__wrap.grid.col-1 .grid {
    padding: 12px 32px;
}


.page-personal .day__wrap.grid.col-1 .grid,
.administrator-page .day__wrap.grid.col-1 .grid {
    background-color: var(--white);
}

.page-personal .day__wrap.grid.col-1 .grid:not(:last-of-type),
.administrator-page .day__wrap.grid.col-1 .grid:not(:last-of-type) {
    border-bottom: 2px solid var(--black);
}


.page-personal .day__wrap.grid.col-1 .grid h4,
.page-personal .name h4,
.administrator-page .day__wrap.grid.col-1 .grid h4,
.administrator-page .name h4{
    font-size: 24px;
    color: var(--black);    
}

.page-personal .day__wrap.grid.col-1 .grid a,
.administrator-page .day__wrap.grid.col-1 .grid a{
    margin: 0 16px;
    font-size: 18px;
    padding: 8px 16px;
    background-color: var(--yellow);
    color: var(--black);
    border-radius: 15px;
    border: 2px solid var(--black);
}

.page-personal .day__wrap .grid.col-3 > div,
.administrator-page .day__wrap .grid.col-3 > div{
    justify-content: end;
}

.page-personal .day__wrap.grid,
.administrator-page .day__wrap.grid{
    border: 2px solid var(--black);
    margin: 0 0 32px;
}

#newgame_add_form,
#game_edit_form{
    background-color: var(--white);
    padding: 24px 32px;
    border: 2px solid var(--black);
    margin: 0 0 32px;
    width: auto;
}
#newgame_add_form label,
#game_edit_form label{
    margin: 0 0 32px;
    display: flex;
    flex-flow: column;
}
#newgame_add_form h3,
#game_edit_form h3{
    color: var(--black);
}


select#game_system,
#game_edit_form select,
#newgame_add_form textarea,
#newgame_add_form select,
#newgame_add_form input,
#game_edit_form input{
    width: auto;
    padding: 16px;
}

select#game_system{
    width: calc(18vw + 80px);
}

.game__edit.pop_up{
    display: none;
}
.game__edit.pop_up.active{
    display: block;
}
.newGameList{
    grid-template-columns: 200px 200px 1fr
}

table.day__wrap{
    padding: 8px;
    background-color: rgba(255 255 255 /.8);
    color: var(--black);
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 50px;
}
.games_table{
    padding: 8px;
}
.games_table thead td{
    font-weight: bold;
    padding: 0 0 15px;
}
.games_table tbody td{
    padding: 0 8px;
    border: 1px solid;
}

/* table.day__wrap td {
    
} */

.set_table_num__wrap span,
.set_table_num__wrap strong,
.set_table_num,
.set_table_num__wrap label{
    font-size: 22px;
}

.set_table_num{
    padding: 8px;
}

.buy__price{
    align-items: baseline;
}

.form__wrap{
    max-width: 1000px;
    display: block;
    margin: 0 auto;
}
#code_id{
    padding: 12px;
    font-size: 18px;
    max-width: 500px;
}

.radios{
    gap: 24px;
}

#register .radios label{
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
#register .radios label input{
    margin: 0 0 0 8px;
}

.form__block{
    margin: 16px;
}


.login-page .game > p{
    text-align: center;
}

.login-page .game > p a{
    color: var(--white);
    display: inline;
    text-decoration: underline;
}

.master_check{
    margin: 16px 0;
    font-weight: 500;
    display: inline-block;
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--yellow);
}
#contestForm{
    max-width: 560px;
    margin: 18px 0;
}
#contestForm .miniature-block{
    margin: 16px 0;
}
#contestForm input{
    padding: 4px 8px;
    margin: 8px 0;
}

#contestForm .submit-btn{
    margin: 32px 0 0;
}

#contestForm button{
    border: 1px solid var(--black);
    padding: 8px 12px;
    border-radius: 8px;
}

@media screen and (max-width: 1200px){
    .header__main_menu nav.container.grid.col-12{
        display: flex;
        flex-flow: column;
    }
    .header__menu.grid{
        row-gap: 8px;
    }

    .tickets__buy_button__wrap{
        margin: 0 0 32px;
    }


    .container.loginForm {
        padding: 130px 0 0;
        max-width: var(--container);
    }
    .loginForm form {
        padding: 12px;
    }

    .mobile__only{
        display: block;
    }

    .game_register{
        margin-top: 32px;
    }

    .game.grid {
        display: flex;
        flex-flow: column;
    }
    .systemName.flex,
    .day__wrap.flex{
        flex-flow: column;
    }
    .game h2 {
        font-size: 28px;
    }
    
    .games .name h2 {
        font-size: 24px;
    }

    .game .comfirm__button {
        padding: 18px;
        margin: 16px 0 0;
        font-size: 20px;
    }
    .systemName strong,
    .game .image__wrap{
        margin: 0 0 16px;
        background-color: unset;
    }
    .game .image__wrap img{
        width: 100%;
        border-radius: 10px;
        max-height: unset;
    }
    .buy__price.flex{
        flex-flow: column-reverse;
    }
    body:not(.home) section.content.games_bg {
        padding: 100px 0 0;
    }
    body.page-games section.content .game p.description{
        display: none;
    }
    .games .name{
        max-width: unset;
    }
    .game .image__wrap img[src=""] {
        visibility: hidden;
        display: none;
    }

    .header__main_menu {
        position: absolute;
        padding: 125px 0 0;
        z-index: 1001;
    }
    .header__menu.grid{
        grid-template-columns: repeat(1, 1fr);
    }

    .mobileOpen .header__main_menu {
        z-index: 200;
        background-color: rgba(0, 0, 0, .9);
        height: auto;
    }

    /* TO FIX */
    .events__card::before, .events__card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 20px;

        display: none;
    }

    /* LOGIN FORM */
    .loginForm h1 {
        font-size: 24px;
    }
    .loginForm .game h2{
        font-size: 18px;
    }
    .loginForm .game {
        padding: 15px 20px;
    }
    .loginForm .game .comfirm__button {
        font-size: 16px;
    }

    .day__wrap.grid.col-1 .grid.col-3.alignCenter{
        display: flex;
        flex-flow: column;
        align-items: self-start;
        row-gap: 16px;
    }
    
    .administrator-page .day__wrap.grid.col-1 .grid > div.flex{
        flex-flow: column;
    }

    .administrator-page .day__wrap.grid.col-1 .grid a {
        margin: 8px 0;
        font-size: 16px;
    }
    .game__wrap.col-3{
        grid-template-columns: 1fr;
    }
    .content:not(.single_game) .game {
        width: auto;
    }

    .games_list.col-4,
    .filter.col-2{
        grid-template-columns: 1fr;
    }

    .games_list.col-4 .flex{
        flex-flow: column;
        row-gap: 20px;
    }

    body:not(.reg-page) .content:not(.single_game) .game,
    select#game_system {
        width: auto;
    }
}