/*
 * Автор: wetherius.ad
 * Обратная связь: git@freelance.biz.ua
 *
 * IDE: PhpStorm
 * Проект: fluidsens
 * Последнее обновление: 02.10.2019, 10:36
 *
 */


div#footer{
    align-items: center;
    justify-content: center;

    grid-template-columns: 40px 40px 1fr 40px 40px;
    grid-template-rows: 1fr;
    grid-column-gap: 4px;

}

div#footer div#info_f{
    display: grid;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.51);
}

div#footer div.f_cube_block{
    display: grid;
    width: 40px;
    height: 40px;
    cursor: pointer;

    background-color: rgba(61, 255, 61, 0);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px, 40px;

    transition-property: background;
    transition-duration: 0.16s;
    transition-timing-function: linear;
    }
div#footer div.f_cube_block:hover{background-color: rgba(255, 238, 238, 0.24);}

div#footer div#lang_m_f_block, div#footer div#m_f_block{cursor: pointer;}

div#footer div#m_f_block, div#footer div#lang_m_f_block{background-image: url(../../img/ico/3p-menu-gam.png);}
div#footer div#h_f_block{background-image: url(../../img/ico/home-color.png);}


div#footer div.ff_sphere{
    display: block;
    position: absolute;
    bottom: 40px;
    width: 0;
    height: 350px;
    background: none;
    overflow: hidden;
    padding-bottom: -40px;
    z-index: 400;

}

div#footer div.ff_sphere p.ff_buble{

    display: grid;
    position: absolute;
    bottom: 0;

    align-items: center;
    justify-content: center;

    width: 80px;
    height: 80px;
    border-radius: 50px;
    border:  4px solid rgba(255, 238, 238, 0);
    word-wrap: unset;

    transition-property: margin;
    transition-duration: 0.16s;
    transition-timing-function: linear;

    margin-bottom: -200px;
    color: #ffffff;

    background-color: #224ea5;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px, 60px;

    cursor: pointer;

}


[bloob-info] {position: relative; }
[bloob-info]::after {
    content: attr(bloob-info);
    position: absolute;
    display: grid;
    align-items: center;
    justify-content: center;

    min-width: 100px;
    min-height: 30px;

    margin-left: -50%;
    margin-top: 10px;

    text-align: center;

    left: 0;
    top: 0;
    background: #16091c;
    border-radius: 50px;
    color: #fff;
    padding: 16px;
    pointer-events: none;
    opacity: 0;

    z-index: 840;

    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
[bloob-info]:hover::after {opacity: 1;}


div#footer div#r_radial_block{right: 0;}
div#footer div#l_radial_block{left: 0;}

div#footer div#r_radial_block p.booble_right{
    right: 0;
    margin-right: -200px;
}
div#footer div#l_radial_block p.booble_left{
    left: 0;
    margin-left: -200px;
}

div#footer div#l_radial_block p.sys_bloob{
    color: #224ea5;
    background-color: #f7f7f7;
}

/*
 * Автор: wetherius.ad
 * Обратная связь: git@freelance.biz.ua
 *
 * IDE: PhpStorm
 * Проект: fluidsens
 * Последнее обновление: 02.10.2019, 10:36
 *
 */



html{
    padding: 0;
    margin: 0;
}

body{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    min-height: 640px;
    min-width: 300px;
    z-index: -100;
    padding: 0;
    margin: 0;
}
a,p,li{
    padding: 0;
    margin: 0;
    text-decoration: none;
    line-height: 1;
    text-align: left;
}

/*#############################################################################################################*/

div#header{
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    min-width: 300px;
    background: rgb(255, 255, 255);
    z-index: 800;
}
div#body{
    display: grid;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    min-width: 300px;
    padding-bottom: 40px;
    z-index: 100;

}
div#footer{
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    min-width: 300px;
    background: #000000;
    z-index: 800;

    -moz-user-select: none; /* Mozilla Firefox */
    -ms-user-select: none; /* Internet Explorer (не поддерживается) */
    -o-user-select: none; /* Opera Presto (не поддерживается) */
    -webkit-user-select: none; /* Google Chrome, Opera Next, Safari */

}

/*#############################################################################################################*/

div#header{
    align-items: center;
    justify-content: center;

    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 4px;

}
div#header div.h_style{
    display: grid;
    width: 100%;
    height: 80px;
}
div#header div#h_logo{
    background-position: left;
    background-repeat: no-repeat;
    background-size: 150px;
    background-image: url(../../img/logo/login_header.svg);

}
div#header div#h_header{

    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    text-align: center;

    font-size: 60px;
    cursor: unset;
}

div#header div#h_user{
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto;
}
div#header div#h_user div#h_slime{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 4px;

    align-items: center;
    justify-content: center;

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
}
div#header div#h_user div#h_slime div#h_user_text{
    padding-left: 10px;
}
div#header div#h_user div#h_slime div#h_user_pico{
    width: 72px;
    height: 72px;
    border-radius: 40px;

    border:  2px solid #224ea5;

    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70px, 70px;
}
div#header div#h_user div#h_slime div#h_user_pico.h_true{background-image: url(../../img/ico/user-color.svg);}
div#header div#h_user div#h_slime div#h_user_pico.h_false{
    background-image: url(../../img/ico/auth-color.png);
    opacity: 0.4;
    border: none;
    background-size: 40px, 40px;
}
div#header div#h_user div#h_slime:hover{background-color: rgba(34, 78, 165, 0.2);}
div#header div#h_user div#h_slime:hover div#h_user_pico{opacity: 1;}

div#header div#h_user div#h_slime_hiden{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 0px);
    grid-row-gap: 4px;

    display: none;

    min-height: 0;

    opacity: 0;
    align-items: center;
    justify-content: center;

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
}
div#header div#h_user div#h_slime:hover + div#h_slime_hiden{display: grid;}
div#header div#h_user div#h_slime_hiden:hover{display: grid;}

div#header div#h_user div#h_slime_hiden div{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 8px;

    align-items: center;
    justify-content: center;
    height: 100%;

    padding-top: 4px;
    padding-bottom: 4px;

    background-color:  #224ea5;
    color: white;
    cursor: pointer;
}
div#header div#h_user div#h_slime_hiden div:hover{
    background-color: #00E7BA;
    color: #000000;
}
div#header div#h_user div#h_slime_hiden div.h_allert:hover{
    background-color: #FFB700;
    color: #000000;
}
div#header div#h_user div#h_slime_hiden div p{
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
div#header div#h_user div#h_slime_hiden div div.h_ico{
    height: 40px;
    width: auto;
    min-width: 40px;
    border-radius: 40px;
    margin-left: 8px;
    margin-right: -8px;

    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px, 40px;
}

div#header div#h_user:hover div#h_slime_hiden, div#header div#h_user div#h_slime_hiden:hover{
    grid-template-rows: repeat(4, auto);
    opacity: 1;
}

div#preload_point{
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgba(0, 0, 0, 0.67);
    cursor: progress;
    z-index: 8999;
}

div#user_menu_header{
    display: grid;
    height: 100px;
    width: 100%;

    grid-template-columns:100px 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 6px;
    grid-column-gap: 6px;

    grid-template-areas: "ub_ava ub_info_1" "ub_ava ub_info_2" "ub_ava ub_info_3";

    justify-items: left;
}
div#user_menu_header div#user_m_ava{
    grid-area: ub_ava;
    display: grid;
    background-color: #ffffff;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px, 100px;
    background-image:  url(../../img/ico/user-color.svg);
    border:  4px solid #224ea5;

    width: 100px;
    height:100px;
    align-items: end;
    justify-items: right;

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
}
div#user_menu_header div#user_m_ava:hover{background-color: #c5c5c5;}
div#user_menu_header div#user_m_ava img{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin-right: -10px;
    margin-bottom: -10px;
    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
    cursor: pointer;
}
div#user_menu_header div#user_m_ava img:hover{transform:rotate(90deg);}
div#user_menu_header div#user_m_info_1{grid-area: ub_info_1; top: 0;}
div#user_menu_header div#user_m_info_2{grid-area: ub_info_2; top: 0;}
div#user_menu_header div#user_m_info_2{grid-area: ub_info_3; top: 0;}
div#user_menu_header div.m_text{
    display: block;
    margin-left: 20px;
    width: 100%;
    min-width: 200px;
    text-align: left;

}

/*================================= msg S =================================*/
div.inf_msg_b{
    position: fixed;
    display: block;

    top: -80px;
    bottom: 0;
    left: 0;
    right: 0;

    min-height: 300px;
    min-width: 300px;

    background-color: rgba(0, 0, 0, 0.66);
    transition-property: all;
    transition-duration: 0.19s;
    transition-timing-function: linear;

    z-index: 900;
    cursor: pointer;
}
div.inf_msg_f{
    display: grid;
    position: fixed;
    max-height: 90%;
    min-height: 100px;
    min-width: 200px;
    width: auto;
    max-width: 90%;

    top: 50%;
    left: 50%;
    grid-template-columns: 1fr 40px;
    grid-template-rows: 40px 1fr;
    grid-row-gap: 10px;

    grid-template-areas: "s_head s_h_close" "s_body s_body";

    z-index: 901;

    background-color: white;
    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;

    border-radius: 10px;
    padding: 15px;

    cursor: default;

}
div.inf_msg_f div.s_head{
    grid-area: s_head;

    display: grid;

    text-align: center;
    padding:  5px 25px 5px 5px;

    font-weight: bold;

    align-content: center;
    justify-content: left;
    justify-items: center;
}
div.inf_msg_f div.s_head_close{
    grid-area: s_h_close;
    width: 40px;
    height: 40px;

    border-radius: 4px;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: linear;

    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px, 40px;
    background-image: url(../../img/ico/close-black.png);

    cursor: pointer;
    opacity: 0.4;
}
div.inf_msg_f div.s_head_close:hover{background-image: url(../../img/ico/close-color.png); opacity: 1;}
div.inf_msg_f div.s_body{
    grid-area: s_body;
    display: grid;

    height: 100%;
    width: 100%;

    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fill, auto);
    grid-row-gap: 4px;

    overflow-x: hidden;
    overflow-y: auto;
}
div.inf_msg_f div.s_body p{line-height: 1.4;}
div.buttom_s{display: none;}

div.inf_msg_f div.s_body input{
    height: 40px;
    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;

    padding: 4px;

    background-color: #fff;
    border-radius: 10px;
    font-size: 24px;
}

div.inf_msg_f div.s_body p.img{display:grid; align-items: center;justify-items: center; }

div.inf_msg_f div.s_body div.buttom_s{
    display: grid;
    height: 40px;
    width: 100%;

    border-radius: 4px;
    background-color: #e2e2e2;

    cursor: pointer;

    align-content: center;
    justify-content: center;
    justify-items: center;

    font-weight: normal;

    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
div.inf_msg_f div.s_body div.buttom_s a{margin: 0 10px;}
div.inf_msg_f div.s_body div.buttom_s.red{background-color: #ff136c; color: white;}
div.inf_msg_f div.s_body div.buttom_s.pink{background-color: #8400ff; color: white;}
div.inf_msg_f div.s_body div.buttom_s.green{background-color: #00e7ba; color: white;}
div.inf_msg_f div.s_body div.buttom_s:hover{font-weight: 600; background-color: #FFB700; color: black;}
div.inf_msg_f div.s_body p.delay{display: block; height: 10px; width: 100%;}
div.inf_msg_f div.s_body div.buttom_blocks{
    display: grid;
    height: 40px;
    width: 100%;

    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;

    align-content: center;
    justify-content: center;
    justify-items: center;

    font-weight: normal;

    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}
div.inf_msg_f div.s_body div.buttom_blocks div.b_ok{
    display: grid;
    height: 40px;
    width: 100%;

    border-radius: 4px 0 0 4px ;
    background-color: #00e7ba;
    color: white;

    cursor: pointer;

    align-content: center;
    justify-content: center;
    justify-items: center;
}
div.inf_msg_f div.s_body div.buttom_blocks div.b_cancel{
    display: grid;
    height: 40px;
    width: 100%;

    border-radius: 0 4px 4px 0 ;
    background-color: #ff136c;
    color: white;

    cursor: pointer;

    align-content: center;
    justify-content: center;
    justify-items: center;
}
div.inf_msg_f div.s_body div.buttom_blocks div:hover{font-weight: bold; background-color: #FFB700; color: black;}
    /*================================= PRELOAD =================================*/
div#preload_point div{
    position: relative;
    display: block;
    width: 240px;
    height: 40px;
    text-align: center;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -260px;
}
div#preload_point div > div {
    width: 40px;
    height: 40px;
    background-color: #ffffff;

    margin-left: 40px;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
div#preload_point div div.b1p {-webkit-animation-delay: -0.32s;animation-delay: -0.32s;}
div#preload_point div div.b2p {-webkit-animation-delay: -0.16s;animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
@keyframes sk-bouncedelay { 0%, 80%, 100% {-webkit-transform: scale(0);transform: scale(0);} 40% {-webkit-transform: scale(1.0);transform: scale(1.0);} }
/*
 * Автор: wetherius.ad
 * Обратная связь: git@freelance.biz.ua
 *
 * IDE: PhpStorm
 * Проект: fluidsens
 * Последнее обновление: 02.10.2019, 10:36
 *
 */

div#body{
    display: grid;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 40px;

    justify-content: center;

    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 2fr 50px 50px 20px 20px 40px 50px 2fr;
    grid-row-gap: 8px;

}

div#body div{
    display: grid;
    justify-content: center;
    align-items: center;
    max-width: 1800px;
}

div#body input.b_input{
    background-color: #fff;
    border-radius: 20px;
    font-size: 24px;

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;

    max-width: 1800px;

    background-position: right;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position-x: 98%;

    padding: 4px;
    padding-left: 16px;
    padding-right: 50px;
}
div#body input.b_input:focus{background-color: rgba(0, 0, 0, 0.2);}
div#body input.b_input:hover{background-color: rgba(255, 183, 0, 0.44);}

div#body div#b_click_iye{
    display: block;
    position: relative;
    margin-left: -46px;
    margin-top: 5px;
    background-color: rgba(42, 255, 51, 0);
    width: 40px;
    height: 40px;
    border-radius: 40px;

    cursor: pointer;
}

div#body input#b_login{
    background-image: url(../../img/ico/user-black.png);
}

div#body input#b_pass{
    background-image: url(../../img/ico/iye-none-black.png);
}

div#body div.b_info{
    display: grid;
    height: 20px;
    justify-content: center;
    color: rgba(0, 0, 0, 0.71);

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
}
div#body div#b_info_login{align-items: end; margin-bottom: -8px;}
div#body div#b_info_pass{align-items: start; margin-top: -8px;}

div#body div#b_butt{
    display: grid;
    justify-content: center;
    align-items: center;

    grid-template-columns: 5fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    margin-left: -15.5%;

    height: 40px;
}

div#body div#b_butt div{
    display: grid;
    cursor: pointer;

    background-color: #224ea5;
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 8px;
    height: 100%;
    width: 80%;

    transition-property: all;
    transition-duration: 0.14s;
    transition-timing-function: linear;
}

div#body div#b_butt div#b_but_submit{ justify-self: end; cursor: not-allowed; opacity: 0.2; border-radius: 20px 0 0 20px; }
div#body div#b_butt div#b_but_clear{ justify-self: start; border-radius: 0 20px 20px 0; }

div#body div#b_butt div#b_but_submit:hover{ background-color: #FFB700; color: #000000; }
div#body div#b_butt div#b_but_clear:hover{ background-color: #ff136c; color: #000000; }

div#body div#b_oter_metods{
    display: grid;
    justify-content: center;
    align-items: center;
    text-align: center;

    margin-top: 20px;

    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: 100px;
    grid-column-gap: 16px;
}

div#body div#b_oter_metods div.b_booble_login{

    display: block;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background-color: #ffffff;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 80px;

    transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: linear;

    border:  2px solid rgba(34, 78, 165, 0.2);

    cursor: pointer;
}
div#body div#b_oter_metods div.b_booble_login:hover{border:  2px solid rgba(34, 78, 165, 1);  width: 90px; height: 90px;}