/* All pages layouts */


/*===============================================================================================*/
/*================i==============================================================================*/
/*===   Subtitles Page   ========================================================================*/
/*===============================================================================================*/

.subtitles_header_area {
  display: grid ;
  width: 100% ;
  grid-template-columns: 30% 40% 30%;
  grid-template-areas: 'author  infos  cover'
                       'toolbox infos cover'
                       'toolbox reliab cover';
  border: 3px solid var(--subtitles-signature-border-color);
  border-radius: 5px;
  padding: 5px;
}
.subtitles_header_area li {margin-top: 0.8rem;}
@media (max-width: 999px) { }
@media (max-width: 799px) {
  .subtitles_header_area {
    display: grid ;
    width: 100% ;
    grid-template-columns: 40% 60%;
    grid-template-areas: 'author  cover'
                         'toolbox cover'
                         'reliab  infos';
  }
}
@media (max-width: 499px) { }


.subtitles_author { grid-area: author; text-align:center ;}
.subtitles_infos {
  grid-area: infos;
}
.subtitles_cover {
  grid-area: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.subtitles_cover img {
  display: block ;
  max-height: 90%;
  max-width: 100% ;
}
.subtitles_toolbox{
  grid-area: toolbox;
  padding: 2.0rem ;
}
.subtitles_reliability_score{
  grid-area: reliab;
  vertical-align: middle;
}
.subtitles_reliability_score img{
  display: inline-block;
  vertical-align: middle;
}




.subtitles_content_area {
    display: grid;
    grid-template-areas: 'label value space';
    grid-template-columns: 8.0rem minmax(50%,40.0rem) auto;
    grid-column-gap: 1.0rem;
    grid-row-gap: 0.8rem;
    padding-left: 5.0rem;
    margin-bottom: 1.0rem;
}
@media (max-width: 999px) { }
@media (max-width: 799px) {
  .subtitles_content_area {
    width: 100% ;
    grid-template-columns: 8.0rem auto 0 ;
    grid-column-gap: 0.5rem;
    padding-left: 0.0rem;
  }
}
@media (max-width: 499px) { }


.subtitles_content_label { grid-area: label; }
.subtitles_content_value { grid-area: value; }
.subtitles_content_space { grid-area: space; }

.subtitles_content_value .button {
  width: 10rem ;
}

.subtitles_content_preview {
  display: none ; /* cache par defaut */
  font-family: monospace ;
  background-color: var(--subtitles-preview-bg-color) ;
  padding-left: 1.0rem;
  font-size: 0.9rem;
}

.subtitles_cover_area { grid-area: cover; }
.subtitles_cover_area .cover-image img {
    /* object-fit: scale-down; /* in order to see landscape covers with no cropping */
    width: 100%; /* to keep the 4/3 ratio */
}

.anonymous .subtitles_toolbox { display: none; }
.registered .subtitles_toolbox { grid-area: toolbox; }
.subtitles_toolbox .button { width: 100%; }
.subtitles_toolbox h5 { margin-top: 0px; }
.subtitles_toolbox div { margin-bottom: 1.5rem; }

.subtitles_details_area { grid-area: text; }
.subtitles_details_area dl {
  display: grid;
  grid-template-columns: max-content auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin: 0px;
}

.subtitles_details_area dt {
  grid-column-start: 1;
  font-weight: bold;
}

.subtitles_details_area dd {
  grid-column-start: 2;
  margin: 0px;
  max-width: 100%;   /* to avoid zip content strings being too large */
  overflow: hidden;  /* to avoid zip content strings being too large */
}

/* to avoid zip content strings being too large */
.subtitles_details_area pre {
  overflow-x: auto;
  overflow-y: hidden;
}


.subtitles_thanks_area {
  display: inline ;
}

.subtitles_thanks_area button[disabled],
  .subtitles_thanks_area button:disabled {
    cursor: default;
    color: #CCCCCC !important ;
    background-color: #808080 !important ;
}



.subtitles_ratings_area {
    display: grid;
    padding-left: 10%;
    grid-template-areas: "warning warning"
                         "votes definition"
                         "details definition";
    grid-template-columns: 60% 30%;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
}

.subtitles_ratings_area button[disabled],
  .subtitles_ratings_area button:disabled {
    cursor: default;
    color: #CCCCCC !important ;
    background-color: var(--main-bg-color) !important ;
}

.subtitles_ratings_area table {
    grid-area: votes;
    width: 100%;
}
.subtitles_ratings_area td {
    width: 25%;
    text-align: center;
}
.ratings_warning {
    grid-area: warning;
    font-style: italic;
    font-weight: bold;
}
.ratings_votes {
    grid-area: votes;
}
.ratings_definition {
    grid-area: definition;
}
.ratings_votes_details {
    grid-area: details;
    display: none;
    background-color: #444444;
    padding: 0.5rem;
    padding-bottom: 0.2rem;
}

.screenshot-thumbnail {
    padding: 0.25rem;
    background-color: var(--main-bg-color);
    border: 1px solid #DDEEEE;
    border-radius: 0.25rem;
    height: 30vmin;
    aspect-ratio: 2/3;
    object-fit: contain;
}


.subtitles-screenshot {
    display: inline-block;
    position: relative;
    z-index: 0;
}

.subtitles-screenshot .screenshot-thumbnail {
    aspect-ratio: 1/1;
    object-fit: contain;
}


.add_screenshot {
    display: grid;
    grid-template-columns: 20% 70%;
}
.add_screenshot textarea {
    display:block;
    width:100%;
}

.add_screenshot button {
    display:block;
    width: 20%;
    margin-left: auto;
    margin-right: 0;
}

.add_subtitles_comment {
    display: grid;
    grid-template-columns: 20% 70%;
}

.add_subtitles_comment textarea {
    display:block;
    width:100%;
}

.add_subtitles_comment button {
    display:block;
    width: 20%;
    margin-left: auto;
    margin-right: 0;
}

.message {
    display: grid;
    grid-template-areas: "info title"
                         "info content";
    grid-template-columns: 15rem auto;
}

.message .title {
    background-color: #444444;
    grid-area: title;
}

.message .info {
    background-color: #444444;
    grid-area: info;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.message .content {
    background-color: #303030;
    grid-area: content;
}

.subtitles_comment {
    display: grid;
    grid-template-areas: "info content";
    grid-template-columns: 15.0rem auto;
    margin-bottom: 0.5rem;
    position: relative; /* needed for delete button */
}

.subtitles_comment .info {
    background-color: #444444;
    grid-area: info;
    padding-top: 0.3rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
}

.subtitles_comment .content {
    background-color: #303030;
    grid-area: content;
    padding-top: 0.3rem;
    padding-left: 1rem;
    padding-right: 2rem; /* needed to leave space for the Delete button */
}
.subtitles_comment_avatar {
    display: block;
}




/******************************/
/***    SUBTITLES FORMS L   ***/
/******************************/
.subtitles-form-area {
    display: grid;
}
.subtitles-form-area-add {
    grid-template-columns: 2% 20% 20% 58%;
    grid-row-gap: 0.5rem;
    grid-template-areas: '.   label_files       value_files       value_files'
                         '.   label_language    value_language    .'
                         '.   label_name        value_name        value_name'
                         '.   label_draft       value_draft       draft_warning'
                         '.   label_duration    value_duration    value_duration'
                         '.   label_previewsi   value_previewsi   value_previewsi'
                         '.   label_comments    value_comments    value_comments'
                         '.   label_notes       value_notes       value_notes'
                         '.   label_screenshot  value_screenshot  value_screenshot'
                         '.   button            button            .';
}
.subtitles-form-area-edit {
    grid-template-columns: 24% 12% 20% 44%;
    grid-row-gap: 0.5rem;
    grid-template-areas: 'cover   label_title       value_title       value_title'
                         'cover   label_year        value_year        .'
                         'cover   label_language    value_language    .'
                         'cover   label_name        value_name        value_name'
                         'cover   label_draft       value_draft       .'
                         'cover   label_content     value_content     value_content'
                         'cover   label_duration    value_duration    value_duration'
                         'cover   label_previewsi   value_previewsi   value_previewsi'
                         'cover   label_comments    value_comments    value_comments'
                         'cover   label_notes       value_notes       value_notes'
                         'cover   button            button            .';
}
.subtitles-form-area-update {
    grid-template-columns: 2% 20% 20% 58%;
    grid-row-gap: 0.5rem;
    grid-template-areas: '.   label_files       value_files       value_files'
                         '.   label_language    value_language    .'
                         '.   label_name        value_name        value_name'
                         '.   label_draft       value_draft       draft_warning'
                         '.   label_duration    value_duration    value_duration'
                         '.   label_previewsi   value_previewsi   value_previewsi'
                         '.   label_comments    value_comments    value_comments'
                         '.   label_notes       value_notes       value_notes'
                         '.   button            button            .';
}
.subtitles-form-area-labelfiles { grid-area: label_files; }
.subtitles-form-area-labellanguage { grid-area: label_language; }
.subtitles-form-area-labelname { grid-area: label_name; }
.subtitles-form-area-labeldraft { grid-area: label_draft; }
.subtitles-form-area-labelduration { grid-area: label_duration; }
.subtitles-form-area-labelpreviewstartindex { grid-area: label_previewsi; }
.subtitles-form-area-labelcomments { grid-area: label_comments; }
.subtitles-form-area-labelnotes { grid-area: label_notes; }
.subtitles-form-area-labelscreenshot { grid-area: label_screenshot; }
.subtitles-form-area-valuefiles { grid-area: value_files; }
.subtitles-form-area-valuelanguage { grid-area: value_language; }
.subtitles-form-area-valuename { grid-area: value_name; }
.subtitles-form-area-valuedraft { grid-area: value_draft; }
.subtitles-form-area-valueduration { grid-area: value_duration; }
.subtitles-form-area-valuepreviewstartindex { grid-area: value_previewsi; }
.subtitles-form-area-valuecomments { grid-area: value_comments; }
.subtitles-form-area-valuenotes { grid-area: value_notes; }
.subtitles-form-area-valuescreenshot { grid-area: value_screenshot; }
.subtitles-form-area-labeltitle { grid-area: label_title; }
.subtitles-form-area-valuetitle { grid-area: value_title; }
.subtitles-form-area-labelyear { grid-area: label_year; }
.subtitles-form-area-valueyear { grid-area: value_year; }
.subtitles-form-area-labelcontent { grid-area: label_content; }
.subtitles-form-area-valuecontent { grid-area: value_content; }
.subtitles-form-area-button { grid-area: button; }
.subtitles-form-area-draftwarning {
    grid-area: draft_warning;
    padding-left: 1rem;
}
.subtitles-form-area label {
    font-weight: bold;
    display: inline-block; /****** float: left; */
    padding: 0.5rem;
    vertical-align: middle;
}
.subtitles-form-area input, .subtitles-form-area textarea, .subtitles-form-area select {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0.3rem;
    font-family: inherit;
    font-size: 0.93rem;
    line-height: 1.3rem;
    border: none;
    border-radius: 0.15rem;
  vertical-align: middle;
}

.subtitles-form-area input:disabled, .subtitles-form-area input[disabled] {
    background-color: #AAAAAA !important ;
    color: #303030 !important ;
    cursor: default;
}

.subtitles-form-area input[type="checkbox"],
.subtitles-form-area input[type="radio"] {
    width: auto; /* Rétablir la largeur par défaut */
    margin-right: 0.0rem; /* Espacement avec le label */
    vertical-align: middle;
}
.subtitles-form-area fieldset>label {
  font-size: 0.9rem;
  font-weight: normal;
  margin-bottom: 0.0rem;
  padding: 0;
}
.subtitles-form-area fieldset>input {
  font-size: 0.9rem;
  font-weight: normal;
  margin-bottom: 0.0rem;
  padding: 0;
}



/*===============================================================================================*/
/*===============================================================================================*/
/*===   Average screens   =======================================================================*/
/*===============================================================================================*/
@media (max-width: 970px) and (min-width: 800px) {


}

/*===============================================================================================*/
/*===============================================================================================*/
/*===   Small Screens   =========================================================================*/
/*===============================================================================================*/
@media (max-width: 799px) {

    .subtitles_details_area {
        margin-top: 2rem;
    }



    .subtitles_ratings_area {
        display: grid;
        padding: 0;
        width: 100%;
        text-align: left;
        grid-template-columns: 100% 100%;
        grid-template-areas: "definition"
                              "warning"
                               "votes"
                              "details";   
    }

    .subtitles_ratings_area table {
        width: 100%;
    }

    .add_screenshot {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: "a"
                             "b"
                             "c" ;
    }
    
    .add_screenshot button {
        width: 100%;
    }

    .add_subtitles_comment {
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: "a"
                             "b"
                             "c" ;
    }
    
    .add_subtitles_comment button {
        width: 100%;
    }

    .subtitles_comment {
        grid-template-columns: auto;
    }
    .subtitles_comment_avatar {
        display: none;
    }

}


/*===============================================================================================*/
/*===============================================================================================*/
/*===   Very small screens   ====================================================================*/
/*===============================================================================================*/
@media (max-width: 550px) {


/******************************/
/***    SUBTITLES FORMS S   ***/
/******************************/
    .subtitles-form-area-draftwarning {
        display: none;
    }
    .subtitles-form-area-add {
        grid-template-columns: auto;
        grid-row-gap: 0.2rem;
        grid-template-areas: 'label_files'
                             'value_files'
                             'label_language'
                             'value_language'
                             'label_name'
                             'value_name'
                             'label_draft'
                             'value_draft'
                             'label_duration'
                             'value_duration'
                             'label_previewsi'
                             'value_previewsi'
                             'label_comments'
                             'value_comments'
                             'label_notes'
                             'value_notes'
                             'label_screenshot'
                             'value_screenshot'
                             'button';
    }
    .subtitles-form-area-edit {
        grid-template-columns: auto;
        grid-row-gap: 0.2rem;
        grid-template-areas: 'cover'
                             'label_title'
                             'value_title'
                             'label_year'
                             'value_year'
                             'label_language'
                             'value_language'
                             'label_name'
                             'value_name'
                             'label_draft'
                             'value_draft'
                             'label_content'
                             'value_content'
                             'label_duration'
                             'value_duration'
                             'label_previewsi'
                             'value_previewsi'
                             'label_comments'
                             'value_comments'
                             'label_notes'
                             'value_notes'
                             'button';
    }
    .subtitles-form-area-update {
        grid-template-columns: auto;
        grid-row-gap: 0.2rem;
        grid-template-areas: 'label_files'
                             'value_files'
                             'label_language'
                             'value_language'
                             'label_name'
                             'value_name'
                             'label_draft'
                             'value_draft'
                             'label_duration'
                             'value_duration'
                             'label_previewsi'
                             'value_previewsi'
                             'label_comments'
                             'value_comments'
                             'label_notes'
                             'value_notes'
                             'button';
    }


}