/* Styles for dance_tables.php using themes dark and light */

:root, [data-theme="dark"] {
    --main_col: #fff;
    --main_bgcol: #222;
    --table_col: #ddd;
    --table_bgcol: #000;
    --table_border_col: #888;
    --empty_dance_col: #a80;
    --copperknob_col: #f88;
    --digital_dance_col: #4f4;
    --kdrive_dance_col: #88f;
    --comment_col: #ccc;
    --empty_cell_col: #555;
    --playing_col: #ff0;
}

[data-theme="light"] {
    --main_col: #000;
    --main_bgcol: #eee;
    --table_col: #333;
    --table_bgcol: #fff;
    --table_border_col: #888;
    --empty_dance_col: #970;
    --copperknob_col: #e00;
    --digital_dance_col: #090;
    --kdrive_dance_col: #00a;
    --comment_col: #222;
    --empty_cell_col: #eee;
    --playing_col: #bb0;
}

body {
    font-family: sans-serif;
    color: var(--main_col);
    background-color: var(--main_bgcol);    
}

.topnav {
    background-color: var(--main_bgcol);
    overflow: hidden;
}

.topnav a {
    float: left;
    color: var(--table_col);
    text-align: center;
    /* padding: 8px 16px; */
    padding: 6px;
    text-decoration: none;
    /* font-size: 17px; */
    font-size: clamp(0.4rem, 1.5vw, 1.3rem);
}

.topnav a:hover {
    background-color: var(--table_col);
    color: var(--table_bgcol);
}

.topnav a.active {
    background-color: #494;
    color: var(--main_col);
}

table,
th,
td {
    font-size: clamp(0.3rem, 1.5vw, 1rem);
    background-color: var(--table_bgcol);
    border: 1px solid var(--table_border_col);
    border-collapse: collapse;
    padding: 2px;
}

.level_bar {
    /* font-size: clamp(0.3rem, 1.5vw, 1rem); */
    font-size: clamp(0.3rem, 0.8vw, 1rem);
}

.dance {
    color: var(--empty_dance_col);
}

.copperknob {
    color: var(--copperknob_col);
}

.digital_dance {
    color: var(--digital_dance_col);
}

.kdrive_dance {
    color: var(--kdrive_dance_col);
}

.comment {
    color: var(--comment_col);
}

.empty {
    background-color: var(--empty_cell_col);
}

.music {
    border: none;
    cursor: pointer;
    background-color: inherit;
    color: var(--digital_dance_col);
    /* font-size: 2vw; */
    font-size: clamp(0.4rem, 2vw, 1.3rem);
    padding: 0;
}

.playing {
    color: var(--playing_col);
    /* font-size: x-large; */
}

.separator {
    height: 6px;
}

#top_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#login_info {
    /* font-size: small; */
    font-size: clamp(0.3rem, 1.5vw, 1rem);
    padding: 6px 16px;
}

button {
    font-size: clamp(0.3rem, 1.5vw, 1rem);
}

#header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#instructions {
    /* font-size: large; */
    font-size: clamp(0.3rem, 1.5vw, 1rem);
}

h1 {
    padding-left: 10px;
    /* font-size: 3.5vw; */
    font-size: clamp(0.8rem, 3.5vw, 2.5rem);
   justify-content: flex-start;
}



.season-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.season {
    /* font-size: xx-large; */
    /* font-size: 3vw; */
    font-size: clamp(0.6rem, 3vw, 2rem);
    padding-left: 10px;
}

.updated {
    /* font-size: small; */
    font-size: clamp(0.3rem, 1.5vw, 1rem);
    padding-right: 10px;
}

.center {
    text-align: center;
}

table {
    table-layout: fixed;
    width: 100%;
}

.week {
    /* width: 50px; */
    width: clamp(0.5rem, 4vw, 3rem);
    text-align: center;
}

.level_1_EZ,
.level_1_NY {
    background-color: #f66;
    color: black;
}

.level_1,
.level_1_Newcomer,
.level__1,
.level_1_2 {
    background-color: #f44;
    color: black;
}

.level_1_2_Mix {
    background-color: #f75;
    color: black;
}

.level_2_EZ,
.level_2_Easy,
.level_2_Beginner {
    background-color: #fa6;
    color: black;
}

.level_2,
.level__2 {
    background-color: #f84;
    color: black;
}

.level_2_3,
.level_2_3_Ny,
.level_2_3_Mix {
    background-color: #aa4;
    color: black;
}

.level_3_EZ {
    background-color: #ff8;
    color: black;
}

.level_3,
.level__3 {
    background-color: #ff0;
    color: black;
}

.level_3_,
.level_Level {
    background-color: #af4;
    color: black;
}

.level_3_4,
.level_3_,
.level_3_4_Mix,
.level___Lagom,
.level_4L,
.level_4L_Novice {
    background-color: #8f8;
    color: black;
}

.level_4_Easy,
.level_4,
.level_4_Intermediate,
.level_4_Novice {
    background-color: #0f0;
    color: black;
}

.level_4_5,
.level_4_5_Mix {
    background-color: #0ca;
    color: black;
}

.level_5_Intermediate,
.level_5 {
    background-color: #48f;
    color: black;
}

.level_6_Intermediate,
.level_6 {
    background-color: #f4f;
    color: black;
}

.level_7_,
.level_7 {
    background-color: #888;
    color: black;
}

#music_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #666;
    padding: 4px;
    border-radius: 12px;
    border: solid var(--playing_col);
    border-width: 1px;
    z-index: 1;
    position: absolute;
}

#music_box_first_row {
    color: var(--playing_col);
    display: flex;
    flex-direction: row;
    align-items: center;
}

#music_file_name {
    color: var(--playing_col);

}

#close_music {
    padding: 4px;
    cursor: pointer;
}

#progress {
    width: 100%;
    height: 6px;
    background-color: #666;
    cursor: pointer;
}

.old-period  {
    display: none;
}