#all-randos-commands, #corner-randos-commands {
    background-color: var(--box--background);
    border: 1px solid var(--box--light--border);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 3px 0px 5px 0px;
}

#all-search-cmds {
    display: flex;
}

#all-track-cmds, #corner-track-cmds {
    display: none;
}

#all-randos-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

#all-randos-box, #corner-rando-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 5px;
}

#all-randos-map, #corner-randos-map {
    width: 96vw;
    height: 500px;
    border: 1px solid var(--box--light--border);
    box-sizing: border-box;
}

#all-box {
    display: flex;
    justify-content: center;
    display: none;
}

#all-table tr {
    transition: background-color 1s;
}

#all-table tr:hover {
    background-color: var(--hover--selected);
}

#all-border {
    border: 2px solid var(--box--border);
    padding: 5px;
    border-radius: var(--box--radius);
    max-height: 700px;
    overflow-y: auto;
}

#all-border::-webkit-scrollbar {
    display: none;
}

#all-list {
    background-image: url("../pictures/icons/list.png");
}

#all-search {
    background-image: url("../pictures/icons/search.png");
}

#all-filter {
    background-image: url("../pictures/icons/filter.png");
}
 
#all-table td , #all-table th {
    border-bottom: 1px solid var(--box--light--border);
    text-align: left;
    padding: 10px 5px;
}

#all-table {
    position: relative;
    border-collapse: collapse;
    background-color: var(--box--background);
    margin: auto;
    max-width: min(96vw, 300px);
}

#all-filter-box , #stats-box {
    background: rgba(255,255,255,0.6);
    box-shadow: var(--small--shadow);
    border-radius: var(--box--radius);
    padding-bottom: 5px;
    padding-right: 5px;
    display: none;
}

#elevation-box {
    background: rgba(255,255,255,0.8);
    box-shadow: var(--small--shadow);
    border-radius: var(--box--radius);
    display: none;
    position: relative;
}

#all-stats td , #all-stats th {
    text-align: left;
    padding: 3px 2px;
}

#stats-box {
    background: rgba(255,255,255,0.8);
    border-collapse: collapse;
}

.filter-level{
    width: 70px;
    box-sizing: border-box;
}

#commands-model {
    display: none;
}

.commands-model {
    position: absolute;
    right: 2px;
    top: 2px;
    height: 24px;
    white-space: normal;
    display: flex;
    z-index: 1080;
}

.edit-model {
    position: absolute;
    left: 0px;
    top: 0px;
    white-space: normal;
    display: flex;
    background-color: var(--box--background);
    z-index: 1080;
}

#edit-content {
    background-color: var(--box--background);
}

.control-command {
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    border: 2px solid var(--box--border);
    background-color: var(--box--background);
    box-shadow: var(--tiny--shadow);
    margin-left: 5px;
    background-size: 16px;
    cursor: pointer;
}

.control-command:hover {
    background-color: var(--hover--selected);
}

.view {
    background-image: url("../pictures/icons/beye.png");
}

.delete {
    background-image: url("../pictures/icons/btrash.png");
}

.edit {
    background-image: url("../pictures/icons/edit.png");
}

.close {
    background-image: url("../pictures/icons/bclose.png");
}

.ok {
    background-image: url("../pictures/icons/OK.png");
}

#week-rando-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#carte {
    width: 500px;
    height: 500px;
    border: 1px solid var(--box--light--border);
    margin: 10px 0px 0px 10px;
}

#week-rando {
    border: 3px solid var(--box--border);
    border-collapse: collapse;
    background-color: var(--box--background);
    margin: auto;
}

#week-rando td {
    border: 2px solid var(--box--border);
    padding: 5px;
}

#week-rando th {
    border: 2px solid var(--box--border);
    padding: 10px 5px;
}

#week-descrs {
    display: flex;
    flex-direction: column;
}

#week-descr {
    border: 1px solid var(--box--light--border);
    border-radius: var(--box--radius);
    padding: 10px;
    flex: none;
}

#week-tabs {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 7px;
}

.week-tab {
    border: 1px solid var(--box--border);
    border-radius: var(--box--radius);
    padding: 3px;
    box-shadow: var(--large--shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s;
}

.week-tab:hover {
    background-color: var(--hover--selected);
}


.week-square {
    border: 1px solid var(--box--border);
    width: 35px;
    height: 20px;
}

#week-info {
    margin: 0px 9px;
    width: 22px;
    height: 22px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../pictures/icons/info.png");
}

#week-blue {
    background-color: blue;
}

#week-red {
    background-color: red;
}

#week-violet {
    background-color: rgb(182, 27, 182);
}

#week-green {
    background-color: rgb(0, 255, 13);
}

#week-yellow {
    background-color: rgb(229, 255, 0);
}

.week-tab-active {
    box-shadow: var(--small--shadow);
    background-color: var(--hover--selected);
}

.week-descr-text {
    white-space: pre-wrap;
    display: none;
    flex-direction: column;
}

.week-commands {
    display: flex;
    margin-top: 10px;
}

.week-command {
    width: 28px;
    height: 28px;
    border: 2px solid rgb(48, 48, 48);
    box-sizing: border-box;
    border-radius: 2px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: background-color 0.5s;
    box-shadow: var(--tiny--shadow);
}

.week-command:hover {
    background-color: var(--hover--selected);
}

.week-track {
    font-weight: 700;
}

.corner-title {
    text-align: center;
    font-size: var(--font--medium);
    font-weight: 700;
}

.all-command {
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
}

.all-label{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.photo-command {
    width: 24px;
    height: 24px;
    background-size: 18px;
    margin-left: 0px;
    cursor: pointer;
}

.albums-box {
    display: flex;
    justify-content: center;
    box-shadow: var(--large--shadow);
    border: 2px solid var(--box--border);
    padding: 5px;
    border-radius: var(--box--radius);
    background-color: var(--box--background);
}

.albums-table tr {
    transition: background-color 1s;
}

.albums-table tr:hover {
    background-color: var(--hover--selected);
}

.albums-table td , .albums-table th {
    border-bottom: 1px solid var(--box--light--border);
    text-align: left;
    padding: 10px 5px;
}

.albums-table {
    border-collapse: collapse;
    background-color: var(--box--background);
    margin: auto;
}

.albums-commands {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}

.albums-close {
    width: 26px;
    height: 26px;
    border: 2px solid rgb(48, 48, 48);
    box-sizing: border-box;
    border-radius: 2px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: background-color 0.5s;
    background-image: url("../pictures/icons/OK.png");
}

.albums-close:hover {
    background-color: var(--hover--selected);
}

.model {
    display: none;
}

@media screen and (min-width: 780px) {
    #all-randos-map, #corner-randos-map {
        width: 700px;
        height: 700px;
    }
    
    .all-command {
        margin-right: 10px;
        margin-left: 10px;
    }
    
    #cellwidth {
        min-width: 100px;
    }
    
}