/* ====================================================================================================
	PARTIALS
==================================================================================================== */

@import url('partials.css?v=1.0.004');

/*
	BLUE : 2E3092
	DARK ORANGE : F04E27
	MIDDLE ORANGE : F47B25
	LIGHT ORANGE : FAAB1A
	BROWN : 563B1D
	PURPLE : 6E38AD
	GREEN : 22AB5E
*/

#site-wrapper { padding-bottom:50px; }



/* ====================================================================================================
	LOGIN
==================================================================================================== */


#login-box-wrapper { position:relative; }

#login-box { max-width:420px; }

#login-box .form-row { position:relative; margin-bottom:10px; }
#login-box .form-row label { font-weight:600; display:block; margin-bottom:4px; }
#login-box .form-row input[type=text],
#login-box .form-row input[type=password] { font:16px 'Arial'; width:100%; padding:10px 15px; border:2px solid #CCC; background-color:#FFF; }

#login-box .form-row.last-line a { float:left; font-size:1.4rem; color:#888; margin-top:12px; margin-left:5px; text-decoration:none; }
#login-box .form-row.last-line a:hover { text-decoration:underline; color:#0DC3E1; }
#login-box .form-row.last-line input[type=submit] { font-weight:bold; width:100%; padding:15px 20px; text-align:center; color:#FFF; background-color:#0DC3E1; border:0; border-radius:4px; }


.box { color:#FFF; margin-bottom:10px; }
.box.box-hidden { display:none; }
.box .content { position:relative; padding:15px 20px; border-radius:4px; }
.box .content ul { margin:0; padding:0; }
.box .content ul li { margin:0; padding:0; list-style:none; }
.box .content ul li a { color:inherit; font-weight:bold; }

.box .content h4 { font-size:2.5rem; font-weight:700 !important; padding-bottom:10px; border-bottom-width:2px; border-bottom-style:solid; margin-bottom:10px; }
.box.warning-box .content h4 { border-color:#753A15; }
.box.success-box .content h4 { border-color:#088019; }
.box.result-box .content h4 { border-color:#222222; }
.box.error-box .content h4 { border-color:#BF0E4A; }
.box.info-box .content h4 { border-color:#0D72A7; }

.box.warning-box .content { background-color:#FFEE99; color:#753A15; }
.box.success-box .content { background-color:#9EE292; color:#088019; }
.box.result-box .content { background-color:#EEEEEE; color:#222222; }
.box.error-box .content { background-color:#FBC8C8; color:#BF0E4A; }
.box.info-box .content { background-color:#ABDCFF; color:#0D72A7; }

.box .content.with-icon { padding-left:80px; }
.box .content .icon { display:none; }
.box .content.with-icon .icon { display:block; }

.box .icon { position:absolute; top:50%; left:18px; width:48px; height:48px; margin-top:-24px; float:left; }
.box.warning-box .icon svg { fill:#753A15; }
.box.success-box .icon svg { fill:#088019; }
.box.error-box .icon svg { fill:#BF0E4A; }
.box.info-box .icon svg { fill:#0D72A7; }

.login.box {  margin-bottom:0; }
.login.box.success-box .content { background-color:#44A510; color:#FFF }
.login.box.error-box .content { background-color:#CE2626; color:#FFF; }



/* ====================================================================================================
	HEADING
==================================================================================================== */

#main-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }

.title-section { }
.title-section h1 { font-size:4.2rem; line-height:1; }
.title-section h2 { font-size:2.15rem; line-height:1; }

.logout-section i { display:block; width:48px; height:48px; }
.logout-section i svg { display:block; width:48px; height:48px; }


/* ====================================================================================================
	TABS CONTAINER
==================================================================================================== */

.tabs-container { margin:0 0 20px 0; display:flex; flex-wrap:wrap; }
.tabs-container a { font-size:1.2rem; font-weight:bold; display:flex; justify-content:center; text-align:center; align-items:center; flex:1 1 0; padding:15px 15px; margin:0 0 0 2px; border-bottom:4px solid #CCC; background-color:#E2E2E2; }
.tabs-container a.selected { border-bottom:4px solid #185A94; background-color:#2989DC; color:#FFF; }


/* ====================================================================================================
	PAGINATION
==================================================================================================== */

.pagination { font-size:1.4rem; font-weight:500; display:flex; align-items:center; }
.pagination > div + div { margin-left:10px; }

.pagination .pages { font-size:0; }
.pagination .pages a { display:inline-block; font-size:1rem; margin:0 0 0 5px; min-width:42px; text-align:center; padding:12px 12px; background-color:#EEE; color:#222; border-radius:4px; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.pagination .pages a.current { background-color:#FC0 !important; }
.pagination .pages a.disabled { cursor:default; background-color:transparent !important; min-width:auto; padding:12px 4px; color:#BBB !important; text-shadow:none !important; }
.pagination .pages a svg { position:relative; top:3px; width:16px; height:16px; fill:#333; }
.pagination .pages form { display:inline-block; vertical-align:top; }
.pagination .pages input[type=text] { display:inline-block; font-size:1.8rem !important; font-weight:bold; margin:0 0 0 5px; text-align:center; width:60px; height:42px; padding:0 12px; border:3px solid #2989DC; border-radius:4px; vertical-align:top; background-color:#2989DC; color:#FFF; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }
.pagination .pages input[type=text]:focus { border:3px solid #CCC; background-color:#FFF; color:#222; }
.pagination .pages input[type=submit] { display:none; }

@media (max-width: 960px) {

	.pagination { flex-direction:column; }
	.pagination .pages { display:flex; justify-content:center; margin:0 0 20px 0; }
	.pagination .page-info { text-align:center; }

}


/* ====================================================================================================
	TABLE VIEW
==================================================================================================== */

.table-view { width:100%; margin-bottom:30px; }
.table-view .row { width:100%; display:flex; flex-direction:row; }
.table-view .row .column { font-size:1.4rem; font-weight:bold; display:flex; flex:1 1 0; padding:10px 15px; align-items:center; margin:1px 1px 0 1px; /* text-overflow:ellipsis; overflow:hidden; white-space:nowrap; */ background-color:#E2E2E2; }
.table-view .row .column.hs {  }
.table-view .row .column.hm {  }
.table-view .row .column.hx { display:none; }
.table-view .row .column.age { max-width:80px; justify-content:center; }
.table-view .row .column.gender { max-width:90px; justify-content:center; }
.table-view .row .column.time-passed { max-width:140px; }
.table-view .row:nth-child(odd) .column { background-color:#CCC; }
.table-view .row.too-late .column { background-color:#FFB3B8; }
.table-view .row.too-late:nth-child(odd) .column { background-color:#FF99A0; }
.table-view .row.title { font-size:1.6rem; font-weight:bold; }
.table-view .row.title .column { padding:15px 15px; background-color:#C00; color:#FFF; }
.table-view .row .column .te { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-view .row .column.lc { min-width:260px; }
.table-view .row .column.tac { justify-content:center; text-align:center; }


@media (max-width: 1400px) {

	.table-view .row .column.hs { display:flex; }
	.table-view .row .column.hm { display:none; }
	.table-view .row .column.hx { display:none; }

}


@media (max-width: 960px) {

	.table-view .row .column.hs { display:none; }
	.table-view .row .column.hm { display:none; }
	.table-view .row .column.hx { display:none; }

}


/*
.row-preview { background-color:#444; padding:15px; }
.row-preview dl { margin-bottom:0; }
.row-preview dl dt { font-weight:bold; float:left; clear:both; width:240px; padding:5px 10px; background-color:#FFBF2F; border-radius:4px 0 0 4px; text-align:right; }
.row-preview dl dd { margin-left:154px; padding:5px 10px 5px 10px; background-color:#FFF; border-radius:0 4px 4px 0; margin-bottom:4px; text-overflow:ellipsis; overflow:hidden; }
.row-preview dl dd svg { fill:#222; width:24px; height:24px; margin:0 5px; vertical-align:middle; border-radius:4px; }
.row-preview dl dd .red svg { fill:#C00; width:21px; height:21px; }
.row-preview dl dd .green svg { fill:#62BB00; width:21px; height:21px; }
*/

.row-preview { background-color:#444; padding:15px; }
.row-preview .data-lines {  }
.row-preview .data-lines .pdf-button { margin-bottom:10px; }
.row-preview .data-lines .pdf-button a { display:block; padding:6px 12px; text-align:center; font-size:1.4rem; font-weight:bold; background-color:#F74949; color:#FFF; border-radius:4px; }
.row-preview .data-lines .data-line { display:flex; margin-bottom:4px; }
.row-preview .data-lines .data-line .label { max-width:240px; display:flex; align-items:center; justify-content:flex-end; flex:1 1 0; font-weight:bold; padding:5px 10px; background-color:#FFBF2F; border-radius:4px 0 0 4px; text-align:right; }
.row-preview .data-lines .data-line .value { display:flex; align-items:center; flex:1 1 0; padding:5px 10px; background-color:#FFF; border-radius:0 4px 4px 0; }


@media (max-width: 960px) {

	.row-preview .data-lines .data-line { display:block; margin-bottom:4px; }
	.row-preview .data-lines .data-line .label { max-width:initial; justify-content:flex-start; border-radius:4px 4px 0 0; }
	.row-preview .data-lines .data-line .value { margin:0; border-radius:0 0 4px 4px; margin-bottom:5px; }

}

/* ====================================================================================================
	MEDIA QUERIES
==================================================================================================== */

@media (max-width: 1600px) {

}