/* COLORS */
/***************************************************/
/***************************************************/
/***************************************************/

body {
    background-color: var(--lightest);
    color: var(--font_color);
}
input[type=text],
h1, h2,
.locus, .locus2,
.translatio_box,
.translatio_box .translata {
    color: var(--attraction_light);
}
.translatio_box h1, 
.translatio_box h2, 
.translatio_box .locus, 
.translatio_box .locus2,
.translatio_box .intro,
.translatio_box .anglice {
    color: var(--font_color);
}

#formular_leiste, #button_leiste1, #main_menu, #banner_deko {
    background-color: var(--middle);
}
#banner {
    background: linear-gradient(to top, var(--light), var(--dark));
}
button:not(.grabber_up):not(.grabber_down):not(.makeBoxButton) {
    background-color: var(--attraction_light);
    color: var(--lightest);
}
.form_section:nth-of-type(2n-1) {
    background-color: var(--lighter);
}
.form_section:nth-of-type(2n) {
    border-top: 7px solid white;
    border-bottom: 7px solid var(--light);
    
}
#working_area_menu li, #working_area_menu a {
    background-color: var(--dark);
    color: var(--darkblue);
}
.toggle_sign {
    color: var(--lightblue);
}
.toggle_sign.active {
    color: var(--darkred);
}
#main_menu li:hover {
    background-color: var(--lightblue);
}
#main_menu a {
    color: var(--darkblue);
}
#main_menu a:hover {
    color: var(--lightest);
}
footer div:first-child {
    background-color: var(--attraction_dark);
    color: var(--lightest);
}
footer div:last-child {
    background-color: var(--attraction_light);
    color: var(--lightest);
}

#file_menu ul li {
    background-color: var(--darkest);
}
#file_menu ul>ul li {
    background-color: var(--dark);
}
#file_menu ul>ul>ul li {
    background-color: var(--middle)
}
#file_menu ul>ul>ul>ul li {
    background-color: var(--light);
}
#file_menu ul>ul>ul>ul>ul li {
    background-color: var(--lighter);
}

#file_menu li:hover, #working_area_menu a:hover {
    background-color: var(--attraction_light);
    color: var(--lightest);
}
.clicked_menu_el {
    background-color: var(--lightblue) !important;
    color: var(--lightest);
}

.error, #feedback {
    color: var(--midred);
    font-weight: bold;
}

input[type=submit] {
    background-color: var(--lightblue);
    color: var(--lightest);
    transition: background-color 0.2s ease;
    cursor: pointer;
}
input[type="button"] {
    cursor: pointer;
    width: 150px;
    height: 40px;
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.2s ease;
}
input[type="submit"]:hover {
    background-color: var(--darkblue);
}
input[type="button"]:hover{
    background-color: var(--special_dark);
}



#dir_formulars_box {
    background-color: var(--lightest);
}

.opener:hover {
    background-color: var(--attraction_dark) !important;
}

/* li while user moves file and picks target */
#file_menu.while_target_picking ul li {
    background-color: var(--special_darkest);
}
#file_menu.while_target_picking ul>ul li {
    background-color: var(--special_dark);
}
#file_menu.while_target_picking ul>ul>ul li {
    background-color: var(--special_middle)
}
#file_menu.while_target_picking ul>ul>ul>ul li {
    background-color: var(--special_light);
}
#file_menu.while_target_picking ul>ul>ul>ul>ul li {
    background-color: var(--special_lighter);
}

#file_menu.while_target_picking li:hover {
    background-color: var(--special_attraction_light);
    color: var(--special_lightest);
}
#file_menu.clicked_menu_el {
    background-color: var(--orange) !important;
    color: var(--lightest);
}
.grabber_up,
.grabber_down {
    border: 1px dashed var(--font_color);
    color: var(--font_color);
    background-color: var(--special_middle);
}
.grabber_down:hover,
.grabber_up:hover {
    color: var(--midkblue);
    border: 1px dashed var(--midblue);
    font-size: larger;
}
a {
    color: var(--midblue);
}
a:hover {
    color: var(--darkblue);
}
#box_for_user_made_comments_buttons > button {
    background-color: var(--lightblue);
    color: var(--darkblue);
}
#box_for_textbox_buttons > button {
    background-color: var(--special_dark);
}
.makeBoxButton {
    color: var(--font_color);
    background-color: var(--special_middle);
}