* { box-sizing: border-box; }
body { margin: 0; background-color: #efefef; font-family: Roboto, Verdana; padding-top: 100px; font-size: 16px; padding-left: 65px; padding-bottom: 30px; overflow-x: hidden; }
.main_content { -moz-transition: padding-left .5s,width .5s; transition: padding-left .5s,width .5s; padding: 20px; }
.center { text-align: center; }
.active_col { width: 100px; text-align: center; }
.created_col { width:200px; text-align: center; }
.pointer { cursor: pointer; }
a {cursor:pointer;}


/*---login_styling---*/
.login_container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10000; }
    .login_container ::placeholder { font-size: 18px; }
    .login_container #error_message { height: 50px; font-size: 12px; margin-top: 10px; }
.login_left_container { background-color: #efefef; width: 25%; position: absolute; left: 0; padding: 0 4.5%; font-size: 18px; overflow: hidden; height: 100vh; }
.login_right_container { width: 75%; position: absolute; right: 0; width: 75%; float: right; height: 100vh; overflow: hidden; background-image: url("/img/vehicle.jpg"); background-position: center; background-size: cover; }
.login_logo { max-width: 100%; margin-top: 100px; }
.login_footer { background-color: #a90a2e; color: white; font-size: 15px; text-decoration: none; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 50px; }
#email, #password { width: 100%; padding: 8px 15px; margin: 8px 0; box-sizing: border-box; border-radius: 5px; border: 2px solid black; font-size: 18px; }
.login_button { background-color: #a90a2e; border: none; color: white; cursor: pointer; font-size: 18px; text-decoration: none; padding: 10px 20px; vertical-align: middle; }


/*---master_page_styling---*/

.role { font-size:14px; }
header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background-color: black; align-items: center; color: white; z-index: 1; }
.header_logo { position: fixed; height: 60px; width: auto; left: 100px; top: 17px; filter: brightness(0) invert(1); }
.header_title { font-size: 36px; position: fixed; top: 28px; right: 390px; }
.header_break { background-color: white; position: fixed; top: 0; height: 100px; right: 350px; }
.logout { height: 30px; width: auto; transform: scaleX(-1); position: fixed; right: 300px; top: 35px; filter: brightness(0) invert(1); cursor: pointer; }
.header_username { position: fixed; right: 85px; top: 30px; font-size: 20px; }
.header_person { height: 50px; width: auto; filter: invert(100%); position: fixed; right: 20px; top: 23px; }
.header_corner { position: absolute; top: 0; left: 0px; width: 65px; height: 100px; background-color: #a90a2e; }
header a { text-decoration: none; color: white; }
.btn { background-color: #9c9c9c; color: white; font-size: 16px; border: none; min-width: 65px; min-height: 60px; cursor: pointer; }
.sidepic { height: 45px; width: 45px; margin: 8px; margin-left: 9px; margin-right: 12px; }
#sidebar { position: fixed; left: 0; top: 100px; bottom: 30px; width: 65px; background-color: #bcbfca; overflow-x: hidden; -moz-transition: width .5s; transition: width .5s; }
.side_element { display: flex; width: 290px; overflow: hidden; align-items: center; text-decoration: none; color: #494949; }
    .side_element label { cursor: pointer; font-size: 14px; }
#toggle_btn { background-color: #babfca; border: none; cursor: pointer; margin-top: 6px; margin-bottom: 0; margin-left: 2px; }
footer { background: #a90a2e; position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; display: flex; justify-content: flex-end; padding: 7px; padding-right: 30px; color: white; font-size: 15px; z-index: 1; }

.only_print { display: none; }
/*---dashboard_styling---*/
.dashboard { width: 100%; padding-left: 20px; overflow-x: hidden; margin: 0; }
.timesheet_heading { padding-left: 70px; }
.overview_heading {padding-bottom: 20px; }
.dashboard_heading { font-size: 18px; font-weight: bold; color: dimgray; }
.overview { width: 350px; float: left; padding-right: 60px; }
.overview_article { background-color: rgba(177, 181, 195, 0.82); height: 700px; border-radius: 18px; border: thin solid rgba(168, 168, 168, 0.69); min-height: 70%; min-width: 320px; }
.filter { cursor: pointer; margin-left: 20px; margin-top: 20px; padding: 7px; padding-top: 10px; border-radius: 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 15px; border: 2px solid grey; box-shadow: 0px 0px 5px 5px rgba(107, 107, 107, 0.20) inset; margin-bottom: 10px; width: 240px; }
#filter_bar label { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #a90a2e; position: relative; right: 40px; top: 15px; pointer-events: none; }
.overview_article_data { display: flex; align-items: center; padding: 7px 20px; }
    .overview_article_data label { margin-left: 10px; font-size: 15px; color: #494949; }
.number_box { width: 80px; text-align: center; border-radius: 8px; padding: 4px; border: 3px solid black; font-weight: bold; background-color: white; }
#barchart { margin-top: 5px; }
#piechart { margin-top: 20px; }
#barchart { padding: 5px 30px; }
.plabel { position: relative; top: 260px; left: 130px; margin-right: 15px; } 
.pie_labels div{padding:10px;}


.dashboard_left { width: 1150px; display: inline-block; }
.admin { float: right; width: 800px; }
.green_tick { cursor: pointer; width: 22px; height: 22px; border-radius: 50%; background-color: green; color: white; font-weight: bold; text-align: center; display: inline-block; font-size: 12px;  line-height: 20px; border: 2px solid white; }
.red_cross { cursor: pointer; width: 22px; height: 22px; border-radius: 50%; background-color: #a90a2e; color: white; font-weight: bold; text-align: center; display: inline-block; font-size: 12px; line-height: 18px; border: 2px solid white; }
.amber_question {
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffbf00;
    color: white;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    border: 2px solid white;
}

.timesheets_vl { position: relative; height: 1000px; background-color: rgba(181, 181, 181, 0.7); width: 3px; color: grey; top: 0; left: 1040px; }
.box { width: 160px; height: 120px; min-width: 160px; min-height: 120px; display: inline-block; vertical-align: top; padding: 5px; margin-right: 80px; margin-bottom: 60px; text-decoration: none; text-align: center }
    .side_box .box:nth-child(3n) { margin-right: 0; }
    .box label { cursor: pointer; }
.admin_box:nth-child(3n) { margin-right: 0; }
.timesheet_box:nth-child(3) { margin-right: 0; }
.timesheet_box:nth-child(3n) { margin-right: 80px; }
.dashboard .list { margin-top: 20px; }
.red_box { background-color: #a90a2e; border-radius: 14px; border: 3px solid #a6a6a6; color: white; }
.empty_box { border-radius: 14px; border: 3px solid rgba(181, 181, 181, 0.7); }
.white_box { background-color: white; border-radius: 14px; border: 3px solid #a6a6a6; color: #444444; font-weight: 500; }

input.clear { text-align: right; border: 0; background: none; padding-right: 10px; font-size: 18px; width: 70px; border-bottom: 2px solid gray; }
/*---user_management_styling---*/

.management_title { color: #a90a2e; font-size: 25px; margin: 0; line-height: 30px; }
    .management_title > * { vertical-align: middle; }
.filter-element { margin-top: 20px; margin-right: 20px; }
.list_filters { margin-bottom: 10px; }
.list_box { padding-top: 20px; }
.filter_box { padding: 7px; border-radius: 7px; font-size: 15px; border: 2px solid grey; box-shadow: 0px 0px 5px 5px rgba(107, 107, 107, 0.20) inset; width: 80%; }
.list_box table { width: 100%; text-align: left; border: 2px solid black; border-radius: 7px; }
.list_box tr:first-child { border-top-left-radius: 7px; border-top-right-radius: 7px; }
    .list_box tr:first-child th:first-child { border-top-left-radius: 7px; }
    .list_box tr:first-child th:last-child { border-top-right-radius: 7px; }
.list_box tr:last-child td:first-child { border-bottom-left-radius: 7px; }
.list_box tr:last-child td:last-child { border-bottom-right-radius: 7px; }
.timesheet_tbl tr:last-child td { background-color: #b3b3b3; border-top: 2px solid black; font-weight:bold;}
.centr {width:30px;}
.list_box th { background-image: linear-gradient(white, rgba(157, 157, 157, 1)); border-bottom: 2px solid black; height: 39px; color: #5b5b5b; user-select: none; cursor: pointer; }

.list_box td { border-right: 2px solid #5b5b5b; height: 35px; }
    .list_box td:last-child { border-right: 0; }

.list_box tr:nth-child(odd) { background: white; }
.list_box tr:nth-child(even) { background: rgb(209, 209, 209) }
.list_filters { margin-bottom: 10px; height: 35px; line-height: 35px; }
    .list_filters > * { vertical-align: middle; }
.top_right_buttons { float: right; }
.red_btn { display: inline-block; cursor: pointer; border: 0; padding: 0px 20px; color: white; font-size: 16px; background-color: #a90a2e; height: 35px; line-height: 35px; text-decoration: none; border-radius: 5px; vertical-align: middle; }
.green_btn { display: inline-block; border: 0; cursor: pointer; padding: 0px 20px; color: white; font-size: 16px; background-color: green; height: 35px; line-height: 35px; text-decoration: none; border-radius: 5px; vertical-align: middle;}
.grey_btn { display: inline-block; border: 0; cursor: pointer; padding: 0px 20px; color: white; font-size: 16px; background-color: grey; height: 35px; line-height: 35px; text-decoration: none; border-radius: 5px; vertical-align: middle; }
.orange_btn { display: inline-block; border: 0; cursor: pointer; padding: 0px 20px; color: white; font-size: 16px; background-color: orange; height: 35px; line-height: 35px; text-decoration: none; border-radius: 5px; vertical-align: middle; }

/*---editor---*/
.form_text { display: block; margin-bottom: 5px; font-size: 14px; }
.form_row { display: block; margin-bottom: 15px; height: 35px; line-height: 40px; }
    .form_row > label, .form_row input, .form_row select { vertical-align: middle; display: inline-block; width: 170px; }

.form_info { display: block; }
.alignr { text-align: right; }

.form_left, .form_right { display: inline-block; vertical-align: top; width: 500px; }
.form_right { margin-left: 40px; }
.form_container .form_columns { margin-top: 10px; }
.form_container input, .form_container select, .list_options input, .list_options select, .list_filters input, .list_filters select, .date_input { border: 2px solid #797979; background-color: white; height: 35px; line-height: 35px; border-radius: 5px; font-size: 14px; display: inline-block; width: 290px; padding-left: 5px; }
    .form_container input[type=checkbox] { width: 30px; }
    .form_container *[disabled] { background-color: rgba(181, 181, 181, 1); }
    .form_container .form_row.full input, .form_container .form_row.full select { width: 877px; }

.form_container input.ng-dirty.ng-invalid, .form_container select.ng-dirty.ng-invalid, form.ng-submitted input.ng-invalid, form.ng-submitted select.ng-invalid { background-color: #a90a2e; color: white; }
.form_container label { display: inline-block; width: 200px; font-weight: bold; color: #797979; padding-left: 10px; font-size: 15px; }
.form_container .scrollable { height: 224px; overflow-y: auto; width: 100%; border: 2px solid #797979; border-radius: 7px; min-height: 40px; background-color: white; }
    .form_container .scrollable .item { border-bottom: 1px solid #797979; }
        .form_container .scrollable .item label { font-size: 14px; font-weight: normal; width: 80%; cursor: pointer; user-select: none; }
        .form_container .scrollable .item input { width: 15%; }
.form_container .form_buttons { margin-top: 20px; }
.form_buttons button { width: 150px; }

.form_container.timesheet label { width: 160px; }
.form_container.timesheet input, .form_container.timesheet select { width: 332px; }
.form_container .form_row.double input { width: 80px; margin:0; }
.form_container .form_row.double input[type=checkbox] {  width: 35px; outline: 1px solid #797979; margin-right: 45px; }
    .green { color: green; }
.form_container input[type=checkbox] { width: 30px; }
.list_box a { text-decoration: none; }
form .error.required, form .error.invalid { display: none; }
form.ng-invalid.ng-invalid-required.ng-submitted .error.required, form.ng-invalid.ng-submitted .error.invalid { display: block; }

.pagination_box { margin-top: 10px; text-align: right; color: #a90a2e; }
    .pagination_box > *, .pagination_box .pages > * { vertical-align: middle; display: inline-block; margin: 0 10px; user-select: none; }
.list_options .filter-element, .list_filters .filter-element { display: inline-block; vertical-align: top; }
.list_options .filter-panel { margin-bottom: 20px; }
form.ng-invalid.ng-invalid-required.ng-submitted .error.required, form.ng-invalid.ng-submitted .error.invalid { display: block; }

.payments { padding-top: 100px; }


.red { color: #a90a2e; }
.grey { color: dimgrey; }
.fleft { float: left; }
.fright { float: right; }
.martop10 { margin-top: 10px; }
.form_border { border-radius: 8px; border: 2px solid grey; }
.rotate { -moz-transition: transform .5s; transition: transform .5s; }
.row_icon {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    text-align: left;
}
.row_icon img { max-width: 100%; max-height: 100%;}

.center_elm { margin-left:25vw }
.fright  { float: right; }
/*---sidebar-styling---*/

.side_box_nav { display: none; }
.side_box .scrollbox { margin: 10px 0; }
.side_box_left { width: 210px; padding: 15px; margin-top:20px; display: inline-block; vertical-align: top; }
.side_box_right { width: 340px; padding-left: 10px; padding: 15px 15px 80px 15px; display: inline-block; vertical-align: top; height: 100%; }
.side_box_content { position: relative; height: 100%; overflow-y: auto; scrollbar-width: none; }
.side_box_vl { width: 4px; height: 100vh; background-color: grey; margin-right: 0px; margin-top: 50px; display: inline-block; vertical-align: top; }
.side_box { position: fixed; -moz-transition: right .5s; transition: right .5s; width: 353px; overflow: hidden; top: 0; right: 0; height: 100%; display: block; padding-top: 100px; }
.side_dashboard { top: 120px; width:700px; padding-top: 0;}
.side_box label.bold { font-size: 16px; color: #797979; }
   

.ass_file_row { font-size: 13px; padding: 5px; padding-left: 15px; color: #797979; position: relative; height: 32px; line-height: 22px;  }
    .ass_file_row .remove_icon { color: #a90a2e; position: absolute; right: 0px; top: 5px; cursor: pointer; }
/*.ass_file_row:hover .remove_icon { display: block; }*/
.wider { width: 150px; }
table.selectable tr { cursor: pointer; }
    table.selectable tr:hover { background-color: #e0ffe1; }
.bold { font-weight: bold; }
.notes_text textarea { resize: none; border-radius: 8px; border: 2px solid grey; padding: 7px; }
.edit_col {width:60px; text-align:center;}

.no_select {user-select: none;}
.medium_checkbox { display: none; }
.mr20 { margin-right: 20px; }
.mb10 { margin-bottom: 10px; }
.ml20 { margin-left: 20px; }
.ml10 {margin-left: 10px;}
.ml40 {margin-left: 40px;}
.mt30 { margin-top: 30px; }
.width400 {width:400px;}

.display_notes { height: 160px; width: 100%; background-color: white; overflow-y: auto; margin:20px 0px;}
.notes_heading { font-size: 13px; margin-bottom: 5px;}
    .notes_heading label { font-weight: bold; }
    .display_notes .item {margin: 10px 4px !important;}
    .display_notes .item .note_text { margin: 0; font-size: 14px; }
    .notes_delete { float:right; text-decoration:none; cursor:pointer; margin-right:20px;}
        .hl {  height:1px; background-color:black; margin:10px 0px !important;}
        .uploader docuploader { }
.note_text {  }

.inline { display: inline-block; }
.nav_btns { position: absolute; bottom: 36px; left: 0px; width: 100%; padding: 0 20px; }
#toggle_side_box_btn { display: none; }
.notes_form textarea { height: 100px; width: 170px; padding: 7px; font-family: Roboto; resize: none; margin: 20px 0px !important; }
.notes_form label {font-weight:bold;}

input.warning { border-color: orange; color: orange; }
.list_box td.warning { color: orange; }
input.error {
    border-color: #a90a2e;
    color: #a90a2e;
}
.list_box td.error { color: #a90a2e; }
input[readonly] {
    background-color: #c6c6c6;
}


.total_col tr { background-color: #999999 }
.border_top{border-top:3px solid black !important;}
.orange { color: orange; }
.blue {color:blue;}
.timesheets_select {height:22px; width:22px; margin:0;}
.report_hl { width: 100%; height: 2px; background-color: rgba(181, 181, 181, 1); color: black; margin-top: 20px; }
.report_vl { height: 100%; width: 2px; background-color: rgba(181, 181, 181, 1); color: black; color: rgba(181, 181, 181, 1); }
.report_filters {margin-bottom:100px;}
.report_filters input { width: 150px; }
.report_filters select { width: 12vw; }
    .report_filters .small_date {width:7vw}

.timesheet_filters input { width: 15vw; }
.timesheet_filters select { width: 15vw; }

.error_box { display: none; position: fixed; top: 15vh; left: 10vw; right: 5vw; height: 700px; background-color: #e3e1cf; padding: 20px; }
.error_buttons {margin-top:20px; text-align:right;}
.overlay {display:none; position:fixed; top:0; left:0; height:10000px; width:10000px; overflow:hidden; background:black; opacity:0.5;}
.scroll-y { overflow: auto;}
.error_tbl { height: 550px; overflow: auto; }
.hide {display:none;}


@media print {
    body { padding: 0 !important; margin: 0 !important; }
}

@media only screen and (max-width:1900px) { .side_box_nav { display: block; background-color: #bcbfca; float:left; height:100%; margin-right:20px;}
    .side_box { right: -740px; height: 100%; background-color: #e3e1cf; top: 100px; width: 800px; }
    .side_box.side_timesheets { top: 0; }
        .side_box .list { margin-left: 100px; width: 600px; }
    .timesheets_heading { overflow: hidden; margin-top: 20px; height: 20px; margin-left: 100px; }
    #toggle_side_box_btn { display: block; transform: scaleX(-1); border: none; background-color: #bcbfca; margin-left: 5px; margin-right: 5px; }
    .side_box_vl {display:none;}
    .timesheets_vl { display: none; }
    .timesheet_box:nth-child(3) { margin-right: 0; }
    .timesheet_box:nth-child(3n) { margin-right: 60px; }
    .box { width: 160px; height: 120px; min-width: 160px; min-height: 120px; margin-right: 60px; margin-bottom: 40px; }
}
@media only screen and (min-width:1900px) {
    side_box {right:0 !important;}
}

.system_message .green { color: white; font-weight: bold; background-color: green; border-radius: 5px; padding: 10px; margin-top: 5px; }
.system_message .red { color: white; font-weight: bold; background-color: #a90a2e; border-radius: 5px; padding: 10px; margin-top: 5px; }
.system_message { position: relative; }
#close_system_message { position: absolute; top: 0px; right: 10px; font-weight: bold; color: white; cursor: pointer; font-family: Arial; padding: 10px; }

.grhover:hover { background-color: #e0ffe1; }

.form_container.timesheet label:nth-child(3) { text-align: right; }

.form_container.timesheet .form_right label { text-align: right; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid green; background: #c4ffd4; }
.ui-state-disabled .ui-state-default  { border: 1px solid #aaaaaa; background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; }

.list_filters input[type=checkbox], .form_row input[type=checkbox] { display: none; }
.checkbox-label { background-color: white; border: 2px solid #797979; border-radius: 5px; height: 35px; padding-left: 0px !important; width: 35px !important; display: inline-block; vertical-align: middle; user-select: none; text-align: center !important; line-height: 35px; font-size: 24px !important; font-weight: bold; }
    input:checked ~ .checkbox-label:before { content: "✓"; }
.filter-element .checkbox-label { box-shadow: 0px 0px 5px 5px rgba(107, 107, 107, 0.20) inset; margin-top: -3px; }
.filter-element { height: 35px; }
.filter-element label { vertical-align: middle; }

.idchecked_container { border-top: 1px solid black; border-bottom: 1px solid; margin-top: 10px; padding: 10px 0; }