/* Priority: 1 */
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
}

html, body {
	height: 100%;
    font-size: var(--fontSize);
    font-family: var(--fontFam);
    background-color: var(--primBgClr);
    color: var(--primTxtClr);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
	border: none;
	outline: none;
}

textarea {
	resize: none;
}

input[type="checkbox"] {
	width: var(--checkbox--width);
	height: var(--checkbox--width);
}

input[type="checkbox"][disabled]:hover {
	cursor: not-allowed;
}

select {
	padding: 10px 10px;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

p {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Link: */
a, a:hover, a:active, a:visited {
	color: #000;
}

a:active, a:hover, a:focus {
	outline: 0;
	outline-offset: 0;
}

/* Scrollbar: */
::-webkit-scrollbar {
	width: var(--scrollbar--width);
}

::-webkit-scrollbar-track {
	background-color: var(--scrollbar--track--bg-color);
}

::-webkit-scrollbar-thumb {
	border-radius: var(--scrollbar--thumb--border-radius);
	background-color: var(--scrollbar--thumb--bg-color);
}

@media screen and (orientation: portrait) {
	.bld-container {
		width: 100%;
	}
}

/* Link */
a.link, a.link:visited {
	color: var(--bld-container--link--default--text-color);
	text-decoration: var(--bld-container--link--default--text-decoration);
	border-bottom: var(--bld-container--link--default--border-bottom);
}

a.link:hover {
	color: var(--bld-container--link--hover--text-color);
	text-decoration: var(--bld-container--link--hover--text-decoration);
	border-bottom: var(--bld-container--link--hover--border-bottom);
}
/* Priority: 1 */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    min-width: var(--minWidth);
    height: 100%;
    font-size: var(--fontSz);
    font-family: var(--fontFam);
    background-color: var(--contBgClr);
    color: var(--primTxtClr);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    overflow-wrap: break-word;
    hyphens: auto;
}

.h {
    display: none !important;
}

/* Margin top */
.mt {
    margin-top: var(--vertMarg);
}

/* Margin bottom */
.mb {
    margin-bottom: var(--vertMarg);
}

/* Scrollbar: */
::-webkit-scrollbar {
    width: .4rem;
}

::-webkit-scrollbar-track {
    background-color: #000;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #6e6e6e;
}

@media screen and (orientation: portrait) {
}
/* Priority: 2 */
.h1 {
    font-size: var(--fontSizeH1);
}

.h2 {
    font-size: var(--fontSizeH2);
}

.h3 {
    font-size: var(--fontSizeH3);
}
/* Priority: 2 */
body a {
    color: var(--contLnkDefClr);
		-webkit-transition: var(--contLnkTrans);
		transition: var(--contLnkTrans);

	&:active, &:hover, &:focus, &:visited {
		outline: 0;
		outline-offset: 0;
	}

	&:hover {
		color: var(--contLnkHovClr);
	}
}
/* Priority: 2 */
.box {
    &.vmarg {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}
/* Priority: 2 */
.butts {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: var(--buttsHorGap);

    &.cent {
        justify-content: center;
    }

    &.vert {
        flex-direction: column;
    }

    @media (orientation: portrait) {
        flex-direction: column;
        justify-content: center;
    }

    a {
        padding: .5rem 1rem;
    }
}
/* Priority: 2 */
.cont {
    &.vmarg {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}
/* Priority: 2 */
h1, .h1 {
    font-size: var(--h1FontSz);
    font-weight: var(--h1FontWei);
    
    &.cent {
        display: flex;
        justify-content: center;
    }
}

h2, .h2 {
    font-size: var(--h2FontSz);
    font-weight: var(--h2FontWei);

    &.cent {
        display: flex;
        justify-content: center;
    }
}

h3, .h3 {
    font-size: var(--h3FontSz);
    font-weight: var(--h3FontWei);
    
    &.cent {
        display: flex;
        justify-content: center;
    }
}

h4, .h4 {
    font-size: var(--h4FontSz);
    font-weight: var(--h4FontWei);
    
    &.cent {
        display: flex;
        justify-content: center;
    }
}
/* Priority: 2 */
.regnav {
    background-color: var(--regnavItDefBgClr);

    .bg {
        display: none;
        background-color: var(--transBgClr);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: var(--transBgOp);
    }

    &.o {
        .bg {
            display: initial;
        }
    }

    .items {
        display: flex;
        align-items: center;
        width: 100%;
        column-gap: .5rem;

        .it {
            position: relative;

            &:not(.act) {
                a:hover {
                    background-color: var(--regnavHovItBgClr);
                    color: var(--regnavHovItTxtClr);
                }
            }

            a, a:visited {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--regnavItDefBgClr);
                color: var(--regnavItDefTxtClr);
                font-size: var(--regnavItFontSz);
                font-weight: var(--regnavItFontWei);
                padding: .9rem 1rem;
                white-space: nowrap;
                overflow: hidden;
                max-width: 15rem;
                border-radius: var(--regnavItRad);
                -webkit-border-radius: var(--regnavItRad);
                -moz-border-radius: var(--regnavItRad);
                -ms-border-radius: var(--regnavItRad);
                -o-border-radius: var(--regnavItRad);
                column-gap: .5rem;

                img:first-child {
                    width: var(--regnavImgWid);
                    height: var(--regnavImgHei);
                }

                img:last-child {
                    rotate: 90deg;
                    width: var(--regnavArrWid);
                    height: var(--regnavImgHei);
                }
            }

            &.act > a:not(.btn) {
                background-color: var(--regnavActItBgClr);
                color: var(--regnavActItTxtClr);
            }

            &.o > a:not(.btn) {
                background-color: var(--regnavHovItBgClr);
                color: var(--regnavHovItTxtClr);
            }

            .subnav {
                position: absolute;
                top: 100%;
                right: 0;
                display: none;
                box-shadow: var(--shad);
                -webkit-box-shadow: var(--shad);
                -moz-box-shadow: var(--shad);

                &.o {
                    display: initial;
                }

                .it {
                    a {
                        display: block;
                        background-color: var(--regnavSubitDefBgClr);
                        color: var(--regnavSubitDefTxtClr);
                        font-size: var(--regnavSubitFontSz);
                        font-weight: var(--regnavSubitFontWei);
                        border-bottom: var(--regnavSubitDefBordBott);
                        padding: .7rem 1.5rem;
                        white-space: wrap;
                        min-width: 15rem;
                        border-radius: 0;
                        -webkit-border-radius: 0;
                        -moz-border-radius: 0;
                        -ms-border-radius: 0;
                        -o-border-radius: 0;

                        &:hover {
                            background-color: var(--regnavSubitHovBgClr);
                            color: var(--regnavSubitHovTxtClr);
                            border-bottom: var(--regnavSubitHovBordBott);
                        }
                    }

                    &.act > a:not(.btn) {
                        background-color: var(--regnavSubitActBgClr);
                        color: var(--regnavSubitActTxtClr);
                    }
                }

                .it:first-child {
                    a {
                        border-radius: 10px 10px 0 0;
                        -webkit-border-radius: 10px 10px 0 0;
                        -moz-border-radius: 10px 10px 0 0;
                        -ms-border-radius: 10px 10px 0 0;
                        -o-border-radius: 10px 10px 0 0;
                    }
                }

                .it:last-child {
                    a {
                        border-radius: 0 0 10px 10px;
                        -webkit-border-radius: 0 0 10px 10px;
                        -moz-border-radius: 0 0 10px 10px;
                        -ms-border-radius: 0 0 10px 10px;
                        -o-border-radius: 0 0 10px 10px;
                    }
                }
            }

            &.o {
                .subnav {
                    display: initial;
                }
            }
        }
    }

    @media (orientation: portrait) or (max-width: 1050px) {
        .items {
            display: initial;
            position: fixed;
            top: 0;
            right: -75%;
            bottom: 0;
            transition: var(--regnavOpclTrans);
            -webkit-transition: var(--regnavOpclTrans);
            width: 75%;
            background-color: var(--regnavItDefBgClr);
            overflow-y: auto;

            .it {
                a, a:visited {
                    justify-content: flex-start;
                    max-width: 100%;
                    border-radius: 0;
                    -webkit-border-radius: 0;
                    -moz-border-radius: 0;
                    -ms-border-radius: 0;
                    -o-border-radius: 0;
                    padding: .8rem 1rem;
                    border-bottom: var(--regnavItDefBordBott);
                }

                .subnav {
                    position: initial;

                    .it {
                        a {
                            display: block;
                            background-color: var(--regnavPortSubitDefBgClr);
                            color: var(--regnavPortSubitDefTxtClr);
                            border-bottom: var(--regnavPortSubitDefBordBott);
                            padding-left: 2.5rem;
                        }

                        &.act > a:not(.btn) {
                            background-color: var(--regnavPortSubitActBgClr);
                            color: var(--regnavPortSubitActTxtClr);
                            border-bottom: var(--regnavPortSubitActBordBott);
                        }
                    }
                }
            }

            .it:first-child, .it:last-child {
                a {
                    border-radius: 0 !important;
                    -webkit-border-radius: 0 !important;
                    -moz-border-radius: 0 !important;
                    -ms-border-radius: 0 !important;
                    -o-border-radius: 0 !important;
                }
            }
        }

        &.l {
            .items {
                right: unset;
                left: -75%;
                transition: var(--regnavOpclLefTrans);
                -webkit-transition: var(--regnavOpclLefTrans);
            }
        }
    }
}

@media (orientation: portrait) or (max-width: 1050px) {
    .regnav {
        &.o {
            .items {
                right: 0%;
                transition: var(--regnavOpclTrans);
                -webkit-transition: var(--regnavOpclTrans);
            }
        }

        &.o.l {
            .items {
                left: 0%;
                right: unset;
                transition: var(--regnavOpclLefTrans);
                -webkit-transition: var(--regnavOpclLefTrans);
            }
        }

        .items {
            .it {
                .subnav {                    
                    a {
                        &:hover {
                            background-color: var(--regnavPortSubitDefBgClr) !important;
                            color: var(--regnavPortSubitDefTxtClr) !important;
                            border-bottom: var(--regnavPortSubitDefBordBott) !important;
                        }
                    }
                }
            }
        }
    }
}
/* Priority: 2 */
#toast {
    position: fixed;
    bottom: 50px;
    min-width: var(--toaMinWidth);
    max-width: var(--toaMaxWidth);
    padding: var(--toaPad);
    background-color: #000;
    color: #fff;
    font-weight: var(--toaFontWei);
    border-radius: var(--toaRad);
    -webkit-border-radius: var(--toaRad);
    -moz-border-radius: var(--toaRad);
    -ms-border-radius: var(--toaRad);
    -o-border-radius: var(--toaRad);
    font-size: var(--toaFontSz);
    box-shadow: var(--shad);
    -webkit-box-shadow: var(--shad);
    -moz-box-shadow: var(--shad);
    text-align: center;

    &.ok {
        background-color: var(--toaOkBgClr);
        color: var(--toaOkTxtClr);
    }

    &.err {
        background-color: var(--toaErrBgClr);
        background: var(--toaErrBgClrGrad);
        color: var(--toaErrTxtClr);
    }
}
/* Priority: 2 */
input {
    padding: var(--fieldPad);
    font-size: var(--fieldfontSz);
    background-color: var(--fieldBgClr);
    border-radius: var(--fieldRad);
    -webkit-border-radius: var(--fieldRad);
    -moz-border-radius: var(--fieldRad);
    -ms-border-radius: var(--fieldRad);
    -o-border-radius: var(--fieldRad);
    outline: var(--fieldDefOutl);
    width: 100%;

    &:hover {
        -webkit-transition: outline 0.3s ease, color 0.3s ease;
        transition: outline 0.3s ease, color 0.3s ease;
        outline: var(--fieldHovOutl);
    }

    &:focus {
        outline: var(--fieldFocOutl);
    }
}

input.err {
    outline: var(--errOutl);
    color: var(--errTxtClr);
    background-color: var(--errBgClr);
}
/* Priority: 2 */
/* Webform */
.wf {
    min-width: var(--minWidth);
    background-color: var(--wfBgClr);
    padding: var(--wfPad);
    border-radius: var(--wfRad);
    -webkit-border-radius: var(--wfRad);
    -moz-border-radius: var(--wfRad);
    -ms-border-radius: var(--wfRad);
    -o-border-radius: var(--wfRad);

    &.min {
        max-width: 35%;
    }

    @media (orientation: portrait) {
        &.min {
            max-width: 90%;
        }
    }

    &.cent {
        margin: 0 auto;
    }
}

/* Header */
.wf .head {
    margin-bottom: var(--vertMarg);
}

.wf .sum-errs {
    margin-top: 50px;
}

/* Footer */
.wf .foot {
    margin-top: 50px;
}

.wf .foot .notice {
    font-size: var(--wfFootNotFontSz);
    margin: var(--wfFootNotMarg);
    color: var(--wfFootNotTxtClr);
    text-align: center;
}

/* Fields */
.wf .f {
    margin-top: 20px;

    &.cent {
        text-align: center;
    }
}

.wf .f .name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--fieldNameTxtClr);
    margin-bottom: 3px;
}

.wf .f .req {
    color: var(--reqTxtClr);
    margin-left: 3px;
}

.wf .inl-fields {
    display: flex;
    gap: var(--inlFieldGap);

    &.n2 > .f {
        width: calc(100% / 2);
    }
}

.wf .err {
    font-size: var(--errfontSz);
    color: var(--errTxtClr);
    margin-top: 5px;

    &.cent {
        text-align: center;
    }
}
/* Priority: 2 */
input {
    padding: var(--fieldPad);
    font-size: var(--fieldfontSz);
    background-color: var(--fieldBgClr);
    border-radius: var(--fieldRad);
    -webkit-border-radius: var(--fieldRad);
    -moz-border-radius: var(--fieldRad);
    -ms-border-radius: var(--fieldRad);
    -o-border-radius: var(--fieldRad);
    outline: var(--fieldDefOutl);
    width: 100%;

    &:hover {
        -webkit-transition: outline 0.3s ease, color 0.3s ease;
        transition: outline 0.3s ease, color 0.3s ease;
        outline: var(--fieldHovOutl);
    }

    &:focus {
        outline: var(--fieldFocOutl);
    }

    &:disabled {
        opacity: .7;
        background-color: #bfc8ce;
    }

    &:disabled:hover {
        cursor: not-allowed;
    }
}

input.err {
    outline: var(--errOutl);
    color: var(--errTxtClr);
    background-color: var(--errBgClr);
}
/* Priority: 5 */
a.btn {
    display: inline-block;
    position: relative;
    border-radius: var(--btnRad);
    -webkit-border-radius: var(--btnRad);
    -moz-border-radius: var(--btnRad);
    -ms-border-radius: var(--btnRad);
    -o-border-radius: var(--btnRad);
    background-color: var(--btnDefBgClr);
    font-size: var(--btnfontSz);
    padding: var(--btnPad);
    text-decoration: none;
    color: var(--btnTxtClr);
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    -webkit-transition: var(--btnTrans);
    transition: var(--btnTrans);

    &:hover {
        background-color: var(--btnHovBgClr);
        color: var(--btnTxtClr);
    }

    &.dis {
        background-color: var(--btnDisBgClr);
        cursor: not-allowed;
    }

    &:not(.wait) .l {
        display: none;
    }

    &.wait span {
        visibility: hidden;
        cursor: progress;
    }
}

a.btn .l {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Priority: 5 */
.footer {
    background-color: var(--footerBgClr);
    color: var(--headerTxtClr);
    padding: 40px 15px;
}

.footer .fnav {
    display: grid;
    grid-template-columns: repeat(auto-fit, 20%);
}

.footer .fnav .col .name {
    font-size: var(--h3fontSz);
    color: var(--footerTxtClr);
}

.footer .fnav .col a {
    display: block;
    color: var(--footerTxtClr);
    padding: 10px 0;
}
/* Priority: 5 */
.header {
    min-width: inherit;
    background-color: var(--headerBgClr);
    color: var(--headerTxtClr);
    height: var(--headerHeight);

    a {
        text-decoration: none;
    }

    .fix {
        min-width: inherit;
        background-color: var(--headerBgClr);
        color: var(--headerTxtClr);
        height: var(--headerHeight);
        display: flex;
        align-items: center;
        padding-left: 15px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 599;

        .logo {
            display: flex;
            align-items: center;

            img {
                max-width: 100px;
                max-height: 30px;
            }

            span {
                color: var(--headerTxtClr);
                font-weight: bold;
                font-size: 1.2rem;
            }

            img + span {
                margin-left: 10px;
            }
        }

        .in {
            display: flex;
            flex-basis: 100%;
            justify-content: flex-end;

            .btns {
                display: flex;
                align-items: center;

                a {
                    padding: 10px 10px;
                    
                    img {
                        width: 1.7rem;
                    }
                }

                a[data-rntogg] {
                    display: none;

                    @media (orientation: portrait) or (max-width: 1050px) {
                        display: initial;
                    }
                }
            }
        }
    }

    /* a[data-rnTogg] {
        position: absolute;
        right: 15px;

        img {
            width: 1.7rem;
        }
    } */
}
/* Priority: 6 */
.intra-banner {
    background-color: var(--intraBanBgClr);
    color: var(--intraBanTxtClr);
    padding: 200px 100px;

    @media (orientation: portrait) {
        padding: 30px;
    }

    .descr {
        margin-top: var(--hMarg);

        p {
            line-height: var(--lineHeight);
        }
    }
}
.content {
    display: flex;
    min-height: 100%;

    .main {
        width: 100%;
        padding: 15px;
    }
}
.sidebar {
    width: var(--sidebMinWid);
    transition: var(--sidebOpclTrans);
    -webkit-transition: var(--sidebOpclTrans);
    height: 100%;
    background-color: var(--sidebItDefBgClr);
    overflow: hidden;

    &.fix {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 599;

        &.l {
            right: unset;
            left: 0;
        }
    }

    .items {
        display: flex;
        flex-direction: column;

        .it {
            a {
                display: flex;
                align-items: center;
                column-gap: .5rem;
                background-color: var(--sidebItDefBgClr);
                color: var(--sidebItDefTxtClr);
                padding: .8rem;
                text-decoration: none;
                overflow: hidden;

                &:hover {
                    background-color: var(--sidebItHovBgClr);

                    span {
                        color: var(--sidebItHovTxtClr);
                    }
                }
                
                img:first-child {
                    width: 1.5rem;
                    height: 1.5rem;
                }

                span {
                    display: none;
                    white-space: nowrap;
                    font-size: var(--sidebItFontSz);
                    font-weight: var(--sidebItFontWei);
                    color: var(--sidebItDefTxtClr);
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                img:last-child {
                    display: none;
                    width: .7rem;
                    height: .7rem;
                }
            }

            .subnav {
                display: none;

                a {
                    overflow: hidden;
                    padding-left: 2.5rem;
                    border-bottom: var(--sidebOpeDefBordBott);

                    span {
                        display: initial;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: var(--sidebSubitFontSz);
                        font-weight: var(--sidebSubitFontWei);
                    }
                }
            }

            &.o {
                a {
                    background-color: var(--sidebOpeDefBgClr);
                    border-bottom: var(--sidebOpeDefBordBott);

                    img:last-child {
                        rotate: 90deg;
                    }
                }

                .subnav {
                    display: block;

                    a {
                        background-color: var(--sidebOpeDefBgClr);

                        span {
                            color: var(--sidebOpeDefTxtClr);
                        }

                        &:hover {
                            background-color: var(--sidebOpeHovBgClr);

                            span {
                                color: var(--sidebOpeHovTxtClr);
                            }
                        }

                        &.act {
                            background-color: var(--sidebOpeActBgClr);
                            color: var(--sidebItActTxtClr);

                            span {
                                color: var(--sidebOpeActTxtClr);
                            }
                        }
                    }
                }
            }

            &.act {
                &>a:first-child {
                    background-color: var(--sidebItActBgClr);
                    background: var(--sidebItActBg);
                    color: var(--sidebItActTxtClr);
                }
            }
        }
    }

    &.o {
        width: var(--sidebMaxWid);
        transition: var(--sidebOpclTrans);
        -webkit-transition: var(--sidebOpclTrans);

        .items {
            .it {                    
                a {
                    span {
                        display: initial;
                    }

                    img:last-child {
                        display: initial;
                    }
                }
            }
        }
    }
}
.h123 {
    /* hello from h123! :) */
}
.text-field {
    /* hello from webform text field */
}
.textarea-field {
    /* hello from webform textarea field */
}
.flat-list {
    /* hello from flat-list (tasks) ! :) */
}
.tree-list {
    /* hello from tree-list (tasks)! :) */
}