@import url(https://fonts.googleapis.com/css2?family=Nunito&display=swap);
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    .style_item__fYmTR {
        background-color: var(--secondary);
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
          "thumbnailBox thumbnailBox thumbnailBox title        title        title       "
          "thumbnailBox thumbnailBox thumbnailBox description  description  description "
          "price        price        price        minusDphText minusDphText minusDphText";
        height: fit-content;
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        grid-gap: 10px;
        gap: 10px;
        justify-items: center;

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;
            font-size: .9rem;
            margin-right: auto;

            &:hover {
                color: var(--primary);
            }
        }

        .style_text__AfZX2 {
            grid-area: description;
            overflow: hidden;
            border: 0;
            height: 70px;
            line-height: 16px;

            span {
                font-size: 0.7rem;
                margin: 0;
                font-weight: normal;
            }
        }

        .style_price__oPVVw {
            grid-area: price;
            color: var(--text);
            font-weight: bold;
            font-size: 1rem;
        }

        .style_minusDphPrice__3TUS8 {
            grid-area: minusDphPrice;
            display: none;
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            margin-right: auto;
            color: var(--primary);
            font-size: .8rem;
        }
    }

    .style_adminItem__MaHeq {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
          "title        title        title        title        title        title        title       "
          "thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox"
          "infoBox      infoBox      infoBox      infoBox      infoBox      infoBox      infoBox     "
          "editButton   removeButton selledButton .            .            .            .           "
          "viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter"
          "btnTotal     .            btnDay       .            btnWeek      .            btnMonth    "
          "chart        chart        chart        chart        chart        chart        chart       ";
        width: 100%;
        padding: 10px 10px 0 10px;
        border-radius: 6px;
        height: fit-content;
        grid-gap: 5px;
        gap: 5px;

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;
            font-size: .8rem;

            &:hover {
                color: var(--primary);
            }
        }

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_infoBox__IFEqn {
            grid-area: infoBox;
            border: var(--text) solid 1px;
            font-size: .7rem;
            padding: 5px;

            legend {
                font-size: .8rem;
                margin-left: 5px;
            }

            p {
                font-size: .7rem;
            }

            .style_price__oPVVw {
                grid-area: price;
                color: var(--text);
                font-weight: bold;
                font-size: .7rem;
            }
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            color: var(--primary);
            font-size: .8rem;
        }

        .style_viewsCounter__vsYLb {
            grid-area: viewsCounter;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
            height: fit-content;
        }

        .style_active__v5yHp {
            color: var(--primary);
        }

        .style_btnTotal__3kOa7 {
            grid-area: btnTotal;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnDay__QaVGx {
            grid-area: btnDay;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnWeek__rGZRx {
            grid-area: btnWeek;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnMonth__aqqrF {
            grid-area: btnMonth;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_chart__ByWZG {
            grid-area: chart;
            width: 100%;
            height: 160px;
        }

        .style_editButton__tPhQX {
            grid-area: editButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_selledButton__BWdy9 {
            grid-area: selledButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButton__6nddx {
            grid-area: removeButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButtonVerifyContent__-0FOw {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 15vw;
            padding: 15px;
            height: fit-content;
            display: flex;
            flex-flow: column;
            align-items: center;
            gap: 10px;

            p {
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
                margin: 0;
            }

            div {
                display: flex;
                flex-flow: row;
                justify-content: space-evenly;
                width: 100%;

                button {
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding-inline: 15px;
                    padding-block: 5px;
                    letter-spacing: 1px;
                    height: fit-content;

                    &:hover {
                        color: var(--background);
                        border: 2px solid var(--background);
                        cursor: pointer;
                    }
                }
            }

            .style_yes__9QD\+s, .style_no__8l-Hy {
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;

                &:hover {
                    color: var(--background);
                    border: 2px solid var(--background);
                    cursor: pointer;
                }
            }
        }

        .style_removeButtonVerifyContentRemoving__\+xixH {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 12vw;
            padding: 15px;
            height: 12vh;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-top: 0;
                margin-bottom: 20px;
            }
        }
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_item__fYmTR {
        background-color: var(--secondary);
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
          "thumbnailBox thumbnailBox title       title        title        title       "
          "thumbnailBox thumbnailBox description description  description  description "
          "thumbnailBox thumbnailBox description description  description  description "
          "price        price        price       minusDphText minusDphText minusDphText";
        height: fit-content;
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        grid-gap: 10px;
        gap: 10px;
        justify-items: center;

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;
            font-size: 1rem;
            margin-right: auto;

            &:hover {
                color: var(--primary);
            }
        }

        .style_text__AfZX2 {
            grid-area: description;
            overflow: hidden;
            border: 0;
            height: 80px;
            line-height: 16px;

            span {
                font-size: 1rem;
                margin: 0;
                font-weight: normal;
            }
        }

        .style_price__oPVVw {
            grid-area: price;
            color: var(--text);
            font-weight: bold;
            font-size: 1rem;
        }

        .style_minusDphPrice__3TUS8 {
            grid-area: minusDphPrice;
            display: none;
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            margin-right: auto;
            color: var(--primary);
            font-size: .8rem;
        }
    }

    .style_adminItem__MaHeq {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-areas:
          "title        title        title        title        selledButton editButton   removeButton"
          "thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox"
          "infoBox      infoBox      infoBox      infoBox      infoBox      infoBox      infoBox     "
          ".            .            .            .            .            .            .           "
          "viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter viewsCounter"
          "btnTotal     .            btnDay       .            btnWeek      .            btnMonth    "
          "chart        chart        chart        chart        chart        chart        chart       ";
        width: 100%;
        padding: 10px 10px 0 10px;
        border-radius: 6px;
        height: fit-content;
        grid-gap: 5px;
        gap: 5px;

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;
            font-size: 1rem;

            &:hover {
                color: var(--primary);
            }
        }

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_infoBox__IFEqn {
            grid-area: infoBox;
            border: var(--text) solid 1px;
            font-size: .7rem;
            padding: 5px;

            legend {
                font-size: .8rem;
                margin-left: 5px;
            }

            p {
                font-size: .7rem;
            }

            .style_price__oPVVw {
                grid-area: price;
                color: var(--text);
                font-weight: bold;
                font-size: .7rem;
            }
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            color: var(--primary);
            font-size: .8rem;
        }

        .style_viewsCounter__vsYLb {
            grid-area: viewsCounter;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
            height: fit-content;
        }

        .style_active__v5yHp {
            color: var(--primary);
        }

        .style_btnTotal__3kOa7 {
            grid-area: btnTotal;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnDay__QaVGx {
            grid-area: btnDay;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnWeek__rGZRx {
            grid-area: btnWeek;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnMonth__aqqrF {
            grid-area: btnMonth;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_chart__ByWZG {
            grid-area: chart;
            width: 100%;
            height: 160px;
        }

        .style_editButton__tPhQX {
            grid-area: editButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_selledButton__BWdy9 {
            grid-area: selledButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButton__6nddx {
            grid-area: removeButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButtonVerifyContent__-0FOw {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 15vw;
            padding: 15px;
            height: fit-content;
            display: flex;
            flex-flow: column;
            align-items: center;
            gap: 10px;

            p {
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
                margin: 0;
            }

            div {
                display: flex;
                flex-flow: row;
                justify-content: space-evenly;
                width: 100%;

                button {
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding-inline: 15px;
                    padding-block: 5px;
                    letter-spacing: 1px;
                    height: fit-content;

                    &:hover {
                        color: var(--background);
                        border: 2px solid var(--background);
                        cursor: pointer;
                    }
                }
            }

            .style_yes__9QD\+s, .style_no__8l-Hy {
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;

                &:hover {
                    color: var(--background);
                    border: 2px solid var(--background);
                    cursor: pointer;
                }
            }
        }

        .style_removeButtonVerifyContentRemoving__\+xixH {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 12vw;
            padding: 15px;
            height: 12vh;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-top: 0;
                margin-bottom: 20px;
            }
        }
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_item__fYmTR {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
          "thumbnailBox thumbnailBox title       title       title        title       "
          "thumbnailBox thumbnailBox description description description  .           "
          "thumbnailBox thumbnailBox description description description  .           "
          "thumbnailBox thumbnailBox description description description  .           "
          "price        price        .           .           minusDphText minusDphText";
        height: fit-content;
        width: 100%;
        padding: 20px 20px 10px 20px;
        grid-gap: 10px;
        gap: 10px;
        justify-items: center;
        align-content: space-between;


        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_title__tfTZ1 {
            grid-area: title;
            margin-right: auto;
            padding-right: 20px;
            color: var(--text);
            cursor: pointer;
            height: 35px;

            &:hover {
                color: var(--primary);
            }
        }

        .style_text__AfZX2 {
            grid-area: description;
            overflow: hidden;
            border: 0;
            height: 80px;
            line-height: 16px;

            span {
                font-size: 1rem;
                margin: 0;
                font-weight: normal;
            }
        }

        .style_price__oPVVw {
            grid-area: price;
            color: var(--text);
            font-weight: bold;
            margin-inline: auto;
            white-space: nowrap;
            font-size: 1rem;
        }

        .style_minusDphPrice__3TUS8 {
            grid-area: minusDphPrice;
            margin-left: 20px;
            white-space: nowrap;
            margin-right: auto;
            color: #858585;
            display: none;
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            margin-right: auto;
            margin-left: 20px;
            color: var(--primary);
            font-size: .8rem;
        }
    }

    .style_adminItem__MaHeq {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        grid-template-areas:
          "title        title        title        title        title   title   title    title    selledButton editButton removeButton"
          "thumbnailBox thumbnailBox thumbnailBox infoBox      infoBox infoBox infoBox  infoBox  infoBox      infoBox    .           "
          "thumbnailBox thumbnailBox thumbnailBox infoBox      infoBox infoBox infoBox  infoBox  infoBox      infoBox    .           "
          "thumbnailBox thumbnailBox thumbnailBox infoBox      infoBox infoBox infoBox  infoBox  infoBox      infoBox    .           "
          "viewsCounter viewsCounter viewsCounter viewsCounter btnTotal btnDay  btnWeek btnMonth .            .          .           "
          "chart        chart        chart        chart        chart   chart   chart    chart    chart        chart      chart       ";
        width: 100%;
        padding: 10px 10px 0 10px;
        border-radius: 6px;
        /* height: 330px; */
        grid-gap: 10px;
        gap: 10px;

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_infoBox__IFEqn {
            grid-area: infoBox;
            border: var(--text) solid 1px;
            padding: 5px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "price        price       "
              "minusDphText minusDphText"
              "adder        adder       "
              "dateAdded    dateAdded   "
              "dateEdited   dateEdited  ";

            legend {
                margin-left: 10px;
                background-color: var(--secondary);
                padding-inline: 10px;
                font-weight: bold;
            }

            .style_price__oPVVw {
                /* grid-column: span 2; */
                grid-area: price;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_minusDphText__h1jrf {
                grid-area: minusDphText;
                color: var(--primary);
                font-size: .9rem;
            }

            .style_adder__BxRfW {
                grid-area: adder;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateAdded__aUkQF {
                grid-area: dateAdded;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateEdited__dXsIf {
                grid-area: dateEdited;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }
        }

        .style_viewsCounter__vsYLb {
            grid-area: viewsCounter;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
            height: fit-content;
        }

        .style_btnTotal__3kOa7 {
            grid-area: btnTotal;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnDay__QaVGx {
            grid-area: btnDay;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnWeek__rGZRx {
            grid-area: btnWeek;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnMonth__aqqrF {
            grid-area: btnMonth;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_active__v5yHp {
            color: var(--primary);
        }

        .style_chart__ByWZG {
            grid-area: chart;
            width: 100%;
            height: 150px;
        }

        .style_editButton__tPhQX {
            grid-area: editButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_selledButton__BWdy9 {
            grid-area: selledButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButton__6nddx {
            grid-area: removeButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButtonVerifyContent__-0FOw {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 350px;
            padding: 15px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
              "title title title title title title"
              ". cancel . accept accept .";
            grid-gap: 25px 10px;
            gap: 25px 10px;
            justify-items: center;

            .style_removeButtonVerifyContentTitle__Qo42R {
                grid-area: title;
                font-weight: bold;
            }

            .style_cancel__UgTUb {
                grid-area: cancel;
                color: var(--text);
                filter: brightness(65%);
                background: none;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }

            .style_accept__OGuWX {
                grid-area: accept;
                color: red;
                background: none;
                border: 2px solid red;
                border-radius: 6px;
                padding: 4px 12px;
                filter: brightness(80%);
                white-space: nowrap;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }
        }

        .style_removeButtonVerifyContentRemoving__\+xixH {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 300px;
            padding: 20px 15px;
            display: flex;
            flex-flow: column;
            align-items: center;
            row-gap: 20px;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
            }
        }
    }
}

  /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_item__fYmTR {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
          "thumbnailBox  thumbnailBox  thumbnailBox  thumbnailBox  thumbnailBox  thumbnailBox  "
          "title         title         title         title         title         title         "
          "price         price         price         .             .             .             "
          "minusDphPrice minusDphPrice minusDphPrice minusDphPrice minusDphPrice minusDphPrice "
          "minusDphText  minusDphText  minusDphText  minusDphText  minusDphText  minusDphText  ";
        height: 410px;
        width: 100%;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        padding-bottom: 20px;
        grid-gap: 20px;
        gap: 20px;
        justify-items: center;
        align-content: space-between;

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_title__tfTZ1 {
            grid-area: title;
            margin-right: auto;
            margin-left: 20px;
            padding-right: 20px;
            color: var(--text);
            cursor: pointer;
            height: 35px;

            &:hover {
                color: var(--primary);
            }
        }

        .style_text__AfZX2 {
            grid-area: description;
            display: none;
        }

        .style_price__oPVVw {
            grid-area: price;
            color: var(--text);
            font-weight: bold;
            margin-left: 20px;
            margin-right: auto;
            white-space: nowrap;
            font-size: 1rem;
        }

        .style_minusDphPrice__3TUS8 {
            grid-area: minusDphPrice;
            margin-left: 20px;
            white-space: nowrap;
            margin-right: auto;
            color: #858585
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            margin-right: auto;
            margin-left: 20px;
            color: var(--primary);
            font-size: .8rem;
        }
    }

    .style_adminItem__MaHeq {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        grid-template-areas:
          "title        title        title        title    title   title   title    title   title   title   title"
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox editButton    "
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox removeButton  "
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox selledButton  "
          "viewsCounter viewsCounter viewsCounter btnTotal btnDay  btnWeek btnMonth .       .       .       .             "
          "chart        chart        chart        chart    chart   chart   chart    chart   chart   chart   chart         ";
        width: 100%;
        padding: 10px 10px 0 10px;
        border-radius: 6px;
        /* height: 330px; */
        grid-gap: 10px;
        gap: 10px;

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_infoBox__IFEqn {
            grid-area: infoBox;
            border: var(--text) solid 1px;
            padding: 5px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "price dateAdded"
              "minusDphText ."
              "adder dateEdited";

            legend {
                margin-left: 10px;
                background-color: var(--secondary);
                padding-inline: 10px;
                font-weight: bold;
            }

            .style_price__oPVVw {
                /* grid-column: span 2; */
                grid-area: price;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_minusDphText__h1jrf {
                grid-area: minusDphText;
                color: var(--primary);
                font-size: .9rem;
            }

            .style_adder__BxRfW {
                grid-area: adder;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateAdded__aUkQF {
                grid-area: dateAdded;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateEdited__dXsIf {
                grid-area: dateEdited;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }
        }

        .style_viewsCounter__vsYLb {
            grid-area: viewsCounter;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
            height: fit-content;
        }

        .style_btnTotal__3kOa7 {
            grid-area: btnTotal;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnDay__QaVGx {
            grid-area: btnDay;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnWeek__rGZRx {
            grid-area: btnWeek;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnMonth__aqqrF {
            grid-area: btnMonth;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_active__v5yHp {
            color: var(--primary);
        }

        .style_chart__ByWZG {
            grid-area: chart;
            width: 100%;
            height: 150px;
        }

        .style_editButton__tPhQX {
            grid-area: editButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_selledButton__BWdy9 {
            grid-area: selledButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButton__6nddx {
            grid-area: removeButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButtonVerifyContent__-0FOw {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 350px;
            padding: 15px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
              "title title title title title title"
              ". cancel . accept accept .";
            grid-gap: 25px 10px;
            gap: 25px 10px;
            justify-items: center;

            .style_removeButtonVerifyContentTitle__Qo42R {
                grid-area: title;
                font-weight: bold;
            }

            .style_cancel__UgTUb {
                grid-area: cancel;
                color: var(--text);
                filter: brightness(65%);
                background: none;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }

            .style_accept__OGuWX {
                grid-area: accept;
                color: red;
                background: none;
                border: 2px solid red;
                border-radius: 6px;
                padding: 4px 12px;
                filter: brightness(80%);
                white-space: nowrap;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }
        }

        .style_removeButtonVerifyContentRemoving__\+xixH {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 300px;
            padding: 20px 15px;
            display: flex;
            flex-flow: column;
            align-items: center;
            row-gap: 20px;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
            }
        }
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .style_item__fYmTR {
        background-color: var(--secondary);
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
          "thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox thumbnailBox"
          "title        title        title        title        title        title       "
          "description  description  description  description  description  description "
          "price        price        price        price        price        price       "
          "minusDphText minusDphText minusDphText minusDphText minusDphText .           ";
        height: fit-content;
        width: 100%;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
        grid-gap: 5px;
        gap: 5px;
        align-content: space-between;
        justify-items: center;

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;
            padding-inline: 10px;
            height: 70px;
            overflow-y: hidden;
            margin-right: auto;

            &:hover {
                color: var(--primary);
            }
        }

        .style_text__AfZX2 {
            grid-area: description;
            overflow: hidden;
            border: 0;
            height: 90px;
            padding-inline: 10px;

            span {
                font-size: .7rem;
                margin: 0;
                font-weight: normal;
            }
        }

        .style_price__oPVVw {
            grid-area: price;
            color: var(--text);
            font-weight: bold;
            font-size: 1rem;
            margin-right: auto;
            padding-inline: 10px;
        }

        .style_minusDphPrice__3TUS8 {
            grid-area: minusDphPrice;
            display: none;
        }

        .style_minusDphText__h1jrf {
            grid-area: minusDphText;
            margin-right: auto;
            color: var(--primary);
            font-size: .8rem;
            padding-left: 10px;
            margin-bottom: 10px;
        }
    }

    .style_adminItem__MaHeq {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        grid-template-areas:
          "title        title        title        title    title   title   title    title   title   title   title       "
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox editButton  "
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox removeButton"
          "thumbnailBox thumbnailBox infoBox      infoBox  infoBox infoBox infoBox  infoBox infoBox infoBox selledButton"
          "viewsCounter viewsCounter viewsCounter btnTotal btnDay  btnWeek btnMonth .       .       .       .           "
          "chart        chart        chart        chart    chart   chart   chart    chart   chart   chart   chart       ";
        width: 100%;
        padding: 10px 10px 0 10px;
        border-radius: 6px;
        /* height: 330px; */
        grid-gap: 10px;
        gap: 10px;

        .style_title__tfTZ1 {
            grid-area: title;
            color: var(--text);
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_thumbnailBox__YK5u7 {
            grid-area: thumbnailBox;
            width: 100%;
            margin-block: auto;
            position: relative;

            .style_thumbnail__yfK8A {
                width: 100%;
            }

            .style_statusBox__hwCvG {
                position: absolute;
                right: 0px;
                top: 5px;
                display: flex;
                gap: 5px;
                flex-flow: column;
                align-items: flex-end;

                .style_newItem__3nASJ {
                    background-color: #becfaf;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #32630a;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_prepairingItem__H-UGy {
                    background-color: #edcae8;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #610000;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }

                .style_reservedItem__n-\+H5 {
                    background-color: #ffd2ba;
                    height: fit-content;
                    width: fit-content;
                    font-size: .8rem;
                    padding: 0 10px;
                    color: #bb5500;
                    box-shadow: #00000080 0px 2px 2px 0px;
                }
            }
        }

        .style_infoBox__IFEqn {
            grid-area: infoBox;
            border: var(--text) solid 1px;
            padding: 5px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "price dateAdded"
              "minusDphText ."
              "adder dateEdited";

            legend {
                margin-left: 10px;
                background-color: var(--secondary);
                padding-inline: 10px;
                font-weight: bold;
            }

            .style_price__oPVVw {
                /* grid-column: span 2; */
                grid-area: price;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_minusDphText__h1jrf {
                grid-area: minusDphText;
                color: var(--primary);
                font-size: .9rem;
            }

            .style_adder__BxRfW {
                grid-area: adder;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateAdded__aUkQF {
                grid-area: dateAdded;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }

            .style_dateEdited__dXsIf {
                grid-area: dateEdited;
                color: var(--text);
                font-size: .9rem;
                white-space: nowrap;
            }
        }

        .style_viewsCounter__vsYLb {
            grid-area: viewsCounter;
            font-size: 1rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
            height: fit-content;
        }

        .style_btnTotal__3kOa7 {
            grid-area: btnTotal;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnDay__QaVGx {
            grid-area: btnDay;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnWeek__rGZRx {
            grid-area: btnWeek;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_btnMonth__aqqrF {
            grid-area: btnMonth;
            color: var(--text);
            background: none;
            border-radius: 6px;
            font-weight: bold;
            letter-spacing: 1px;
            height: fit-content;
            white-space: nowrap;
            cursor: pointer;

            &:hover {
                color: var(--primary);
            }
        }

        .style_active__v5yHp {
            color: var(--primary);
        }

        .style_chart__ByWZG {
            grid-area: chart;
            width: 100%;
            height: 150px;
        }

        .style_editButton__tPhQX {
            grid-area: editButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_selledButton__BWdy9 {
            grid-area: selledButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButton__6nddx {
            grid-area: removeButton;
            background-color: var(--background);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }

            path {
                fill: var(--text);
            }
        }

        .style_removeButtonVerifyContent__-0FOw {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 350px;
            padding: 15px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
              "title title title title title title"
              ". cancel . accept accept .";
            grid-gap: 25px 10px;
            gap: 25px 10px;
            justify-items: center;

            .style_removeButtonVerifyContentTitle__Qo42R {
                grid-area: title;
                font-weight: bold;
            }

            .style_cancel__UgTUb {
                grid-area: cancel;
                color: var(--text);
                filter: brightness(65%);
                background: none;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }

            .style_accept__OGuWX {
                grid-area: accept;
                color: red;
                background: none;
                border: 2px solid red;
                border-radius: 6px;
                padding: 4px 12px;
                filter: brightness(80%);
                white-space: nowrap;
                cursor: pointer;

                &:hover {
                    filter: brightness(100%);
                }
            }
        }

        .style_removeButtonVerifyContentRemoving__\+xixH {
            background-color: var(--secondary);
            border-radius: 6px;
            width: 300px;
            padding: 20px 15px;
            display: flex;
            flex-flow: column;
            align-items: center;
            row-gap: 20px;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
            }
        }
    }
}
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    .style_headerBox__zye5T {
        background: var(--primary);
        height: 70px;
        display: grid;
        grid-template-areas:
          "backButton number1 number1 logo logo logo logo number2 number2 dropDownMenu";
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        justify-items: center;
        position: relative;
        padding-inline: 10px;
        width: 100%;

        .style_backButton__rAqw4 {
            grid-area: backButton;
            height: 16px;
            cursor: pointer;

            path {
                fill: #222831;
            }

            &:active {

                path {
                    fill: #EEEEEE;
                }
            }
        }

        .style_number1__-5826 {
            grid-area: number1;
            font-size: .6rem;
            color: #222831;
        }

        .style_logo__s-Vvc {
            grid-area: logo;
            display: flex;
            flex-flow: row;
            align-items: center;
            cursor: pointer;
            height: fit-content;
            gap: 5px;

            img {
                height: 25px;
            }

            p {
                color: #222831;
                font-size: 1.2rem;
                font-weight: bold;
                text-wrap: nowrap;
            }
        }

        .style_number2__F5MsM {
            grid-area: number2;
            font-size: .6rem;
            color: #222831;
        }

        .style_dropDownMenu__Qy7Xj {
            grid-area: dropDownMenu;

            .style_hamburger__ZdTeo {
                height: 16px;
                cursor: pointer;

                path {
                    fill: #222831;
                }

                &:active {

                    path {
                        fill: #EEEEEE;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="true"] {
                position: absolute;
                width: 200px;
                height: 165px;
                top: 70px;
                box-shadow: inset 0px 10px 10px 0 rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: .8rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="false"] {
                position: absolute;
                width: 200px;
                height: 115px;
                top: 70px;
                box-shadow: inset 0px 25px 10px -20px rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: .8rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            #style_dropDownActive__28rGI {
                transform: translateX(0%);
            }
        }
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_headerBox__zye5T {
        background: var(--primary);
        height: 70px;
        display: grid;
        grid-template-areas:
          "backButton number1 number1 logo logo logo logo number2 number2 dropDownMenu";
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: 1fr;
        align-items: center;
        justify-items: center;
        padding-inline: 10px;
        position: relative;
        width: 100%;

        .style_backButton__rAqw4 {
            grid-area: backButton;
            height: 18px;
            cursor: pointer;

            path {
                fill: #222831;
            }

            &:active {

                path {
                    fill: #EEEEEE;
                }
            }
        }

        .style_number1__-5826 {
            grid-area: number1;
            font-size: 1rem;
            color: #222831;
        }

        .style_logo__s-Vvc {
            grid-area: logo;
            display: flex;
            flex-flow: row;
            align-items: center;
            cursor: pointer;
            height: fit-content;
            gap: 5px;

            img {
                height: 35px;
            }

            p {
                color: #222831;
                font-size: 1.6rem;
                font-weight: bold;
                text-wrap: nowrap;
            }
        }

        .style_number2__F5MsM {
            grid-area: number2;
            font-size: 1rem;
            color: #222831;
        }

        .style_dropDownMenu__Qy7Xj {
            grid-area: dropDownMenu;

            .style_hamburger__ZdTeo {
                height: 18px;
                cursor: pointer;

                path {
                    fill: #222831;
                }

                &:active {

                    path {
                        fill: #EEEEEE;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="true"] {
                position: absolute;
                width: 220px;
                height: 165px;
                top: 70px;
                box-shadow: inset 0px 10px 10px 0 rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="false"] {
                position: absolute;
                width: 220px;
                height: 115px;
                top: 70px;
                box-shadow: inset 0px 25px 10px -20px rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            #style_dropDownActive__28rGI {
                transform: translateX(0%);
            }
        }
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_headerBox__zye5T {
        background: var(--primary);
        height: 10.35vh;
        min-height: 65px;
        display: grid;
        grid-template-areas:
          "backButton number1 number1 logo logo logo logo number2 number2 dropDownMenu";
        grid-template-columns: repeat(10, 1fr);
        align-items: center;
        justify-items: center;
        padding-inline: 10px;
        position: relative;
        width: 100%;

        .style_backButton__rAqw4 {
            grid-area: backButton;
            height: 20px;
            cursor: pointer;

            path {
                fill: #222831;
            }

            &:active {

                path {
                    fill: #EEEEEE;
                }
            }
        }

        .style_number1__-5826 {
            grid-area: number1;
            font-size: 1.6rem;
            color: #222831;
        }

        .style_logo__s-Vvc {
            grid-area: logo;
            display: flex;
            flex-flow: row;
            align-items: center;
            cursor: pointer;
            height: fit-content;
            gap: 10px;

            img {
                height: 45px;
            }

            p {
                color: #222831;
                font-size: 2rem;
                font-weight: bold;
                text-wrap: nowrap;
            }
        }

        .style_number2__F5MsM {
            grid-area: number2;
            font-size: 1.6rem;
            color: #222831;
        }

        .style_dropDownMenu__Qy7Xj {
            grid-area: dropDownMenu;

            .style_hamburger__ZdTeo {
                height: 20px;
                cursor: pointer;

                path {
                    fill: #222831;
                }

                &:active {

                    path {
                        fill: #EEEEEE;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="true"] {
                position: absolute;
                width: 250px;
                height: 165px;
                top: 10.35vh;
                box-shadow: inset 0px 10px 10px 0 rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="false"] {
                position: absolute;
                width: 250px;
                height: 115px;
                top: 10.35vh;
                box-shadow: inset 0px 25px 10px -20px rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            #style_dropDownActive__28rGI {
                transform: translateX(0%);
            }
        }
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_headerBox__zye5T {
        background: var(--primary);
        height: 10.35vh;
        min-height: 65px;
        display: grid;
        grid-template-areas:
          "backButton number1 number1 logo logo logo logo number2 number2 dropDownMenu";
        grid-template-columns: repeat(10, 1fr);
        align-items: center;
        justify-items: center;
        padding-inline: 10px;
        position: relative;
        width: 100%;

        .style_backButton__rAqw4 {
            grid-area: backButton;
            height: 24px;
            cursor: pointer;

            path {
                fill: #222831;
            }

            &:active {

                path {
                    fill: #EEEEEE;
                }
            }
        }

        .style_number1__-5826 {
            grid-area: number1;
            font-size: 1.8rem;
            color: #222831;
        }

        .style_logo__s-Vvc {
            grid-area: logo;
            display: flex;
            flex-flow: row;
            align-items: center;
            cursor: pointer;
            height: fit-content;
            gap: 10px;

            img {
                height: 50px;
            }

            p {
                color: #222831;
                font-size: 2.2rem;
                font-weight: bold;
                text-wrap: nowrap;
            }
        }

        .style_number2__F5MsM {
            grid-area: number2;
            font-size: 1.8rem;
            color: #222831;
        }

        .style_dropDownMenu__Qy7Xj {
            grid-area: dropDownMenu;

            .style_hamburger__ZdTeo {
                height: 24px;
                cursor: pointer;

                path {
                    fill: #222831;
                }

                &:active {

                    path {
                        fill: #EEEEEE;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="true"] {
                position: absolute;
                width: 300px;
                height: 165px;
                top: 10.35vh;
                box-shadow: inset 0px 10px 10px 0 rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="false"] {
                position: absolute;
                width: 300px;
                height: 115px;
                top: 10.35vh;
                box-shadow: inset 0px 25px 10px -20px rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            #style_dropDownActive__28rGI {
                transform: translateX(0%);
            }
        }
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .style_headerBox__zye5T {
        background: var(--primary);
        height: 10.35vh;
        min-height: 65px;
        display: grid;
        grid-template-areas:
          "backButton number1 number1 logo logo logo logo number2 number2 dropDownMenu";
        grid-template-columns: repeat(10, 1fr);
        align-items: center;
        justify-items: center;
        padding-inline: 10px;
        position: relative;
        width: 100%;

        .style_backButton__rAqw4 {
            grid-area: backButton;
            height: 26px;
            cursor: pointer;

            path {
                fill: #222831;
            }

            &:active {

                path {
                    fill: #EEEEEE;
                }
            }
        }

        .style_number1__-5826 {
            grid-area: number1;
            font-size: 2rem;
            color: #222831;
        }

        .style_logo__s-Vvc {
            grid-area: logo;
            display: flex;
            flex-flow: row;
            align-items: center;
            cursor: pointer;
            height: fit-content;
            gap: 10px;

            img {
                height: 55px;
            }

            p {
                color: #222831;
                font-size: 2.5rem;
                font-weight: bold;
                text-wrap: nowrap;
            }
        }

        .style_number2__F5MsM {
            grid-area: number2;
            font-size: 2rem;
            color: #222831;
        }

        .style_dropDownMenu__Qy7Xj {
            grid-area: dropDownMenu;

            .style_hamburger__ZdTeo {
                height: 26px;
                cursor: pointer;

                path {
                    fill: #222831;
                }

                &:active {

                    path {
                        fill: #EEEEEE;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="true"] {
                position: absolute;
                width: 300px;
                height: 165px;
                top: 10.35vh;
                box-shadow: inset 0px 10px 10px 0 rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            .style_dropDown__rKrMH[authenticated="false"] {
                position: absolute;
                width: 300px;
                height: 115px;
                top: 10.35vh;
                box-shadow: inset 0px 25px 10px -20px rgba(0, 0, 0, 0.3);
                right: 0;
                z-index: 2;
                transform: translateX(100%);
                transition: transform .5s;
                background-color: var(--primary);
                padding-top: 10px;

                button {
                    height: 50px;
                    background: none;
                    width: 100%;
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: var(--background);

                    &:hover {
                        background-color: #46b6b9;
                    }
                }
            }

            #style_dropDownActive__28rGI {
                transform: translateX(0%);
            }
        }
    }
}
/* Extra small devices (phones, less than 576px) */
@media (min-width: 320px) and (max-width: 575.98px) {

    body {
        min-width: 325px;
    }

    .style_page__ViQ7P {
        min-height: 100vh;
        margin-bottom: 50px;
    }

    .style_mainBox__p\+4GG[authenticated="false"] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "offerText          offerText          offerText          offerText          offerText         "
          "carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader     "
          "carLoan            carLoan            carLoan            carLoan            carLoan           "
          "searchHeader       searchHeader       smallSearch        smallSearch        smallSearch       "
          "filterHeader       filterHeader       smallFilter        smallFilter        smallFilter       "
          "advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 15px 15px 0 15px;
    }

    .style_mainBox__p\+4GG[authenticated="true"] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "offerText          offerText          offerText          offerText          offerText         "
          "carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader     "
          "carLoan            carLoan            carLoan            carLoan            carLoan           "
          "searchHeader       searchHeader       smallSearch        smallSearch        smallSearch       "
          "filterHeader       filterHeader       smallFilter        smallFilter        smallFilter       "
          "addNewButton       addNewButton       addNewButton       addNewButton       addNewButton      "
          "advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 15px 15px 0 15px;
    }

    .style_offerText__lBY1r {
        grid-area: offerText;
        margin-inline: auto;

        h2 {
            text-align: center;
        }

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            list-style-type: none;
            gap: 8px;
            align-items: center;
            margin-top: 8px;

            li {
                position: relative;
                text-align: center;

                p {
                    font-size: .8rem;
                }
            }
        }
    }

    .style_carLoanHeader__TWe6U {
        grid-area: carLoanHeader;
        height: 25px;
        width: 160px;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;
        justify-content: center;

        h2 {
            color: var(--background);
            font-weight: bold;
            font-size: .8rem;
        }
    }

    .style_carLoan__GwcTL {
        grid-area: carLoan;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 5px;
            list-style-type: none;
            gap: 15px;
        }
    }

    .style_searchHeader__CtSjt {
        grid-area: searchHeader;
        height: 28px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;
        justify-content: center;

        h2 {
            color: var(--background);
            font-weight: bold;
            font-size: .8rem;
        }
    }

    .style_search__TCBNw {
        display: none;
        grid-area: search;
        height: fit-content;
        width: 100%;
    }

    .style_smallSearch__MJVJy {
        grid-area: smallSearch;
        width: 100%;
        height: 100%;
        position: relative;

        input {
            border: 1px solid var(--primary);
            background: var(--background);
            border-radius: 6px;
            padding: 0 2px 0 2px;
            width: 100%;
            outline: 0;
            font-size: 0.8rem;
            height: 100%;
        }

        svg {
            position: absolute;
            height: 13px;
            width: 13px;
            right: 7px;
            top: 5px;

            path {
                fill: var(--text)
            }
        }
    }

    .style_filterHeader__uW8Pf {
        grid-area: filterHeader;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        border-radius: 5px;
        font-size: .8rem;
        height: 28px;
    }

    .style_filter__EKB7F {
        grid-area: filter;
        display: none;
    }

    .style_smallFilter__ThFeK {
        grid-area: smallFilter;
        width: 100%;
        height: 100%;
        background-color: var(--background);
        border: 1px solid var(--primary);
        border-radius: 5px;
        padding: 3px 8px 3px 8px;
        display: flex;
        align-items: center;
        position: relative;

        p {
            font-size: .9rem;
        }


        #style_smallFilterOpened__3CGyr {
            height: 152px;
        }

        .style_dropDownFilterMenu__Dg5K9 {
            background-color: var(--background);
            top: 27px;
            left: 0;
            width: 85%;
            position: absolute;
            display: flex;
            z-index: 1;
            flex-flow: column;
            height: 0;
            overflow: hidden;
            transition: height 0.5s;

            button {
                background: none;
                font-size: .9rem;
                text-align: left;
                margin: 0 0 4px 8px;
            }
        }

        svg {
            height: 13px;
            margin-left: auto;

            path {
                fill: var(--text);
            }
        }
    }

    .style_addNewButton__fWgm7 {
        grid-area: addNewButton;
        color: var(--text);
        background: var(--background);
        border: 1px solid var(--primary);
        border-radius: 5px;
        margin-left: auto;
        font-weight: bold;
        padding-inline: 10px;
        padding-block: 4px;
        letter-spacing: 1px;
        height: fit-content;
        cursor: pointer;
        width: 100%;

        &:hover {
            color: var(--text);
            border: 1px solid var(--text);
        }
    }

    .style_advertisementsList__a4JHN {
        grid-area: advertisementsList;
        width: 100%;
        grid-gap: 20px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .style_adminContentList__Y5Ujf {
        grid-area: advertisementsList;
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }

    /* Celý scroller */
    ::-webkit-scrollbar {
      width: 12px; /* Šírka vertikálneho scrollbar */
      height: 12px; /* Výška horizontálneho scrollbar */
    }

    /* Drážka (track) scrollbar */
    ::-webkit-scrollbar-track {
      background: #EEEEEE; /* Farba pozadia drážky */
    }

    /* Drážka (track) scrollbar pri hover */
    ::-webkit-scrollbar-track:hover {
      background: #393E46; /* Farba pozadia drážky pri hover */
    }

    /* Palec (thumb) scrollbar */
    ::-webkit-scrollbar-thumb {
      background: #393E46; /* Farba palca scrollbar */
    }

    /* Palec (thumb) scrollbar pri hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #6b7686; /* Farba palca pri hover */
    }

    /* Roh (corner) scrollbar */
    ::-webkit-scrollbar-corner {
      background: #f1f1f1; /* Farba pozadia rohu scrollbar */
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    body {
        min-width: 325px;
    }

    .style_page__ViQ7P {
        min-height: 100vh;
        margin-bottom: 50px;
    }

    .style_mainBox__p\+4GG[authenticated="false"] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "offerText          offerText          offerText          offerText          offerText"
          "carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader"
          "carLoan            carLoan            carLoan            carLoan            carLoan"
          "searchHeader       searchHeader       smallSearch        smallSearch        smallSearch"
          "filterHeader       filterHeader       smallFilter        smallFilter        smallFilter"
          "advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 15px 15px 0 15px;
    }

    .style_mainBox__p\+4GG[authenticated="true"] {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "offerText          offerText          offerText          offerText          offerText         "
          "carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader      carLoanHeader     "
          "carLoan            carLoan            carLoan            carLoan            carLoan           "
          "searchHeader       searchHeader       smallSearch        smallSearch        smallSearch       "
          "filterHeader       filterHeader       smallFilter        smallFilter        smallFilter       "
          "addNewButton       addNewButton       addNewButton       addNewButton       addNewButton      "
          "advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 15px 15px 0 15px;
    }

    .style_offerText__lBY1r {
        grid-area: offerText;
        margin-inline: auto;

        h2 {
            text-align: center;
        }

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            list-style-type: none;
            gap: 8px;
            align-items: center;
            margin-top: 8px;

            li {
                position: relative;
                text-align: center;

                p {
                    font-size: .8rem;
                }
            }
        }
    }

    .style_carLoanHeader__TWe6U {
        grid-area: carLoanHeader;
        height: 25px;
        width: 160px;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;
        justify-content: center;

        h2 {
            color: var(--background);
            font-weight: bold;
            font-size: .8rem;
        }
    }

    .style_carLoan__GwcTL {
        grid-area: carLoan;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 5px;
            list-style-type: none;
            gap: 15px;
        }
    }

    .style_searchHeader__CtSjt {
        grid-area: searchHeader;
        height: 28px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;
        justify-content: center;

        h2 {
            color: var(--background);
            font-weight: bold;
            font-size: .8rem;
        }
    }

    .style_search__TCBNw {
        display: none;
        grid-area: search;
        height: fit-content;
        width: 100%;
    }

    .style_smallSearch__MJVJy {
        grid-area: smallSearch;
        width: 100%;
        height: 100%;
        position: relative;

        input {
            border: 1px solid var(--primary);
            background: var(--background);
            border-radius: 6px;
            padding: 0 2px 0 2px;
            width: 100%;
            outline: 0;
            font-size: 0.8rem;
            height: 100%;
        }

        svg {
            position: absolute;
            height: 13px;
            width: 13px;
            right: 7px;
            top: 5px;

            path {
                fill: var(--text)
            }
        }
    }

    .style_filterHeader__uW8Pf {
        grid-area: filterHeader;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        border-radius: 5px;
        font-size: .8rem;
        height: 28px;
    }

    .style_filter__EKB7F {
        grid-area: filter;
        display: none;
    }

    .style_smallFilter__ThFeK {
        grid-area: smallFilter;
        width: 100%;
        height: 100%;
        background-color: var(--background);
        border: 1px solid var(--primary);
        border-radius: 5px;
        padding: 3px 8px 3px 8px;
        display: flex;
        align-items: center;
        position: relative;

        p {
            font-size: .9rem;
        }


        #style_smallFilterOpened__3CGyr {
            height: 152px;
        }

        .style_dropDownFilterMenu__Dg5K9 {
            background-color: var(--background);
            top: 27px;
            left: 0;
            width: 85%;
            position: absolute;
            display: flex;
            flex-flow: column;
            height: 0;
            overflow: hidden;
            transition: height 0.5s;

            button {
                background: none;
                font-size: .9rem;
                text-align: left;
                margin: 0 0 4px 8px;
            }
        }

        svg {
            height: 13px;
            margin-left: auto;

            path {
                fill: var(--text);
            }
        }
    }

    .style_addNewButton__fWgm7 {
        grid-area: addNewButton;
        color: var(--text);
        background: var(--background);
        border: 1px solid var(--primary);
        border-radius: 5px;
        margin-left: auto;
        font-weight: bold;
        padding-inline: 10px;
        padding-block: 4px;
        letter-spacing: 1px;
        height: fit-content;
        width: 100%;
        cursor: pointer;

        &:hover {
            color: var(--text);
            border: 1px solid var(--text);
        }
    }

    .style_advertisementsList__a4JHN {
        grid-area: advertisementsList;
        width: 100%;
        grid-gap: 20px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .style_adminContentList__Y5Ujf {
        grid-area: advertisementsList;
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }

    /* Celý scroller */
    ::-webkit-scrollbar {
      width: 12px; /* Šírka vertikálneho scrollbar */
      height: 12px; /* Výška horizontálneho scrollbar */
    }

    /* Drážka (track) scrollbar */
    ::-webkit-scrollbar-track {
      background: #EEEEEE; /* Farba pozadia drážky */
    }

    /* Drážka (track) scrollbar pri hover */
    ::-webkit-scrollbar-track:hover {
      background: #393E46; /* Farba pozadia drážky pri hover */
    }

    /* Palec (thumb) scrollbar */
    ::-webkit-scrollbar-thumb {
      background: #393E46; /* Farba palca scrollbar */
    }

    /* Palec (thumb) scrollbar pri hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #6b7686; /* Farba palca pri hover */
    }

    /* Roh (corner) scrollbar */
    ::-webkit-scrollbar-corner {
      background: #f1f1f1; /* Farba pozadia rohu scrollbar */
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__ViQ7P {
        min-height: 100vh;
        margin-bottom: 50px;
    }

    .style_mainBox__p\+4GG[authenticated="false"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto  auto 1fr;
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader  searchHeader  searchHeader  filterHeader       filterHeader       filterHeader       smallFilter        smallFilter        smallFilter        smallFilter        smallFilter        smallFilter       "
          "search        search        search        advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "offerText     offerText     offerText     advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoanHeader carLoanHeader carLoanHeader advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoan       carLoan       carLoan       advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: 95%;
    }

    .style_mainBox__p\+4GG[authenticated="true"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto  auto 1fr;
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader  searchHeader  searchHeader  filterHeader       filterHeader       filterHeader       smallFilter        smallFilter        smallFilter        smallFilter        addNewButton             addNewButton"
          "search        search        search        advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "offerText     offerText     offerText     advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoanHeader carLoanHeader carLoanHeader advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoan       carLoan       carLoan       advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: 95%;
    }

    .style_offerText__lBY1r {
        grid-area: offerText;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 12px;
            list-style-type: none;
            gap: 15px;

            li {
                position: relative;
            }

            li::before {
                content: "-";
                position: absolute;
                left: -11px; /* Position it to the left of the item */
            }
        }
    }

    .style_carLoanHeader__TWe6U {
        grid-area: carLoanHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_carLoan__GwcTL {
        grid-area: carLoan;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 5px;
            list-style-type: none;
            gap: 15px;
        }
    }

    .style_searchHeader__CtSjt {
        grid-area: searchHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_search__TCBNw {
        grid-area: search;
        height: fit-content;
        width: 100%;
    }

    .style_smallSearch__MJVJy {
        grid-area: smallSearch;
        display: none;
        height: fit-content;
        width: 100%;
    }

    .style_filterHeader__uW8Pf {
        grid-area: filterHeader;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        border-radius: 5px;
        font-size: 1rem;
        height: 34px;
        width: 100%;
    }

    .style_filter__EKB7F {
        grid-area: filter;
        display: none;
    }

    .style_smallFilter__ThFeK {
        grid-area: smallFilter;
        width: 100%;
        height: 100%;
        background-color: var(--background);
        border: 1px solid var(--primary);
        border-radius: 5px;
        padding: 5px 8px 5px 8px;
        display: flex;
        align-items: center;
        position: relative;

        p {
            font-size: .9rem;
        }


        #style_smallFilterOpened__3CGyr {
            height: 152px;
        }

        .style_dropDownFilterMenu__Dg5K9 {
            background-color: var(--background);
            top: 33px;
            left: 0;
            width: 85%;
            position: absolute;
            display: flex;
            flex-flow: column;
            height: 0;
            overflow: hidden;
            transition: height 0.5s;

            button {
                background: none;
                font-size: .9rem;
                text-align: left;
                margin: 0 0 4px 8px;
            }
        }

        svg {
            height: 13px;
            margin-left: auto;

            path {
                fill: var(--text);
            }
        }
    }

    .style_addNewButton__fWgm7 {
        grid-area: addNewButton;
        color: var(--text);
        background: var(--background);
        border: 2px solid var(--primary);
        border-radius: 5px;
        font-weight: bold;
        height: 100%;
        width: 100%;
        letter-spacing: 1px;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
            color: var(--text);
            border: 2px solid var(--text);
        }
    }

    .style_advertisementsList__a4JHN {
        grid-area: advertisementsList;
        width: 100%;
        gap: 35px;
        display: flex;
        flex-flow: column;
    }

    .style_adminContentList__Y5Ujf {
        grid-area: advertisementsList;
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }

    /* Celý scroller */
    ::-webkit-scrollbar {
      width: 12px; /* Šírka vertikálneho scrollbar */
      height: 12px; /* Výška horizontálneho scrollbar */
    }

    /* Drážka (track) scrollbar */
    ::-webkit-scrollbar-track {
      background: #EEEEEE; /* Farba pozadia drážky */
    }

    /* Drážka (track) scrollbar pri hover */
    ::-webkit-scrollbar-track:hover {
      background: #393E46; /* Farba pozadia drážky pri hover */
    }

    /* Palec (thumb) scrollbar */
    ::-webkit-scrollbar-thumb {
      background: #393E46; /* Farba palca scrollbar */
    }

    /* Palec (thumb) scrollbar pri hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #6b7686; /* Farba palca pri hover */
    }

    /* Roh (corner) scrollbar */
    ::-webkit-scrollbar-corner {
      background: #f1f1f1; /* Farba pozadia rohu scrollbar */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__ViQ7P {
        min-height: 100vh;
        margin-bottom: 50px;
    }

    .style_mainBox__p\+4GG[authenticated="false"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto  auto 1fr;
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader  searchHeader  filter             filter             filter             filter             filter             filter             filter             filter             filter             filter"
          "search        search        advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "offerText     offerText     advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoanHeader carLoanHeader advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoan       carLoan       advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: clamp(955px, 95%, 1200px);
    }

    .style_mainBox__p\+4GG[authenticated="true"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto auto  auto 1fr;
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader  searchHeader  filter             filter             filter             filter             filter             filter             filter             filter             filter             addNewButton"
          "search        search        advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "offerText     offerText     advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoanHeader carLoanHeader advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList"
          "carLoan       carLoan       advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: clamp(955px, 95%, 1200px);
    }

    .style_offerText__lBY1r {
        grid-area: offerText;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 12px;
            list-style-type: none;
            gap: 15px;

            li {
                position: relative;
            }

            li::before {
                content: "-";
                position: absolute;
                left: -11px; /* Position it to the left of the item */
            }
        }
    }

    .style_carLoanHeader__TWe6U {
        grid-area: carLoanHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_carLoan__GwcTL {
        grid-area: carLoan;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 5px;
            list-style-type: none;
            gap: 15px;
        }
    }

    .style_searchHeader__CtSjt {
        grid-area: searchHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_search__TCBNw {
        grid-area: search;
        height: fit-content;
        width: 100%;
    }

    .style_smallSearch__MJVJy {
        grid-area: smallSearch;
        display: none;
        height: fit-content;
        width: 100%;
    }

    .style_filterHeader__uW8Pf {
        grid-area: filterHeader;
        background-color: var(--primary);
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--background);
        border-radius: 5px;
        font-size: .8rem;
        height: 25px;
    }

    .style_filter__EKB7F {
        grid-area: filter;
        background-color: var(--primary);
        display: flex;
        flex-flow: row;
        border-radius: 5px;
        padding-inline: 2%;
        align-items: center;
        height: 34px;
        gap: 5px;
        width: 100%;

        .style_selected__zNxai {
            background-color: var(--background);

            p {
                color: var(--text);
            }

            svg {
                background-color: var(--background);

                path {
                    fill: var(--text);
                }
            }
        }

        button {
            background-color: var(--primary);
            padding: 1px 1% 7px 1%;
            margin-top: 4px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
            flex-flow: row;
            height: 30px;
            align-items: center;
            gap: 5px;
            cursor: pointer;

            &:hover {
                filter: brightness(85%);
            }

            p {
                color: var(--background);
                font-weight: bold;
                white-space: nowrap;
                font-size: .88rem;
            }

            svg {
                height: 18px;
                width: 18px;

                path {
                    fill: var(--background)
                }
            }
        }
    }

    .style_smallFilter__ThFeK {
        display: none;
    }

    .style_addNewButton__fWgm7 {
        grid-area: addNewButton;
        color: var(--text);
        background: var(--background);
        border: 2px solid var(--primary);
        border-radius: 5px;
        font-weight: bold;
        height: 100%;
        width: 100%;
        letter-spacing: 1px;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
            color: var(--text);
            border: 2px solid var(--text);
        }
    }

    .style_advertisementsList__a4JHN {
        grid-area: advertisementsList;
        width: 100%;
        grid-gap: 35px;
        gap: 35px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .style_adminContentList__Y5Ujf {
        grid-area: advertisementsList;
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }

    /* Celý scroller */
    ::-webkit-scrollbar {
      width: 12px; /* Šírka vertikálneho scrollbar */
      height: 12px; /* Výška horizontálneho scrollbar */
    }

    /* Drážka (track) scrollbar */
    ::-webkit-scrollbar-track {
      background: #EEEEEE; /* Farba pozadia drážky */
    }

    /* Drážka (track) scrollbar pri hover */
    ::-webkit-scrollbar-track:hover {
      background: #393E46; /* Farba pozadia drážky pri hover */
    }

    /* Palec (thumb) scrollbar */
    ::-webkit-scrollbar-thumb {
      background: #393E46; /* Farba palca scrollbar */
    }

    /* Palec (thumb) scrollbar pri hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #6b7686; /* Farba palca pri hover */
    }

    /* Roh (corner) scrollbar */
    ::-webkit-scrollbar-corner {
      background: #f1f1f1; /* Farba pozadia rohu scrollbar */
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .style_page__ViQ7P {
        min-height: 100vh;
        margin-bottom: 50px;
    }

    .style_mainBox__p\+4GG[authenticated="false"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader searchHeader filter filter filter filter filter filter filter filter carLoanHeader carLoanHeader"
          "search search advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan"
          "offerText offerText advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan"
          ". . advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: clamp(1150px, 95%, 1800px);
    }

    .style_mainBox__p\+4GG[authenticated="true"] {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        gap: 20px;
        grid-template-areas:
          "searchHeader searchHeader filter filter filter filter filter filter filter addNewButton carLoanHeader carLoanHeader"
          "search search advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan"
          "offerText offerText advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan"
          ". . advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList advertisementsList carLoan carLoan";
        margin: 60px auto 0 auto;
        justify-items: center;
        width: clamp(1150px, 95%, 1800px);
    }

    .style_offerText__lBY1r {
        grid-area: offerText;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 12px;
            list-style-type: none;
            gap: 15px;

            li {
                position: relative;
            }

            li::before {
                content: "-";
                position: absolute;
                left: -11px; /* Position it to the left of the item */
            }
        }
    }

    .style_carLoanHeader__TWe6U {
        grid-area: carLoanHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_carLoan__GwcTL {
        grid-area: carLoan;

        ul {
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            padding: 5px 0 0 5px;
            list-style-type: none;
            gap: 15px;
        }
    }

    .style_searchHeader__CtSjt {
        grid-area: searchHeader;
        height: 34px;
        width: 100%;
        border-radius: 5px;
        background-color: var(--primary);
        display: flex;
        align-items: center;
        padding-inline: 1.5vw;

        h2 {
            color: var(--background);
            font-weight: bold;
        }
    }

    .style_search__TCBNw {
        grid-area: search;
        height: fit-content;
        width: 100%;
    }

    .style_smallSearch__MJVJy {
        grid-area: smallSearch;
        display: none;
        height: fit-content;
        width: 100%;
    }

    .style_filterHeader__uW8Pf {
        grid-area: filterHeader;
        background-color: var(--primary);
        display: none;
        align-items: center;
        justify-content: center;
        color: var(--background);
        border-radius: 5px;
        font-size: .8rem;
        height: 25px;
    }

    .style_filter__EKB7F {
        grid-area: filter;
        background-color: var(--primary);
        display: flex;
        flex-flow: row;
        border-radius: 5px;
        padding-inline: 2%;
        align-items: center;
        height: 34px;
        gap: 5px;
        width: 100%;

        .style_selected__zNxai {
            background-color: var(--background);

            p {
                color: var(--text);
            }

            svg {
                background-color: var(--background);

                path {
                    fill: var(--text);
                }
            }
        }

        button {
            background-color: var(--primary);
            padding: 1px 1% 7px 1%;
            margin-top: 4px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: flex;
            flex-flow: row;
            height: 30px;
            align-items: center;
            gap: 5px;
            cursor: pointer;

            &:hover {
                filter: brightness(85%);
            }

            p {
                color: var(--background);
                font-weight: bold;
                white-space: nowrap;
                font-size: .88rem;
            }

            svg {
                height: 18px;
                width: 18px;

                path {
                    fill: var(--background)
                }
            }
        }
    }

    .style_smallFilter__ThFeK {
        display: none;
    }

    .style_addNewButton__fWgm7 {
        grid-area: addNewButton;
        color: var(--text);
        background: var(--background);
        border: 2px solid var(--primary);
        border-radius: 5px;
        font-weight: bold;
        height: 100%;
        width: 100%;
        letter-spacing: 1px;
        white-space: nowrap;
        cursor: pointer;

        &:hover {
            color: var(--text);
            border: 2px solid var(--text);
        }
    }

    .style_advertisementsList__a4JHN {
        grid-area: advertisementsList;
        width: 100%;
        grid-gap: 20px;
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .style_adminContentList__Y5Ujf {
        grid-area: advertisementsList;
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
    }

    /* Celý scroller */
    ::-webkit-scrollbar {
      width: 12px; /* Šírka vertikálneho scrollbar */
      height: 12px; /* Výška horizontálneho scrollbar */
    }

    /* Drážka (track) scrollbar */
    ::-webkit-scrollbar-track {
      background: #EEEEEE; /* Farba pozadia drážky */
    }

    /* Drážka (track) scrollbar pri hover */
    ::-webkit-scrollbar-track:hover {
      background: #393E46; /* Farba pozadia drážky pri hover */
    }

    /* Palec (thumb) scrollbar */
    ::-webkit-scrollbar-thumb {
      background: #393E46; /* Farba palca scrollbar */
    }

    /* Palec (thumb) scrollbar pri hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #6b7686; /* Farba palca pri hover */
    }

    /* Roh (corner) scrollbar */
    ::-webkit-scrollbar-corner {
      background: #f1f1f1; /* Farba pozadia rohu scrollbar */
    }
}
.style_imgList__U0LRr {
    grid-area: imgList;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 5px;
    column-gap: 5px;
    margin-top: 10px;
    height: fit-content;

    .style_imgBox__FxU9R {
        position: relative;
        cursor: grab;
        touch-action: none;

        .style_img__lkfQ0 {
            width: 100%;
        }

        .style_removeImgBtn__qYaus {
            position: absolute;
            right: 0px;
            background: red;
            color: var(--text);
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: .9rem;
            z-index: 2;
        }
    }
}
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    .style_page__oC1iD {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__QMXhg {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__EN2KA {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__G44OI {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__lzd02 {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__YiPbi {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__xmdPx {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__4Q2yP {
                display: flex;
                flex-flow: row;

                .style_title__9MwZB {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__pS6G6 {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__78ody {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__T\+KLD {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__Zp3Wt {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__T7q4V {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title              saveBtn            saveBtn            saveBtn           "
              "titleInput         titleInput         titleInput         titleInput         titleInput         titleInput         titleInput        "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput        "
              "manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput"
              "milageBox          milageBox          milageBox          milageBox          milageBox          milageBox          milageBox         "
              "priceBox           priceBox           priceBox           priceBox           priceBox           priceBox           priceBox          "
              "dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable      "
              "featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn        "
              "btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup         "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput  ";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__KVZ7I {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__h05cq {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__CIvE5 {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-column-gap: 10px;
                column-gap: 10px;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput removeAllImgsBtn"
                  "imgList  imgList         ";

                .style_inputBtn__tjPTj {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__oe-KT {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__H6j6u {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_line__8mnxz {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__HOfqo {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__8GINu {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__rKT2X {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__7Zr2k {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__FKael {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__pw-df {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__M3ZMl {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__px4ig {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__9m6Vq {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__iUiJK {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__m6qGv {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__8uqi4 {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__ZNqrl {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_page__oC1iD {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__QMXhg {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__EN2KA {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__G44OI {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__lzd02 {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__YiPbi {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__xmdPx {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__4Q2yP {
                display: flex;
                flex-flow: row;

                .style_title__9MwZB {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__pS6G6 {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__78ody {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__T\+KLD {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__Zp3Wt {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__T7q4V {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title              saveBtn            saveBtn            saveBtn           "
              "titleInput         titleInput         titleInput         titleInput         titleInput         titleInput         titleInput        "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput        "
              "manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput"
              "milageBox          milageBox          milageBox          milageBox          milageBox          milageBox          milageBox         "
              "priceBox           priceBox           priceBox           priceBox           priceBox           priceBox           priceBox          "
              "dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable      "
              "featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn        "
              "btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup         "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput  ";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__KVZ7I {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__h05cq {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__CIvE5 {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__tjPTj {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__oe-KT {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__H6j6u {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__0m7Pz {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__MQkKh {
                        position: relative;
                        cursor: grab;

                        .style_img__WVTNg {
                            width: 100%;
                        }

                        .style_removeImgBtn__FRZw1 {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__8mnxz {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__HOfqo {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__8GINu {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__rKT2X {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__7Zr2k {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__FKael {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__pw-df {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__M3ZMl {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__px4ig {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__9m6Vq {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__iUiJK {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__m6qGv {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__8uqi4 {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__ZNqrl {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__oC1iD {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__QMXhg {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__EN2KA {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__G44OI {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__lzd02 {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__YiPbi {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__xmdPx {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__4Q2yP {
                display: flex;
                flex-flow: row;

                .style_title__9MwZB {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__pS6G6 {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__78ody {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__T\+KLD {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__Zp3Wt {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__T7q4V {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title            saveBtn            saveBtn         "
              "titleInput         titleInput         titleInput         titleInput       .                  .               "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "phoneInput         phoneInput         phoneInput         featureBtn       featureBtn         featureBtn      "
              "manufactureYoInput manufactureYoInput manufactureYoInput featureBtn       featureBtn         featureBtn      "
              "milageBox          milageBox          milageBox          btnsGroup        btnsGroup          btnsGroup       "
              "priceBox           priceBox           priceBox           btnsGroup        btnsGroup          btnsGroup       "
              "dphRemovable       dphRemovable       dphRemovable       .                .                  .               "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput descriptionInput   descriptionInput";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__KVZ7I {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__h05cq {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__CIvE5 {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__tjPTj {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__oe-KT {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__H6j6u {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__0m7Pz {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__MQkKh {
                        position: relative;
                        cursor: grab;

                        .style_img__WVTNg {
                            width: 100%;
                        }

                        .style_removeImgBtn__FRZw1 {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__8mnxz {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__HOfqo {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__8GINu {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__rKT2X {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__7Zr2k {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__FKael {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__pw-df {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__M3ZMl {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__px4ig {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__9m6Vq {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__iUiJK {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__m6qGv {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__8uqi4 {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__ZNqrl {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__oC1iD {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__QMXhg {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__EN2KA {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__G44OI {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__lzd02 {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__YiPbi {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__xmdPx {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__4Q2yP {
                display: flex;
                flex-flow: row;

                .style_title__9MwZB {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__pS6G6 {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__78ody {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__T\+KLD {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__Zp3Wt {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__T7q4V {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: 1fr 1fr 1fr 1fr auto 1fr 1fr;
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title            title            title            title            title              saveBtn            saveBtn            "
              "titleInput       titleInput       titleInput       titleInput       titleInput         titleInput         titleInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               phoneInput         phoneInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               manufactureYoInput manufactureYoInput "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               milageBox          milageBox          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               priceBox           priceBox           "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               dphRemovable       dphRemovable       "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               featureBtn         featureBtn         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               btnsGroup          btnsGroup          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               .                  .                  "
              "descriptionInput descriptionInput descriptionInput descriptionInput descriptionInput   descriptionInput   descriptionInput   ";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__KVZ7I {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__h05cq {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__CIvE5 {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__tjPTj {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__oe-KT {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__H6j6u {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__0m7Pz {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__MQkKh {
                        position: relative;
                        cursor: grab;

                        .style_img__WVTNg {
                            width: 100%;
                        }

                        .style_removeImgBtn__FRZw1 {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__8mnxz {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
            }

            .style_phoneInput__HOfqo {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__8GINu {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__rKT2X {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__7Zr2k {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__FKael {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__pw-df {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__M3ZMl {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;

                .style_dphRemovableBtn__px4ig {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__9m6Vq {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__iUiJK {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__m6qGv {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__8uqi4 {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__ZNqrl {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .style_page__oC1iD {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__QMXhg {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__EN2KA {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__G44OI {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__lzd02 {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__YiPbi {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__xmdPx {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__4Q2yP {
                display: flex;
                flex-flow: row;

                .style_title__9MwZB {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__pS6G6 {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__78ody {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__T\+KLD {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__Zp3Wt {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__T7q4V {
            width: 100vw;
            max-width: 1150px;
            min-width: 880px;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 50px;
            grid-template-columns: 1fr 1fr 1fr 1fr auto 1fr 1fr;
            grid-gap: 20px 60px;
            gap: 20px 60px;
            border-radius: 5px;
            grid-template-areas:
              "title            title            title            title            title              saveBtn            saveBtn            "
              "titleInput       titleInput       titleInput       titleInput       titleInput         titleInput         titleInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               phoneInput         phoneInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               manufactureYoInput manufactureYoInput "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               milageBox          milageBox          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               priceBox           priceBox           "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               dphRemovable       dphRemovable       "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               featureBtn         featureBtn         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               btnsGroup          btnsGroup          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               .                  .                  "
              "descriptionInput descriptionInput descriptionInput descriptionInput descriptionInput   descriptionInput   descriptionInput   ";

            .style_title__9MwZB {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__KVZ7I {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__h05cq {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__CIvE5 {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-row-gap: 10px;
                row-gap: 10px;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__tjPTj {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__oe-KT {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__H6j6u {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__0m7Pz {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__MQkKh {
                        position: relative;
                        cursor: grab;

                        .style_img__WVTNg {
                            width: 100%;
                        }

                        .style_removeImgBtn__FRZw1 {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__8mnxz {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
            }

            .style_phoneInput__HOfqo {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__8GINu {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__rKT2X {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__7Zr2k {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__FKael {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__pw-df {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__3PtGQ {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__M3ZMl {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;

                .style_dphRemovableBtn__px4ig {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__9m6Vq {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__iUiJK {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__m6qGv {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__8uqi4 {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__ZNqrl {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}
/* Extra small devices */
@media (max-width: 575.98px) {

    .style_notSeen__PLFwr {
        border: 2px solid var(--primary) !important;
    }

    .style_opened__KvSbc {
        height: fit-content !important;
    }

    .style_message__yHYEh {
        background: var(--secondary);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 30px 30px 30px;
        grid-template-areas:
          "date         date         fullName    fullName    showMsgBtn  openLinkBtn deleteMsgBtn"
          "email        email        email       .           .           .           .           "
          "mobile       mobile       mobile      .           .           .           .           "
          "messageTitle messageTitle .           .           .           .           .           "
          "messageText  messageText  messageText messageText messageText messageText messageText ";
        width: 100%;
        padding: 10px;
        grid-row-gap: 13px;
        row-gap: 13px;
        border-radius: 5px;
        height: 46px;
        border: 0;
        overflow-y: hidden;
        margin-bottom: 15px;

        .style_date__8DXM9 {
            grid-area: date;
            font-size: .8rem;
        }

        .style_fullName__z0mLE {
            grid-area: fullName;
            margin-right: auto;
            font-size: .8rem;
        }

        .style_email__2EzLM {
            grid-area: email;
            font-size: .8rem;
        }

        .style_mobile__6rl2M {
            grid-area: mobile;
            font-size: .8rem;
        }

        .style_showMsgBtn__pXwtg {
            grid-area: showMsgBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 24px;
            width: 24px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_openLinkBtn__BN7GN {
            grid-area: openLinkBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 24px;
            width: 24px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            margin-left: auto;
            flex-flow: column;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_deleteMsgBtn__28osT {
            grid-area: deleteMsgBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 24px;
            width: 24px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            margin-left: auto;
            flex-flow: column;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_messageTitle__FAI\+I {
            grid-area: messageTitle;
            font-size: .8rem;
        }

        .style_messageText__y38h0 {
            grid-area: messageText;
            font-size: .8rem;
        }
    }
}

/* Small devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_notSeen__PLFwr {
        border: 2px solid var(--primary) !important;
    }

    .style_opened__KvSbc {
        height: fit-content !important;
    }

    .style_message__yHYEh {
        background: var(--secondary);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 45px 45px 45px;
        grid-template-areas:
          "date         fullName    fullName    showMsgBtn  openLinkBtn deleteMsgBtn"
          "email        email       .           .           .           .           "
          "mobile       mobile      .           .           .           .           "
          "messageTitle .           .           .           .           .           "
          "messageText  messageText messageText messageText messageText messageText ";
        width: 100%;
        padding: 13px;
        grid-row-gap: 13px;
        row-gap: 13px;
        border-radius: 5px;
        height: 54px;
        border: 0;
        overflow-y: hidden;
        margin-bottom: 15px;

        .style_date__8DXM9 {
            grid-area: date;
        }

        .style_fullName__z0mLE {
            grid-area: fullName;
            margin-inline: auto;
        }

        .style_email__2EzLM {
            grid-area: email;
        }

        .style_mobile__6rl2M {
            grid-area: mobile;
        }

        .style_showMsgBtn__pXwtg {
            grid-area: showMsgBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_openLinkBtn__BN7GN {
            grid-area: openLinkBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            margin-left: auto;
            flex-flow: column;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_deleteMsgBtn__28osT {
            grid-area: deleteMsgBtn;
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            margin-left: auto;
            flex-flow: column;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_messageTitle__FAI\+I {
            grid-area: messageTitle;
        }

        .style_messageText__y38h0 {
            grid-area: messageText;
        }
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_notSeen__PLFwr {
        border: 2px solid var(--primary) !important;
    }

    .style_opened__KvSbc {
        height: fit-content !important;
    }

    .style_message__yHYEh {
        background: var(--secondary);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 45px 45px 45px;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
          "date         fullName    email       showMsgBtn  openLinkBtn deleteMsgBtn"
          ".            .           mobile      .           .           .           "
          "messageTitle .           .           .           .           .           "
          "messageText  messageText messageText messageText messageText messageText ";
        width: 100%;
        padding: 13px;
        border-radius: 5px;
        height: 75px;
        border: 0;
        overflow-y: hidden;
        margin-bottom: 15px;

        .style_date__8DXM9 {
            grid-area: date;
        }

        .style_fullName__z0mLE {
            grid-area: fullName;
        }

        .style_email__2EzLM {
            grid-area: email;
        }

        .style_mobile__6rl2M {
            grid-area: mobile;
        }

        .style_showMsgBtn__pXwtg {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_openLinkBtn__BN7GN {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_deleteMsgBtn__28osT {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_messageTitle__FAI\+I {
            grid-area: messageTitle;
            margin-top: 10px;
        }

        .style_messageText__y38h0 {
            grid-area: messageText;
        }
    }
}

/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_notSeen__PLFwr {
        border: 2px solid var(--primary) !important;
    }

    .style_opened__KvSbc {
        height: fit-content !important;
    }

    .style_message__yHYEh {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px 45px;
        grid-template-rows: auto auto 1fr;
        grid-row-gap: 15px;
        row-gap: 15px;
        padding: 13px;
        border-radius: 5px;
        height: 54px;
        border: 0;
        overflow-y: hidden;
        margin-bottom: 15px;

        .style_showMsgBtn__pXwtg {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_openLinkBtn__BN7GN {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_deleteMsgBtn__28osT {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }
    }
}

/* Extra Large devices */
@media (min-width: 1200px) {

    .style_notSeen__PLFwr {
        border: 2px solid var(--primary) !important;
    }

    .style_opened__KvSbc {
        height: fit-content !important;
    }

    .style_message__yHYEh {
        background-color: var(--secondary);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px 45px;
        grid-template-rows: auto auto 1fr;
        grid-row-gap: 15px;
        row-gap: 15px;
        padding: 13px;
        border-radius: 5px;
        height: 54px;
        border: 0;
        overflow-y: hidden;
        margin-bottom: 15px;

        .style_showMsgBtn__pXwtg {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_openLinkBtn__BN7GN {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }

        .style_deleteMsgBtn__28osT {
            background-color: var(--secondary);
            border: 2px solid var(--primary);
            height: 28px;
            width: 28px;
            border-radius: 4px;
            padding: 5px;
            display: flex;
            flex-flow: column;
            margin-left: auto;
            cursor: pointer;
            &:hover {
                filter: brightness(85%);
            }

            path {
                fill: var(--text);
            }
        }
    }
}
/* Extra small devices */
@media (max-width: 575.98px) {

    .style_page__H3pIv {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 89.65vh;
        padding-top: 70px;
        width: 100%;

        .style_main__m9mN8 {
            width: 100%;
            padding: 20px;
            display: grid;
            grid-template-areas:
              "header     "
              "messageList";

            .style_header__2Fjfw {
                grid-area: header;
                background-color: var(--primary);
                border-radius: 5px;
                margin-bottom: 15px;
                padding-inline: 10px;
                height: 34px;
                display: grid;
                align-items: center;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr 1fr 30px 30px 30px;
                grid-template-areas:
                  "date date sender sender . . .";

                .style_date__Pa0yL {
                    grid-area: date;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                    font-size: .8rem;
                    white-space: nowrap;
                }

                .style_sender__Xfarr {
                    grid-area: sender;
                    color: var(--background);
                    font-size: .8rem;
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_contact__jnE\+z {
                    display: none;
                }
            }

            .style_messageList__kCFPA {
                grid-area: messageList;
                display: flex;
                flex-flow: column;
            }
        }
    }
}

/* Small devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_page__H3pIv {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 89.65vh;
        padding-top: 70px;
        width: 100%;

        .style_main__m9mN8 {
            width: 100%;
            padding: 20px;
            display: grid;
            grid-template-areas:
              "header     "
              "messageList";

            .style_header__2Fjfw {
                grid-area: header;
                background-color: var(--primary);
                border-radius: 5px;
                margin-bottom: 15px;
                padding-inline: 15px;
                height: 34px;
                display: grid;
                align-items: center;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr 45px 45px 45px;
                grid-template-areas:
                  "date sender sender . . .";

                .style_date__Pa0yL {
                    grid-area: date;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                    white-space: nowrap;
                }

                .style_sender__Xfarr {
                    grid-area: sender;
                    color: var(--background);
                    margin-inline: auto;
                    font-weight: bold;
                }

                .style_contact__jnE\+z {
                    display: none;
                }
            }

            .style_messageList__kCFPA {
                grid-area: messageList;
                display: flex;
                flex-flow: column;
            }
        }
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__H3pIv {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 89.65vh;
        padding-top: 70px;
        width: 100%;

        .style_main__m9mN8 {
            width: 100%;
            padding: 20px;
            display: grid;
            grid-template-areas:
              "header     "
              "messageList";

            .style_header__2Fjfw {
                grid-area: header;
                background-color: var(--primary);
                border-radius: 5px;
                margin-bottom: 15px;
                padding-inline: 15px;
                height: 34px;
                display: grid;
                align-items: center;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr 45px 45px 45px;
                grid-template-areas:
                  "date sender contact . . .";

                .style_date__Pa0yL {
                    grid-area: date;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_sender__Xfarr {
                    grid-area: sender;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_contact__jnE\+z {
                    grid-area: contact;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }
            }

            .style_messageList__kCFPA {
                grid-area: messageList;
                display: flex;
                flex-flow: column;
            }
        }
    }
}

/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__H3pIv {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 89.65vh;
        padding-top: 70px;
        width: 100%;

        .style_main__m9mN8 {
            width: 100%;
            padding: 20px;
            display: grid;
            grid-template-areas:
              "header     "
              "messageList";

            .style_header__2Fjfw {
                grid-area: header;
                background-color: var(--primary);
                border-radius: 5px;
                margin-bottom: 15px;
                padding-inline: 15px;
                height: 34px;
                display: grid;
                align-items: center;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px 45px;
                grid-template-areas:
                  "date sender contact . . . .";

                .style_date__Pa0yL {
                    grid-area: date;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_sender__Xfarr {
                    grid-area: sender;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_contact__jnE\+z {
                    grid-area: contact;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }
            }

            .style_messageList__kCFPA {
                grid-area: messageList;
                display: flex;
                flex-flow: column;
            }
        }
    }
}

/* Extra Large devices */
@media (min-width: 1200px) {

    .style_page__H3pIv {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 89.65vh;
        padding-top: 70px;
        width: 100%;

        .style_main__m9mN8 {
            width: 100%;
            max-width: 1150px;
            min-width: 880px;
            display: grid;
            grid-template-areas:
              "header     "
              "messageList";

            .style_header__2Fjfw {
                grid-area: header;
                background-color: var(--primary);
                border-radius: 5px;
                margin-bottom: 15px;
                padding-inline: 15px;
                height: 34px;
                display: grid;
                align-items: center;
                justify-items: center;
                grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px 45px;
                grid-template-areas:
                  "date sender contact . . . .";

                .style_date__Pa0yL {
                    grid-area: date;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_sender__Xfarr {
                    grid-area: sender;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }

                .style_contact__jnE\+z {
                    grid-area: contact;
                    color: var(--background);
                    margin-right: auto;
                    font-weight: bold;
                }
            }

            .style_messageList__kCFPA {
                grid-area: messageList;
                display: flex;
                flex-flow: column;
            }
        }
    }
}
.style_imgList__I9aTX {
    grid-area: imgList;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 5px;
    column-gap: 5px;
    margin-top: 10px;
    height: fit-content;

    .style_imgBox__u4Dan {
        position: relative;
        cursor: grab;
        touch-action: none;

        .style_img__dj6ri {
            width: 100%;
        }

        .style_removeImgBtn__4ZSiL {
            position: absolute;
            right: 0px;
            background: red;
            color: var(--text);
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: .9rem;
            z-index: 2;
        }
    }
}
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    .style_page__uAWGq {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__UTGWP {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__rTCsr {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__DofmD {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__1Y9hL {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__eeQze {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__VoKfU {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__vWAoQ {
                display: flex;
                flex-flow: row;

                .style_title__hs9C3 {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__Lqv7I {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__T4GNG {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__5A9Vh {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__uZLHS {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__lB87f {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title              saveBtn            saveBtn            saveBtn           "
              "titleInput         titleInput         titleInput         titleInput         titleInput         titleInput         titleInput        "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput        "
              "manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput"
              "milageBox          milageBox          milageBox          milageBox          milageBox          milageBox          milageBox         "
              "priceBox           priceBox           priceBox           priceBox           priceBox           priceBox           priceBox          "
              "dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable      "
              "featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn        "
              "btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup         "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput  ";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__IFpqk {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__jwKv3 {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__lUAQO {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-column-gap: 10px;
                column-gap: 10px;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput removeAllImgsBtn"
                  "imgList  imgList         ";

                .style_inputBtn__-SWEw {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__cFhL6 {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__fXBAt {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_line__EvY9m {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__cNNYZ {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__Cfpv- {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__ImAOS {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__lhcDr {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__iC-71 {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__oe8L7 {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__lUQ\+m {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__jbAUj {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__\+nNWY {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__J7xXW {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__rtLgA {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__wTyoY {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__TJ6MP {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_page__uAWGq {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__UTGWP {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__rTCsr {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__DofmD {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__1Y9hL {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__eeQze {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__VoKfU {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__vWAoQ {
                display: flex;
                flex-flow: row;

                .style_title__hs9C3 {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__Lqv7I {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__T4GNG {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__5A9Vh {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__uZLHS {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__lB87f {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title              saveBtn            saveBtn            saveBtn           "
              "titleInput         titleInput         titleInput         titleInput         titleInput         titleInput         titleInput        "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox          addImgBox         "
              "phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput         phoneInput        "
              "manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput manufactureYoInput"
              "milageBox          milageBox          milageBox          milageBox          milageBox          milageBox          milageBox         "
              "priceBox           priceBox           priceBox           priceBox           priceBox           priceBox           priceBox          "
              "dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable       dphRemovable      "
              "featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn         featureBtn        "
              "btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup          btnsGroup         "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput   descriptionInput  ";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__IFpqk {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__jwKv3 {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__lUAQO {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__-SWEw {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__cFhL6 {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__fXBAt {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__YSJpL {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__nXxh\+ {
                        position: relative;
                        cursor: grab;

                        .style_img__DSunS {
                            width: 100%;
                        }

                        .style_removeImgBtn__wQQHh {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__EvY9m {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__cNNYZ {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__Cfpv- {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__ImAOS {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__lhcDr {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__iC-71 {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__oe8L7 {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__lUQ\+m {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__jbAUj {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__\+nNWY {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__J7xXW {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__rtLgA {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__wTyoY {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__TJ6MP {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__uAWGq {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__UTGWP {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__rTCsr {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__DofmD {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__1Y9hL {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__eeQze {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__VoKfU {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__vWAoQ {
                display: flex;
                flex-flow: row;

                .style_title__hs9C3 {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__Lqv7I {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__T4GNG {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__5A9Vh {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__uZLHS {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__lB87f {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title              title              title              title            saveBtn            saveBtn         "
              "titleInput         titleInput         titleInput         titleInput       .                  .               "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "addImgBox          addImgBox          addImgBox          addImgBox        addImgBox          addImgBox       "
              "phoneInput         phoneInput         phoneInput         featureBtn       featureBtn         featureBtn      "
              "manufactureYoInput manufactureYoInput manufactureYoInput featureBtn       featureBtn         featureBtn      "
              "milageBox          milageBox          milageBox          btnsGroup        btnsGroup          btnsGroup       "
              "priceBox           priceBox           priceBox           btnsGroup        btnsGroup          btnsGroup       "
              "dphRemovable       dphRemovable       dphRemovable       .                .                  .               "
              "descriptionInput   descriptionInput   descriptionInput   descriptionInput descriptionInput   descriptionInput";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__IFpqk {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__jwKv3 {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__lUAQO {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: fit-content;
                min-height: 400px;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__-SWEw {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__cFhL6 {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__fXBAt {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__YSJpL {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__nXxh\+ {
                        position: relative;
                        cursor: grab;

                        .style_img__DSunS {
                            width: 100%;
                        }

                        .style_removeImgBtn__wQQHh {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__EvY9m {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
                display: none;
            }

            .style_phoneInput__cNNYZ {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__Cfpv- {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__ImAOS {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__lhcDr {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__iC-71 {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__oe8L7 {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__lUQ\+m {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;
                margin-right: auto;

                .style_dphRemovableBtn__jbAUj {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__\+nNWY {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__J7xXW {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                width: 100%;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__rtLgA {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__wTyoY {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                margin-top: 30px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__TJ6MP {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__uAWGq {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__UTGWP {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__rTCsr {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__DofmD {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__1Y9hL {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__eeQze {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__VoKfU {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__vWAoQ {
                display: flex;
                flex-flow: row;

                .style_title__hs9C3 {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__Lqv7I {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__T4GNG {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__5A9Vh {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__uZLHS {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__lB87f {
            width: 90%;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 35px;
            grid-template-columns: 1fr 1fr 1fr 1fr auto 1fr 1fr;
            grid-gap: 20px 30px;
            gap: 20px 30px;
            border-radius: 5px;
            grid-template-areas:
              "title            title            title            title            title              saveBtn            saveBtn            "
              "titleInput       titleInput       titleInput       titleInput       titleInput         titleInput         titleInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               phoneInput         phoneInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               manufactureYoInput manufactureYoInput "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               milageBox          milageBox          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               priceBox           priceBox           "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               dphRemovable       dphRemovable       "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               featureBtn         featureBtn         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               btnsGroup          btnsGroup          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               .                  .                  "
              "descriptionInput descriptionInput descriptionInput descriptionInput descriptionInput   descriptionInput   descriptionInput   ";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__IFpqk {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__jwKv3 {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__lUAQO {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__-SWEw {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__cFhL6 {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__fXBAt {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__YSJpL {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__nXxh\+ {
                        position: relative;
                        cursor: grab;

                        .style_img__DSunS {
                            width: 100%;
                        }

                        .style_removeImgBtn__wQQHh {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__EvY9m {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
            }

            .style_phoneInput__cNNYZ {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__Cfpv- {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__ImAOS {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__lhcDr {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__iC-71 {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__oe8L7 {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__lUQ\+m {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;

                .style_dphRemovableBtn__jbAUj {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__\+nNWY {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__J7xXW {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__rtLgA {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__wTyoY {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__TJ6MP {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .style_page__uAWGq {
        min-height: 89.65vh;
        width: 100%;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 5vh;

        .style_confirmSaveBox__UTGWP {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title      title    "
              "confirmBtn deniedBtn";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_confirmBtn__rTCsr {
                grid-area: confirmBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_deniedBtn__DofmD {
                grid-area: deniedBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 15px;
                padding-block: 5px;
                letter-spacing: 1px;
                height: fit-content;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }
        }

        .style_confirmSaveBox2__1Y9hL {
            background-color: var(--secondary);
            height: fit-content;
            width: fit-content;
            padding: 20px 40px;
            border-radius: 6px;
            display: grid;
            grid-gap: 20px;
            gap: 20px;
            justify-items: center;
            align-items: center;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
              "title       title      "
              "progressBar progressBar";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.2rem;
                font-weight: bold;
            }

            .style_progressBar__eeQze {
                grid-area: progressBar;
                border-radius: 6px;
                overflow: hidden;
                appearance: none;
                height: 10px;

                &::-webkit-progress-value {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -webkit-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }

                &::-moz-progress-bar {
                  background-color: var(--primary);
                  border-radius: 6px;
                  -moz-transition: width 0.3s ease-in-out;
                  transition: width 0.3s ease-in-out;
                }
            }
        }

        .style_featuresBox__VoKfU {
            background-color: var(--background);
            border: 2px solid var(--text);
            padding: 10px 14px;
            border-radius: 5px;
            height: fit-content;
            min-height: 150px;
            width: 70vw;

            .style_header__vWAoQ {
                display: flex;
                flex-flow: row;

                .style_title__hs9C3 {
                    font-size: 2rem;
                    margin-bottom: 20px;
                }

                .style_closeBtn__Lqv7I {
                    margin-left: auto;
                    padding: 5px 10px;
                    border: 2px solid var(--text);
                    background-color: var(--background);
                    color: var(--text);
                    cursor: pointer;
                    border-radius: 5px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    height: fit-content;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }
            }

            .style_featuresList__T4GNG {
                width: 100%;
                height: 500px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 15px;
                gap: 15px;
                border-radius: 5px;
                padding: 20px;
                overflow-x: auto;

                .style_nonActive__5A9Vh {
                    padding: 6px 10px;
                    border: 2px solid var(--text);
                    color: var(--text);
                    border-radius: 5px;
                    font-weight: bold;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_active__uZLHS {
                    padding: 6px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    &:hover {
                        color: var(--text);
                        border: 2px solid var(--text);
                        cursor: pointer;
                    }
                }
            }
        }

        .style_main__lB87f {
            width: 100vw;
            max-width: 1150px;
            min-width: 880px;
            display: grid;
            justify-items: center;
            align-items: center;
            background-color: var(--secondary);
            padding: 20px 50px;
            grid-template-columns: 1fr 1fr 1fr 1fr auto 1fr 1fr;
            grid-gap: 20px 60px;
            gap: 20px 60px;
            border-radius: 5px;
            grid-template-areas:
              "title            title            title            title            title              saveBtn            saveBtn            "
              "titleInput       titleInput       titleInput       titleInput       titleInput         titleInput         titleInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               phoneInput         phoneInput         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               manufactureYoInput manufactureYoInput "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               milageBox          milageBox          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               priceBox           priceBox           "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               dphRemovable       dphRemovable       "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               featureBtn         featureBtn         "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               btnsGroup          btnsGroup          "
              "addImgBox        addImgBox        addImgBox        addImgBox        line               .                  .                  "
              "descriptionInput descriptionInput descriptionInput descriptionInput descriptionInput   descriptionInput   descriptionInput   ";

            .style_title__hs9C3 {
                grid-area: title;
                color: var(--text);
                font-size: 1.6rem;
                margin-right: auto;
            }

            .style_saveBtn__IFpqk {
                grid-area: saveBtn;
                color: var(--text);
                background: none;
                border: 2px solid var(--text);
                border-radius: 6px;
                font-weight: bold;
                padding: 5px 15px;
                letter-spacing: 1px;
                height: fit-content;
                margin-left: auto;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                    cursor: pointer;
                }
            }

            .style_titleInput__jwKv3 {
                grid-area: titleInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                border-radius: 5px;
                color: #222831;
                width: 100%;
                margin-bottom: 20px;
                outline: 0;
            }

            .style_addImgBox__lUAQO {
                grid-area: addImgBox;
                margin-bottom: auto;
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr;
                grid-row-gap: 10px;
                row-gap: 10px;
                grid-template-areas:
                  "imgInput .        removeAllImgsBtn"
                  "imgList  imgList  imgList         ";

                .style_inputBtn__-SWEw {
                    grid-area: imgInput;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    text-align: center;
                    cursor: pointer;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                    }

                    .style_imgInput__cFhL6 {
                        display: none;
                    }
                }

                .style_removeAllImgsBtn__fXBAt {
                    grid-area: removeAllImgsBtn;
                    color: var(--text);
                    background: none;
                    border: 2px solid var(--text);
                    border-radius: 6px;
                    font-weight: bold;
                    padding: 5px 15px;
                    letter-spacing: 1px;
                    height: fit-content;
                    white-space: nowrap;
                    &:hover {
                        color: var(--primary);
                        border: 2px solid var(--primary);
                        cursor: pointer;
                    }
                }

                .style_imgList__YSJpL {
                    grid-area: imgList;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: auto;
                    grid-gap: 5px;
                    gap: 5px;
                    margin-top: 10px;

                    .style_imgBox__nXxh\+ {
                        position: relative;
                        cursor: grab;

                        .style_img__DSunS {
                            width: 100%;
                        }

                        .style_removeImgBtn__wQQHh {
                            position: absolute;
                            right: 0px;
                            background: red;
                            color: var(--text);
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            font-size: .9rem;
                        }
                    }
                }
            }

            .style_line__EvY9m {
                grid-area: line;
                background-color: var(--text);
                width: 5px;
                border-radius: 5px;
                height: 100%;
            }

            .style_phoneInput__cNNYZ {
                grid-area: phoneInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_manufactureYoInput__Cfpv- {
                grid-area: manufactureYoInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                border-radius: 5px;
                color: #222831;
                width: 100%;
                outline: 0;
            }

            .style_milageBox__ImAOS {
                grid-area: milageBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_milageInput__lhcDr {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_priceBox__iC-71 {
                grid-area: priceBox;
                display: flex;
                flex-flow: row;
                align-items: center;
                width: 100%;
                border: 1px solid var(--text);
                border-radius: 5px;

                .style_priceInput__oe8L7 {
                   border-radius: 5px 0px 0px 5px;
                   border-right: 0;
                   width: -webkit-fill-available;
                   padding: 2px 0px 2px 5px;
                   outline: 0;
                   color: #222831;
                }

                .style_text__eXQln {
                    padding: 2px 5px 2px 5px;
                    border-left: 0;
                    color: var(--background);
                    width: fit-content;
                    background-color: var(--text);
                }
            }

            .style_dphRemovable__lUQ\+m {
                grid-area: dphRemovable;
                display: flex;
                flex-flow: row;
                align-items: center;

                .style_dphRemovableBtn__jbAUj {
                    height: 20px;
                    background: none;
                    cursor: pointer;

                    svg {
                        height: 20px;
                        width: 20px;

                        path {
                            fill: var(--text)
                        }
                    }

                    &:hover {

                        svg {

                            path {
                                fill: var(--primary)
                            }
                        }
                    }
                }

                .style_removableDphText__\+nNWY {
                    background: none;
                    margin-left: 5px;
                }
            }

            .style_featureBtn__J7xXW {
                grid-area: featureBtn;
                padding: 10px 15px;
                border: 2px solid var(--text);
                background-color: var(--secondary);
                color: var(--text);
                cursor: pointer;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 1px;
                &:hover {
                    color: var(--primary);
                    border: 2px solid var(--primary);
                }
            }

            .style_btnsGroup__rtLgA {
                grid-area: btnsGroup;
                display: flex;
                flex-flow: row;
                justify-content: center;
                background-color: #ffffff42;
                border-radius: 5px;

                div {
                    width: 100%;
                    button {
                        width: 100%;
                    }
                }
            }

            .style_descriptionInput__wTyoY {
                grid-area: descriptionInput;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);;
                color: #222831;
                border-radius: 5px;
                margin-bottom: 25px;
                resize: none;
                width: 100%;
                height: 250px;
                outline: 0;
            }

            .style_error__TJ6MP {
                color: rgb(196, 0, 0) !important;
                border: rgb(196, 0, 0) solid 1px !important;
            }
        }
    }
}
.image-gallery-icon{color:#fff;transition:all .3s ease-out;appearance:none;background-color:transparent;border:0;cursor:pointer;outline:none;position:absolute;z-index:4;filter:drop-shadow(0 2px 2px #1a1a1a)}@media(hover: hover)and (pointer: fine){.image-gallery-icon:hover{color:#337ab7}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid #337ab7}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:28px;width:28px}@media(max-width: 768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:15px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media(max-width: 480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:10px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:50px 10px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:60px}@media(max-width: 768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:36px}}@media(max-width: 480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.image-gallery.fullscreen-modal{background:#000;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{position:relative;line-height:0;top:0}.image-gallery-content.fullscreen{background:#000}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 110px)}@media(max-width: 768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 87px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-slides{line-height:0;overflow:hidden;position:relative;white-space:nowrap;text-align:center}.image-gallery-slide{left:0;position:absolute;top:0;width:100%}.image-gallery-slide.image-gallery-center{position:relative}.image-gallery-slide .image-gallery-image{width:100%;object-fit:contain}.image-gallery-slide .image-gallery-description{background:rgba(0,0,0,.4);bottom:70px;color:#fff;left:0;line-height:1;padding:10px 20px;position:absolute;white-space:normal}@media(max-width: 768px){.image-gallery-slide .image-gallery-description{bottom:45px;font-size:.8em;padding:8px 15px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 2px 2px #1a1a1a;cursor:pointer;display:inline-block;margin:0 5px;outline:none;padding:5px;transition:all .2s ease-out}@media(max-width: 768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets .image-gallery-bullet{padding:2.7px}}.image-gallery-bullets .image-gallery-bullet:focus{transform:scale(1.2);background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active{transform:scale(1.2);border:1px solid #fff;background:#fff}@media(hover: hover)and (pointer: fine){.image-gallery-bullets .image-gallery-bullet:hover{background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active:hover{background:#337ab7}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:100px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:81px}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;width:100%;left:0;padding:0;position:absolute;top:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 5px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 3px}}.image-gallery-thumbnails{overflow:hidden;padding:5px 0}@media(max-width: 768px){.image-gallery-thumbnails{padding:3px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{display:inline-block;border:4px solid transparent;transition:border .3s ease-out;width:100px;background:transparent;padding:0}@media(max-width: 768px){.image-gallery-thumbnail{border:3px solid transparent;width:81px}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{vertical-align:middle;width:100%;line-height:0}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{outline:none;border:4px solid #337ab7}@media(max-width: 768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:3px solid #337ab7}}@media(hover: hover)and (pointer: fine){.image-gallery-thumbnail:hover{outline:none;border:4px solid #337ab7}}@media(hover: hover)and (pointer: fine)and (max-width: 768px){.image-gallery-thumbnail:hover{border:3px solid #337ab7}}.image-gallery-thumbnail-label{box-sizing:border-box;color:#fff;font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;top:50%;text-shadow:0 2px 2px #1a1a1a;transform:translateY(-50%);white-space:normal;width:100%}@media(max-width: 768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:rgba(0,0,0,.4);color:#fff;line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media(max-width: 768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}

/* customGallery.module.css */
.imageViewer_customNav__pS2ki {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1;
}

.imageViewer_customNav__pS2ki svg {
  width: 40px; /* Adjust the size as needed */
  height: 40px;
  fill: #EEEEEE;
}

.imageViewer_customNav__pS2ki:hover svg {
    fill: var(--primary);
}

.imageViewer_customLeftNav__YN9gv {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

.imageViewer_customRightNav__rj4hJ {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.imageViewer_customFullscreenButton__1MjVl {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}

.imageViewer_customFullscreenButton__1MjVl svg {
  width: 30px; /* Adjust the size as needed */
  height: 30px;
  fill: #EEEEEE;
}

.imageViewer_customFullscreenButton__1MjVl:hover svg {
  fill: var(--primary);
}
.style_loadingDiv__pq1UC {
    min-height: 89.65vh;
    width: 100%;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Extra small devices */
@media (min-width: 320px) and (max-width: 575.98px) {

    .style_page__wWwtC {
        min-height: 100dvh;
        display: flex;
        flex-flow: column;
        align-items: center;

        .style_main__3a5sm {
            width: 90%;
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 20px;
            margin: 7vh 0 50px 0;
            display: grid;
            grid-gap: 15px;
            gap: 15px;
            align-items: center;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title offerBtn offerBtn"
            "images images images images images images"
            "smallInfo smallInfo smallInfo smallInfo smallInfo smallInfo"
            "features features features features features features"
            "description description description description description description";

            .style_title__K1WzG {
                grid-area: title;
                font-size: 0.8rem;
                height: fit-content;
            }

            .style_offerBtn__DIdjo {
                grid-area: offerBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 10px;
                padding-block: 4px;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .style_images__cag3S {
                grid-area: images;
                width: 100%;
            }

            .style_spacer__kb4No {
                display: none;
            }

            .style_smallInfo__rdGJM {
                grid-area: smallInfo;
                display: grid;
                grid-template-columns: .8fr 1fr;
                flex-flow: row;
                background-color: var(--background);
                padding: 30px;
                border-radius: 5px;

                p {
                    margin-bottom: 5px;
                    font-size: 0.8rem;
                }

                .style_minusDphText__Rvo\+4 {
                    color: var(--primary);
                    grid-column: span 2;
                }

                .style_minusDphPrice__cvNni[web-theme-color="light"] {
                    color: #525252;
                }

                .style_minusDphPrice__cvNni[web-theme-color="dark"] {
                    color: #858585;
                }

                svg {
                    height: -webkit-fill-available;
                    width: -webkit-fill-available;
                    padding: 3px;

                    path {
                      fill: var(--text);
                    }
                }

                .style_newItem__R\+NS0 {
                    border: 2px solid #24FF00;
                    box-shadow: 0 0 4px 0 #24FF00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_reservedItem__96TLX {
                    border: 2px solid #FF0000;
                    box-shadow: 0 0 4px 0 #FF0000;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_prepairingItem__LA9Cl {
                    border: 2px solid #FF5C00;
                    box-shadow: 0 0 4px 0 #FF5C00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;
                    padding-inline: 4px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }
            }

            .style_features__rQDsA {
                grid-area: features;
                border-radius: 5px;
                display: flex;
                flex-flow: wrap;
                gap: 10px;
                height: fit-content;

                div {
                    border-radius: 44px;
                    padding: 3px;
                    padding-inline: 8px;
                    border: 2px solid var(--primary);
                    width: fit-content;
                    height: 20px;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    cursor: help;

                    p {
                        font-size: .8rem;
                        margin: 0;
                        height: min-content;
                    }
                }
            }

            .style_description__FzMKz {
                grid-area: description;
                padding: 20px;
                background-color: var(--background);
                border-radius: 5px;

                p {
                    font-size: .8rem;
                }
            }
        }

        .style_offerMain__xuBR\+ {
            width: 80%;
            height: fit-content;
            background: var(--background);
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title title cancelBtn"
            "labelFullname labelFullname labelFullname labelFullname labelFullname labelFullname"
            "inputFullname inputFullname inputFullname inputFullname inputFullname inputFullname"
            "labelEmail labelEmail labelEmail labelEmail labelEmail labelEmail"
            "inputEmail inputEmail inputEmail inputEmail inputEmail inputEmail"
            "labelMobile labelMobile labelMobile labelMobile labelMobile labelMobile"
            "inputMobile inputMobile inputMobile inputMobile inputMobile inputMobile"
            "labelMessage labelMessage labelMessage labelMessage labelMessage labelMessage"
            "inputMessage inputMessage inputMessage inputMessage inputMessage inputMessage"
            "confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn";
            padding: 15px;
            align-items: center;
            grid-gap: 3px;
            gap: 3px;

            .style_title__K1WzG {
                grid-area: title;
                margin-bottom: 20px;
            }

            .style_confirmBtn__jUQc\+ {
                grid-area: confirmBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding: 4px 20px;
                letter-spacing: 1px;
                height: fit-content;
                margin-inline: auto;
                cursor: pointer;
                width: 100%;
            }

            .style_cancelBtn__ExV1T {
                grid-area: cancelBtn;
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                padding: 5px;
                margin-left: auto;
                margin-bottom: 10px;
                height: 30px;
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    height: 75%;

                    path {
                        fill: var(--text);
                    }
                }
            }

            .style_labelFullname__Wmwpp {
                grid-area: labelFullname;
                font-size: .9rem;
            }

            .style_inputFullname__5-De9 {
                grid-area: inputFullname;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelEmail__69H0B {
                grid-area: labelEmail;
                font-size: .9rem;
            }

            .style_inputEmail__1ZMR6 {
                grid-area: inputEmail;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMobile__ok1pn {
                grid-area: labelMobile;
                white-space: nowrap;
                font-size: .9rem;
            }

            .style_inputMobile__s2bq0 {
                grid-area: inputMobile;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMessage__pCUj5 {
                grid-area: labelMessage;
                font-size: .9rem;
            }

            .style_inputMessage__NuqGD {
                grid-area: inputMessage;
                width: 100%;
                border-radius: 5px;
                padding: 2px 5px 2px 5px;
                border: 1px solid var(--text);
                resize: none;
                color: #222831;
                height: 130px;
                outline: none;
                margin-bottom: 20px;
            }

            .style_wrongInput__3KK38 {
                border: 2px solid red !important;
            }
        }

        .style_offerSending__ewudG {
            background-color: var(--secondary);
            border-radius: 6px;
            padding: 40px 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
            }
        }
    }
}

/* Small devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_page__wWwtC {
        min-height: 100dvh;
        display: flex;
        flex-flow: column;
        align-items: center;

        .style_main__3a5sm {
            width: 90%;
            /* max-width: 1150px;
            min-width: 880px; */
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 20px;
            margin: 7vh 0 50px 0;
            display: grid;
            grid-gap: 15px;
            gap: 15px;
            align-items: center;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title offerBtn offerBtn"
            "images images images images images images"
            "smallInfo smallInfo smallInfo smallInfo smallInfo smallInfo"
            "features features features features features features"
            "description description description description description description";

            .style_title__K1WzG {
                grid-area: title;
                font-size: 0.8rem;
                height: fit-content;
            }

            .style_offerBtn__DIdjo {
                grid-area: offerBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 10px;
                padding-block: 4px;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .style_images__cag3S {
                grid-area: images;
                width: 100%;
            }

            .style_spacer__kb4No {
                display: none;
            }

            .style_smallInfo__rdGJM {
                grid-area: smallInfo;
                display: grid;
                grid-template-columns: .8fr 1fr;
                flex-flow: row;
                background-color: var(--background);
                padding: 30px;
                border-radius: 5px;

                p {
                    margin-bottom: 5px;
                    font-size: 0.8rem;
                }

                .style_minusDphText__Rvo\+4 {
                    color: var(--primary);
                    grid-column: span 2;
                }

                .style_minusDphPrice__cvNni[web-theme-color="light"] {
                    color: #525252;
                }

                .style_minusDphPrice__cvNni[web-theme-color="dark"] {
                    color: #858585;
                }

                svg {
                    height: -webkit-fill-available;
                    width: -webkit-fill-available;
                    padding: 3px;

                    path {
                      fill: var(--text);
                    }
                }

                .style_newItem__R\+NS0 {
                    border: 2px solid #24FF00;
                    box-shadow: 0 0 4px 0 #24FF00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_reservedItem__96TLX {
                    border: 2px solid #FF0000;
                    box-shadow: 0 0 4px 0 #FF0000;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_prepairingItem__LA9Cl {
                    border: 2px solid #FF5C00;
                    box-shadow: 0 0 4px 0 #FF5C00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;
                    padding-inline: 4px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }
            }

            .style_features__rQDsA {
                grid-area: features;
                border-radius: 5px;
                display: flex;
                flex-flow: wrap;
                gap: 10px;
                height: fit-content;

                div {
                    border-radius: 44px;
                    padding: 3px;
                    padding-inline: 8px;
                    border: 2px solid var(--primary);
                    width: fit-content;
                    height: 20px;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    cursor: help;

                    p {
                        font-size: .8rem;
                        margin: 0;
                        height: min-content;
                    }
                }
            }

            .style_description__FzMKz {
                grid-area: description;
                padding: 20px;
                background-color: var(--background);
                border-radius: 5px;

                p {
                    font-size: .8rem;
                }
            }
        }

        .style_offerMain__xuBR\+ {
            width: 70%;
            height: fit-content;
            background: var(--background);
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title title cancelBtn"
            "labelFullname labelFullname labelFullname labelFullname labelFullname labelFullname"
            "inputFullname inputFullname inputFullname inputFullname inputFullname inputFullname"
            "labelEmail labelEmail labelEmail labelEmail labelEmail labelEmail"
            "inputEmail inputEmail inputEmail inputEmail inputEmail inputEmail"
            "labelMobile labelMobile labelMobile labelMobile labelMobile labelMobile"
            "inputMobile inputMobile inputMobile inputMobile inputMobile inputMobile"
            "labelMessage labelMessage labelMessage labelMessage labelMessage labelMessage"
            "inputMessage inputMessage inputMessage inputMessage inputMessage inputMessage"
            "confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn";
            padding: 15px;
            align-items: center;
            grid-gap: 3px;
            gap: 3px;

            .style_title__K1WzG {
                grid-area: title;
                margin-bottom: 20px;
            }

            .style_confirmBtn__jUQc\+ {
                grid-area: confirmBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding: 4px 20px;
                letter-spacing: 1px;
                height: fit-content;
                margin-inline: auto;
                cursor: pointer;
                width: 100%;
            }

            .style_cancelBtn__ExV1T {
                grid-area: cancelBtn;
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                padding: 5px;
                margin-left: auto;
                margin-bottom: 10px;
                height: 30px;
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    height: 75%;

                    path {
                        fill: var(--text);
                    }
                }
            }

            .style_labelFullname__Wmwpp {
                grid-area: labelFullname;
                font-size: .9rem;
            }

            .style_inputFullname__5-De9 {
                grid-area: inputFullname;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelEmail__69H0B {
                grid-area: labelEmail;
                font-size: .9rem;
            }

            .style_inputEmail__1ZMR6 {
                grid-area: inputEmail;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMobile__ok1pn {
                grid-area: labelMobile;
                white-space: nowrap;
                font-size: .9rem;
            }

            .style_inputMobile__s2bq0 {
                grid-area: inputMobile;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMessage__pCUj5 {
                grid-area: labelMessage;
                font-size: .9rem;
            }

            .style_inputMessage__NuqGD {
                grid-area: inputMessage;
                width: 100%;
                border-radius: 5px;
                padding: 2px 5px 2px 5px;
                border: 1px solid var(--text);
                resize: none;
                color: #222831;
                height: 130px;
                outline: none;
                margin-bottom: 20px;
            }

            .style_wrongInput__3KK38 {
                border: 2px solid red !important;
            }
        }

        .style_offerSending__ewudG {
            background-color: var(--secondary);
            border-radius: 6px;
            padding: 40px 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
            }
        }
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__wWwtC {
        min-height: 100dvh;
        display: flex;
        flex-flow: column;
        align-items: center;

        .style_main__3a5sm {
            width: 90%;
            /* max-width: 1150px;
            min-width: 880px; */
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 20px;
            margin: 7vh 0 50px 0;
            display: grid;
            grid-gap: 15px;
            gap: 15px;
            align-items: center;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title offerBtn offerBtn"
            "images images images images images images"
            "smallInfo smallInfo smallInfo smallInfo smallInfo smallInfo"
            "features features features features features features"
            "description description description description description description";

            .style_title__K1WzG {
                grid-area: title;
                font-size: 0.8rem;
                height: fit-content;
            }

            .style_offerBtn__DIdjo {
                grid-area: offerBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding-inline: 10px;
                padding-block: 4px;
                font-size: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .style_images__cag3S {
                grid-area: images;
                width: 100%;
            }

            .style_spacer__kb4No {
                display: none;
            }

            .style_smallInfo__rdGJM {
                grid-area: smallInfo;
                display: grid;
                grid-template-columns: .8fr 1fr;
                flex-flow: row;
                background-color: var(--background);
                padding: 30px;
                border-radius: 5px;

                p {
                    margin-bottom: 5px;
                    font-size: 0.8rem;
                }

                .style_minusDphText__Rvo\+4 {
                    color: var(--primary);
                    grid-column: span 2;
                }

                .style_minusDphPrice__cvNni[web-theme-color="light"] {
                    color: #525252;
                }

                .style_minusDphPrice__cvNni[web-theme-color="dark"] {
                    color: #858585;
                }

                svg {
                    height: -webkit-fill-available;
                    width: -webkit-fill-available;
                    padding: 3px;

                    path {
                      fill: var(--text);
                    }
                }

                .style_newItem__R\+NS0 {
                    border: 2px solid #24FF00;
                    box-shadow: 0 0 4px 0 #24FF00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_reservedItem__96TLX {
                    border: 2px solid #FF0000;
                    box-shadow: 0 0 4px 0 #FF0000;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_prepairingItem__LA9Cl {
                    border: 2px solid #FF5C00;
                    box-shadow: 0 0 4px 0 #FF5C00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;
                    padding-inline: 4px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }
            }

            .style_features__rQDsA {
                grid-area: features;
                border-radius: 5px;
                display: flex;
                flex-flow: wrap;
                gap: 10px;
                height: fit-content;

                div {
                    border-radius: 44px;
                    padding: 3px;
                    padding-inline: 8px;
                    border: 2px solid var(--primary);
                    width: fit-content;
                    height: 20px;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    cursor: help;

                    p {
                        font-size: .8rem;
                        margin: 0;
                        height: min-content;
                    }
                }
            }

            .style_description__FzMKz {
                grid-area: description;
                padding: 20px;
                background-color: var(--background);
                border-radius: 5px;

                p {
                    font-size: .8rem;
                }
            }
        }

        .style_offerMain__xuBR\+ {
            width: 60%;
            height: fit-content;
            background: var(--background);
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title title cancelBtn"
            "labelFullname labelFullname labelFullname labelFullname labelFullname labelFullname"
            "inputFullname inputFullname inputFullname inputFullname inputFullname inputFullname"
            "labelEmail labelEmail labelEmail labelEmail labelEmail labelEmail"
            "inputEmail inputEmail inputEmail inputEmail inputEmail inputEmail"
            "labelMobile labelMobile labelMobile labelMobile labelMobile labelMobile"
            "inputMobile inputMobile inputMobile inputMobile inputMobile inputMobile"
            "labelMessage labelMessage labelMessage labelMessage labelMessage labelMessage"
            "inputMessage inputMessage inputMessage inputMessage inputMessage inputMessage"
            "confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn";
            padding: 15px;
            align-items: center;
            grid-gap: 3px;
            gap: 3px;

            .style_title__K1WzG {
                grid-area: title;
                margin-bottom: 20px;
            }

            .style_confirmBtn__jUQc\+ {
                grid-area: confirmBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding: 4px 20px;
                letter-spacing: 1px;
                height: fit-content;
                margin-inline: auto;
                cursor: pointer;
                width: 100%;
            }

            .style_cancelBtn__ExV1T {
                grid-area: cancelBtn;
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                padding: 5px;
                margin-left: auto;
                margin-bottom: 10px;
                height: 30px;
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    height: 75%;

                    path {
                        fill: var(--text);
                    }
                }
            }

            .style_labelFullname__Wmwpp {
                grid-area: labelFullname;
                font-size: .9rem;
            }

            .style_inputFullname__5-De9 {
                grid-area: inputFullname;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelEmail__69H0B {
                grid-area: labelEmail;
                font-size: .9rem;
            }

            .style_inputEmail__1ZMR6 {
                grid-area: inputEmail;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMobile__ok1pn {
                grid-area: labelMobile;
                white-space: nowrap;
                font-size: .9rem;
            }

            .style_inputMobile__s2bq0 {
                grid-area: inputMobile;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelMessage__pCUj5 {
                grid-area: labelMessage;
                font-size: .9rem;
            }

            .style_inputMessage__NuqGD {
                grid-area: inputMessage;
                width: 100%;
                border-radius: 5px;
                padding: 2px 5px 2px 5px;
                border: 1px solid var(--text);
                resize: none;
                color: #222831;
                height: 170px;
                outline: none;
                margin-bottom: 20px;
            }

            .style_wrongInput__3KK38 {
                border: 2px solid red !important;
            }
        }

        .style_offerSending__ewudG {
            background-color: var(--secondary);
            border-radius: 6px;
            padding: 40px 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
            }
        }
    }
}

/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__wWwtC {
        min-height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;

        .style_main__3a5sm {
            width: 95%;
            max-width: 1150px;
            min-width: 650px;
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 20px;
            margin: 7vh 10px 50px 10px;
            display: grid;
            grid-gap: 15px;
            gap: 15px;
            align-items: center;
            grid-template-columns: repeat(12, 1fr);
            grid-template-areas:
            "title title title title title title title title title offerBtn offerBtn offerBtn"
            "images images images images images images images spacer smallInfo smallInfo smallInfo smallInfo"
            "features features features features features features features features features features features features"
            "description description description description description description description description description description description description";

            .style_title__K1WzG {
                grid-area: title;
                font-size: 1.3rem;
                height: fit-content;
            }

            .style_offerBtn__DIdjo {
                grid-area: offerBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                margin-left: auto;
                font-weight: bold;
                padding-inline: 10px;
                padding-block: 4px;
                letter-spacing: 1px;
                height: fit-content;
                white-space: nowrap;
                margin-left: auto;

                &:hover {
                    border: 2px solid var(--text);
                    cursor: pointer;
                }
            }

            .style_images__cag3S {
                grid-area: images;
                width: 100%;
            }

            .style_spacer__kb4No {
                grid-area: spacer;
                background-color: var(--text);
                width: 6px;
                border-radius: 5px;
                margin-inline: auto;
                height: 100%;
            }

            .style_smallInfo__rdGJM {
                grid-area: smallInfo;
                display: grid;
                grid-template-columns: .8fr 1fr;
                grid-template-rows: repeat(9, 1fr);
                flex-flow: row;
                background-color: var(--background);
                padding: 30px;
                border-radius: 5px;

                p {
                    margin-bottom: 5px;
                }

                .style_minusDphText__Rvo\+4 {
                    color: var(--primary);
                    grid-column: span 2;
                }

                .style_minusDphPrice__cvNni[web-theme-color="light"] {
                    color: #525252;
                }

                .style_minusDphPrice__cvNni[web-theme-color="dark"] {
                    color: #858585;
                }

                svg {
                    height: -webkit-fill-available;
                    width: -webkit-fill-available;
                    padding: 3px;

                    path {
                      fill: var(--text);
                    }
                }

                .style_newItem__R\+NS0 {
                    border: 2px solid #24FF00;
                    box-shadow: 0 0 4px 0 #24FF00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_reservedItem__96TLX {
                    border: 2px solid #FF0000;
                    box-shadow: 0 0 4px 0 #FF0000;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_prepairingItem__LA9Cl {
                    border: 2px solid #FF5C00;
                    box-shadow: 0 0 4px 0 #FF5C00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;
                    padding-inline: 4px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }
            }

            .style_features__rQDsA {
                grid-area: features;
                border-radius: 5px;
                display: flex;
                flex-flow: wrap;
                gap: 10px;
                height: fit-content;

                div {
                    border-radius: 44px;
                    padding: 3px;
                    padding-inline: 8px;
                    border: 2px solid var(--primary);
                    width: fit-content;
                    height: 20px;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    cursor: help;

                    p {
                        font-size: 0.8rem;
                        margin: 0;
                        height: min-content;
                    }
                }
            }

            .style_description__FzMKz {
                grid-area: description;
                padding: 20px;
                background-color: var(--background);
                border-radius: 5px;
            }
        }

        .style_offerMain__xuBR\+ {
            width: 50%;
            height: fit-content;
            background: var(--background);
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title title cancelBtn"
            "labelFullname labelFullname labelFullname labelFullname labelFullname labelFullname"
            "inputFullname inputFullname inputFullname inputFullname inputFullname inputFullname"
            "labelEmail labelEmail labelEmail labelEmail labelEmail labelEmail"
            "inputEmail inputEmail inputEmail inputEmail inputEmail inputEmail"
            "labelMobile labelMobile labelMobile labelMobile labelMobile labelMobile"
            "inputMobile inputMobile inputMobile inputMobile inputMobile inputMobile"
            "labelMessage labelMessage labelMessage labelMessage labelMessage labelMessage"
            "inputMessage inputMessage inputMessage inputMessage inputMessage inputMessage"
            "confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn";
            padding: 15px;
            align-items: center;
            grid-gap: 3px;
            gap: 3px;

            .style_title__K1WzG {
                grid-area: title;
                margin-bottom: 20px;
            }

            .style_confirmBtn__jUQc\+ {
                grid-area: confirmBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding: 4px 20px;
                letter-spacing: 1px;
                height: fit-content;
                margin-inline: auto;
                cursor: pointer;
                width: 100%;
            }

            .style_cancelBtn__ExV1T {
                grid-area: cancelBtn;
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                padding: 5px;
                margin-left: auto;
                margin-bottom: 20px;
                height: 30px;
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    height: 75%;

                    path {
                        fill: var(--text);
                    }
                }
            }

            .style_labelFullname__Wmwpp {
                grid-area: labelFullname;
                font-size: .9rem;
            }

            .style_inputFullname__5-De9 {
                grid-area: inputFullname;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelEmail__69H0B {
                grid-area: labelEmail;
                font-size: .9rem;
            }

            .style_inputEmail__1ZMR6 {
                grid-area: inputEmail;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 20px;
            }

            .style_labelMobile__ok1pn {
                grid-area: labelMobile;
                white-space: nowrap;
                font-size: .9rem;
            }

            .style_inputMobile__s2bq0 {
                grid-area: inputMobile;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 20px;
            }

            .style_labelMessage__pCUj5 {
                grid-area: labelMessage;
                font-size: .9rem;
            }

            .style_inputMessage__NuqGD {
                grid-area: inputMessage;
                width: 100%;
                border-radius: 5px;
                padding: 2px 5px 2px 5px;
                border: 1px solid var(--text);
                resize: none;
                color: #222831;
                height: 35vh;
                outline: none;
                margin-bottom: 20px;
            }

            .style_wrongInput__3KK38 {
                border: 2px solid red !important;
            }
        }

        .style_offerSending__ewudG {
            background-color: var(--secondary);
            border-radius: 6px;
            padding: 40px 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
            }
        }
    }
}

/* Extra Large devices */
@media (min-width: 1200px) {

    .style_page__wWwtC {
        min-height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;

        .style_main__3a5sm {
            width: 100vw;
            max-width: 1150px;
            min-width: 880px;
            background-color: var(--secondary);
            border-radius: 5px;
            padding: 20px;
            margin: 7vh 0 50px 0;
            display: grid;
            grid-gap: 15px;
            gap: 15px;
            align-items: center;
            grid-template-columns: repeat(12, 1fr);
            grid-template-areas:
            "title title title title title title title title title offerBtn offerBtn offerBtn"
            "images images images images images images images spacer smallInfo smallInfo smallInfo smallInfo"
            "features features features features features features features features features features features features"
            "description description description description description description description description description description description description";

            .style_title__K1WzG {
                grid-area: title;
                font-size: 1.3rem;
                height: fit-content;
            }

            .style_offerBtn__DIdjo {
                grid-area: offerBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                margin-left: auto;
                font-weight: bold;
                padding-inline: 10px;
                padding-block: 4px;
                letter-spacing: 1px;
                height: fit-content;
                white-space: nowrap;
                margin-left: auto;

                &:hover {
                    border: 2px solid var(--text);
                    cursor: pointer;
                }
            }

            .style_images__cag3S {
                grid-area: images;
                width: 100%;
            }

            .style_spacer__kb4No {
                grid-area: spacer;
                background-color: var(--text);
                width: 6px;
                border-radius: 5px;
                margin-inline: auto;
            }

            .style_smallInfo__rdGJM {
                grid-area: smallInfo;
                display: grid;
                grid-template-columns: .8fr 1fr;
                grid-template-rows: repeat(9, 1fr);
                flex-flow: row;
                background-color: var(--background);
                padding: 30px;
                border-radius: 5px;

                p {
                    margin-bottom: 5px;
                }

                .style_minusDphText__Rvo\+4 {
                    color: var(--primary);
                    grid-column: span 2;
                }

                .style_minusDphPrice__cvNni[web-theme-color="light"] {
                    color: #525252;
                }

                .style_minusDphPrice__cvNni[web-theme-color="dark"] {
                    color: #858585;
                }

                svg {
                    height: -webkit-fill-available;
                    width: -webkit-fill-available;
                    padding: 3px;

                    path {
                      fill: var(--text);
                    }
                }

                .style_newItem__R\+NS0 {
                    border: 2px solid #24FF00;
                    box-shadow: 0 0 4px 0 #24FF00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_reservedItem__96TLX {
                    border: 2px solid #FF0000;
                    box-shadow: 0 0 4px 0 #FF0000;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }

                .style_prepairingItem__LA9Cl {
                    border: 2px solid #FF5C00;
                    box-shadow: 0 0 4px 0 #FF5C00;
                    height: 30px;
                    width: 30px;
                    margin-bottom: 15px;
                    padding-inline: 4px;

                    &:hover {
                        filter: brightness(60%);
                        cursor: help;
                    }
                }
            }

            .style_features__rQDsA {
                grid-area: features;
                border-radius: 5px;
                display: flex;
                flex-flow: wrap;
                gap: 10px;
                height: fit-content;

                div {
                    border-radius: 44px;
                    padding: 3px;
                    padding-inline: 8px;
                    border: 2px solid var(--primary);
                    width: fit-content;
                    height: 20px;
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    cursor: help;

                    p {
                        font-size: 0.8rem;
                        margin: 0;
                        height: min-content;
                    }
                }
            }

            .style_description__FzMKz {
                grid-area: description;
                padding: 20px;
                background-color: var(--background);
                border-radius: 5px;
            }
        }

        .style_offerMain__xuBR\+ {
            width: 40%;
            height: fit-content;
            background: var(--background);
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-areas:
            "title title title title title cancelBtn"
            "labelFullname labelFullname labelFullname labelFullname labelFullname labelFullname"
            "inputFullname inputFullname inputFullname inputFullname inputFullname inputFullname"
            "labelEmail labelEmail labelEmail labelEmail labelEmail labelEmail"
            "inputEmail inputEmail inputEmail inputEmail inputEmail inputEmail"
            "labelMobile labelMobile labelMobile labelMobile labelMobile labelMobile"
            "inputMobile inputMobile inputMobile inputMobile inputMobile inputMobile"
            "labelMessage labelMessage labelMessage labelMessage labelMessage labelMessage"
            "inputMessage inputMessage inputMessage inputMessage inputMessage inputMessage"
            "confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn confirmBtn";
            padding: 15px;
            align-items: center;
            grid-gap: 3px;
            gap: 3px;

            .style_title__K1WzG {
                grid-area: title;
                margin-bottom: 20px;
            }

            .style_confirmBtn__jUQc\+ {
                grid-area: confirmBtn;
                color: var(--text);
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                font-weight: bold;
                padding: 4px 20px;
                letter-spacing: 1px;
                height: fit-content;
                margin-inline: auto;
                cursor: pointer;
                width: 100%;
            }

            .style_cancelBtn__ExV1T {
                grid-area: cancelBtn;
                background: var(--background);
                border: 2px solid var(--primary);
                border-radius: 6px;
                padding: 5px;
                margin-left: auto;
                margin-bottom: 20px;
                height: 30px;
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;

                svg {
                    height: 75%;

                    path {
                        fill: var(--text);
                    }
                }
            }

            .style_labelFullname__Wmwpp {
                grid-area: labelFullname;
                font-size: .9rem;
            }

            .style_inputFullname__5-De9 {
                grid-area: inputFullname;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 12px;
            }

            .style_labelEmail__69H0B {
                grid-area: labelEmail;
                font-size: .9rem;
            }

            .style_inputEmail__1ZMR6 {
                grid-area: inputEmail;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 20px;
            }

            .style_labelMobile__ok1pn {
                grid-area: labelMobile;
                white-space: nowrap;
                font-size: .9rem;
            }

            .style_inputMobile__s2bq0 {
                grid-area: inputMobile;
                padding: 2px 0px 2px 5px;
                border: 1px solid var(--text);
                color: #222831;
                border-radius: 5px;
                width: 100%;
                outline: none;
                margin-bottom: 20px;
            }

            .style_labelMessage__pCUj5 {
                grid-area: labelMessage;
                font-size: .9rem;
            }

            .style_inputMessage__NuqGD {
                grid-area: inputMessage;
                width: 100%;
                border-radius: 5px;
                padding: 2px 5px 2px 5px;
                border: 1px solid var(--text);
                resize: none;
                color: #222831;
                height: 35vh;
                outline: none;
                margin-bottom: 20px;
            }

            .style_wrongInput__3KK38 {
                border: 2px solid red !important;
            }
        }

        .style_offerSending__ewudG {
            background-color: var(--secondary);
            border-radius: 6px;
            padding: 40px 60px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            transition: width 0.5s;

            p {
                font-weight: bold;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
            }
        }
    }
}
/* Extra small devices */
@media (min-width: 320px) and (max-width: 575.98px) {

    .style_gdprBox__Key26 {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;

        .style_gdprMain__pYVp5 {
            margin-block: 7dvh;
            width: clamp(300px, 100%, 1150px);
            display: flex;
            align-items: center;
            flex-flow: column;

            .style_mainHeader__vlcvu {
                background: var(--primary);
                border-radius: 5px;
                min-height: 50px;
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;

                h2 {
                    color: var(--texts);
                    font-size: 1.5rem;
                }
            }

            .style_ownerTitle__mUsMs {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;
                padding: 20px 10px 10px 10px;
                width: clamp(300px, 100%, 800px);

                .style_representative__qnput {
                    padding: 15px 0 5px 0;
                }

                p {
                    font-size: .9rem;
                }

                strong {
                    font-size: .9rem;
                }
            }

            .style_lowerArticle__exKgW {
                padding: 10px 10px 60px 10px;
            }

            .style_legalCodes__z6-Cr {
                display: flex;
                flex-flow: column;
                align-items: center;

                h3 {
                    margin-bottom: 20px;
                    padding-inline: 10px;
                }

                .style_links__OAt7V {
                    display: flex;
                    flex-flow: column;
                    width: 100%;
                    padding-left: 40px;

                    a {
                        text-decoration: none;
                        &:hover {
                            cursor: pointer;
                            color: var(--primary);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

/* Small devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_gdprBox__Key26 {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;

        .style_gdprMain__pYVp5 {
            margin-block: 7dvh;
            width: clamp(300px, 100%, 1150px);
            display: flex;
            align-items: center;
            flex-flow: column;

            .style_mainHeader__vlcvu {
                background: var(--primary);
                border-radius: 5px;
                min-height: 50px;
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;

                h2 {
                    color: var(--texts);
                    font-size: 1.5rem;
                }
            }

            .style_ownerTitle__mUsMs {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;
                padding: 20px 10px 10px 10px;
                width: clamp(300px, 100%, 800px);

                .style_representative__qnput {
                    padding: 15px 0 5px 0;
                }

                p {
                    font-size: 1rem;
                }

                strong {
                    font-size: 1rem;
                }
            }

            .style_lowerArticle__exKgW {
                padding: 10px 10px 60px 10px;
            }

            .style_legalCodes__z6-Cr {
                display: flex;
                flex-flow: column;
                align-items: center;

                h3 {
                    margin-bottom: 20px;
                    padding-inline: 10px;
                }

                .style_links__OAt7V {
                    display: flex;
                    flex-flow: column;
                    width: 100%;
                    padding-left: 40px;

                    a {
                        text-decoration: none;
                        &:hover {
                            cursor: pointer;
                            color: var(--primary);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_gdprBox__Key26 {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;

        .style_gdprMain__pYVp5 {
            margin-block: 7dvh;
            width: clamp(300px, 100%, 1150px);
            display: flex;
            align-items: center;
            flex-flow: column;

            .style_mainHeader__vlcvu {
                background: var(--primary);
                border-radius: 5px;
                min-height: 50px;
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;

                h2 {
                    color: var(--texts);
                    font-size: 2rem;
                }
            }

            .style_ownerTitle__mUsMs {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;
                padding: 20px 10px 10px 10px;
                width: clamp(300px, 100%, 800px);

                .style_representative__qnput {
                    padding: 15px 0 5px 0;
                }

                p {
                    font-size: 1rem;
                }

                strong {
                    font-size: 1rem;
                }
            }

            .style_lowerArticle__exKgW {
                padding: 10px 10px 60px 10px;
            }

            .style_legalCodes__z6-Cr {
                display: flex;
                flex-flow: column;
                align-items: center;

                h3 {
                    margin-bottom: 20px;
                }

                .style_links__OAt7V {
                    display: flex;
                    flex-flow: column;
                    width: 100%;
                    padding-left: 40px;

                    a {
                        text-decoration: none;
                        &:hover {
                            cursor: pointer;
                            color: var(--primary);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_gdprBox__Key26 {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;

        .style_gdprMain__pYVp5 {
            margin-block: 7dvh;
            width: clamp(300px, 100%, 1150px);
            display: flex;
            align-items: center;
            flex-flow: column;

            .style_mainHeader__vlcvu {
                background: var(--primary);
                border-radius: 5px;
                min-height: 50px;
                width: 90%;
                display: flex;
                justify-content: center;
                align-items: center;

                h2 {
                    color: var(--texts);
                    font-size: 2rem;
                }
            }

            .style_ownerTitle__mUsMs {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;
                padding: 20px 10px 10px 10px;
                width: clamp(300px, 100%, 800px);

                .style_representative__qnput {
                    padding: 15px 0 5px 0;
                }

                p {
                    font-size: 1rem;
                }

                strong {
                    font-size: 1rem;
                }
            }

            .style_lowerArticle__exKgW {
                padding: 10px 10px 60px 10px;
            }

            .style_legalCodes__z6-Cr {
                display: flex;
                flex-flow: column;
                align-items: center;

                h3 {
                    margin-bottom: 20px;
                }

                .style_links__OAt7V {
                    display: flex;
                    flex-flow: column;
                    width: 100%;
                    padding-left: 40px;

                    a {
                        text-decoration: none;
                        &:hover {
                            cursor: pointer;
                            color: var(--primary);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}

/* Extra Large devices */
@media (min-width: 1200px) {

    .style_gdprBox__Key26 {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;

        .style_gdprMain__pYVp5 {
            margin-block: 7dvh;
            width: clamp(300px, 100%, 1150px);
            display: flex;
            align-items: center;
            flex-flow: column;

            .style_mainHeader__vlcvu {
                background: var(--primary);
                border-radius: 5px;
                min-height: 50px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                h2 {
                    color: var(--texts);
                    font-size: 2rem;
                }
            }

            .style_ownerTitle__mUsMs {
                display: grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto;
                padding: 20px 10px 10px 10px;
                width: clamp(300px, 100%, 800px);

                .style_representative__qnput {
                    padding: 15px 0 5px 0;
                }

                p {
                    font-size: 1rem;
                }

                strong {
                    font-size: 1rem;
                }
            }

            .style_lowerArticle__exKgW {
                padding: 10px 10px 60px 10px;
            }

            .style_legalCodes__z6-Cr {
                display: flex;
                flex-flow: column;
                align-items: center;

                h3 {
                    margin-bottom: 20px;
                }

                .style_links__OAt7V {
                    display: flex;
                    flex-flow: column;
                    width: 100%;
                    padding-left: 40px;

                    a {
                        text-decoration: none;
                        &:hover {
                            cursor: pointer;
                            color: var(--primary);
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
}
.style_contactBox__OQBZi {
    min-height: 89.65vh;
    display: flex;
    justify-content: center;

    .style_contactMain__lOGAT {
        height: 100%;
        margin-block: 7dvh;
        width: clamp(300px, 100%, 1150px);
        display: flex;
        align-items: center;
        flex-flow: column;

        .style_title__EREDp {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .style_infoBox__NFG-o {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: auto;
            grid-column-gap: 12px;
            column-gap: 12px;
            grid-row-gap: 3px;
            row-gap: 3px;

            svg {
                height: 18px;

                path {
                    fill: var(--text);
                }
            }
        }
    }
}
.style_loginDiv__EPqOa {
    min-height: 89.65vh;
    display: flex;
    justify-content: center;
    align-items: center;

    h1 {
    font-size: 2rem;
    margin-bottom: 7px;
    }

    p {
    font-size: 0.9rem;
    color: rgb(255, 25, 25);
    }
}

.style_divForm__0hMrF {
    background: var(--secondary);
    max-width: 400px;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    border-radius: 6px;
    padding: 50px 30px 50px 30px;

    form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        width: 80%;
        align-items: center;

        input {
            padding: 10px 0 10px 5px;
            border-radius: 5px;
            width: 100%;
            color: #222831;
            &:focus {
                outline: none;
            }
        }

        label {
            margin-right: auto;
        }
    }

    .style_makeAccLink__9k\+4x {
        cursor: pointer;
        color: var(--text);
        margin-right: auto;
        padding-top: 10px;
        font-size: 0.9rem;
        &:hover {
            color: var(--primary);
        }
    }
}

.style_formBtn__DsDil {
    color: var(--text);
    border: 2px solid var(--text);
    width: 100%;
    background: none;
    border-radius: 6px;
    font-weight: bold;
    height: 44px;
    cursor: pointer;
    margin-top: 20px;
    background: var(--background);
    &:hover {
        color: var(--primary);
        border: 2px solid var(--primary);
    }
}

.style_divFormPw__wevIx {
    display: flex;
    width: 100%;

    input {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

.style_eye__SenDs {
    height: 44px;
    padding: 12px;
    background-color: white;
    outline: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;

    path {
        fill: #222831;
    }

    &:hover {
        path {
            fill: var(--primary);
        }
    }
}

.style_wrongInput__AN8rG {
    border: 2px solid red;
}
.style_registerDiv__cqjQz {
    min-height: 89.65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 20px;

    h1 {
    font-size: 2.5rem;
    margin-bottom: 7px;
    }

    p {
    font-size: 0.9rem;
    color: rgb(255, 25, 25);
    }

    .style_divForm__OcG7- {
        background: var(--secondary);
        height: fit-content;
        padding-block: 25px;
        max-width: 400px;
        width: 100vw;
        display: flex;
        justify-content: center;
        border-radius: 6px;

        form {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            width: 100%;
            align-items: center;
            padding-inline: 50px;

            input {
                padding: 10px 0 10px 5px;
                border-radius: 5px;
                width: 100%;
                color: #222831;
                &:focus {
                    outline: none;
                }
            }
            label {
                margin-right: auto;
            }
        }
    }

    .style_formBtn__f1nsj {
        color: var(--text);
        border: 2px solid var(--text);
        width: 100%;
        background: none;
        border-radius: 6px;
        font-weight: bold;
        height: 44px;
        cursor: pointer;
        margin-top: 20px;
        background: var(--background);
        &:hover {
            color: var(--primary);
            border: 2px solid var(--primary);
        }
    }

    .style_divFormPw1__WF6VA, .style_divFormPw2__BaKv5 {
        display: flex;
        width: 100%;
        input {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
    }

    .style_eye__nHiRm {
        height: 44px;
        padding: 12px;
        background-color: white;
        outline: 0;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        cursor: pointer;¨
        path {
            fill: var(--background);
        }
        &:hover {
            path {
                fill: var(--primary);
            }
        }
    }
}

.style_wrongInput__yGGhQ {
    border: 2px solid red;
}
/* Extra small devices */
@media (min-width: 320px) and (max-width: 575.98px) {

    .style_page__RjZhJ {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .style_main__L3HTT {
            display: grid;
            height: fit-content;
            grid-template-columns: 1fr auto auto;
            width: 70%;
            justify-items: center;
            max-width: 990px;
            align-items: center;
            grid-template-areas:
              "title line errorCode"
              "text line errorCode"
              "backLink backLink backLink";

            .style_errorCode__juowS {
                grid-area: errorCode;
                font-size: 2rem;
                color: var(--text);
            }

            .style_title__\+EWXw {
                grid-area: title;
                font-size: 1.2rem;
                color: var(--primary);
                margin-right: auto;
            }

            .style_text__5lvqW {
                grid-area: text;
                font-size: .8rem;
                color: var(--text);
                margin-right: auto;
            }

            .style_backLink__1EIdi {
                grid-area: backLink;
                font-size: .9rem;
                color: var(--text);
                margin-top: 50px;

                .style_brajo__F3RV6 {
                    font-weight: bolder;
                    -webkit-text-decoration: underline var(--primary) 2px;
                            text-decoration: underline var(--primary) 2px;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .style_line__yqLEE {
                grid-area: line;
                width: 5px;
                background-color: var(--text);
                height: 100%;
                margin-inline: 15px;
            }
        }
    }
}

/* Small devices*/
@media (min-width: 576px) and (max-width: 767.98px) {

    .style_page__RjZhJ {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .style_main__L3HTT {
            display: grid;
            height: fit-content;
            grid-template-columns: 1fr auto auto;
            width: 70%;
            justify-items: center;
            max-width: 990px;
            align-items: center;
            grid-template-areas:
              "title line errorCode"
              "text line errorCode"
              "backLink backLink backLink";

            .style_errorCode__juowS {
                grid-area: errorCode;
                font-size: 3rem;
                color: var(--text);
            }

            .style_title__\+EWXw {
                grid-area: title;
                font-size: 2rem;
                color: var(--primary);
                margin-right: auto;
            }

            .style_text__5lvqW {
                grid-area: text;
                font-size: 1.4rem;
                color: var(--text);
                margin-right: auto;
            }

            .style_backLink__1EIdi {
                grid-area: backLink;
                font-size: 1rem;
                color: var(--text);
                margin-top: 50px;

                .style_brajo__F3RV6 {
                    font-weight: bolder;
                    -webkit-text-decoration: underline var(--primary) 2px;
                            text-decoration: underline var(--primary) 2px;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .style_line__yqLEE {
                grid-area: line;
                width: 5px;
                background-color: var(--text);
                height: 100%;
                margin-inline: 15px;
            }
        }
    }
}

/* Medium devices */
@media (min-width: 768px) and (max-width: 991.98px) {

    .style_page__RjZhJ {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .style_main__L3HTT {
            display: grid;
            height: fit-content;
            grid-template-columns: 1fr auto auto;
            width: 70%;
            justify-items: center;
            max-width: 990px;
            align-items: center;
            grid-template-areas:
              "title line errorCode"
              "text line errorCode"
              "backLink backLink backLink";

            .style_errorCode__juowS {
                grid-area: errorCode;
                font-size: 3rem;
                color: var(--text);
            }

            .style_title__\+EWXw {
                grid-area: title;
                font-size: 2rem;
                color: var(--primary);
                margin-right: auto;
            }

            .style_text__5lvqW {
                grid-area: text;
                font-size: 1.4rem;
                color: var(--text);
                margin-right: auto;
            }

            .style_backLink__1EIdi {
                grid-area: backLink;
                font-size: 1rem;
                color: var(--text);
                margin-top: 50px;

                .style_brajo__F3RV6 {
                    font-weight: bolder;
                    -webkit-text-decoration: underline var(--primary) 2px;
                            text-decoration: underline var(--primary) 2px;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .style_line__yqLEE {
                grid-area: line;
                width: 5px;
                background-color: var(--text);
                height: 100%;
                margin-inline: 15px;
            }
        }
    }
}

/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .style_page__RjZhJ {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .style_main__L3HTT {
            display: grid;
            height: fit-content;
            grid-template-columns: 1fr auto auto;
            width: 70%;
            justify-items: center;
            max-width: 990px;
            align-items: center;
            grid-template-areas:
              "title line errorCode"
              "text line errorCode"
              "backLink backLink backLink";

            .style_errorCode__juowS {
                grid-area: errorCode;
                font-size: 5rem;
                color: var(--text);
            }

            .style_title__\+EWXw {
                grid-area: title;
                font-size: 2.5rem;
                color: var(--primary);
                margin-right: auto;
            }

            .style_text__5lvqW {
                grid-area: text;
                font-size: 2rem;
                color: var(--text);
                margin-right: auto;
            }

            .style_backLink__1EIdi {
                grid-area: backLink;
                font-size: 1rem;
                color: var(--text);
                margin-top: 50px;

                .style_brajo__F3RV6 {
                    font-weight: bolder;
                    -webkit-text-decoration: underline var(--primary) 2px;
                            text-decoration: underline var(--primary) 2px;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .style_line__yqLEE {
                grid-area: line;
                width: 5px;
                background-color: var(--text);
                height: 100%;
                margin-inline: 15px;
            }
        }
    }
}

/* Extra Large devices */
@media (min-width: 1200px) {

    .style_page__RjZhJ {
        min-height: 89.65vh;
        display: flex;
        justify-content: center;
        align-items: center;

        .style_main__L3HTT {
            display: grid;
            height: fit-content;
            grid-template-columns: 1fr auto auto;
            width: 70%;
            justify-items: center;
            max-width: 990px;
            align-items: center;
            grid-template-areas:
              "title line errorCode"
              "text line errorCode"
              "backLink backLink backLink";

            .style_errorCode__juowS {
                grid-area: errorCode;
                font-size: 5rem;
                color: var(--text);
            }

            .style_title__\+EWXw {
                grid-area: title;
                font-size: 2.5rem;
                color: var(--primary);
                margin-right: auto;
            }

            .style_text__5lvqW {
                grid-area: text;
                font-size: 2rem;
                color: var(--text);
                margin-right: auto;
            }

            .style_backLink__1EIdi {
                grid-area: backLink;
                font-size: 1rem;
                color: var(--text);
                margin-top: 50px;

                .style_brajo__F3RV6 {
                    font-weight: bolder;
                    -webkit-text-decoration: underline var(--primary) 2px;
                            text-decoration: underline var(--primary) 2px;
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .style_line__yqLEE {
                grid-area: line;
                width: 5px;
                background-color: var(--text);
                height: 100%;
                margin-inline: 15px;
            }
        }
    }
}
.style_footer__6wz-l {
    width: 100%;
    background-image: none !important;
    display: flex;
    justify-content: center;
    box-shadow: inset 1px 87px 55px -83px rgba(0,0,0,0.75);

    .style_footerBox__AWOo8 {
        display: grid;
        max-width: 800px;
        width: 100%;
        grid-template-columns: 1fr 0.1fr 1fr 1fr auto;
        grid-template-rows: repeat(3, auto);
        padding: 40px 0 20px 0;
        grid-row-gap: 5px;
        row-gap: 5px;

        .style_contactSvg__01ZxE {
            cursor: pointer;
        }

        .style_contactText__Tgwq2 {
            cursor: pointer;
            grid-column: span 2;

            &:hover {
                text-decoration: underline;
            }
        }

        .style_brajoLogo__qBeqy {
            grid-row: span 4;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            margin-inline: auto;
        }

        .style_gdprSvg__d6iuB {
            cursor: pointer;
        }

        .style_gdprText__4KiMH {
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .style_footerLogoText__M4Me2 {
            margin-inline: auto;
        }

        svg {
            height: 18px;
            width: 18px;
            margin-right: 10px;
            path {
                fill: var(--text);
            }
        }

        .style_footerSpacer__Z83jx {
            height: 3px;
            border-radius: 5px;
            background-color: var(--text);
            grid-column: span 5;
            margin: 20px 0 10px 0;
        }

        .style_socials__NDd3l {
            grid-column: span 4;
            margin-inline: auto;
            display: flex;
            column-gap: 20px;
            width: 100%;

            .style_copyrights__85htI {
                color: var(--text);
                margin-left: 10px;
            }

            .style_qilxy__9ky1G {
                margin-left: auto;
                margin-right: 15px;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }

            svg {
                height: 20px;
                width: 20px;
                margin: 0;
                path {
                    fill: var(--text);
                }
            }
        }
    }

}
[web-theme="light"] {
  --text: #222831;
  --background: #EEEEEE;
  --primary: #00ADB5;
  --secondary: #B9BEC6;
  background-color: #eeeeee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%274%27 height=%274%27 viewBox=%270 0 4 4%27%3E%3Cpath fill=%27%23222831%27 fill-opacity=%270.38%27 d=%27M1 3h1v1H1V3zm2-2h1v1H3V1z%27%3E%3C/path%3E%3C/svg%3E");
}

[web-theme="dark"] {
  --text: #EEEEEE;
  --background: #222831;
  --primary: #00ADB5;
  --secondary: #393E46;
  background-color: #222831;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%274%27 height=%274%27 viewBox=%270 0 4 4%27%3E%3Cpath fill=%27%23ffffff%27 fill-opacity=%270.20%27 d=%27M1 3h1v1H1V3zm2-2h1v1H3V1z%27%3E%3C/path%3E%3C/svg%3E");
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: Nunito;
  color: var(--text);
  font-size: 16px;
  /* background: rgba(0,100,0, 0.07)!important; */

  .empty {
    color: #00000000 !important;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@media (max-width: 319.98px) {

  .default {
    display: none;
  }

  .unsuportedRess {
    height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
  }

}


@media (min-width: 319.98px) {

  .unsuportedRess {
    display: none;
  }

  .default {
    overflow-x: hidden;
  }

}

/*# sourceMappingURL=main.b39937a9.css.map*/