@import url('font-awesome.min.css');
/*
.page_main { display: grid; gap: 20px; grid-template-columns: 370px auto }
.page_main .left_side { padding: 20px; background: #f5f5f5; border-right: 1px #ddd solid }
.page_main .left_side .menu { position: sticky; top: 20px; }
.page_main .left_side .menu .user sup a { color: var(--color_map_hover) }
.page_main .left_side .menu .files { position: relative; margin: 0 0 50px 0 }
.page_main .left_side .menu .files .minitext { display: block; font-size: 13px; line-height: 130%; margin: 0 0 10px 0 }
.page_main .left_side .menu .files ul { list-style: none; margin: 0 0 0 -30px }
.page_main .left_side .menu .files ul ol { margin: 0 0 0 30px }
.page_main .left_side .menu .files ul li { list-style: none; line-height: 170%; }
.page_main .right_block { padding: 30px }
*/

:root {
    --body_background: #eee;
    --body_color: #111;
    --tabs_content_background: #fff;
    --tabs_backgroud: #fff;
    --tabs_color: #111;
    --color_map: #111;
    --color_map_hover: #0000ee;
    --background_map_block: #f9f9f9;
    --menu_color: greenyellow ;
    --color_copycode: #0000ee;
    --border_button: #ccc;
    --color_button: #111;
    --backgrdoud_button: #eee;
    --background_color_table_header: #f5f5f5;
    --background_color_table_trhover: #eee ;
    --background_color_table_tr: #f9f9f9 ;
    --background_color_table_tr_hover: #f1f1f1 ;
    --card_download_1: #1e3c72, #2a5298;
    --color_description: #888;
    --color_notice_p: #bb0000;
    --color_button_link: #111;
    --border_code_color: #ddd;
}


@media (prefers-color-scheme: dark) {

  :root {
    --body_background: #111;
    --body_color: #f5f5f5;
    --tabs_content_background: #222;
    --tabs_backgroud: #222;
    --tabs_color: #fff;
    --color_map: #eee;
    --color_map_hover: greenyellow;
    --background_map_block: #191919;
    --menu_color: greenyellow ;
    --color_copycode: #0000ee;
    --border_button: #444;
    --backgrdoud_button: #252525;
    --color_button: #eee;
    --background_color_table_header: #111;
    --background_color_table_trhover: #eee ;
    --background_color_table_tr: #191919 ;
    --background_color_table_tr_hover: #f1f1f1 ;
    --card_download_1: #1e3c72, #2a5298;
    --color_description: #888;
    --color_notice_p: #bb0000;
    --color_button_link: #eee;
    --border_code_color: #444;
  }

}

* { margin: 0; padding: 0; box-sizing: border-box }

p { margin: 0 0 3px 0 }
.block_act { position: relative; margin: 0 0 70px 0 }
.block_act_mini { position: relative; margin: 0 0 50px 0 }
.map_link { margin: 0; position: sticky; top: 25px; background: var(--background_map_block); border-radius: 8px; padding: 20px 25px }
.map_link ul { margin: 0 0 0 -20px }
.map_link ul li { list-style: square; line-height: 170%; color: var(--menu_color) }
.map_link ul li .link_menu:link, .link_menu:visited { color: var(--color_map); text-decoration: none; border-bottom: 1px dashed transparent }
.map_link ul li .link_menu:hover { color: var(--color_map_hover); border-bottom: 1px dashed var(--color_map_hover) }

.map_zone { position: relative; width: 100%; height: 1px; margin: -10px 0 0 0 }
.grid_code_zone { display: grid; grid-template-columns: auto 110px; gap: 10px } 

.button_copy { border-radius: 8px; width: 110px; border: 1px var(--border_button) solid; background: var(--backgrdoud_button); color: var(--color_button); padding: 12px 0; font-size: 14px }
.button_copy:active { box-shadow: inset 1px 1px 3px rgb(0 0 0 /.2); }
.button_copy.iscopy { opacity: .5 }

.button_link { display: block; border-radius: 8px; width: 90px; border: 1px var(--border_button) solid; padding: 5px 0 6px 0; font-size: 14px; margin: 4px 0 0 0; text-align: center; text-decoration: none; color: var(--color_button_link) }



ul { list-style: none; }

.tabs { text-decoration: none; color: black }

body {
  /*font: normal 16px/1.5 Helvetica, sans-serif;
  background: linear-gradient(to right, #6814cd 0%, #3163f3 100%);*/
  background: var(--body_background); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px; color: var(--body_color)
}

h1 { margin: 5px 0 20px 0 }
h3 { margin: 20px 0 10px 0 }
h4 { margin: 20px 0 10px 0 }
.code { display: block; border: 1px var(--border_code_color) solid; padding: 12px 15px; margin: 0 0 10px 0; border-radius: 8px; }
.ldashed { border-bottom: 1px dashed; text-decoration: none }
.img { max-width: 100%; margin: 15px 0 }



.page_grid { display: grid; grid-template-columns: 400px auto; gap: 40px; padding: 10px }
.page_grid .login_box { padding: 15px 20px; margin: 0 0 20px 0; font-style: italic; font-size: 14px }
.tabs-container { width: 100%; max-width: 1400px; min-width: 1200px; margin: 20px auto; padding: 25px }
.tabs { display: flex }
.tabs li:not(:last-child) { margin-right: 7px }
.tabs li a { display: block; position: relative; top: 4px; padding: 10px 25px; border-radius: 4px 4px 0 0; background: var(--tabs_backgroud); color: var(--tabs_color); opacity: 0.7; transition: all 0.1s ease-in-out }
.tabs li.active a,
.tabs li a:hover { opacity: 1; top: 0 }
.tabs-content { position: relative; z-index: 2; padding: 25px; border-radius: 8px; background: var(--tabs_content_background); margin: -17px 0 0 0 }
.tabs-panel { display: none }
.tabs-panel.active { display: block }
.tabs-panel p + div { margin-top: 0px }

.main_zag { margin: 0 0 20px 0 }

/*login*/
.login { display: flex; height: 100vh; align-items: center; padding-top: 40px; padding-bottom: 40px }
.login .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto }
.login .form-signin .checkbox { font-weight: 400 }
.login .form-signin .form-floating:focus-within { z-index: 2 }
.login .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0 }
.login .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0 }
.rules { display: block; font-size: 13px; color: #990000; text-decoration: underline; }



.download_grid { display: grid; gap: 50px; grid-template-columns: auto auto auto auto;  }
.download_grid .box_link { height: 80px; width: 100%; text-align: center; }
.download_grid .box_link .dcard { height: inherit; width: inherit; border-radius: 10px; }
.download_grid .box_link .dcard.card_blue { background: linear-gradient(145deg, var(--card_download_1)); }
.download_card { position: relative; width: 250px; height: 100px }




.table_polos { width: 100%; border: none; margin: 0 0 40px 0 }
/*.table_polos tr:hover { background: var(--background_color_table_tr_hover) }*/
.table_polos thead th { text-align: left; border: none; padding: 10px 15px; background: var(--background_color_table_header); color: var(--color_table_header); }
.table_polos thead tr th:first-child { border-radius: 8px 0 0 8px }
.table_polos thead tr th:last-child { border-radius: 0 8px 8px 0 }
.table_polos tbody td { text-align: left; border: none; padding: 20px 15px; vertical-align: top }
.table_polos tbody tr:nth-child(even){ background: var(--background_color_table_tr) }
.table_polos tbody tr td:first-child { border-radius: 8px 0 0 8px }
.table_polos tbody tr td:last-child { border-radius: 0 8px 8px 0 }
.table_polos .block_name { display: block; font-weight: 500; margin: 0 0 7px 0 }
.table_polos .block_desc { display: block; color: var(--color_description); font-size: 13px; font-weight: normal }
.table_polos .block_desc .notice_p { color: var(--color_notice_p) }
.table_polos .text_center { text-align: center; }
.table_polos .w100 { width: 100% }
.table_polos .weight500 { font-weight: 500; }
/*.table_polos tbody tr:hover { background-color: var(--background_color_table_trhover) }*/


.table_kms {
	border: 1px solid #eee;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 20px;
}
.table_kms th {
	font-weight: bold;
	padding: 5px;
	background: #efefef;
	border: 1px solid #dddddd;
}
.table_kms td{
	padding: 5px 10px;
	border: 1px solid #eee;
	text-align: left;
}
.table_kms tbody tr:nth-child(odd){
	background: #fff;
}
.table_kms tbody tr:nth-child(even){
	background: #F7F7F7;
}
