﻿/********************
*   Core Styles   *
********************/
/*border-color: #e6e6e6;*/

*, *::after, *:before { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body { position: relative; /*min-width: 1000px; min-height: 500px;*/ color: #333; font-size: 1em; font-family: 'Roboto', Sans-Serif; }

a { color: #1464bf; outline: none; text-decoration: none; }
a:link, a:visited,
a:active, a:hover { color: #1464bf; }
a:hover { font-weight: normal; }
button, a { cursor: pointer; }

header, footer, hgroup,
nav, section { display: block; }

mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px; }

.float-left { float: left; }

.float-right { float: right; }

.clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

h1, h2, h3,
h4, h5, h6 { color: #000; margin: 0; padding-bottom: 0; }

h1 { font-size: 2em; }

h2 { font-size: 1.75em; }

h3 { font-size: 1.25em; font-weight: 400; }

h4 { font-size: 1.125em; font-weight: 400; }

h5, h6 { font-size: 1em; }

h5 a:link, h5 a:visited, h5 a:active { padding: 0; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

.required { position: relative; }
.required:after { content: "*"; position: absolute; top: 0; right: -10px; color: red; }

.red { color: #e22b2b; }
.gray { color: #666666; }
.bgRed { background-color: #e22b2b; color: white; }
.bgGray { background-color: rgba(77, 77, 77, 0.1); }
.bgBlue { background-color: #1464bf; color: white; }
.txtL { text-align: left !important; }
.w100p { width: 100% !important; }
.bold { font-weight: bold; }
.bt-approve-station { background-color: #1565C0; color: white; }
.bt-reject-station { background-color: white; color: #1565C0; }
.green { color: #01c160; }

/* Core - Button
----------------------------------------------------------*/
/* button blue + blueShadow */
button.table { width: 50px; height: 50px; background: url(/Images/Navibar/table_icon.png) center center no-repeat #1464BF; border: none; }
button.white, button.gray, button.red, button.blue, a.download, button.blueShadow, button.bt-approve-station, button.bt-reject-station { line-height: 32px; padding: 0 10px; font-size: 1em; border: 1px solid; border-radius: 2px; }
button.white { color: black; background-color: white; border-color: #e6e6e6; }
button.gray { color: black; background-color: rgba(77,77,77,0.3); border-color: #e6e6e6; }
button.red { color: black; background-color: rgba(255, 0, 0, 0.8); border-color: rgba(255, 0, 0, 0.8); color: white; }
button.blue, a.download, button.blueShadow { color: white; background-color: #1464BF; border-color: #1464BF; }

button.blue:hover, a.download:hover, button.blueShadow:hover { background-color: rgba(20,100,191,0.9); }

button.blueShadow { line-height: 40px; font-size: 0.9375em; box-shadow: 0 1px 1.5px #241F5D; }

/* button photo */
button.photo { font-size: 0.93em; color: rgba(102,102,102,0.6); font-weight: 500; box-shadow: 0 1px 1.5px rgba(0,0,0,0.5); padding: 0 0 0 35px; width: 140px; height: 40px; line-height: 40px; background: url(/Images/Rex/addphoto_icon.png) 10px center no-repeat #fff; border: none; }
button.photo:hover { color: rgba(102,102,102,0.9); }

/* button btEdit */
.btEdit { }
.btEdit .cancel, .btEdit .save { display: none; margin-left: 10px; }

button.remove { background: url(/Images/Widget/Xcircle.png) center center/100% no-repeat; width: 24px; height: 24px; border: none; opacity: 0.6; }
button.remove:hover { opacity: 1; }

button.but-click {
    background-color: #1563BF;
    min-width: 120px;
    padding: 10px;
    border: 0 none;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Core - Input
----------------------------------------------------------*/
/* input checkbox */
span.checkbox { }
span.checkbox input { display: none; -moz-appearance: none; -webkit-appearance: none; }
span.checkbox label { background: url(/Images/Filter/uncheck.png) center center/16px no-repeat; width: 16px; height: 16px; display: inline-block; }
span.checkbox label:hover { background-image: url(/Images/Filter/uncheck_mo.png); }
span.checkbox input:checked + label { background-image: url(/Images/Filter/check.png); }

/* input radio group */
.radioGroup { }
.radioGroup * { vertical-align: middle; }
.radioGroup span { margin-left: 20px; }
.radioGroup input { display: none; }
.radioGroup label { cursor: pointer; position: relative; border: 1px solid #ccc; border-radius: 13px; width: 26px; height: 26px; display: inline-block; }
.radioGroup b { color: #999; margin-left: 10px; }
.radioGroup input:checked + label { }
.radioGroup input:checked + label:after { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; background-color: #666; border-radius: 9px; content: " "; height: 18px; width: 18px; }
.radioGroup input:checked ~ b { color: #4D4D4D; }

.radioGroup span.blue input:checked + label { border-color: #1464BF; }
.radioGroup span.blue input:checked + label:after { background-color: #1464BF; }

.radioGroup span.red input:checked + label { border-color: red; }
.radioGroup span.red input:checked + label:after { background-color: red; }

/* input */
input { color: #1A1A1A; }
input.white, div.calender, div.gps, textarea.white, select.white, select.blue { border: 1px solid #e6e6e6; border-radius: 2px; background-color: white; padding: 5px 10px; height: 38px; }
input.white, div.calender, div.gps { height: 38px; }
input.gray { border: none; color: #808080; border-radius: 2px; background-color: #e6e6e6; padding: 5px 10px; }
input.gray:focus { color: #1A1A1A; }
select.white { padding-right: 0; padding-left: 10px; width: 100%; }
select.white option { padding: 10px; }
select.blue { color: white; background-color: #1464BF; border-color: #1464BF; }
select.blue option { background-color: white; padding: 10px; color: black; }

input[disabled=disabled] { color: #B3B3B3; }

input[placeholder], input::-webkit-input-placeholder, inpu::-moz-placeholder { color: #999999 !important; }

/* Placeholder
----------------------------------*/
input::-webkit-input-placeholder {
    font-style: italic;
}
input::-moz-placeholder {
    font-style: italic;
}
input:-ms-input-placeholder {
    font-style: italic;
}
input:-o-input-placeholder {
    font-style: italic;
} 

/* Core - Textarea
----------------------------------------------------------*/
textarea.white { resize: none; }
textarea[placeholder], textarea::-webkit-input-placeholder, textarea::-moz-placeholder { color: #999999 !important; }

/* input - calendar */
div.calender { padding-right: 30px; position: relative; }
div.calender input { width: 100%; height: 100%; padding: 0; border: none; }
div.calender input.hide { display: none; }
div.calender > span { display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: url(/Images/Spat/calendar_icon.png) center center no-repeat; }
div.calender > span:hover { background-image: url(/Images/Spat/calendar_icon_mo.png); }

/* input - GPS picker */
div.gps { padding-right: 30px; position: relative; }
div.gps input { width: 100%; height: 100%; padding: 0; border: none; overflow: hidden; text-overflow: ellipsis; }
div.gps > span { display: inline-block; position: absolute; top: 0; right: 0; content: ' '; width: 30px; height: 38px; background: url(/Images/Filter/droppin_icon.png) center center no-repeat; }
div.gps:hover > span { background-image: url(/Images/Filter/droppin_icon_mo.png); }


/* Core - Label
----------------------------------------------------------*/
label.blue { color: #1464bf; }

/* Core - Block UI
----------------------------------------------------------*/
/* block UI */
.block { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.1); z-index: 999; }
.block > div { position: absolute; left: 50%; bottom: 20px; width: 180px; margin-left: -90px; padding: 20px; text-align: center; background-color: white; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); border-radius: 5px; }
.block > div > * { vertical-align: middle; }
.block img { width: 25px; }

.loading { height: 50px; background: url("/Images/Widget/loading.gif") center center/30px no-repeat; }
.bgMsg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: table-cell; text-align: center; vertical-align: middle; }


/* Core - Validate
----------------------------------------------------------*/
input.error { border: 1px solid #e80c4d !important; }
label.error { background: url('/Images/Widget/no.png') no-repeat 0 center/ 20px; padding-left: 25px; margin-left: 5px; }
label.valid { background: url('/Images/Widget/yes.png') no-repeat 0 center/ 20px; display: block; width: 20px; height: 20px; margin-left: 5px; }

/* Core - styles for validation helpers
----------------------------------------------------------*/
.field-validation-error { color: #e80c4d; margin-top: 5px; display: block; font-size: 0.875em; }
.field-validation-valid { display: none; }
.input-validation-error { border: 1px solid #e80c4d !important; }
input[type="checkbox"].input-validation-error { border: 0 none; font-size: 0.875em; }
.validation-summary-errors { color: #e80c4d; font-size: 0.9375em; }
.validation-summary-valid { display: none; }

img.siteLogo { width: 42px; }

/* Core - jqueryUI
----------------------------------------------------------*/
.ui-selectmenu-max-height .ui-widget.ui-widget-content {
    max-height: 300px;
}

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
}



@media all {
    .page-break { display: none; }
    .print { display: none; }
}

@media print {
    .page-break { display: block; page-break-before: always; }
    .print { display: block; }
    .ui-tabs-nav { display: none; }
    .ui-tabs-panel { display: block !important; }
    .printHide { display: none; }

    .radioGroup input { display: inline; }
    .radioGroup label { display: none; }
}
