:root {

    /* text */
    --text-color:#333;
    --text-color-invert:#ffffff;
    --text-color-hover:#c3c3c3;
    --light-text-color:#c4c4c4;

    /* border */
    --border-color:#333;
    --light-border-color:#c4c4c4;

    /* background */
    --bg-color:#ffffff;
    --bg-color-edit:#fff;
    --bg-color-modal:#fff;
    --bg-color-lightbox:#fff;
    --bg-color-pannel:#fff;
    --bg-color-invert:#222;
    --bg-hover-color:#e2e2e2;
    --light-bg-color:#f6f6f6;
    --transparent-bg:rgba(231,225,225,.8);
    --transparent-bg-invert:rgba(0,0,0,.7);
    --deg-left-bg: linear-gradient(to left, rgba(255,0,0,0) 0%,rgba(255, 255, 255, .9) 100%);
    

    /* cookie */
    --cookie-text-color:#111;
   --cookie-text-color-invert:#fff;
   --cookie-light-border-color:#ceceec;
   --cookie-bg-color:#fff;
}

@font-face {
    font-family: 'Material Icons';
    src: url(fonts/MaterialIcons-Regular.woff2) format('woff2'), url(fonts/MaterialIcons-Regular.woff) format('woff'), url('fonts/MaterialIcons-Regular.svg#MaterialIcons-Regular') format('svg'), url(fonts/MaterialIcons-Regular.eot), url('fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), url(fonts/MaterialIcons-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Socicon';
    src: url(fonts/Socicon.eot?87visu);
    src: url('fonts/Socicon.eot?87visu#iefix') format('embedded-opentype'), url(fonts/Socicon.woff2?87visu) format('woff2'), url(fonts/Socicon.ttf?87visu) format('truetype'), url(fonts/Socicon.woff?87visu) format('woff'), url('fonts/Socicon.svg?87visu#Socicon') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

[class^="socicon-"],
[class*=" socicon-"] {
    font-family: 'Socicon' !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

*:focus {
    outline: none
}

@-ms-viewport {
    width: device-width
}

a {
    cursor: pointer
}

.body-noscroll {
    overflow: hidden !important
}

.html-noscroll {
    overflow: hidden !important
}

.body-noscroll-full {
    overflow: hidden !important;
    height: 100vh;
    display: block
}

table {
    border: 0;
    border-spacing: 0;
    border-collapse: collapse
}

img {
    display: inline-block;
    -ms-interpolation-mode: bicubic;
    border: 0;
    vertical-align: middle
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-decoration: none !important;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    outline: 0
}

strong,
b {
    font-weight: 700;
    font-size: inherit;
    color: inherit;
    font-family: inherit
}

.disable-hover {
    pointer-events: none
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none
}

.no_highlights {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none
}

.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.selection {
    color: currentColor;
    background: transparent
}

.nobreak {
    display: inline-table;
    white-space: nowrap
}

.curved {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.transparent {
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    pointer-events: none
}

.transform {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.transition {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.delay {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.no-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important
}

.invisible {
    display: none !important
}

.hidden {
    z-index: -1 !important;
    position: fixed !important;
    top: -200vh !important;
    left: -200vh !important
}

.calc {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: calc(100% - 10px)
}

.bold {
    font-weight: 700;
    color: inherit;
    font-size: inherit
}

.normal {
    font-weight: 400;
    color: inherit;
    font-size: inherit
}

.light {
    font-weight: 300;
    color: inherit;
    font-size: inherit
}

.hide-me {
    display: none !important
}

.disable-me {
    opacity: .2;
    pointer-events: none
}

.spacer {
    position: relative;
    display: block;
    height: 20px
}

.uppercase {
    text-transform: uppercase
}

.lowercase {
    text-transform: lowercase
}

.b {
    color: #282828 !important
}

.w {
    color: #ffffff !important
}

.spacer {
    position: relative;
    display: table;
    width: 100%;
    height: 10px
}

.table {
    position: relative;
    display: table;
    margin: 0 auto
}

.table.full {
    width: 100%
}

.col {
    position: relative;
    display: table-cell
}

:after,
:before,
div,
a,
ul,
li,
input,
select,
table,
tr,
td,
body,
section,
textarea {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box
}

.max-width {
    position: relative;
    max-width: 980px;
    margin: 0 auto
}

a img {
    outline: none !important;
    border: 0;
    border: none
}

button:active {
    outline: none;
    border: none
}

.no-space {
    padding: 0px !important;
    margin: 0px !important
}

.social {
    position: relative;
    display: table
}

.social .icon {
    font-family: 'Socicon' !important;
    color: inherit;
    font-size: 20px;
    padding: 5px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.social .icon:hover {
    color: inherit
}

.social .icon:before {
    position: relative;
    display: table
}

.social .icon.facebook:before {
    content: ''
}

.social .icon.twitter:before {
    content: ''
}

.social .icon.instagram:before {
    content: ''
}

.social .icon.gplus:before {
    content: ''
}

.social .icon.youtube:before {
    content: ''
}

.social .icon.linkedin:before {
    content: ''
}

.social .icon.whatsapp:before {
    content: ''
}

.social .icon.tiktok:before {
    content: ''
}

.social ul {
    position: relative;
    display: table
}

.social ul>li {
    position: relative;
    display: table-cell;
    list-style: none;
    vertical-align: middle
}

.social ul>li>a {
    position: relative;
    display: table
}

.social-widgets {
    position: relative;
    display: table;
    width: 100%;
    padding: 60px 0 0 0px !important
}

.social-widgets h5 {
    position: relative;
    display: table;
    color: #fff;
    vertical-align: middle;
    font-size: 22px
}

.social-widgets h5:before {
    position: relative;
    display: inline-block;
    padding: 0 10px 0 0;
    text-align: left;
    color: inherit;
    vertical-align: middle;
    font-size: 38px;
    font-family: 'Socicon' !important
}

.social-widgets h5.facebook:before {
    content: ''
}

.social-widgets h5.instagram:before {
    content: ''
}

.social-widgets p {
    position: relative;
    display: table;
    color: #fff;
    font-size: 14px;
    padding: 20px 0
}

.social-widgets .col {
    position: relative;
    vertical-align: top;
    width: 50%;
    text-align: left
}

.instagram {
    position: relative;
    display: table
}

.instagram.feed {
    position: relative;
    display: table;
    text-align: left
}

.instagram.feed>ul {
    position: relative;
    display: table
}

.instagram.feed>ul>li {
    position: relative;
    display: inline-table;
    list-style: none;
    width: 32%;
    padding: 0 5px 5px 0
}

.instagram.feed>ul>li>img {
    width: 100%;
    display: table
}

.social>ul,
ul.social {
    display: table
}

.social>ul>li,
ul.social>li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    text-align: center
}

.social>ul>li>a,
ul.social>li>a {
    font-size: 20px;
    color: inherit;
    vertical-align: middle;
    font-weight: 400
}

.social>ul>li:before,
.social>ul>li>a:before,
ul.social>li:before,
ul.social>li>a:before {
    position: relative;
    display: inline-block;
    content: '';
    vertical-align: middle;
    font-family: "Socicon";
    vertical-align: middle;
    background-position: center;
    background-size: auto;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    color: inherit
}

.social>ul>li:hover:before .social>ul>li>a:hover:before,
ul.social>li:hover:before ul.social>li>a:hover:before {
    color: inherit
}

.social>ul>li.facebook:before,
.social>ul>li>a.facebook:before,
ul.social>li.facebook:before,
ul.social>li>a.facebook:before {
    content: ''
}

.social>ul>li.youtube:before,
.social>ul>li>a.youtube:before,
ul.social>li.youtube:before,
ul.social>li>a.youtube:before {
    content: ''
}

.social>ul>li.instagram:before,
.social>ul>li>a.instagram:before,
ul.social>li.instagram:before,
ul.social>li>a.instagram:before {
    content: ''
}

.social>ul>li.twitter:before,
.social>ul>li>a.twitter:before,
ul.social>li.twitter:before,
ul.social>li>a.twitter:before {
    content: ''
}

.social>ul>li.vimeo:before,
.social>ul>li>a.vimeo:before,
ul.social>li.vimeo:before,
ul.social>li>a.vimeo:before {
    content: ''
}

.social>ul>li.tiktok:before,
.social>ul>li>a.tiktok:before,
ul.social>li.tiktok:before,
ul.social>li>a.tiktok:before {
    content: '';
    -webkit-mask-image: url(../../../../files/img/frontend/tiktok.svg);
    mask-image: url(../../../../files/img/frontend/tiktok.svg);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--text-color-invert);
    content: '1';
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    color: transparent !important
}

ul.social>li>alinkedin:before {
    content: ''
}

ul.social>li>a.whatsapp:before {
    content: ''
}

ul.social>li>a.linkedin:before {
    content: '';
    padding-bottom: 5px
}

ul.social>li>a.email:before {
    font-family: "Material Icons";
    content: ''
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(243, 244, 243, .8);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: table;
    vertical-align: middle;
    text-align: center;
    z-index: 30;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.loader-to-back {
    z-index: -1;
    opacity: 0
}

.loader-hide {
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0
}

.loader>.loader-container {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.loader>.loader-container>.icon {
    position: relative;
    text-align: center;
    display: table;
    width: 127px;
    height: 127px;
    margin: 0 auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center
}

.loader:not(.loader-hide)>.loader-container>.icon {
    -webkit-animation: spin 1s ease-out 10ms infinite;
    -moz-animation: spin 1s ease-out 10ms infinite;
    animation: spin 1s ease-out 10ms infinite
}

.loader:not(.loader-hide) {
    backdrop-filter: blur(3px)
}

.loader>.loader-container>.icon:after {
    position: relative;
    display: table-cell;
    font-size: 81px;
    content: '';
    font-size: 38px;
    content: '';
    font-family: "Material Icons";
    color: #000;
    text-align: center;
    vertical-align: middle;
    width: 100%
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.loader>.loader-container>.message {
    position: relative;
    display: block;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 0
}

.loader.dev>.loader-container>.message {
    background-color: #fff;
    max-height: 70vh;
    overflow-y: auto;
    width: 80%;
    margin: 0 auto;
    border: solid 10px #e3e3e3;
    text-align: left;
    padding: 20px;
    text-transform: none;
    background-color: #e3e3e3;
    border-radius: var(--default-border-radius)
}

.loader.dev .loader-container>.message>h3 {
    position: relative;
    display: block;
    font-size: 20px;
    padding: 10px 0;
    color: #000
}

.loader.dev .loader-container>.message>span {
    position: relative;
    display: block;
    padding: 5px 0;
    border-bottom: solid 1px #d3d3d3;
    font-size: 14px
}

.loader.dev .loader-container>.message>span:before {
    position: relative;
    font-family: "Material Icons";
    font-size: 18px;
    color: #000;
    vertical-align: middle;
    text-align: center;
    content: '';
    padding-right: 5px
}

.processing:after {
    position: absolute;
    content: 'restart_alt';
    font-size: 20px;
    font-family: "Material Icons";
    display: block;
    -webkit-animation: loader-2-1 3s linear infinite;
    animation: loader-2-1 3s linear infinite
}

.loader-2 {
    display: block;
    height: 32px;
    width: 32px;
    content: '';
    -webkit-animation: loader-2-1 3s linear infinite;
    animation: loader-2-1 3s linear infinite
}

@-webkit-keyframes loader-2-1 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-1 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2 span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    clip: rect(16px, 32px, 32px, 0);
    -webkit-animation: loader-2-2 1.5s cubic-bezier(.77, 0, .175, 1) infinite;
    animation: loader-2-2 1.5s cubic-bezier(.77, 0, .175, 1) infinite
}

@-webkit-keyframes loader-2-2 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-2 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2 span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    border: 3px solid transparent;
    border-top: 3px solid #FFF;
    border-radius: 50%;
    -webkit-animation: loader-2-3 1.5s cubic-bezier(.77, 0, .175, 1) infinite;
    animation: loader-2-3 1.5s cubic-bezier(.77, 0, .175, 1) infinite
}

@-webkit-keyframes loader-2-3 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-3 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2 span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 3px solid #000;
    border-radius: 50%
}

.loader>.loader-container>.icon:after {
    font-size: 0
}

.loader-2page {
    margin: 0 auto;
    display: block;
    height: 32px;
    width: 32px;
    -webkit-animation: loader-2-1 3s linear infinite;
    animation: loader-2-1 3s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    left: calc(50% - 16px)
}

@-webkit-keyframes loader-2-1 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-1 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2page span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    clip: rect(16px, 32px, 32px, 0);
    -webkit-animation: loader-2-2 1.5s cubic-bezier(.77, 0, .175, 1) infinite;
    animation: loader-2-2 1.5s cubic-bezier(.77, 0, .175, 1) infinite
}

@-webkit-keyframes loader-2-2 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-2 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2page span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 32px;
    width: 32px;
    border: 3px solid transparent;
    border-radius: 50%;
    -webkit-animation: loader-2-3 1.5s cubic-bezier(.77, 0, .175, 1) infinite;
    animation: loader-2-3 1.5s cubic-bezier(.77, 0, .175, 1) infinite
}

@-webkit-keyframes loader-2-3 {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loader-2-3 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loader-2page span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 3px solid v #000;
    ;
    border-radius: 50%
}

.loader>.loader-container>.icon:after {
    font-size: 0
}

.thinking {
    opacity: .4;
    pointer-events: none
}

form {
    position: relative;
    display: block
}

.disabled {
    opacity: .5
}

.field {
    position: relative;
    display: inline-table;
    vertical-align: top;
    display: table
}

.flg_boolean {
    position: relative
}

.field-col {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    display: inline-block
}

.field-box {
    position: relative
}

.form-repeat-input {
    margin-top: 10px
}

input.null {
    border: none;
    background-color: transparent
}

.locked {
    pointer-events: none;
    ;
    opacity: .5
}

.form-display {
    position: relative;
    opacity: .5
}

.field-half {
    position: relative;
    display: inline-table
}

.field-half textarea {
    position: relative
}

.form-field {
    position: relative
}

.form-field-table {
    position: relative;
    display: table
}

.form-field-col {
    position: relative;
    display: table-cell
}

.form-field-col input {
    width: 100%
}

.form-field-col div {
    font-size: 10px;
    text-align: left;
    padding: 0 0 0 10px;
    color: var(--text-color)
}

input,
select,
textarea {
    position: relative
}

select {
    text-overflow: ellipsis;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 35px !important
}

.select-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.field .select-wrapper {
    width: 100%
}

.select-wrapper:after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    color: var(--text-color);
    font-family: "Material Icons";
    font-size: 26px;
    vertical-align: middle;
    line-height: 43px;
    z-index: 1
}

.field .select-wrapper.unselect:after {
    display: none
}

select option {
    color: var(--text-color);
    background-color: var(--bg-color);
    font-size: inherit
}

.input-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

fieldset.full {
    width: 100%
}

input[type=checkbox],
input[type=radio] {
    display: inline-block;
    width: 25px;
    vertical-align: middle
}

input[type=radio],
input[type="checkbox"] {
    display: none !important;
    vertical-align: middle
}

input[type=radio].toggle,
input[type="checkbox"].toggle {
    display: none !important;
    vertical-align: middle
}

input[type="radio"]+label,
input[type="checkbox"]+label {
    display: inline-block;
    vertical-align: middle;
    color: #80848f;
    display: inline;
    font-size: 14px
}

input[type="radio"]+label.text,
input[type="checkbox"]+label.text {
    font-size: 14px;
    font-weight: 500;
    font-style: normal
}

input[type="radio"]+label>span,
input[type="checkbox"]+label>span {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 5px;
    ;
    vertical-align: middle;
    cursor: pointer;
    border: solid 2px #A5A7A7;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%
}

input[type="checkbox"]+label>span+div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-color)
}

input[type="checkbox"]:checked+label>span:after {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 22px;
    height: 22px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    color: #A5A7A7;
    font-size: 20px;
    font-family: "Material Icons";
    line-height: 22px;
    font-weight: 700
}

input[type="checkbox"]:not(.toggle):checked+label:not(.slider)>span:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 70%;
    background-color: #80848f !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #A5A7A7;
    font-size: 13px;
    font-family: "Material Icons";
    line-height: 13px;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    content: ''
}

input[type="checkbox"]+label.slider>span {
    display: inline-block;
    position: relative;
    width: 50px;
    width: calc((( var(--checkbox-slider-button-size)) * 2) + (var(--checkbox-slider-button-margin) * 2));
    height: calc(var(--checkbox-slider-button-size) + (var(--checkbox-slider-button-margin) * 2));
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    background-color: var(--bg-color);
    background-color: #cdcccd;
    border: none
}

input[type="radio"]:checked+label>span:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    color: #A5A7A7;
    font-size: 12px;
    font-family: "Material Icons";
    line-height: 22px;
    font-weight: 700;
    text-align: center;
    transform: translateX(-50%) translateY(-50%)
}

input[type="radio"]+label.slider>span {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 33px;
    height: 28px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border: none
}

input[type="radio"]:checked+label.slider>span,
input[type="checkbox"]:checked+label.slider>span {
    background-color: var(--text-color)
}

input[type="radio"]+label.slider>span:after,
input[type="checkbox"]+label.slider>span:after {
    position: absolute;
    top: var(--checkbox-slider-button-margin);
    left: var(--checkbox-slider-button-margin);
    width: var(--checkbox-slider-button-size);
    height: var(--checkbox-slider-button-size);
    -moz-border-radius: var(--checkbox-slider-button-radius);
    -webkit-border-radius: var(--checkbox-slider-button-radius);
    border-radius: var(--checkbox-slider-button-radius);
    content: ' ';
    background-image: none !important;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    transition: .2s;
    color: transparent !important;
    box-shadow: 0 calc(var(--checkbox-slider-button-margin-shadow)/2) var(--checkbox-slider-button-margin-shadow) 0 rgba(0, 0, 0, .41);
    background-color: var(--bg-color)
}

input[type="radio"]:checked+label.slider>span:after,
input[type="checkbox"]:checked+label.slider>span:after {
    left: calc(var(--checkbox-slider-button-size) + var(--checkbox-slider-button-margin));
    background-color: var(--light-bg-color) !important
}

input[type="radio"]+label>span,
input[type="radio"]+label>div {
    display: inline-block;
    vertical-align: middle
}

.tiny_toggle input[type=checkbox],
.tiny_toggle input[type=radio] {
    width: 15px
}

.tiny_toggle input[type="radio"]+label>span,
.tiny_toggle input[type="checkbox"]+label>span {
    width: 18px;
    height: 18px
}

.tiny_toggle input[type="checkbox"]:checked+label>span:after {
    top: -2px;
    left: -2px;
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 22px
}

.tiny_toggle input[type="checkbox"]:not(.toggle):checked+label:not(.slider)>span:after {
    width: 70%;
    height: 70%;
    font-size: 13px;
    line-height: 13px;
    content: ''
}

.tiny_toggle input[type="checkbox"]+label.slider>span {
    width: 30px;
    height: 30px;
    height: 18px;
    margin: -1px 4px 0 0;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px
}

.tiny_toggle input[type="radio"]:checked+label>span:after {
    top: -2px;
    left: -2px;
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 22px
}

.tiny_toggle input[type="radio"]+label.slider>span {
    width: 30px;
    height: 33px;
    height: 28px;
    margin: -1px 4px 0 0
}

.tiny_toggle input[type="radio"]+label.slider>span:after,
.tiny_toggle input[type="checkbox"]+label.slider>span:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px
}

.tiny_toggle input[type="radio"]:checked+label.slider>span:after,
.tiny_toggle input[type="checkbox"]:checked+label.slider>span:after {
    left: 16px;
    width: 18px;
    height: 18px
}

.button,
.bt,
button {
    position: relative;
    cursor: pointer;
    border: none
}

.bt-container {
    position: relative;
    padding: 10px 0;
    display: table
}

.bt-container button {
    margin: 0 5px 5px 0
}

.bt-spacer {
    position: relative;
    display: table;
    padding: 20px 0
}

.form-remove {
    position: absolute;
    color: var(--text-color);
    font-size: 20px;
    display: inline;
    right: 10px;
    cursor: pointer;
    font-family: "Material Icons";
    vertical-align: middle;
    top: 50%;
    transform: translateY(-50%)
}

.form-remove:hover {
    color: var(--alert-color)
}

.check {
    position: relative;
    display: table;
    vertical-align: middle
}

.atention {
    background-color: var(--alert-color);
    color: var(--bg-color);
    border-color: var(--alert-color);
    font-size: 16px
}

.atention:hover {
    background-color: var(--text-color);
    color: var(--bg-color)
}

.form-confirmed {
    position: absolute;
    display: table;
    height: 43px;
    right: 10px;
    color: var(--alert-color);
    font-size: 14px;
    line-height: 43px;
    padding: 0 30px 0 0;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%
}

.form-help {
    position: absolute;
    display: table;
    height: 43px;
    right: 10px;
    color: var(--alert-color);
    font-size: 14px;
    line-height: 43px;
    padding: 0 30px 0 0;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
    cursor: pointer
}

.clean {
    width: auto !important;
    height: auto !important
}

.report {
    position: relative;
    width: 100%;
    margin: 20px 0
}

.report tr td {
    padding: 5px;
    border: solid 1px #ccc;
    color: var(--text-color);
    font-size: 13px;
    color: var(--text-color)
}

.report .table-title {
    font-size: 18px;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700
}

.report .table-name {
    position: relative;
    font-size: 18px;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 0
}

.report .col-name {
    font-size: 13px;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 700;
    word-break: normal
}

.form-mobile-spacer {
    display: none
}

.input_link {
    position: relative !important;
    display: block;
    text-decoration: underline !important;
    color: var(--text-color);
    padding: 20px 10px 10px 10px;
    font-weight: 700;
    font-size: 12px
}

fieldset {
    position: relative;
    display: table;
    border: none
}

.reveal-action {
    position: relative;
    display: block;
    font-size: 12px;
    text-align: right
}

.reveal-action:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    font-family: "Material Icons";
    content: '';
    padding-left: 5px;
    cursor: pointer
}

.reveal-action.active:after {
    content: ''
}

fieldset[data-separated="1"][data-base_repeater="1"]>.messenger {
    display: none !important
}

.input_editor_container[data-layout="minimalist"] .tox-tinymce {
    border: none !important;
    border-radius: 0px !important;
    background-color: #fff
}

.input_editor_container[data-layout="minimalist"] .tox .tox-toolbar-overlord,
.input_editor_container[data-layout="minimalist"] .tox:not(.tox-tinymce-inline) .tox-editor-header,
.input_editor_container[data-layout="minimalist"] .tox .tox-toolbar,
.input_editor_container[data-layout="minimalist"] .tox .tox-toolbar__overflow,
.input_editor_container[data-layout="minimalist"] .tox .tox-toolbar__primary,
.input_editor_container[data-layout="minimalist"] .tox .tox-statusbar,
.input_editor_container[data-layout="minimalist"] .tox .tox-edit-area__iframe {
    background-color: transparent !important
}

.input_editor_container[data-layout="minimalist"] .tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none !important;
    border-bottom: solid 1px var(--light-border-color) !important
}

.plain-editor-container *,
.plain-editor-container {
    font-size: 14px
}

table.json>tbody,
table.json {
    display: table;
    width: 100%
}

table.json>tbody>tr {
    position: relative;
    display: table-row;
    border-top: solid 1px var(--text-color)
}

table.json>tbody>tr:first-child {
    border-top: none
}

table.json>tbody>tr>td {
    display: table-cell;
    text-align: left;
    padding: 2px 0
}

table.json>tbody>tr>td:last-child {
    text-align: right
}

table.json tr>td,
table.json tr,
table.json {
    font-size: 10px
}

.lightbox-form .field_edit {
    display: none
}

.new_content_window {
    display: none
}

@media only screen and (min-width:800px) and (max-width:10000px) {
    :root {
        --checkbox-slider-button-size: 25px;
        --checkbox-slider-button-radius: 100%;
        --checkbox-slider-button-margin: 4px;
        --checkbox-slider-button-margin-shadow: 0
    }
}

@media only screen and (min-width:20px) and (max-width:800px) {
    :root {
        --checkbox-slider-button-size: calc(var(--grid-size) * .4);
        --checkbox-slider-button-radius: 100%;
        --checkbox-slider-button-margin: 4px;
        --checkbox-slider-button-margin-shadow: 0
    }
}

div.carousel {
    position: relative;
    display: block;
    width: 100%;
    height: inherit;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

div.carousel>ul {
    position: relative;
    display: block;
    width: 100%;
    height: inherit
}

div.carousel>ul>li {
    position: relative;
    display: none;
    width: 100%;
    height: inherit;
    background-size: cover;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

div.carousel>ul>li.active {
    display: block
}

div.carousel>ul>li>figure {
    position: relative;
    display: table;
    width: 100%;
    height: inherit;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

div.carousel>ul>li>figure>img {
    position: relative;
    display: table;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0
}

div.carousel>ul>li>div {
    position: absolute;
    display: table;
    top: 0
}

div.dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    z-index: 2
}

div.dots>ul {
    position: relative;
    display: table;
    margin-left: -50%
}

div.dots>ul>li {
    position: relative;
    display: table-cell;
    padding: 4px;
    cursor: pointer
}

div.dots>ul>li>div {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    background-color: #FFF
}

div.dots>ul>li:hover>div,
div.dots>ul>li.active>div {
    opacity: 1;
    background-color: #000
}

div.dots>ul>li>div>span {
    position: relative;
    display: none;
    width: 0;
    height: 100%;
    background-color: #000
}

div.dots>ul>li>div>span.status {
    display: block
}

:root {
    --lightbox-start-deg: 45deg;
    --lightbox-start-deg-invert: -45deg;
    --lightbox-start-scalez: .5;
    --lightbox-bg-color: #fff;
    --lightbox-transform-speed: .4s;
    --lightbox-button-size: 40px;
    --lightbox-button-multiplier: .6;
    --lightbox-button-top-offset: 0;
    --lightbox-button-right-offset: 0
}

.lightbox-default,
.lightbox {
    position: fixed;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    transition: var(--lightbox-transform-speed);
    transform-style: preserve-3d;
    transform-origin: center;
    perspective: 800px
}

.lightbox-default>.wrapper>.wrapper-content>.close,
.lightbox .wrapper>.wrapper-content>.close,
.lightbox-default>.wrapper>.wrapper-content>.maximize,
.lightbox .wrapper>.wrapper-content>.maximize,
.lightbox-default>.wrapper>.wrapper-content>.minimize,
.lightbox .wrapper>.wrapper-content>.minimize {
    position: absolute;
    color: var(--text-color);
    cursor: pointer;
    z-index: 1;
    font-size: calc(var(--lightbox-button-size) * var(--lightbox-button-multiplier));
    width: calc(var(--lightbox-button-size) * 1);
    height: calc(var(--lightbox-button-size) * 1);
    transition: 5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    font-weight: 700;
    font-family: "Material Icons";
    font-weight: 400;
    text-align: left
}

.lightbox-default>.wrapper>.wrapper-content>.close:hover,
.lightbox .wrapper>.wrapper-content>.close:hover,
.lightbox-default>.wrapper>.wrapper-content>.maximize:hover,
.lightbox .wrapper>.wrapper-content>.maximize:hover,
.lightbox-default>.wrapper>.wrapper-content>.minimize:hover,
.lightbox .wrapper>.wrapper-content>.minimize:hover {
    color: var(--text-color)
}

.lightbox-default>.wrapper>.wrapper-content>.close,
.lightbox .wrapper>.wrapper-content>.close {
    top: var(--lightbox-button-top-offset);
    right: var(--lightbox-button-right-offset);
    text-align: center;
    line-height: var(--lightbox-button-size);
    padding: 0
}

.lightbox-default>.wrapper>.wrapper-content>.minimize,
.lightbox .wrapper>.wrapper-content>.minimize {
    top: var(--lightbox-button-top-offset);
    right: calc(var(--lightbox-button-size) + var(--lightbox-button-right-offset));
    right: calc(var(--lightbox-button-size));
    opacity: .4;
    text-align: center;
    line-height: var(--lightbox-button-size)
}

.lightbox-default>.wrapper>.wrapper-content>.minimize.active,
.lightbox .wrapper>.wrapper-content>.minimize.active {
    opacity: 1
}

.lightbox-default>.wrapper>.wrapper-content>.maximize,
.lightbox .wrapper>.wrapper-content>.maximize {
    top: var(--lightbox-button-top-offset);
    right: calc(var(--lightbox-button-size) + var(--lightbox-button-right-offset));
    right: calc(var(--lightbox-button-size));
    opacity: .4;
    text-align: center;
    line-height: var(--lightbox-button-size)
}

.lightbox-default>.wrapper>.wrapper-content>.maximize.active,
.lightbox .wrapper>.wrapper-content>.maximize.active {
    opacity: 1
}

.lightbox>.wrapper>.wrapper-content>.maximize+.minimize,
.lightbox-default>.wrapper>.wrapper-content>.maximize+.minimize {
    right: calc((var(--lightbox-button-size) *2) + var(--lightbox-button-right-offset));
    right: calc((var(--lightbox-button-size) *2))
}

.lightbox-default>.wrapper,
.lightbox>.wrapper {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: center;
    perspective: 800px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: initial;
    background-color: transparent;
    transition: transform var(--lightbox-transform-speed);
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform var(--lightbox-transform-speed);
    -o-transition: var(--lightbox-transform-speed);
    -ms-transition: var(--lightbox-transform-speed);
    -moz-transition: var(--lightbox-transform-speed);
    -webkit-transition: var(--lightbox-transform-speed);
    transition: var(--lightbox-transform-speed);
    transform-origin: left !important;
    display: table-cell;
    margin: 0 auto;
    width: auto !important;
    max-height: 100%;
    max-width: 100%
}

.lightbox-default>.wrapper>.wrapper-content,
.lightbox>.wrapper>.wrapper-content {
    position: relative;
    vertical-align: middle;
    margin: 0 auto;
    background-color: #fff;
    background-color: var(--light-bg-color);
    display: table;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    transition: .2s;
    -o-transition: .2s;
    -ms-transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s
}

.lightbox-default.maxed>.wrapper>.wrapper-content,
.lightbox.maxed>.wrapper>.wrapper-content {
    border-radius: 0
}

.lightbox-default.maxed>.wrapper>.wrapper-content>.content>span,
.lightbox.maxed>.wrapper>.wrapper-content>.content>span {
    position: relative;
    display: block;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden
}

.lightbox-default>.wrapper>.wrapper-content>.lightbox-content-wrapper,
.lightbox>.wrapper>.wrapper-content>.lightbox-content-wrapper {
    position: relative;
    display: table;
    margin: 0 auto
}

.lightbox-default>.wrapper>.wrapper-content>.content,
.lightbox>.wrapper>.wrapper-content>.content {
    position: relative;
    display: table-cell;
    min-height: 280px;
    vertical-align: middle;
    width: 100%
}

.lightbox-default>.wrapper>.wrapper-content>.content>iframe,
.lightbox>.wrapper>.wrapper-content>.content>iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-color: var(--bg-color);
    border: none
}

.lightbox-default>.wrapper>.wrapper-content>.content>iframe.stretch,
.lightbox>.wrapper>.wrapper-content>.content>iframe.stretch {
    min-height: 60vh;
    margin-bottom: 30px
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper {
    position: relative;
    display: block;
    padding: 50px;
    min-width: 320px;
    padding: var(--lightbox-button-size) 5px 30px 20px
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title {
    position: relative;
    display: table;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    padding: 10px 0 0 0;
    text-align: left
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title.exception:after,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title.exception:after {
    content: '';
    font-family: "Material Icons";
    color: var(--alert-color);
    font-size: 30px;
    padding: 8px;
    vertical-align: middle
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.text,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.text {
    position: relative;
    display: table;
    font-size: 14px;
    color: var(--text-color);
    padding: 10px 0 20px 0;
    text-align: left
}

.lightbox-default .wrapper .wrapper-content>.content .timeout-timer,
.lightbox>.wrapper>.wrapper-content>.content .timeout-timer {
    position: relative;
    display: table;
    font-size: 22px;
    color: #fff;
    padding: 10px 0
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1,
.lightbox-default>.wrapper>.wrapper-content>.content>h1,
.lightbox>.wrapper>.wrapper-content>.content>h1 {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 22px;
    color: var(--text-color);
    font-weight: 400;
    text-align: left
}

.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1 {
    font-size: 16px;
    font-weight: 700
}

.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    color: var(--text-color);
    font-family: "Material Icons";
    content: "";
    padding-right: 5px
}

.lightbox-default>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1>span,
.lightbox>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>h1>span,
.lightbox-default>.wrapper>.wrapper-content>.content>h1>span,
.lightbox>.wrapper>.wrapper-content>.content>h1>span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit
}

.lightbox-default .button,
.lightbox .button,
.lightbox-default button,
.lightbox button {
    position: relative;
    color: var(--text-color-invert);
    background-color: var(--text-color);
    padding: 10px;
    font-size: 14px;
    line-height: 100%;
    font-weight: 700;
    ;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: 5s;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    border-radius: var(--default-border-radius)
}

.lightbox-default .button:after,
.lightbox .button:after,
.lightbox-default button:after,
.lightbox button:after {
    font-family: "Material Icons";
    position: relative;
    color: var(--text-color);
    color: inherit;
    width: auto;
    height: initial;
    line-height: 20px;
    font-size: 22px;
    display: inline-block;
    vertical-align: middle;
    top: initial;
    left: initial;
    transform: none;
    margin-left: 10px;
    font-weight: 400
}

.lightbox-default button:hover,
.lightbox button:hover {
    background-color: var(--text-color-invert);
    color: var(--text-color)
}

.lightbox-default .bt-container,
.lightbox .bt-container {
    position: relative;
    padding: 10px 0;
    display: table;
    width: 100%;
    text-align: left
}

.lightbox-default .button-container,
.lightbox .button-container {
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 10px 0;
    text-align: left
}

.lightbox-default .button-container .button,
.lightbox .button-container button {
    position: relative;
    display: table;
    margin: 0 auto
}

.lightbox-default .button:before,
.lightbox button:before,
.lightbox-default .button:after,
.lightbox button:after {
    display: none !important
}

.lightbox-default .form,
.lightbox .form {
    display: table
}

.lightbox-default .form .field,
.lightbox .form .field {
    width: auto;
    margin: 0
}

.lightbox-default textarea,
.lightbox-default input,
.lightbox-default select,
.lightbox textarea,
.lightbox input,
.lightbox select {
    width: 100%;
    padding: 4px
}

.lightbox[data-class="lightbox-image-preview"]>.wrapper>.wrapper-content {
    background: repeating-conic-gradient(var(--light-bg-color) 0% 25%, var(--light-text-color) 0% 50%) 50% / 20px 20px
}

.lightbox .lightbox-img-zoom {
    min-width: 100px;
    min-height: 100px;
    object-fit: contain
}

.lightbox-default .lightbox-img-zoom,
.lightbox .lightbox-img-zoom {
    width: 100%;
    height: 100%
}

.lightbox.portrait .lightbox-img-zoom {
    width: 100%;
    max-height: 100vh
}

.lightbox.landscape .lightbox-img-zoom {
    height: 100%;
    max-width: 100vw
}

.lightbox.square .lightbox-img-zoom {
    width: 100%;
    max-height: 100vh
}

.lightbox-default>.wrapper>.wrapper-content>.content .scroller,
.lightbox>.wrapper>.wrapper-content>.content .scroller {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    display: block;
    width: 100%;
    max-height: 80vh;
    margin: 5vh 0;
    padding: 10px;
    text-align: left;
    color: var(--text-color)
}

.lightbox-open {
    display: table;
    z-index: 11;
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.lightbox-open.lightbox-activated {
    backdrop-filter: blur(2px)
}

.lightbox-holder {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0
}

.lightbox-draft.lightbox-default.lightbox-open .wrapper .wrapper-content {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    background-color: var(--bg-color)
}

.lightbox-draft.lightbox-default.lightbox-open .wrapper .wrapper-content>.content>iframe {
    width: calc(100vw);
    height: 100vh;
    background-color: #fff;
    background-color: var(--bg-color)
}

.lightbox-open.docked {
    left: 48%;
    scale: 0;
    transform-origin: top
}

.lightbox.hatched {
    z-index: 11;
    opacity: 1;
    scale: 0 !important;
    transform-origin: top left;
    border-radius: 100%;
    overflow: hidden;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important
}

.lightbox.hatched>.wrapper {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important
}

.lightbox.hatched>.wrapper>.wrapper-content {
    border-radius: 50% !important;
    overflow: hidden
}

.lightbox.hatched-close {
    z-index: 11;
    opacity: 1;
    scale: 0 !important;
    transform-origin: top left !important
}

.lightbox.hatched-close.tl>.wrapper,
.lightbox.hatched.tl>.wrapper {
    transform: rotateX(var(--lightbox-start-deg)) rotatey(var(--lightbox-start-deg)) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.tc>.wrapper,
.lightbox.hatched.tc>.wrapper {
    transform: rotateX(0deg) rotatey(var(--lightbox-start-deg)) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.tr>.wrapper,
.lightbox.hatched.tr>.wrapper {
    transform: rotateX(var(--lightbox-start-deg-invert)) rotatey(var(--lightbox-start-deg)) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.cl>.wrapper,
.lightbox.hatched.cl>.wrapper {
    transform: rotateX(var(--lightbox-start-deg)) rotatey(0deg) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.cc>.wrapper,
.lightbox.hatched.cc>.wrapper {
    transform: rotateX(0deg) rotatey(0deg) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.cr>.wrapper,
.lightbox.hatched.cr>.wrapper {
    transform: rotateX(var(--lightbox-start-deg-invert)) rotatey(0deg) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.bl>.wrapper,
.lightbox.hatched.bl>.wrapper {
    transform: rotateX(var(--lightbox-start-deg)) rotatey(var(--lightbox-start-deg-invert)) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.bc>.wrapper,
.lightbox.hatched.bc>.wrapper {
    transform: rotateX(0deg) rotatey(var(--lightbox-start-deg-invert)) scaleZ(var(--lightbox-start-scalez)) !important
}

.lightbox.hatched-close.br>.wrapper,
.lightbox.hatched.br>.wrapper {
    transform: rotateX(var(--lightbox-start-deg-invert)) rotatey(var(--lightbox-start-deg-invert)) scaleZ(var(--lightbox-start-scalez)) !important
}

.window_resizer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    z-index: 1;
    display: block;
    cursor: nwse-resize;
    opacity: 0;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: 2
}

.window_resizer:after {
    position: relative;
    display: block;
    color: var(--text-color);
    font-size: 20px;
    font-family: "Material Icons";
    line-height: 100%;
    content: '';
    transform: rotate(270deg);
    transform-origin: center;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    color: var(--text-color-invert)
}

.lightbox-activated .window_resizer {
    opacity: 1
}

.lightbox .backend-form {
    position: relative;
    display: block;
    overflow-y: auto !important;
    padding: 0 10px 0 0px !important
}

.lightbox fieldset {
    position: relative;
    display: block
}

.lightbox input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
    border: none;
    font-size: 14px;
    color: var(--text-color);
    padding: 10px;
    width: 100%;
    border: solid 1px #c4c4c4;
    border-radius: 10px
}

.lightbox label {
    position: relative;
    display: table;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
    color: var(--text-color);
    max-width: 90%
}

.lightbox iframe {
    position: relative;
    display: table;
    margin: 0 auto;
    width: 100%;
    height: 50vh;
    border: none
}

.lightbox[data-header]>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper {
    padding-top: 0 !important
}

.lightbox[data-header]>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: "Material Icons";
    font-size: 32px;
    color: inherit;
    padding-right: 8px
}

.lightbox[data-header]>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title::after {
    display: none
}

.lightbox[data-header]>.wrapper>.wrapper-content>.content>.lightbox-content-wrapper>.title {
    font-size: 18px;
    margin: 10px 60px 10px 0;
    background-color: #c6c6c6;
    color: #fff;
    padding: 80px 10px 10px 20px;
    width: calc(100% + 25px);
    display: block;
    margin: 0;
    left: -20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--header-top-bg-color);
    color: var(--header-topper-text-color)
}

.lightbox-default[data-header]>.wrapper>.wrapper-content>.maximize,
.lightbox[data-header] .wrapper>.wrapper-content>.maximize,
.lightbox-default[data-header]>.wrapper>.wrapper-content>.close,
.lightbox[data-header] .wrapper>.wrapper-content>.close,
.lightbox-default[data-header]>.wrapper>.wrapper-content>.minimize,
.lightbox[data-header] .wrapper>.wrapper-content>.minimize {
    background-color: transparent;
    color: #fff
}

.lightbox[data-header]>.wrapper>.window_resizer:hover,
.lightbox-default[data-header]>.wrapper>.window_resizer:hover,
.lightbox-default[data-header]>.wrapper>.wrapper-content>.maximize:hover,
.lightbox[data-header] .wrapper>.wrapper-content>.maximize:hover,
.lightbox-default[data-header]>.wrapper>.wrapper-content>.close:hover,
.lightbox[data-header] .wrapper>.wrapper-content>.close:hover,
.lightbox-default[data-header]>.wrapper>.wrapper-content>.minimize:hover,
.lightbox[data-header] .wrapper>.wrapper-content>.minimize:hover {
    background-color: rgba(0, 0, 0, .5)
}

.lightbox>.wrapper>.window_resizer:hover,
.lightbox-default>.wrapper>.window_resizer:hover,
.lightbox-default>.wrapper>.wrapper-content>.maximize:hover,
.lightbox .wrapper>.wrapper-content>.maximize:hover,
.lightbox-default>.wrapper>.wrapper-content>.close:hover,
.lightbox .wrapper>.wrapper-content>.close:hover,
.lightbox-default>.wrapper>.wrapper-content>.minimize:hover,
.lightbox .wrapper>.wrapper-content>.minimize:hover {
    background-color: rgba(255, 255, 255, .5)
}

.lightbox-form+.main-commands {
    margin: 0
}

.lightbox .dialog_alert_error {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--alert-color);
    color: var(--text-color-invert);
    font-size: 12px;
    font-weight: 700;
    z-index: 0
}

.lightbox .dialog_alert_error>span {
    position: relative;
    display: inline-block;
    padding: 7px 4px;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    width: calc(100% - 90px)
}

.lightbox .dialog_alert_error>span>span {
    position: relative;
    display: inline-block;
    padding: 5px 0
}

.lightbox .dialog_alert_ok {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--alert-ok-color);
    color: var(--text-color-invert);
    font-size: 12px;
    font-weight: 700;
    z-index: 1
}

.lightbox .dialog_alert_ok>span {
    position: relative;
    display: inline-block;
    padding: 10px 4px;
    color: inherit;
    font-size: inherit;
    vertical-align: middle
}

.lightbox .dialog_alert_error>span *,
.lightbox .dialog_alert_ok>span * {
    color: inherit;
    font-size: inherit
}

.lightbox .dialog_alert_error,
.lightbox .dialog_alert_ok {
    border-bottom-left-radius: var(--default-border-radius);
    border-bottom-right-radius: var(--default-border-radius);
    margin-top: 4px;
    z-index: 1;
    padding-left: 10px
}

.lightbox .dialog_alert_error>a.ok,
.lightbox .dialog_alert_ok>a.ok {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: solid 1px currentColor;
    border-radius: var(--default-border-radius);
    padding: 1px 6px;
    margin-left: 5px
}

.lightbox .dialog_alert_error:before,
.lightbox .dialog_alert_ok:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: inherit;
    font-family: "Material Icons";
    font-weight: 400
}

.lightbox .dialog_alert_error:before {
    content: ''
}

.lightbox .dialog_alert_ok:before {
    content: ''
}