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

* { margin: 0; padding: 0; box-sizing: border-box }

:root { 
    --index: calc(1vw + 1vh);
    --background_color_body: #fff;
    --color_text: #111;
    --color_link: #00273d; 
    --color_link_hover: #ff0000;
    --background_color_table_header: #333;
    --background_color_table_trhover: #eee ;
    --background_color_table_tr: #f5f5f5 ;
    --color_table_header: #fff;
    --background_status_good: linear-gradient(-120deg, #6ece00, #0c8d12);
    --background_status_bad: linear-gradient(-120deg, #ce0000, #8d0c0c);
    --background_status_null: linear-gradient(140deg, #b1b1b1, #535353) ;
    --color_status_white: #fff;
    --color_status_old_status: #ff0000;
    --color_status_good_status: #084400;
    --color_gray: #999;
    --color_light_gray: #666;
    --dropdown_link_color: #000;
    --dropdown_del_link_color: #ff0000;
    --dropdown_background_color: #fff; 
    --dropdown_hover_background_color: #f1f1f1;
    --dropdown_color: #111;
}

@media (prefers-color-scheme: dark) {
    :root { 

        --background_color_body: #111;
        --color_text: #fff;
        --color_link: #00273d;
        --color_link_hover: #ff0000; 
        --background_color_table_header: #191919;
        --background_color_table_trhover: #222 ;
        --background_color_table_tr: #191919 ;
        --color_table_header: #fff;
        --color_status_old_status: #bb0000;
        --color_status_good_status: #118f00;
        --color_gray: #666;
        --color_light_gray: #eeeeeeda;
        --dropdown_link_color: #eee;
        --dropdown_del_link_color: #ff0000;
        --dropdown_background_color: #212529; 
        --dropdown_hover_background_color: #121212;
        --dropdown_color: #eee;
        --filter_invert: invert(100%);
    }

 
}

body { background: var(--background_color_body); color: var(--color_text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 16px }
a:link, a:visited { color: var(--color_link) }
a:hover { color: var(--color_link_hover) }
.header { display: flex; padding: calc(var(--index) * 1); justify-content: space-between; align-items: center; }
.header .mklogo { position: relative; background: url('../images/mklogo.svg') no-repeat; width: 220px; height: 45px; margin: 0 0 0 20px; filter: var(--filter_invert); }
.header .mklogo .slog { position: absolute; right: 0; bottom: 0; font-size: 12px; color: var(--color_gray) }
.header .last_version { text-align: right; font-size: 14px; }
.header .last_version p { margin: 0; line-height: 130%; }
.header .last_version .gray_text { color: var(--color_gray); font-size: 12px; }
.header .last_version .strong_s { font-weight: 600; }
.header .add_device { border: 1px #fff solid; padding: 7px 15px; cursor: pointer; border-radius: 10px; }
.header .add_device:hover { background: #ff0000; }
.header .link_logout { color: var(--color_gray) }

.dropdown { position: relative; display: inline-block }
.dropdown-content { display: none; position: absolute; background: var(--dropdown_background_color); min-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); z-index: 1; border-radius: 8px; top: 0; right: -10px }
.dropdown-content a { color: var(--dropdown_link_color); padding: 10px 12px; text-decoration: none; display: block; font-size: 14px; cursor: pointer; }
.dropdown-content .del { color: var(--dropdown_del_link_color); padding: 10px 12px; text-decoration: none; display: block; font-size: 14px }
.dropdown-content a:hover { background: var(--dropdown_hover_background_color); color: var(--dropdown_color); border-radius: 8px; }
.dropdown:hover .dropdown-content { display: block }


.modal .warn { color: #ff0000; font-size: 9px; font-weight: 100; }
.modal label { margin: 0 0 0 5px; color: var(--color_light_gray) }

.table_polos { width: 100%; border: none; margin-bottom: 20px }
.table_polos thead th { font-weight: bold; text-align: left; border: none; padding: 10px 15px; background: var(--background_color_table_header); color: var(--color_table_header); font-size: 16px }
.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; font-size: 14px; 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 tbody tr:hover { background-color: var(--background_color_table_trhover) }
.table_polos .w250 { width: 250px; }
.address_block { position: relative; width: 100% }
.address_block .status__block { position: relative; width: 16px; float: left }
.address_block .status__block .status__line { position: relative; width: 7px; height: 100%; border-radius: 50px; }
.address_block .address__block { position: relative; width: 100%; margin: 0 0 0 16px }
.status_online { background: var(--background_status_good); }
.status_offline { background: var(--background_status_bad) }
.status_null { background: var(--background_status_null) }

main { padding: 20px calc(var(--index) * 1) }

.minitext { display: block; font-size: 12px; color: #999 }
.sepparator_slash { color: var(--color_gray) }






.status_version { cursor: help; }
.good_version { color: var(--color_status_good_status) }
.bad_version { color: var(--color_status_old_status) }


.board_name { white-space: nowrap; }
.textr { text-align: right; }
.dotted_menu { font-weight: bold }

.grid_resources { display: grid; gap: 1px; grid-template-columns: auto auto auto; font-size: 11px }

.msg_error_login { padding: 20px }

.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
}


/*messages*/
.msg_error {
    text-align: center;
    padding: 10px 0;
    width: 100%;
    background: rgb(255, 0, 0, .1);
    color: #ff0000
}

.msg_error p {
    margin: 0
}

.msg_error p span {
    font-weight: 500;
}
/*end messages*/


.page_activation {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 145%;
}

.page_activation h2 {
    color: #ff0000;
    margin: 0 0 10px 0;
}