/* Common styles */
:root {
    /* Common gap sizes */
    --xs-gap: 4px;
    --s-gap: 10px;
    --m-gap: 15px;
    --l-gap: 30px;
}

/* Flex row, flex column */
.fr, .fc, .ver-sb, .hor-sb, .ver-sa, .hor-sa, .hor-se, .ver-se, .ver-end, .hor-end, .cv, .ch, .cc, .xs-gap, .s-gap, .m-gap, .l-gap, .xl-gap {
    display: flex;
}
  
.fr {
    flex-direction: row;
}

.fc {
    flex-direction: column;
}

/* Position */
.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* Single line of text */
.sline { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cursor */
.pointer {
    cursor: pointer;
}

/* Center */
.cc {
    justify-content: center;
    align-items: center;
} 

/* Center horizontally */
.fr.ch, .ch{
    justify-content: center;
} .fc.ch {
    align-items: center;
}

/* Center vertically */
.fr.cv, .cv:not(.fc.cv){
    align-items: center;
} .fc.cv {
    justify-content: center;
}

/* Space between horizontally */
.fr.hor-sb {
    justify-content: space-between;
}

.fc.hor-sb {
    align-items: space-between;
}

/* Space between vertically */
.fc.ver-sb {
    justify-content: space-between;
}
.fr.ver-sb {
    align-items: space-between;
}

/* Space around horizontally */
.fr.hor-sa {
    justify-content: space-around;
}

.fc.hor-sa {
    align-items: space-around;
}

/* Space around vertically */
.fc.ver-sa {
    justify-content: space-around;
}

.fr.ver-sa {
    align-items: space-around;
}

/* Space evenly horizontally */
.fr.hor-se {
    justify-content: space-evenly;
}

.fc.hor-se {
    align-items: space-evenly;
}

/* Space evenly vertically */
.fc.ver-se {
    justify-content: space-evenly;
} 

.fr.ver-se {
    align-items: space-evenly;
}

/* Flex end horizontally */
.fr.hor-end {
    justify-content: flex-end;
}

.fc.hor-end {
    align-items: flex-end;
}

/* Flex end vertically */
.fc.ver-end {
    justify-content: flex-end;
}

.fr.ver-end {
    align-items: flex-end;
}

/* Full width */
.fw {
    width: 100%;
}

/* Full height */
.fh {
    height: 100%;
}

/* Gaps */
.xs-gap {
    gap: var(--xs-gap);
} .s-gap {
    gap: var(--s-gap);
} .m-gap {
    gap: var(--m-gap);
} .l-gap {
    gap: var(--l-gap);
} .xl-gap {
    gap: var(--xl-gap);
}

/* Margin */
.xs-mar {
    margin: var(--xs-gap);
} .s-mar {
    margin: var(--s-gap);
} .m-mar {
    margin: var(--m-gap);
} .l-mar {
    margin: var(--l-gap);
} .xl-mar {
    margin: var(--xl-gap);
}

/* Padding */
.xs-pad {
    padding: var(--xs-gap);
} .s-pad {
    padding: var(--s-gap);
} .m-pad {
    padding: var(--m-gap);
} .l-pad {
    padding: var(--l-gap);
} .xl-pad {
    padding: var(--xl-gap);
}

/* Text size */
.xs-text {
    font-size: var(--tiny-text);
} .s-text {
    font-size: var(--small-text);
} .m-text {
    font-size: var(--medium-text);
} .l-text {
    font-size: var(--large-text);
} .xl-text {
    font-size: var(--xl-text);
} .xxl-text {
    font-size: var(--xxl-text);
}

.sline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}