/*komet irrigation wordpress style:*/
/*<style id='global-styles-inline-css' type='text/css' >
:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4/3;
    --wp--preset--aspect-ratio--3-4: 3/4;
    --wp--preset--aspect-ratio--3-2: 3/2;
    --wp--preset--aspect-ratio--2-3: 2/3;
    --wp--preset--aspect-ratio--16-9: 16/9;
    --wp--preset--aspect-ratio--9-16: 9/16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}
*/

@font-face {
    font-family: "interstateregular";
    src: url("font/interstate-webfont.eot");
    src: url("font/interstate-webfont.eot?#iefix") format("embedded-opentype"),url("font/interstate-webfont.woff2") format("woff2"),url("font/interstate-webfont.woff") format("woff"),url("font/interstate-webfont.ttf") format("truetype"),url("font/interstate-webfont.svg#interstateregular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "interstatebold";
    src: url("font/interstate700-webfont.eot");
    src: url("font/interstate700-webfont.eot?#iefix") format("embedded-opentype"),url("font/interstate700-webfont.woff2") format("woff2"),url("font/interstate700-webfont.woff") format("woff"),url("font/interstate700-webfont.ttf") format("truetype"),url("font/interstate700-webfont.svg#interstatebold") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "interstate_blackregular";
    src: url("font/interstateblack-webfont.eot");
    src: url("font/interstateblack-webfont.eot?#iefix") format("embedded-opentype"),url("font/interstateblack-webfont.woff2") format("woff2"),url("font/interstateblack-webfont.woff") format("woff"),url("font/interstateblack-webfont.ttf") format("truetype"),url("font/interstateblack-webfont.svg#interstate_blackregular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "interstate_lightregular";
    src: url("font/interstatelight-webfont.eot");
    src: url("font/interstatelight-webfont.eot?#iefix") format("embedded-opentype"),url("font/interstatelight-webfont.woff2") format("woff2"),url("font/interstatelight-webfont.woff") format("woff"),url("font/interstatelight-webfont.ttf") format("truetype"),url("font/interstatelight-webfont.svg#interstate_lightregular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "compressed_blackRg";
    src: url("font/interstatecompressedblack-webfont.eot");
    src: url("font/interstatecompressedblack-webfont.eot?#iefix") format("embedded-opentype"),url("font/interstatecompressedblack-webfont.woff2") format("woff2"),url("font/interstatecompressedblack-webfont.woff") format("woff"),url("font/interstatecompressedblack-webfont.ttf") format("truetype"),url("font/interstatecompressedblack-webfont.svg#interstatecompressed_blackRg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "condensed_bold";
    src: url("font/a_2-webfont.eot");
    src: url("font/a_2-webfont.eot?#iefix") format("embedded-opentype"),url("font/a_2-webfont.woff2") format("woff2"),url("font/a_2-webfont.woff") format("woff"),url("font/a_2-webfont.ttf") format("truetype"),url("font/a_2-webfont.svg#condensed_bold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "light_italic";
    src: url("font/a_1-webfont.eot");
    src: url("font/a_1-webfont.eot?#iefix") format("embedded-opentype"),url("font/a_1-webfont.woff2") format("woff2"),url("font/a_1-webfont.woff") format("woff"),url("font/a_1-webfont.ttf") format("truetype"),url("font/a_1-webfont.svg#light_italic") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root > * {
    --direction: ltr;
    --disabled-opacity: 0.3;
    --base-height-multiplier: 10;
    --base-horizontal-spacing-multiplier: 3;
    --density: 0;
    --design-unit: 4;
    --control-corner-radius: 4;
    --layer-corner-radius: 8;
    --stroke-width: 1;
    --focus-stroke-width: 2;
    --body-font: "interstateregular",sans-serif;
    --font-weight: 400;
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --type-ramp-base-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    --type-ramp-minus-1-font-variations: "wght" 400, "opsz" 8;
    --type-ramp-minus-2-font-size: 10px;
    --type-ramp-minus-2-line-height: 14px;
    --type-ramp-minus-2-font-variations: "wght" 400, "opsz" 8;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 22px;
    --type-ramp-plus-1-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-2-font-size: 20px;
    --type-ramp-plus-2-line-height: 26px;
    --type-ramp-plus-2-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-3-font-size: 24px;
    --type-ramp-plus-3-line-height: 32px;
    --type-ramp-plus-3-font-variations: "wght" 400, "opsz" 10.5;
    --type-ramp-plus-4-font-size: 28px;
    --type-ramp-plus-4-line-height: 36px;
    --type-ramp-plus-4-font-variations: "wght" 400, "opsz" 36;
    --type-ramp-plus-5-font-size: 32px;
    --type-ramp-plus-5-line-height: 40px;
    --type-ramp-plus-5-font-variations: "wght" 400, "opsz" 36;
    --type-ramp-plus-6-font-size: 40px;
    --type-ramp-plus-6-line-height: 52px;
    --type-ramp-plus-6-font-variations: "wght" 400, "opsz" 36;
    --base-layer-luminance: 0.98;
    --neutral-base-color: #808080;
    --neutral-layer-card-container: #f3f3f3;
    --neutral-layer-floating: #ffffff;
    --neutral-layer-1: #fbfbfb;
    --neutral-layer-2: #f3f3f3;
    --neutral-layer-3: #ebebeb;
    --neutral-layer-4: #e0e0e0;
    --fill-color: #fbfbfb;
    --accent-fill-rest: #f2c11d;
    --accent-fill-hover: #f3c734;
    --accent-fill-active: #f5cd4a;
    --accent-fill-focus: var(--accent-fill-rest);
    --accent-base-color: #daab0d;
    --foreground-on-accent-rest: #000;
    --foreground-on-accent-hover: #000;
    --foreground-on-accent-active: #000;
    --foreground-on-accent-focus: #000;
    --accent-foreground-rest: #f6d461;
    --accent-foreground-hover: #f7da77;
    --accent-foreground-active: #f6d461;
    --accent-foreground-focus: var(--accent-foreground-rest);
    --accent-stroke-control-rest: linear-gradient( #f4ca3f 90%, #a7820a 100% );
    --accent-stroke-control-hover: linear-gradient( #f5cd4a 90%, #b38c0a 100% );
    --accent-stroke-control-active: #f5d055;
    --accent-stroke-control-focus: var(--accent-stroke-control-rest);
    --neutral-fill-rest: #ffffff;
    --neutral-fill-hover: #f7f7f7;
    --neutral-fill-active: #fbfbfb;
    --neutral-fill-focus: #fbfbfb;
    --neutral-fill-input-rest: #ffffff;
    --neutral-fill-input-hover: #f7f7f7;
    --neutral-fill-input-active: #fbfbfb;
    --neutral-fill-input-focus: #ffffff;
    --neutral-fill-input-alt-rest: #f3f3f3;
    --neutral-fill-input-alt-hover: #ebebeb;
    --neutral-fill-input-alt-active: #e0e0e0;
    --neutral-fill-input-alt-focus: #f3f3f3;
    --neutral-fill-layer-rest: #ffffff;
    --neutral-fill-layer-hover: #ffffff;
    --neutral-fill-layer-active: #ffffff;
    --neutral-fill-layer-alt-rest: #ffffff;
    --neutral-fill-secondary-rest: #efefef;
    --neutral-fill-secondary-hover: #f3f3f3;
    --neutral-fill-secondary-active: #f7f7f7;
    --neutral-fill-secondary-focus: #efefef;
    --neutral-fill-stealth-rest: #fbfbfb;
    --neutral-fill-stealth-hover: #efefef;
    --neutral-fill-stealth-active: #f3f3f3;
    --neutral-fill-stealth-focus: #fbfbfb;
    --neutral-fill-strong-rest: #717171;
    --neutral-fill-strong-hover: #4b4b4b;
    --neutral-fill-strong-active: #868686;
    --neutral-fill-strong-focus: #717171;
    --neutral-foreground-rest: #000;
    --neutral-foreground-hover: #7a7a7a;
    --neutral-foreground-active: #a8a8a8;
    --neutral-foreground-focus: #000;
    --neutral-foreground-hint: #717171;
    --neutral-stroke-rest: #d6d6d6;
    --neutral-stroke-hover: #c6c6c6;
    --neutral-stroke-active: #e0e0e0;
    --neutral-stroke-focus: #d6d6d6;
    --neutral-stroke-control-rest: linear-gradient(#efefef 90%, #d6d6d6 100%);
    --neutral-stroke-control-hover: linear-gradient(#e5e5e5 90%, #cecece 100%);
    --neutral-stroke-control-active: #e5e5e5;
    --neutral-stroke-control-focus: linear-gradient(#e5e5e5 90%, #cecece 100%);
    --neutral-stroke-divider-rest: #ebebeb;
    --neutral-stroke-input-rest: linear-gradient(#efefef calc(100% - 1px), #929292 calc(100% - 1px), #929292);
    --neutral-stroke-input-hover: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);
    --neutral-stroke-input-active: #e5e5e5;
    --neutral-stroke-input-focus: linear-gradient(#e5e5e5 calc(100% - 1px), #8a8a8a calc(100% - 1px), #8a8a8a);
    --neutral-stroke-layer-rest: #efefef;
    --neutral-stroke-layer-hover: #efefef;
    --neutral-stroke-layer-active: #efefef;
    --neutral-stroke-strong-rest: #636363;
    --neutral-stroke-strong-hover: #636363;
    --neutral-stroke-strong-active: #636363;
    --neutral-stroke-strong-focus: #636363;
    --focus-stroke-outer: #000000;
    --focus-stroke-inner: #ffffff;
    --foreground-on-accent-rest-large: #ffffff;
    --foreground-on-accent-hover-large: #ffffff;
    --foreground-on-accent-active-large: #ffffff;
    --foreground-on-accent-focus-large: #ffffff;
    --neutral-fill-inverse-rest-delta: 0;
    --neutral-fill-inverse-hover-delta: -3;
    --neutral-fill-inverse-active-delta: 7;
    --neutral-fill-inverse-focus-delta: 0;
    --neutral-fill-inverse-rest: #131313;
    --neutral-fill-inverse-hover: #272727;
    --neutral-fill-inverse-active: #000000;
    --neutral-fill-inverse-focus: #131313;
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: #ffffff;
    --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: #f3f3f3;
    --neutral-fill-stealth-active-on-neutral-fill-layer-rest: #f7f7f7;
    --elevation-shadow-card-rest-size: 4;
    --elevation-shadow-card-hover-size: 8;
    --elevation-shadow-card-active-size: 0;
    --elevation-shadow-card-focus-size: 8;
    --elevation-shadow-card-rest: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(4 * 0.5px) calc((4 * 1px)) rgba(0, 0, 0, 0.14);
    --elevation-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);
    --elevation-shadow-card-active: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(0 * 0.5px) calc((0 * 1px)) rgba(0, 0, 0, 0.14);
    --elevation-shadow-card-focus: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(8 * 0.5px) calc((8 * 1px)) rgba(0, 0, 0, 0.14);
    --elevation-shadow-tooltip-size: 16;
    --elevation-shadow-tooltip: 0 0 2px rgba(0, 0, 0, 0.12), 0 calc(16 * 0.5px) calc((16 * 1px)) rgba(0, 0, 0, 0.14);
    --elevation-shadow-flyout-size: 32;
    --elevation-shadow-flyout: 0 0 2px rgba(0, 0, 0, 0.2), 0 calc(32 * 0.5px) calc((32 * 1px)) rgba(0, 0, 0, 0.24);
    --elevation-shadow-dialog-size: 128;
    --elevation-shadow-dialog: 0 0 2px rgba(0, 0, 0, 0.2), 0 calc(128 * 0.5px) calc((128 * 1px)) rgba(0, 0, 0, 0.24);
    --input-placeholder-rest: #767676;
    --input-placeholder-hover: #717171;
    --input-filled-placeholder-rest: #6c6c6c;
    --input-filled-placeholder-hover: #6c6c6c;
    --clear-button-hover: #f3f3f3;
    --clear-button-active: #f7f7f7;
    --tree-item-expand-collapse-hover: #e0e0e0;
    --tree-item-expand-collapse-selected-hover: #e0e0e0;
}

body {
    font-family: "interstateregular",sans-serif;
}

/*paddings*/
.p-0 {
    padding: 0 !important;
}
.pb-4, .p-4 {
    padding-bottom: 1rem !important;
}

.pt-4, .p-4 {
    padding-top: 1rem !important;
}
.p-8 {
    padding: 2rem !important;
}
/*paddings end*/

/*margins*/
.mb-4, .m-4 {
    margin-bottom: 1rem !important;
}

.mt-4, .m-4 {
    margin-top: 1rem !important;
}

.ml-4, .m-4 {
    margin-left: 1rem !important;
}

.mr-4, .m-4 {
    margin-right: 1rem !important;
}
.mb-8, .m-8 {
    margin-bottom: 2rem !important;
}
.mt-8, .m-8 {
    margin-top: 2rem !important;
}
.ml-8, .m-8 {
    margin-left: 2rem !important;
}
.mr-8, .m-8 {
    margin-right: 2rem !important;
}
/*margins end*/

/*aligns*/
.text-align-center {
    text-align: center;
}
/*aligns end*/
/*colors*/
.background-color-white {
    background-color: #fff;
}
/*colors end*/

/*color boxes*/
.peach-box {
    border: solid 1px rgb(192,0,0);
    background-color: rgb(251,227,214);
    padding: calc(var(--design-unit) * 2px);
}
/*color boxes end*/

/*alerts*/
.alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0.5rem 0;
    padding: 1rem;
    width: 100%;
    border-radius: 4px;
    background-color: #eee;
    color: #424242;
}
/*alerts end*/

.layout {
    font-family: "interstate_lightregular",sans-serif;
}

/*trikotniki*/
/*.triangle-corners {
    -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -moz-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -ms-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -o-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    background: #fff;
    position: relative;
}
    .triangle-corners::before {
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        content: "";
        z-index: -1;
        background: #000;
        display: inline-block;
        -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -moz-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -ms-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -o-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    }*/

/*trikotniki*/
/*.triangle-corners-light {
    background: #000;
    position: relative;
}

    .triangle-corners-light::before {
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        content: "";
        z-index: -1;
        background: #fff;
        display: inline-block;
    }*/

.triangle-corners-light {
    background: #fff;
    border: solid 1px #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/*trikotniki*/
/*.triangle-corners-dark {
    background: #fff;
    position: relative;
}

    .triangle-corners-dark::before {
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        content: "";
        z-index: -1;
        background: #000;
        display: inline-block;
    }*/

.triangle-corners-dark {
    background: #000;
    border: solid 1px #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/*trikotniki*/
/*.triangle-corners-small {
    -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -moz-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -ms-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -o-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

    .triangle-corners-small::before {
        -webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -moz-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -ms-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        -o-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    }

.triangle-corners-big {
    -webkit-clip-path: polygon(25px 0, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
    -moz-clip-path: polygon(25px 0, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
    -ms-clip-path: polygon(25px 0, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
    -o-clip-path: polygon(25px 0, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
    clip-path: polygon(25px 0, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
}
    .triangle-corners-big::before {
        -webkit-clip-path: polygon(22px 0, calc(100% - 22px) 0%, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
        -moz-clip-path: polygon(22px 0, calc(100% - 22px) 0%, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
        -ms-clip-path: polygon(22px 0, calc(100% - 22px) 0%, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
        -o-clip-path: polygon(22px 0, calc(100% - 22px) 0%, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
        clip-path: polygon(22px 0, calc(100% - 22px) 0%, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0% calc(100% - 22px), 0% 22px);
    }*/

.triangle-corners-big {
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
}


fluent-button {
    /*-webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -moz-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -ms-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    -o-clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    clip-path: polygon(10px 0, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);*/
    font-family: "interstate_blackregular",sans-serif;
}

    fluent-button::part(content) {
        letter-spacing: 1.5px;
    }

.layout .header {
    background-color: var(--foreground-on-accent-rest);
    height: 60px !important;
}

    .layout .header .header-gutters {
        margin: 0;
        display: flex;
        align-items: initial;
    }

    .layout .header .logo {
        flex-grow: 0;
        position: relative;
        z-index: 282;
        display: block;
        height: 61px;
    }

        .layout .header .logo .logo-aux {
            width: 80.1242236025px;
            background: #f2c11d;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            height: 60px;
        }

            .layout .header .logo .logo-aux:before {
                content: "";
                display: block;
                position: absolute;
                left: 0;
                width: calc(100% - 22px);
                bottom: calc(-1px* 22);
                border: 22px solid #f2c11d;
                border-right-color: transparent;
                border-left: 0;
                border-bottom: 0;
                bottom: 0;
                transform: translateY(97%);
            }

        .layout .header .logo .logo-container {
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            display: block;
            position: relative;
            top: 60%;
            margin-left: 5px;
            z-index: 1;
            text-indent: -9999px;
            width: 216.149068323px;
            height: 39.751552795px;
            line-height: 0;
            font-size: 0;
            margin-bottom: 0;
            background: url(/img/logo-payoff2.svg) no-repeat center;
            background-size: contain;
            -webkit-transform: translateY(-45%);
            -moz-transform: translateY(-45%);
            -ms-transform: translateY(-45%);
            -o-transform: translateY(-45%);
            transform: translateY(-45%);
        }

    .layout .header .header-gutters:before {
        content: "";
        display: block;
        position: absolute;
        left: 80px;
        width: calc(100% - 80px);
        box-sizing: border-box;
        bottom: -22px;
        border: 22px solid #000;
        border-left-color: transparent;
        border-right: 0;
        border-bottom: 0;
        min-height: 22px;
        z-index: 0;
    }

.login-container, .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Set height to 100% of the viewport height */
}

.sitenav {
    padding-top: 22px;
    padding-bottom: 20px;
    background-color: var(--neutral-fill-inverse-active);
    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 100%, 0% 0%);
}
.main .fluent-nav-menu {
    font-size: 24px;
    color: var(--foreground-on-accent-rest-large);
    background-color: var(--neutral-fill-inverse-active);
}
.main .fluent-nav-item .positioning-region {
    background-color: var(--neutral-fill-inverse-active);
    line-height: 36px;
    margin-inline-start: calc(var(--design-unit) * 1px);
}
.main .fluent-nav-link {
    font-family: "interstatebold",sans-serif;
}
.main .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
    background: none;
    color: var(--accent-fill-rest);
}
.main .body-content {
    /*margin-top: 22px;*/
    overflow: unset;
}
.content fluent-card {
    padding: calc(var(--design-unit) * 6px);
}
.content .device-detail fluent-card, fluent-card.triangle-corners-big {
    padding: calc(var(--design-unit) * 6px);
    padding-top: calc(var(--design-unit) * 10px);
}
.content .device-detail fluent-button::part(control) {
    padding-left: 1.5em;
    padding-right: 1.5em;
}
.device-detail .program-status-box fluent-button {
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1.2px);
}

.device-top-pointer-wrapper {
    position: absolute;
    left: calc(50% - 23px);
    top: calc(50% - 23px);
    width: 44px;
    height: 44px;
}
.device-top-pointer {
    z-index: 100;
    width: 44px;
    height: 44px;
    position: relative;
}
    .device-top-pointer img {
        position: absolute;
        /*left: 52.8%;
        top: 38.6%;*/
        left: 0;
        top: -100px;
        max-height: 140px;
        /*transform: rotate(45deg);*/
        -webkit-transform-origin: 50% 87%;
        -moz-transform-origin: 50% 87%;
        -o-transform-origin: 50% 87%;
        transform-origin: 50% 87%;
    }

.employee-notification-grid > div {
    border-top: solid 1px #000;
}

.employee-notification-grid > div:first-child {
    border-top: 0;
}

.card-content .rz-gauge .rz-gauge-pointer:first-child, .card-content .rz-gauge .rz-gauge-pointer:last-child {
    position: relative;
}
.card-content .rz-gauge .rz-gauge-pointer:first-child path {
    clip-path: path('M 150 268 L 150 150 L 150 150 Z');
    stroke: red;
    fill: transparent;
    stroke-width: 2px;
    stroke-dasharray: 5;
    width: 2px;
}
.card-content .rz-gauge .rz-gauge-pointer:first-child circle {
    display: none;
}
.card-content .rz-gauge .rz-gauge-pointer:first-child:after {
        
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
    background-size: contain;
}
.card-content .rz-gauge .rz-gauge-pointer:last-child path, .card-content .rz-gauge .rz-gauge-pointer:last-child circle {
    display: none;
}
.card-content .rz-gauge .rz-gauge-pointer:last-child:after {
    background: url(/img/device-top.svg);
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: absolute;
    background-size: contain;
}
.card-content .rz-gauge:after {
    position: absolute;
    background-color: transparent;
    background-image: url("/img/machine.svg");
    left: calc(50% - 17px);
    bottom: -34px;
    height: 66px;
    width: 34px;
    background-size: cover;
    content: "";
    z-index: 100;
}
.card-content .gauge-red-pointer {
    width: 10px;
    height: calc(50% - 32px);
    border-left: 1px dashed red;
    position: absolute;
    top: 50%;
    left: 50%;
}
.card-content .machine {
    max-width: 40px;
    margin-top: -30px;
    display: none;
}
.card-content fluent-card::part(AccentFill) {
    fill: #f2c11d!important;
}
.card-content fluent-card::part(CardFooter) {
    height: 200px;
    background: red;
}

.card-info {
    background-color: var(--highlight-bg);
    padding: calc(var(--design-unit)*3px) calc(var(--design-unit)*6px);
}

fluent-card .card-head[typo="subject"] {
    position: absolute;
    left: 0;
    top: 0;
    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 4px) calc(var(--design-unit) * 1px) calc(var(--design-unit) * 6px);
    background-color: var(--neutral-fill-inverse-rest);
    color: var(--fill-color);
    width: 100%;
    text-align: left;
}

.user-slider fluent-slider, .auto-slider fluent-slider {
    height: 600px;
}

fluent-button.red-button::part(control) {
    background: var(--error);
}

fluent-button.red-button::part(content) {
    color: var(--fill-color);
}

fluent-switch::part(switch) {
    height: calc((((var(--base-height-multiplier) - 2 + var(--density)) * var(--design-unit) / 2) + var(--design-unit)) * 1px);
}
    fluent-switch.checked::part(switch) {
        background: #f2c11d !important;
    }

.fluent-sortable-list .sortable-item {
    border-color: var(--neutral-stroke-strong-rest);
}

fluent-button.accent {
    --accent-fill-rest: #f2c11d !important;
    --accent-fill-hover: #000 !important;
    --accent-fill-active: #f5cd4a;
    --accent-stroke-control-hover: linear-gradient( #000 90%, #000 100% );
    --accent-stroke-control-rest: linear-gradient( #f4ca3f 90%, #a7820a 100% );
    --accent-stroke-control-active: #f5d055;
    --foreground-on-accent-hover: #ffffff;
}

.inline-field-label {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
}

    .inline-field-label label {
        white-space: nowrap;
    }

.inline-field-label-short > *:not(style) {
    display: inline-block;
    vertical-align: middle;
}
/*600px- */
@media screen and (max-width: 37.51em) {
    .content {
        padding: 8px;
    }

    .main .body-content {
        margin-top: 22px;
    }

    .fluent-grid[spacing="3"] {
        margin: -8px !important;
        width: calc(100% + 16px) !important;
    }

    .fluent-grid[spacing="3"] > div {
        padding: 8px !important;
    }

    .content .device-detail fluent-card, fluent-card.triangle-corners-big {
        padding-left: 8px;
        padding-right: 8px;
    }

    .device-detail .device-status-box {
        margin-top: 1em;
    }

    .device-detail .device-status-footer-box {
        padding-top: 1em;
        margin-top: 1em;
        border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-layer-rest);
    }

    .device-detail .device-status-box, .device-detail .device-status-footer-box {
        padding: 0;
        text-align: center;
        margin-bottom: 0;
        position: relative;
    }
        .device-detail .device-status-footer-box .device-status-footer {
            flex-direction: column !important;
            align-items: stretch !important;
            column-gap: 0 !important;
            row-gap: 0 !important;
        }
    .device-detail .device-status-box .device-img {
        display: none;
    }

        .device-detail .device-status-box fluent-button, .device-detail .device-status-footer-box fluent-button {
            display: flex;
            position: unset;
            margin-bottom: 1em;
            height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1.2px);
        }

        .device-detail .device-status-box .pressure-box {
            display: block;
            position: unset;
            margin: 0 auto;
            margin-bottom: 1em;
        }

        .device-detail .device-status-box fluent-button::part(control), .device-detail .device-status-footer-box fluent-button::part(control) {
            width: 100%;
        }

    .login-container, .register-container {
        margin: 12px;
    }

    .register-container {
        height: 100%;
    }

    .user-slider.mobile-slider fluent-slider, .auto-slider.mobile-slider fluent-slider {
        height: 300px;
    }

    fluent-dialog.fluent-dialog-main::part(control) {
        --dialog-padding: calc(var(--design-unit) * 2 * 1px);
    }

    .sector-setting.card-content {
        display: none;
    }

    .dialog-sector-grid {
        flex-direction: column;
    }

        .dialog-sector-grid .section-map-box {
            order: 1;
        }

        .dialog-sector-grid .section-sliders-box {
            order: 2;
        }

        .dialog-sector-grid .section-map-box #map_sector {
            height: 240px!important;
        }
        .dialog-sector-grid .section-sliders-box .section-sliders-horizontal {
            column-gap: 40px !important;
        }


        .sector-dialog .fluent-dialog-footer .stack-horizontal {
            flex-direction: column;
            align-items: center !important;
        }

}

/*600px+ */
@media screen and (min-width: 37.51em) {
    #navmenu-toggle:checked ~ nav {
        
    }
}
/*800px*/
@media screen and (min-width: 50.01em) {
    .layout .header .header-gutters:before {
        left: 80px;
        width: calc(100% - 80px);
    }
    .layout .header .logo .logo-aux {
        height: auto;
    }
    .logo {
        flex-grow: 2;
    }
    .sector-dialog {
        --dialog-width: 80% !important;
    }
}
/*1000px*/
@media screen and (min-width: 62.51em) {
    .layout .header {
        height: 88px !important;
    }
        .layout .header .logo {
            height: 89px;
        }
            .layout .header .logo .logo-container {
                top: 60%;
                width: 216.149068323px;
                height: 39.751552795px;
                background-size: contain;
                margin-left: 6px;
            }

        
}
/*1200px*/
@media screen and (min-width: 75.01em) {
    .layout .header {
        height: 88px !important;
    }
    .layout .header .logo .logo-aux {
        width: 107.5px;
        height: auto;
    }

        .layout .header .header-gutters:before {
            left: 107.5px;
            width: calc(100% - 107.5px);
        }

    .layout .header .logo .logo-container {
        top: 60%;
        width: 307.2727272727px;
        height: 58.1818181818px;
        margin-left: 9px;
    }

    fluent-button::part(content) {
        letter-spacing: 3.333333px;
    }
}
/*1500px*/
@media screen and (min-width: 93.76em) {
    .layout .header {
        height: 108px !important;
    }
        .layout .header .logo {
            height: 109px !important;
        }
        .layout .header .logo .logo-aux {
            width: 129px;
            height: auto;
        }

        .layout .header .header-gutters:before {
            left: 129px;
            width: calc(100% - 129px);
        }

    .layout .header .logo .logo-container {
        top: 56%;
        width: 338px;
        height: 64px;
        margin-left: 15px;
    }

    fluent-button::part(content) {
        letter-spacing: 4px;
    }
}