.flex {
    display: flex;
}

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

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

.inline-block {
    display: inline-block;
}

.width-max-content {
    width: max-content;
}

.height-max-content {
    height: max-content;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.rotate-c-1 {
    transform: rotate(1deg);
}

.rotate-c-2 {
    transform: rotate(2deg);
}

.rotate-c-5 {
    transform: rotate(5deg);
}

.rotate-c-90 {
    transform: rotate(90deg);
}

.rotate-cc-1 {
    transform: rotate(-1deg);
}

.rotate-cc-2 {
    transform: rotate(-2deg);
}

.rotate-cc-5 {
    transform: rotate(-5deg);
}

.rotate-cc-90 {
    transform: rotate(-90deg);
}

.transition-half-second {
    transition: opacity 0.5s ease-in-out;
}

.transition-second {
    transition: opacity 1.5s ease-in-out;
}

.display-none {
    display: none;
}

.opacity-zero {
    opacity: 0;
}

.opacity-one {
    opacity: 1;
}

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

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

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

.justify-items-center {
    justify-items: center;
}

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

.background-whitesmoke {
    background-color: whitesmoke;
}

.background-grey {
    background-color: grey;
}

.background-darkgrey {
    background-color: darkgrey;
}

.background-fringe-blue {
    background-color: #068dbc;
}

.bottom-border-lightgrey {
    border-bottom: 1px solid lightgrey;
}

.border-grey {
    border: 1px solid grey;
}

.border-none {
    border: none;
}

.text-whitesmoke {
    color: whitesmoke;
}

.text-yellow-search {
    color: #cfb52f;
}

.text-fringe-blue {
    color: #068dbc;
}

.text-royal-blue {
    color: royalblue;
}

.text-notebook-brown {
    color: #c09468;
}

.text-notebook-light-brown {
    color: #eadcc6;
}

.text-darkgrey {
    color: darkgrey;
}

.text-blackboard-grey {
    color: #b3bec3;
}

.text-grey {
    color: grey;
}

.text-black {
    color: black;
}

.font-x-small {
    font-size: x-small;
}

.font-small {
    font-size: small;
}

.font-medium {
    font-size: medium;
}

.font-large {
    font-size: large;
}

.font-x-large {
    font-size: x-large;
}

.font-xx-large {
    font-size: xx-large;
}

.fw-400 {
    font-weight: 400;
}

.font-bold {
    font-weight: 600;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default !important;
}