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

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


/* ====================================================================================================
	SIDEBAR
==================================================================================================== */

#sidebar { color:#FFF; text-shadow:0 2px 2px rgba(0,0,0,0.3); background:url('/assets/images/calendar-background.png') top center no-repeat #2E2E2E; background-size:contain; }
#sidebar a { color:#FFF; }

#calendar-indicator { font-size:1.8rem; font-weight:300; padding:40px 0; text-align:center; }
#calendar-indicator .day {}
#calendar-indicator .date { font-size:3.2rem; font-weight:700; padding:2px 0; text-transform:uppercase; }
#calendar-indicator .year {}

#sidebar #sidebar-menu { font-size:1.4rem; font-weight:500; padding:20px 0 20px 20px; }
#sidebar #sidebar-menu ul li { margin:0 0 2px 0; }
#sidebar #sidebar-menu ul li a { color:#FFF; padding:8px 10px; display:block; background:linear-gradient(90deg, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0.1) 100%); }
#sidebar #sidebar-menu ul li span.label { display:inline-block; vertical-align:middle; line-height:24px; }
#sidebar #sidebar-menu ul li a i { display:inline-block; width:24px; height:24px; margin-right:10px; fill:#FFF; vertical-align:middle; }

#sidebar #sidebar-menu ul li ul { font-size:1.1rem; font-weight:500; margin-top:2px; }
#sidebar #sidebar-menu ul li ul li a { padding-left:15px; background:linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.002) 100%); border-left:5px solid rgba(255,255,255,0.5); border-radius:0; }


#app-logo > h2 { color:#FFF; padding:20px 15px; background-color:#C00; text-shadow:0 2px 2px rgba(0,0,0,0.3); }
#app-logo > h2 { background:url('/assets/images/sidebar-header-background.jpg') center right no-repeat #C00; background-size:contain; }
#app-logo > h2 span { font-weight:400; }



/* ====================================================================================================
	FOOTER
==================================================================================================== */

#main-footer { margin:0 15px; border-top:2px dotted #BBB; padding:10px; }
#main-footer .credits { font-size:1.2rem; text-align:right; }
#main-footer .credits span { font-weight:700; }




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

#page-header {}
#page-header .top-line {
	display:grid;
	grid-template-columns: 1fr 200px;
	grid-template-areas: "title user";
}

#page-header .top-line { padding-bottom:15px; margin-bottom:25px; border-bottom:3px solid #BBB; }
#page-header .top-line .title-section { grid-area:title; }
#page-header .top-line .user-info-section { grid-area:user; font-size:1.2rem; }
#page-header .top-line .user-info-section a { color:#C00; }



/* ====================================================================================================
	PAGE CONTENT
==================================================================================================== */

#page-content {}


#page-content .info-boxes { display:grid; grid-gap:20px; grid-auto-flow: dense; }
#page-content .info-boxes.dashboard { grid-template-columns: repeat(3, 250px); }
#page-content .info-boxes.vehicle-card { grid-template-columns: repeat(2, 480px); }

#page-content .info-boxes .info-box { padding:20px 30px; border:3px solid #BBB; box-shadow:0 6px 8px rgba(0,0,0,0.1); }
#page-content .info-boxes a.link { font-size:1.1rem; font-weight:500; position:absolute; bottom:0; left:50%; width:100px; text-align:center; padding:7px 6px 4px 6px; margin-left:-50px; border-radius:4px 4px 0 0; background-color:#BBB; color:#FFF; text-shadow:0 1px 1px rgba(0,0,0,0.3); }

#page-content .info-boxes .vehicle-statuses { position:relative; padding-bottom:40px; }
#page-content .info-boxes .vehicle-statuses h3 { font-size:1.3rem; margin-bottom:20px; text-align:center; }
#page-content .info-boxes .vehicle-status { margin-bottom:5px; display:flex; justify-content:space-between; }
#page-content .info-boxes .vehicle-status span { flex:1 1 50%; display:inline-block; line-height:24px; font-weight:500; padding:6px 10px; text-align:center; border-radius:4px; background-color:#F2F2F2; }
#page-content .info-boxes .vehicle-status span.c { max-width:60px; display:inline-block; font-size:2.4rem; line-height:24px; font-weight:500; text-align:center; color:#FFF; padding:6px 10px; margin-right:10px; border-radius:4px; text-shadow:2px 2px 0px rgba(0,0,0,0.2); }
#page-content .info-boxes .vehicle-status span.green { background-color:#4CB971; }
#page-content .info-boxes .vehicle-status span.orange { background-color:#FF9E43; }
#page-content .info-boxes .vehicle-status span.red { background-color:#EA3628; }
#page-content .info-boxes .vehicle-status span.blue { background-color:#2EACFF; }

#page-content .info-boxes .vehicle-card { position:relative; padding-bottom:40px; }
#page-content .info-boxes .vehicle-card h3 { font-size:2.4rem; margin-bottom:20px; }
#page-content .info-boxes .vehicle-card dl { display:flex; flex-wrap:wrap; }
#page-content .info-boxes .vehicle-card dl,
#page-content .info-boxes .vehicle-card dt,
#page-content .info-boxes .vehicle-card dd { margin:0; padding:0; }
#page-content .info-boxes .vehicle-card dt,
#page-content .info-boxes .vehicle-card dd { padding:8px 12px; }
#page-content .info-boxes .vehicle-card dl dt { flex:1 1 30%; margin-bottom:4px; background-color:#DDD; }
#page-content .info-boxes .vehicle-card dl dd { flex:1 1 50%; margin-left:5px; margin-bottom:4px; background-color:#F2F2F2; }
#page-content .info-boxes .vehicle-card.lastest-actions { grid-column:1 / 3 }


#page-content .info-boxes .latest-actions {}
#page-content .info-boxes .latest-actions .action { display:flex; align-items:center; justify-content:space-between; padding:0 0 8px 0; margin:0 0 8px 0; border-bottom:1px dotted #BBB; }
#page-content .info-boxes .latest-actions .action:last-child { border-bottom:none; }
#page-content .info-boxes .latest-actions .action .label { display:flex; text-align:center; flex:1 1 0; max-width:90px; margin-right:20px; justify-content:center; align-items:center; height:100%; font-size:1.1rem; font-weight:700; padding:8px 10px; color:#FFF; text-shadow:0 2px 2px rgba(0,0,0,0.3); }
#page-content .info-boxes .latest-actions .action .label.gray { background-color:#BBB; }
#page-content .info-boxes .latest-actions .action .label.green { background-color:#4CB971; }
#page-content .info-boxes .latest-actions .action .label.orange { background-color:#FF9E43; }
#page-content .info-boxes .latest-actions .action .label.red { background-color:#EA3628; }
#page-content .info-boxes .latest-actions .action .label.blue { background-color:#2EACFF; }
#page-content .info-boxes .latest-actions .action .date { font-size:1.1rem; font-weight:700; color:#222; }
#page-content .info-boxes .latest-actions .action .data { flex:1 1 0; }
#page-content .info-boxes .latest-actions .action .view { flex:1 1 0; max-width:24px; }
#page-content .info-boxes .latest-actions .action .view i { display:block; width:24px; height:24px; }

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



/* ====================================================================================================
	LOGIN & REGISTER BOX
==================================================================================================== */

/*
	PURPLE : 6E38AD
	GREEN : 22AB5E
*/


/*

#login-box-wrapper { max-width:320px; margin:0 auto; padding-top:100px; }

#login-box-wrapper .copyright { text-align:center; font-size:1.3rem; padding:15px 0; color:#555; }
#login-box-wrapper .copyright span { color:#888; }

#login-box { padding-bottom:15px; background-color:#DDD; border-radius:4px; }

#login-box h2 {
	font-size:3.2rem;
	font-weight:500;
	color:#CCC;
	padding:25px 0;
	margin:0 0 35px 0;
	text-align:center;
	background-image: url('/assets/img/header-math-elements-back-min.png');
	background-repeat: no-repeat;
	background-position:center right;
	background-size:auto 240px;
	background-color:#222;
	border-radius:4px 4px 0 0;
}





#login-box .form-row { position:relative; margin:0 20px 25px 20px; }
#login-box .form-row label { position:absolute; top:-12px; right:10px; width:80px; text-align:center; background-color:#6E38AD; padding:4px 0px; font:1.2rem Verdana; color:#FFF; border-radius:4px; }
#login-box .form-row input[type=text],
#login-box .form-row input[type=password] { font-size:1.4rem; width:100%; padding:10px 90px 10px 10px; color:#222; border:0; background-color:rgba(255,255,255,0.8); border-radius:4px; }

#login-box .form-row.last-line a { float:left; color:#222; margin-left:5px; text-decoration:none; }
#login-box .form-row.last-line a:hover { text-decoration:underline; }
#login-box .form-row.last-line input[type=submit] { float:right; padding:10px 10px; width:120px; text-align:center; font:18px 'Open Sans'; color:#FFF; background-color:#22AB5E; border:0; border-radius:4px; }


.box { color:#FFF; margin-bottom:20px; }
.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:1.6rem; 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 .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; }

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

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

*/



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

#submission-form { padding:0; }

form.form-view:after { content:''; display:table; clear:both; }

form.form-view .form-fields { padding:20px; background-color:#EEE; border-radius:4px; margin-bottom:20px; }
form.form-view .form-row { position:relative;/* max-width:560px; */margin:0 auto 10px auto; }
form.form-view .form-row.not-limited { max-width:inherit; }
form.form-view .form-row:after { content:''; display:table; clear:both; }
form.form-view .form-row:last-child { margin-bottom:0px; }

form.form-view .form-row > label { display:block; margin:0 0 5px 10px; font-size:1.4rem; font-weight:600; color:#222; }
form.form-view .form-row input[type=text],
form.form-view .form-row input[type=password] { width:100%; padding:8px 10px; border:2px solid #CCC; background-color:#FFF; }
form.form-view .form-row textarea { width:100%; padding:8px 10px; border:2px solid #CCC; background-color:#FFF; border-radius:4px; resize:none; }
form.form-view .form-row select { width:100%; padding:8px 10px; border:2px solid #CCC; background-color:#FFF; border-radius:4px; }
form.form-view .form-row .select-drop { width:16px; height:16px; position:absolute; bottom:12px; right:12px; }
form.form-view .form-row input[type=submit] { float:right; font-size:1.6rem; margin:0 0 0 10px; padding:10px 15px; min-width:100px; text-align:center; color:#FFF; background-color:#22AB5E; border:0; border-radius:4px; text-shadow:0 1px 1px rgba(0,0,0,0.5); }

form.form-view .form-row a.button { float:right; font-size:1.6rem; margin:0 0 0 10px; display:block; padding:10px 15px; min-width:100px; text-align:center; color:#FFF; background-color:#222; border:0; border-radius:4px; text-shadow:0 1px 1px rgba(0,0,0,0.5); }
form.form-view .form-row a.button.green { background-color:#22AB5E; color:#FFF; }
form.form-view .form-row a.button.red { background-color:#C00; color:#FFF; }
form.form-view .form-row a.button.light-green { background-color:#62BB00; color:#FFF; }
form.form-view .form-row a.button.orange { background-color:#FFA500; color:#FFF; }
form.form-view .form-row a.button.blue { background-color:#00C4FF; color:#FFF; }
form.form-view .form-row a.button.yellow { background-color:#F3E43B; color:#FFF; }
form.form-view .form-row a.button.gray { background-color:#A2A2A2; color:#FFF; }

form.form-view .form-row input[type=submit].green { background-color:#22AB5E; color:#FFF; }
form.form-view .form-row input[type=submit].red { background-color:#C00; color:#FFF; }
form.form-view .form-row input[type=submit].light-green { background-color:#62BB00; color:#FFF; }
form.form-view .form-row input[type=submit].orange { background-color:#FFA500; color:#FFF; }
form.form-view .form-row input[type=submit].blue { background-color:#00C4FF; color:#FFF; }
form.form-view .form-row input[type=submit].yellow { background-color:#F3E43B; color:#FFF; }
form.form-view .form-row input[type=submit].gray { background-color:#A2A2A2; color:#FFF; }

form.form-view .form-row.required label { }
form.form-view .form-row.required label:after { content:' *'; font-size:2rem; line-height:1rem; color:#C00; }
form.form-view .form-row input[disabled] { cursor:default; opacity:0.5; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }




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

.table-elem { width:100%; font-size:1.3rem; font-weight:500; }
.table-elem .table-row { overflow:hidden; width:100%; display:flex; flex-flow:row; }
.table-elem .table-row.heading { font-size:1.4rem; font-weight:700; height:52px; background-color:#222 !important; color:#FFF !important; }
.table-elem .table-row.heading .table-column { height:52px; line-height:52px; padding:0 10px 0 24px; }
.table-view .table-row:after { content:''; display:table; clear:both; }

.table-elem .table-row:nth-of-type(even) { background-color:#EEE; }
.table-elem .table-row.selected { background-color:#AEE4F1 !important; background-color:#775454 !important; color:#FFF; }
.table-elem .table-row.selected a { color:#FFF; }
.table-elem .table-row.selected svg { fill:#FFF !important; }
.no-touchevents .table-elem .table-row:hover { background-color:#FFFFD3; }

.table-elem .table-row .table-column { position:relative; padding:8px 10px 8px 24px; line-height:24px; flex:1 1 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-elem .table-row .table-column:after { content:''; display:table; clear:both; }
.table-elem .table-row .table-column:last-child { text-align:right; }

.table-elem .table-row .table-column.fixed { flex:0 1 120px !important; }
.table-elem .table-row .table-column.hidden { display:none !important; }

.table-elem .table-row .table-column.actions a { display:inline-block; width:24px; height:24px; vertical-align:middle; }
.table-elem .table-row .table-column.actions svg { display:block; fill:#222; width:24px; height:24px; }
.table-elem .table-row .table-column.actions .red svg { fill:#C00; }
.table-elem .table-row .table-column.actions .green svg { fill:#62BB00; }

.table-elem .table-row-preview { background-color:#9A8A8A; padding:15px; }
.table-elem .table-row-preview .prop { display:flex; margin:0 0 4px 0; }
.table-elem .table-row-preview .prop label,
.table-elem .table-row-preview .prop .value { flex:1 1 60%; }
.table-elem .table-row-preview .prop label { display:flex; align-items:center; justify-content:flex-end; max-width:120px; margin-right:4px; }
.table-elem .table-row-preview .prop label { clear:both; padding:5px 10px 5px 0; background-color:#8A6A6A; color:#FFF; border-radius:4px; text-align:right; }
.table-elem .table-row-preview .prop .value { padding:5px 10px 5px 10px; background-color:#FFF; border-radius:4px; text-overflow:ellipsis; overflow:hidden; }
.table-elem .table-row-preview .prop .value a { display:inline-block; width:24px; height:24px; vertical-align:middle; }
.table-elem .table-row-preview .prop .value svg { display:block; fill:#222; width:24px; height:24px; vertical-align:middle; border-radius:4px; }
.table-elem .table-row-preview .prop .value .red svg { fill:#C00; }
.table-elem .table-row-preview .prop .value .green svg { fill:#62BB00; }


/* RESPONSIVE TABLE FIELDS
--------------------------------------------------------------------------------------------------*/

@media (max-width:900px){
	.table-elem .table-row .table-column { display:none; }
	.table-elem .table-row .table-column:last-child,
	.table-elem .table-row .table-column.sm { display:block; }
}

@media (max-width:480px){
	.table-elem .table-row .table-column,
	.table-elem .table-row .table-column.sm { display:none; }
	.table-elem .table-row .table-column:last-child,
	.table-elem .table-row .table-column.ss { display:block; }
}


/* SORTING BUTTONS
--------------------------------------------------------------------------------------------------*/

.table-row.heading .table-column .sort-buttons { position:absolute; top:0; left:4px; width:16px; height:52px; padding-top:8px; }
.table-row.heading .table-column .sort-buttons a.sort-button { width:16px; height:16px; border-radius:2px; display:block; overflow:hidden; }
.table-row.heading .table-column .sort-buttons a.sort-button + a.sort-button { margin-top:4px; }
.table-row.heading .table-column .sort-buttons a.sort-button svg { width:14px; height:14px; display:block; fill:#FFF; margin:0 1px; }
.table-row.heading .table-column.sorted-up,
.table-row.heading .table-column.sorted-down { color:#C00; }
.table-row.heading .table-column.sorted-up .sort-buttons a.sort-button.up svg { fill:#C00; }
.table-row.heading .table-column.sorted-down .sort-buttons a.sort-button.down svg { fill:#C00; }







/*====================================================================================
	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); }
}
.preloader { width:100%; height:24px; position:relative; }
.loading {
	position:absolute;
	top:50%; left:50%;
	margin-top:-12px; margin-left:-12px;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	border: 4px solid #CCC;
	border-top-color:#222;
	-webkit-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;

}

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

@media (max-width: 1000px) {

}

@media (max-width: 460px) {


}