body {
    padding: 0;
    margin: 0;
}

.hide {
    display: none;
}

button {
    outline: none;
    border: none;
    cursor: pointer;
}

button:focus {
    outline: none;
}

button:active {
    transform: translateY(3px);
}

button:disabled {
    background-color: rgba(143, 158, 179, .7);
    color: #67748e;
}

input[type=number] {
    outline: none;
}

.font-xxs {
    font-size: .6rem;
}

.font-xs {
    font-size: .650rem;
}

.font-sm {
    font-size: .75rem;
}

.font-md {
    font-size: 1rem;
}

/*select {
    outline: none;
    border: none;
    -webkit-user-select: none;
}

option {
    outline: none;
}


select:focus {
    outline: none;
    -webkit-user-select: none;
}

select:focus-within {
    outline: none;
    -webkit-user-select: none;
}*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type="checkbox"]:not(:checked) {
    background-color: rgb(203 213 225); 
}


.overflow-h-3xl {
    min-height: fit-content;
    max-height: fit-content;
    height: 100%;
}

@media(max-height: 1000px) {

    .overflow-h-3xl {
        max-height: 920px;
    }
}

@media(max-height: 950px) {

    .overflow-h-3xl {
        max-height: 850px;
    }
}

@media(max-height: 900px) {

    .overflow-h-3xl {
        max-height: 800px;
    }
}

@media(max-height: 850px) {

    .overflow-h-3xl {
        max-height: 750px;
    }
}

@media(max-height: 800px) {

    .overflow-h-3xl {
        max-height: 700px;
    }
}

@media(max-height: 750px) {

    .overflow-h-3xl {
        max-height: 600px;
    }
}

@media(max-height: 650px) {

    .overflow-h-3xl {
        max-height: 500px;
    }
}

@media(max-height: 500px) {

    .overflow-h-3xl {
        max-height: 400px;
    }
}

@media(max-height: 350px) {

    .overflow-h-3xl {
        max-height: 200px;
    }
}


/* 2XL Grid */

.overflow-h-2xl {
    min-height: fit-content;
    max-height: fit-content;
    height: 100%;
}


@media(max-height: 1000px) {

    .overflow-h-2xl {
        max-height: 880px;
    }
}

@media(max-height: 950px) {

    .overflow-h-2xl {
        max-height: 850px;
    }
}

@media(max-height: 900px) {

    .overflow-h-2xl {
        max-height: 800px;
    }
}

@media(max-height: 850px) {

    .overflow-h-2xl {
        max-height: 750px;
    }
}

@media(max-height: 800px) {

    .overflow-h-2xl {
        max-height: 700px;
    }
}

@media(max-height: 750px) {

    .overflow-h-2xl {
        max-height: 600px;
    }
}

@media(max-height: 650px) {

    .overflow-h-2xl {
        max-height: 500px;
    }
}

@media(max-height: 500px) {

    .overflow-h-2xl {
        max-height: 400px;
    }
}

@media(max-height: 350px) {

    .overflow-h-2xl {
        max-height: 200px;
    }
}

/* XL Grid */

.overflow-h-xl {
    min-height: fit-content;
    max-height: fit-content;
    height: 100%;
}


@media(max-height: 1000px) {

    .overflow-h-xl {
        max-height: 850px;
    }
}

@media(max-height: 950px) {

    .overflow-h-xl {
        max-height: 800px;
    }
}

@media(max-height: 900px) {

    .overflow-h-xl {
        max-height: 750px;
    }
}

@media(max-height: 850px) {

    .overflow-h-xl {
        max-height: 700px;
    }
}

@media(max-height: 800px) {

    .overflow-h-xl {
        max-height: 600px;
    }
}

@media(max-height: 750px) {

    .overflow-h-xl {
        max-height: 500px;
    }
}

@media(max-height: 650px) {

    .overflow-h-xl {
        max-height: 400px;
    }
}

@media(max-height: 500px) {

    .overflow-h-xl {
        max-height: 300px;
    }
}

@media(max-height: 350px) {

    .overflow-h-xl {
        max-height: 100px;
    }
}

/* Medium Grid */