/* ====================================================================================================
	FONT IMPORTS
==================================================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&subset=latin-ext,latin');


/* ====================================================================================================
	NORMALIZE AND FINE TUNNING
==================================================================================================== */

html, body { padding:0; margin:0; }
img { vertical-align:middle;border:0; }

input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;border-radius:0;}
input[type=submit], button { cursor:pointer; }

svg:not(:root){ overflow:hidden; }
optgroup{ font-weight:bold; }
table{ border-collapse:collapse;border-spacing:0; }
td,th{ padding:0; }

:focus { outline:0; }
select, select:active, select:hover, select:focus { outline:0; outline-style: none; }

p { padding:0; margin:0; }
a, a:hover, a:active, a:visited { color:#222; text-decoration:none; }

ul, ol { padding:0; margin:0; list-style:none; }
li { padding:0; margin:0; list-style:none; }


.fl { float:left !important; }
.fr { float:right !important; }
.cl { clear:left !important; }
.cr { clear:right !important; }
.cb { clear:both !important; }

.ofh { overflow:hidden !important; }
.db { display:block !important; }
.dn { display:none !important; }

.tl { text-align:left; }
.tc { text-align:center; }
.tr { text-align:right; }

select, input { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; outline-style: none; }

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.f-dropdown { outline:0 !important; }
.class-dropdown { outline:none !important; }

.break-after { page-break-after:always; }



/* ====================================================================================================
	TYPOGRAPHY
==================================================================================================== */

html,
body { height: 100%; }

html { font-size: 62.5%; }
body { font:1.6rem/2rem "Helvetica Neue",Helvetica,Arial,sans-serif; color:#222; background-color:#F2F2F2; cursor:default; }


h1 { font-family:"Open Sans"; font-size:4.6rem; line-height:5.0rem; padding:0; margin:0 0 0 0; }
h2 { font-family:"Open Sans"; font-size:3.2rem; line-height:3.6rem; padding:0; margin:0 0 0 0; }
h3 { font-family:"Open Sans"; font-size:2.4rem; line-height:2.8rem; padding:0; margin:0 0 0 0; }
h4 { font-family:"Open Sans"; font-size:1.8rem; line-height:2.2rem; padding:0; margin:0 0 0 0; }

.no-touchevents h1,
.no-touchevents h2,
.no-touchevents h3,
.no-touchevents h4 { font-weight:400; }
.no-touchevents { font-weight:400; }



/* ====================================================================================================
	HEADER
==================================================================================================== */

header { max-width:640px; margin:0 auto; padding:30px 0; }
header .logo { text-align:center; }
header .logo img { height:60px; max-width:100%; }
header p { font-size:0.9rem; text-align:center; }




/* ====================================================================================================
	MISC & GENERAL STYLES
==================================================================================================== */

.boxed-layout { width:980px; margin:0 auto;	padding:0 0 0 0; }
.boxed-layout:after { content:''; display:table; clear:both; }
.group:after { content:''; display:table; clear:both; }
.clearfix:after { content:''; display:table; clear:both; }

#site-wrapper { min-width:360px; }
.page-content { max-width:640px; margin:0 auto 50px auto; }
.page-content.large-view { max-width:96%; margin:0 auto 50px auto; }





/*====================================================================================
	BOXES
====================================================================================*/

.box { color:#FFF; margin-bottom:20px; font-size:1.6rem; text-shadow:none; }
.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:2rem; font-weight:600 !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.warning-box .content a,
.box.warning-box .content a:active,
.box.warning-box .content a:hover,
.box.warning-box .content a:visited { color:#753A15; }

.box.success-box .content a,
.box.success-box .content a:active,
.box.success-box .content a:hover,
.box.success-box .content a:visited { color:#088019; }

.box.result-box .content a,
.box.result-box .content a:active,
.box.result-box .content a:hover,
.box.result-box .content a:visited { color:#222222; }

.box.error-box .content a,
.box.error-box .content a:active,
.box.error-box .content a:hover,
.box.error-box .content a:visited { color:#BF0E4A; }

.box.info-box .content a,
.box.info-box .content a:active,
.box.info-box .content a:hover,
.box.info-box .content a:visited { color:#0D72A7; }

.box p + p { margin-top:5px; }



/* ====================================================================================================
	GENERAL VISUAL STYLES
==================================================================================================== */

.white-box { background-color:#FFF; box-shadow:0 3px 3px rgba(0,0,0,0.1); padding:20px; margin-bottom:20px; }



/* ====================================================================================================
	FORM-VIEW
==================================================================================================== */

.form-view { font-size:1.6rem; }
.form-view h1 { font-size:3.2rem; }
.form-view h3 { font-weight:400; margin-bottom:30px; }
.form-view form {}
.form-view h1 + form { margin-top:30px; }

.form-view .field { margin-bottom:20px; }
.form-view .field label { font-size:1.4rem; font-weight:600; display:block; }
.form-view .field input[type=text],
.form-view .field textarea { width:100%; padding:6px 12px; border:2px solid #DDD; resize:none; }
.form-view .field select { width:100%; padding:6px 12px; border:2px solid #DDD; }
.form-view .field .date-fields { display:flex; width:100%; }
.form-view .field select.date-select { flex:1 1 0; width:auto; margin-left:10px; }
.form-view .field select.date-select.first { margin:0; }

.form-view .field .disabled-field { padding:6px 12px; background-color:#EEE; color:#AAA; }




/* ====================================================================================================
	BUTTONS
==================================================================================================== */

.button { display:inline-block; width:100%; padding:12px 12px; text-align:center; border:none; }
.button.small { font-size:1.4rem; font-weight:600; padding:8px 10px; }
.button.green { color:#FFF; background-color:#52B51D; }
.button.orange { color:#FFF; background-color:#FA0; }
.button.red { color:#FFF; background-color:#BB3636; }
.button.gray { color:#222; background-color:#AAA; }
.button.color-a { color:#FFF; background-color:#512B58; }
.button.color-b { color:#FFF; background-color:#FE346E; }
.button.color-c { color:#FFF; background-color:#21BF73; }
.button.color-d { color:#FFF; background-color:#7A59B5; }
.button.color-e { color:#FFF; background-color:#FF815A; }





/* ====================================================================================================
	SEARCH-BAR
==================================================================================================== */

.search-bar { display:flex; }
.search-bar .search-box { flex:1 1 0; padding:15px; background-color:#FFF; margin-bottom:20px; box-shadow:0px 4px 15px rgba(0,0,0,0.1); }
.search-bar .search-box + .search-box { flex:0 1 0; margin-left:15px; }
.search-bar a { font-size:1.2rem; font-weight:600; display:inline-block; height:34px; line-height:34px; padding:0 10px; background-color:#CCC; white-space:nowrap; }
.search-bar a.green { color:#FFF; background-color:#52B51D; }
.search-bar a.orange { color:#FFF; background-color:#FA0; }
.search-bar a.blue { color:#FFF; background-color:#03A9F4; }
.search-bar a.red { color:#FFF; background-color:#BB3636; }
.search-bar a.gray { color:#222; background-color:#AAA; }
.search-bar a.purple { color:#FFF; background-color:#9A62A7; }

.search-bar input[type=date],
.search-bar input[type=text],
.search-bar select { font-size:1.2rem; padding:5px 10px; border:2px solid #CCC; }
.search-bar input[type=submit] { font-size:1.2rem; font-weight:600; padding:5px 10px; border:none; background-color:#BB3636; height:34px; color:#FFF; }

.search-bar .search-box form {  }
.search-bar .search-box form .search-column { float:left; }
.search-bar .search-box form .search-column.last { float:right; }
.search-bar .search-box form .search-column + .search-column { margin-left:10px; }
.search-bar .search-column label { display:block; font-size:1.1rem; font-weight:600; }



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

.table-view { padding:30px; }
.large-view .table-view { padding:0; }
.table-view table { width:100%; background-color:#FFF; }
.table-view table,
.table-view td { border:2px solid #222; }
.table-view td { padding:6px; text-align:center; }
.table-view td.tl { text-align:left; }

.table-view table thead tr td { font-size:2rem; padding:20px; background-color:#222; color:#FFF; }
.table-view table thead tr + tr td { font-size:1.6rem; padding:10px; background-color:#444; }

.table-view table tbody tr td.action-column { position:relative; }
.table-view table tbody tr td.action-column div { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.table-view table tbody tr td a.icon { display:block; width:24px; height:24px; }
.table-view table tbody tr td a.icon i { display:block; width:24px; height:24px; }

.table-view table tbody tr td.date-column p + p { display:none; font-size:1.1rem; line-height:1.1rem; }
.unhide .table-view table tbody tr td.date-column p + p { display:block; }

.table-view table tbody tr td.numeric-column { font-size:1.8rem; font-weight:600; }
.table-view table tbody tr.total td { font-size:1.8rem; background-color:#9E4660; color:#FFF; text-shadow:0 2px 2px rgba(0,0,0,0.4); }


/* ====================================================================================================
	PASSWORD-VIEW
==================================================================================================== */

.password-view { display:flex; flex-wrap:wrap; }
.password-view .station { flex:1 1 22%; text-align:center; padding:50px; width:15%; margin:0 1% 1% 1%; border:4px solid #222; }
.password-view .station h4 { font-weight:400; font-size:2rem; margin-bottom:5px; }
.password-view .station p { font-weight:bold; font-size:3rem; }




/* ====================================================================================================
	PRINT
==================================================================================================== */

@media print {

	body { background-color:#FFF !important; }
	header, .page-content { display:none; }

}