/**
 * OnlineSchuze.cz -- vzhled administrace nad Bootstrapem 5.
 *
 * Rozvržení je stejné jako ve fakturum.cz: pevná horní lišta se značkou,
 * levé menu, obsah v kartách. Značková zelená se prosazuje přes proměnné
 * Bootstrapu, ne přebíjením jednotlivých tříd.
 */

:root
{
	--os-zelena: #1f9d4d;
	--os-zelena-tmava: #17803e;
	--os-zelena-svetla: #e8f6ee;
	--os-pozadi: #f5f7f6;
	--os-text: #303b35;
	--os-ram: #e3e8e5;
	--os-stin: 0 .5rem 1.5rem rgba(20, 45, 30, .06);

	--bs-success: #1f9d4d;
	--bs-success-rgb: 31, 157, 77;
	--bs-primary: #1f9d4d;
	--bs-primary-rgb: 31, 157, 77;
	--bs-link-color: #17803e;
	--bs-link-color-rgb: 23, 128, 62;
	--bs-link-hover-color: #0f5f2c;
	--bs-border-radius: .65rem;
	--bs-body-color: var(--os-text);
	--bs-body-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { font-size: 16px; }
body { background-color: var(--os-pozadi); }

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6
{
	font-family: Comfortaa, var(--bs-body-font-family);
	font-weight: 700;
	color: var(--os-text);
	letter-spacing: -.01em;
}

/* Nadpisy v Comfortaa jsou na telefonu nepřiměřeně velké -- zabraly půl
   obrazovky dřív, než uživatel uviděl obsah. */
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.05rem; }

@media (min-width: 768px)
{
	h1, .h1 { font-size: 2.1rem; }
	h2, .h2 { font-size: 1.6rem; }
	h3, .h3 { font-size: 1.3rem; }
	h4, .h4 { font-size: 1.1rem; }
}


/**
 * Bootstrap 4 -> 5: třídy, které z Bootstrapu vypadly, ale v šablonách
 * i v generátorech formulářů zůstaly na stovkách míst. Levnější je doplnit
 * je tady než přepsat každý výskyt.
 */
.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.jumbotron
{
	padding: 2.5rem;
	background: #fff;
	border: 1px solid var(--os-ram);
	border-radius: 1rem;
	box-shadow: var(--os-stin);
	margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) { .jumbotron { padding: 1.5rem; } }

.card-deck { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.card-deck > .card { flex: 1 1 320px; }

/* Modifikátory velikosti ikon zůstaly z FontAwesome, Bootstrap Icons je nemá. */
.fa-fw { display: inline-block; width: 1.25em; text-align: center; }
.fa-lg { font-size: 1.33em; line-height: .75em; vertical-align: -.075em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }

@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }


/**
 * Horní lišta
 */
.bg-znacka { background: linear-gradient(115deg, var(--os-zelena-tmava) 0%, var(--os-zelena) 55%, #3fbd6d 100%); }

.navbar.bg-znacka { box-shadow: 0 2px 12px rgba(20, 45, 30, .15); height: 56px; }
.navbar.bg-znacka .navbar-brand
{
	font-family: Comfortaa, var(--bs-body-font-family);
	font-size: 1.35rem;
	font-weight: 400;
	color: #fff;
	line-height: 56px;
	padding: 0 1rem;
	background: rgba(0, 0, 0, .12);
	height: 56px;
	white-space: nowrap;
}
.navbar.bg-znacka .navbar-brand strong { font-weight: 700; }
.navbar.bg-znacka .navbar-brand span { opacity: .7; font-size: .9rem; }
.navbar.bg-znacka .nav-link { color: rgba(255, 255, 255, .9); }
.navbar.bg-znacka .nav-link:hover { color: #fff; }

.prepinac-svj { color: rgba(255, 255, 255, .9); max-width: 340px; }
.prepinac-svj .form-select
{
	background-color: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .25);
	color: #fff;
	max-width: 220px;
}
.prepinac-svj .form-select option { color: var(--os-text); }
.prepinac-svj .form-group { margin-bottom: 0; }

.btn-menu-prepinac { background: rgba(255, 255, 255, .18); color: #fff; border: 0; }
.btn-menu-prepinac:hover, .btn-menu-prepinac:focus { background: rgba(255, 255, 255, .3); color: #fff; }


/**
 * Levé menu
 */
.sidebar
{
	background: #fff;
	border-right: 1px solid var(--os-ram);
	position: fixed;
	top: 56px;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 0;
	overflow-y: auto;
}

.sidebar-sticky { padding-bottom: 1rem; }

.btn-menu
{
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	text-align: left;
	border: 0;
	border-radius: 0;
	padding: .6rem 1rem;
	font-weight: 600;
	color: #45524b;
	background: transparent;
	position: relative;
}
.btn-menu:hover { background: var(--os-zelena-svetla); color: var(--os-zelena-tmava); }
.btn-menu.active
{
	color: var(--os-zelena-tmava);
	background: var(--os-zelena-svetla);
	box-shadow: inset 3px 0 0 var(--os-zelena);
}
.btn-menu .bi { font-size: 1.05rem; opacity: .85; }

.btn-menu-skupina::after
{
	content: "";
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: auto;
	opacity: .5;
	transition: transform .2s ease;
}
.btn-menu-skupina.collapsed::after { transform: rotate(-45deg); }

.btn-menu-podnabidka a
{
	display: block;
	padding: .35rem 1rem .35rem 2.65rem;
	font-size: .9rem;
	color: #5c6b63;
	text-decoration: none;
}
.btn-menu-podnabidka a:hover { color: var(--os-zelena-tmava); background: var(--os-zelena-svetla); }
.btn-menu-podnabidka a.active { color: var(--os-zelena-tmava); font-weight: 600; }

@media (min-width: 992px)
{
	main[role="main"] { padding-top: 56px; }
	.sidebar { width: 16.666667%; }
}
@media (max-width: 991.98px)
{
	.sidebar { position: static; top: auto; border-right: 0; border-bottom: 1px solid var(--os-ram); }
	body { padding-top: 56px; }
	#content { padding-left: .75rem; padding-right: .75rem; }
}


/**
 * Obsah
 */
.stranka-hlavicka { border-bottom: 1px solid var(--os-ram); padding-bottom: 1rem; }
.stranka-hlavicka p { letter-spacing: .06em; font-size: .75rem; }

.card
{
	border: 1px solid var(--os-ram);
	border-radius: 1rem;
	box-shadow: var(--os-stin);
}
/* Pruhledne, aby barevna karta (vysledek hlasovani) probarvila i hlavicku. */
.card-header { background: transparent; border-bottom: 1px solid rgba(0,0,0,.08); font-weight: 700; }
.card-header:first-child { border-radius: 1rem 1rem 0 0; }

.btn { border-radius: .5rem; font-weight: 500; }
.btn-lg { border-radius: .65rem; }

/* Bootstrap 5.3 má barvy tlačítek zapečené v třídě, ne v --bs-primary.
   Značkovou zelenou proto nastavujeme přes proměnné konkrétních tlačítek.
   Primary i success schválně vypadají stejně: aplikace obě používá pro
   hlavní akci a dvě různé zelené vedle sebe by mátly. */
.btn-primary, .btn-success
{
	--bs-btn-bg: var(--os-zelena);
	--bs-btn-border-color: var(--os-zelena);
	--bs-btn-hover-bg: var(--os-zelena-tmava);
	--bs-btn-hover-border-color: var(--os-zelena-tmava);
	--bs-btn-active-bg: var(--os-zelena-tmava);
	--bs-btn-active-border-color: var(--os-zelena-tmava);
	--bs-btn-disabled-bg: var(--os-zelena);
	--bs-btn-disabled-border-color: var(--os-zelena);
}
.btn-outline-primary, .btn-outline-success
{
	--bs-btn-color: var(--os-zelena-tmava);
	--bs-btn-border-color: var(--os-zelena);
	--bs-btn-hover-bg: var(--os-zelena);
	--bs-btn-hover-border-color: var(--os-zelena);
	--bs-btn-active-bg: var(--os-zelena-tmava);
	--bs-btn-active-border-color: var(--os-zelena-tmava);
}
.bg-success, .text-bg-success, .progress-bar.bg-success { background-color: var(--os-zelena) !important; }
.text-success { color: var(--os-zelena) !important; }
.border-success { border-color: var(--os-zelena) !important; }
.list-group-item-success { background-color: var(--os-zelena-svetla); color: var(--os-zelena-tmava); }

/* Tabulky stojí na šedém podkladu, takže potřebují vlastní bílé pozadí. */
.table { --bs-table-bg: #fff; margin-bottom: 0; }
.tabulka-karta { background: #fff; border: 1px solid var(--os-ram); border-radius: 1rem; box-shadow: var(--os-stin); overflow: hidden; }
.tabulka-karta > .table-responsive > .table > thead > tr > th { border-top: 0; }

.pagination { margin-top: 1.5rem; --bs-pagination-color: var(--os-text); --bs-pagination-active-bg: var(--os-zelena); --bs-pagination-active-border-color: var(--os-zelena); --bs-pagination-hover-color: var(--os-zelena-tmava); --bs-pagination-hover-bg: var(--os-zelena-svetla); --bs-pagination-focus-bg: var(--os-zelena-svetla); }
.pagination .page-item.disabled .page-link { pointer-events: none; opacity: .5; }

.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #7b8981; }

.badge { font-weight: 500; }

.alert { border: 0; border-radius: .75rem; }
.alert-success { background: var(--os-zelena-svetla); color: var(--os-zelena-tmava); }

.paticka { background: transparent; border-top: 1px solid var(--os-ram); }
.paticka a { color: inherit; }

.prihlaseni-hlavicka img { max-height: 64px; }
body.bez-prihlaseni { background: var(--os-pozadi); }

.form-check label.error { position: absolute; width: 200px; background: white; top: 19px; z-index: 99; text-align: center; padding: 5px; }
/* .required nese i samotny <input>, takze barvit jde jen hvezdicka u popisku. */
label.error, label > span.required { color: #c0392b; }

.stopL { max-width: 500px }
.width350 { max-width: 350px; }
td.break, th.break { word-break: break-word; hyphens: auto; }
.border-lg { border-width: 3px !important; }
.box-shadow { box-shadow: var(--os-stin); }


/** body programu schuze **/
.body-programu .bod-programu { cursor: move; }
.body-programu .bod-programu a, .body-programu .bod-programu button { cursor: pointer; }
.body-programu .bod-sipky .btn { padding: .1rem .4rem; line-height: 1; }
.body-programu .bod-cislo { color: var(--os-zelena); }
.bod-placeholder { border: 2px dashed var(--os-zelena); border-radius: 1rem; background: var(--os-zelena-svetla); margin-bottom: .5rem; }


/** nahravani souboru **/
/* Vendorovane jquery.fileupload-ui.css kresli plnou zelenou plochu. Prebijeme
   ji na klidnou prerusovanou zonu, at neprebiji obsah formulare. */
.HAuploader-button
{
	background-color: #fff !important;
	border: 2px dashed var(--os-ram) !important;
	border-radius: .75rem;
	color: #6c7a72 !important;
	text-align: center !important;
	line-height: 1.5 !important;
	padding: 1.5rem !important;
}
.HAuploader-button:hover { background-color: var(--os-zelena-svetla) !important; border-color: var(--os-zelena) !important; color: var(--os-zelena-tmava) !important; }
.HAuploader-button .bi { display: block; margin-bottom: .5rem; }
.HAuploader-progress .progress-bar { background-color: var(--os-zelena); }
.HAuploader-files > div, .HAuploader-table tr td { background-color: #fff; border-color: var(--os-ram); }


/** podpis **/
/* Podpisová plocha se přizpůsobuje šířce rodiče -- na telefonu se podepisuje
   prstem, takže touch-action: none, jinak by tažení scrollovalo stránkou. */
.wrapper { position: relative; width: 100%; max-width: 100%; user-select: none; border-radius: 4px; padding: 4px; }
.signature-pad { display: block; width: 100%; max-width: 100%; height: 200px; touch-action: none; background: #fff; }
.signatureWrapper { border: 1px solid var(--os-ram); max-width: 100%; padding: 5px; background: #fff; border-radius: .5rem; }

@media (min-width: 576px)
{
	.signature-pad { height: 250px; }
}
#voteCanvas,.voteCanvas { overflow: hidden; }


/** CORE **/

.gallery { margin-right: -7px; margin-top: 10px;}
.gallery > a {   display: inline-block;  margin: 0 7px 7px 0; }

.marginT0 { margin-top: 0px !important;}.marginT, .marginT1 { margin-top: 10px !important;}.marginTT, .marginT2 { margin-top: 20px !important;}.marginTTT, .marginT3 { margin-top: 30px !important;}.marginTTTT, .marginT4 { margin-top: 40px !important;}.marginTTTTT, .marginT5 { margin-top: 50px !important;}.marginTTTTTT, .marginT6 { margin-top: 60px !important;}.marginTTTTTTT, .marginT7 { margin-top: 70px !important;}.marginTTTTTTTT, .marginT8 { margin-top: 80px !important;}
.marginB0 { margin-bottom: 0px !important;}.marginB, .marginB1 { margin-bottom: 10px !important;}.marginBB, .marginB2 { margin-bottom: 20px !important;}.marginBBB, .marginB3 { margin-bottom: 30px !important;}.marginBBBB, .marginB4 { margin-bottom: 40px !important;}.marginBBBBB, .marginB5 { margin-bottom: 50px !important;}.marginBBBBBB, .marginB6 { margin-bottom: 60px !important;}.marginBBBBBBB, .marginB7 { margin-bottom: 70px !important;}.marginBBBBBBBB, .marginB8 { margin-bottom: 80px !important;}
.marginR0 { margin-right: 0px !important;}.marginR, .marginR1 { margin-right: 10px !important;}.marginRR, .marginR2 { margin-right: 20px !important;}.marginRRR, .marginR3 { margin-right: 30px !important;}.marginRRRR, .marginR4 { margin-right: 40px !important;}.marginRRRRR, .marginR5 { margin-right: 50px !important;}.marginRRRRRR, .marginR6 { margin-right: 60px !important;}.marginRRRRRRR, .marginR7 { margin-right: 70px !important;}.marginRRRRRRRR, .marginR8 { margin-right: 80px !important;}
.marginL0 { margin-left: 0px !important;}.marginL, .marginL1 { margin-left: 10px !important;}.marginLL, .marginL2 { margin-left: 20px !important;}.marginLLL, .marginL3 { margin-left: 30px !important;}.marginLLLL, .marginL4 { margin-left: 40px !important;}.marginLLLLL, .marginL5 { margin-left: 50px !important;}.marginLLLLLL, .marginL6 { margin-left: 60px !important;}.marginLLLLLLL, .marginL7 { margin-left: 70px !important;}.marginLLLLLLLL, .marginL8 { margin-left: 80px !important;}

.paddingT0 { padding-top: 0px !important;}.paddingT1,.paddingT { padding-top: 10px !important;}.paddingT2,.paddingTT { padding-top: 20px !important;}.paddingT3,.paddingTTT { padding-top: 30px !important;}.paddingT4,.paddingTTTT { padding-top: 40px !important;}.paddingT5,.paddingTTTTT { padding-top: 50px !important;}.paddingT6,.paddingTTTTTT { padding-top: 60px !important;}.paddingT7,.paddingTTTTTTT { padding-top: 70px !important;}.paddingT8,.paddingTTTTTTTT { padding-top: 80px !important;}
.paddingB0 { padding-bottom: 0px !important;}.paddingB1,.paddingB { padding-bottom: 10px !important;}.paddingB2,.paddingBB { padding-bottom: 20px !important;}.paddingB3,.paddingBBB { padding-bottom: 30px !important;}.paddingB4,.paddingBBBB { padding-bottom: 40px !important;}.paddingB5,.paddingBBBBB { padding-bottom: 50px !important;}.paddingB6,.paddingBBBBBB { padding-bottom: 60px !important;}.paddingB7,.paddingBBBBBBB { padding-bottom: 70px !important;}.paddingB8,.paddingBBBBBBBB { padding-bottom: 80px !important;}
.paddingL0 { padding-left: 0px;}.paddingL,.paddingL1 { padding-left: 10px !important;}.paddingLL,.paddingL2 { padding-left: 20px !important;}.paddingLLL,.paddingL3 { padding-left: 30px !important;}.paddingLLLL,.paddingL4 { padding-left: 40px !important;}.paddingLLLLL,.paddingL5 { padding-left: 50px !important;}.paddingLLLLLL,.paddingL6 { padding-left: 60px !important;}.paddingLLLLLLL,.paddingL7 { padding-left: 70px !important;}.paddingLLLLLLLL,.paddingL8 { padding-left: 80px !important;}
.paddingR0 { padding-right: 0px;}.paddingR,.paddingR1 { padding-right: 10px !important;}.paddingRR,.paddingR2 { padding-right: 20px !important;}.paddingRRR,.paddingR3 { padding-right: 30px !important;}.paddingRRRR,.paddingR4 { padding-right: 40px !important;}.paddingRRRRR,.paddingR5 { padding-right: 50px !important;}.paddingRRRRRR,.paddingR6 { padding-right: 60px !important;}.paddingRRRRRRR,.paddingR7 { padding-right: 70px !important;}.paddingRRRRRRRR,.paddingR8 { padding-right: 80px !important;}

.ui-autocomplete { z-index: 9999 !important; }

.black { color: #000 !important;  }
.black a { color: #000 !important;  }
.red,.errorfont,.error { color: #E24A60 !important}
.errorfont { font-weight: bold}
.white { color: white }
a.white:hover { color: white }
.pink { color: #e24a60 }
.blue {color: #244ca5}
.lblue {color: #496bf3}
.green {color: var(--os-zelena)}
.gray {color: #808080}

.opacity100	{opacity: 1;}
.opacity90	{opacity: 0.8;}
.opacity70	{opacity: 0.7;}
.opacity50	{opacity: 0.5;}
.opacity30	{opacity: 0.3;}

.click { cursor: pointer}
.clickhover { cursor: pointer;}
.clickhover:hover { cursor: pointer; opacity: 0.7;}
.moveIT { cursor: move}

/* Classes */

.hide,.hidn,.form-inline .hidn { display: none}
.bold { font-weight: bold}
.uppercase { text-transform: uppercase }
.cls{clear:both;}
.rel { position: relative}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.ir{margin:0 0 3px 10px;}
.il{margin:0 10px 3px 0;}
.tal{text-align:left;}
.tar{text-align:right;}
.tac{text-align:center;}
.captcha { width: auto !important;}
.wrong{text-decoration:line-through;}
.odd{background:#C7CCCC;}
.text-small { font-size: 12px; }
.normal { font-size: 14px; line-height: 16px}
.bigger { font-size: 16px; line-height: 24px}
.big { font-size: 25px; line-height: 26px; }
.huge { font-size: 34px; line-height: 36px; }
.hr { overflow: hidden; height: 1px; line-height: 1px; border-top: 1px solid var(--os-ram); border-bottom: 0px; margin: 30px 0 }
.decimal { font-size: 50% !important; display: inline !important;    line-height: 2em !important;   vertical-align: text-top;}