/*******************************************************************************
* SCREEN
*******************************************************************************/

#comp {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: calc(23rem - 9vw);
    width: 100%;
}


@media screen {
    body {
        min-width: 280px;
    }

    #container {
        display: flex;
    }
    
    .upload-btn-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    
    
    /**********   LEFT PANEL   **********/
    #left_panel {
        height: 100vh;
        width: 50%;
        overflow-y: auto;
    }
    #input_zone {
        overflow-x: auto;
        padding-left: 5px;
        padding-right: 5px;
    }

    #total_valeur{
        color: gray;
        font-size: 0.75rem;
        font-weight: normal;
    }
    
    .table td, .table th[scope="col"] {
        text-align: center;
        vertical-align: middle;
    }
    .table th[scope="row"] {
        min-width: 6em;
    }
    .table input[type=number] {
        min-width: 2.5em;
        text-align: center;
    }

    #langues_maitrises {
        overflow: hidden;
    }

    #langues_maitrises, #description, #aptitudes, #quete_perso, #maitrises, #regles, #notes {
        height: calc( 18em * 1.5 + 1rem );
    }

    .css-short-info .input-group-text {
        width: 100px;
    }
    
    #traits_personnalite, #ideaux, #liens, #defauts {
        height: calc( 7em * 1.5 + 1rem );
    }
    
    /**********   RIGHT PANEL   **********/
    #right_panel {
        height: 100vh;
        width: 50%;
        overflow: auto;
        background-color: gray;
        padding: 0.5em;
    }
    #right_panel object {
        background-color: white;
        width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
    #container {
        display: block;
    }
    #left_panel {
        height: auto;
        width: 100%;
    }
    #right_panel {
        height: auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #comp {
        max-height: calc(23rem - 18vw);
    }
}



/*******************************************************************************
* PRINT
*******************************************************************************/

@page {
    size: 210mm 297mm portrait;
    margin: 0;
}

@media only print {
    #left_panel {
        display: none;
    }
    
    #right_panel object {
        height: 297mm;
        width: 210mm;
    }
}


/*******************************************************************************
* TWEAKS
*******************************************************************************/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button:not(.spinbox),
input::-webkit-inner-spin-button:not(.spinbox) {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number]:not(.spinbox) {
    -moz-appearance: textfield;
}