:root {
	--green-main: #a66aff;
	--green-light: #cdaaff;
	--green-lightest: #f2e9ff;
	--green-dark: #7a42ce;
	/**/
	--blue-main: #253B78;
	--blue-lighter: #689DE9;
	--blue-light: #B2CDF5;
	--blue-lightest: #E0EBFC;
}

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

textarea {resize: none; padding: .5rem;}
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: 'Assistant', 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 0 5px 0 #ccc;
	-moz-box-shadow:	0 0 5px 0 #ccc;
	-webkit-box-shadow:	0 0 5px 0 #ccc;
}

.scrollbar::-webkit-scrollbar {width: 10px;}
.scrollbar::-webkit-scrollbar-thumb {background-color: var(--green-light);}
.scrollbar::-webkit-scrollbar-track {background: var(--green-lightest);}

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

input, select, textarea {
	border-color: var(--blue-light) !important;
	background-color: #fff !important
}

.button {padding: 0 1rem; border: 0; height: 40px; line-height: 40px !important;}
.button,
.button:focus {background-color: #a170ff;}
.button:hover {background-color: #855ad8;}
.button.success,
.button.success:focus,
.button.success:hover {color: white;}
.button.success,
.button.success:focus {background-color: #ed1a7e;}
.button.success:hover {background-color: #c81d6e;}

.callout {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;}
#NagishLiTrigger {right: 10px !important;}

/* Editor Content */
.editor-content {padding: 0; font-size: 1rem; background: none;}
.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 {margin-right: 1.25rem;}
.editor-content ol {margin-right: 1.5rem;}
.editor-content ul:last-child,
.editor-content ol:last-child {margin-bottom: 0;}

.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(--green-main);}
.editor-content img.fr-shadow {box-shadow: 0 3px 6px #00000029;}
.editor-content img.fr-rounded {border-radius: 30px;}
.editor-content img.fr-dib {display: block; float: none; margin: 5px auto; vertical-align: top;}

.editor-content table.fr-grid {margin-bottom: 0;}
.editor-content table.fr-grid tbody {border: 0; background: none;}
.editor-content table.fr-grid tr {background: none;}
.editor-content table.fr-grid td {padding: 0;}

@media screen and (max-width: 40em) {
	.editor-content table td {display: block; width: 100% !important;}
	.editor-content img {width: auto !important;}
}

.editor-content video {max-width: 100%;}
.editor-content .button {font-size: 1rem;}

.editor-content .fr-emoticon {
	display: inline-block; margin: -.1em .1em .1em; vertical-align: middle;
	height: 1em; width: 1em; min-width: 20px; min-height: 20px;
	line-height: 1; background-repeat: no-repeat !important;
}

/* Login Popup */
.loginPopup {width: min(600px, 98vw) !important;}
.loginPopup .body {min-height: unset !important;}
.loginPopup .row {margin: 0 -.5rem;}
.loginPopup form label span {font-size: 1rem;}
.loginPopup .errorMessage {float: left;}
.loginPopup .form_password_restore_success {margin: 2rem 0 3rem; text-align: center; font-size: 1rem;}
.loginPopup .button {font-size: 22px; font-weight: bold;}
.loginPopup form .button {width: 160px; display: block; margin: 2rem auto 0;}
.loginPopup .buttons {display: flex; justify-content: space-between; margin-top: 1rem;}
.loginPopup .buttons span {text-decoration: underline; font-size: 1rem; cursor: pointer;}
.loginPopup .timer {
	margin-bottom: 1.5rem; padding: 1rem;
	border: 1px solid #ff9475; border-radius: 3px;
	background-color: #fee; font-size: 1rem; color: orangered;
}
.loginPopup .timer .time {font-weight: bold;}

/* Membership Popup */
.membershipPopup {width: min(1000px, 98vw) !important;}
.membershipPopup .body {min-height: unset !important; padding: 1.5rem;}
.membershipPopup h6 {display: flex; gap: 1rem; margin-bottom: 0;}
.membershipPopup hr {margin: 1.5rem auto;}
.membershipPopup .line {display: flex; justify-content: space-between;}
.membershipPopup .col:first-child {width: 35%;}
.membershipPopup .col:last-child {width: 45%;}
.membershipPopup .col:first-child .errorMessage {margin-right: auto;}
.membershipPopup .button {min-width: 120px; margin-bottom: 0; font-size: 1.5rem;}
.membershipPopup .checkbox {display: flex; gap: .5rem; align-items: center;}
.membershipPopup .checkbox:not(:last-child) {margin-bottom: 1rem;}
.membershipPopup .checkbox input {width: 24px; margin: 0;}
.membershipPopup .checkbox a {text-decoration: underline; color: var(--blue-lighter);}
.membershipPopup .checkbox a:hover {color: var(--blue-main);}

/* Component Content Form */
.componentContentForm {display: block; width: 100%;}
.componentContentForm .line {display: flex; flex-direction: column;}
.componentContentForm label {position: relative;}
.componentContentForm .errorMessage {position: absolute; bottom: -2px; right: 0;}
.componentContentForm.contact .line > * {width: 100%;}
.componentContentForm.contact_plus label {width: 100%;}
.componentContentForm.contact_plus .line.note label {width: 100%;}
.componentContentForm.contact_plus textarea {min-height: 84px;}
.componentContentForm.contact_plus .button {width: 100%;}

@media screen and (min-width: 40em) {
	.componentContentForm .line {flex-direction: row; gap: 1rem;}
	.componentContentForm.contact .line > * {width: 25%;}
	.componentContentForm.contact_plus label {width: 33%;}
}

/* Component Solutions */
.componentSolutions {display: flex; justify-content: space-between; flex-wrap: wrap;}
.componentSolutions .item {
	width: 49%; position: relative; margin-bottom: 1rem; text-align: center;
	background-color: white; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}
.componentSolutions .item a {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.componentSolutions .item .image {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.componentSolutions .item .icon {margin: 1.5rem 0 1rem;}
.componentSolutions .item .title {line-height: 1; font-weight: bold; font-size: 1.4rem; color: #253B78;}
.componentSolutions .item .sub_title {font-size: 15px; color: #253B78;}
.componentSolutions .item .button {
	width: 75%; margin: 1rem 0 1.5rem; background-color: white;
	border: 1px solid #9747ff; font-weight: bold; color: #9747ff; transition: unset;
}
.componentSolutions .item:hover {outline: 2px solid #9747ff;}
.componentSolutions .item:hover .button {background-color: #9747ff; color: white;}

@media screen and (min-width: 40em) {
	.componentSolutions {justify-content: unset; flex-wrap: unset; gap: 1rem;}
	.componentSolutions .item {width: 100%; margin-bottom: 0;}
	.componentSolutions .item .image {aspect-ratio: unset;}
}

/* Button */
.glossy-button {
	padding: 20px 40px; border: 0; border-radius: 1rem;
	font-size: 22px; font-weight: bold; color: white;
	background-color: #aaa; cursor: pointer; transition: all .3s;
}
.glossy-button:hover {background-color: #999;}
.glossy-button--green {background-color: var(--green-main);}
.glossy-button--green:hover {background-color: var(--green-dark);}
.glossy-button--blue {background-color: var(--blue-lighter);}
.glossy-button--blue:hover {background-color: var(--blue-main);}

/* popup */
.aPopup .componentPopup {border: 2px solid var(--green-main); overflow: hidden;}
.aPopup .componentPopup > .header {
	height: 3rem; background-color: var(--green-lightest); border-bottom: 2px solid var(--green-main);
}
.aPopup .componentPopup > .header .title {padding: 3px 1.5rem 0 3.5rem; font-size: 1.2rem; color: var(--green-dark);}
.aPopup .componentPopup > .header .close {
	width: 3.5rem; height: 3rem; line-height: 3rem;
	padding-top: 5px; font-size: 1.5rem; color: var(--green-main);
}
.aPopup .componentPopup > .header .close:hover {color: var(--green-dark);}

/* 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: 1rem; overflow: hidden;
}
.ui-datepicker-header {
	padding: 0 !important; border: 0; border-radius: 0;
	background-color: var(--blue-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(--blue-main) 85%, black) !important;}
.ui-datepicker table {margin-bottom: 0;}
.ui-datepicker table > * {border: 0;}
.ui-datepicker table thead {background-color: var(--blue-lighter); color: #fff;}
.ui-datepicker table tbody {background-color: var(--blue-lightest);}
.ui-datepicker table tbody tr {background-color: var(--blue-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(--blue-lightest);
}
.ui-datepicker .ui-state-hover {background-color: var(--blue-light);}
.ui-datepicker .ui-state-highlight {background-color: #fffa90; color: #777620;}
.ui-datepicker .ui-state-active {background-color: var(--blue-main); color: #fff;}