@charset "UTF-8";

.block
{
    display : inline-block;
}

.fill
{
    width  : 100%;
    height : 100%;
}
.h-fill
{
    width  : 100%;
}
.v-fill
{
    height : 100%;
}

.lt
{
    text-align : start;
}
.ct
{
    text-align : center;
}
.rt
{
    text-align : end;
}

.flex-1
{
    flex : 1;
}
.flex-2
{
    flex : 2;
}
.flex-3
{
    flex : 3;
}
.flex-4
{
    flex : 4;
}
.flex-5
{
    flex : 5;
}
.flex-6
{
    flex : 6;
}
.flex-7
{
    flex : 7;
}
.flex-8
{
    flex : 8;
}
.flex-9
{
    flex : 9;
}
.flex-wrap
{
    flex-wrap : wrap;
}

.space
{
    display    : flex;
    flex       : 1 1 0;
    min-width  : 0;
    min-height : 0;
}

.col
{
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
    justify-content : flex-start;
}
.col.lt
{
    align-items : start;
}
.col.ct
{
    align-items : center;
}
.col.rt
{
    align-items : end;
}
.col.h-stretch
{
    align-items : stretch;
}
.col.up
{
    justify-content : start;
}
.col.md
{
    justify-content : center;
}
.col.dn
{
    justify-content : end;
}
.col.v-stretch
{
    justify-content : stretch;
}

.row
{
    display         : flex;
    flex-direction  : row;
    align-items     : flex-start;
    justify-content : flex-start;
}
.row.lt
{
    justify-content : start;
}
.row.ct
{
    justify-content : center;
}
.row.rt
{
    justify-content : end;
}
.row.up
{
    align-items : start;
}
.row.md
{
    align-items : center;
}
.row.dn
{
    align-items : end;
}
.row.h-stretch
{
    justify-content : stretch;
}
.row.v-stretch
{
    align-items : stretch;
}

.margin-2
{
    margin : 2px;
}
.margin-4
{
    margin : 4px;
}
.margin-8
{
    margin : 8px;
}
.margin-16
{
    margin : 16px;
}

.l-margin-2
{
    margin-left : 2px;
}
.l-margin-4
{
    margin-left : 4px;
}
.l-margin-8
{
    margin-left : 8px;
}
.l-margin-16
{
    margin-left : 16px;
}

.r-margin-2
{
    margin-right : 2px;
}
.r-margin-4
{
    margin-right : 4px;
}
.r-margin-8
{
    margin-right : 8px;
}
.r-margin-16
{
    margin-right : 16px;
}

.h-margin-2
{
    margin-left  : 2px;
    margin-right : 2px;
}
.h-margin-4
{
    margin-left  : 4px;
    margin-right : 4px;
}
.h-margin-8
{
    margin-left  : 8px;
    margin-right : 8px;
}
.h-margin-16
{
    margin-left  : 16px;
    margin-right : 16px;
}

.padding-2
{
    padding : 2px;
}
.padding-4
{
    padding : 4px;
}
.padding-8
{
    padding : 8px;
}
.padding-16
{
    padding : 16px;
}

/* Для сокрытия элементов HTML‑страницы до завершения инициализации фреймворка AlpineJS */
[x-cloak]
{
    display : none !important;
}

/* Временное */

.menu-bar
{
    display          : flex;
    align-items      : center;
    width            : 100%;
   /* background-color : #000000;*/
}
.menu-ctrl
{
    display : inline-block;
    margin  : 5px;
    padding : 5px;
}
.menu-ctrl:hover
{
    cursor : pointer;
}
.menu-ctrl.normal
{
    color            : #000000;
    background-color : #ffffff;
}
.menu-ctrl.active
{
    color            : #ffffff;
    background-color : #dc143c;
}
.menu-ctrl.locked
{
    color            : #c0c0c0;
    background-color : #ffffff;
}
.menu-ctrl.invert
{
    color            : #ffffff;
}
.normal
{
    color            : #000000;
    background-color : #ffffff;
}
.locked
{
    color            : #c0c0c0;
    background-color : #ffffff;
}
.clickable
{
    color : #4fafff !important;
}
.clickable:hover
{
    cursor : pointer;
}