@charset "UTF-8";

@font-face {
    font-family: unicons;
    src: url(/static_files/fonts/unicons.woff) format("woff");
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    line-height: 20px;
    font-size: .875rem;
    -webkit-font-smoothing: antialiased;
    background-color: rgb(40, 40, 40);
    color: white;
}


.error {
    color: red;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.box {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.8);
    border-radius: 24px;
    /* border: solid 1px black; */
    padding: 48px;
    flex-direction: column;
    display: inline-flex;
    align-items: center;
}



/* /////////////////////////// */

/* se-floter-dialog */
.se-floter-dialog .floaterConfirm {
    display: block;
    position: absolute;
}

.se-floter-dialog .buttons {
    display: inline;
    margin: 15px;
}

.se-floter-dialog .cancel {
    background-color: rgb(43, 45, 49);
    ;
}

.se-floter-dialog .confirm {
    background-color: red;
}

.se-floter-dialog .wrapper {
    float: none;
    display: inline-block;
    background-color: white;
    border-width: thick;
    border-style: solid;
}



/* ////////////////////////// */
/* navbutton */
se-navbutton {
    cursor: pointer;
    width: fit-content;
    display: block;
    color: rgb(149, 155, 163);
    font-size: larger;
    line-height: 36px;
    font-size: 18px;
}

se-navbutton:hover {
    /* color: red; */
    background-color: rgb(54, 55, 60);
}

se-navbutton:active {
    background-color: rgb(110, 110, 110);
    /* color: rgb(255, 255, 255); */
}

se-navbutton::before {
    content: " ";
    padding-right: 5px;
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22w-6%20h-6%20text-gray-800%20dark%3Atext-white%22%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M5%207h14M5%2012h14M5%2017h14%22%2F%3E%0A%3C%2Fsvg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

se-navbutton>div {
    display: inline-block;
}

se-inscriptions>div {
    border: 1px solid black;
    padding: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    display: inline-block;
    border-radius: 20px;
}

se-inscriptions>.active-date {
    background-color: green;
    font-weight: 800;
}




/* /////////////////////////////////////////// */
.side-nav {}

.side-nav>.user::before {}

a {
    cursor: pointer;
    width: fit-content;
    display: block;
    color: blue;
    text-decoration-line: none;
}

a:hover {
    color: red;
}

.menu-button-active {
    color: rgb(255, 255, 255);
}

.menu-title {
    font-size: 18px;
    line-height: 36px;
}

.personel-list .header,
.personel-list .list {
    grid-template-columns: .5fr .5fr 2fr 2fr 2fr;
}

.sessions-list .header,
.sessions-list .list {
    grid-template-columns: .25fr .5fr 2fr;
}

.tags-list .header,
.tags-list .list {
    grid-template-columns: .25fr .5fr 2fr 2fr;
}


.button {
    border-radius: 16px;
    background-color: hsl(0, 100%, 50%);
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    height: 56px;
    align-items: center;
    padding: 6px 24px;
    transition: box-shadow .08s linear, min-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: box-shadow .08s linear, min-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 1000;
    font-size: large;
}

.button:hover {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
    /* background-color: #c2e7ff; */
}

.add-user::before {
    min-width: 48px;
    background-size: 24px;
    background-image: url(/static_files/addUser.svg);
    height: 24px;
    width: 24px;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
}

.button>se-svg {
    padding-right: 6px;
}

.login::before {
    /* min-width: 24px; */
    /* background-size: 24px; */
    /* background-color: white; */
    /* background-image: url(/static_files/icons/outline/arrows/arrow-left-to-bracket.svg); */
    /* mask-image: url("/static_files/icons/outline/arrows/arrow-left-to-bracket.svg"); */

    height: 24px;
    width: 24px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    content: " ";
}

.list:hover {
    background-color: rgb(54, 55, 60);
}

.list .header {
    display: grid;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 5px;
}

.list .list {
    display: grid;
}

.list .rank {
    /* display: flex; */
    flex-grow: 1;
    min-width: 60px;
    max-width: 70px;
}

.list .last-name {
    /* display: flex; */
    flex-grow: 3;
    /* min-width: 60px;
    max-width: 70px; */
}

.list .first-name {
    /* display: flex; */
    flex-grow: 3;
    /* min-width: 60px;
    max-width: 70px; */
}

.list .tags {
    /* display: flex; */
    flex-grow: 2;
    display: inline-block;
    padding-right: 5px;
    /* min-width: 60px;
    max-width: 70px; */
}

.tag {
    display: inline-block;
    background-color: cadetblue;
    margin-right: 5px;
}

.toolbar {
    width: 75px
}

.row-action {
    border-radius: 16px;

    width: 25px;
    /* display: inline; */
    display: inline-block;
    content: "";
    user-select: none;
    cursor: pointer;
    display: inline-flex;
    height: 24px;
    align-items: center;
    /* padding-right: 24px; */
    transition: box-shadow .08s linear, min-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: box-shadow .08s linear, min-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.row-action:hover {
    background-color: rgba(32, 33, 36, 0.059)
}

.row-action::after {
    /* min-width: 48px; */
    background-size: 20px;
    background-image: url(/static_files/editUser.svg);
    height: 24px;
    width: 24px;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
}

.FormRow {
    padding: 6px;
    width: 100%;
}

.FormRow>input {
    width: 100%;
    font-size: 16px;
    height: 28px;
    margin: 1px 1px 0 1px;
    padding: 13px 15px;
}

form {
    width: 100%;
}