/* *************************************************************************************************************************************************** */
/* PC */
/* *************************************************************************************************************************************************** */

/* +++ общие *************************************************************************************************************************************************** */

#Body {
   margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
   background-color: #202020;
   color: #F0F0F0;
   font-family: arial;
}

.Body_Index_php {
   height: 100vh;
}

#MainTable {
   width: 100%; height: 100%;
}

#MainTable > tbody > tr.tr_top {
   height: 10px;
}

#MainTable > tbody > tr.tr_top > td{
   padding: 3vh 0px 2vh 0px;
}

td.TD_MainTable_td_menu {
   text-align: center;
   vertical-align: top;
   width: 100px;
}

div.MainTable_td_menu {
   overflow: scroll;
   height: 100%;
}

#MainTable_td_caption {
}

td.MainTable_td {
   height: 50px;
   -display: block;
   -font-size: 1.5vw;
}

span.ok { color: #80E080; }
span.ok2 { background-color: #80E080; padding: 2px 5px 2px 5px; }
span.error { color: #E08080; }
span.error2 { background-color: #E08080; padding: 2px 5px 2px 5px; !important; }

/* --- общие *************************************************************************************************************************************************** */



/* +++ index.php *************************************************************************************************************************************************** */

.logo_img {
   width: 25vw;
   /* 0063a4 */
   border-radius: 1.5vw; border-width: 1.5vw;
}

.logo_caption {
   font-size: 2.0vw;
   color: #F0F0F0;
}

.logo_img_2 {
   width: 25vw;
   display: inline;
}

.logo_img_3 {
   width: 25vw;
   display: inline;
   border-radius: 1.5vw; border-width: 1.5vw;
}

.logo_caption_2 {
   font-size: 2.0vw;
   color: #F0F0F0;
   display: inline;
   position: relative;
   top: -1.0vh;
   white-space: nowrap;
}

.div_user_info {
}

/* --- index.php *************************************************************************************************************************************************** */


/* +++ ввод пин-кода *************************************************************************************************************************************************** */

.Btn_Pin {
   margin: 0.5vw;
   padding: 0.75vw;
   background-color: #408040;
   text-align: center;
   vertical-align: middle;
   font-size: 3vw; color: #F0F0F0;
   width: 3vw;
   display: inline-block;
   cursor: pointer;
   border-radius: 0.75vw; border-width: 0.75vw;
}

.Btn_Pin_Empty {
   margin: 0.5vw;
   padding: 0.75vw;
   -background-color: #40F040;
   text-align: center;
   vertical-align: middle;
   font-size: 3vw; color: #F0F0F0;
   width: 3vw;
   display: inline-block;
}

.Btn_Pin_Click {
   background-color: #A0FFA0;
}

.Div_Pin {
   font-size: 2vw;
   --color: #202020;
   color: #F0F0F0;
}

.Pin_String {
   --width: 170px;
   --width: 11.0vw;
   width: 10.5vw;
   display: inline-block;
   background-color: #F0F0F0;
   text-align: left;
   color: #202020;
   border-radius: 0.75vw; border-width: 0.75vw;
   font-size: 2.3vw;
   margin: 0px 0px 0.5vw 0px;
   padding: 0.5vw 0px 0px 0.5vw;
}

.Span_Pin_Caption {
   --width: 5.5vw;
   width: 6.5vw;
   margin: 0px 0.5vw 0px 0px; /* не работает bottom */
}

.Btn_Enter {
   margin: 0.75vw;
   padding: 0.75vw;
   background-color: #208070;
   text-align: center;
   vertical-align: middle;
   font-size: 3vw; color: #F0F0F0;
   width: 14vw;
   display: inline-block;
   cursor: pointer;
   border-radius: 0.75vw; border-width: 0.75vw;
}

.Div_Message {
   font-size: 2w; color: #202020;
}

.Div_Message_Error {
   color: #802020;
}

.Div_Message_Ok {
   color: #208020;
}

.Div_Tryes {
   font-size: 2w; color: #202020;
   display: none;
}

/* --- ввод пин-кода *************************************************************************************************************************************************** */


/* +++ меню *************************************************************************************************************************************************** */

a.menu_btn_0 {
   border-radius: 5px;
   border-width: 2px;
   text-decoration: none;
}

a.menu_btn_a {
   margin: 0.3vw 1vw 0.3vw 0vw;
   padding: 0.3vw 1vw 0.3vw 1vw;
   background-color: #408040;
   text-align: center;
   vertical-align: middle;
   font-size: 1.25vw; color: #F0F0F0;
   -width: 5vw;
   display: inline-block;
   cursor: pointer;
}

a.menu_btn_logout_a {
   background-color: #804040;
}

.menu_media_info {
   margin: 0.3vw 1vw 0.3vw 0vw;
   padding: 0.3vw 1vw 0.3vw 1vw;
   background-color: #404080;
   color: #F0F0F0;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;

   border-radius: 5px;
   border-width: 2px;

   font-size: 1.25vw; color: #F0F0F0;
}

/* --- меню *************************************************************************************************************************************************** */



/* +++ menu.camera_set *************************************************************************************************************************************************** */

#div_cameras_sets {
   --padding: 10px 10px 10px 10px;
   --margin: 10px 10px 10px 0px;
}

.div_camera_set_link_a {
   display: inline-block; /* NB! иначе не работает padding/margin */
   padding: 10px 10px 10px 10px;
   margin: 10px 10px 10px 0px;
   background-color: #8080E0;
   color: #F0F0F0;
   
   text-decoration: none;
   border-radius: 5px; border-width: 2px;
}

.div_camera_set_link_a:link            { color: #F0F0F0; background-color: #8080E0; text-decoration: none; }
.div_camera_set_link_a:visited     { color: #F0F0F0; background-color: #8080E0; text-decoration: none; }
.div_camera_set_link_a:hover         { color: #FFFFFF; background-color: #A0A0E0; text-decoration: none; }
.div_camera_set_link_a:active      { color: #F0F0F0; background-color: #8080E0; text-decoration: none; }

.div_camera_set_current {
   display: inline-block;
   background-color: #80E080;
   color: #808080;
   padding: 10px 10px 10px 10px;
   margin: 10px 10px 10px 0px;
   border-radius: 5px; border-width: 2px;
}

/* --- menu.camera_set *************************************************************************************************************************************************** */


/* +++ frame, video *************************************************************************************************************************************************** */

.Div_IFrame_Video {
   --padding: 0px 0px 0px 0px;
   padding: 5px 5px 5px 5px;
   background-color: #404040;
}

.IFrame_Video {
   border: none;
}

.img_frame {
   background-color: #202080;
}

/* --- frame, video *************************************************************************************************************************************************** */


/* +++ main *************************************************************************************************************************************************** */

.main_camera_caption {
   background-color: #000000;
   font-size: 0.75vw;
}

/* --- main *************************************************************************************************************************************************** */


/* +++ archives *************************************************************************************************************************************************** */

.Table_Archives {
   width: 100%;
}

.Table_Archives > tbody > tr > td.td_camera_name {
   width: 1px;
   white-space: nowrap;
}

.archives_timeline_td_v { background-color: #208020; }
.archives_timeline_td_v_0 { background-color: #208020; }
.archives_timeline_td_v_1 { background-color: #40A040; }
.archives_timeline_td_no { background-color: #404040; }
.archives_timeline_td_last { background-color: #802020; }

.archives_timeline_a {
   display: inline-block;
   width: 100%;
   text-decoration: none;
}

#archives_timeline_td_div_onmouseover {
   display: none;
   position: absolute;
   background-color: #F0F0F0;
   color: #202020;
   padding: 10px 10px 10px 10px;
   margin: 10px 10px 10px 0px;
   border-radius: 5px; border-width: 2px;
}

.archives_timeline_hours_0 { background-color: #202080; }
.archives_timeline_hours_1 { background-color: #4040A0; }

.archive_video {
   width: 106vh;
   height: 60vh;
}

/* --- archives *************************************************************************************************************************************************** */


#div_copyright {
   --font-size: 12px;
   font-size: 0.5vw;
}