.calc_interface {
    display: none;
    grid-template-areas: 'progress'
                         'userhome'
                         'usershorts'
                         'homemedia'
                         'shorts'
                         ;
    justify-items: center;
    gap: 25px;
}
.status_selector {
    border: 1px solid black;
    padding: 4px;
    width: fit-content;
    margin: 8px;
}
.calc_settings_box {
    border: 1px solid black;
    padding: 4px;
    width: fit-content;
    margin: 8px;
}
.calc_user_shorts_bottom {
    display: grid;
    grid-template-columns: auto 1fr;
}
.calc_user_shorts_buttons, .calc_button_addshorts {
    align-self: center;
    justify-self: start;
}
.calc_select_shorts_bottom {
    display: grid;
    grid-template-columns: auto auto 1fr;
}
optgroup {
    font-style:normal;
}
.calc_short_list {
    grid-area: shorts;
    width: 100%;
}
.calc_short_list_selector, .calc_homemedia_list_selector, .calc_user_shorts_list, .calc_user_homemedia_list {
    font-size: 12px;
}
.calc_short_list_selector, .calc_user_shorts_list {
    width: 100%;
    /* max-width: 350px; */
}
.calc_homemedia_list_selector, .calc_user_homemedia_list {
    width: 100%;
    /* max-width: 500px; */
}
.calc_short_list_selector, .calc_user_shorts_list, .calc_homemedia_list_selector, .calc_user_homemedia_list {
    height: 500px;
}
.calc_homemedia_list {
    grid-area: homemedia;
    width: 100%;
}
.calc_user_homemedia {
    grid-area: userhome;
    width: 100%;
}
.calc_user_shorts {
    grid-area: usershorts;
    width: 100%;
}
.calc_progress {
    grid-area: progress;
    width: 100%;
}
.seriesselectlabel, .shortyearlabel {
    color: black;
    font-weight: bold;
}
.calc_shorts_movelabel {
    margin: 0;
}

/* progress */
.calc_progress_bar {
  height: 20px;
  position: relative;
  background: #e7e7e7;
  padding: 10px;
}
.calc_progress_bar_inner {
    height: 100%;
}
.calc_progress_bar_inner > span {
  display: block;
  float: left;
  height: 100%;
}
.calc_progress_bar {
    border-radius: 20px;
}
.calc_progress_bar_inner {
    border-radius: 10px;
    overflow:hidden;
}
.calc_progress_bar_non {
    background-color: black;
    color: white;
}
.calc_progress_bar_unr {
    background-color: orange;
    color: black;
}
.calc_progress_bar_usd {
    background-color: rgb(121, 58, 0);
    color: white;
}
.calc_progress_bar_rsd {
    background-color: rgb(224, 206, 43);
    color: black;
}
.calc_progress_bar_uhd {
    background-color: purple;
    color: white;
}
.calc_progress_bar_rhd {
    background-color: rgb(0, 175, 0);
    color: black;
}
.calc_progress_bar_non, .calc_progress_bar_unr, .calc_progress_bar_usd, .calc_progress_bar_rsd, .calc_progress_bar_uhd, .calc_progress_bar_rhd {
    transition: width 0.5s;
}
.calc_progress_number_user, .calc_progress_number_max {
    font-weight: bold;
}

/* headers and styling */
.calc_short_label, .calc_homemedia_label, .calc_headerlabel {
    font-weight: bold;
    text-decoration: underline;
}

/* buttons */
.calc_button_removehomemedia, .calc_button_removeshorts {
    margin: 8px 4px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    background-color: rgb(175, 52, 52);
    color: white;
    padding: 4px 8px;
    border-radius: 10px;
}
.calc_button_removehomemedia:hover, .calc_button_removeshorts:hover {
    background-color: rgb(236, 81, 81);
}
.calc_button_removehomemedia:active, .calc_button_removeshorts:active {
    background-color: rgb(75, 24, 24);
}
.calc_button_moveshorts {
    margin: 8px 4px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    background-color: rgb(233, 199, 89);
    color: black;
    padding: 4px 8px;
    border-radius: 10px;
}
.calc_button_moveshorts:hover {
    background-color: rgb(255, 207, 49);
}
.calc_button_moveshorts:active {
    background-color: rgb(153, 133, 69);
}
.calc_button_addhomemedia, .calc_button_addshorts {
    margin: 8px 4px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    background-color: rgb(62, 175, 52);
    color: black;
    padding: 4px 8px;
    border-radius: 10px;
}
.calc_button_addhomemedia:hover, .calc_button_addshorts:hover {
    background-color: rgb(105, 231, 93);
}
.calc_button_addhomemedia:active, .calc_button_addshorts:active {
    background-color: rgb(30, 77, 25);
    color:white;
}

/* desktop */
@media screen and (min-width: 900px) {
    .calc_interface {
        grid-template-areas: 
                         'userhome usershorts'
                         'progress progress'
                         'homemedia shorts'
                         ;
    }
}