<!-- Load the jQuery UI styles. --> <!-- <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> --> <!-- Custom styles. --> <style> :root { --width: calc(100vw-20px); --height: 700px; --selector_height: 55px; } body { width: calc(var(--width)); height: calc(var(--height)); font-family: Arial, sans-serif; font-size: 11px; padding: 10px 30px 10px 30px; } #div_table, #div_absense { height: calc(var(--height)-2px); width: calc(var(--width)); flex-wrap: wrap; } th, td { padding: 0.10rem; } .td_nom, .td_status, .td_time, .td_bus, .td_distance, .td_bus_out, .td_bus_in { text-align: center; } .td_abs_nom, .td_depot, .td_bus_model, .td_reg_plate, .td_absense_status { text-align: center; } .td_route_exit, .th_route_exit { text-align: center; background-color: rgb(15, 82, 134); color: white; font-size: 12px; padding-top: 5px; padding-bottom: 5px; } .td_distance, .th_distance { max-width: 12vw; } .span_exit { background-color: white; color: rgb(15, 82, 134); width: 20px; padding: 3px; } .span_route { padding: 3px; } .spn_out { font-size: 13px; text-align: center; font-family: monospace; } .spn_in { font-size: 13px; text-align: center; font-family: monospace; } .btn_out, .btn_in, .bus_distance { margin: auto; } #table_id tbody tr { height: 25px; } #table_id tbody tr .bus_distance { display: none; } #table_id tbody tr .span_distance { display: block; } #table_id tbody tr:hover .bus_distance { display: block; } #table_id tbody tr:hover .span_distance { display: none; } .dataTables_length { padding-bottom: 10px; } button.block { display: inline-block; flow: left; } #div_selector { display: flex; text-align: top; width: 100%; padding-bottom: 10px; height: calc(var(--selector_height)); } #btn_selector_in_out { width: calc(50% - 2px); display: inline-block; margin-right: 2px; margin-top:0px; height: 100%; flow: left; } #btn_selector_absense { width: calc(50% - 2px); display: inline-block; height: 100%; margin-left: 2px; margin-top:0px; flow: left; } #div_absense { height: calc(var(--height)-2px); width: calc(var(--width)); flex-wrap: wrap; display: none; } .tbl_absense, .dataTables_scrollFootInner { width: 98vw;} <!-- div_absense --> #dtrange_input_id, #comment_input_id { width: 6vw; } #status_select_id { width: 7vw; } #th_abstype_id { width: 7vw; } .red_asterix { color: red; padding-right:5px;} foot input { padding: 3px; } .form-select, .form-select > option { border-width: 0; background-color: transparant; } #tbl_dialog td { margin-top: 10px; padding-bottom: 10px; } #favDialog, #favDialog select, #favDialog input { border-style; solid; border-width: 1px; border-color: rgb(132, 173, 234); } #confirmBtn { margin-right:10px;} #favDialog {max-height: 450px;} #favDialog form { display: inline-block; flow: left } #dl_images { height: 300px; margin-left:0; width: 0px; background-color: white; border-color: white; display: inline-block; float: right; } #dl_images img { display: inline-block; float: right; max-height:100%; max-width:100%; } .circle { width:44px; height:44px; border-radius:50%; font-size:16px; background-color: rgb(132, 173, 234); color:#f1f1f2; display:flex; justify-content:center; align-items:center; top:calc(50% - 22px); left:calc(50px); z-index:3; cursor:pointer; } .fa-chevron-left { margin-right:5px; } .fa-chevron-right { margin-left:5px; } .hide { display:none; } #addAbsence { font-size:16px; color: rgb(132, 173, 234); background-color: rgb(255, 255, 255); border-width:0px; float:right; } #addAbsence:hover { background-color: rgb(232, 232, 232); } #addAbsence:active { background-color: rgb(224, 224, 224); box-shadow: 3px 5px rgb(192, 192, 192); transform: translateY(4px); } #buses_filter_id { max-width: 70px; } #status_filter_id { max-width: 80px; } </style>