html {
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    background-color: #E3F3FD;
    margin: 0;
    padding: 0;
    color: #264796;
    font-family: 'Arial';

}
#mainbar {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 76px;
    background-color: white;
    box-shadow: 0 0 24px -1px rgba(0, 0, 0, 0.2);
    color: #008dd2;
    min-width: 1600px;
}
#mainbar #wwrap {
    width: 1600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 100%;
}
#mainbar div {
    text-align: center;
}
#mainbar #web_title {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    width: 300px;
    left: 0px;
    color: #264796;
}
#mainbar #web_time {
    font-weight: bold;
    position: absolute;
    top: 22px;
    width: 100px;
    left: 350px;
    color: #264796;
}
#mainbar #web_time #time_val {
    font-size: 18px;
}
#mainbar #web_time #date_val {
    font-size: 13px;
    font-style: italic;
}
#mainbar #logo {
    display: inline-block;
    margin-right: 5px;
    width: 250px;
    height: 50px;
    background-image: url(/images/logo_s4c.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#mainbar #logout_btn {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-top: 30px;
    width: 100px;
    height: 46px;
    border: none;
    cursor: pointer;
}
#mainbar #user {
    position: absolute;
    right: 165px;
    top: 23px;
    height: 20px;
    padding-top: 6px;
    padding-left: 90px;
    text-align: right;
    font-weight: bold;
}
#mainbar #help_link {
    position: absolute;
    right: 125px;
    top: 26px;
    height: 24px;
    width: 24px;
    background-image: url(images/help.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
#mainbar a,
#mainbar a:visited,
#mainbar a:hover {
    text-decoration: none;
    color: #008dd2;
}
#mainbar #access,
#mainbar #setup,
#mainbar #logs,
#mainbar #archive,
#mainbar #home {
    position: absolute;
    width: 125px;
    height: 46px;
    top: 0px;
    padding-top: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
}
#mainbar #access:hover,
#mainbar #setup:hover,
#mainbar #logs:hover,
#mainbar #archive:hover,
#mainbar #home:hover,
#logout_btn:hover {
    background-color: #E3F3FD;
}
/*
#mainbar #setup {
    right: 625px;
    //background-color: green;
    //background-image: url(images/menu_setup.png);
}
#mainbar #access {
    right: 500px;
    //background-color: red;
    //background-image: url(images/menu_access.png);
}
#mainbar #logs {
    right: 375px;
    //background-color: yellow;
    //background-image: url(images/menu_log.png);
}
#mainbar #archive {
    right: 750px;
    //background-color: white;
    //background-image: url(images/menu_map.png);
}
#mainbar #home {
    right: 875px;
    //background-color: white;
    //background-image: url(images/menu_map.png);
}
*/
#page {
    width: 1600px;
    min-height: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
    position: relative;
    z-index: 0;
}
#devlist {
    width: 275px;
    position: absolute;
    left: 0px;
    top: 0px;
    min-height: 800px;
    overflow-y: auto;
    background-color: #f6fcff;
    border: 1px solid #008dd2;
}
#devlist_header {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 5px;
}
#devlist .device {
    font-weight: bold;
    padding: 5px;
    cursor: pointer;
    z-index: 10;
}
#devlist .device:hover {
    background-color: #008dd2;
    color: white;
}
#devlist .device div {
    display: inline-block;
    margin-right: 10px;
}

#data_wrap {
    margin-left: 275px;
    position: relative;
    min-height: 800px;
}
#data_wrap #minimap,
#data_wrap .device_data,
#data_wrap .device_data_search,
#data_wrap .binary_data,
#data_wrap .call_detail_data,
#data_wrap #before_images,
#data_wrap #after_images,
#data_wrap .vid_wrap,
#data_wrap .image_wrap,
#data_wrap .image_wrap_search {
    position: absolute;
}
#data_wrap #minimap {
    width: 280px;
    height: 195px;
    border: 1px solid #008dd2;
    top: 0px;
    right: 0px;
    background-color: #f6fcff;
}
#data_wrap .device_data {
    width: 1000px;
    height: 195px;
    border: 1px solid #008dd2;
    top: 0px;
    left: 20px;
    background-color: #f6fcff;
}
#data_wrap .device_data_search {
    width: 1560px;
    height: 125px;
    border: 1px solid #008dd2;
    top: 0px;
    left: 20px;
    background-color: #f6fcff;
}
#data_wrap .binary_data {
    width: 240px;
    height: 180px;
    border: 1px solid #008dd2;
    top: 0px;
    left: 20px;
    background-color: #f6fcff;
}
#data_wrap .call_detail_data {
    width: 240px;
    height: 800px;
    border: 1px solid #008dd2;
    top: 0px;
    left: 20px;
    background-color: #f6fcff;
}
#data_wrap .image_wrap {
    width: 1305px;
    height: 585px;
    border: 1px solid #008dd2;
    top: 215px;
    left: 20px;
    background-color: #f6fcff;
    overflow-y: auto;
}
#data_wrap .image_wrap_search {
    width: 1560px;
    height: 655px;
    border: 1px solid #008dd2;
    top: 145px;
    left: 20px;
    background-color: #f6fcff;
    overflow-y: auto;
}
#data_wrap #before_images {
    width: 1045px;
    height: 240px;
    border: 1px solid #008dd2;
    top: 0px;
    left: 280px;
    background-color: #f6fcff;
    overflow-y: auto;
}
#data_wrap #after_images {
    width: 1045px;
    height: 240px;
    border: 1px solid #008dd2;
    top: 560px;
    left: 280px;
    background-color: #f6fcff;
    overflow-y: auto;
}
#data_wrap #video_block {
    position: absolute;
    width: 1045px;
    height: 300px;
    border: 1px solid #008dd2;
    top: 250px;
    left: 280px;
    background-color: #f6fcff;
}
#data_wrap .vid_wrap {
    width: 240px;
    height: 440px;
    border: 1px solid #008dd2;
    top: 360px;
    left: 20px;
    background-color: #f6fcff;
    overflow-y: auto;
}
#data_wrap .vid_wrap video {
    width: 98%;
    margin-left: 1%;
    margin-bottom: 10px;
}
#data_wrap .vid_wrap .video_timestamp {
    margin-left: 3px;
    position: relative;
}

.binary_header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
}
.minimap_header {
    position: absolute;
    width: 100%;
    z-index: 10;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
#mapcontrib {
    z-index: 10;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #f6fcff;
}
.vid_header,
.image_header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 5px;
    /*position: fixed;*/
    width: 1300px;
    background-color: #f6fcff;
}
.image_header button {
    position: absolute;
    right: 4px;
    top: 0px;
    border: 1px solid #264796;
    background-color: #eee;
    height: 22px;
    width: 100px;
}
.binary_vals {
    padding: 10px;
    margin-top: 10px;
}
.call_detail_data .state_line,
.binary_data .state_line {
    position: relative;
    font-size: 14px;
    height: 18px;
    margin-bottom: 5px;
}
.binary_data .time_line {
    position: absolute;
    bottom: 0px;
    left: 10px;
    width: 220px;
}
.call_detail_data .state_line div,
.binary_data .state_line div {
    position: absolute;
}
.call_detail_data .state_line .led,
.binary_data .state_line .led {
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}
.binary_data .state_line .cfg_link {
    margin-left: 0px;
    height: 16px;
    width: 16px;
    background-image: url(/images/setup.png);
    background-size: contain;
    background-position: center;
    cursor: pointer;
}
.binary_data .state_line .val0 {
    background-color: green;
}
.binary_data .state_line .redtext {
    color: red;
}
.binary_data .state_line .greentext {
    color: green;
}
.binary_data .state_line .val1 {
    background-color: red;
    width: 14px;
    height: 14px;
    right: 3px;
    top: -2px;
    border-radius: 7px;
}
.call_detail_data .state_line .state,
.binary_data .state_line .state {
    right: 5px;
}
.binary_data .state_line .bname {
    left: 5px;
}

#data_wrap .device_data .device_name {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
#data_wrap .image_wrap .panorama_timestamp {
    margin-top: 2px;
    margin-left: 1%;
}
#data_wrap .image_wrap .panorama {
    padding-left: 5px;
}
#data_wrap .image_wrap .panorama img {
    margin: 0px;
    padding: 0px;
    width: 250px;
    cursor: pointer;
}

.device_data .descr_line,
.device_data_search .descr_line {
    position: relative;
    font-size: 16px;
    min-height: 24px;
}
.device_data .descr_param,
.device_data_search .descr_param {
    position: absolute;
    left: 10px;
}
.device_data #cL {
    border-right: 1px solid #008dd2;
    width: 400px;
    min-height: 24px;
}
.device_data #cL .descr_line .descr_data {
    position: relative;
    margin-left: 190px;
    min-height: 24px;
    margin-bottom: 5px;
}
.device_data #cR .descr_line .descr_data {
    position: relative;
    margin-left: 100px;
    min-height: 24px;
    margin-bottom: 5px;
}
.device_data table {
    border-collapse: collapse;
    margin-top: 10px;
    height: 125px;
}
.device_data table td {
    vertical-align: top;
}
.device_data .descr_line #code_show {
    text-decoration: underline;
    display: inline-block;
    cursor: pointer;
}
.device_data .descr_line #code_data {
    font-weight: bold;
}
.device_data .descr_line #code_data.hidden {
    display: none;
}
.device_data .descr_line #code_show, 
.device_data .descr_line #code_data {
    display: inline-block;
    width: 100px;
}




#login_form_header {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 130px;
    color: #264796;
    font-weight: bold;
    font-size: 36px;
    text-align: center;
}
#login_form {
    width: 300px;
    height: 165px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
}
#login_form input {
    position: absolute;
    border: 1px solid #008dd2;
    padding: 1px;
}
#login_form #login_name {
    left: 73px;
    top: 20px;
    width: 200px;
    height: 30px;
}
#login_form #login_pass {
    left: 73px;
    top: 60px;
    width: 200px;
    height: 30px;
}
#login_form #login_sub {
    left: 73px;
    top: 120px;
    width: 204px;
    height: 30px;
}
#login_form div {
    position: absolute;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
}
#login_form #person_ico {
    background-image: url(/images/person.png);
    top: 25px;
    left: 25px;
}
#login_form #key_ico {    
    background-image: url(/images/key.png);
    top: 65px;
    left: 25px;
}







#setup_link_wrap {
    text-align: center;
}
#setup_link_wrap table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}
#setup_link_wrap table td {
    padding-left: 15px;
    padding-right: 15px;
}
#setup_link_wrap table th {
    padding-bottom: 10px;
}
#setup_link_wrap img {
    margin-left: 5px;
    margin-right: 5px;
}
#setup_link_wrap a,
#setup_link_wrap a:hover,
#setup_link_wrap a:visited{
    color: white;
    text-decoration: none;
}


.setup_form {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: relative;
}
.setup_form div,
.setup_form input,
.setup_form select {
    position: absolute;
}
.setup_form div {
    left: 20px;
}
.setup_form input {
    right: 20px;
}
.setup_form input[type=text],
.setup_form input[type=number],
.setup_form input[type=file],
.setup_form input[type=password]{
    width: 250px;
    height: 20px;
    padding: 2px;
    border: 1px solid #008dd2;
    background: #fff;
}
.setup_form textarea {
    width: 250px;
    height: 60px;
    padding: 2px;
    border: 1px solid #008dd2;
    resize: none;
    position: absolute;
    right: 20px;
}
.setup_form select {
    width: 256px;
    height: 26px;
    padding: 2px;
    border: 1px solid #008dd2;
    right: 20px;
    background-color: white;
    position: absolute;
}
.setup_form #new_fname_input,
.setup_form #new_groupname_input,
.setup_form #new_devname_input {
    top: 0px;
}
.setup_form #new_fname_label,
.setup_form #new_groupname_label,
.setup_form #new_devname_label {
    top: 5px;
}
.setup_form #new_lname_input,
.setup_form #new_xcoord_input {
    top: 40px;
}
.setup_form #new_lname_label,
.setup_form #new_xcoord_label {
    top: 45px;
}
.setup_form #new_company_input,
.setup_form #new_ycoord_input {
    top: 80px;
}
.setup_form #new_company_label,
.setup_form #new_ycoord_label {
    top: 85px;
}
.setup_form #new_address_input,
.setup_form #new_mail_input {
    top: 120px;
}
.setup_form #new_address_label,
.setup_form #new_mail_label {
    top: 125px;
}

.setup_form #new_placement_input,
.setup_form #new_tel_input,
.setup_form #new_screen_input,
.setup_form #new_tel_input {
    top: 160px;
}
.setup_form #new_placement_label,
.setup_form #new_screen_label,
.setup_form #new_tel_label {
    top: 165px;
}
.setup_form #new_loc_input,
.setup_form #new_pdf_input,
.setup_form #new_timer_input,
.setup_form #new_notif_input {
    top: 200px;
}
.setup_form #new_loc_label,
.setup_form #new_pdf_label,
.setup_form #new_timer_label,
.setup_form #new_notif_label {
    top: 205px;
}

.setup_form #new_pdf_map_input {
    top: 240px;
}
.setup_form #new_pdf_map_label {
    top: 245px;
}
.setup_form #new_pdf_in_loc_label {
    top: 285px;
}
.setup_form #new_pdf_in_loc_input {
    top: 280px;
}
.setup_form #new_pdf_in_gpsn_input {
    top: 320px;
}
.setup_form #new_pdf_in_gpsn_label {
    top: 325px;
}
.setup_form #new_pdf_in_gpse_input {
    top: 360px;
}
.setup_form #new_pdf_in_gpse_label {
    top: 365px;
}
.setup_form #new_pdf_out_loc_label {
    top: 400px;
}
.setup_form #new_pdf_out_loc_input {
    top: 405px;
}
.setup_form #new_pdf_out_gpsn_input {
    top: 440px;
}
.setup_form #new_pdf_out_gpsn_label {
    top: 445px;
}
.setup_form #new_pdf_out_gpse_input {
    top: 480px;
}
.setup_form #new_pdf_out_gpse_label {
    top: 485px;
}
.setup_form #new_pdf_maintenance_input {
    top: 520px;
}
.setup_form #new_pdf_maintenance_label {
    top: 525px;
}


.setup_form #new_uname_input {
    top: 290px;
}
.setup_form #new_uname_label {
    top: 295px;
}
.setup_form #new_upass_input {
    top: 330px;
}
.setup_form #new_upass_label {
    top: 335px;
}
.setup_form #new_rights_input {
    top: 370px;
}
.setup_form #new_rights_label {
    top: 375px;
}
.setup_form #new_notif_input_edit,
.setup_form #new_group_input {
    top: 240px;
}
.setup_form #new_notif_label_edit,
.setup_form #new_group_label {
    top: 245px;
}
.setup_form #new_group_input_edit,
.setup_form #new_power_input {
    top: 280px;
}
.setup_form #new_group_label_edit,
.setup_form #new_power_label {
    top: 285px;
}
.setup_form #new_properties_input, 
.setup_form #new_rights_input_edit {
    top: 320px;
}
.setup_form #new_properties_label, 
.setup_form #new_rights_label_edit {
    top: 325px;
}
.setup_form #new_opencode_input {
    top: 360px;
}
.setup_form #new_opencode_label {
    top: 365px;
}
.setup_form #new_devlist_input {
    top: 480px;
}
.setup_form #new_devlist_label {
    top: 485px;
}
.setup_form #new_download_input {
    top: 560px;
}
.setup_form #new_download_label {
    top: 565px;
}

.setup_form input[type=submit] {
    right: 20px;
    padding: 3px;
    border: 1px solid #008dd2;
    height: 24px;
    width: 150px;
}
.setup_form #setup_master_submit {
    top: 420px;
}
.setup_form #setup_group_submit {
    top: 50px;
}
.setup_form #setup_device_submit {
    top: 625px;
}
.setup_form #setup_master_submit_edit {
    top: 380px;
}
#form_header {
    text-align: center;
    margin-top: 135px;
    font-size: 20px;
    font-weight: bold;
}
#form_header_subline {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    font-style: italic;
}
#form_info_blank {
    text-align: center;
    margin-top: 135px;
    font-size: 18px;
}

#userlist_select,
#grouplist_select {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    text-align: center;
}

#userlist_select button {
    height: 26px;
    width: 290px;
    border: 1px solid #008dd2;
    border-radius: 3px;
    margin-top: 25px;
    cursor: pointer;
    background-color: white;
}
#grouplist_select button {
    height: 26px;
    width: 75px;
    border: 1px solid #008dd2;
    border-radius: 3px;
    margin-bottom: 10px;
    cursor: pointer;
}
#userlist_select button.muser_edit {
    background-color: #00cccc;
}
.userline, .access_line {
    position: relative;
    height: 30px;
    margin-bottom: 10px;
}
.userline:hover {
    background-color: #cce2ff;
}
.userline div,
.access_line .device_name {
    position: absolute;
    left: 0px;
    padding-top: 4px;
}
.userline .username {
    position: absolute;
    left: 5px;
    top: 2px;
}
.userline .userrole {
    position: absolute;
    left: 300px;
    top: 5px;
    text-align: left;
    font-size: 12px;
    font-style: italic;
}
.userline .ruser_edit {
    position: absolute;
    right: 40px;
    top: 2px;
}
.userline .rlist_edit {
    position: absolute;
    right: 3px;
    top: 2px;
}
.userline form {
    position: absolute;
    right: 80px;
    top: 2px;
}
.userline form img {
    height: 24px;
    cursor: pointer;
}
.access_line .access {
    position: absolute;
    right: 95px;
    top: 1px;
    width: 24px;
    height: 24px;
}
.access_line .allowed {
    background-image: url(images/allowed.png);
}
.access_line .not_allowed {
    background-image: url(images/not_allowed.png);
}
.access_line button {
    position: absolute;
    right: 0px;
}


#gallery_headbar {
    text-align: center;
    font-weight: bold;
    padding-top: 15px;
}

#timebar {
    width: 1280px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 30px;
}
#time_select {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 30px;
}
#time_select #datepicker {
    position: absolute;
    left: 100px;
    width: 150px;
    padding: 3px;
    border: 1px solid #008dd2;
    border-radius: 3px;
}
#time_select #date_confirm {
    position: absolute;
    right: 0px;
    width: 150px;
    padding: 3px;
    border: 1px solid #008dd2;
    border-radius: 3px;
    height: 26px;
}
#hourpicker {
    width: 1270px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    padding: 5px;
    border-top: 1px solid #008dd2;
    border-bottom: 1px solid #008dd2;
}

#hourpicker .hour_btn {
    width: 50px;
    margin-left: 1px;
    margin-right: 1px;
    border: 1px solid #008dd2;
    background-color: white;
}

#image_list {
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
}
#image_list table {
    text-align: center;
    width: 100%;
}
#image_list img {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
}
.panorama_time {
    border-bottom: 1px solid #008dd2;
    margin-top: 10px;
    margin-bottom: 3px;
    font-weight: bold;
    color: #008dd2;
}

#hourpicker .current {
    background-color: #00cccc;
}
#gotovid, #gotoimg {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
    height: 26px;
    padding: 3px;
    border: 1px solid #008dd2;
    border-radius: 3px;
}

.vidlink {
    width: 800px;
    height: 160px;
    margin-left: auto;
    margin-right: auto;
    background-color: #008dd2;
    margin-top: 10px;
    position: relative;
    color: white;;
}
.vidlink .vidfile {
    position: absolute;
    left: 250px;
    top: 70px;
    font-weight: bold;
}
.vidlink video {
    position: absolute;
    left: 5px;
}
.vidlink .dl_btn {
    position: absolute;
    right: 50px;
    top: 65px;
}

.page_headbar {
    margin-top: 100px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.page_subheadbar {
    margin-top: 25px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
#devlist_table {
    border-spacing: 30px 30px;
    margin-left: auto;
    margin-right: auto;
}
#devlist_table td {
    width: 250px;
    height: 250px;
    vertical-align: middle;
    border: 1px solid #008dd2;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 0px;
}
.device_preview {
    font-size: 24px;
    text-shadow: 2px 2px 4px white;
    font-weight: bold;
    position: absolute;
    top: 113px;
    width: 250px;
}
.mapper .leaflet-tile-loaded {
    opacity: 0.6 !important;
}
.mapper {
    height: 250px;
    position: absolute;
    bottom: 0px;
    width: 250px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
}

.history_row td {
    background-color: #f6fcff;
    background-position: center;
    background-size: initial;
    background-repeat: no-repeat;
}
.history_row #gallery_link {
    background-image: url(/images/camera_icon.png);
}
.history_row #archive_link {
    background-image: url(/images/video_icon.png);
}


#logdata {
    max-width: 1280px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    border-collapse: collapse;
}
#logdata_wide  {
    max-width: 1280px;
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    border-collapse: collapse;
}
#logdata_wide tr,
#logdata tr {
    border-bottom: 1px solid #ccc;
}
#logdata_wide tr th,
#logdata tr th {
    text-align: left;
}
#logdata_wide tr td,
#logdata tr td {
    padding: 3px;
}
#logdata_wide tr td:first-child,
#logdata tr td:first-child {
    width: 200px;
    font-weight: bold;
}
#logdata_wide tr td:nth-child(4) {
    width: 150px;
}

#nopictures {
    text-align: center;
    margin-top: 100px;
    font-weight: bold;
}

#selectform input {
    padding: 1px;
    height: 20px;
    width: 150px;
}
#selectform select,
#datatype, #dataday, #devname {
    padding: 3px;
    height: 26px;
    width: 200px;
}
#selectform input[type=submit],
#gobutton {
    padding: 3px;
    height: 26px;
    width: 150px;
}
#setup_link_wrap input[type=date] {
    height: 22px;
    padding: 1px;
}
#setup_link_wrap input[type=submit] {
    cursor: pointer;
}
#setup_link_wrap select,
#setup_link_wrap button,
#setup_link_wrap input[type=date],
#setup_link_wrap input[type=submit] {
    background-color: white;
    border: 1px solid #008dd2;
}
#setup_link_wrap button {
    cursor: pointer;
}
#cR {
    position: relative;
}
#cR #livestream_cam {
    width: 245px;
    height: 60px;
    position: absolute;
    bottom: 50px;
    left: 5px;
    font-size: 14px;
}
#cR #livestream_cam table {
    margin-left: auto;
    margin-right: auto;
}
#cR #livestream_cam #lstitle {
    margin-bottom: 15px;
}
#cR #livestream_cam .camera_ls {
    width: 65px;
    text-align: center;
    position: relative;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #eee;
    display: inline-block;
}
#cR #livestream_cam .camera_ls:hover {
    background-color: #eee;
    border-color: #ccc;
}
#livestream {
    width: 640px;
    border: 2px solid green;
    height: 360px;
    position: absolute;
    top: 200px;
    left: 203px;
    z-index: 11;
    display: none;
    background-color: white;
}
#livestream img {
    max-width: 100%;
    height: 100%;
}
#livestream #img {
    height: 100%;
    text-align: center;
    background-color: black;
}
#livestream #txt {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    cursor: pointer;
    background-color: black;
}
#livestream #time {
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 20px;
    font-weight: bold;
    color: white;
    text-align: center;
    cursor: pointer;
    background-color: black;
}












#nodev {
    text-align: center;
    padding-top: 300px;
}
#nodata {
    text-align: center;
    padding-top: 30px;
}

#err_msg {
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #ff6600;
    color: black;
    font-size: 18px;
    text-align: center;
    margin-top: 25px;
}




#userlist {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.userline_headbar {
    border-bottom: 1px solid #264796;
    text-align: left;
}

#contacts {
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: 14px;
    font-style: italic;
}

.vid_detail {
    position: absolute;
    right: 5px;
    top: 0px;
    cursor: pointer;
}
.vid_detail img {
    height: 16px;
}
.vid_detail a,
.vid_detail a:visited {
    text-decoration: none;
    color: #264796;
}


#vidtime {
    position: absolute;
    left: 0px;
    top: 130px;
    width: 150px;
    text-align: center;
}
#videodetail {
    position: absolute;
    left: 390px;
    top: 0px;
}
#before_images .panorama table,
#after_images .panorama table {
    height: 130px;
    width: 1025px;
}
#before_images .panorama table tr td:first-child,
#after_images .panorama table tr td:first-child {
    width: 140px;
    text-align: center;
}
#before_images .panorama img,
#after_images .panorama img {
    width: 100%;
}

.name_val, .state_val {
    font-size: 14px;
}
.state_val {
    padding-left: 10px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 5px;
}

#download_call_data {
    position: absolute;
    width: 140px;
    bottom: 40px;
    right: 50px;
}


#profile_data_change,
#password_change {
    width: 475px;
    height: 175px;
    position: absolute;
    top: 45px;
}
#profile_data_change {
    left: 300px;
}
#password_change {
    right: 300px;
}
.profile_form_header {
    font-weight: bold;
    width: 375px;
    border-bottom: 1px solid #264796;
}
#profile_data_change .label,
#signature_change .label,
#password_change .label {
    position: absolute;
    left: 15px;
}
#profile_data_change input[type=text],
#password_change input[type=password] {
    position: absolute;
    left: 150px;
    width: 200px;
    height: 20px;
    padding: 1px;
}
#profile_data_change input[type=submit],
#password_change input[type=submit] {
    position: absolute;
    top: 125px;
    left: 250px;
    width: 106px;
    height: 24px;
}
#profile_data_change #company_label {
    top: 30px;
}
#profile_data_change #mail_label {
    top: 60px;
}
#profile_data_change #phone_label {
    top: 90px;
}
#profile_data_change #company_input {
    top: 25px;
}
#profile_data_change #mail_input {
    top: 55px;
}
#profile_data_change #phone_input {
    top: 85px;
}
#password_change #curpass_label {
    top: 30px;
}
#password_change #pass_label {
    top: 60px;
}
#password_change #passcontrol_label {
    top: 90px;
}
#password_change #curpass_input {
    top: 25px;
}
#password_change #pass_input {
    top: 55px;
}
#password_change #passcontrol_input {
    top: 85px;
}
#passcompare {
    position: absolute;
    width: 24px;
    height: 24px;
    right: 80px;
    top: 86px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#passcompare.pass_ok {
    background-image: url(/images/allowed.png);
}
#passcompare.pass_err {
    background-image: url(/images/not_allowed.png);
}

.records_list {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    height: 545px;
    overflow-y: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    flex-direction: row;
}
.image_wrap_search .records_list {
    height: 610px;

}
.record_card {
    width: 410px;
    height: 155px;
    border: 1px solid black;
    margin: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: black;
}
.record_card .record_image {
    position: absolute;
    bottom: 5px;
    left: 5px;
    height: 117px;
    width: 208px;
    border: 1px solid black;
}
.record_card .record_image img {
    max-width: 100%;
    max-height: 100%;
}
.record_card .record_text_line {
    position: absolute;
    display: block;
    width: 140px;
    text-align: center;
    left: 225px;
}
.record_card .record_lp {
    position: absolute;
    top: 5px;
    left: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    text-transform: uppercase;
}
.record_card .record_stamp_in {
    top: 30px;
}
.record_card .record_stamp_out {
    top: 80px;
}
.record_card .record_stay {
    top: 125px;
    font-weight: bold;
}

.button_col {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40px;
}
.button_col .btn_div {
    width: 36px;
    height: 36px;
    margin: 2px;
    box-sizing: border-box;
    background-size: initial;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.button_col .btn_div:hover {
    background-color: #c8edff;
}
.button_col .close {
    position: absolute;
    bottom: 0;
    right: 0;
}
.button_col .detail {
    background-image: url(images/detail.png);
}
.statistical_data_table .detail {
    background-image: url(images/detail.png);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    height: 20px;
}
.button_col .close {
    background-image: url(images/not_allowed.png);
}
.button_col .discard_data {
    background-image: url(images/drop.png);
}

.filter_header {
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.filter_header_search {
    margin: 10px;
    font-size: 18px;
    font-weight: bold;
}
.device_data .filter_line,
.device_data_search .filter_line {
    position: relative;
    font-size: 16px;
    min-height: 26px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}
.device_data_search .filter_line {
    padding-left: 10px;
}

.device_data .filter_line .descr_data,
.device_data_search .filter_line .descr_data {
    margin-left: 135px;
}
.device_data .filter_line input,
.device_data .filter_line select,
.device_data_search .filter_line input,
.device_data_search .filter_line select {
    width: 210px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
}
.filter_show_data_btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_show_chart_btn {
    position: absolute;
    bottom: 5px;
    right: 135px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_show_live_btn {
    position: absolute;
    bottom: 5px;
    left: 415px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_show_search_btn {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_show_pic_btn {
    position: absolute;
    bottom: 5px;
    left: 135px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_export_btn {
    position: absolute;
    bottom: 5px;
    right: 265px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}
.filter_btn.live {
    background-color: #E3F3FD;
}
.filter_vera_btn {
    position: absolute;
    bottom: 5px;
    left: 270px;
    width: 125px;
    padding: 1px !important;
    height: 24px;
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid black;
    background: #fff;
    cursor: pointer;
}

/*
.data_record {
    display: block;
    width: 90%;
    margin: 0 auto 10px auto;
    position: relative;
    height: 26px;
}
.data_record div {
    position: absolute;
    font-size: 16px;
}
.data_record .record_stamp {
    top: 5px;
    left: 10px;
}
.data_record .record_stay {
    top: 5px;
    left: 210px;
}
.data_record .record_lp {
    top: 5px;
    left: 410px;
}
*/


.no_record_match {
    text-align: center;
    margin-top: 50px;
    width: 100%;
}
.alarm_color {
    color: #ff0000;
}
.whitelist_color {
    color: #00bd00;
}


#detail_block {
    width: 1600px;
    height: 820px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    background-color: #f6fcff;
    border: 1px solid #008dd2;
}
#detail_block #detail_header {
    text-align: center;
    padding: 10px 5px 5px 5px;
    font-size: 18px;
    font-weight: bold;
}
.record_data {
    position: relative;
    height: 30px;
    margin-top: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #008dd2;
    color: black;
}
.photo_grid {
    margin-top: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    min-height: 625px;
}
.data_block {
    position: absolute;
    top: 10px;
    font-size: 18px;
    width: 350px;
}
.data_block .label {
    display: inline-block;
}
.data_block .value {
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
}
.block_rz {
    left: 950px;
}
.block_tin {
    left: 0;
}
.block_tout {
    left: 325px;
}
.block_stay,
.block_lname {
    left: 675px;
}
.pdf_link {
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    width: 24px;
    background-image: url(images/pdf.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
    cursor: pointer;
}
.timesync_link {
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    width: 32px;
    background-image: url(images/alarm.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: initial;
}
.block_rz_img {
    left: 1100px;
    height: 24px;
}
.block_rz_img img {
    height: 100%;
}


#bw_list_table {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    width: 400px;
    text-align: left;
    vertical-align: middle;
    border-collapse: collapse;
    table-layout: fixed;
}
#bw_list_table tr:first-child td {
    text-align: center;
    border-bottom: 1px solid black;
}
#bw_list_table td.list_wrap {
    vertical-align: top;
}
#bw_list_table .list_line {
    position: relative;
    display: flex;
    width: 100%;
    height: 28px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
#bw_list_table .list_line div {
    padding-left: 15px;
    font-weight: bold;
}
#bw_list_table .list_line form {
    padding-right: 15px;
}
#bw_list_table .list_line form img {
    height: 16px;
    cursor: pointer;
}

#bw_list_table .new_lp_forms {
    height: 65px;
}
#bw_list_table .new_lp_forms input[type=text] {
    width: 180px;
    background: #fff;
    border: 1px solid #264796;
    float: right;
    margin-bottom: 5px;
}
#bw_list_table .new_lp_forms input[type=submit] {
    background: #fff;
    border: 1px solid #264796;
    float: right;
}


#mass_export_notice {
    display: none;
    position: fixed;
    top: 300px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 150px;
    background: #E3F3FD;
    z-index: 10;
    border: 3px solid #008dd2;
    border-radius: 10px;
}
#mass_export_notice div {
    text-align: center;
    font-size: 20px;
    padding-top: 30px;
}

#signature_change {
    position: absolute;
    top: 300px;
    left: 300px;
    width: 900px;
}
#signature_change .profile_form_header {
    width: 100%;
}
#signature_change #newsig_label {
    top: 39px;
    left: 15px;
}
#signature_change input[type=file] {
    position: absolute;
    left: 250px;
    width:  calc(100% - 270px);
    height: 22px;
    padding: 2px;
    background: #fff;
    top: 35px;
    border: 1px solid grey;
    border-radius: 3px;
}
#signature_change input[type=submit] {
    position: absolute;
    top: 75px;
    right: 15px;
    width: 106px;
    height: 24px;
}
#signature_change #drop_signature_btn {
    top: 135px;
    background: #ff0000;
    border: 1px solid #888;
    border-radius: 3px;
}
#signature_change #current_sig {
    position: absolute;
    top: 85px;
    left: 15px;
}
#signature_change #no_signature,
#signature_change #signature {
    position: absolute;
    top: 0;
    left: 150px;
}
#signature_change #no_signature {
    width: 350px;
}
#signature_change #signature {
    max-width: 200px;
}

.statistical_data_table_header {
    width: 80%;
    margin-left: 10%;
    margin-right: auto;
    text-align: center;
    border-collapse: collapse;
    position: absolute;
    top: 30px;
}
.statistical_data_table {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-collapse: collapse;
}
.statistical_data_table tr:nth-child(odd){
    background: #ebf6ff;
}

#search_filter_header {
    position: absolute;
    width: 100%;
    top: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

.statistical_data_table tr td:nth-child(1),
.statistical_data_table_header tr th:nth-child(1) {
    width: 175px;
}
.statistical_data_table tr td:nth-child(2),
.statistical_data_table_header tr th:nth-child(2),
.statistical_data_table tr td:nth-child(3),
.statistical_data_table_header tr th:nth-child(3) {
    width: 275px;
}
.statistical_data_table tr td:nth-child(4),
.statistical_data_table_header tr th:nth-child(4) {
    width: 175px;
}
.statistical_data_table tr td:nth-child(5),
.statistical_data_table_header tr th:nth-child(5) {
    width: 175px;
}


.alarm_border {
    border: 2px solid red;
}
.alarm_border_thic {
    border: 3px solid red !important;
}