/* ************************************************************
===============================================================
-- Author: Go Media Ltd (www.gomedia.co)
===============================================================
************************************************************ */

/* 
************************
	Misc Styles
************************
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,700');
@import url(../../blocks/fontawesome/css/all.css);



header h1 { color: #4FABE8; }
.login-container .right { background-color: #4FABE8; }
.left-col nav a { color: #4FABE8; } 
.left-col nav a:hover, .left-col nav a.selected { border-left: 5px solid #4FABE8; }



html { height: 100%; position: relative; }
body {
	margin:0 0 0 0;
	padding:0;
	font-family:'Montserrat',sans-serif;
	font-size:14px;
	font-weight:400;
	color:#263238;
	line-height:2.3em;
	background:#f4f8f9;
	background-repeat:no-repeat; 
	background-position:center;
	background-size:cover;
	background-attachment: fixed;
	position: absolute;
	min-height: 100%;
	width: 100%;
}

/* Font, Text Styles */
h1 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 20px 0; font-size:2.2em; line-height:1em; font-weight:400; color:#78909c;  }
h2 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 20px 0; font-size:2.0em; line-height:1em; font-weight:400; color:#78909c; }
h3 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 20px 0; font-size:1.8em; line-height:1em; font-weight:400; color:#78909c; }
h4 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 20px 0; font-size:1.4em; line-height:1em; font-weight:400; color:#78909c; }
h5 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 20px 0; font-size:1.2em; line-height:1em; font-weight:500; color:#78909c; text-transform: uppercase; }
h6 { font-family:'Montserrat',sans-serif; padding:0; margin:0px 0 15px 0; font-size:1em; line-height:1em; font-weight:700; color:#78909c; text-transform: uppercase; }

::selection { background:#263238; color:#FFF; }
::-moz-selection { background:#263238; color:#FFF; }
a { text-decoration:none; color:#78909c; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; }
a:hover { text-decoration:none; color:#78909c; }
p { margin-bottom:30px; }
strong { font-weight:600; }
em { font-style:italic; }
small { font-size:0.9em; }
.required { color:#d75e5e; }
ul { list-style:disc; line-height:normal; list-style-position:inside; margin-left:10px; }
.clear, .clr { clear:both; }
.no-margin-btm { margin-bottom: 0 !important; }
.padding { padding:40px; }
.left { float: left; }
.right { float: right; }
.white-bg { background: #FFF; }

/* Loading Overlay */
#loading-overlay { background:rgba(0,0,0,0.9); position:fixed; width:160px; height:40px; padding:20px 0; top:50%; left:50%; margin:-30px 0 0 -80px; z-index:100; display:none; }
#loading-overlay img { z-index:100; display:block; margin:auto; }

/* Messages */
.success, .notification, .error { padding:15px; font-size:0.9em; font-weight:500; margin-bottom:20px; }
.success li, .notification li, .error li { list-style:none; }
.success span, .notification span, .error span { margin-right:5px; }
.success { background:#4cd137; color:#FFF; }
.notification { background:#dcdde1; color:#718093; }
.error { background:#e84118; color:#FFF; }

/* Form Elements */
.button { cursor:pointer; padding:20px 50px; text-transform:uppercase; line-height:3em; font-size:0.9em; font-weight:600; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; border-radius: 2px; }

.button.green { color:#FFF; background:#2ecc71; border:0; }
.button.green:hover { background:#27ae60; }

.button.red { color:#FFF; border:none; background:#e85647; }
.button.red:hover { background:#c83e2f; }

.button.grey { color:#FFF; border:none; background:#95a5a6; }
.button.grey:hover { background:#7f8c8d; }

.button.pink { color:#FFF; border:none; background:#ea1d75; }
.button.pink:hover { background:#b12662; }

a.button { padding:0px 20px; }
a.button span.fa { margin-right:6px; }
button.button { padding: 6px 30px; }

.function-btn { margin: 0 0 10px 10px; float: right; font-size: 0.75em; }

form .area { margin: 10px 0 50px 0; }
form .area .white-bg { border-radius: 4px; border: 1px solid #d8e2e4; }
form .row { margin-bottom:30px; }
form .row.col1 { width:100%; float:none; clear:both; }
form .row.col2 { width:48%; float:left; }
form .row.col2.right { float:right; }

form .row label { font-size:0.9em; letter-spacing: 0.0.5em; font-weight:600; margin-bottom:6px; line-height:normal; color: #263238; }
form .row label small { font-size:0.8em; font-weight:500; margin:0; }

form .row input[type=text], form .row input[type=password], form .row input[type=email], form .row input[type=number], form .row input[type=file] { background:#FFF; border: 0; border-bottom: 1px solid #cfd8dc; font-size:0.9em; font-weight:400; font-family:'Montserrat',sans-serif; padding:10px 0; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; height:40px; }
form .row input[type=text]:focus, form .row input[type=password]:focus, form .row input[type=email]:focus, form .row input[type=number]:focus, form .row input[type=file]:focus { border-color:#263238; }

form .row select { background:#FFF url(../img/icon-dropdown.png) no-repeat right 10px center; border: 0; border-bottom: 1px solid #cfd8dc; font-size:0.9em; font-weight:400; font-family:'Montserrat',sans-serif; padding:10px 0; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; -webkit-appearance: none;border-radius: 0; height:40px; }
form .row select:focus { border-color:#263238; }

form .row textarea { background:#FFF; border: 0; border-bottom: 1px solid #cfd8dc; font-size:0.9em; font-weight:400; font-family:'Montserrat',sans-serif; padding:10px 0; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height:100px; line-height:2.2em; }
form .row.col1 textarea { min-width:100%; max-width:100%; width: 100%; }
form .row.col2 textarea { min-width:100%; max-width:100%; width: 100%; }
form .row textarea:focus { border-color:#263238; }

input[type=text], input[type=password], input[type=number],input[type=email], textarea, select { outline:0; -webkit-appearance: none; border-radius:0; }
input[type=submit], input[type=button] { -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; }
input[type=submit].button { padding:5px 40px; }
form input[readonly] { background: #EFEFEF !important; padding: 10px 5px !important; }

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder { color: #99aab2; }

.multi-select { height: 150px !important; }

/* Overlay */
.page-overlay { position:fixed; height:100%; width:100%; background:#FFF; background:rgba(255,255,255,0.9); z-index:6; top:0; left:0; display:none; }
.page-overlay img { position:fixed; top:50%; left:50%; margin:-24px 0 0 -24px; }
.page-overlay .overlay-close { position:fixed; top:0; right:0; font-size:2em; color:#4a5054; cursor:pointer; padding:40px; background:#FFF; }

.modal { width: 700px; position: absolute; top:40px; left:50%; margin:0 0 0 -350px; background: #FFF; z-index: 999; display: none; -webkit-box-shadow: 0px 0px 21px -2px rgba(0,0,0,0.44); -moz-box-shadow: 0px 0px 21px -2px rgba(0,0,0,0.44); box-shadow: 0px 0px 21px -2px rgba(0,0,0,0.44); }

.dataTables_wrapper .dataTables_processing { background-color: #FFFFFF !important; color: #333 !important; height: 150px !important; border: 1px solid #B6B6B6 !important; }

.tooltip { padding: 10px !important; background-color: #FFF !important; border: 1px solid #d8e2e4 !important; font-family: 'Montserrat',sans-serif !important; line-height: 1.6em !important; text-align: center !important; }

#addressPostcode { text-transform: uppercase; }

.fa-external-link-alt { font-size: 0.6em !important; }

/* 
************************
	Login Page
************************
*/

.login-container { max-width: 700px; margin: 50px auto; background: #FFF; min-height: 430px; }
.login-container .left { width: 50%; min-height: 430px; border: 1px solid #d8e2e4; border-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.login-container .right { width: 50%; min-height: 430px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.login-container .left .far { position: absolute; margin: 10px 0 0 10px; }
.login-container .left input[name=username], .login-container .left input[name=password] { padding-left: 37px; }

.login-container .right { position: relative; font-size: 0.65em; }
.login-container .right > div { position: absolute; bottom: 0; right: 0; }
.login-container .right h1, .login-container .right h2 { color: #FFF; text-align: right; margin: 0; }
.login-container .right h2 { margin: 0 0 10px 0; }


/* 
************************
	Left Column
************************
*/

.left-col { width: 200px; text-align: center; background: #FFF; border-right: 1px solid #d8e2e4; min-height: 100%; float: left; position: absolute; }
.left-col > .fa-fw { padding: 30px 0; text-align: center; display: block; width: 100%; font-size: 1.4em; }

.left-col nav ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.left-col nav ul li a, .left-col nav ul li ul li a { display: block; margin-bottom: 10px; padding: 10px 20px; font-weight: 400; border-left: 3px solid #FFF; cursor: pointer; }
.left-col nav ul li a span.fa-chevron-down, .left-col nav ul li a span.fa-chevron-up { font-size: 0.7em; color: #263238; margin-left: 10px; }
.left-col nav ul li ul { display: none; }
.left-col nav ul li ul li a { padding-left: 35px; margin-top: -10px; }
.left-col nav a strong { font-size: 0.9em; margin-left: 7px; font-weight: 500; }
.left-col nav a:hover { background-color: #f4f8f9; }
.left-col nav a.selected { background-color: #f4f8f9; }

.left-col.advanced { width: 200px; }
.left-col.advanced nav a strong { display: inline; }

.left-col.basic { width: 75px; }
.left-col.basic nav a strong { display: none; }
.left-col.basic nav ul { text-align: center; }
.left-col.basic nav ul li a span.fa-chevron-down, .left-col.basic nav ul li a span.fa-chevron-up { font-size: 0.7em; color: #263238; float: right; margin: 5px 0 0 5px; }
.left-col.basic nav ul li ul li a { padding-left: 0; font-size: 0.8em; }


/* 
************************
	Main Column / Header
************************
*/

.main-container { width: calc(100% - 281px); float: right; padding: 40px; }

header { height: 80px; line-height: 80px; background: #FFF; border-bottom: 1px solid #d8e2e4; float: right; }
header h1 { line-height: 80px; font-size: 1.4em; padding-left: 40px; font-weight: 500; float: left; }
header h1.hidden { display: none; }
header .right .item { float: left; }
header .right .item a.fa-fw, header .right .item span { height: 80px; line-height: 80px; width: 80px; text-align: center; font-size: 1.4em; cursor: pointer; color: #263238; } 
header .right .item:hover { background: #f4f8f9; }
header .alerts-container .alert-sub-icon { height:20px; width:20px; background:#E43235; color:#FFF; margin:-65px 0 0 45px; font-family:'Montserrat',sans-serif; font-size:0.6em; line-height:20px; font-weight:500; text-align:center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; }
header .alerts-container .alert-dropdown { display:none; z-index:10; width:380px; margin:0 0 0 -290px; top:80px; position:absolute; }
header .alerts-container .alert-dropdown ul { border:1px solid #d8e2e4; border-top:0; background:#FFF; position:relative; list-style:none; padding:20px 30px 0 30px; margin:0 0 0 0; width:320px; font-size:1em; font-weight:400; font-family:'Montserrat',sans-serif; text-align:left; max-height:280px; overflow:auto; }
header .alerts-container .alert-dropdown ul li { display: block; margin-bottom:20px; }
header .alerts-container .alert-dropdown ul li a { display: block; }
header .alerts-container .alert-dropdown ul li a .fa { width: auto; height: auto; line-height: normal; }
header .alerts-container .alert-dropdown ul li .fa { margin-right:10px; font-size:0.9em; }
header .alerts-container .alert-dropdown ul li strong { font-weight:800; }

/* 
************************
	Misc
************************
*/

.quote-steps .item { height: 40px; line-height: 40px; text-transform: uppercase; margin-bottom: 30px; float: left; width: 50%; margin-right: 0; background: #FFF; text-align: center; font-weight: 500; font-size: 0.9em; }
.quote-steps .item.selected { background: #4FABE8; color: #FFF; }
.quote-steps .item.previous { background: #78909c; color: #FFF; }

/* Dashboard */
.dash-container .dash-col { width: 46.7%; margin: 1.5%; float: left; }
.dash-container .dash-module { background-color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #d8e2e4; margin: 0 0 30px 0; }

/* Page Header */
.page-header { margin-bottom: 40px; }

/* Table actions dropdown */
.dataTable tbody tr td .fa-ellipsis-h { font-size: 2.6em; cursor: pointer; line-height: 1em; }
.dataTable tbody tr td > .fa-eye { font-size: 1.3em; cursor: pointer; line-height: 1.8em; float: left; }
.dataTable tbody tr td .action-dd { position: absolute; background: #fefefe; border: 1px solid #d8e2e4; text-align: left; margin: 0; list-style: none; width: auto; min-width: 200px; right: 0; padding: 10px; display: none; z-index: 99999; }
.dataTable tbody tr td .action-dd li a { padding: 5px 5px; display: block; font-weight: 500; font-size: 1.1em; cursor: pointer; }
.dataTable tbody tr td .action-dd li a:hover { color: #000; }
.dataTable tbody tr td strong.red { color: #e84118; }

/* Permissions */
.permission-container .area { width: 50%; float: left; }
.permission-container .area label { margin-right: 10px; }
.permission-container .area .fa-check { color: #2ecc71; }
.permission-container .area .fa-times { color: #e74c3c; }

/* Questionnaire */
.question-container .question-item { width: auto; margin: 0 0 0 0; list-style: none; padding: 0; }
.question-container .question-item .header { background: #78909c; color: #FFF; line-height: 45px; cursor: move; margin: 1px 0 0 0; }
.question-container .question-item h5 { float: left; color: #FFF; line-height: 45px; margin: 0; padding: 0 30px 0 10px; }
.question-container .question-item .fa-fw { float: right; cursor: pointer; line-height: 45px; margin-right: 10px; }
.question-container .question-item .question-details { display: none; border: 1px solid #78909c; padding: 20px; }
.question-container .question-item .placeholder { border: 1px dashed #4183C4; height: 45px !important; }
.question-container ul { list-style: none !important; margin: 0 0 20px 20px; }

/* Quote Builder */
#questionnaire-container .hidden { display: none; }
#questionnaire-container > ul { margin: 0; padding: 0; }
#questionnaire-container > ul ul { display: none; }
#questionnaire-container ul { list-style: none; margin: 20px 0 20px 20px; border-left: 1px solid #B0B0B0; padding: 10px 0 10px 15px; }
#questionnaire-container ul li { font-size: 1.4em; margin: 0px 0 20px 0; }
#questionnaire-container label { font-size: 1.1em; margin: 0 15px 10px 0; padding: 7px 10px; background: none; border: 1px solid #d8e2e4; cursor: pointer; display: block; }
#questionnaire-container label.selected { background: #78909c; color: #FFF; font-weight: 500; }
#questionnaire-container label input { display: none; }

#quote-items { margin: 0; padding: 0; }
#quote-items li { list-style: none; }
#quote-items > li { margin: 0 0 0 0; list-style: none; padding: 20px 35px; }
#quote-items > li:nth-child(even) { background: #F7F7F7 }
#quote-items > li .select2-container, #quote-items > li select { float: left; width: 25% !important; margin-right: 1%; }
#quote-items > li .name { float: left; width: 40%; margin-right: 1%; }
#quote-items > li .qty, #quote-items .item .price { float: left; width: 10%; margin-right: 1%; }
#quote-items > li .remove-item, #quote-items > li .visible-toggle { float: right; line-height: 40px; height: 40px; cursor: pointer; margin-left: 10px; }
#quote-items > li > ul { margin: 10px 0 0 20px; padding: 0 0 0 20px; border-left: 1px solid #DADADA; display: none; }
#quote-items > li .fa-fw { line-height: 40px; }
#quote-items > li .estimator-drop-btn { float: left; cursor: pointer; font-size: 1.2em; }
#quote-items > li > ul .fa-plus { cursor: pointer; }
#quote-items > li .round-up { position: relative; font-size: 1.3em; left: -10px; margin-top: 10px; z-index: 9999; cursor: pointer; }

.cal-advanced { margin-bottom: 10px; }
.cal-advanced button { cursor:pointer; padding:0px 20px; text-transform:uppercase; line-height:2em; font-size:0.9em; font-weight:600; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; border-radius: 2px; border-color: #FFF; }
.cal-advanced select {  cursor:pointer; padding:0px 20px; text-transform:uppercase; line-height:2em; font-size:0.9em; font-weight:600; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s; border-radius: 2px; border-color: #FFF; background: #FFF; }

#totals h3 { background-color: #4FABE8; color: #FFF; font-size: 0.9em; float: right; padding: 10px 15px; text-transform: uppercase; }
#totals h3 span { font-weight: 500; font-size: 1.3em; letter-spacing: 1px; margin-left: 10px; }

.totals { background-color: #4FABE8; padding: 30px; text-transform: uppercase; color: #FFF; font-weight: 500; text-align: right; float: right; margin-top: 40px; }
.totals tr td { padding: 10px 15px; }
.totals .grand-total { font-size: 1.3em; }

.totals input { display: inline !important; width: 100px !important; padding: 0 10px !important; margin: 0 0 0 10px !important; }
.totals .button { padding: 2px 20px !important; }

.status-bar { height: 35px; line-height: 35px; font-size: 0.85em; color: #FFF; text-transform: uppercase; padding: 0 10px; margin-bottom: 20px; }
.status-bar small { font-size: 0.95em; margin-left: 10px; cursor: pointer; }

.outstanding-totals { margin-bottom: 20px; background: #FFF; color: #333; padding: 20px; border: 1px solid #d8e2e4; }
.outstanding-totals strong { margin-left: 10px; font-size: 1.4em; font-weight: 300; }

.outstanding-totals input[type=text] { background:#FFF; border: 0; border-bottom: 1px solid #cfd8dc; font-size:0.9em; font-weight:400; font-family:'Montserrat',sans-serif; padding:5px 0; display:block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:35px; max-width: 300px; min-width: 400px; float: left; }
.outstanding-totals .button { float: left; height: 35px; padding: 0; line-height: 35px; width: 35px; }

.job-checklist .item-container .checklist-name { float: left; width: calc(100% - 80px); }
.job-checklist .item-container .checklist-update, .job-checklist .item-container .checklist-delete { height: 40px; width: 40px; line-height: 40px; text-align: center; float: left; cursor: pointer; }
.job-checklist .item-container .checklist-delete { color: #e74c3c; }
.job-checklist .item-container .checklist-update.selected { background: #4FABE8; color: #FFF; }
.job-checklist .item-container { margin-bottom: 40px; }

#timesheets, #job-costs, #non-conformance, #notes { margin-bottom: 70px; }

#checklist-view .item { margin-bottom: 15px; }
#checklist-view .item.completed .text { text-decoration: line-through; }
#checklist-view .item small { font-size: 0.8em; font-style: italic; margin-left: 10px; color: #7f7f7f; }
#checklist-view .item .fa-fw { margin-right: 5px; }
#checklist-view .item .fa-check-square { color: #2ecc71;}

.area .progress { margin-bottom: 30px; }
.area .progress .percent { float: left; width: 180px; font-size: 0.9em; }
.area .progress .percent-bar { width: calc(100% - 180px); background: #f4f6f9; height: 15px; float: right; margin-top: 8px; }
.area .progress .percent-bar .completed { background: #4FABE8; height: 15px; width: 0px; }
.area .progress .percent-bar .completed.red { background: #e74c3c; }

#line-items .item { border-bottom: 1px solid #D3D3D3; margin: 10px 0; padding: 10px 0; }
#line-items .item .desc { float: left;  }
#line-items .item .desc input[type="text"] { background:#FFF; border: 0; border-bottom: 1px solid #cfd8dc; font-size:0.9em; font-weight:400; font-family:'Montserrat',sans-serif; padding:10px 0; display:inline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 45%; height:40px; outline:0; -webkit-appearance: none; border-radius:0; }
#line-items .item .actions { float: right; }
#line-items .item .actions a { padding: 5px 20px; font-size: 0.8em; margin-left: 10px; }

/* 
************************************************************************
	Responsive Styles
************************************************************************
*/

@media only screen 
and (min-width : 800px) 
and (max-width : 1100px) {
	
	/* Misc */
	body { }
	.main-container {  }
	.page-header { clear: both; margin-top: 50px; }
	
	/* Header */
	header h1 { display: none; }	
	header h1.hidden { display: block; }
	
	.dash-container .dash-module.col-2 { float: none; width: 100%; }
	
}

@media only screen 
and (min-width : 600px) 
and (max-width : 800px) {
	
	/* Misc */
	body { }
	.main-container {  }
	.modal { width: 580px; margin: 0 0 0 -290px; }
	header .right .item a.fa-fw, header .right .item span { width: 60px; font-size: 1.1em; }
	
	/* Form */
	form .row.col1 { width:100%; float:none; clear:both; }
	form .row.col2 { width:100%; float:none; }
	form .row.col2.left { float:none; }
	form .row.col2.right { float:none; }

	/* Login */
	.login-container { max-width: 580px; }
	.login-container .left { width: 100%; float: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 0; border: 1px solid #d8e2e4; }
	.login-container .right { width: 100%; float: none; min-height: auto; border-bottom-right-radius: 0; border-top-left-radius: 4px; }
	.login-container .right > div { position: static; }
	.login-container .right h1, .login-container .right h2 { text-align: left; }
	
	/* Header */
	header h1 { display: none; }	
	header h1.hidden { display: block; }
	
	.dash-container .dash-module.col-2 { float: none; width: 100%; }

}

@media only screen 
and (min-width : 400px) 
and (max-width : 600px) {
	
	/* Misc */
	body { }
	.main-container {  }
	.modal { width: 380px; margin: 0 0 0 -190px; }
	.padding { padding: 20px; }
	.modal .padding { padding: 20px; }
	.page-header { clear: both; margin-top: 50px; }
	.function-btn { float: none; padding: 5px 20px !important; width: 100%; margin: 0 0 5px 0; display: block; }
	header .right .item a.fa-fw, header .right .item span { width: 60px; font-size: 1em; }

	/* Form */
	form .row.col1 { width:100%; float:none; clear:both; }
	form .row.col2 { width:100%; float:none; }
	form .row.col2.left { float:none; }
	form .row.col2.right { float:none; }
	
	/* Login */
	.login-container { max-width: 380px; margin: 20px auto; }
	.login-container .left { width: 100%; float: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 0; border: 1px solid #d8e2e4; }
	.login-container .right { width: 100%; float: none; min-height: auto; border-bottom-right-radius: 0; border-top-left-radius: 4px; }
	.login-container .right > div { position: static; }
	.login-container .right h1, .login-container .right h2 { text-align: left; }
	
	/* Header */
	header h1 { display: none; }	
	header h1.hidden { display: none; }
	
	.dash-container .dash-module.col-2 { float: none; width: 100%; }
	
}

@media only screen 
and (min-width : 10px) 
and (max-width : 400px) {
	
	/* Misc */
	body { }
	.main-container {  }
	.modal { width: 280px; margin: 0 0 0 -140px; }
	.padding { padding: 15px; }
	.modal .padding { padding: 20px; }
	.page-header { clear: both; margin-top: 50px; }
	.function-btn { float: none; padding: 5px 20px !important; width: 100%; margin: 0 0 5px 0; display: block; }
	header .right .item a.fa-fw, header .right .item span { width: 40px; font-size: 1em; }
	
	/* Form */
	form .row.col1 { width:100%; float:none; clear:both; }
	form .row.col2 { width:100%; float:none; }
	form .row.col2.left { float:none; }
	form .row.col2.right { float:none; }
	
	/* Login */
	.login-container { max-width: 280px; margin: 20px auto; }
	.login-container .left { width: 100%; min-height: auto; float: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 0; border: 1px solid #d8e2e4; }
	.login-container .left .padding { padding: 20px; }
	.login-container .right { width: 100%; float: none; min-height: auto; border-bottom-right-radius: 0; border-top-left-radius: 4px; }
	.login-container .right > div { position: static; padding: 20px; }
	.login-container .right h1, .login-container .right h2 { text-align: left; font-size: 1.7em; }
	
	/* Header */
	header h1 { display: none; }	
	header h1.hidden { display: none; }
	
	.dash-container .dash-module.col-2 { float: none; width: 100%; }
	
}