main {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    flex: 1 0 0;
    padding: 1rem;
    order: 2;
}
section#viewport {
    display: flex;
    width: 100vw;
    height: 100vh;
}

aside nav ul {
    margin: 0;
    padding: 0;
}

aside nav ul li, aside .aside-help {
    list-style: none;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all .3s ease;
}


@media (max-width: 599.98px) {
    section#viewport {
        flex-direction: column-reverse;
    }

    aside {
        width: 100%;
        height: 70px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        order: 1;
        position: sticky;
        left: 0;
        bottom: 0;
        z-index: 2;
    }
    aside nav ul {
        display: flex;
    }
    aside nav ul li, aside .aside-help {
        width: 100px;
        height: 70px;
        margin: 0;
        background-color: white;
        font-size: 25pt;
    }
    aside nav ul li.active{
        background-color: #aa8b63;
    }
    main {
        padding: .5rem .2rem;
        height: calc(100% - 80px);
    }
}

.font-size-18{
    font-size: 18pt;
}
.font-size-22{
    font-size: 22pt;
}
.font-size-28{
    font-size: 28pt;
}
.row-height {
    min-height: 60px;
}
.min-btn-width{
    min-width: 60px;
}

input[type="radio"]:disabled {
    appearance: none;
    background-color: green;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 50%;
    transform: translateY(-0.075em);
}

input[type="radio"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em gray;
}

input[type="radio"]:disabled:checked {
    background-color: darkred;
}
@media (min-width: 2560px) {
	.col-rt-1, .col-rt-2, .col-rt-3, .col-rt-4, .col-rt-5, .col-rt-6, .col-rt-7, .col-rt-8, .col-rt-9, .col-rt-10, .col-rt-11, .col-rt-12 {
		float: left;
	}
	.col-rt-12 {
		width: 100%;
	}
	.col-rt-11 {
		width: 91.66666666666666%;
	}
	.col-rt-10 {
		width: 83.33333333333334%;
	}
	.col-rt-9 {
		width: 75%;
	}
	.col-rt-8 {
		width: 66.66666666666666%;
	}
	.col-rt-7 {
		width: 58.333333333333336%;
	}
	.col-rt-6 {
		width: 50%;
	}
	.col-rt-5 {
		width: 41.66666666666667%;
	}
	.col-rt-4 {
		width: 33.33333333333333%;
	}
	.col-rt-3 {
		width: 25%;
	}
	.col-rt-2 {
		width: 16.666666666666664%;
	}
	.col-rt-1 {
		width: 8.333333333333332%;
	}
	.col-rt-pull-12 {
		right: 100%;
	}
	.col-rt-pull-11 {
		right: 91.66666666666666%;
	}
	.col-rt-pull-10 {
		right: 83.33333333333334%;
	}
	.col-rt-pull-9 {
		right: 75%;
	}
	.col-rt-pull-8 {
		right: 66.66666666666666%;
	}
	.col-rt-pull-7 {
		right: 58.333333333333336%;
	}
	.col-rt-pull-6 {
		right: 50%;
	}
	.col-rt-pull-5 {
		right: 41.66666666666667%;
	}
	.col-rt-pull-4 {
		right: 33.33333333333333%;
	}
	.col-rt-pull-3 {
		right: 25%;
	}
	.col-rt-pull-2 {
		right: 16.666666666666664%;
	}
	.col-rt-pull-1 {
		right: 8.333333333333332%;
	}
	.col-rt-pull-0 {
		right: auto;
	}
	.col-rt-push-12 {
		left: 100%;
	}
	.col-rt-push-11 {
		left: 91.66666666666666%;
	}
	.col-rt-push-10 {
		left: 83.33333333333334%;
	}
	.col-rt-push-9 {
		left: 75%;
	}
	.col-rt-push-8 {
		left: 66.66666666666666%;
	}
	.col-rt-push-7 {
		left: 58.333333333333336%;
	}
	.col-rt-push-6 {
		left: 50%;
	}
	.col-rt-push-5 {
		left: 41.66666666666667%;
	}
	.col-rt-push-4 {
		left: 33.33333333333333%;
	}
	.col-rt-push-3 {
		left: 25%;
	}
	.col-rt-push-2 {
		left: 16.666666666666664%;
	}
	.col-rt-push-1 {
		left: 8.333333333333332%;
	}
	.col-rt-push-0 {
		left: auto;
	}
	.col-rt-offset-12 {
		margin-left: 100%;
	}
	.col-rt-offset-11 {
		margin-left: 91.66666666666666%;
	}
	.col-rt-offset-10 {
		margin-left: 83.33333333333334%;
	}
	.col-rt-offset-9 {
		margin-left: 75%;
	}
	.col-rt-offset-8 {
		margin-left: 66.66666666666666%;
	}
	.col-rt-offset-7 {
		margin-left: 58.333333333333336%;
	}
	.col-rt-offset-6 {
		margin-left: 50%;
	}
	.col-rt-offset-5 {
		margin-left: 41.66666666666667%;
	}
	.col-rt-offset-4 {
		margin-left: 33.33333333333333%;
	}
	.col-rt-offset-3 {
		margin-left: 25%;
	}
	.col-rt-offset-2 {
		margin-left: 16.666666666666664%;
	}
	.col-rt-offset-1 {
		margin-left: 8.333333333333332%;
	}
	.col-rt-offset-0 {
		margin-left: 0%;
	}
}
@media (min-width: 2880px) {
	.col-rt15-1, .col-rt15-2, .col-rt15-3, .col-rt15-4, .col-rt15-5, .col-rt15-6, .col-rt15-7, .col-rt15-8, .col-rt15-9, .col-rt15-10, .col-rt15-11, .col-rt15-12 {
		float: left;
	}
	.col-rt15-12 {
		width: 100%;
	}
	.col-rt15-11 {
		width: 91.66666666666666%;
	}
	.col-rt15-10 {
		width: 83.33333333333334%;
	}
	.col-rt15-9 {
		width: 75%;
	}
	.col-rt15-8 {
		width: 66.66666666666666%;
	}
	.col-rt15-7 {
		width: 58.333333333333336%;
	}
	.col-rt15-6 {
		width: 50%;
	}
	.col-rt15-5 {
		width: 41.66666666666667%;
	}
	.col-rt15-4 {
		width: 33.33333333333333%;
	}
	.col-rt15-3 {
		width: 25%;
	}
	.col-rt15-2 {
		width: 16.666666666666664%;
	}
	.col-rt15-1 {
		width: 8.333333333333332%;
	}
	.col-rt15-pull-12 {
		right: 100%;
	}
	.col-rt15-pull-11 {
		right: 91.66666666666666%;
	}
	.col-rt15-pull-10 {
		right: 83.33333333333334%;
	}
	.col-rt15-pull-9 {
		right: 75%;
	}
	.col-rt15-pull-8 {
		right: 66.66666666666666%;
	}
	.col-rt15-pull-7 {
		right: 58.333333333333336%;
	}
	.col-rt15-pull-6 {
		right: 50%;
	}
	.col-rt15-pull-5 {
		right: 41.66666666666667%;
	}
	.col-rt15-pull-4 {
		right: 33.33333333333333%;
	}
	.col-rt15-pull-3 {
		right: 25%;
	}
	.col-rt15-pull-2 {
		right: 16.666666666666664%;
	}
	.col-rt15-pull-1 {
		right: 8.333333333333332%;
	}
	.col-rt15-pull-0 {
		right: auto;
	}
	.col-rt15-push-12 {
		left: 100%;
	}
	.col-rt15-push-11 {
		left: 91.66666666666666%;
	}
	.col-rt15-push-10 {
		left: 83.33333333333334%;
	}
	.col-rt15-push-9 {
		left: 75%;
	}
	.col-rt15-push-8 {
		left: 66.66666666666666%;
	}
	.col-rt15-push-7 {
		left: 58.333333333333336%;
	}
	.col-rt15-push-6 {
		left: 50%;
	}
	.col-rt15-push-5 {
		left: 41.66666666666667%;
	}
	.col-rt15-push-4 {
		left: 33.33333333333333%;
	}
	.col-rt15-push-3 {
		left: 25%;
	}
	.col-rt15-push-2 {
		left: 16.666666666666664%;
	}
	.col-rt15-push-1 {
		left: 8.333333333333332%;
	}
	.col-rt15-push-0 {
		left: auto;
	}
	.col-rt15-offset-12 {
		margin-left: 100%;
	}
	.col-rt15-offset-11 {
		margin-left: 91.66666666666666%;
	}
	.col-rt15-offset-10 {
		margin-left: 83.33333333333334%;
	}
	.col-rt15-offset-9 {
		margin-left: 75%;
	}
	.col-rt15-offset-8 {
		margin-left: 66.66666666666666%;
	}
	.col-rt15-offset-7 {
		margin-left: 58.333333333333336%;
	}
	.col-rt15-offset-6 {
		margin-left: 50%;
	}
	.col-rt15-offset-5 {
		margin-left: 41.66666666666667%;
	}
	.col-rt15-offset-4 {
		margin-left: 33.33333333333333%;
	}
	.col-rt15-offset-3 {
		margin-left: 25%;
	}
	.col-rt15-offset-2 {
		margin-left: 16.666666666666664%;
	}
	.col-rt15-offset-1 {
		margin-left: 8.333333333333332%;
	}
	.col-rt15-offset-0 {
		margin-left: 0%;
	}
}
@media (min-width: 3840px) {
	.col-uhd-1, .col-uhd-2, .col-uhd-3, .col-uhd-4, .col-uhd-5, .col-uhd-6, .col-uhd-7, .col-uhd-8, .col-uhd-9, .col-uhd-10, .col-uhd-11, .col-uhd-12 {
		float: left;
	}
	.col-uhd-12 {
		width: 100%;
	}
	.col-uhd-11 {
		width: 91.66666666666666%;
	}
	.col-uhd-10 {
		width: 83.33333333333334%;
	}
	.col-uhd-9 {
		width: 75%;
	}
	.col-uhd-8 {
		width: 66.66666666666666%;
	}
	.col-uhd-7 {
		width: 58.333333333333336%;
	}
	.col-uhd-6 {
		width: 50%;
	}
	.col-uhd-5 {
		width: 41.66666666666667%;
	}
	.col-uhd-4 {
		width: 33.33333333333333%;
	}
	.col-uhd-3 {
		width: 25%;
	}
	.col-uhd-2 {
		width: 16.666666666666664%;
	}
	.col-uhd-1 {
		width: 8.333333333333332%;
	}
	.col-uhd-pull-12 {
		right: 100%;
	}
	.col-uhd-pull-11 {
		right: 91.66666666666666%;
	}
	.col-uhd-pull-10 {
		right: 83.33333333333334%;
	}
	.col-uhd-pull-9 {
		right: 75%;
	}
	.col-uhd-pull-8 {
		right: 66.66666666666666%;
	}
	.col-uhd-pull-7 {
		right: 58.333333333333336%;
	}
	.col-uhd-pull-6 {
		right: 50%;
	}
	.col-uhd-pull-5 {
		right: 41.66666666666667%;
	}
	.col-uhd-pull-4 {
		right: 33.33333333333333%;
	}
	.col-uhd-pull-3 {
		right: 25%;
	}
	.col-uhd-pull-2 {
		right: 16.666666666666664%;
	}
	.col-uhd-pull-1 {
		right: 8.333333333333332%;
	}
	.col-uhd-pull-0 {
		right: auto;
	}
	.col-uhd-push-12 {
		left: 100%;
	}
	.col-uhd-push-11 {
		left: 91.66666666666666%;
	}
	.col-uhd-push-10 {
		left: 83.33333333333334%;
	}
	.col-uhd-push-9 {
		left: 75%;
	}
	.col-uhd-push-8 {
		left: 66.66666666666666%;
	}
	.col-uhd-push-7 {
		left: 58.333333333333336%;
	}
	.col-uhd-push-6 {
		left: 50%;
	}
	.col-uhd-push-5 {
		left: 41.66666666666667%;
	}
	.col-uhd-push-4 {
		left: 33.33333333333333%;
	}
	.col-uhd-push-3 {
		left: 25%;
	}
	.col-uhd-push-2 {
		left: 16.666666666666664%;
	}
	.col-uhd-push-1 {
		left: 8.333333333333332%;
	}
	.col-uhd-push-0 {
		left: auto;
	}
	.col-uhd-offset-12 {
		margin-left: 100%;
	}
	.col-uhd-offset-11 {
		margin-left: 91.66666666666666%;
	}
	.col-uhd-offset-10 {
		margin-left: 83.33333333333334%;
	}
	.col-uhd-offset-9 {
		margin-left: 75%;
	}
	.col-uhd-offset-8 {
		margin-left: 66.66666666666666%;
	}
	.col-uhd-offset-7 {
		margin-left: 58.333333333333336%;
	}
	.col-uhd-offset-6 {
		margin-left: 50%;
	}
	.col-uhd-offset-5 {
		margin-left: 41.66666666666667%;
	}
	.col-uhd-offset-4 {
		margin-left: 33.33333333333333%;
	}
	.col-uhd-offset-3 {
		margin-left: 25%;
	}
	.col-uhd-offset-2 {
		margin-left: 16.666666666666664%;
	}
	.col-uhd-offset-1 {
		margin-left: 8.333333333333332%;
	}
	.col-uhd-offset-0 {
		margin-left: 0%;
	}
}