.timetable {
}

.timetable input::-webkit-outer-spin-button,
.timetable input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
.timetable input[type=number] {
    -moz-appearance: textfield;
}

.timetable-row {
    display: grid;
    grid-auto-flow: row;
}
.timetable-row > div {
    margin: 0 0.25em;
}

.timetable-row.client{
    background-color: var(--tt-bg-color);
    color: var(--tt-color);
}

.timetable .col-npp{
    font-family: 'Roboto Condensed', sans-serif;
    grid-area: npp;
    width: 2em;
    margin: 0;
    padding: 1em 0;
}

.timetable .col-time{
    font-family: 'Roboto Condensed', sans-serif;
    grid-area: time;
    max-width: 4em;
}
.timetable .col-group {
    grid-area: text;
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1.2;
}
.timetable .client .col-group a {
    /*color: var(--tt-link-color);*/
    color: white;
    text-decoration: underline!important;
}
#timetable-current a {
    color: white!important;
    text-decoration: underline!important;
}
.timetable .dance-names{
    font-size: 0.7em;
    font-weight: normal;
    opacity: 0.6;
}

.timetable .col-heats{
    line-height: 1.2;
    grid-area: heats;
    justify-self: start;
}

/*квадратики с номерами текущем туре*/
.reg-num-box {
    padding: 1rem;
}

.reg-num-box.bordered
{
    border: gray solid 2px;
    border-radius: 4px;
}

.reg-num {
    font-weight: bold;
    text-align: start;
}

.reg-num-back, .reg-num-fwd, .set-cur-num {
    cursor: pointer;
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.timetable .heat-num {
    font-weight: bold;
    color: var(--tt-bg-color);
}

#timetable-current {
    -text-align: center;
}

#timetable-current .group-name {
    font-size: 1.4em;
    line-height: 1.1;
}
#timetable-current .heat-table th,
#timetable-current .heat-table td {
    background-color: var(--bs-warning);
}


.timetable-row.admin {
    background-color: white;
    color: black;
    /*padding-top: 1em;*/
    /*padding-bottom: 0.5em;*/
    border-bottom: 1px dotted #00000077;
}

.timetable-row.admin.closed .col-npp {
    background-color: silver;
}

.timetable-row.admin input, .timetable-row.admin .form-control {
    padding: 2px 4px;
    font-size: 14px;
}
.timetable-row .save-link {
    line-height: 1;
}


.timetable-row.admin .col-duration {
    grid-area: duration;
}
.timetable-row.admin .col-index {
    grid-area: index;
}
.timetable-row.admin .col-parent {
    grid-area: parent;
}
.timetable-row.admin .col-control {
    grid-area: control;
}
.timetable.show-fios .timetable-row.admin .col-dancer-fios {
    grid-area: fios;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: flex-start;
    justify-self: stretch;
}
.timetable.show-fios .timetable-row.admin .dancer-fios-heat {
    flex: 0 1 auto;
    font-size: small;
    line-height: 1.25;
}
.timetable.show-fios .timetable-row.admin .dancer-fios-heat-title {
    color: #00000099;
    font-weight: 600;
    margin-bottom: 0.15em;
}
.timetable-row.client .grid {
    display: grid;
    padding: 1em 0;
    gap: 0.5em;
}
/****************** MOBILE *************************/
@media (max-width: 760px) {
    .timetable.client, #timetable-current {
        font-size: var(--tt-font-size);
    }

    .timetable-row.client .grid {
        grid-template-areas:
        "time text"
        "heats heats"
    ;
        grid-template-columns: 3em auto;
        grid-template-rows: auto auto;
    }

    .timetable-row .col-time {
        text-align: start!important;
        margin-left: 0.5em;
    }
    .timetable-row .col-heats {
        margin-left: 0.5em;
    }
    .timetable-row .col-group, .timetable-row .col-group a {
        font-size: 1.1em;
        font-weight: 600;
    }
    #timetable-current {
        text-align: start;
    }
    #timetable-current .group-name, #timetable-current .group-name a {
        font-size: 1.1em;
        font-weight: 600;
    }
    #timetable-current .heat-table .header {
        font-weight: normal;
        font-size: 0.7em;
        line-height: 1;
    }

    .timetable-row.admin{
        grid-template-areas:
        "npp      time     text   text  control"
        "heats    heats    heats  heats control"
        "duration duration index  parent parent"
    ;
        grid-template-columns: 2em 3em auto 8em;
        grid-template-rows: repeat(auto-fit, minmax(1em, auto));
    }

    .timetable.show-fios .timetable-row.admin{
        grid-template-areas:
        "npp      time     text   text   control"
        "fios     fios     fios   fios   fios"
        "heats    heats    heats  heats  heats"
        "duration duration index  parent parent"
    ;
        grid-template-columns: 2em 3em auto 8em 2em;
        grid-template-rows: repeat(auto-fit, minmax(1em, auto));
    }

    }

/****************** SMALL *************************/
@media  (min-width:761px) and (max-width: 1200px) {
    .timetable.client, #timetable-current {
        font-size: calc(var(--tt-font-size) * 1.2);
    }
    .timetable-row.client .grid{
        grid-template-areas:
        "npp time text"
        "empty empty heats"
        ;
        grid-template-columns: 2em 4em auto;
        grid-template-rows: auto auto;
    }
    .timetable-row.client .col-group {
        font-size: 1.2em;
        font-weight: bold;
    }
    .reg-num.client {
        font-size: 1.2em;
        padding: 0.2em;
    }
    #timetable-current .data-block {
        justify-content: center;
    }

    .timetable-row.admin{
        grid-template-areas:
        "npp   time  text  duration index parent control"
        "empty empty heats heats    heats heats  control"
    ;
        grid-template-columns: 2em 3em auto 12em 4em 10em 2em;
        grid-template-rows: 3em auto;
    }
    .timetable-row .col-control {
        flex-direction: column;
    }

    .timetable.show-fios .timetable-row.admin{
        grid-template-areas:
        "npp time text duration index parent control"
        "fios fios fios fios fios fios fios"
        ". . heats heats heats heats heats"
    ;
        grid-template-columns: 2em 3em auto 12em 4em 10em 2em;
        grid-template-rows: 3em auto auto;
    }

}

/****************** FULLHD *************************/
@media  (min-width: 1201px) {
    .timetable .client, #timetable-current .client {
        font-size: calc(var(--tt-font-size) * 1.5);
    }
    .timetable-row.client .grid{
        display: grid;
        grid-template-areas:
        "time text heats"
        ;
        grid-template-columns: 3em 40% auto;
    }
    .timetable-row.client .col-group {
        font-size: 1.2em;
        font-weight: bold;
    }
    .reg-num {
        font-size: 1.7em;
        padding: 0.5em;
    }
    #timetable-current .data-block {
        justify-content: center;
    }

    .timetable-row.admin{
        grid-template-areas:
        "npp time text heats duration index parent control"
    ;
        grid-template-columns: 2em 3em 20em auto 16em 4em 6em 2em;
        grid-template-rows: auto auto;
    }
    .timetable-row .col-control {
        flex-direction: column;
    }

    .timetable.show-fios .timetable-row.admin{
        grid-template-areas:
        "npp time text heats duration index parent control"
        "fios fios fios fios fios fios fios fios"
    ;
    }
}