body.page-id-1926 #korion-header {
display: none;
}
body.page-id-1926 #korion-header .container {
width: 100%;
max-width: 100% !important;
}
.pergola_main_view {}
body.page-id-1926 #korion-topbar {
display: none;
}
body.page-id-1926 main {
padding-top: 0;
}
body.page-id-1926 #korion-footer {
display: none;
}
.configurator-sidebar {
width: 360px;
min-width: 360px;
height: 100vh;
overflow: hidden;
position: relative;
padding-bottom: 40px;
background: linear-gradient(-45deg, #234178, #12213d);
}
#configurator-bottom-bar {
width: calc(100% - 360px);
transition: all 0.4s linear;
max-width: calc(1920px - 360px);
}
#configurator-bottom-bar small {
font-size: 12px;
}
@media screen and (max-width: 1024px) {
#configurator-bottom-bar.shift-down {
bottom: -120px;
}
}
#total_config_price {
line-height: 1;
}
.configurator-sidebar__content {
border-radius: 0;
padding: 30px 30px 20px 30px;
width: 100%;
color: #ffffff;
}
.configurator-sidebar__content .sidebar-header {
font-size: 1.2em !important;
font-weight: 600;
}
.configurator-content {
width: 75%;
max-width: 100%;
min-width: 600px;
flex-grow: 1;
background: #ffffff;
}
.configurator-section {
background: linear-gradient(-34deg, #fefefe, #ffffff);
border-radius: 0;
display: flex;
flex-direction: column;
margin-bottom: 0;
overflow: hidden;
transition: all 0.3s linear;
max-height: calc(100vh);
position: relative;
}
.configurator-section.swiper-slide {
opacity: 0;
visibility: hidden;
}
.configurator-section.swiper-slide-active {
opacity: 1;
visibility: visible;
}
.configurator-section__helper {
padding: 10px 40px 10px 40px;
font-size: 1em;
font-weight: 300;
border-bottom: 1px solid #eeeeee;
}
.cs-content-wrap .configurator-section__helper {
padding: 10px 20px 0 0;
width: 100%;
border: none;
}
.configurator-section__helper p {
margin: 0;
font-size: 16px;
color: #444444;
}
.configurator-section__header {
border-bottom: 1px solid #eeeeee;
padding: 30px 40px 20px 40px;
font-size: 24px;
}
.configurator-section__header__number {
border-right: 1px solid #dddddd;
width: auto;
padding-right: 25px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 0;
font-size: 0.9em;
margin-right: 25px;
font-weight: 600;
background: transparent;
color: #cf1043;
}
.configurator-section__header__title {
font-weight: 400;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.configurator-section__header__title h2 {
font-size: 22px;
margin: 0;
font-weight: 400;
}
.configurator-section .cs-content-wrap {
display: block;
padding: 40px 40px 160px 30px;
transition: all 0.3s linear;
width: 100% !important;
position: relative;
overflow: hidden;
}
.configurator-section div.radio {
padding: 20px;
border-radius: 6px;
transition: all 0.3s linear;
max-width: 100%;
border: 1px solid #eeeeee;
position: relative;
width: auto;
min-width: 120px;
width: 24%;
display: flex;
flex-direction: column;
margin: 0.5%;
cursor: pointer;
box-shadow: 0 5px 20px -19px #555555;
}
.configurator-section div.radio img {
transition: all 0.3s linear;
}
.configurator-section div.radio:hover {
box-shadow: 0 5px 20px -10px #555555;
}
.configurator-section div.radio:hover img {
transform: scale(0.95);
}
.configurator-section div.radio p,
.configurator-section div.radio h3,
.configurator-section div.radio h4 {
margin-top: 25px;
margin-bottom: 0;
font-size: 18px;
line-height: 1.2;
font-weight: 400;
text-align: center;
color: #161616;
}
.configurator-section [type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
div.radio.selected p,
div.radio.selected h3,
div.radio.selected h4 {
color: green;
}
.configurator-section div.radio.selected {
box-shadow: 0 0px 20px -15px green;
border-color: green;
}
.configurator-section div.radio.selected:after {
content: "\f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: green;
font-size: 30px;
position: absolute;
top: 0px;
right: 10px;
z-index: 1;
}
div.radio.selected p {
color: #cf1043;
}
div.radioo.cloth_select,
#step-3 div.radioo,
#step-4 div.radioo {
min-width: 100px;
width: 19% !important;
padding: 10px;
}
div.radio.cloth_select h3,
#step-3 div.radio h3,
#step-4 div.radio h3,
#step-3 div.radio h4,
#step-4 div.radio h4 {
font-size: 14px;
margin-top: 10px;
}
.configurator-section__content {
display: flex;
flex-grow: 1;
width: 100%;
} .configurator-sidebar__content .sidebar-header {
text-transform: uppercase;
font-size: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.33);
display: block;
padding-bottom: 10px;
}
.configurator-sidebar__content ol {
list-style-type: decimal;
padding-left: 20px;
margin-top: 20px;
}
.configurator-sidebar__content ol li {
margin-bottom: 15px;
padding-left: 35px;
position: relative;
cursor: pointer;
opacity: 0.9;
transition: all 0.3s linear;
}
.configurator-sidebar__content ol li span:not(.section-subtotal) {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.configurator-sidebar__content ol li .section-subtotal {
font-weight: 600;
}
.configurator-sidebar__content ol li.active {
opacity: 1;
font-weight: 600;
padding-left: 35px;
}
.configurator-sidebar__content ol li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid #aaaaaa;
position: absolute;
left: 5px;
top: 0;
transition: all 0.3s linear;
}
.configurator-sidebar__content ol li:hover:before {
background: rgba(255, 255, 255, 0.33);
}
.configurator-sidebar__content ol li.completed:before {
content: "";
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid green;
background: green;
position: absolute;
left: 5px;
top: 0;
transition: all 0.3s linear;
}
.configurator-sidebar__content ol li.completed:after {
content: "";
width: 7px;
height: 10px;
border-radius: 0;
border-bottom: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transform: rotate(45deg);
position: absolute;
left: 11px;
top: 4px;
transition: all 0.3s linear;
}
.configurator-sidebar__content ol li.completed span {
color: white;
}
.configurator-section__content label {
position: relative;
}
.configurator-section__content label.input {
display: block;
margin-bottom: 10px;
padding: 0 10px 10px 10px; }
.configurator-section__content label.input span {
display: block;
font-weight: 400;
font-size: 14px;
margin-bottom: 9px;
}
.configurator-section__content label.input mark {
margin-right: 4px;
margin-left: 3px;
background: #234178;
color: #ffffff;
padding: 4px 8px;
border-radius: 3px;
font-weight: 600;
font-size: 14px;
}
.configurator-section__content label.input mark.inverted {
background: #ffffff;
color: #234178;
box-shadow: 0 0 10px -5px #000000;
}
.configurator-section__content label.input input,
.configurator-section__content label.input select {
display: block;
width: 100%;
font-weight: 400;
font-size: 14px;
padding: 10px 14px;
border-bottom: 2px solid #234178;
border-radius: 4px;
box-shadow: 0 0px 15px -12px #555555;
transition: all 0.3s linear;
max-width: 320px;
}
.configurator-section__content label.input input:focus {
border-bottom: 2px solid #cf1043;
outline: revert;
outline-color: rgba(0, 0, 0, 0.1);
}
.configurator-section__content label.input input[type="file"] {
font-size: 12px !important;
}
.configurator-section__content label.input small {
color: #555555;
font-size: 12px;
display: block;
max-width: 320px;
margin-top: 6px;
}
.configurator-section__content label.input.valid small {
color: green;
}
.configurator-section__content label.input.invalid small {
color: red;
}
.configurator-section__content label.input.valid input {
border-bottom: 2px solid green;
}
.configurator-section__content label.input.invalid input {
border-bottom: 2px solid red;
color: red;
}
figure.clr-option {
position: relative;
aspect-ratio: 1 / 1;
padding-top: 100%; width: 100%;
}
figure.clr-option img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.color_option {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
border-radius: 0;
transition: all 0.3s linear;
transform-origin: center;
transform: scale(1);
}
div.radio:hover .color_option {
//transform: scale(1.1);
}
.color_option.ral9006 {
background: #a5a8a6;
}
.color_option.ral9006s {
background: #a5a8a6;
}
.color_option.ral9007 {
background: #878581;
}
.color_option.ral9007s {
background: #878581;
}
.color_option.ral9010m {
background: #f7f9ef;
}
.color_option.ral9010s {
background: #f7f9ef;
}
.color_option.ral7016m {
background: #383e42;
}
.color_option.ral7016s {
background: #383e42;
}
.color_option.ral8014m {
background: #49392d;
}
.color_option.ral8014s {
background: #49392d;
}
.color_option.db702 {
background: url(https://www.artosi.sk/content/images/konfigurator/barvy/DB-702.jpg);
}
.color_option.db703 {
background: url(https://www.artosi.sk/content/images/konfigurator/barvy/DB-703.jpg);
}
.color_option.other {
background: linear-gradient(45deg, red, orange, yellow);
}
span.helper-trigger {
color: #cf1043;
cursor: pointer;
font-size: 12px;
font-weight: 600;
display: flex;
flex-direction: row;
transform: scale(1);
animation: pulsar 5s infinite;
border-radius: 24px;
padding: 10px;
}
span.helper-trigger:not(.clicked) {}
span.helper-trigger.clicked {
animation: none !important;
color: #666666 !important;
}
span.helper-trigger i.fas {
font-size: 1.5em;
margin-right: 8px;
}
@keyframes pulsar {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(207, 16, 67, 0.7);
}
10% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(207, 16, 67, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(207, 16, 67, 0);
}
}
.preview-button span,
.preview-button i {
transition: transform 0.3s linear, color 0.3s linear;
}
.preview-button {
color: #cf1043;
cursor: pointer;
font-size: 14px;
font-weight: 600;
display: flex;
flex-direction: row;
transform: scale(1);
animation: pulsar-white 5s infinite;
border-radius: 24px;
padding: 10px 20px;
}
.preview-button:hover span,
.preview-button:hover i {
color: #cf1043;
}
.preview-button:not(.mob-preview-btn):hover i {
transform: translateX(-12px);
}
.mob-preview-btn {
display: none;
padding: 5px 15px 5px 5px;
animation: pulsar 5s infinite;
border-radius: 0;
border-right: 1px solid rgba(255, 255, 255, 0.3);
margin-right: 20px;
animation: none;
}
.mob-preview-btn i {
color: #ffffff;
}
@keyframes pulsar-white {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
15% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
#btn-step-next {
background: green;
border: 1px solid green;
padding: 12px 22px;
color: #ffffff;
transition: all 0.4s linear;
transform: scale(1);
border-radius: 4px;
}
#btn-step-next.submit-config { background: green;
border-color: green;
color: #ffffff;
}
#btn-step-next:not(.disabled):hover {
background: #ffffff;
border-color: #ffffff;
color: #161616;
}
.btn-step.disabled {
opacity: 0.5;
}
#btn-step-next.disabled {
opacity: 0.5;
color: #161616;
background: #ffffff;
border: 1px solid #ffffff;
} table#conf-summary {
width: 100%;
}
table#conf-summary tr td {
padding: 5px 5px 10px 5px;
font-size: 14px;
vertical-align: top;
}
table#conf-summary tr td:nth-child(1) {
font-weight: 600;
} form#step-8 fieldset label {
width: 50%;
}
form#step-8 fieldset label.textarea {
width: 100%;
margin-bottom: 5px;
}
.configurator-section__content label.input textarea {
display: block;
width: 100%;
font-weight: 400;
font-size: 16px;
padding: 10px 14px;
border-bottom: 2px solid #dddddd;
border-radius: 12px;
box-shadow: 0 0px 15px -10px #555555;
transition: all 0.3s linear;
max-width: 320px;
}
form#step-8 small {
display: block;
padding: 0 20px;
}
form#step-8 small a {
font-weight: 600;
color: #cf1043;
}  .custom-toast {
display: flex;
align-items: center;
}
.custom-toast img {
background-size: 50px 50px;
height: 50px;
width: 50px;
}
.custom-toast p {
font-size: 14px;
padding: 10px;
} #toasts {
min-height: 0;
position: fixed;
right: 20px;
bottom: 80px;
width: 400px;
z-index: 999;
}
#toasts .toast {
background: #d6d8d9;
border-radius: 10px;
box-shadow: 0 0px 20px -10px rgba(0, 0, 0, 1);
color: rgba(0, 0, 0, 0.6);
cursor: default;
margin-bottom: 20px;
opacity: 0;
position: relative;
padding: 20px 40px 20px 20px;
transform: translateY(15%);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
width: 100%;
will-change: opacity, transform;
z-index: 1100;
}
#toasts p {
margin: 0 !important;
font-weight: 600;
}
#toasts .toast.success {
background: #26d68a;
}
#toasts .toast.warning {
background: #ffa533;
}
#toasts .toast.info {
background: #ffffff;
}
#toasts .toast.info p {
font-weight: 300;
color: #161616;
}
#toasts .toast.error {
background: #f44336;
color: #ffffff;
}
#toasts .toast.show {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
#toasts .toast.hide {
height: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0 30px;
transition: all 0.5s ease-in-out;
}
#toasts .toast .close {
cursor: pointer;
font-size: 24px;
height: 16px;
position: absolute;
right: 14px;
top: 10px;
width: 16px;
} .cs-content-wrap form {
width: 100% !important;
} div.checkbox {
position: absolute !important;
z-index: 99 !important;
display: block;
font-size: 18px;
font-weight: 600;
text-align: center;
width: 26px;
cursor: pointer;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
box-shadow: 0 0 10px -5px #000000;
color: #234178;
}
div.checkbox::before {
content: "";
position: absolute;
top: 35px;
left: 0;
width: 24px;
height: 24px;
display: block;
border-radius: 50%;
box-shadow: 0 0px 10px -5px #161616;
border: 5px solid #ffffff;
background: #dddddd;
}
div.checkbox.checked::before {
background: #cf1043;
}
div.checkbox input {
display: none;
}
div.checkbox small.price {
color: red;
font-size: 12px;
position: absolute;
display: block;
bottom: -100%;
left: 50%;
transform: translateX(-50%) translateY(110%);
background: rgba(255, 255, 255, 0.8);
padding: 2px 4px;
}
div.checkbox.sbsA {
top: 12%;
left: 30%;
}
div.checkbox.sbsA1 {
top: 17%;
left: 25%;
}
div.checkbox.sbsA2 {
top: 8%;
left: 45%;
}
div.checkbox.sbsB {
top: 7%;
left: 76%;
}
div.checkbox.sbsC {
top: 46%;
left: 67%;
}
div.checkbox.sbsC1 {
top: 52%;
left: 58%;
}
div.checkbox.sbsC2 {
top: 40%;
left: 78%;
}
div.checkbox.sbsD {
top: 53%;
left: 22%;
} #sidepanel {
background: #ffffff;
position: fixed;
height: 100%;
width: 100%;
max-width: 320px;
top: 0;
right: -320px;
z-index: 9;
transition: right 0.3s linear, box-shadow 0.3s linear;
box-shadow: 0 0 60px -60px #161616;
padding-bottom: 110px;
}
body.admin-bar #sidepanel {
top: 32px;
}
#sidepanel.active {
right: 0;
box-shadow: 0 0 60px -20px #161616;
}
#sidepanel__header {
background: transparent;
border-bottom: 1px solid #eeeeee;
width: 100%;
padding: 20px 60px 20px 20px;
position: relative;
}
#sidepanel__header .title {
color: #161616;
font-size: 20px;
line-height: 1.2;
text-align: left;
}
#sidepanel__header button.sp_close {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 12px;
color: #cf1043;
cursor: pointer;
font-size: 26px;
}
#sidepanel__content {
background: #ffffff;
padding: 20px;
width: 100%;
height: auto;
font-size: 14px;
}
.configurator-sidebar li>small {
display: none;
}
.configurator-sidebar li.active>small {
display: block;
}
.header-buttons button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header-buttons button i {
margin-bottom: 6px;
font-size: 20px;
}
.header-buttons button span {
font-size: 10px;
text-transform: uppercase !important;
} @media screen and (max-width: 1600px) {
div.radioo.cloth_select,
#step-3 div.radioo,
#step-4 div.radioo {
min-width: 100px;
width: 24% !important;
}
}
@media screen and (max-width: 1360px) {
div.radioo.cloth_select,
#step-3 div.radioo,
#step-4 div.radioo {
min-width: 100px;
width: 24% !important;
}
}
@media screen and (max-width: 1280px) {
.configurator-section div.radio {
width: 24% !important;
}
div.radioo.cloth_select,
#step-3 div.radioo,
#step-4 div.radioo {
min-width: 100px;
width: 19% !important;
}
.configurator-section__header__title h2 {
font-size: 20px;
line-height: 1.4;
}
}
@media screen and (max-width: 1024px) {
#korion-cfg>div.w-full {
flex-direction: column;
}
.configurator-sidebar {
width: 100%;
height: auto;
max-height: 85px;
transition: all 0.6s linear;
}
.configurator-sidebar.sidebar-expanded {
max-height: 1200px;
}
.configurator-content {
width: 100%;
}
#configurator-bottom-bar {
width: 100%;
}
.configurator_swiper,
.configurator-section {
max-height: calc(100vh - 85px) !important;
}
#step-3 div.radioo,
#step-4 div.radioo {
width: 24% !important;
}
div.radio h3,
div.radio h4 {
font-size: 16px !important;
}
.configurator-sidebar__content {
padding: 20px 20px 20px 20px;
}
}
@media screen and (max-width: 920px) {
#step-3 div.radioo,
#step-4 div.radioo {
width: 32.33% !important;
}
.configurator-section div.radio {
padding: 10px 10px 20px 10px;
}
}
@media screen and (max-width: 706px) {
.configurator-section div.radio {
width: 49% !important;
max-width: 100%;
}
#step-3 div.radioo,
#step-4 div.radioo {
width: 49% !important;
}
div.radio h3,
div.radio h4 {
font-size: 16px !important;
}
.configurator-content {
min-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
#configurator-bottom-bar {
flex-direction: column;
height: auto;
padding: 0;
align-items: stretch;
}
#total_config_price {
width: 100%;
text-align: left;
margin-bottom: 15px;
padding: 20px 20px 0 20px;
}
.buttons {
width: 100%;
text-align: center;
justify-content: space-between;
padding: 0 10px 14px 0;
}
.buttons #btn-step-next {
width: 60%;
line-height: 34px;
}
.buttons #btn-step-prev {
width: 40%;
line-height: 34px;
}
.configurator-section .cs-content-wrap {
padding-bottom: 200px;
}
#toasts {
bottom: 130px;
max-width: 100%;
}
div.radioo.cloth_select,
#step-3 div.radio,
#step-4 div.radio {
min-width: 100px;
width: 32.33% !important;
}
}
@media screen and (max-width: 640px) {
form#step-8 fieldset label {
width: 100%;
}
#toasts {
width: 100%;
max-width: calc(100% - 30px);
bottom: auto;
top: 105px;
}
}
@media screen and (max-width: 498px) {
.configurator-section div.radio {
width: 100% !important;
margin: 1% 0 !important;
max-width: 100%;
min-width: 100px !important;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 10px;
}
.configurator-section div.radio img {
width: 100px;
margin: 0 20px 0 0 !important;
}
.configurator-section div.radio.cloth_select img {
width: 100%;
margin: 0 !important;
}
.configurator-section div.radio p,
.configurator-section div.radio h3,
.configurator-section div.radio h4 {
text-align: left;
margin: 0;
}
.configurator-section div.radio.cloth_select p,
.configurator-section div.radio.swiper-slide-radio p,
.configurator-section div.radio.cloth_select h3,
.configurator-section div.radio.swiper-slide-radio h3,
.configurator-section div.radio.cloth_select h4,
.configurator-section div.radio.swiper-slide-radio h4 {
text-align: center;
margin: 15px 0 0 0;
}
#step-3 div.radioo,
#step-4 div.radioo {
flex-direction: column;
width: 48% !important;
max-width: 48% !important;
margin: 1% !important;
min-width: 100px !important;
}
figure.clr-option {
height: 100px;
}
#cs-52 div.radio {
flex-direction: column;
}
.buttons #btn-step-next {
padding: 10px;
}
.buttons #btn-step-prev {
padding: 10px;
}
form#step-2 {
flex-direction: column !important;
}
form#step-2 fieldset {
width: 100% !important;
}
.configurator-section .cs-content-wrap {
padding: 20px 20px 200px 20px !important;
}
.configurator-section__header {
padding: 20px !important;
}
.configurator-section__helper {
padding: 10px 20px 10px 20px;
}
.configurator-sidebar__content {
padding: 10px 20px 20px 20px;
}
.configurator-section__header__number {
background: transparent;
color: #cf1043;
width: auto;
height: auto;
box-shadow: none;
border-right: 1px solid #dddddd;
border-radius: 0 !important;
padding: 0 15px 0 0;
margin-right: 15px;
}
.configurator-section__header__title h2 {
font-size: 18px;
line-height: 1.3;
}
.configurator-sidebar {
max-height: 75px;
min-width: 100%;
width: 100%;
}
.configurator_swiper,
.configurator-section {
max-height: calc(100vh - 75px) !important;
}
.configurator-section__helper p {
font-size: 14px;
}
div.radioo.cloth_select,
#step-3 div.radio,
#step-4 div.radio {
min-width: 100px;
width: 48% !important;
}
span.helper-trigger {
font-size: 0;
}
span.helper-trigger i {
font-size: 20px !important;
margin: 0 !important;
}
}
@media screen and (max-width: 500px) {
.configurator-sidebar h1 {
display: none;
}
.mob-preview-btn {
display: inline-block;
}
.configurator-section__helper p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.configurator-section__helper p.whitespace-normal {
white-space: normal !important;
}
.configurator-section__helper {
cursor: pointer;
position: relative;
padding: 10px 40px 10px 20px;
}
.configurator-section__helper:after {
content: "\f078";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
font-size: 18px;
color: #cf1043;
top: 5px;
right: 20px;
}
.configurator-section__helper.opened:after {
transform: rotate(180deg);
}
}
@media screen and (max-width: 369px) {
div.radio,
.configurator-section div.radio {
width: 100% !important;
flex: 1 0 100% !important;
max-width: 100% !important;
min-width: 100% !important;
margin: 15px 0 0 0 !important;
}
} div.radio.swiper-slide-radio {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
opacity: 1 !important;
margin: 0 !important;
padding: 10px !important;
flex-direction: column !important;
}
.colors-swiper {
overflow: hidden !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 0 0px 0 !important;
}
.colors-swiper .swiper-slide {
opacity: 1 !important;
}
.colors-swiper .swiper-wrapper {
height: auto !important;
}
.swiper-container-horizontal {
padding-bottom: 0px !important;
}
.colors-swiper .swiper-scrollbar {
bottom: 55px !important;
height: 2px !important;
width: 100% !important;
left: 0 !important;
}
.swiper-buttons {
height: 50px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
position: relative;
margin-top: 0px;
padding-top: 30px;
}
.swiper-button-next,
.swiper-button-prev {
position: relative !important;
display: block !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 20px !important;
height: 20px !important;
margin: 0 0 0 40px !important;
color: #000000 !important;
background: none !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 20px;
color: #000000 !important;
}
.swiper-scrollbar-drag {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
}
#korion-content {
background: #ffffff;
}
#korion-cfg {
max-width: 1920px;
margin: 0 auto;
box-shadow: 0 0 40px -30px #000000;
}
.select2-container--default .select2-selection--single {
padding: 10px;
height: 48px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 48px;
}
.select2-container--default.selected .select2-selection--single {
border: 2px solid green !important;
position: relative;
}
.select2-container--default.selected .select2-selection--single:after {
content: "\f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: green;
font-size: 20px;
position: absolute;
top: 8px;
right: 20px;
z-index: 1;
}