div.main{
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    background: var(--white-default);
    font-family: var(--text-font);
    
    border-radius: 10px;
    
    height: auto;
    width:100%;

    padding:10px;

    padding-bottom:20px;
}

/*====================SIDES====================*/

div.side{
    height: 100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

div.left-side{
    width: 39%;
}
div.right-side{
    width: 59%;
}


/*=================LEFT SIDE=================--*/
div.figure{
    width: 100%;
}

div.figure > img.figure{
    width: 100%;
    transform: scaleX(-1);
    margin-top:20px;
}

div.import-json{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;

    height:55px;

    width: 100%;  
}

span.import-json.title{
    font-family: var(--title-font);
    color: var(--black-default);
    font-size: 1.3rem;

    margin-bottom: 10px;
}

div.import-input{
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;

    width:100%;
}


input[type="file" i].import-json{
    display:none;
}

input.import-json::-webkit-file-upload-button{
    display: none;
}

label.import-json{
    border:none;
    background-color: var(--red-default);
    color: var(--white-default);
    box-shadow: var(--shadow-default);

    transition: 0.2s;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px 20px;

    border-radius: 5px;
}

/*================RIGHT SIDE================*/

div.preview-data{
    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    height: 90%;
}



div.export-csv{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    height:auto;
    width: 100%;
    /* padding-bottom: 5px; */
}

div.export-csv > button{
    border:none;
    background-color: var(--red-default);
    color: var(--white-default);
    box-shadow: var(--shadow-default);

    transition: 0.2s;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px 6px;

    border-radius: 5px;
}

div.export-csv > button:disabled{
    background-color: var(--background-disable);
    color: var(--color-disable);
    cursor: auto;
}


div.import-export div > span > span{
    font-size: 1rem;
}

div.credits > span{
    color:white;
    font-size: 1rem;
    font-family: var(--text-font);
}