.back_pic {
    width: 86%;
    height: 86%;
    position: absolute;
    left: 7%;
    top: 7%;
}

.regle_blanche {
    display: none;
}

.rect_zone {
    width: 400px;
    height: 400px;
    margin: auto;
}

.palette_navigator .rect_zone {
    height: 100px;
}

.railroad_cursor {
    top: 0px;
    height: 87%;
    width: 12.5%;
}

.samples IMG.smalls {
    width: 10px;
    height: 10px;
}

.samples IMG.mediums {
    width: 15px;
    height: 15px;
}

.samples IMG.bigs {
    width: 35px;
    height: 35px;
}

.study {
    text-align: center;
}

.study H1 SPAN {
    color: #4c8f9c;
    font-size: 18px;
    margin: 20px;
}

#uploads_stage {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.uploads {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin-bottom: 30px;
}

.uploads > DIV {
    border: 1px solid lightgray;
    height: 200px;
    text-align: center;
    /*min-width: 20%;*/
    width: 200px;
    position: relative;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    /*padding: 20px;*/
}

.uploads > DIV > SPAN {
    color: #4c8f9c;
    display: block;
    /*margin: 5px;*/
    font-weight: bold;
}

.uploads IMG.user_photo {
    max-width: 100%;
    max-height: 70%;
}

.choice_btns BUTTON {
    display: inline-block;
}

.selected {
    outline: 3px solid #4c8f9c;
    background-color: rgba(76, 143, 156, 0.11) !important;
}

.uploads INPUT[type=file] {
    font-size: 70%;
    padding: 10px;
    display: block;
    position: absolute;
    bottom: 0;
    /*background: white;*/
}

.study:not(.in_error):not(.is_loading) #uploads_stage,
.study.is_displaying_score #report_score,
.study.mode_is_target .mode_target, .study.mode_is_global .mode_global, .study.mode_is_live .mode_live,
/*.is_uploading .choice_ph,*/ .is_uploading .uploads INPUT[type=file] {
    display: block;
}

.study.mode_is_target TR.mode_target, .study.mode_is_global TR.mode_global, .study.mode_is_live TR.mode_live
{
    display: table-row;
}

.study.mode_is_target TFOOT.mode_target, .study.mode_is_global TFOOT.mode_global, .study.mode_is_live TFOOT.mode_live
{
    display: table-footer-group;
}

/*.is_loading #uploads_stage,
.is_loading .comparator_table, .is_uploading .comparator_table, .is_displaying_score .comparator_table,
.is_studying .uploads INPUT[type=file],
.is_studying .choice_ph,
#confirm_uploads,
.is_displaying_score .choice_ph, .is_displaying_score  .uploads INPUT,
.is_loading #report_score, .is_uploading #report_score, .is_studying #report_score,*/

.is_loading #uploads_stage, #report_score, .is_loading #uploads_stage .uploads > DIV, .comparator_table, #confirm_uploads,
.mode_global, .mode_target, .mode_live, .choice_ph, .uploads INPUT[type=file] {
    display: none;
}



.is_studying_1 #upload1, .is_studying_2 #upload2, .is_studying_3 #upload3, .is_studying_4 #upload4 {
    outline: 3px solid #4c8f9c;
    background-color: rgba(76, 143, 156, 0.11) !important;
}

.is_studying_1 #upload1 SPAN, .is_studying_2 #upload2 SPAN, .is_studying_3 #upload3 SPAN, .is_studying_4 #upload4 SPAN {
    color: #4c8f9c;
}

.is_studying_1 #upload1 IMG, .is_studying_2 #upload2 IMG, .is_studying_3 #upload3 IMG, .is_studying_4 #upload4 IMG {
    filter: none;
}

.uploads > DIV.done SPAN::after {
    content: "✔";
}

.is_studying .uploads DIV {
    background-color: rgba(4, 17, 19, 0.11) !important;
}

.is_studying .uploads DIV SPAN {
    color: grey;
}

.is_studying .uploads DIV IMG {
    filter: grayscale(100%);
}

.is_studying .uploads {
    max-height: 100px;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-size: 100% 100%;
}

.is_studying.mode_is_global #upload1::after, .is_studying.mode_is_global #upload2::after, .is_studying.mode_is_global #upload3::after {
    content: "➡";
    position: absolute;
    right: -20px;
    top: 15%;
    color: #4c8f9c;
}

#report_score {
    text-align: center;
}

#report_score TABLE {
    border: 1px solid grey;
    margin: auto;
    width: 60%;
}

#report_score TABLE TBODY TR TD:nth-of-type(1) {
    text-align: left;
    color: #4c8f9c;
}

#report_score TD {
    padding: 5px
}

.choice_ph {
    margin-top: 30px;
    margin-bottom: 60px;
}

.bottom_tip {
    /*position: fixed;*/
    /*bottom: 0;*/
    margin: 20px;
    font-size: 13px;
    color: #cd686b;
    display: block;
    width: 100%;
    text-align: center;
}

#confirm_uploads {
    margin-top: 30px;
    margin-bottom: 30px;
}

H2 {
    color: #3c3c3b;
}

.study .needs_pic {
    display: initial;
}

.study.has_all_pics .needs_pic {
    display: none;
}

.study .has_all_pics {
    display: none;
}
.study.has_all_pics .has_all_pics {
    display: initial;
}

.valid_all_density {
    margin: auto;
}

.upload_thumb {
    position: absolute;
    opacity: 0.3;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* filter: grayscale(1); */
}

DIV.has_pic .upload_thumb {
    display: none;
}


#user_cropping_dialog {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
}

#user_cropping_dialog .image_container {
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

#user_cropping_dialog .image_container IMG {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cropper_functions {
    margin: 20px;
}

.cropper_functions BUTTON {
    display: inline-block;
    margin: 5px;
}

HTML {
    overflow-y: scroll;
}

.comparator_table {
    max-width: 800px;
}

.comparator_table TD {
    border: none;
}

.is_studying .comparator_table {
    display: table;
}

.railroad_cursor {
    /*top: 0px;*/
    height: 100%;
    width: 14%;
}

.study BUTTON {
    font-weight: normal;
}

.study .choice_btns BUTTON:hover {
    color: initial;
}

.comparator_table.taille0 BUTTON.taille0:hover, .comparator_table.taille1 BUTTON.taille1:hover, .comparator_table.taille2 BUTTON.taille2:hover {
    color: var(--primarybtnhovercolor);
}


#report_score TABLE {
    border: 1px solid #e6e6e6;
    margin: auto;
    width: 40%;
    border-collapse: collapse;
}

#report_score TD {
    padding: 5px;
    border-bottom: 1px solid #e6e6e6 !important;
}


@media (max-width: 1190px) {
    .cropper_functions BUTTON SPAN:not(.fa) {
        display: none;
    }
}