/*media queries for mobile*/
@media only screen and (max-width: 1000px) {
    .responsive {
        display: block!important;
    }
    .notResponsive {
        display: none!important;
    }
    .background {
        display: none;
    }
    .btn-outline-light {
        border: 2px solid white;
    }
    #headerRightPart {
        position: fixed;
        top: 0;
        right: -100vw;
        height: 100vh;
        background-color: #1a1a1a;
        padding: 20px;
        z-index: 100;
        transition: right 0.5s;
    }
    #headerRightPart #headerMenuButton {
        margin-left: 5px;
    }
    #headerRightPart * {
        font-size: 2rem;
    }
    #headerRightPart > * {
        margin: 0!important;
    }
    #headerRightPart a {
        width: 100%;
        margin: 10px 0!important;

    }
    #menuHeader a {
        display: block;
        text-align: center;
        font-size: 2rem!important;
    }
    h1 {
        font-size: 4rem!important;
    }
    .container {
        width: 80vw
    }
    .container p {
        font-size: 2rem;
    }
    a {
        font-size: 2rem!important;
    }
    .customForm {
        width: 80vw;
        padding: 60px 40px;
    }
    .customForm * {
        font-size: 2rem!important;
    }
    .customForm input {
        padding: 10px;
        height: auto;
    }
    .wrapper {
    grid-auto-rows:minmax(100px, 300px);
    }
    .itemCard .deleteButton {
        display: block;
        width: 50px;
        height: 50px;
    }
    .itemCard .deleteButton:hover {
        width: 50px;
        height: 50px;
    }
    .buttonModalImportImage {
        width: 100px;
        height: 100px;
    }
    #modalImportImage, #modalRecrop {
        bottom:  220px;
    }
    #modalImportImage h5 {
        font-size: 4rem!important;
    }
    #modalImportImage input {
        font-size: 3rem!important;
    }
    #modalImportImage #labelInputFileRecrop, #modalImportImage input {
        border: #198754 2px solid;
    }
    #modalImportImage #labelInputFileRecrop img{
        width: 50px;
        height: 50px;
    }
    #inputFilter {
        font-size: 1.4rem!important;
    }
    .cardZone {
        width: 0;
    }
    .drawZone {
        width: 100%;
        margin: 0;
    }
    .canvas {
        margin-top: 30px;
    }
    #output {
        margin-top: 30px;
    }
    #cardZoneBottom {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 100%;
    }
    #cardZoneBottom::-webkit-scrollbar {
        display: none;
    }
    button img, label img {
        width: 50px;
        height: 50px;
    }
    #actionsContainer {
        top: 200px!important;
    }
    #actionsContainer button, .cardFooter button {
        font-size: 2rem;
    }
    .select2-selection__rendered {
        font-size: 1.2rem!important;
        line-height: 40px!important
    }
    .select2-selection--single {
        height: 40px!important;
    }
    .form-select {
        font-size: 1.2rem!important;
        height: 40px!important;
    }

}