:root {
    --disabled-color: #999;
}

/* POSITIONING */

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.display-flex {
    display: flex;
}

.display-flex-column {
    display: flex;
    flex-direction: column;
}

.display-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.center-childs {
    align-items: center;
    justify-content: center;
}

.center-childs-vertical {
    align-items: center;
}

.center-childs-horizontal {
    justify-content: center;
}

.align-baseline {
    align-items: baseline;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.space-evenly {
    justify-content: space-evenly;
}

.justify-end {
    justify-content: flex-end;
}

.flex-grow {
    flex-grow: 1;
}

.flex-1 {
    flex: 1;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-25 {
    gap: 25px;
}

.gap-30 {
    gap: 30px;
}

.gap-35 {
    gap: 35px;
}

.gap-40 {
    gap: 40px;
}

.gap-45 {
    gap: 45px;
}

.gap-50 {
    gap: 50px;
}

.gap-55 {
    gap: 55px;
}

.gap-60 {
    gap: 60px;
}

.gap-65 {
    gap: 65px;
}

.gap-70 {
    gap: 70px;
}

.gap-75 {
    gap: 75px;
}

.gap-80 {
    gap: 80px;
}

.gap-85 {
    gap: 85px;
}

.gap-90 {
    gap: 90px;
}

.gap-95 {
    gap: 95px;
}

.gap-100 {
    gap: 100px;
}

/* SIZES */

.aspect-ratio-1 {
    aspect-ratio: 1 / 1;
}

.width-100 {
    width: 100%;
}

.width-95 {
    width: 95%;
}

.width-90 {
    width: 90%;
}

.width-85 {
    width: 85%;
}

.width-80 {
    width: 80%;
}

.width-75 {
    width: 75%;
}

.width-70 {
    width: 70%;
}

.width-65 {
    width: 65%;
}

.width-60 {
    width: 60%;
}

.width-55 {
    width: 55%;
}

.width-50 {
    width: 50%;
}

.width-45 {
    width: 45%;
}

.width-40 {
    width: 40%;
}

.width-35 {
    width: 35%;
}

.width-30 {
    width: 30%;
}

.width-25 {
    width: 25%;
}

.width-20 {
    width: 20%;
}

.width-15 {
    width: 15%;
}

.width-10 {
    width: 10%;
}

.width-8 {
    width: 8%;
}

.width-5 {
    width: 5%;
}

.height-100 {
    height: 100%;
}

.height-95 {
    height: 95%;
}

.height-90 {
    height: 90%;
}

.height-85 {
    height: 85%;
}

.height-80 {
    height: 80%;
}

.height-75 {
    height: 75%;
}

.height-70 {
    height: 70%;
}

.height-65 {
    height: 65%;
}

.height-60 {
    height: 60%;
}

.height-55 {
    height: 55%;
}

.height-50 {
    height: 50%;
}

.height-45 {
    height: 45%;
}

.height-40 {
    height: 40%;
}

.height-35 {
    height: 35%;
}

.height-30 {
    height: 30%;
}

.height-25 {
    height: 25%;
}

.height-20 {
    height: 20%;
}

.height-15 {
    height: 15%;
}

.height-12 {
    height: 12%;
}

.height-10 {
    height: 10%;
}

.height-9 {
    height: 9%;
}

.height-8 {
    height: 8%;
}

.height-7 {
    height: 7%;
}

.height-6 {
    height: 6%;
}

.height-5 {
    height: 5%;
}

/* MARGIN + PADDING */

.margin-0-auto {
    margin: 0 auto;
}

.margin-auto-0 {
    margin: auto 0;
}

.margin-0 {
    margin: 0;
}

.margin-4 {
    margin: 4%;
}

.margin-4-horizontal {
    margin: 0 4%;
}

.margin-4-vertical {
    margin: 4% 0;
}

.margin-5 {
    margin: 5%;
}

.margin-5-horizontal {
    margin: 0 5%;
}

.margin-5-vertical {
    margin: 5% 0;
}

.margin-5px {
    margin: 5px;
}

.margin-5px-horizontal {
    margin: 0 5px;
}

.margin-5px-vertical {
    margin: 5px 0;
}

.margin-10px {
    margin: 10px;
}

.margin-10px-horizontal {
    margin: 0 10px;
}

.margin-10px-vertical {
    margin: 10px 0;
}

.margin-15px {
    margin: 15px;
}

.margin-15px-horizontal {
    margin: 0 15px;
}

.margin-15px-vertical {
    margin: 15px 0;
}

.margin-20px {
    margin: 20px;
}

.margin-20px-horizontal {
    margin: 0 20px;
}

.margin-20px-vertical {
    margin: 20px 0;
}

.padding-0 {
    padding: 0;
}

.padding-100px {
    padding: 100px;
}

.padding-10 {
    padding: 10%;
}

.padding-10-horizontal {
    padding: 0 10%;
}

.padding-10-vertical {
    padding: 10% 0;
}

.padding-140px {
    padding: 140px;
}

.padding-140px-horizontal {
    padding: 0 140px;
}

.padding-140px-vertical {
    padding: 140px 0;
}

.padding-110px {
    padding: 110px;
}

.padding-110px-horizontal {
    padding: 0 110px;
}

.padding-110px-vertical {
    padding: 110px 0;
}

.padding-100px {
    padding: 100px;
}

.padding-100px-horizontal {
    padding: 0 100px;
}

.padding-100px-vertical {
    padding: 100px 0;
}

.padding-90px {
    padding: 90px;
}

.padding-90px-horizontal {
    padding: 0 90px;
}

.padding-90px-vertical {
    padding: 90px 0;
}

.padding-80px {
    padding: 80px;
}

.padding-80px-horizontal {
    padding: 0 80px;
}

.padding-80px-vertical {
    padding: 80px 0;
}

.padding-70px {
    padding: 70px;
}

.padding-70px-horizontal {
    padding: 0 70px;
}

.padding-70px-vertical {
    padding: 70px 0;
}

.padding-60px {
    padding: 60px;
}

.padding-60px-horizontal {
    padding: 0 60px;
}

.padding-60px-vertical {
    padding: 60px 0;
}

.padding-50px {
    padding: 50px;
}

.padding-50px-horizontal {
    padding: 0 50px;
}

.padding-50px-vertical {
    padding: 50px 0;
}

.padding-45px {
    padding: 45px;
}

.padding-45px-horizontal {
    padding: 0 45px;
}

.padding-45px-vertical {
    padding: 45px 0;
}

.padding-40px {
    padding: 40px;
}

.padding-40px-horizontal {
    padding: 0 40px;
}

.padding-40px-vertical {
    padding: 40px 0;
}

.padding-35px {
    padding: 35px;
}

.padding-35px-horizontal {
    padding: 0 35px;
}

.padding-35px-vertical {
    padding: 35px 0;
}

.padding-30px {
    padding: 30px;
}

.padding-30px-horizontal {
    padding: 0 30px;
}

.padding-30px-vertical {
    padding: 30px 0;
}

.padding-25px {
    padding: 25px;
}

.padding-25px-horizontal {
    padding: 0 25px;
}

.padding-25px-vertical {
    padding: 25px 0;
}

.padding-20px {
    padding: 20px;
}

.padding-20px-horizontal {
    padding: 0 20px;
}

.padding-20px-vertical {
    padding: 20px 0;
}

.padding-15px {
    padding: 10px;
}

.padding-15px-horizontal {
    padding: 0 10px;
}

.padding-15px-vertical {
    padding: 10px 0;
}

.padding-10px {
    padding: 10px;
}

.padding-10px-horizontal {
    padding: 0 10px;
}

.padding-10px-vertical {
    padding: 10px 0;
}

.padding-5px {
    padding: 5px;
}

.padding-5px-horizontal {
    padding: 0 5px;
}

.padding-5px-vertical {
    padding: 5px 0;
}

/* VISIBILITY */
.hidden {
    display: none !important;
}

/* COLORS */
.color-white {
    color: white;
}

.color-black {
    color: black;
}

.bg-color-white {
    background-color: white;
}

.bg-color-black {
    background-color: black;
}

/* FONTS */
.font-size-22 {
    font-size: 22px;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-26 {
    font-size: 26px;
}

.font-size-28 {
    font-size: 28px;
}

.font-size-30 {
    font-size: 30px;
}


.font-size-32 {
    font-size: 32px;
}


.font-size-34 {
    font-size: 34px;
}

/* TEXT */
.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

/* BUTTONS */
button {
    transition: transform 0.1s ease;
    cursor: pointer;
}

button:hover {
    transform: scale(1.02);
}

button:disabled {
    cursor: not-allowed;
    transition: none;
    transform: none;
}

/* FITTING */
.object-fit-contain {
    object-fit: contain;
}

.object-fit-cover {
    object-fit: cover;
}

/* UL, OL */
ul.no-list-style,
ol.no-list-style {
    list-style: none;
    padding-inline-start: 0;
}