.layout {
  max-width: 1080px;
  margin: auto;
  font-size: 16px;
}
html {
	color-scheme: dark ligth;
	background-color: #b4b9a3;
}

body {
	font-family: 'Ubuntu', sans-serif;
	min-height: 95vh;
	margin: 0 auto;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
	font-variation-settings: "wdth" 100;
	max-width: 420px;
}
.sublist > div:last-child[data-role=playbutton] > button {
  width: 60px;
  margin-top: 15px;
  border-radius: 33px;
  padding: 20px;
}



.visible {
  display: block;
}
.cards > div h2 {
	margin: 0 auto 10px auto;
}
.req{
  animation-name: change;
  animation-duration: 1s;
  }

@keyframes change {
  0% {color: rgb(0, 0, 0);}
  50% {color: #f44336;}
}
.scaled {
  animation-name: sca;
  animation-duration: .5s;
  animation-iteration-count: 1;
  color: #656565;
}
@keyframes sca{
  50% { transform: scale(1.3);} 
}

.role_b > div {
  
  margin-bottom: 2px;
  font-size: 22px;
  text-align: center;
  background: #bec3a8;
  padding: 3px;
}
.role_b > div:first-child{
  border-radius: 15px 15px 0 0;
}
.role_b > div:last-child{
  border-radius: 0 0 15px 15px;
}
.role_b > div > div {
  
    
    padding: 15px 5px;
    

}
.results {
  text-align: center !important;
}
.results div {
  display: block !important;
}
.results > div:first-child{
  font-size: 3rem;
}
.results > div:last-child{

    padding: 15px;
    margin: 5px 0;
    border-radius: 15px;

}
.score {
  font-size: 2rem;
}
.results > div:last-child > span {
  font-weight: bold;
}
.results > div:last-child > div:first-child{
  font-size: 2rem;
}
.clicka {

}
.clicka:hover > div > div:last-child {
display: block;
}
.clicka > div > div:last-child {
	margin-left: auto;
	height: fit-content;
	padding: 10px;
	margin-right: -10px;
	margin-top: -10px;
	display: none;
}
.clicka > div > div:first-child > div:last-child{
  
    background: #d8dcc9;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    font-weight: bold;
    display: none;
  
}

.clicka:hover > div > div:first-child > div:last-child{
  display: block;
}
.clicked > .role_b > div[id='correct'] {
  background-color: #6b8e2370 !important;
}
.cards > div:first-child > div:first-child {
	margin: 10% auto 0 auto;
}

.clicked > div:not(:last-child) {
  pointer-events: none;
}
.clicked > div:last-child {
  display: block !important;
  margin: 0;
  position: absolute;
  bottom: 265px;
  left: 10px;
  right: 10px;
}
#book > div{
  margin-top: 10px;
}
.feedback{
  padding: 10px;
  
}
.red {
  
  color: #E35959  !important;
}
.green{
  color: #debc07 !important ;
}

.progress{
  display: flex;
}

.progress > div:not(:first-child,:last-child) {
  display: flex;
  width: -webkit-fill-available;
  width: 100%;
}
.progress > div:not(:first-child, :last-child) > div {
	color: #acb193;
	margin: auto;
  font-size: 14px;
}
.progress > div:last-child {
	margin-left: auto;
	font-size: 20px;
}
.progress > div:first-child {
	
  font-size: 20px;

}
.clicked > .role_b > div {
  background-color: rgb(174 169 169 / 75%);
  
}
.clicked > .role_b > .sel {
  background-color: #e3595880;
  padding: 3px 3px 3px 3px;
  /*! border-radius: 5px; */
}
.clicked > .role_b > .sel > div {
  
  
}


.role_b > div i {
  font-size: 25px !important;
}

.sublistgame > div {
  padding: 12px;
  display: flex;
  background: #bec3a8;
  border-bottom: 1px solid #d8dcc9;
  margin: auto 0;
}

.sublistgame > div:last-child{
  border-radius:0 0 15px 15px;
}
.sublistgame > div >  div:first-child{
  font-size: 25px;
}
.sublistgame > div >  div{
  margin: auto 5px;
}


.colla_open > div:last-child{
    display: block !important;
}
.colla_open > div:first-child > div:last-child {
  transform: rotate(90deg);
}
.colla {
  background: #bec3a8;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 15px;
}
.colla:focus > div:last-child{
  display: block;
}


.colla > div:first-child {
  display: flex;
}

.colla > div:first-child > div:first-child {
margin: auto 0;
}
.colla h3 {
  margin: 0;
}

.layout .ui-hor-menu > a{
  padding: var(--pad-mobile);
  white-space: nowrap;
  
}
.layout .ui-hor-menu > a:hover{
  background-color: rgba(0, 0, 0, 0.1);  
}

.layout .ui-main-bl {
  display: block;
  padding: 82px 5px 0 5px;
}



.layout .ui-collapse > div:first-child{
  display: flex;
  }
  .layout .ui-collapse > div:first-child > h3{
    margin: auto auto auto 0;

} 
.layout .ui-collapse > div:first-child > div{
margin: auto 0 auto 5px;
cursor: pointer;
padding: 10px;

}

.ui-collapse-toogle > div:last-child{
  display: block !important;
}
.layout .ui-collapse > div:first-child > div:last-child > i{
  transform: rotate(-90deg);
}
.layout .ui-collapse-toogle > div:first-child > div:last-child > i{
  transform: rotate(0);
}
.ui-collapse > div:last-child{
  display: none;
} 
.layout .ui-collapse > div:first-child > div:hover{
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
} 


.drawer h3 {
  margin: 0;
}

form > button {
  font-size: 14pt;
}
.tiles {
  display: grid;
  grid-template-columns: auto auto;
  gap: 15px;
  margin-top: 15px;
}
.selected {
  display: block !important;
}

.subd {
  padding: 15px;
  display: none;
}
.subd > h2 {
  margin: 0 auto 10px 0;
}
.subd > div {
  display: flex;
  padding: 15px;
  background: #e6ead6;
  margin-bottom: 10px;
  border-radius: 5px;
}
.subd > div > div:last-child{
  margin: auto 0 auto auto;
}
.subd > div > h3 {
  margin: auto 0;
}
.cards > div > div > h2 {
  font-size: 4vh;
}

.center_panel {
	padding: 15px;
	background: #d8dcc9;
	overflow: auto;
	height: calc( 100vh - 116px);
	position: relative;
	border-radius: 15px 15px 0 0;
	padding-bottom: 33px;
}
html {
  /* For Firefox */
  overflow-y: scroll;
  scrollbar-color: #e6ead6 rgba(0, 0, 0, 0.25) !important;
  scrollbar-width: thin;
}

/* For Chrome and other browsers except Firefox */
body::-webkit-scrollbar {
    width: 0.5em;
    background-color: #0d3b97;
}
body::-webkit-scrollbar-thumb {
    background-color: #008de4;
}
.role_b {
	position: absolute;
	left: 5px;
	right: 5px;
	bottom: 20px;
}

.center_panel h3 {
  margin: 0;
}

.tiles > a > div:first-child {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}
#slh{
    position: relative;
    width: 100%;
    height: 90px;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
  
}
#slh > h2 {
	position: absolute;
	left: 50%;
	bottom: 18px;
	text-shadow: 1px 1px white;
	font-size: 3rem;
	margin: 0;
  transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	filter: invert();
}
#slh   img {
  width: 100%;
  margin: -10% 0;
}
.tiles > a > div > span {
  position: absolute;
  left: 0;
  background: #00000080;
  padding: 6px;
  text-align: left;
  color: white;
  font-size: x-large;
  font-weight: bold;
  right: 0;
  bottom: 0;
  border-radius: 0 0 14px 14px;
}
.nav {
  display: flex;
  background: rgb(107 142 35);
  padding: 10px;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.nav > div:not(:first-child) {
  margin: auto 0 auto 10px;
  background: rgba(0, 0, 0, 0.068);
  padding: 13px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}
.nav > div:last-child:hover {
  
  background: rgba(0, 0, 0, 0.09);
  
}
.nav > div:first-child {
  color: white;
  margin-right: auto;
}





button {
  
  padding: 15px;
  border-radius: var(--border-radius);
  display: block;
  }

button:hover {
  box-shadow: 0 0 0 4px rgb(107 142 35 / 35%) !important;
  transition: .4s;
}


.nav435 {
  background: #6B8E23;
  padding: 10px;
  border-radius: 0px;
  color: white;
  display: block;
  position: fixed;
  width: 100%;
}
.cards > div:not(:first-child) {
  display: none;
}
.cards > div > div:last-child > div:first-child {
	display: grid;
	margin-bottom: 5px;
	grid-template-columns: repeat(4,1fr);
	
	border-radius: 15px;
}
.cards > div > div:last-child{
  display: none;
}
.cards > div > div {
  text-align: center;
}
.cards > div > div:last-child > div:first-child > div {
	margin: auto;
	text-align: center;
	padding: 13px 15px;
}
.cards > div > div:last-child > div:first-child > div i {
  font-size: 3vh !important;
}
.cards > div > div:last-child > div:last-child  > button {
  width: 60px;
  padding: 20px;
  border-radius: 35px;
}
.noco {
	position: fixed;
	text-align: center;
	width: 220px;
	background: #759f1d;
	padding: 15px;
	top: 40%;
	left: calc(50% - 110px);
	border-radius: 15px;
	color: #fff;
	display: none;
	box-shadow: 0 0 0px 322px #6b8e2366;
}
.noco > span {
  font-size: 6rem;
}
.coin {
	position: relative;
	height: 100px;
}
.coin > div {
  margin: auto !important;
	transform: rotateY(0);
	position: absolute;
	border-radius: 100px;
	left: calc( 50% - 39px);
	width: 80px;
	height: 80px;
	padding: 16px 10px 15px 10px;
  bottom: 10px;
}
.coin > div > i {
  font-size: 3rem !important;
}
.gold > div {  
  background: gold;
  color: #b79b05;
}
.silver > div {  
  background: silver;
  color: #a6a5a5;
}
.bronze > div {  
  background: #CD7F32;
  color: #C0660E;
}



.me{
  text-align: left;
}
.me > div:first-child {
	font-weight: bold;
	font-size: small;
	margin-top: 10px;
}
.me > div:last-child > div {
	display: flex;
	background: #d8dcc9;
	margin: 10px auto;
	border-radius: 10px;
	padding: 5px;
}
.me > div:last-child > div > div:first-child{
  margin:auto auto auto 5px ;
  text-align: left;
  font-weight: bold;
  display: flex;
}
.me > div:last-child > div > div:not(:first-child) {

	padding: 10px;
	margin: auto 0 auto 10px;
	border-radius: 10px;
}

select,
textarea,
input[type="text"],
input[type="date"],
input[type="phone"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  padding: 25px 10px 12px 10px;
  font-size: 14pt;
}


/* FORM INTERACTIVITY */

.form-control:has(input:placeholder-shown, textarea:placeholder-shown, select:placeholder-shown)>label {
  top: 16px;
  left: 10px;
  font-size: 16pt;
  transition: .1s;
}


.form-control:has(input:focus, textarea:focus)>label {
  top: 5px;
  font-size: 11pt;
  transition: .1s;
  left: 10px;
}

.form-control:has(textarea)>label {
  background-color: var(--inpbg);
}
.form-control {
  
  margin-bottom: 15px;
}


.form-control:has(input:not(:placeholder-shown), select:not(:placeholder-shown), textarea:not(:placeholder-shown))>label {
  top: 5px;
  font-size: 11pt;
  transition: .1s;
  left: 10px;
}

.form-control:has(input:user-invalid, textarea:user-invalid, select:user-invalid, textarea.er, input.er)>p {
  display: block;
  transition: .1s;
  margin-top: 9px;
  color: #dc3545;
  position: absolute;
  right: 11px;
  top: 6px;
  font-size: 18pt;
}

.form-control:has(input:user-invalid, textarea:user-invalid, select:user-invalid, textarea.er, input.er)>label {
  color: #dc3545;
}




/*    END FORM  

**/
.head {
  background-color:#b4b9a3;
  /*! padding: 5px; */
}


.head_stats{
    display: grid;
    grid-template-columns: repeat(4,1fr);

    padding: 2.5px;
}
.head_stats > div {
  text-align: center;
  padding: 3px;
  position: relative;
}
.head_stats > div:hover::after {
  position: absolute;
  background-color: rgb(99 99 99);
  content: attr(data-title);
  display: block;
  z-index: 999;
  padding: 5px;
  left: 46%;
  transform: translate(-50%, 8px);
  width: max-content;
  color: white;
  border-radius: 5px;
}
.head_stats > div:hover::before {
  position: absolute;
  width: 1px;
  height: 1px;
  display: block;
  z-index: 999;
  left: 50%;
  transform: rotate(45deg);
  /* width: max-content; */
  /* color: white; */
  /* border-radius: 5px; */
  content: ' ';
  top: 25px;
  border-bottom: 10px solid rgb(99 99 99);
  border-left: 10px solid rgb(99 99 99);
}
.bottom_nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: fixed;
  bottom: 0;
  background: rgb(107 142 35);
  padding: 10px;
  border-radius: 20px 20px 0 0;
  max-width: 420px;
  width: -moz-available;
  width: -webkit-fill-available;
}
.bottom_counter {
	position: absolute;
	background: #e35959;
	padding: 5px;
	top: 7px;
	right: 7px;
	border-radius: 9px;
	font-size: small;
}
.b_selected {
  /*! box-shadow: 0 0 0 2px rgb(255 255 255 / 30%); */
  background-color: rgba(0, 0, 0, 0.25) !important;
  animation-name: sca;
  animation-duration: .5s;
  animation-iteration-count: 1;
}
.msg {
	background: #00000078;
	width: 100%;
	padding: 15px;
	color: white;
	display: none;
	position: fixed;
	z-index: 999;
	max-width: 420px;
}
  

.bottom_nav > a {
  text-align: center;
  padding: 20px 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 5px;
  border-radius: 15px;
  position: relative;
}
.bottom_nav > a > div > i {
  font-size: 16pt !important;
}
.bottom_nav > a > div:last-child {
  font-size: 12px;
}

.head_stats span {
  background: #e35959;
  padding: 1px 3px;
  color: white;
  border-radius: 5px;
  margin: 3px;
}



.form-control .customs {
  background: #d8dcc9;
  padding: 25px 10px 12px 10px;
  border-radius: 5px;
  color: black;
  display: none;
  border-bottom: 1px solid #bec3a8;
  font-size: 1.1rem;
}
.form-control .selec{
  display: block !important;
}
.customs[data-choice="selected"] {
	display: block;
	background: #e3e8d2;
}

.form-control > label {
	position: absolute;
	top: 5px;
	left: 6px;
	font-size: 14px;
}

.shadow {
  background-color: rgba(0, 0, 0, 0.1);
}
.shadow > i:first-child{
  display: block !important;
}
.shadow > i:last-child{
  display: none !important;
}






.logo > div:first-child{
  font-family: Lobster;
  font-size: 1em;
  transform: rotate(-1.5deg);
  
}
.logo > div:last-child{  
  font-size: small;
  font-family: system-ui;
  transform: rotate(6deg);

}

.h_menu {
  display: flex;

}

.h_menu > a {
  padding: 10px;
}
form {
  
}
form > .form_last_menu{
  display: flex;
  margin-top: 15px;
}
form > .form_last_menu > div:first-child {
  margin-right: auto;
}
form > h2 {
  margin: 0;
}
.drawer,.book,.medal {
  display: none;
  padding: 15px;
  background-color: #e6ead6;
  
  
}



.show {
  display: block;
  z-index: 999;
}
.shadow::after{
  z-index: 999;
}
.block_body{
  padding: 15px;
}
.block_body > div {
  background: #e6ead6;
  padding: 15px;
}
.medal{
  display: none;
}

.block_body h2 {
  margin: 0;
}