@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
html, body { height: 100%; }
a, a:visited, a:focus, a:active, a:link { text-decoration: none; outline: 0; }
a { color: currentColor; transition: .2s ease-in-out; }
h1, h2, h3, h4 { margin: 0; }
ul { padding: 0; list-style: none; }
img { vertical-align: middle; height: auto; width: 100%; }
strong { font-weight: 600; }
.page { width: 100%; height: 100vh; background: #fdfdfd; font-family: 'Encode Sans Condensed', sans-serif; font-weight: 600; letter-spacing: .03em; color: #212121; }
header { display: flex; position: fixed; width: 100%; height: 70px; background: #212121; color: #fff; justify-content: center; align-items: center; -webkit-tap-highlight-color: rgba(0,0,0,0); }
main { padding: 20px 20px 0; display: flex; flex-direction: column; height: 100%; }
main > div { margin-top:50px; }
main h2 span {  color: #BF7497; }
main p { line-height: 1.5; font-weight: 200; margin: 20px 0; }
main small { font-weight: 300; color: #888; }
.line { width: 100%; background-color: #990000;}
.clear { clear: both; }
.required { color: #990000; margin-left: 5px; margin-right: 5px; }
.content { margin-left: 0px; margin-top:10px; width: 100%;}
.label { width: 100%; min-height: 30px; margin-top:5px; font-size: 1.2em; padding: 0 0 0 0; display: block; color: #444444; clear: both;}
.field { width: 100%; min-height: 30px; padding: 0 0 0 0; display: block; clear: both; }
.field span {  color: #BF7497; }
.heading { font-weight: bold; background-color: #000080; color: #FFFFFF; }
.inputdatepicker { width:80px; background: #F9F8CD url('/images/calendar_icon.png') no-repeat right; background-size: contain ;text-align: left; cursor:pointer;}
.h30 { height: 30px; !important }
.h40 { height: 40px; !important }
.h50 { height: 50px; !important }
.h60 { height: 60px; !important }
.h70 { height: 70px; !important }
.h80 { height: 80px; !important }
.h90 { height: 90px; !important }
.h100 { height: 100px; !important }
.h110 { height: 110px; !important }
.h120 { height: 120px; !important }
.h130 { height: 130px; !important }
.h150 { height: 150px; !important }
.h175 { height: 175px; !important }
.h190 { height: 190px; !important }
.h200 { height: 200px; !important }
.h250 { height: 250px; !important }
.h300 { height: 300px; !important }

.limiter {
    width: 100%;
    margin: 0 auto;
}
.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #336699
}
.wrap-login100 {
    width: 670px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.pointer { cursor: pointer; }
.none { display: none; }
.ok_tick { float:left; width:32px; height: 32px; background-image: url('/images/tick_icon.png'); background-size: contain; background-repeat: no-repeat; display: none; }
.ok_add { float:left; width:32px; height: 32px; background-image: url('/images/plus_icon.png'); background-size: contain; background-repeat: no-repeat; }

input { background: #F9F8CD; font-size: 1.2em; color: #555; border: 1px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; }
input:disabled { background: #dddddd; font-size: 1.2em; color: #555; border: 1px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; }
input:focus { outline: none; background: #C6DFFA; }
input[type=submit], input[type=button]{ background: #4B99AD; padding: 8px 15px 8px 15px; border: none; color: #ffffff; cursor:pointer;}
input[type=submit]:hover, input[type=button]:hover{ background: #397584; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; cursor:pointer;}
input[type=submit]:disabled, input[type=button]:disabled{ background: #dddddd; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; cursor:pointer;}
textarea { font-size: 1.2em; background: #F9F8CD; color: #555; border: 0px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; }
textarea:disabled { font-size: 1.2em; background: #dddddd; color: #555; border: 0px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; }
textarea:focus { outline: none; background: #C6DFFA; }
#reject { background: #990000; }
#reject:hover { background: #6B0000; }
#reject:disabled { background: #dddddd; }
#complete { background: #009900; }
#complete:hover { background: #006B00; }
#complete:disabled { background: #dddddd; }

#password_password1 { width: 200px; }
#error_password_password1 { clear: both; width: 100%; font-size:0.7em; color: red; }
#password_password2 { width: 200px; }
#error_password_password2 { clear: both; width: 100%; font-size:0.7em; color: red; }
#error_password_nomatch { clear: both; width: 100%; font-size:0.7em; color: red; }
#password_password_changed { color: #008000; }

#profile_companyname { width: 300px; }
#profile_contractorname { width: 200px; }
#profile_firstname { width: 200px; }
#profile_surname { width: 200px; }
#profile_salutatione { width: 200px; }
#profile_email { width: 300px; }
#profile_tel_home { width: 180px; }
#profile_tel_work { width: 180px; }
#profile_tel_mobile { width: 180px; }

#payment_list_date { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#payment_list_description { width: 65%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#payment_list_value { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-right: 1%;}

#deposit_list_date { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#deposit_list_description { width: 47%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#deposit_list_value { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-right: 1%;}
#deposit_list_ref { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-right: 1%;}

#inspections_list_date { width: 21%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#inspections_list_description { width: 53%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#inspections_list_status { width: 16%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-right: 1%;}
#inspections_list_download { width: 5%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-right: 1%;}
#inspections_list_download img { width:20px;}

#maintenance_list_date { width: 12%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#maintenance_list_short_date { width: 12%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%; text-align:center;}
#maintenance_list_description { width: 55%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#maintenance_list_status { width: 12%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
#maintenance_list_delete { width:24px; float:left;}
#maintenance_list_delete_icon {width:24px; height: 24px; background-image: url('/images/del_icon_32.png'); background-size: contain; background-repeat: no-repeat;float:left; cursor: pointer;}
.main_photo { width:300px; margin-bottom: 10px; }
.main_photo img { border-radius:10px; }

#maintenance_description { width: 280px; height: 120px; float: left;}
#maintenance_comments { width: 280px; height: 120px; float: left; font-weight: normal; font-family: "Courier New", Courier, monospace;}
#maintenance_location { width: 280px; float: left; }
#maintenance_issuedate { width: 150px; float: left;}
#maintenance_orderdate { width: 150px; float: left;}
#maintenance_scheduledate { width: 150px; float: left;}
#maintenance_file { display: none; }
#maintenance_camera { width:42px; margin-right: 10px;}
#maintenance_preview { width:136px; height: 96px; background-size: contain; background-repeat: no-repeat;float:left;border-radius:5px; }
#maintenance_preview_delete { width:32px; height: 32px; background-image: url('/images/del_icon_32.png'); background-size: contain; background-repeat: no-repeat;float:left; cursor: pointer;}
#maintenance_supplier_comments { width: 280px; height: 120px; float: left;}

#contactus_telephone { width: 150px; margin: auto; padding-top: 50px;}
#contactus_telephone_text { width: 100%; padding-top: 20px; text-align: center; font-size: 2em;}
#contactus_email {  width: 150px; margin: auto; padding-top: 50px; }
#contactus_email_text { width: 100%; padding-top: 20px; text-align: center; font-size: 2em;}

@media screen and (min-width: 361px) and (max-width: 780px)
{
    h2 { font-size: 1.5em;  }
    h3 { font-size: 1.25em;  }

    main { padding: 30px 10px 0; display: flex; flex-direction: column; height: 100%; }
    .label { width: 100%; height: 20px; margin-top:2px; font-size: 0.8em; padding: 0 0 0 0; display: block; color: #444444; clear: both;}
    .field { width: 100%; min-height: 20px; padding: 0 0 0 0; display: block; clear: both; }
    .heading { font-weight: bold; background-color: #000080; color: #FFFFFF; }
    .ok_tick { float:left; width:24px; height: 24px; background-image: url('/images/tick_icon.png'); background-size: contain; background-repeat: no-repeat; display: none; }
    .ok_plus { float:left; width:24px; height: 24px; background-image: url('/images/plus_icon.png'); background-size: contain; background-repeat: no-repeat; display: none; }
    #contactus_telephone { width: 33%; margin-left: 33%; margin-top: 25px; }
    #contactus_telephone_text { display: none}
    #contactus_email { width: 33%; margin-left: 33%; margin-top: 25px; }
    #contactus_email_text { display: none}
    #maintenance_list_date { width: 12%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1%;}
    #maintenance_list_status { width: 20%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 5px;}
    #maintenance_list_description { width: 50%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 5px;}
    #maintenance_list_short_date { width: 10%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right:5px; text-align:center;}
    #maintenance_list_delete { width:16px; float:left;}
    #maintenance_list_delete_icon {width:16px; height: 16px; background-image: url('/images/del_icon_32.png'); background-size: contain; background-repeat: no-repeat;float:left; cursor: pointer;}
}
@media screen and (max-width: 360px)
{
    h2 { font-size: 1.4em;  }
    h3 { font-size: 1.2em;  }

    main { padding: 30px 10px 0; display: flex; flex-direction: column; height: 100%; }
    .label { width: 100%; height: 20px; margin-top:2px; font-size: 0.8em; padding: 0 0 0 0; display: block; color: #444444; clear: both;}
    .field { width: 100%; min-height: 20px; padding: 0 0 0 0; display: block; clear: both; }
    .heading { font-weight: bold; background-color: #000080; color: #FFFFFF; }
    .ok_tick { float:left; width:24px; height: 24px; background-image: url('/images/tick_icon.png'); background-size: contain; background-repeat: no-repeat; display: none; }
    .ok_plus { float:left; width:24px; height: 24px; background-image: url('/images/plus_icon.png'); background-size: contain; background-repeat: no-repeat; display: none; }
    #contactus_telephone { width: 33%; margin-left: 33%; margin-top: 25px; }
    #contactus_telephone_text { display: none}
    #contactus_email { width: 33%; margin-left: 33%; margin-top: 25px; }
    #contactus_email_text { display: none}
    #maintenance_list_date { display: none; width:0px;}
    #maintenance_list_status { width: 20%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 5px;}
    #maintenance_list_description { width: 55%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 5px;}
    #maintenance_list_short_date { width: 10%; float: left;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right:5px; text-align:center; }
    #maintenance_list_delete { width:16px; float:left;}
    #maintenance_list_delete_icon {width:16px; height: 16px; background-image: url('/images/del_icon_32.png'); background-size: contain; background-repeat: no-repeat;float:left; cursor: pointer;}
}