@import "font-awesome.min.css";

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


:root {
    --body_background: #eee;
    --body_color: #000;
    --background_column: #5767F2; 
    --background_main: #eee;
    --table_color_head: rgb(255 255 255 /.9);
    --table_background_tbody_even: #fff;
    --table_background_tr_hover: #e4e4e4;
    --table_color_gray: #888;
    --gray_color: #666;
    --gray_border: #ccc;
    --gray_border2: #ccc;
    --gray_border3: #999;
    --select_background: #fff;
    --select_color: #000;
    --label_color: #555;
    --footer_color_ver: #fff;
    --footer_background_ver: #aaa;
    --footer_color: #999;
    --footer_color_link: #888;
    --menu_active_element_bg: #4F2EE0;
    --menu_active_element_color: #fff;
    --menu_element_hover: darkblue;
    --menu_color_separator: #eee;
    --menu_color: white;
    --button_add_background: #7701FF;
    --button_add_shadow: rgb(119 1 255 /.4);
    --button_add_color: #fff;
    --button_report_background: #04a95c;
    --button_report_shadow: rgb(4 169 92 /.4);
    --button_report_color: #fff;
    --button_agree_background: #7d2ae8;
    --button_agree_shadow: rgb(125 42 232 /.4);
    --button_agree_color: #fff;
    --button_disagree_background: #ca3131;
    --button_disagree_shadow: rgb(125 42 232 /.4);
    --button_disagree_color: #fff;
    --button_cancel_background: #ca3131;
    --button_cancel_color: #ca3131;
    --button_add_border_color: #ccc;
    --color_check_theme: #999;
    --color_red_link: #ff0000;
    --color_green_link: #5e7e1e;
    --modal_color_close: #111;
    --modal_color_close_error: #000;
    --modal_background_color: rgb(255 255 255 /.9);
    --modal_select_background_color: #fff;
    --modal_header_error: #ff0000;
    --modal_background_error: rgb(255 0 0 /.2);
    --modal_label_color: #222;
    --sheet_h3_title: #111;
    --grade_background: rgb(217 243 150 /1);
    --grade_background_2: rgb(255 255 255 /.55);
    --grade_background_3: rgb(255 255 255 /.7);
    --grade_background_4: rgb(217 243 0 /.8);
    --grade_border: rgb(177, 231, 38);
    --grade_color_desc: #222;
    --grade_block_background: #fff;
    --checkbox_toggle_background: #9A9999;
    --checkbox_toggle_background2: #947ADA;
    --checkbox_toggle_background3: #4F2EDC;
    --checkbox_toggle_span_background: #fff;
    --checkbox_toggle_span_background2: rgb(79 46 220 /.5);
    --checkbox_toggle_shaddow_color: rgb(154 153 153 /.5);
    --checkbox_toggle_shaddow_color2: rgb(79 46 220 /.2);
    --mail_color_link: #999;
    --status_color_1: #bb0000;
    --status_color_2: #1a26cf;
    --status_color_3: yellowgreen;
    --status_color_4: yellowgreen;
    --status_color_5: yellowgreen;
    --status_color_6: yellowgreen;
    --status_color_7: #547a08;
    --table_rating_bg_0: rgb(128 128 128 /.5);
    --table_rating_bg_0_1: rgb(128 128 128 /.6);
    --table_rating_bg_1: rgb(255 0 0 /.5);
    --table_rating_bg_1_1: rgb(255 0 0 /.55);
    --table_rating_bg_2: rgb(255 255 0 /.4);
    --table_rating_bg_2_1: rgb(255 255 0 /.7);
    --table_rating_bg_3: transparent;
    --table_rating_bg_3_1: transparent;
    --table_rating_bg_4: rgb(0 128 0 /.5);
    --table_rating_bg_4_1: rgb(0 128 0 /.55);
    --color_button_to_top: #fff;
    --background_button_to_top: #4F2EDC;
    --border_button_to_top: #fff;
    --color_button_to_top_hover: #111;
    --background_button_to_top_hover: #ccc;
    --confirmed_color_yes: #69970c;
    --confirmed_bgcolor_yes: transparent;
    --confirmed_color_not: #111;
    --confirmed_bgcolor_not: rgb(255 0 0 /.5);
}

[dark] {
        --body_background: #111;
        --body_color: #fff;
        --background_column: #191919; 
        --background_main: #111;
        --table_color_head: rgb(55 55 55 /.95);
        --table_background_tbody_even: #181818;
        --table_background_tr_hover: #212529;
        --table_color_gray: #888;
        --gray_color: #d8d8d8;
        --gray_border: #ccc;
        --gray_border2: transparent;
        --gray_border3: #333;
        --select_background: #252525;
        --select_color: #eee;
        --label_color: #ccc;
        --footer_color_ver: #fff;
        --footer_background_ver: #333;
        --footer_color: #555;
        --footer_color_link: #565656;
        --menu_active_element_bg: #4F2EDC;
        --menu_active_element_color: #fff;  
        --menu_element_hover: #333; 
        --menu_color_separator: #444;
        --menu_color: #cacaca;
        --button_add_background: #6F01EC;
        --button_add_color: #fff;
        --button_report_background: #04a95c;
        --button_report_color: #fff;
        --button_agree_background: #7d2ae8;
        --button_agree_shadow: rgb(4 169 92 /.4);
        --button_agree_color: #fff;
        --button_disagree_background: #c73e3e;
        --button_disagree_shadow: rgb(125 42 232 /.4);
        --button_disagree_color: #fff;
        --button_cancel_background: #c73e3e;
        --button_cancel_color: #ff0000;
        --button_add_border_color: #ccc;
        --color_check_theme: #eee;
        --color_red_link: #ff0000;
        --color_green_link: #9acd32;
        --modal_color_close: #fff;
        --modal_color_close_error: #fff;
        --modal_background_color: #111;
        --modal_select_background_color: #252525;
        --modal_header_error: #ff0000;
        --modal_background_error: rgb(255 0 0 /.2);
        --modal_label_color: #ccc;
        --sheet_h3_title: #b6b6b6;
        --grade_background: rgb(226 240 217 /.4);
        --grade_background_2: rgb(226 240 217 /.2);
        --grade_background_3: rgb(226 240 217 /.25);
        --grade_background_4: rgb(226 240 217 /.5);
        --grade_color_desc: #dbdbdb;
        --grade_block_background: #151515;
        --checkbox_toggle_background: #9A9999;
        --checkbox_toggle_background2: #947ADA;
        --checkbox_toggle_background3: #4F2EDC;
        --checkbox_toggle_span_background: #fff;
        --checkbox_toggle_span_background2: rgb(79 46 220 /.5);
        --checkbox_toggle_shaddow_color: rgb(154 153 153 /.5);
        --checkbox_toggle_shaddow_color2: rgb(79 46 220 /.2);
        --mail_color_link: #999;
        --status_color_1: #ff0000;
        --status_color_2: #979efc;
        --status_color_3: yellowgreen;
        --status_color_4: yellowgreen;
        --status_color_5: yellowgreen;
        --status_color_6: yellowgreen;
        --status_color_7: yellowgreen;
        --table_rating_bg_0: rgb(128 128 128 /.5);
        --table_rating_bg_0_1: rgb(128 128 128 /.7);
        --table_rating_bg_1: rgb(255 0 0 /.6);
        --table_rating_bg_1_1: rgb(255 0 0 /.75);
        --table_rating_bg_2: rgb(255 255 0 /.5);
        --table_rating_bg_2_1: rgb(255 255 0 /.55);
        --table_rating_bg_3: transparent;
        --table_rating_bg_3_1: transparent;
        --table_rating_bg_4: rgb(0 128 0 /.5);
        --table_rating_bg_4_1: rgb(0 128 0 /.75);
        --color_button_to_top: #fff;
        --background_button_to_top: #4F2EDC;
        --color_button_to_top_hover: #111;
        --background_button_to_top_hover: #ccc;
        --confirmed_color_yes: #9acd32;
        --confirmed_bgcolor_yes: transparent;
        --confirmed_color_not: #fff;
        --confirmed_bgcolor_not: rgb(255 0 0 /.5);
        
}

body { background: var(--body_background); color: var(--body_color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px;  }

.page_grid { display: grid; grid-template-columns: 340px auto }
.page_grid .column_menu {  z-index: 500;  }
.page_grid .column_menu .menu_block { box-shadow: 0 10px 10px 1px rgba(0 0 0 /.15); position: sticky; background: var(--background_column); color: white; margin: 20px 20px 20px 40px; top: 20px; display: flex; justify-content: space-between; flex-direction: column; height: calc(100vh - 40px); padding: 10px 0; border-radius: 10px; }
.page_grid .column_menu .menu { font-size: 16px }
.page_grid .column_menu .menu .menu_separator { height: 1px; color: var(--menu_color_separator); background: var(--menu_color_separator); border: none; margin: 15px 0 }
.page_grid .column_menu .menu .dropdown  { margin: 0; }
.page_grid .column_menu .menu li { list-style: none; margin: 5px 0; color: var(--menu_color)  }
.page_grid .column_menu .menu li .menulink { text-decoration: none; display: block;  border-radius: 10px; padding: 8px 10px 10px 10px; margin: 0 20px; color: var(--menu_active_element_bg_one)  }
.page_grid .column_menu .menu li .menulink:hover { background: var(--menu_element_hover); cursor: pointer; }
.page_grid .column_menu .menu li .active { text-decoration: none; display: block; background: var(--menu_active_element_bg); cursor: default; }
.page_grid .column_menu .menu li .active:hover { background: var(--menu_active_element_bg); cursor: default; }
.page_grid .column_menu .menu li .menutext { text-decoration: none; display: block;  border-radius: 10px; padding: 8px 15px 10px 15px; margin: 0 20px; color: var(--menu_active_element_bg_one)  }
.page_grid .column_menu .footer_left { margin: 0 20px }
.page_grid .column_menu .footer_left .login { font-weight: 400; }
.page_grid .column_menu .footer_left .login .role { display: block; font-size: 10px; color: var(--footer_color) }
.page_grid .column_menu .checkbox_wrapper_theme { display: flex; gap: 10px; margin: 0 20px 20px 20px; align-items: flex-start; }
.page_grid .column_menu .checkbox_wrapper_theme .switch_title { color: var(--color_check_theme); padding: 4px 0 0 0; display: block; cursor: pointer; }
.page_grid .column_menu .checkbox_wrapper_theme input[type="checkbox"] { visibility: hidden; display: none }
.page_grid .column_menu .checkbox_wrapper_theme *, .checkbox_wrapper_theme ::after, .checkbox_wrapper_theme ::before { box-sizing: border-box }
.page_grid .column_menu .checkbox_wrapper_theme .switch { --width-of-switch: 3.5em; --height-of-switch: 2em; --size-of-icon: 1.4em; --slider-offset: 0.3em; position: relative; width: var(--width-of-switch); height: var(--height-of-switch); display: inline-block }
.page_grid .column_menu .checkbox_wrapper_theme .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f4f4f5; transition: .4s; border-radius: 30px }
.page_grid .column_menu .checkbox_wrapper_theme .slider:before { position: absolute; content: ""; height: var(--size-of-icon,1.4em); width: var(--size-of-icon,1.4em); border-radius: 20px; left: var(--slider-offset,0.3em); top: 50%; transform: translateY(-50%); background: linear-gradient(40deg,#ff0080,#ff8c00 70%); transition: .4s }
.page_grid .column_menu .checkbox_wrapper_theme input:checked + .slider { background: #303136 }
.page_grid .column_menu .checkbox_wrapper_theme input:checked + .slider:before { left: calc(100% - (var(--size-of-icon,1.4em) + var(--slider-offset,0.3em))); background: #303136; box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb }
.page_grid .column_menu .link_flex { display: flex; align-items: center; justify-content: flex-start; gap: 12px }
.page_grid .column_menu .link_flex .iconka { width: 20px; font-size: 18px; padding: 1px 0 0 0; text-align: center; }
.page_grid .column_menu .div_role { position: relative; margin: 2px 0 0 0 }
.page_grid .column_menu .select_role { border: 1px var(--gray_border) solid; padding: 2px 4px; border-radius: 4px; color: var(--select_color); background: var(--select_background); cursor: pointer; font-size: 10px }
.page_grid .column_main { background: var(--background_main); padding: 20px 40px 40px 20px; min-height: calc(100vh - 60px); min-width: 200px; }
.page_grid .column_main .page_width_100vh { display: flex; min-height: calc(100vh - 60px);; flex-direction: column; justify-content: space-between; gap: 20px }
.page_grid .column_main .header_title { display: flex; justify-content: space-between; align-items: center; margin: 0px; }
.page_grid .column_main .header_title h1 { margin: 0; }
.page_grid .column_main .ratings_grid { display: grid; grid-template-columns: auto 380px; gap: 10px; margin-top: 20px; }
.page_grid .column_main .ratings_grid .video_grid { display: grid; grid-template-columns: 40px auto 40px; gap: 1px 1px; }
.page_grid .column_main .ratings_grid .video_grid .pager { width: 40px; background-color: rgba(192 192 192); color: white; text-align: center; display: flex; }
.page_grid .column_main .ratings_grid .video_grid .pager .arrow { width: 38px; height:38px; margin: auto; }
.page_grid .column_main .ratings_grid .video_grid .pager:hover { background-color: rgba(80 80 80); cursor: pointer; }
.page_grid .column_main .ratings_grid .video_grid .video { padding: 0px; }
.page_grid .column_main .ratings_grid .ratings { padding: 0px 0px 0px 40px; }
.page_grid .column_main .ratings_grid .ratings .filters_block { display: grid; grid-template-columns: auto 40px; gap: 10px; padding: 10px 5px 20px 5px; background: var(--background_main); } 
.page_grid .column_main .ratings_grid .ratings .filters_block .title { color: var(--label_color); white-space: nowrap; display: block; margin: -1px 0 0 0; cursor: pointer }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my input[type="checkbox"] { visibility: hidden; display: none }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my .toggle { position: relative; display: block; width: 40px; height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0) }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my .toggle:before { content: ""; position: relative; top: 3px; left: 3px; width: 34px; height: 14px; display: block; background: #9A9999; border-radius: 8px; transition: background 0.2s ease }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my .toggle span { position: absolute; top: 0; left: 0; width: 20px; height: 20px; display: block; background: white; border-radius: 10px; box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5); transition: all 0.2s ease }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my .toggle span:before { content: ""; position: absolute; display: block; margin: -18px; width: 56px; height: 56px; background: rgba(79, 46, 220, 0.5); border-radius: 50%; transform: scale(0); opacity: 1; pointer-events: none }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my :checked + .toggle:before { background: #947ADA }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my :checked + .toggle span { background: #4F2EDC; transform: translateX(20px); transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease; box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2) }
.page_grid .column_main .ratings_grid .ratings .filters_block .checkbox_my :checked + .toggle span:before { transform: scale(1); opacity: 0; transition: all 0.4s ease }

.radio { position: absolute; z-index: -1; opacity: 0;}
.radio+label { display: inline-flex; align-items: center; user-select: none; margin-bottom: 10px; cursor: pointer; }
.radio+label::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px dashed lightgray; border-radius: 0.25em; margin-right: 0.5em; cursor: pointer; }
.radio:checked+label::before { content: '✔'; height: 1.2em; font-weight: bolder; font-size: 1em; }
.radio:checked+label { color: #5767F2; font-weight: bolder; }
.radio:disabled+label::before { cursor: default; border: 1px none white;}
.radio:disabled+label { cursor: default; }

.arrows { width: 34px; height:34px; border: solid white; border-width: 0 5px 5px 0; display: inline-block; padding: 3px; margin: 0px; }
.arrow-right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-left: -20px; }
.arrow-left { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-left: 12px; }

/*buttons*/
.buttons_zone {text-align: right; }
.button { background: transparent; padding: 11px 22px; border-radius: 10px; cursor: pointer; font-size: 14px; margin: 0 10px 0 0; transition: all .2s ease } 
.button:last-child { margin: 0 } 
.button:active { transform: scale(0.98); box-shadow: none; }
.button:disabled { opacity: 0.3; cursor: default; }
.button_add { background: var(--button_add_background); color: var(--button_add_color); border: 0; box-shadow: 0 2px 5px var(--button_add_shadow); } 
.button_post { background: var(--button_add_background); color: var(--button_add_color); border: 0; box-shadow: 0 2px 5px var(--button_add_shadow); } 
.button_report { background: var(--button_report_background); color: var(--button_report_color); border: 0; box-shadow: 0 2px 5px var(--button_report_shadow); } 
.button_agree { background: var(--button_agree_background); color: var(--button_agree_color); border: 0; } 
.button_save { background: #5767F2; color: var(--button_agree_color); border: 0; } 
.button_disagree { background: var(--button_disagree_background); color: var(--button_disagree_color); border: 0; } 
.button_cancel { /*background: var(--button_cancel_background);  */ color: var(--button_cancel_color); border: 0; padding: 10px 10px !important } 
/*buttons end*/

.table { width: 100%; border-spacing: 1px; border-collapse: collapse; }
.table thead { position: sticky; _backdrop-filter: blur(3px); z-index: 10;}
.table thead th { font-weight: 500; font-size: 15px; text-align: center; padding: 10px 15px; _background: var(--table_color_head); border: 1px solid black; }
.table thead tr th:first-child { border-radius: 10px 0 0 0px; border: 1px solid black;}
.table thead tr th:last-child {	border-radius: 0 8px 8px 0 }
.table tbody td { padding: 10px; line-height: 150%; border: 1px solid black; }
.table tbody tr:nth-child(even) { background: var(--table_background_tbody_even) }
.table tbody tr:hover, tr:nth-child(even):hover { background: var(--table_background_tr_hover) }
.table tbody tr td:first-child { border-radius: 8px 0 0 8px }
.table tbody tr td:last-child {	border-radius: 0 8px 8px 0 }
.table .center { text-align: center; }

.mt20 { margin-top: 20px; }

.textarea { width: 100%; min-width: 100px; resize: vertical; border-color: #5767F2; padding: 5px; height: 80px; border-radius: 8px; font-family: Arial, Helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; }
.textarea:hover { border: 2px solid #5767F2; }
.textarea:focus { outline: 1px solid #5767F2; }

/*dropdown*/
.dropdown { position: relative; cursor: pointer;  pointer-events: painted; }
.dropdown-content { display: none; position: absolute; top: 35px; right: -25px; _background: var(--select_background); min-width: 250px; border: 1px solid #5767F2; z-index: 15; text-align: center; }
.dropdown-content a { color: var(--select_color); padding: 10px 13px; text-decoration: none; display: block; font-size: 14px; border-radius: 8px; }
.dropdown-content a:hover { background: #5767F2; color: white; }
.dropdown-content .redlink { color: var(--color_red_link) }
.dropdown-content .greenlink { color: var(--color_green_link) }
.dropdown:hover .dropdown-content { display: block; border-radius: 8px; margin: -2px 0 0 0 }
/*dropdown end*/

.login-form { display: block; text-align: center; position: absolute; border: 1px dotted #5767F2; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, -55%); margin-left: auto; margin-right: auto; padding: 20px; font-size: 14pt; }
.login-form .grid { display: grid; grid-template-columns: auto auto; gap: 15px 10px; }
.login-form .grid .parameter { text-align: right; margin-top: 3px; }
.login-form .grid .value { text-align: left; }
.login-form .welcome { text-align: justify; width: 600px; }
.login-form .error { color: red; font-weight: bolder; min-width: 500px; }
.login-form input { font-size: 14pt; padding: 5px; border: 1px solid #5767F2; border-radius: 5px;}
.login-form input:hover { border: 1px solid blue; }
.login-form input:focus { outline: 1px solid #5767F2; }
.login-form button { font-size: 14pt; }

@media (max-width: 1790px) {
    .page_grid .column_main .ratings_grid .ratings .filters_block .flex_me { flex-direction: column; gap: 3px; margin: 0 }
    .page_grid .column_main .ratings_grid .ratings .filters_block .flex_users { flex-direction: column; gap: 3px; margin: 0 }
    .table .thead_top_68 { top: 88px }
    .table .thead_top_68_users { top: 88px }
    .page_grid .column_main .ratings_grid .ratings .filters_block .search_input { min-width: 250px } 
}

@keyframes progress {
  100% {
      right: 100%;
    }
  }

.d-none { display: none; }