/*
Theme Name:     Kubok theme
Theme URI: 		
Description:     
Author:         Eugenio Coppo
Author URI: 	
Version:        1.0
*/



.game-cell.cell-selected.highlight-table.cell-blank {
    background-color: #f3f3f3;
    border: none;
}

td.game-cell.p-0.align-items-center {
    background-color: #f3f3f3;
}

.game-cell, .game-row {
     display: flex;
     padding: 0px;
     margin: 0px;
}
.game-cell {
     flex-basis: 25%;
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
     transform: translateZ(0px);
}
.game-cell::after {
     content: "";
     display: block;
     padding-bottom: 100%;
}
.game-cell:hover {
     background-color: rgb(221, 238, 255);
}
.cell-value {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     font-weight: 100;
     color: rgb(102, 102, 102);
     text-align: center;
}
.pencil-grid {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     font-size: 0px;
     line-height: 0;

}
.pencil-grid-cell {
     position: relative;
     width: 33.3333%;
     height: 33.3333%;
     display: inline-block;
     font-size: 10px;
     line-height: 20px;
     color: rgb(170, 170, 170);
}

.pencil-hint-cell {
    position: relative;
    width: 29%;
    height: 33.3333%;
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
    color: rgb(170, 170, 170);
} 
svg:not(:root) {
     overflow: hidden;
}
.pencil-grid-cell svg {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 100%;
     height: 120%;
     transform: translate(-50%, -50%) scale(0.45);
}
.game-cell, .game-row {
     display: flex;
     padding: 0px;
     margin: 0px;
}
.game-cell {
     flex-basis: 25%;
     box-sizing: border-box;
     position: relative;

     cursor: pointer;
     transform: translateZ(0px);
	 background-color: #fff;
}
.game-cell::after {
     content: "";
     display: block;
     padding-bottom: 100%;
}
.game-cell:hover {
     background-color: rgb(221, 238, 255);
}
.cell-value {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     font-weight: 100;
     color: rgb(102, 102, 102);
     text-align: center;
}
.pencil-grid {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     font-size: 0px;
     line-height: 0;

}
.pencil-grid-cell {
     position: relative;
     width: 33.3333%;
     height: 33.3333%;
     display: inline-block;
     font-size: 10px;
     line-height: 20px;
     color: rgb(170, 170, 170);
}
svg:not(:root) {
     overflow: hidden;
}
.pencil-grid-cell svg {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 100%;
     height: 120%;
     transform: translate(-50%, -50%) scale(0.45);
}
.game-wrapper .game {
     position: absolute;
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
}
table {
     border-collapse: collapse;
     border-spacing: 0px;
	 margin-bottom:5px !important;
}

.kudok-table{
	 margin:auto;
}

td.game-cell.cell-selected.highlight-table.cell-round {
    border-radius: 50%;
    background-color: #fff !important;
    width: 60px !important;
    height: 60px !important;
    margin: 19px;
    line-height: 60px !important;
    font-size: 28px !important;
}
.game-table {
     width: 100%;
     margin: 0px auto;
     padding: 0px;
     background: rgb(255, 255, 255);
     user-select: none;
    
}
.game-table, .game-table::after {
     display: block;
     box-sizing: border-box;
     height: 100%;
}
.game-table::after {
     content: "";
     position: absolute;
     left: 33.3333%;
     width: 33.3333%;
     top: 0px;
     pointer-events: none;
}
.game-table tbody {
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     flex-direction: column;
     width: 100%;
     height: 100%;
     overflow: hidden;
}
.game-table tbody::after {
     display: block;
     content: "";
     position: absolute;
     left: 0px;
     top: 33.3333%;
     height: 33.4%;
     pointer-events: none;
}
.game-row, .game-table tbody::after {
     box-sizing: border-box;
	 width: 272px;
}
.game-row {
     height: 25%;
}
.game-cell.highlight-table {
     background-color: rgb(226, 231, 237);
}
.game-cell.cell-selected {
     background-color: rgb(187, 222, 251);
}

.game-value .cell-value {
     font-weight: 700;
     color: rgb(0, 0, 0);
     cursor: default;
}
.cell-value svg {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 50%;
}


.kubok-value-error .cell-value svg{
    fill: red;
}

modal-body.kubok-success-message {
    background-color: #5aaeea !important;
    text-align: center !important;
    color: #fff !important;
    font-size: 25px !important;
    font-weight: bold !important;
}

.modal-header {
    background-color: #5aaeea;
    border: none;
}

.modal-footer {
    background-color: #5aaeea;
    border: none;
}

.bt1 {
border-top-style:solid !important;
border-top-width:1px !important;
border-top-color:#000 !important;
}

.bl1 {
border-left-style:solid !important;
border-left-width:1px !important;
border-left-color:#000 !important;
}

.br1 {
border-right-style:solid !important;
border-right-width:1px !important;
border-right-color:#000 !important;
}

.bb1 {
border-bottom-style:solid !important;
border-bottom-width:1px !important;
border-bottom-color:#000 !important;
}

.bt2 {
border-top-style:solid !important;
border-top-width:2px !important;
border-top-color:#000 !important;
}

.bl2 {
border-left-style:solid !important;
border-left-width:2px !important;
border-left-color:#000 !important;
}

.br2 {
border-right-style:solid !important;
border-right-width:2px !important;
border-right-color:#000 !important;
}

.bb2 {
border-bottom-style:solid !important;
border-bottom-width:2px !important;
border-bottom-color:#000 !important
}


.bt3 {
border-top-style:solid !important;
border-top-width:3px !important;
border-top-color:#000 !important;
}

.bl3 {
border-left-style:solid !important;
border-left-width:3px !important;
border-left-color:#000 !important;
}

.br3 {
border-right-style:solid !important;
border-right-width:3px !important;
border-right-color:#000 !important;
}

.bb3 {
border-bottom-style:solid !important;
border-bottom-width:3px !important;
border-bottom-color:#000 !important
}

	  	  .kubok-cell-selected  {
			border: 4px dotted red;
			background-color: cyan;
		}
		
		.kubok-game-value {
    background-color: #caffff !important;
}
		
	  	 .kubok-hint-cell-selected  {
			border: 4px dotted red;
			background-color:#ffff81 !important;
		}
	  .kubok-current-mode  {
	  border: 4px solid #f8981d;
	  background-color:#c7c7c7;
	  }
		.hint-grid-cell-number svg {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			height: 120%;
			transform: translate(-50%, -50%) scale(0.45);
		}
		.kubok-circle  svg {
			
			width: 50%;
			margin-right:-5px;
			transform: translate(-0%, -50%) scale(0.50);
		}

         .align-items-center {
			display: flex; 
			align-items: center;  /*Aligns vertically center */
			justify-content: center; /*Aligns horizontally center */
         }
         .form-control {
			width:100%;
         }
         .game-cell {
			flex-basis: 16.666%;
         }
         .hints-cell {
			flex-basis: 16.666%;
         }
         .game-row {
			width:100%;
			height: 16.666%;
         }
         .game-cell-only-width {
			flex-basis: 16.666%; 
         }
         .game-row {
			width:100%;
			height: 16.666%;
         }
		 
         .game-container {
			margin:auto;
         }
		 
		 .kubok-value-error .cell-value svg{
			fill: red;
		}
		.game-container {	 
			 width:320px;
		}
		
		 .hint-cell {
			height: 15px;
			border-color:#c2c2c2 !important;
		 }
		 
		 .gamecontrols {
			width: 50px;
			background-color: #e6e6e6; 
			color:#000;
		  }
		 
         /* Small devices (landscape phones, 576px and up) */
		 @media (min-width: 480px) {  
			 .game-container {	 
				 width:360px;
			 }
			 
			 .hint-cell {
				height: 20px; 
			 }
         }

         @media (min-width: 576px) {  
			 .game-container {	 
				 width:480px;
			 }
			 
			 .hint-cell {
				height: 25px; 
			 }
			 .gamecontrols {
				width: 50px;
			  }
         }
         /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
         @media (min-width: 768px) { 
			.game-container {	 
				 width:540px;
			 }		 
			 .hint-cell {
				height: 25px; 
			 }
         }
		 
         /* Large devices (desktops, 992px and up) */
         @media (min-width: 992px) { 

			 .hint-cell {
				height: 25px; 
			 }
         }
		 
         /* Extra large devices (large desktops, 1200px and up) */
         @media (min-width: 1200px) {  
			 .game-container 	{	 
				width:640px;
			 }
			 .hint-cell {
				height: 25px; 
			 }
         }
		 
		 .hc-nav-trigger {
    
    top: 20px;
	right:20px;
}

.modal.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,10);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.time-elapsed{
text-align: center; font-size: 20px; color: #fff; font-weight: bold; margin-bottom: 20px;
}

@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}
@media screen and (max-width: 800px){
    .cell-value svg {
         height: 60%;
    }
}





 body {
         background-color: #f3f3f3;
         font-family: Helvetica, Sans-Serif;

         }
         .playfield{
   
         }
         .playfield span{
         font-size:300%;
         width:98px;
         height:98px;
         float:left; 
         display:block;
    
         text-align:center;  
         line-height:99px;
         background-color:#dbdbdb;      
         }
         .kubok-circle{
         border-style:solid;
         border-width:1px;
         border-radius: 50%;
         background-color: #fff !important;
         border-color: #969696 !important;
         width: 50% !important;
         height: 50% !important;
         margin: 13px;
		 text-align:center;
    font-size: 18px;
         }
         .kubok-note{
         border-style:solid;
         border-width:1px;
         border-radius: 10px;
         background-color: #fff !important;
         border-color: #969696 !important;
         width: 60px !important;
         height: 60px !important;
         margin: 19px;
         line-height: 20px !important;
         font-size: 28px !important;
         }
         .kubok-square{
         border-style:solid;
         border-width:1px;
         background-color:#fff !important;
         border-color:#000 !important;
         }
         .kubok-blank{
         background-color:#f3f3f3 !important;
         width: 55px !important;
         margin-right: 5px;
         border: none !important;
         }
         .kubok-toolbar{
         background-color: #000 !important;
        /* GC  width: 100%; */
         color: #fff;
         font-weight: bold;
         text-align: center;
         }
         .kubok-header{
         background-color: #f8981d !important;
         width: 100%;
         text-align: center;
         font-size: 50px;
         }
         .kubok-blank2{
         background-color: #f3f3f3 !important;
         border-color: #f3f3f3 !important;
         width: 60px !important;
         height: 60px !important;
         margin: 19px;
         }
         span.kubok-numbers {
         font-size: 20px;
         line-height: 40px;
         margin-right: 3px;
         margin-left: 4px;
         border-style: solid;
         border-color: #969696;
         border-width: 1px;
         padding-right: 10px;
         padding-left: 10px;
         padding-top: 5px;
         padding-bottom: 5px;
         background-color: #fff !important;
         border-radius: 6px;
         }
		 .kubok-container{
         position: absolute;
		 left:35%
         }
		 
         .kubok-container-numbers {
         padding-top: 10px;
         width: 400px;
         margin: auto;
         padding-bottom: 30px;
         }
         svg.icon-game-control {
			 
      padding-bottom: 5px;
    margin-right: 10px;
    margin-left: 10px;
    padding-top: 12px;
}
         .kubok-container-tools {
         font-size: 16px;
         width: 400px;
         margin: auto;
         margin-top: 30px;
         text-align: center;
         }
         .kubok-label{
         width:auto !important;
         line-height: 0px;
         }
         .container-checkbox {
         position: relative;
       /* GC   padding-left: 35px; */
         margin-bottom: 12px;
         right:0;
         cursor: pointer;
         font-size: 22px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         }
         /* Hide the browser's default checkbox */
         .container-checkbox input {
         position: absolute;
         opacity: 0;
         cursor: pointer;
         height: 0;
         width: 0;
         }
         /* Create a custom checkbox */
         .checkmark {
         position: absolute;
         top: 1px;
         left: 0;
         height: 25px;
         width: 25px;
         background-color: #eee;
		 border-style:solid;
		 border-color:#c2c2c2;
         }
         /* On mouse-over, add a grey background color */
         .container-checkbox:hover input ~ .checkmark {
         background-color: #fff;
		 border-style:solid;
		 border-color:#c2c2c2;
         }
         /* When the checkbox is checked, add a blue background */
         .container-checkbox input:checked ~ .checkmark {
         background-color: #09c412;
         }
         /* Create the checkmark/indicator (hidden when not checked) */
         .checkmark:after {
         content: "";
         position: absolute;
         display: none;
         }
         /* Show the checkmark when checked */
         .container-checkbox input:checked ~ .checkmark:after {
         display: block;
         }
         /* Style the checkmark/indicator */
         .container-checkbox .checkmark:after {
         left: 9px;
         top: 5px;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 3px 3px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         }
		 .container-checkbox .error-label {
			 /* GC */
			 padding-left:15px;
			 margin-left:15px;
			 font-size:12px;
		 }
		 /*
         .checkbox-container{
         display: inline-block;
         float: right;

         margin-right: 15px;
         }
		 */
		 
		 .btn-group-lg>.btn, .btn-lg {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5;
    border-radius: .3rem;
}

.border-primary {
    border-color: #c3c3c3!important;
}

button.btn.btn-outline-dark.btn-lg {
    background-color: e6e6e6;
	border-color:#848484;
}

.form-control-sm {
    height: calc(1.8125rem + 2px);
    padding: .25rem .2rem;
    font-size: .875rem;
    line-height: 1.2;
    border-radius: .8rem;
    height: 28px;
	width:50px;
}

.nav  li {
  margin-left: 30px;
  padding-right: 30px;
  margin-top:3px;
}


@media only screen 
and (min-device-width : 285px) 
and (max-device-width : 667px) 
and (orientation : portrait) {

	.kubok-container{
		 left:2%
         }
	span.error-label {
    font-size:10px;
}

.kubok-title{
font-size: 40px;
}
	
	}