/* Elements */
body {direction: rtl; text-align: right; background-color: var(--color-bg); color: black;}
body, input, button {
	font-size: 14px;
	line-height: 16px;
	font-family: 'Heebo', sans-serif;
}
* {margin: 0; padding: 0;}
ul {list-style: none;}
img {border: 0;}
iframe {display: none;}
a {outline: 0; text-decoration: none; color: black;}
h1 {font-weight: bold; color: var(--color-main-darker);}
table {border-collapse: collapse;}
td {vertical-align: top;}

textarea {resize: none; padding: 5px;}
input, .box {box-sizing: border-box;}

/* Checkbox */
.wsCheckbox {width: 70px; height: 24px; position: relative;}
.wsCheckbox input {position: absolute; visibility: hidden;}
.wsCheckbox input:checked + label:before {transform: rotateY(180deg);}
.wsCheckbox input:checked + label:after {transform: rotateY(0);}
.wsCheckbox label {
	position: absolute; width: inherit; height: inherit;
	margin: 0; line-height: 24px; font-family: Arial sans-serif;
}
.wsCheckbox label:before,
.wsCheckbox label:after {
	top: 0; left: 0;
	bottom: 0; right: 0;
	display: block;
	position: absolute;
	line-height: inherit;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
}
.wsCheckbox label:before {
	background-color: #ddd;
	content: attr(data-off);
	transition: transform 0.5s;
	backface-visibility: hidden;
	color: #787878;
}
.wsCheckbox label:after {
	background-color: #4caf50;
	content: attr(data-on);
	transition: transform 0.5s;
	transform: rotateY(180deg);
	backface-visibility: hidden;
	font-weight: bold;
	color: #fff;
}

/* Base */
.dn {display:none}
.db {display:block}
.dib {display:inline-block}
.fl {float:left}
.fr {float:right}
.cm {cursor:move}
.cd {cursor:default}
.cp {cursor:pointer}
.pf {position:fixed}
.pa {position:absolute}
.pr {position:relative}
.center {margin:0 auto}
.bold {font-weight:bold}

.clear {clear:both; float:none !important}
.clearfix:after {content:''; display:table; clear:both}

.op_0 {opacity:0; filter:alpha(opacity=0)}
.op_50 {opacity:0.5; filter:alpha(opacity=50)}

.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.noSelect {user-select: none; -moz-user-select: none; -webkit-user-select: none;}
.shadow {box-shadow: 0 4px 6px 0 rgba(0, 1, 3, 0.13);}
.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar-thumb {background-color: var(--color-main-light);}
.scrollbar::-webkit-scrollbar-track {background: var(--color-main-lightest);}

.dev_dump {
	padding: .5rem; border: 1px solid #ccc; background-color: #f8f8f8;
	border-radius: 5px; direction: ltr; text-align: left; color: #333;
}

/* Foundation */
.row {max-width: 90rem;}
input, select {height: 40px !important;}

input, select, textarea {
	border-radius: 1rem !important;
	border-color: var(--color-main-lightest) !important;
	background-color: #fff !important
}

.button {
	padding: 0 1rem; border: 0; border-radius: 1rem;
	height: 40px; line-height: 40px !important; color: white !important;
}
.button,
.button:focus {background-color: var(--color-button);}
.button:hover {background-color: var(--color-button-lighter);}
.button[disabled],
.button[disabled]:focus,
.button[disabled]:hover {background-color: var(--color-button-light); opacity: 1;}

.callout {padding: 2rem; border-radius: 30px; border: 0;}
.callout > .title:first-child {
	margin: -1rem -1rem 1rem -1rem; padding: 1rem;
	border-bottom: 1px solid #c2c2c2; background-color: #fcfcfc;
	line-height: 1; font-size: 20px; color: #0a0a0a;
}

.mfp-wrap {direction: ltr;}

/* Editor Content */
.editor-content {font-size: 1rem;}
.editor-content p {width: 100% !important; margin: 0;}
.editor-content iframe {display: block; max-width: 100%;}
.editor-content ul {list-style-type: disc;}
.editor-content ul,
.editor-content ol {margin-right: 1.25rem;}

.editor-content img.fr-dii {
	display: inline-block; max-width: calc(100% - 2rem);
	float: none; margin-left: 1rem; margin-right: 1rem; vertical-align: bottom;
}
.editor-content img.fr-dii.fr-fir {max-width: calc(100% - 1rem); float: right; margin: 1rem 0 1rem 1rem;}
.editor-content img.fr-dii.fr-fil {max-width: calc(100% - 1rem); float: left; margin: 1rem 1rem 1rem 0;}

.editor-content img.fr-bordered {box-sizing: content-box; border: 2px solid var(--color-button);}
.editor-content img.fr-shadow {box-shadow: 0 3px 6px #00000029;}
.editor-content img.fr-rounded {border-radius: 30px;}

.editor-content table.fr-grid td {padding: 0; line-height: 1.6rem;}
.editor-content table.fr-grid tbody {border: 0; background: none;}

.editor-content video {max-width: 100%;}

/* popup */
.aPopup-overlay:not(.transparent) {
	opacity: unset !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(2px);
}
.aPopup {border-radius: 20px; box-shadow: 0 0 5rem var(--color-main-light);}
.aPopup .componentPopup {border: 2px solid var(--color-main); border-radius: 20px; overflow: hidden;}
.aPopup .componentPopup > .header {
	height: 5rem; background-color: var(--color-main-lightest); border-bottom: 2px solid var(--color-main);
}
.aPopup .componentPopup > .header .title {padding: 5px 3rem 0 0; font-size: 1.2rem; color: black;}
.aPopup .componentPopup > .header .close {
	width: 7rem; height: 75px; line-height: 5rem; opacity: 1;
	padding-top: 5px; font-size: 1.5rem; color: var(--color-button);
}
.aPopup .componentPopup > .header .close:hover {font-weight: 400; color: black;}
.aPopup .componentPopup > .body {padding: 3rem;}

@media screen and (min-width: 40em) {
	.aPopup {border-radius: 40px;}
	.aPopup .componentPopup {border-radius: 40px;}
}

/* Slider */
.slick-slider .slick-dots {
	position: absolute; right: 0; top: 1rem; z-index: 1;
	width: 100%; display: flex; justify-content: center;
}
.slick-slider .slick-dots li {width: 20px;}
.slick-slider .slick-dots button {
	display: block; width: 10px; height: 10px; margin: 0 auto; cursor: pointer;
	border-radius: 50%; background-color: #fff; font-size: 0; color: #fff; opacity: .5;
}
.slick-slider .slick-dots button:hover,
.slick-slider .slick-dots li.slick-active button {opacity: 1;}

/* Datepicker */
.ui-datepicker {
	width: 100%; max-width: 20rem; padding: 0; font-size: large;
	border: 0 !important; border-radius: 20px; overflow: hidden;
}
.ui-datepicker-header {
	padding: 0 !important; border: 0; border-radius: 0;
	background-color: var(--color-main); color: #fff;
}
.ui-datepicker-header .ui-icon {filter: brightness(5);}
.ui-datepicker-title {line-height: 40px !important;}
.ui-datepicker-prev {right: 0 !important;}
.ui-datepicker-next {left: 0 !important;}
.ui-datepicker-prev,
.ui-datepicker-next {
	width: 40px !important;	height: 40px !important;
	top: 0 !important; border: 0 !important; border-radius: 0;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {background-color: color-mix(in srgb, var(--color-main) 85%, black) !important;}
.ui-datepicker table {margin-bottom: 0;}
.ui-datepicker table > * {border: 0;}
.ui-datepicker table thead {background-color: var(--color-main-light); color: #fff;}
.ui-datepicker table tbody {background-color: var(--color-main-lightest);}
.ui-datepicker table tbody tr {background-color: var(--color-main-lightest);}
.ui-datepicker table tbody td {padding: 0;}
.ui-datepicker table tbody td:not(:last-child) {width: 14%;}
.ui-datepicker .ui-state-default {
	border: 0; border-radius: 8px; text-align: center; line-height: 2;
	background-color: var(--color-main-lightest); font-size: 18px; color: #000;
}
.ui-datepicker .ui-state-hover {background-color: var(--color-main-light);}
.ui-datepicker .ui-state-highlight {background-color: #fffa90; color: #777620;}
.ui-datepicker .ui-state-active {background-color: var(--color-main); color: #fff;}

/* Multiselect */
.multiselect-native-select {display: block;}
.multiselect-native-select .dropdown-toggle {
	height: 40px; padding: 0 10px; text-align: right; font-size: 1rem;
	border-radius: 1rem; box-shadow: none !important;
}
.multiselect-native-select .dropdown-toggle span {display: inline-block;}
.multiselect-native-select .dropdown-toggle .caret {float: right; margin: 10px 0 0 8px;}
.multiselect-native-select .dropdown-menu {width: 100%; border-radius: 1rem; text-align: right;}
.multiselect-native-select .dropdown-menu input {height: unset !important;}
.multiselect-native-select .dropdown-menu > li > a {outline: none;}
.multiselect-native-select .dropdown-menu > li > a > label {padding: 3px 30px 3px 10px;}
.multiselect-native-select .dropdown-menu > li > a > label > input[type=checkbox] {
	width: 15px; height: 15px !important; margin: 5px -22px 0 0;
}
.multiselect-native-select .dropdown-menu > li.active > a {background-color: #428bca;}
.multiselect-native-select .dropdown-menu > li.active > a:hover {background-color: #337ab7;}
.multiselect-native-select .dropdown-menu > li.active > a label {color: #fff;}
.multiselect-native-select .dropdown-menu > li label {user-select: none;}