/* 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 {
    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;
}

/* 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) {
}
/* 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 */
.cont {
    &.vmarg {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}
/* Priority: 2 */
.h1 {
    font-size: var(--h1fontSz);

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

.h2 {
    font-size: var(--h2fontSz);

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

.h3 {
    font-size: var(--h3fontSz);

    &.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);
    }
}

input.err {
    outline: var(--errOutl);
    color: var(--errTxtClr);
    background-color: var(--errBgClr);
}
/* Priority: 2 */
/* Webform */
.wf {
    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%;
    }

    &.cent {
        margin: 0 auto;
    }
}

/* Header */
.wf .head {
    margin-bottom: 30px;
}

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

.wf .foot .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
}

.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(--gap);

    &.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);
    }
}

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 .nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, 20%);
}

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

.footer .nav .col a {
    display: block;
    color: var(--footerTxtClr);
    padding: 10px 0;
}
/* Priority: 5 */
.hdr {
    background-color: var(--headerBgClr);
    color: var(--headerTxtClr);
    height: var(--headerHeight);
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.hdr a {
    text-decoration: none;
}

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

.hdr .logo img {
    max-width: 100px;
    max-height: calc(var(--headerHeight) - 10px);
}

.hdr .logo .h2 {
    color: var(--headerTxtClr);
    font-weight: bold;
}

.hdr .logo img + .h2 {
    margin-left: 10px;
}

.hdr .nav {
    display: flex;
    margin-left: 100px;
    gap: var(--gap);
    position: absolute;
    right: 15px;
}

.hdr .nav a:not(.btn) {
    color: var(--navDefTxtClr);
    min-width: 100px;
    text-align: center;
    border-radius: var(--navRad)    ;
    -webkit-border-radius: var(--navRad);
    -moz-border-radius: var(--navRad);
    -ms-border-radius: var(--navRad);
    -o-border-radius: var(--navRad);
    padding: 15px 20px;

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

    &.act {
        background-color: var(--navActTxtClr);
    }
}

.hdr .nav a.btn:hover {
    background-color: var(--btnHovBgClr);
}
/* Priority: 6 */
.intra-banner {
    background-color: var(--intraBanBgClr);
    color: var(--intraBanTxtClr);
    padding: 200px 100px;
}

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

.intra-banner .descr p {
    line-height: var(--lineHeight);
}
.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)! :) */
}