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

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

/*
	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; }

@media print {
	#main-header { display:none; }
}



/* ====================================================================================================
	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 .column.time-passed { flex-direction:column; }
.table-view .row .column.time-passed span.insitute { font-size:1rem; white-space:nowrap; }

.table-view .row .column.patient-name { flex-direction:column; align-items:flex-start; }
.table-view .row .column.patient-name span + span { font-size:1.1rem; font-weight:500; }

.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 .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 .explanation-button { margin-bottom:10px; }
.row-preview .data-lines .explanation-button a { display:block; padding:6px 12px; text-align:center; font-size:1.4rem; font-weight:bold; background-color:#1CA864; 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; }
.row-preview .data-lines .data-line .value span + span { display:none; }

@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; }

}


.explanation-wrapper { padding:20px; background-color:#FFF; border-radius:4px; margin-bottom:10px; }
.explanation-wrapper .explanation { padding:20px; background-color:#EEE; border-radius:4px; }
.explanation-wrapper .explanation + .explanation { margin-top:10px; }
.explanation-wrapper .explanation h2 { font-size:1.4rem; font-weight:bold; line-height:1.5rem; }
.explanation-wrapper .explanation h3 { font-size:1.2rem; line-height:1.3rem; margin-bottom:10px; }


.table-view .row .column.station { display:flex; align-items:center; justify-content:space-between; margin:0; max-width:calc(25% - 6px); margin:3px; background-color:#EEE; }
.table-view .row .column.station.state-4 { border-left:5px solid #66BD00; color:#444; }
.table-view .row .column.station.state-3 { border-left:5px solid #00ABFB; color:#444; }

.table-view .row .column.station .icons { display:flex; }
.table-view .row .column.station .icons .spinner { display:none; }
.table-view .row .column.station .icons .okay { display:none; width:24px; height:24px; position:relative; }
.table-view .row .column.station .icons .okay:after { content:''; display:block; position:absolute; top:3px; left:0; width:24px; height:13px; border-left:4px solid #FF9506; border-bottom:4px solid #FF9506; transform:rotate(-45deg); }

.table-view .row .column.station.loading .icons .spinner { display:block; }
.table-view .row .column.station.loading .icons .okay { display:none; }

.table-view .row .column.station.completed .icons .spinner { display:none; }
.table-view .row .column.station.completed .icons .okay { display:block; }



/*====================================================================================
	TABLE-REGULAR
====================================================================================*/

.regular-table { border:2px solid #666; width:100%; }
.regular-table td { border:2px solid #666; padding:5px 10px; }
.regular-table thead td { padding:10px 10px; font-weight:bold; }

/*====================================================================================
	PRELOADER ANIMATION
====================================================================================*/


@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin {
	0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}

.spinner { display:block; width:24px; height:24px; position:relative; }
.spinner-circle { position:absolute; top:0; left:0; border-radius:50%; width:24px; height:24px; border:3px solid rgba(0,0,0,0.1); border-top-color:rgba(0,0,0,0.5); animation: spin 1s infinite linear; }


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

@media (max-width: 1600px) {

}