/*************************************************************/
/* css/style_form.css                                        */
/*                                                           */
/* DESCRIPTION: Style sheet - Submit Title Form              */
/*                                                           */
/*************************************************************/

#sf_mainform .req {
    font-weight: bold;
    color: var(--color-red);
}

.sf_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    flex-grow: 1;
}

#sf_row_plot,
#sf_row_image,
#sf_row_genre,
#sf_row_country,
#sf_row_language {
    flex-wrap: nowrap;
}

@media screen and (max-width: 575px) {
    #sf_row_genre,
    #sf_row_country,
    #sf_row_language {
        margin-bottom: 24px;
    }
    #sf_row_plot,
    #sf_row_image {
        flex-wrap: wrap;
        gap: 4px;
    }

}
.sf_row.centeralign {
    justify-content: center;
}
.sf_row label {
    width: 90px;
    flex-shrink: 0;
}
.sf_row label.longer {
    width: 140px;
    flex-shrink: 0;
}
.sf_label_topalign {
    align-self: flex-start;
    margin-top: 12px;
}
.sf_row input[type='text'] {
    flex-grow: 1;
}
.sf_row input[type='number'] {
    width: 120px;
}

#sf_genre_div, #sf_franchise_div, #sf_country_div, #sf_language_div {
    display: flex;
}

#sf_row_language .selectinput,
#sf_row_country .selectinput {
    width: 41.66666667%;
}
#sf_row_genre .selectinput {
    width: 33.33333333%;
}
@media screen and (max-width: 743px) {
    #sf_row_genre .selectinput {
        width: 100%;
    }
    #sf_row_country .selectinput {
        width: 100%;
    }
    #sf_row_language .selectinput {
        width: 100%;
    }
}

#sf_image {
    background-color: white;
    overflow-x: hidden;
}

.sf_summary_container,
.sf_trailer_container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
#sf_summary,
#sf_minireview {
    height: 120px;
    flex-grow: 1;
}

.sf_image_container {
    display: flex;
    flex-direction: column;
}

.sf_select {
    font-size: 10pt;
    margin-bottom: 5px;
}

.sf_chars_remaining {
    font-size: 12px;
    color: var(--color-mono-70);
    text-align: right;
}

#sf_preview_trailer {
    clear:both;
}
#sf_previewtrailer_embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 15px 0 5px 0px;
    clear: both;
}
#sf_previewtrailer_embed iframe,
#sf_previewtrailer_embed object,
#sf_previewtrailer_embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sf_admin_options {
    background-color: var(--color-red-95);
    padding: 12px;
    margin-bottom: 12px;
}

#sf_row_year .sf_yearto {
    justify-content: flex-end;
}

div#sf_reviewsub img {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
    width: 180px;
}

div#sf_reviewsub p {
    margin: .5em 0 0 0;
}

div#sf_row_submit {
    margin-bottom: 1em;
}

.sf_runtime_container {
    display: flex;
    align-items: center;
}

.sf_options {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#sf_mainform .sf_yearto {
    display: none;
}

div#sf_row_creator {
    display: none;
}

div#sf_row_parent {
    display: none;
}

option.tvgenre {
    display: none;
}

.sf_contriblist {
    display: none;
    border: none;
}

.sf_contriblist td:last-child {
    text-align: right;
}

#sf_contriblist_1 {
    display: table;
}

.sf_submitbuttons {
    display: flex; 
    justify-content: center;
    margin: 24px 0;
    gap: 24px;
}
#sf_reviewsub h1 {
    margin-bottom: 24px;
}

#sf_error {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0px;
    border: 1px var(--color-red) solid;
    padding: 8px;
    border-radius: 6px;
}

#sf_error p {
    margin: 10px 0px;
}

#sf_mainform .sf_platformlist li input {
    width: auto;
    margin-right: 2px;
    vertical-align: bottom;
    margin-bottom: 1px;
}

.sf_platform_container {
    display: flex;
    flex-direction: column;
}
.sf_platforms {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.sf_platforms .checkboxinput,
.boardgame .checkboxinput {
    width: 140px;
}
.sf_platforms_more {
    display: none;
    margin-top: 8px;
}

.boardgame {
    border-top: 1px var(--color-mono-70) solid;
    padding-top: 8px;
    margin-top: 8px;
    width: 140px;
}

#sf_moreplatforms {
    display: none;
}

#sf_moreplatforms label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sf_matching {
    border: 2px var(--color-red) solid;
    margin: 10px 0px;
    padding: 5px 10px;
}

#sf_matching_head {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

#sf_series_div {
    display: none;
    flex-direction: column;
}

#sf_imgrules_episode {
    display: none;
}

#sf_row_rating {
    align-items: center;
}
.sf_datewatched {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    flex-grow: 1;
}

@media screen and (max-width: 575px) {
    .sf_datewatched {
        justify-content: flex-start;
        flex-grow: 0;
    }
}