/* -------------------------------------------------------------------------- */
/* Copyright (c) 2021. Nikola Vukićević                                       */
/* -------------------------------------------------------------------------- */

@import 'fontovi.css';
@import 'config.css';

* {
	margin:      0;
	padding:     0;
	font-family: var(--font_body_familija), Arial, sans-serif;
	font-size:   11pt;
}

.iskljucena_selekcija {
	user-select:           none; /* Firefox */
	-moz-user-select:      none; /* Firefox */
	-ms-user-select:       none; /* Internet Explorer */
	-khtml-user-select:    none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select:   none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

#wrapper {
	position:        relative;
	width:           100vw;
	height:          100vh;
	/*
	display:         grid;
	grid-template-columns: auto auto;
	*/
	
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;
	flex-wrap:       wrap;
	overflow:        auto;
	background:      #dfe3e7;
}

.copyright_poruka {
	position:  fixed;
	right:     12px;
	bottom:    12px;
}

/* -------------------------------------------------------------------------- */
/* Sudoku tabela i pripadajući elementi                                       */
/* -------------------------------------------------------------------------- */

#sudoku_tabela {
	display:               grid;
	grid-template-columns: auto auto auto;
	align-content:         center;
	justify-content:       center;
	width:                 fit-content;
	width:                 -moz-fit-content;
	width:                 320px;
	height:                fit-content;
	height:                -moz-fit-content;
	height:                320px;
	border:                solid 6px #777;
	border:                solid 6px #8096ad;
	border:                solid 7px #728395;
	margin:                16px 0 0 16px;
	border-radius:         4px;
	box-shadow:            0px 0px 16px 1px rgba(0,0,0,0.4);
}

.sudoku_blok {
	display:               grid;
	grid-template-columns: auto auto auto;
	border:                solid 1px #777;
	margin:                -1px;
}

.sudoku_polje {
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	align-items:     center;
	flex-wrap:       wrap;
	
	border:          solid 1px #eaeaea;
	width:           32px;
	height:          32px;
	cursor:          pointer;
	color:           #62cb96; /* zelena */
	color:           #3185e7; /* plava */
	color:           #7096c3; /* plava */

	padding: 2px;

	/* z-index: -1000; */
}

.sudoku_polje_vrednost {
	width:           100%;
	height:          100%;
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	align-items:     center;
	
	/* flex-wrap:       wrap; */
	
	font-family:     InconsolataExpanded-Bold, Arial, sans-serif;
	font-weight:     normal;
	font-size:       16pt;

	text-shadow:     0px 0px 3px #00000020;
}

.sudoku_polje_kandidati {
	flex:            1;
	width:           100%;
	height:          99%;
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	align-items:     center;
	flex-wrap:       wrap;
}

.sudoku_polje_skrivanje_vrednosti {
	width:    0;
	height:   0;
	overflow: hidden;
}

.sudoku_polje_skrivanje_kandidata {
	width:    0;
	height:   0;
	overflow: hidden;	
}

.sudoku_polje:hover {
	background: #efa;
}

.sudoku_polje_fiksno {
	color: #505050;
	color: #505964;
}

.sudoku_polje_greska {
	background:  #ee625c;
	color:       #fff;
	font-weight: bold;
}

.sudoku_polje_okvir_1 {
	border:  solid 1px #6ac16d;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07);
}

.sudoku_polje_okvir_2 {
	border:  solid 1px #71abf0;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07);
}

.sudoku_polje_okvir_3 {
	border:  solid 1px #f19b98;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07);
}

.sudoku_polje_okvir_4 {
	border:  solid 1px #c798f1;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07);
}

.sudoku_polje_okvir_5 {
	border:  solid 1px #f1c798;
	padding: 2px;
	z-index: 1000;
	box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.07);
}

.sudoku_polje_kandidat {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-items:     center;
	font-family:     InconsolataExpanded-Regular, Arial, sans-serif;
	font-weight:     normal;
	font-size:       6pt;
	color:           #f9f9f9;
	width:           27%;
	height:          27%;
	cursor:          pointer;
	margin:          1px;
}

.sudoku_polje_kandidat:hover {
	background: #ddd;
	background: #eee;
	background: #ffea99;
	background: #fff5ce; /* default */
	background: #fff3c2;
	background: #fff0b8;
	background: #7096c3; /* plava */
	color:      #777;
	color:      #fff;
}

.tooltip {
	position: relative;
}

.tooltip .tooltiptext {
	position:         absolute;
	visibility:       hidden;
	width:            240px;
	background-color: #62cb96;
	background-color: #777;
	color:            #fff;
	border-radius:    12px;
	padding:          12px 16px;
	bottom:           120%;
	left:             50%;
	margin-left:      -120px;
	z-index:          1;
  
	opacity:          0;
	transition:       opacity 1.2s;
	transition-delay: 1s;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity:    0.96;
}

.tooltiptext li {
	font-family: var(--font_body_familija), Arial, sans-serif;
	margin-left: 24px;
	line-height: 1.618;
}

.sudoku_polje_kandidat_toggle {
	color:       #3185e7;
	color:       #96b2d2;
	text-shadow: 0px 0px 3px #00000015;
	/* font-weight: bold; */
}

.sudoku_polje_kandidat_par_toggle {
	background: #ffea99;
	background: #fff5ce;
	background: #fff0b8;
	color:      #777;
	/* font-weight: bold; */
	/* border:      solid 1px #fea; */
	z-index:    200;
}

.sudoku_polje_kandidat_solver_1 {
	background:    #f7908b;
	color:         #fff;
	border-radius: 15%;
	font-weight:   bold;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

.sudoku_polje_kandidat_solver_2 {
	color:       #4fa;
	font-weight: bold;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:     250;
}

.sudoku_polje_kandidat_solver_3 {
	background:    #71abf0;
	background:    #6ac16d;
	color:         #fff;
	border-radius: 15%;
	font-weight:   bold;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

.sudoku_polje_kandidat_solver_4 {
	background:    #71abf0;
	color:         #fff;
	border-radius: 15%;
	font-weight:   bold;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

.sudoku_polje_kandidat_solver_5 {
	background:    #d33;
	background:    #e94545;
	background:    #f35f5f;
	color:         #fff;
	border-radius: 15%;
	font-weight:   bold;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

.sudoku_polje_kandidat_solver_6 {
	background:    #9b44e5;
	background:    #9d50df;
	color:         #fff;
	font-weight:   bold;
	border-radius: 30%;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

.sudoku_polje_kandidat_solver_7 {
	background:    #fba036;
	background:    #ffa63f;
	color:         #fff;
	font-weight:   bold;
	border-radius: 30%;
	box-shadow:    0px 0px 8px 1px rgba(0,0,0,0.07);
	z-index:       250;
}

/* -------------------------------------------------------------------------- */
/* Kontrolni panel                                                            */
/* -------------------------------------------------------------------------- */

#kontrolni_panel {
	width:           480px;
	height:          fit-content;
	height:          -moz-fit-content;
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
	flex-wrap:       wrap;
	margin:          16px 0 0 16px;
	/* border:          dashed 2px #ddd; */
	padding:         0 16px 4px 8px;
}

#kontrolni_panel_dugmici {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
	flex-wrap:       wrap;
}

#kontrolni_panel_dugmici button {
	/* height:       32px; */
	padding:       8px 40px;
	margin:        0 0 5px 0;
	font-family:   var(--font_body_familija), Arial, sans-serif;
	font-size:     0.95rem;
	background:    #eff2f5;
	background:    #efefef;
	background:    #62cb96; /* zelena */
	background:    #7096c3; /* plava */
	color:         #fff;
	border:        solid 1px #bbb;
	outline:       none;
	border-radius: 8px;
	box-shadow:    0px 0px 16px 1px rgba(0, 0, 0, 0.12);
}

#kontrolni_panel_dugmici button:hover {
	background: #dee1e4;
	background: #e4e4e4;
	background: #56b283;
	background: #8cabcf;
}

#kontrolni_panel_undo_redo {
	width:           100%;
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;
	flex-wrap:       wrap;
}

#kontrolni_panel_undo_redo_razdvajac {
	width: 5px;
}

#kontrolni_panel_undo_redo button {
	flex: 1;
}

#hintovi_lista {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;
	background:      #fff;
	border:          solid 1px #ccc;
	padding:         5px 5px 5px 5px;
	margin:          0 0 16px 0;

	border-radius:   8px;
	min-height:      32px;
	max-height:      185px;
	overflow:        auto;
	box-shadow:      0px 0px 16px 1px rgba(0,0,0,0.08);
}

.hint_pojedinacni {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;

	background:      #aaa;
	background:      #e7eaed;
	background:      #eff2f5;
	color:           #fff;
	color:           #555;
	border:          solid 1px #ddd;
	padding:         4px 0 6px 8px;
	margin:          0 0 4px 0;

	border-radius:   6px;
	cursor:          pointer;
}

.hint_pojedinacni:hover {
	background: #dee1e4;
	/* background: #e8ecf1; */
}

.hint_pojedinacni_izabrani {
	background: #7cb0ed;
	background: #9dc4f2;
	color:      #fff;
}

.hint_pojedinacni_izabrani:hover {
	background: #9dc4f2;
	background: #accff7;
}

.hint_pojedinacni_tekst {
	font-family: var(--font_body_familija), Arial, sans-serif;
	padding-top: 2px;
	font-size:   0.95rem;
}

.hint_pojedinacni_razdvajac {
	flex: 1;
}

.hint_pojedinacni_dugme {
	padding:       0 4px;
	margin-right:  4px;
	font-family:   var(--font_body_familija), Arial, sans-serif;
	font-size:     0.9rem;
	padding:       1px 4px;
	border:        solid 1px #ddd;
	border-radius: 4px;
}

.hint_pojedinacni_dugme:hover {
	background: #d0d0d0;
}

.dugme_skrivanje {
	display: none;
}

.dugme_otkrivanje {
	display:    block;
	background: red;
}

#hintovi_labela, #hint_labela {
	font-weight: bold;
	font-family: var(--font_body_familija), Arial, sans-serif;
	margin:      0 0 12px 0;
	color:       #777;
}

#hintovi_labela {
	margin: 8px 0 12px 0;
}

#hintovi_info {
	display:        flex;
	flex-direction: column;

	background:  #fff;
	border:      solid 1px #ccc;
	font-family: var(--font_body_familija), Arial, sans-serif;
	cursor:      pointer;
	padding:     1rem;
	margin:      0 0 1rem 0;

	min-height:    64px;
	border-radius: 8px;
	box-shadow:    0px 0px 16px 1px rgba(0,0,0,0.08);
}

.sudoku_h2 {
	margin-bottom: 1.25rem;
	color:         #555;
	padding:       0 0 4px 0;
	border-bottom: solid 1px #f0f0f0;
}

.sudoku_h3 {
	font-family: var(--font_naslovi_deblji_familija), Arial, sans-serif;
	font-weight:   normal;
	margin-bottom: 1rem;
	color:         #777;
	padding:       0 0 8px 0;
	border-bottom: solid 1px #f0f0f0;
}

.sudoku_p {
	line-height:   1.6;
	margin-bottom: 1.17rem;
	color:         #555;
}

.sudoku_ul {
	margin-bottom: 1.17rem;
}

.sudoku_ul li {
	line-height:   1.6;
	margin-left:   2rem;
	margin-bottom: 8px;
}

.sudoku_p strong, .sudoku_li strong {
	color:       #7096c3;
	font-family: var(--font_naslovi_tanji_familija), Arial, sans-serif;
	font-weight: normal;
}

/* ---- Info tabela --------------------------------------------------------- */

#info_tabela {
	font-family: var(--font_body_familija), Arial, sans-serif;
}

#info_panel {
	margin: 12px 0 0 16px;
}

#info_panel button {
	padding:       8px 16px;
	margin:        12px 4px 0 0;
	background:    #62cb96; /* zelena */
	background:    #7096c3; /* plava */
	color:         #fff;
	border:        none;
	outline:       none;
	border-radius: 8px;
	box-shadow:    0px 0px 16px 1px rgba(0, 0, 0, 0.12);
}

#info_panel button:hover {
	background: #56B283;
	background: #8cabcf;
}

#info_panel_broj_preostalih {
	margin: 16px 0 8px 0;
}

/* -------------------------------------------------------------------------- */
/* Padajući meni                                                              */
/* -------------------------------------------------------------------------- */

.padajuci_meni_tezina {
	position: relative;
}

#padajuci_meni_tezina_label {
	font-family: var(--font_body_familija), Arial, sans-serif;
	margin:      0 8px 0 0;
}

.padajuci_meni_tezina_traka {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;
	flex-wrap:       wrap;
	margin:          16px 0 0 0;
}

.padajuci_meni_izabrani {
	font-family: var(--font_body_familija), Arial, sans-serif;
	font-size:   11pt;
}

.padajuci_meni_ikona {
	cursor: pointer;
}

.padajuci_meni_ikona img {
	width:  24px;
	height: 24px;
	margin: -4px 0 0 8px;
}

.padajuci_meni_tezina_sadrzaj {
	position: absolute;
	width:               108px;
	cursor:              pointer;
	top:                 32px;
	left:                60px;
	height:              0;
	overflow:            hidden;
	box-shadow:          0px 0px 16px 1px rgba(0,0,0,0.0);
	border:              solid 1px #fff;
	opacity:             0;
	padding:              9px 0 0 13px;
	transition-property: all;
	transition-duration: 400ms;
	background:          #fff;
	z-index:             1000;
}

.padajuci_meni_tezina_sadrzaj_toggle {
	box-shadow: 0px 0px 16px 1px rgba(0,0,0,0.24);
	padding:    8px 0 4px 12px;
	border:     solid 1px #eaeaea;
	height:     156px;
	opacity:    1;
}

.padajuci_meni_tezina_stavka {
	font-family: var(--font_body_familija), Arial, sans-serif;
	width:  100%;
	margin:      0 0 12px 0;
	font-size:   11pt;
}

.padajuci_meni_tezina_stavka:hover {
	color: #7096c3;
}

.svg_linije {
	position:   absolute;
	top:        20px;
	left:       20px;
	width:      704px;
	height:     704px;
	z-index:    10;
	background: transparent;
}

.svg_linija {
	z-index: 100;
}

/* -------------------------------------------------------------------------- */
/* -----                           RESPONSIVE                           ----- */
/* -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {
	#sudoku_tabela {
		width:  700px;
		height: 700px;
	}

	.sudoku_polje {
		width:     72px;
		height:    72px;
		font-size: 28pt;
	}

	.sudoku_polje_vrednost {
		font-size: 28pt;
	}

	.sudoku_polje_kandidat {
		width:     30%;
		height:    30%;
		font-size: 10pt;
	}
}