@property --hue {
    syntax : '<angle>';
    inherits : false;
    initial-value : 20deg;
}
@property --size_x {
    syntax : '<length-percentage>';
    inherits : false;
    initial-value : 250px;
}
@property --size_y {
    syntax : '<length-percentage>';
    inherits : false;
    initial-value : 250px;
}
@property --move_x {
    syntax : '<length-percentage>';
    inherits : false;
    initial-value : 50px;
}
@property --move_y {
    syntax : '<length-percentage>';
    inherits : false;
    initial-value : 50px;
}
@keyframes back-color-rotation {
0% {
    --hue : 30deg;
}
100% {
    --hue : 329deg;
}
}
@keyframes size_x {
0% {
    --size_x : 723px;
}
5% {
    --size_x : 519px;
}
10% {
    --size_x : 200px;
}
15% {
    --size_x : 200px;
}
20% {
    --size_x : 546px;
}
25% {
    --size_x : 200px;
}
30% {
    --size_x : 673px;
}
35% {
    --size_x : 200px;
}
40% {
    --size_x : 557px;
}
45% {
    --size_x : 200px;
}
50% {
    --size_x : 200px;
}
55% {
    --size_x : 368px;
}
60% {
    --size_x : 256px;
}
65% {
    --size_x : 848px;
}
70% {
    --size_x : 200px;
}
75% {
    --size_x : 635px;
}
80% {
    --size_x : 424px;
}
85% {
    --size_x : 281px;
}
90% {
    --size_x : 859px;
}
95% {
    --size_x : 973px;
}
100% {
    --size_x : 924px;
}
}
@keyframes size_y {
0% {
    --size_y : 723px;
}
5% {
    --size_y : 519px;
}
10% {
    --size_y : 200px;
}
15% {
    --size_y : 200px;
}
20% {
    --size_y : 546px;
}
25% {
    --size_y : 200px;
}
30% {
    --size_y : 673px;
}
35% {
    --size_y : 200px;
}
40% {
    --size_y : 557px;
}
45% {
    --size_y : 200px;
}
50% {
    --size_y : 200px;
}
55% {
    --size_y : 368px;
}
60% {
    --size_y : 256px;
}
65% {
    --size_y : 848px;
}
70% {
    --size_y : 200px;
}
75% {
    --size_y : 635px;
}
80% {
    --size_y : 424px;
}
85% {
    --size_y : 281px;
}
90% {
    --size_y : 859px;
}
95% {
    --size_y : 973px;
}
100% {
    --size_y : 924px;
}
}
@keyframes move_x {
0% {
    --move_x : calc(50% + 300px * cos(0deg));
}
5% {
    --move_x : calc(50% + 300px * cos(18deg));
}
10% {
    --move_x : calc(50% + 300px * cos(36deg));
}
15% {
    --move_x : calc(50% + 300px * cos(54deg));
}
20% {
    --move_x : calc(50% + 300px * cos(72deg));
}
25% {
    --move_x : calc(50% + 300px * cos(90deg));
}
30% {
    --move_x : calc(50% + 300px * cos(108deg));
}
35% {
    --move_x : calc(50% + 300px * cos(126deg));
}
40% {
    --move_x : calc(50% + 300px * cos(144deg));
}
45% {
    --move_x : calc(50% + 300px * cos(162deg));
}
50% {
    --move_x : calc(50% + 300px * cos(180deg));
}
55% {
    --move_x : calc(50% + 300px * cos(198deg));
}
60% {
    --move_x : calc(50% + 300px * cos(216deg));
}
65% {
    --move_x : calc(50% + 300px * cos(234deg));
}
70% {
    --move_x : calc(50% + 300px * cos(252deg));
}
75% {
    --move_x : calc(50% + 300px * cos(270deg));
}
80% {
    --move_x : calc(50% + 300px * cos(288deg));
}
85% {
    --move_x : calc(50% + 300px * cos(306deg));
}
90% {
    --move_x : calc(50% + 300px * cos(324deg));
}
95% {
    --move_x : calc(50% + 300px * cos(342deg));
}
100% {
    --move_x : calc(50% + 300px * cos(360deg));
}
}
@keyframes move_y {
0% {
    --move_y : calc(50% + 300px * sin(0deg));
}
5% {
    --move_y : calc(50% + 300px * sin(18deg));
}
10% {
    --move_y : calc(50% + 300px * sin(36deg));
}
15% {
    --move_y : calc(50% + 300px * sin(54deg));
}
20% {
    --move_y : calc(50% + 300px * sin(72deg));
}
25% {
    --move_y : calc(50% + 300px * sin(90deg));
}
30% {
    --move_y : calc(50% + 300px * sin(108deg));
}
35% {
    --move_y : calc(50% + 300px * sin(126deg));
}
40% {
    --move_y : calc(50% + 300px * sin(144deg));
}
45% {
    --move_y : calc(50% + 300px * sin(162deg));
}
50% {
    --move_y : calc(50% + 300px * sin(180deg));
}
55% {
    --move_y : calc(50% + 300px * sin(198deg));
}
60% {
    --move_y : calc(50% + 300px * sin(216deg));
}
65% {
    --move_y : calc(50% + 300px * sin(234deg));
}
70% {
    --move_y : calc(50% + 300px * sin(252deg));
}
75% {
    --move_y : calc(50% + 300px * sin(270deg));
}
80% {
    --move_y : calc(50% + 300px * sin(288deg));
}
85% {
    --move_y : calc(50% + 300px * sin(306deg));
}
90% {
    --move_y : calc(50% + 300px * sin(324deg));
}
95% {
    --move_y : calc(50% + 300px * sin(342deg));
}
100% {
    --move_y : calc(50% + 300px * sin(360deg));
}
}
@keyframes inf_rotation {
0% {
    rotate : 0deg;
}
100% {
    rotate : 360deg;
}
}
html {
    font-family : Times New Roman,Times,serif;
    font-style : normal;
    font-size : 12pt;
    color : black;
    text-align : justify;
    list-style-position : inside;
    list-style-type : decimal;
}
* {
    position : relative;
    padding : 0px 0px 0px 0px;
    margin : 0px 0px 0px 0px;
    box-sizing : border-box;
    background-color : transparent;
    background-clip : padding-box;
    scroll-behavior : smooth;
    scrollbar-color : rgba(6, 60, 92, 0.5) rgb(173,218,255);
    scrollbar-width : thin;
    transition : all 0.2s ease 0s;
}
.img {
    display : block;
    width : 100%;
    height : 100%;
    background-size : cover;
    background-position : center center;
}
.a {
    color : inherit;
    text-decoration : none;
}
.arabic {
    direction : rtl;
    text-align : right;
    font-family : Amiri-Regular;
}
.h1 {
    font-size : 26pt;
    font-weight : bolder;
    text-decoration : underline solid black;
    text-decoration-thickness : 2px;
}
.h1_1 {
    color : white;
    background-color : rgba(200, 200, 255, 0.3);
    border : none;
    border-radius : 15px;
    padding : 15px;
    text-decoration : none;
}
.h1_2 {
    color : white;
    border : none;
    padding : 15px;
    text-decoration : none;
}
.h2 {
    font-size : 22pt;
    font-weight : bold;
    text-decoration : underline solid black;
    text-decoration-thickness : 2px;
}
.h3 {
    font-size : 18pt;
    font-weight : bold;
    text-decoration : underline double black;
    text-decoration-thickness : 2px;
}
.h4 {
    font-size : 16pt;
    font-weight : bold;
    text-decoration : underline double black;
    text-decoration-thickness : 1px;
}
.h5 {
    font-size : 14pt;
    font-weight : bold;
}
.h6 {
    font-size : 12pt;
    font-weight : bold;
}
.Content {
    display : contents;
}
.eye_l {
    border-top-right-radius : 30%;
    border-bottom-left-radius : 30%;
}
.eye_r {
    border-top-left-radius : 30%;
    border-bottom-right-radius : 30%;
}
.flex {
    display : flex;
    justify-content : flex-start;
    flex-wrap : wrap;
    gap : 15px;
}
.flex_full_h {
    display : flex;
    flex-direction : row;
    justify-content : stretch;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_full_v {
    display : flex;
    flex-direction : column;
    align-items : stretch;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_col {
    display : flex;
    flex-direction : column;
    flex-wrap : nowrap;
    justify-content : space-evenly;
    gap : 15px;
}
.flex_center {
    display : flex;
    justify-content : center;
    align-items : center;
    gap : 15px;
}
.flex_center_h {
    display : flex;
    justify-content : center;
    flex-direction : row;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_center_v {
    display : flex;
    align-items : center;
    flex-direction : column;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_h {
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_rh {
    display : flex;
    flex-direction : row-reverse;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_v {
    display : flex;
    flex-direction : column;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_rv {
    display : flex;
    flex-direction : column-reverse;
    flex-wrap : nowrap;
    gap : 15px;
}
.flex_grid {
    display : flex;
    justify-content : space-between;
    flex-wrap : wrap;
    gap : 15px;
}
.wrap {
    flex-wrap : wrap;
}
.align_items_center {
    align-items : center;
}
.Grid {
    display : grid;
}
.Hide {
    display : none;
}
.stretcher {
    flex-grow : 2;
    min-height : 10px;
    min-width : 10px;
}
.ch_stretcher > * {
    flex-grow : 2;
}
.tampon {
    color : rgba(150, 250, 150, 0.5);
    font-family : Impact;
    font-size : 48pt;
    transform : rotate(-20deg) scale(0.8);
    position : absolute;
    width : 100%;
    height : 100%;
    top : 0%;
    bottom : 0%;
    right : 0%;
    left : 0%;
    border-radius : 100%;
    border : 12pt double rgba(150, 250, 150, 0.5);
}
.spacer_h {
    display : inline;
}
.container {
    padding : 5px;
    margin : 10px;
    border-radius : 15px;
    background-color : white;
    box-shadow :  0px 0px 5px 0px black;
}
.people {
    display : flex;
    flex-direction : column;
    flex-wrap : nowrap;
    justify-content : space-between;
    align-items : center;
    gap : 5mm;
    width : 40mm;
    height : 55mm;
    padding : 5px;
    margin : 10px;
    border-radius : 15px;
    background-color : white;
    box-shadow :  0px 0px 5px 0px black;
}
.people > * {
    text-transform : capitalize;
    font-size : 12pt;
    font-weight : bold;
    text-align : center;
    overflow-wrap : break-word;
}
.people > .img:first-of-type {
    width : 30mm;
    height : 30mm;
}
.id_card_img {
    position : absolute;
    width : 2cm;
    height : 2cm;
    top : 0.2cm;
    left : 0.2cm;
}
.id_card {
    width : 8.5cm;
    height : 5.5cm;
    padding : 0.2cm;
    margin : auto;
    border-radius : 0.5cm;
    border : 2px solid brown;
    background-color : cadetblue;
    box-shadow :  0px 0px 5px 0px crimson;
}
.id_card > * {
    text-transform : capitalize;
    font-size : 0.4cm;
    font-weight : bold;
    text-align : left;
}
.id_image {
    width : 2.5cm;
    height : 3cm;
}
.big_id_image {
    width : 5cm;
    height : 6cm;
}
.profile, .id_image, .big_id_image {
    border-radius : 15px;
    margin : auto;
}
.progress_bar {
    position : absolute;
    top : 0px;
    left : 0px;
    bottom : 0px;
    background-color : deepskyblue;
}
.progress_body {
    position : relative;
    top : 0px;
    left : 0px;
    padding : 5px;
    text-align : center;
    width : 100%;
    height : 100%;
}
.progress {
    display : flex;
    position : relative;
    overflow : hidden;
    justify-content : center;
    align-items : center;
    background-color : lightblue;
    border-radius : 25px;
    box-shadow : inset 0px 0px 5px 0px deepskyblue;
    vertical-align : middle;
}
.back_img {
    position : fixed;
    top : 50%;
    left : 50%;
    transform : translateX(-50%) translateY(-50%);
    min-height : 100%;
    min-width : 100%;
    object-fit : cover;
    z-index : -1000;
}
.back_local {
    position : absolute;
    top : 0px;
    right : 0px;
    object-fit : cover;
    object-position : 50% 50%;
    opacity : 0.1;
    pointer-events : none;
}
.inline_block {
    display : inline-block;
}
.line_h {
    width : 100%;
    padding : 0px;
}
.text_center_span {
    text-align : center;
}
.text_center_div {
    text-align : center;
}
.format_money {
    text-align : right;
}
.flex_h_1cm_gap {
    gap : 1cm;
}
.radius_left {
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;
}
.radius_right {
    border-top-right-radius : 10px;
    border-bottom-right-radius : 10px;
    border-bottom-left-radius : 10px;
}
.radius_top {
    border-top-left-radius : 10px;
    border-top-right-radius : 10px;
}
.radius_bottom {
    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
}
.number_div {
    text-align : right;
    float : right;
}
.date_div {
    text-align : center;
}
.txt_r {
    text-align : right;
}
.txt_l {
    text-align : left;
}
.rtl {
    direction : rtl;
}
.ltr {
    direction : ltr;
}
.vertical_text {
    writing-mode : sideways-lr;
}
.vertical_text_rv {
    writing-mode : sideways-rl;
}
.color_div {
    flex-wrap : wrap;
    border-radius : 5px;
    padding : 10px;
}
.file_background {
    background-size : cover;
    background-position : center center;
    background-blend-mode : overlay;
}
.text_bold {
    font-weight : bold;
}
.fs_9 {
    font-size : 9pt;
}
.fs_10 {
    font-size : 10pt;
}
.fs_11 {
    font-size : 11pt;
}
.fs_12 {
    font-size : 12pt;
}
.fs_14 {
    font-size : 14pt;
}
.fs_16 {
    font-size : 16pt;
}
.fs_18 {
    font-size : 18pt;
}
.fs_20 {
    font-size : 20pt;
}
.fs_22 {
    font-size : 22pt;
}
.fs_24 {
    font-size : 24pt;
}
.fs_26 {
    font-size : 26pt;
}
.fs_28 {
    font-size : 28pt;
}
.fs_30 {
    font-size : 30pt;
}
.fs_32 {
    font-size : 32pt;
}
.fs_34 {
    font-size : 34pt;
}
.fs_36 {
    font-size : 36pt;
}
.fs_38 {
    font-size : 38pt;
}
.fs_40 {
    font-size : 40pt;
}
.fs_42 {
    font-size : 42pt;
}
.fs_48 {
    font-size : 48pt;
}
.fs_52 {
    font-size : 52pt;
}
.fs_60 {
    font-size : 60pt;
}
.fs_72 {
    font-size : 72pt;
}
.display_block {
    display : block;
}
.width_height_full {
    width : 100%;
    height : 100%;
}
.ch_wh_full > * {
    width : 100%;
    height : 100%;
}
.height_full {
    height : 100%;
}
.width_full {
    width : 100%;
}
.radius_5 {
    border-radius : 5px;
}
.radius_10 {
    border-radius : 10px;
}
.radius_15 {
    border-radius : 15px;
}
.radius_20 {
    border-radius : 20px;
}
.radius_25 {
    border-radius : 25px;
}
.space_between {
    justify-content : space-between;
}
.space_around {
    justify-content : space-around;
}
.space_evenly {
    justify-content : space-evenly;
}
.flex_end {
    justify-content : flex-end;
}
.flex_start {
    justify-content : flex-start;
}
.justify_center {
    justify-content : center;
}
.content_center {
    align-content : center;
}
.gap_0 {
    gap : 0px;
}
.gap_5 {
    gap : 5px;
}
.gap_10 {
    gap : 10px;
}
.gap_15 {
    gap : 15px;
}
.gap_20 {
    gap : 20px;
}
.gap_25 {
    gap : 25px;
}
.text_center {
    text-align : center;
}
.text_right {
    text-align : right;
}
.unset_height {
    height : unset;
}
.unset_width {
    width : unset;
}
.no_back {
    background : none;
}
.padding_10 {
    padding : 10px;
}
.padding_20 {
    padding : 20px;
}
.no_padding {
    padding : 0px;
}
.margin_TB_auto {
    margin-top : auto;
    margin-bottom : auto;
}
.margin_LR_auto {
    margin-left : auto;
    margin-right : auto;
}
.margin_auto {
    margin : auto;
}
.no_margin {
    margin : 0px;
}
*::-webkit-scrollbar {
    width : 5px;
    height : 5px;
}
*::-webkit-scrollbar-thumb {
    border-radius : 25px;
    background-color : rgba(6, 60, 92, 0.5);
}
*::-webkit-scrollbar-track {
    border-radius : 25px;
    background-color : rgb(173,218,255);
    border : 1px solid black;
}
[onclick], [href] {
    cursor : pointer;
}
*:focus, *:focus-visible {
    outline-color : indianred;
    outline-style : ridge;
    outline-width : 5px;
    outline-offset : 2px;
    z-index : 99999 !important;
}
.button {
    text-align : center;
}
.input, .textarea, .select, .button, input, textarea, select, button, .button_sets > * {
    font-family : inherit;
    font-size : inherit;
    background-color : burlywood;
    vertical-align : middle;
    border : 1px solid chocolate;
    border-radius : 50px;
    box-shadow :  0px 0px 3px 0px chocolate;
    text-decoration : none;
    padding : 5px 25px;
}
.input:active, .textarea:active, .select:active, .button:active, input:active, textarea:active, select:active, button:active, .button_sets > *:active {
    background-color : tomato;
    border-color : chocolate;
}
.input:hover, .textarea:hover, .select:hover, .button:hover, input:hover, textarea:hover, select:hover, button:hover, .button_sets > *:hover {
    background-color : chocolate;
    cursor : pointer;
    border : 1px solid tomato;
    box-shadow :  0px 0px 50px 0px gold;
}
.hover:hover {
    box-shadow :  0px 0px 20px 0px rgb(255,208,0), inset 0px 0px 20px 0px white, inset 0px 0px 5px 0px rgb(255,208,0);
    scale : 1.1;
    z-index : 100;
}
.hover_back:hover {
    background-color : rgb(255,208,0);
}
.hover_tr:hover .td {
    box-shadow : inset 0px 0px 20px 5px goldenrod;
}
.error_history_button {
    background-color : rgb(200,100,50);
    border-radius : 100%;
    position : fixed;
    width : 20px;
    height : 20px;
    bottom : 0px;
    right : 0px;
    z-index : 11000;
}
.error_panel {
    position : fixed;
    width : 10cm;
    bottom : 0cm;
    right : 0cm;
    max-height : 100%;
    padding : 20px;
    overflow-y : scroll;
    z-index : 11000;
}
.selected {
    background-color : rgba(250, 150, 100, 0.8) !important;
}
.selected_c > * {
    background-color : rgba(250, 150, 100, 0.8) !important;
}
.scrollable {
    overflow : auto;
}
.scrollable_x {
    overflow-x : auto;
}
.scrollable_y {
    overflow-y : auto;
}
.close_button {
    position : absolute;
    width : 25px;
    height : 25px;
    top : 5px;
    right : 5px;
    border-radius : 25px;
    cursor : pointer;
    background-color : salmon;
    background-image : url(/static/images/icon/close_1.svg);
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center center;
}
.selected_2 {
    outline-width : 5px;
    outline-style : solid;
    outline-color : seagreen;
    background-color : seagreen;
    box-shadow :  0px 0px 10px 0px brown, inset 0px 0px 10px 0px gold;
}
.card_title {
    padding : 7px 35px 7px 35px;
    width : 100%;
    min-height : 40px;
    font-size : 14pt;
    font-weight : bold;
    background-color : seagreen;
    color : white;
    z-index : 1;
    box-shadow :  0px 2px 5px 0px black;
    gap : 10px;
}
.card_body {
    padding : 10px;
    min-height : 1cm;
    gap : 10px;
}
.card_body > * {
    padding : 5px;
    margin-bottom : 2px;
    margin-top : 2px;
}
.card_foot {
    bottom : 0;
    min-height : 30px;
    padding : 15px;
    gap : 10px;
}
.white_card {
    gap : 5mm;
    background-color : white;
    border-radius : 5mm;
    padding : 5mm;
    box-shadow :  0mm 0mm 3mm 2mm black;
}
.green_card {
    gap : 5mm;
    background-color : seagreen;
    border-radius : 5mm;
    padding : 5mm;
    box-shadow :  0mm 0mm 3mm 2mm black;
}
.red_card {
    background-color : salmon;
    padding : 5mm;
    box-shadow :  -2mm 2mm 0mm 1mm darkred;
    border-radius : 5mm 5mm 5mm 0mm;
    margin : 3mm;
}
.red_card > *:first-child {
    font-size : 18pt;
    font-weight : bold;
    color : darkred;
    text-decoration : underline solid darkred;
    margin-bottom : 3mm;
}
.error, .error_notif {
    background-color : rgb(226,124,117);
}
.card, .notif, .error_notif {
    overflow : hidden;
    min-width : 150px;
    background-color : bisque;
    border : 2px solid lightseagreen;
    border-radius : 30px;
    box-shadow :  0px 0px 15px 1px forestgreen;
}
.card > *, .notif > *, .error_notif > * {
    margin : 0px 0px 0px 0px;
}
.notif, .error_notif {
    gap : 10px;
    opacity : 0.8;
}
.error_notif > .card_body, .error_notif > .card_foot {
    background-color : salmon;
}
.alert_categ {
    background-color : orangered;
    color : white;
    font-size : 16pt;
    font-weight : bold;
    padding : 2mm;
    border-radius : 3mm;
}
.alert_title {
    background-color : crimson;
    color : white;
    font-size : 22pt;
    font-weight : bold;
    padding : 5mm;
    border-radius : 3mm;
}
.alert_div {
    background-color : rgba(255, 255, 255, 0.5);
    border-radius : 3mm;
    padding : 5mm;
}
.alert_div > * {
    padding : 5mm;
    border-radius : 3mm;
}
.normal_tab {
    display : inline-block;
    height : 100%;
    color : black;
    margin : 3px;
    padding : 7px;
    border-radius : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : tan;
    text-transform : capitalize;
    font-weight : bold;
    background-color : tan;
    cursor : pointer;
}
.active_tab {
    display : inline-block;
    height : 100%;
    color : black;
    margin : 3px;
    padding : 7px;
    border-radius : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : tan;
    text-transform : capitalize;
    font-weight : bold;
    background-color : lightyellow;
    cursor : pointer;
    border-bottom : none;
    box-shadow :  0px 0px 6px 0px orange;
}
.tab_head {
    text-align : left;
    padding : 20px;
    margin : 20px;
    margin-bottom : 0;
    background-color : sienna;
    border-radius : 20px;
    border-bottom-left-radius : 0px;
    border-bottom-right-radius : 0px;
}
.tab_body {
    margin-top : -20px;
    padding : 15px;
    border-radius : 15px;
    border : 3px solid sienna;
    border-top : 7px solid sienna;
    background-color : tan;
}
.tab_body > * {
    width : 100%;
    height : 100%;
}
.image_button {
    padding : 5px;
}
.round_button {
    padding : 0px;
    border-radius : 9999px;
    aspect-ratio : 1/1;
    min-height : 20px;
    min-width : 20px;
    max-width : 100%;
    max-height : 100%;
}
.button_sets {
    display : flex;
    flex-wrap : nowrap;
    justify-content : flex-start;
    overflow : hidden;
    border-radius : 25px;
}
.button_sets > * {
    display : flex;
    align-items : center;
    justify-content : center;
    text-align : center;
    padding : 10px;
    border-radius : 0px 0px 0px 0px;
}
.button_set {
    flex-direction : row;
}
.button_set > *:first-child {
    border-radius : 25px 0px 0px 25px;
}
.button_set > *:last-child {
    border-radius : 0px 25px 25px 0px;
}
.button_set_v {
    flex-direction : column;
}
.button_set_v > *:first-child {
    border-radius : 25px 25px 0px 0px;
}
.button_set_v > *:last-child {
    border-radius : 0px 0px 25px 25px;
}
.button_popup_menu {
    display : none;
    overflow-y : scroll;
    min-width : 300px;
    min-height : 300px;
}
.button_popover {
    overflow : visible;
}
.td {
    height : inherit;
}
.th_lab {
    text-align : center;
    vertical-align : middle;
    font-weight : bold;
    padding : 5px;
    overflow : auto;
    resize : horizontal;
}
.th_filter {
    width : 100%;
    height : 40px;
}
.th_filter > * {
    height : 100%;
}
.filters {
    display : none;
}
.table_rubon_button_set > * {
    width : 30px;
    height : 30px;
    padding : 2px;
}
.table_rubon_th {
    padding : 5px;
    border-bottom : 5px double chocolate;
    background : none;
}
.table_rubon_th > * {
    gap : 30px;
}
.table1 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
    transition : all 0s linear 0s;
}
.table1 > thead > tr {
    height : 5mm;
}
.table1 > thead > tr > th {
    padding : 5px;
    border-style : solid;
    border-color : chocolate;
    border-width : 1px;
    background-color : seagreen;
}
.table1 > thead > tr > th:first-child {
    font-weight : bold;
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;
}
.table1 > tbody > tr > td {
    padding : 5px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : bisque;
    border-left : 1px solid chocolate;
    border-bottom : 1px solid chocolate;
    word-wrap : break-word;
}
.table1 > tbody > tr:nth-child(2n+1) > td {
    background-color : antiquewhite;
}
.table1 > tbody > tr:hover > td {
    background-color : chocolate;
}
.table1 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table1 > tbody > tr > td:first-child {
    font-weight : bold;
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;
}
.table1 > tfoot > tr {
    height : 15mm;
}
.table1 > tfoot > tr > td {
    padding : 5px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : darkseagreen;
    font-weight : bold;
}
.table1 > tfoot > tr > td:first-child {
    font-weight : bold;
    border-top-left-radius : 10px;
    border-bottom-left-radius : 10px;
}
.table1 > thead > tr > th:last-child {
    border-top-right-radius : 10px;
    border-bottom-right-radius : 10px;
}
.table1 > tbody > tr > td:last-child {
    border-top-right-radius : 10px;
    border-bottom-right-radius : 10px;
}
.table1 > tfoot > tr > td:last-child {
    border-top-right-radius : 10px;
    border-bottom-right-radius : 10px;
}
.table1 .th .th_lab {
    transition : all 0s linear 0s;
}
.table1 .th {
    border-left : 1px solid chocolate;
    border-bottom : 1px solid chocolate;
}
.table1 > thead > tr > th:last-child, .table1 > tbody > tr > td:last-child {
    border-right : 1px solid chocolate;
}
.table1 .th:focus-within, .table1 .td:focus-within {
    width : 200px;
}
.table1 td > input, .table1 td > select, .table1 td > textarea, .table1 td > div {
    border-radius : 0px;
    width : 100%;
    height : 100%;
    padding : 3px;
    background : none;
    border : none;
    box-shadow : none;
}
.table1 .tr {
    border-radius : 10px;
}
tr[editing='true']>td {
    background-color : gold !important;
}
tr[editing='true']>td>* {
    width : 100%;
    height : 100%;
}
.no_rows {
    height : 10mm;
    text-align : center;
}
.tbody > .tr > .no_rows:first-child {
    background-color : orange;
}
.table2 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table2 > thead > tr {
    height : 5mm;
}
.table2 > thead > tr > th {
    padding : 3px;
    border-style : solid;
    border-color : chocolate;
    border-width : 1px;
    background-color : seagreen;
}
.table2 > tbody > tr > td {
    padding : 3px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : bisque;
}
.table2 > tbody > tr:nth-child(2n+1) > td {
    background-color : antiquewhite;
}
.table2 > tbody > tr:hover > td {
    background-color : chocolate;
}
.table2 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table2 tr {
    height : 10mm;
}
.table2 > tfoot > tr {
    height : 5mm;
}
.table2 > tfoot > tr > td {
    padding : 3px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : seagreen;
}
.table3 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table3 > thead > tr {
    height : 5mm;
}
.table3 > thead > tr > th {
    padding : 10px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    border-width : 2px;
    background-color : hsl(100, 50%, 70%);
}
.table3 > thead > tr > th:first-child {
    font-weight : bold;
    border-top-left-radius : 20px;
    border-bottom-left-radius : 20px;
}
.table3 > thead > tr > th:last-child {
    font-weight : bold;
    border-top-right-radius : 20px;
    border-bottom-right-radius : 20px;
}
.table3 > tbody > tr > td {
    padding : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    background-color : hsl(100, 70%, 90%);
}
.table3 > tbody > tr:nth-child(2n+1) > td {
    background-color : hsl(180, 70%, 80%);
}
.table3 > tbody > tr:hover > td {
    background-color : darkseagreen;
}
.table3 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table3 > tbody > tr > td:first-child {
    font-weight : bold;
    border-top-left-radius : 20px;
    border-bottom-left-radius : 20px;
}
.table3 > tbody > tr > td:last-child {
    font-weight : bold;
    border-top-right-radius : 20px;
    border-bottom-right-radius : 20px;
}
.table3 tr {
    height : 10mm;
}
.table3 > tfoot > tr {
    height : 5mm;
}
.table3 > tfoot > tr > td {
    padding : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    background-color : darkseagreen;
}
.table3 > tfoot > tr > td:first-child {
    font-weight : bold;
    border-top-left-radius : 20px;
    border-bottom-left-radius : 20px;
}
.table3 > tfoot > tr > td:last-child {
    font-weight : bold;
    border-top-right-radius : 20px;
    border-bottom-right-radius : 20px;
}
.table3 > tbody > tr > td, .table3 > thead > tr > th, .table3 > tfoot > tr > td {
    border : none;
    border-bottom : 2px solid hsl(100, 50%, 70%);
    border-right : 2px solid hsl(100, 50%, 70%);
}
.table3 > thead > tr > th:last-child, .table3 > tfoot > tr > td:last-child, .table3 > tbody > tr > td:last-child {
    border : none;
    border-bottom : 2px solid hsl(100, 50%, 70%);
}
.tb_info {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.tb_info > thead > tr {
    height : 5mm;
}
.tb_info > thead > tr > th {
    padding : 10px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    border-width : 2px;
    background-color : hsl(100, 50%, 70%);
}
.tb_info > thead > tr > th:first-child {
    font-weight : bold;
}
.tb_info > thead > tr > th:last-child {
    font-weight : bold;
}
.tb_info > tbody > tr > td {
    padding : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    background-color : hsl(100, 70%, 90%);
}
.tb_info > tbody > tr:nth-child(2n+1) > td {
    background-color : hsl(180, 70%, 80%);
}
.tb_info > tbody > tr:hover > td {
    background-color : darkseagreen;
}
.tb_info > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.tb_info > tbody > tr > td:first-child {
    font-weight : bold;
}
.tb_info > tbody > tr > td:last-child {
    font-weight : bold;
}
.tb_info tr {
    height : 10mm;
}
.tb_info > tfoot > tr {
    height : 5mm;
}
.tb_info > tfoot > tr > td {
    padding : 10px;
    border-width : 2px;
    border-style : solid;
    border-color : hsl(100, 50%, 70%);
    background-color : darkseagreen;
}
.tb_info > tfoot > tr > td:first-child {
    font-weight : bold;
}
.tb_info > tfoot > tr > td:last-child {
    font-weight : bold;
}
.tb_info .td > * {
    width : 100%;
    height : 100%;
    align-content : center;
}
.tb_info .td > label {
    display : flex;
    flex-direction : column;
    justify-content : center;
}
.tb_info > tbody > tr > td, .tb_info > thead > tr > th, .tb_info > tfoot > tr > td {
    border : none;
    border-bottom : 2px solid hsl(100, 50%, 70%);
    border-right : 2px solid hsl(100, 50%, 70%);
}
.tb_info > thead > tr > th:last-child, .tb_info > tfoot > tr > td:last-child, .tb_info > tbody > tr > td:last-child {
    border : none;
    border-bottom : 2px solid hsl(100, 50%, 70%);
}
.table4 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table4 > thead > tr {
    height : 5mm;
}
.table4 > thead > tr > th {
    padding : 10px;
    border-style : solid;
    border-color : chocolate;
    border-width : 0px;
    background-color : mediumturquoise;
}
.table4 > tbody > tr > td {
    padding : 10px;
    border-width : 0px;
    border-style : solid;
    border-color : chocolate;
    background-color : hsl(200, 90%, 60%);
}
.table4 > tbody > tr:nth-child(2n+1) > td {
    background-color : hsl(200, 90%, 70%);
}
.table4 > tbody > tr:hover > td {
    background-color : chocolate;
}
.table4 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table4 tr {
    height : 10mm;
}
.table4 > tfoot > tr {
    height : 5mm;
}
.table4 > tfoot > tr > td {
    padding : 10px;
    border-width : 0px;
    border-style : solid;
    border-color : chocolate;
    background-color : darkseagreen;
}
.table4 .td, .table4 .th {
    border-bottom : 2px solid turquoise;
    border-radius : 7px;
    font-weight : bold;
}
.table5 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table5 > thead > tr {
    height : 5mm;
}
.table5 > thead > tr > th {
    padding : 10px;
    border-style : solid;
    border-color : chocolate;
    border-width : 1px;
    background-color : seagreen;
}
.table5 > tbody > tr > td {
    padding : 10px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : bisque;
}
.table5 > tbody > tr:nth-child(2n+1) > td {
    background-color : antiquewhite;
}
.table5 > tbody > tr:hover > td {
    background-color : chocolate;
}
.table5 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table5 tr {
    height : 10mm;
}
.table5 > tfoot > tr {
    height : 5mm;
}
.table5 > tfoot > tr > td {
    padding : 10px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : darkseagreen;
}
.table5 .td, .table5 .th {
    border-radius : 7px;
    font-weight : bold;
}
.table6 {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table6 > thead > tr {
    height : 5mm;
}
.table6 > thead > tr > th {
    padding : 10px;
    border-style : solid;
    border-color : white;
    border-width : 1px;
    background-color : rgba(100, 100, 100, 0.8);
    font-weight : bold;
}
.table6 > thead > tr > th:first-child {
    font-weight : bold;
    border-top-left-radius : 20px;
}
.table6 > tbody > tr > td {
    padding : 10px;
    border-width : 1px;
    border-style : solid;
    border-color : rgba(100, 100, 100, 0.8);
    background-color : rgba(255, 255, 255, 0.7);
}
.table6 > tbody > tr:nth-child(2n+1) > td {
    background-color : rgba(255, 255, 255, 0.5);
}
.table6 > tbody > tr:hover > td {
    background-color : rgb(200,200,200);
}
.table6 > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table6 > tbody > tr > td:first-child {
    font-weight : bold;
}
.table6 tr {
    height : 10mm;
}
.table6 > tfoot > tr {
    height : 5mm;
}
.table6 > tfoot > tr > td {
    padding : 10px;
    border-width : 1px;
    border-style : solid;
    border-color : rgba(255, 255, 255, 0.7);
    background-color : rgba(100, 100, 100, 0.8);
    font-weight : bold;
}
.table6 > tfoot > tr > td:first-child {
    font-weight : bold;
    border-bottom-left-radius : 20px;
}
.table6 > thead > tr > th:last-child {
    border-top-right-radius : 20px;
}
.table6 > tfoot > tr > td:last-child {
    border-bottom-right-radius : 20px;
}
.table_lines {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table_lines > thead > tr {
    height : 5mm;
}
.table_lines > thead > tr > th {
    padding : 0px;
    border-style : solid;
    border-color : chocolate;
    border-width : 0px;
    background-color : transparent;
}
.table_lines > tbody > tr > td {
    padding : 0px;
    border-width : 0px;
    border-style : solid;
    border-color : chocolate;
    background-color : transparent;
}
.table_lines > tbody > tr:nth-child(2n+1) > td {
    background-color : transparent;
}
.table_lines > tbody > tr:hover > td {
    background-color : chocolate;
}
.table_lines > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table_lines > tfoot > tr {
    height : 5mm;
}
.table_lines > tfoot > tr > td {
    padding : 0px;
    border-width : 0px;
    border-style : solid;
    border-color : chocolate;
    background-color : transparent;
}
.table_bordered {
    border-collapse : separate;
    border-spacing : 0;
    table-layout : fixed;
}
.table_bordered > thead > tr {
    height : 5mm;
}
.table_bordered > thead > tr > th {
    padding : 5px;
    border-style : solid;
    border-color : chocolate;
    border-width : 1px;
    background-color : seagreen;
}
.table_bordered > tbody > tr > td {
    padding : 5px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : bisque;
}
.table_bordered > tbody > tr:nth-child(2n+1) > td {
    background-color : antiquewhite;
}
.table_bordered > tbody > tr:hover > td {
    background-color : chocolate;
}
.table_bordered > tbody > tr > td[onclick]:hover {
    background-color : rgba(255, 220, 50, 0.6);
}
.table_bordered > tfoot > tr {
    height : 5mm;
}
.table_bordered > tfoot > tr > td {
    padding : 5px;
    border-width : 1px;
    border-style : solid;
    border-color : chocolate;
    background-color : darkseagreen;
}
.select_menu {
    display : none;
    overflow-y : scroll;
    position : fixed;
    bottom : 5mm;
    right : 5mm;
    padding : 2mm;
}
.select_menu .tr {
    height : 15mm;
}
.display_input {
    position : absolute;
    top : 0px;
    left : 0px;
    bottom : 0px;
    right : 0px;
}
.clear_button {
    position : absolute;
    width : 30px;
    height : 30px;
    top : calc(50% - 15px);
    right : 35px;
}
.add_button {
    position : absolute;
    width : 30px;
    height : 30px;
    top : calc(50% - 15px);
    right : 0px;
}
.select_multi_display {
    width : 100%;
    height : 100%;
    gap : 3mm;
    border-radius : 5px;
    align-items : flex-start;
    align-content : flex-start;
    justify-content : flex-start;
}
.select_multi_display > * {
    border-radius : 4mm;
    padding : 2mm;
    background-color : seagreen;
    border : 2px solid lightseagreen;
}
.select_multi_menu_search_bar {
    position : sticky;
    width : 100%;
    height : 10mm;
    top : 0mm;
    right : 2mm;
    left : 2mm;
    margin-bottom : 2mm;
    z-index : 100;
}
.select_multi_menu {
    display : none;
    overflow-y : scroll;
    position : fixed;
    bottom : 5mm;
    right : 5mm;
    padding : 2mm;
}
.back_darkness {
    background-color : black;
    opacity : 0.5;
    position : fixed;
    top : 0px;
    bottom : 0px;
    right : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
}
.back_half_black {
    background-color : black;
    opacity : 0.5;
    position : fixed;
    top : 0px;
    bottom : 0px;
    right : 0px;
    left : 0px;
    z-index : -1;
}
.list_app_holder {
    position : sticky;
    top : 0px;
    right : 0px;
    left : 0px;
    z-index : 10;
    background-color : rgba(50, 150, 130, 0.2);
    padding : 15px 0px;
    border-radius : 10px;
    margin-top : 15px;
}
.list_app_logo {
    aspect-ratio : 1/1;
    height : 50px;
    width : auto;
    border-radius : 15px;
    padding : 3px;
    margin-left : 10px;
    background-color : lightyellow;
}
.side_menu_body {
    position : absolute;
    top : 100px;
    bottom : 0px;
    right : 0px;
    left : 0px;
    padding : 0px 15px;
}
.side_menu_body > * {
    margin-bottom : 15px;
}
.side_menu {
    position : fixed;
    width : 90px;
    height : 100%;
    top : 0px;
    bottom : 0px;
    right : 0px;
    left : 0px;
    background-color : rgba(255, 228, 196, 0.5);
    box-shadow :  0px 0px 10px 5px rgba(155, 128, 96, 0.8);
    opacity : 0.1;
    z-index : 1000;
}
.side_menu > * {
    display : none;
}
.side_menu:hover {
    opacity : 1;
    width : 300px;
}
.side_menu:hover > * {
    display : block;
}
.main_div {
    position : fixed;
    width : 100%;
    height : 100%;
    top : 0%;
    bottom : 0%;
    right : 0%;
    left : 0%;
    padding : 20px 20px 20px 110px;
}
.loading {
    position : fixed;
    width : 100%;
    height : 100%;
    top : 0%;
    bottom : 0%;
    right : 0%;
    left : 0%;
    background-color : rgba(10, 50, 100, 0.8);
    background-image : url(/static/images/icon/loading_1.svg), url(/static/images/icon/loading_7.svg), url(/static/images/icon/loading_10.svg);
    background-position : center center,center center,center center;
    background-size : 30% auto,30% auto,20% auto;
    background-repeat : no-repeat,no-repeat,no-repeat;
    z-index : 99999;
}
.app_container {
    background-color : lightcyan;
    border-radius : 25px;
    width : 250px;
    height : 250px;
}
.app_container:hover {
    box-shadow : inset 0px 0px 15px 0px lightseagreen,  0px 0px 25px 0px white;
    outline-width : 2px;
    outline-style : solid;
    outline-color : darkgreen;
}
.named_app_image {
    width : 200px;
    height : 200px;
    padding : 20px;
    margin : auto;
}
.named_app_title {
    flex-wrap : wrap;
    height : 50px;
    font-size : 15pt;
    font-weight : bold;
}
.named_app_logo {
    flex-wrap : nowrap;
    width : 100%;
    height : 100%;
}
.error_page_msg > * {
    background-color : rgba(255, 100, 50, 0.5);
    padding : 10mm;
    border-radius : 10mm;
}
.page_not_found_msg {
    font-size : 36pt;
}
.scroller_button_holder {
    background-color : rgba(100, 100, 100, 0.5);
    border-radius : 5mm;
    padding : 1mm;
    gap : 5px;
}
.scroller_button {
    background-color : rgba(255, 255, 255, 0.5);
    border-radius : 100%;
    width : 8mm;
    height : 8mm;
}
.scroller_elements {
    padding : 0px;
    gap : 0px;
    overflow : hidden;
}
.scroller_elements > * {
    flex-basis : 100%;
    flex-shrink : 0;
    flex-grow : 0;
    transition : margin-left 1s linear 0s;
}
.active_app_img {
    width : auto;
    height : 60px;
    aspect-ratio : 1/1;
    border-top-left-radius : 100%;
    border-top-right-radius : 100%;
    border-bottom-left-radius : 100%;
    border-bottom-right-radius : 100%;
}
.active_app_container {
    flex-wrap : nowrap;
    padding : 10px;
    position : absolute;
    width : 100%;
    top : 0%;
    right : 0%;
    left : 0%;
}
.active_app {
    position : fixed;
    width : 70px;
    height : 100px;
    top : 0px;
    left : 5px;
    z-index : 1000;
}
.active_app:hover {
    transform : scale(110%, 110%);
}
.active_app_2 {
    position : fixed;
    width : 50px;
    height : 50px;
    top : 5px;
    left : 5px;
    background-color : rgba(255, 228, 196, 0.5);
    padding : 5px;
    box-shadow :  0px 0px 3px 3px rgba(26, 152, 206, 0.77);
    z-index : 3;
}
.user_utils_buttons {
    justify-content : flex-end;
    height : 100%;
}
.user_utils_buttons > * {
    width : auto;
    height : 100%;
    padding : 3px;
}
.user_utils {
    position : absolute;
    width : calc(100% - 100px);
    height : 40px;
    top : 5px;
    right : 5px;
}
.dialog {
    position : absolute;
    border-radius : 25px;
    border : none;
    background-color : white;
    box-shadow :  0px 0px 30px 5px black;
    min-width : 150px;
    min-height : 150px;
    max-width : 98vw;
    max-height : 98vh;
    z-index : 10000;
    overflow-y : auto;
    width : 80vw;
    height : 80vh;
    top : 10vh;
    left : 10vw;
}
.dialog_foot {
    position : fixed;
    width : 80vw;
    height : 15mm;
    top : 90vh;
    right : 10vw;
    padding : 2mm 10mm;
    flex-wrap : wrap;
}
.dialog1 {
    overflow : hidden;
    border-radius : 25px;
    border : 2mm solid mediumseagreen;
}
.dialog2 {
    position : fixed;
    width : 80vw;
    height : 80vh;
    top : 10vh;
    bottom : 10vh;
    right : 10vw;
    left : 10vw;
    border-radius : 25px;
    border : none;
    background-color : white;
    box-shadow :  0px 0px 30px 5px black;
    min-width : 150px;
    min-height : 150px;
    max-width : 98vw;
    max-height : 98vh;
    overflow : hidden;
    z-index : 10000;
}
.dialog3_header {
    position : fixed;
    height : 8vh;
    top : 1vh;
    right : 10vw;
    left : 10vw;
    background-color : seagreen;
    border-radius : 20px;
    padding : 20px;
}
.dialog3_foot {
    background-color : seagreen;
    border-radius : 20px;
    padding : 10px;
    position : fixed;
    height : 8vh;
    bottom : 1vh;
    right : 10vw;
    left : 10vw;
}
.dialog3 {
    background : none;
    box-shadow : none;
    outline : none;
    margin : 0px;
    position : fixed;
    width : 80vw;
    height : 80vh;
    top : 10vh;
    bottom : 10vh;
    right : 10vw;
    left : 10vw;
}
.no_form_error_div {
    background-color : salmon;
    border-radius : 25px;
    border : 2px solid black;
}
.html {
    background-repeat : no-repeat, no-repeat;
    background-size : cover, 200% 200%;
    background-position : center, var(--move_x) var(--move_y);
    background-color : white;
    background-image : url(/static/images/back/back_logo_1.jpg), radial-gradient(ellipse var(--size_x) var(--size_x) at 50% 50%, hsl(var(--hue), 100%, 50%), rgb(25,25,25));
    background-blend-mode : multiply;
    animation-name : back-color-rotation,size_x,size_y,move_x,move_y;
    animation-duration : 5s,17s,17s,17s,17s;
    animation-delay : 0s,0s,0s,0s,0s;
    animation-iteration-count : infinite,infinite,infinite,infinite,infinite;
    animation-play-state : running,running,running,running,running;
    animation-direction : alternate,normal,normal,normal,normal;
    animation-fill-mode : none,both,both,both,both;
    animation-timing-function : linear,linear,linear,linear,linear;
    position : fixed;
    width : 100%;
    height : 100%;
    top : 0%;
    bottom : 0%;
    right : 0%;
    left : 0%;
}
.login_div {
    position : fixed;
    top : 50%;
    left : 25%;
    min-width : 300px;
    max-width : 350px;
    min-height : 300px;
    transform : translateY(-50%);
}
.login_back {
    background-color : rgb(100,100,100);
    background-image : url(/static/images/back/login.png), radial-gradient(ellipse 700px 700px at 40% 50%, rgb(255,255,255), rgb(50,50,50));
    background-position : center;
    animation-name : none;
    background-blend-mode : multiply;
}
.login_submit {
    height : 40px;
    padding : 10px 25px;
    text-align : center;
}
.param_title {
    color : white;
    text-decoration : none;
    font-size : 32pt;
    font-weight : bold;
}
.param_style {
    background-color : seagreen;
    border-radius : 20px;
    padding : 20px;
    margin-bottom : 20px;
}
.param_style_flex {
    display : flex;
    flex-direction : row;
    flex-wrap : nowrap;
    gap : 5mm;
}
.database_side_menu_title {
    position : absolute;
    top : 30px;
    right : 30px;
    left : 30px;
    text-align : center;
    border-bottom-left-radius : 25px;
    border-top-right-radius : 25px;
    padding : 25px;
    background-color : rgba(255, 255, 255, 0.4);
    box-shadow :  2px 2px 10px 0px white;
    color : rgba(255, 255, 255, 0.8);
    text-shadow : 1px 1px 1px gold;
}
.db_side_menu_title {
    position : static;
    padding : 5px;
    margin-bottom : 10px;
}
.db_side_menu_button {
    padding : 5px;
    margin : 5px;
    background-color : rgba(160, 160, 170, 0.8);
    box-shadow :  2px 2px 5px 0px white;
    border : 2px solid goldenrod;
}
.db_side_menu_categ {
    padding : 15px;
}
.database_side_menu_body {
    position : fixed;
    width : 0px;
    top : 120px;
    bottom : 10px;
    left : 65px;
    padding : 140px 20px 20px 20px;
    display : none;
    box-shadow :  2px 2px 10px 0px seagreen;
    background-color : rgba(70, 100, 90, 0.8);
    border-radius : 25px;
    z-index : 0;
}
.database_side_menu_categories {
    display : flex;
    flex-direction : column;
    flex-wrap : wrap;
    overflow-x : scroll;
    gap : 5mm;
    column-gap : 30px;
    width : 100%;
    height : 100%;
}
.database_side_menu {
    position : fixed;
    width : 55px;
    top : 120px;
    bottom : 10px;
    left : 10px;
    border-radius : 25px;
    background-image : linear-gradient(0deg, bisque, seagreen);
    box-shadow : inset 2px 2px 10px 0px gold;
    z-index : 1000;
}
.database_side_menu:hover>* {
    display : block;
    width : 90%;
}
.db_main_div {
    position : fixed;
    top : 0px;
    bottom : 0px;
    right : 0px;
    left : 0px;
    padding : 25px 25px 25px 125px;
}
.home_video {
    pointer-events : none;
    min-width : 100%;
    width : 100%;
    height : auto;
}
.home_menu_rubon {
    position : fixed;
    width : 100%;
    height : 100px;
    top : 0px;
    right : 0px;
    left : 0px;
    background-color : white;
    padding : 5mm;
}
.gps_map_logo {
    border-radius : 100%;
    background-color : white;
    border : 2px solid brown;
    width : 35px;
    height : 35px;
}
.gps_map_logo_img {
    width : 80%;
    height : 80%;
    margin-left : 10%;
    margin-top : 10%;
}
.photo_appel_eleve {
    width : 3cm;
    height : 3cm;
    border-radius : 10px;
    border : 2px solid bisque;
}
.appel_buttons > * {
    padding : 5px;
    height : 50px;
}
.appel_buttons>*:nth-child(1) {
    width : 100px;
}
.appel_buttons>*:nth-child(2) {
    width : 50px;
}
.menu_button {
    background-color : seagreen;
    border : none;
    padding : 1mm 5mm;
    border-radius : 20px;
    color : white;
    font-weight : bolder;
    font-size : large;
    font-family : Times New Roman;
}