@import url(font-awesome.min.css);

:root {

    --body_background: #f5f5f5;
    --body_color: #111;
    --color_description: #949494;
    --content_width: 960px;
    --color_login: #fff;
    --color_login_logout: #fff;
    --bg_login_logout: #ff0000;
    --bg_warn_title: #ff0000;
    --color_warn_title: #fff;

    --header_bg: #121212;
    --active_link_color: #111;
    --hidden_link_bg: #8f8f8f;
    --hidden_link_bg_hover: #fff;

    --block_key_background: #fff;
    --copy_p_color: #222;
    --code_background: #fff;
    --code_border_color: #ddd;

    --sup_reki_background: #005ac0;
    --sup_reki_color: #fff;

    --select_key_background: #005ac0;
    --select_key_color: #fff;

    --table_background_color_header: #fff;
    --table_background_color_trhover: #eee;
    --table_background_color_tr: #fdfdfd;
    --table_background_color_tr_hover: #f1f1f1;

    --button_copy_background: #1652F0;
    --button_copy_background_no: #1652F015;
    --button_copy_border: #1652F0;
    --button_copy_color: #fff;
    --button_copy_color_no: #111;
    --button_copy_shadow: rgb(22, 82, 240, .3);
    --button_copy_background_office: #00c000;
    --button_copy_background_office_no: rgba(16, 124, 65, 0.15);
    --button_copy_border_office: #107c41;
    --button_copy_color_office: #fff;
    --button_copy_shadow_office: rgb(16, 124, 65, .3);

    --button_copy_background_files_no: rgba(0, 0, 0, 0.09);

    --button_copy_background_faq_no: rgba(255, 142, 0, 0.13);
    
    --button_copy_background_hover: #0A46E4;
    --button_copy_border_hover: #0A46E4;
    --button_copy_background_active: #0039D7;
    --button_copy_border_active: #0039D7;

    --button_copy_office_background: #00c000;
    --button_copy_office_border: #00c000;
    --button_copy_office_color: #fff;
    --button_copy_office_shadow: rgb(0, 192, 0, .3);
    --button_copy_office_background_hover: #00b000;
    --button_copy_office_border_hover: #00b000;
    --button_copy_office_background_active: #00a000;
    --button_copy_office_border_active: #00a000;
    --button_copy_office_background_ok: #f5f5f5;


    --shadow_color_light: rgb(0 0 0 /.07);
    --color_button_link: #111;
    --border_button: #ccc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 15px; background: var(--body_background); color: var(--body_color); cursor: default }

.main { position: relative; width: 100%; background: var(--body_background); z-index: 999; margin: 0; padding: 50px 0; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.15); }
header { position: relative; width: 100%; margin: 0 auto; background: var(--header_bg); }
header .header_center { display: flex; align-items: center; justify-content: space-between; width: var(--content_width); margin: 0 auto; height: 65px; padding: 15px 0 0 0  }
header .header_center .login_set { color: var(--color_login); font-style: italic }
header .header_center .login_set .logout_link:link, .logout_link:visited, .logout_link:hover { background: var(--bg_login_logout); color: var(--color_login_logout); text-decoration: none; padding: 0 5px 1px 5px; border-radius: 2px; }
header menu {  position: relative;  }
header menu .button_link { position: relative; text-decoration: none; color: var(--button_copy_color_no); top: 5px; transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1); }
header menu .button_link:hover { top: 3px }
header menu li { position: relative; display: inline; border-radius: 3px 3px 0 0; margin: 0 5px 0 0;  }
header menu li.link_windows { background: var(--button_copy_background_no) }
header menu li.link_office { background: var(--button_copy_background_office_no) }
header menu li.link_files { background: var(--button_copy_background_files_no) }
header menu li.link_faq { background: var(--button_copy_background_faq_no) }
header menu li.active_link { background: var(--body_background); color: var(--active_link_color); padding: 10px 20px 27px 20px; z-index: 1000; }
header menu li.link_hidden { background: var(--hidden_link_bg); color: var(--active_link_color); padding: 10px 20px 27px 20px; transition: 5s cubic-bezier(0.075, 0.82, 0.165, 1); }
header menu li.link_hidden:hover { background: var(--hidden_link_bg_hover); }
.main .page_main { position: relative; width: var(--content_width); margin: 0 auto }
.main .page_main .warn_block { position: relative; margin: 0 0 40px 0  }
.main .page_main .warn_block p { margin: 0 0 5px 0 }
.main .page_main .warn_block .warn_title { background: var(--bg_warn_title); color: var(--color_warn_title); padding: 2px 7px 3px 7px; font-size: 16px; }


.block_act, .page_space { position: relative; margin: 50px 0 0 0 }
.block_act, .page_space:nth-child(1) { position: relative; margin: 0 0 0 0 }
.copy_grid { display: grid; grid-template-columns: auto 125px; gap: 5px; margin: 0 0 7px 0 }
.copy_grid .code { display: block; background: var(--code_background); width: 100%; border: 1px var(--code_border_color) solid; padding: 10px 12px; border-radius: 6px;/* white-space: nowrap;*/ font-size: 14px !important  }
.notices { margin: 0 0 2px 0; font-size: 14px; color: var(--copy_p_color) }
.source_link { margin: 20px 0 0 0 }


.accordions { max-width: var(--content_width); margin: 0 auto; font-family: system-ui, sans-serif }
.accordions details { border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 8px }
.accordions summary { padding: 12px 16px; background: #fff; cursor: pointer; border-radius: 6px }
.accordions .content { padding: 12px 16px }




.Zh1 { font-weight: 100; font-size: 60px; margin: 0 0 35px 0 }
.Zh3 { font-weight: 100; font-size: 34px; margin: 0 0 15px 0 }
.Zh3_last { font-weight: 100; font-size: 34px; margin: 45px 0 15px 0 }










.grid_main { position: relative; display: grid; grid-template-columns: 550px auto; min-width: 1300px; }
.grid_main .copy_key_act { background: var(--block_key_background); height: 100vh; padding: 20px 30px; position: fixed; box-shadow: 0 2px 7px rgb(0 0 0 /.09); }



.tables_key { position: relative; padding: 20px 30px }
.tables_key .sup_reki { font-weight: normal; font-size: 12px; background: var(--sup_reki_background); color: var(--sup_reki_color); padding: 0 7px 1px 7px; border-radius: 4px; }
.block_act_office { position: relative; width: 100%; } 
.block_act_office .block_act_mini { position: relative;  } 
.block_act_office .block_act_mini p { margin: 0 0 2px 0; font-size: 14px; color: var(--copy_p_color) }
.block_act_office .grid_code_zone { display: grid; grid-template-columns: auto 125px; gap: 5px; margin: 0 0 7px 0 } 
.block_act_office .grid_code_zone .code { display: block; background: var(--code_background); border: 1px var(--code_border_color) solid; padding: 10px 12px; border-radius: 6px; font-size: 14px !important  }

.header_h1 { margin: 0 0 20px 0 }
.header_h4 { margin: 0 0 10px 0 }
.header_h4.mtop40 { margin: 40px 0 10px 0 }
.header_h5 { margin: 10px 0 10px 0 }
.header_h5.mtop_0 { margin: 0 0 10px 0 }
.header_h5.mtop_10 { margin: 10px 0 10px 0 }
.header_h5.mtop_20 { margin: 20px 0 10px 0 }
.header_h5.mtop_40 { margin: 40px 0 10px 0 }

.ldashed { border-bottom: 1px dashed; text-decoration: none }

.key_background { padding: 0 2px }
.key_background_active { animation: 1s linear 0s  alternate bg_key; }



.button_copy { width: 125px; appearance: button; background: var(--button_copy_background); border: 1px solid var(--button_copy_border); border-radius: 6px; color: var(--button_copy_color); cursor: pointer; font-size: 14px; line-height: 1.15; overflow: visible; padding: 12px 0;   position: relative;   text-align: center; text-transform: none; transition: all 80ms ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; box-shadow: 0 2px 3px var(--button_copy_shadow) }
.button_copy:disabled { opacity: .5; cursor: default; }
.button_copy:focus { outline: 0; }
.button_copy:hover { background: var(--button_copy_background_hover); border-color: var(--button_copy_border_hover); }
.button_copy:active { background: var(--button_copy_background_active); border-color: var(--button_copy_border_active); }
.button_copy_ok {  width: 125px; appearance: button; background: #eee; border: 1px solid #e1e1e1; border-radius: 6px; color: #333; cursor: pointer; font-size: 14px; line-height: 1.15; overflow: visible; padding: 12px 0; position: relative; text-align: center; text-transform: none; transition: all 80ms ease-in-out; }


.button_copy_office { width: 125px; appearance: button; background: var(--button_copy_office_background); border: 1px solid var(--button_copy_office_border); border-radius: 6px; color: var(--button_copy_office_color); cursor: pointer; font-size: 14px; line-height: 1.15; overflow: visible; padding: 12px 0;   position: relative;   text-align: center; text-transform: none; transition: all 80ms ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; box-shadow: 0 2px 3px var(--button_copy_office_shadow) }
.button_copy_office:disabled { opacity: .5; cursor: default; }
.button_copy_office:focus { outline: 0; }
.button_copy_office:hover { background: var(--button_copy_office_background_hover); border-color: var(--button_copy_office_border_hover) }
.button_copy_office:active { background: var(--button_copy_office_background_active); border-color: var(--button_copy_office_border_active) }
.button_copy_office_ok {  width: 125px; appearance: button; background: var(--button_copy_office_background_ok); border: 1px solid #e1e1e1; border-radius: 6px; color: #333; cursor: pointer; font-size: 14px; line-height: 1.15; overflow: visible; padding: 12px 0; position: relative; text-align: center; text-transform: none; transition: all 80ms ease-in-out; }

.button_link_files { 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) }


/*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; }

.table_polos { width: 100%; border: none; margin: 0 }
.table_polos thead { box-shadow: 0 3px 7px var(--shadow_color_light); border-radius: 8px }
.table_polos thead th { text-align: left; border: none; padding: 20px 15px; background: var(--table_background_color_header); color: var(--table_color_header); font-size: 15px; font-weight: 500; }
.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: 13px 15px; vertical-align: top; font-size: 15px; }
.table_polos tbody tr:nth-child(even){ background: var(--table_background_color_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: 12px; 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; }



.warning { color: #ff0000; margin: 0 0 50px 0 }






@keyframes bg_key {
    from {
      background: transparent;
    }
    50% {
      background: var(--select_key_background);
      color: var(--select_key_color);
    }
    to {
      background: transparent;
    }
  }