@charset "utf-8";

:root { color-scheme:only light; }
html { color-scheme:light only; margin:0px; padding:0px; -webkit-tap-highlight-color:transparent; }
body { overflow-y:scroll; margin:0px; padding:0px; line-height:1.65; font-family:'Open Sans', sans-serif; }

.rtl body { direction:rtl; text-align:right; }

/* Transition effect (fade in) */
.fade-in { opacity:0; transition:opacity 200ms ease; }
.fade-in.loaded { opacity:1; }

/* Transition effect (slide up with fade) */
.slide-up { opacity:0; transform:translateY(10px); transition:opacity 200ms ease, transform 200ms ease; }
.slide-up.loaded { opacity:1; transform:translateY(0); }

input,
textarea,
select { display:block; box-sizing:border-box; border-radius:5px; font-family:'Open Sans', sans-serif; }

	.dark-mode select { background:#202124; }
	.dark-mode select option { background:#252529; }

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea { width:100%; overflow:hidden; line-height:1.65 !important; resize:none; }

input::placeholder,
textarea::placeholder { opacity:.5; color:#000; }
input:focus::placeholder,
textarea:focus::placeholder { color:transparent; }

	.dark-mode input::placeholder,
	.dark-mode textarea::placeholder { color:#fff; }

input[type="radio"] { display:inline; margin-top:-3px; margin-left:0px; vertical-align:middle; }
input[type="checkbox"] { display:inline; position:relative; bottom:-1px; margin-left:0px; }
input[type="file"] { width:100%; }

.input { width:100%; border:1px solid rgba(0,0,0, .15); padding:10px !important; background:#fff; color:#555; font-size:inherit; }
.input:disabled { color:#bbb; background:#f4f4f4; cursor:not-allowed; }

	.dark-mode .input { border:1px solid rgba(255,255,255, .05); background:rgba(255,255,255, .025); color:#bbb; }
	.dark-mode .input:disabled { background:rgba(255,255,255, .075); color:#666; }

.input-with-button { padding-right:30px !important; } /* Show/hide password, autocopy, etc. */
.input-icon { position:absolute; right:0px; bottom:2px; border:0px; border-radius:0px; padding:10px; background:none; font-size:17px; }

	.rtl .input-with-button { padding-right:10px !important; padding-left:30px !important; }
	.rtl .input-icon { right:auto; left:2px; }

select { width:100%; height:45px; } /* For Safari */

button,
input[type=button],
input[type=submit] {
	display:inline;
	box-sizing:border-box;
	border-radius:15px;
	font-family:'Ubuntu Sans', sans-serif;
	letter-spacing:.05em;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
	transition:opacity .25s, background .25s, color .25s;
}
button:hover,
input[type=button]:hover,
input[type=submit]:hover { opacity:.75; }

a { color:inherit; text-decoration:none; cursor:pointer; transition:opacity .25s, background .25s, color .25s; }
a:hover { opacity:.75; }

/* Disable hover effect for mobile and touch devices */
@media (hover:none) and (pointer:coarse) {
	*:hover { opacity:1 !important; }
}

img { display:block; }
p { margin:0px; padding:0px; }

.icon { position:relative; bottom:-1px; }
	.i-warning2 { bottom:0px; }
	.i-pushpin { bottom:0px; right:-2px; }
	.i-download5 { left:-3px; }
	.i-lock,
	.i-lock2 { bottom:0px; }

.relative { position:relative; }

.hidden { visibility:hidden; }
.display-none { display:none; }
.display-inline { display:inline-block; }
.display-block { display:block; }

.default { cursor:default !important; }
.pointer { cursor:pointer !important; }
.not-allowed { cursor:not-allowed !important; }

.preline { white-space:pre-line; }
.prewrap { white-space:pre-wrap; }
.nowrap { white-space:nowrap; }
.break-word { word-break:break-word; }
.noselect { user-select:none; }

.float-left { float:left; }
.float-right { float:right; }
.clear-both { clear:both; } 

.left { text-align:left !important; }
.center { text-align:center !important; }
.right { text-align:right !important; }

.valign-bottom { vertical-align:bottom !important; }

.shadow { box-shadow:0px 1px 6px rgba(0,0,225, .03); }

.font2 { font-family:'Ubuntu Sans', sans-serif; }

.italic { font-style:italic; }
.underline { text-decoration:underline; }
.no-decoration { text-decoration:none; }

.large-text { font-size:18px; }
.medium-text { font-size:16px; }
.small-text { font-size:14px; }
.tiny-text { font-size:12px; }
.hidden-text { font-size:0px; }

@media all and (max-width:1024px) {
.optional-1024 { display:none !important; }
}

@media all and (max-width:768px) {
.optional-768 { display:none !important; }
}

@media all and (max-width:480px) {
.optional-480 { display:none !important; }
}

.w300 { font-weight:300; }
.w400 { font-weight:400; }
.w500 { font-weight:500; }
.w600 { font-weight:600; }
.w700 { font-weight:700; }

	.dark-mode .w300 { font-weight:200; }
	.dark-mode .w400 { font-weight:300; }
	.dark-mode .w500 { font-weight:400; }
	.dark-mode .w600 { font-weight:500; }
	.dark-mode .w700 { font-weight:600; }

.t5 { margin-top:5px; }
.t10 { margin-top:10px; }
.t15 { margin-top:15px; }
.t20 { margin-top:20px; }
.t25 { margin-top:25px; }
.t30 { margin-top:30px; }
.t35 { margin-top:35px; }
.t40 { margin-top:40px; }
.t45 { margin-top:45px; }
.t50 { margin-top:50px; }

.b5 { margin-bottom:5px; }
.b10 { margin-bottom:10px; }
.b15 { margin-bottom:15px; }
.b20 { margin-bottom:20px; }
.b25 { margin-bottom:25px; }
.b30 { margin-bottom:30px; }
.b35 { margin-bottom:35px; }
.b40 { margin-bottom:40px; }
.b45 { margin-bottom:45px; }
.b50 { margin-bottom:50px; }

.l5 { margin-left:5px; }
.l10 { margin-left:10px; }
.l15 { margin-left:15px; }
.l20 { margin-left:20px; }
.l25 { margin-left:25px; }
.l30 { margin-left:30px; }

.r5 { margin-right:5px; }
.r10 { margin-right:10px; }
.r15 { margin-right:15px; }
.r20 { margin-right:20px; }
.r25 { margin-right:25px; }
.r30 { margin-right:30px; }

/* Reversible display for ltr and rtl */
.tdx { display:table-cell; border:0px; padding:0px; }
.x5 { display:table-cell; border:0px; padding-right:5px; }
.x10 { display:table-cell; border:0px; padding-right:10px; }
.x12 { display:table-cell; border:0px; padding-right:12px; }
.x15 { display:table-cell; border:0px; padding-right:15px; }
.x20 { display:table-cell; border:0px; padding-right:20px; }
.x25 { display:table-cell; border:0px; padding-right:25px; }
.x30 { display:table-cell; border:0px; padding-right:25px; }

.max-width-100 { max-width:100px !important; }
.max-width-200 { max-width:200px !important; }
.max-width-300 { max-width:300px !important; }
.max-width-400 { max-width:400px !important; }
.max-width-500 { max-width:500px !important; }
.max-width-600 { max-width:600px !important; }

.list-tr { display:table-row !important; }
.list-td1 { display:table-cell !important; padding:0px 8px 0px 0px; text-align:left; }
.list-td2 { display:table-cell !important; text-align:left; }

	.rtl .list-td1 { padding:0px 0px 0px 8px; text-align:right; }
	.rtl .list-td2 { text-align:right; }

.color1 { color:#000; }
.color1-links { opacity:1; color:#000; }
.color1-links:visited { color:#000; }
.color1-links:hover{ opacity:.65; color:#000; }
.color1-links:visited:hover { color:#000; }

.color2 { color:#666; }
.color2-links { opacity:1; color:#666; }
.color2-links:visited { color:#666; }
.color2-links:hover { opacity:.65; color:#666; }
.color2-links:visited:hover { color:#666; }

.color3 { color:#a1a1a1; }
.color3-links { opacity:1; color:#a1a1a1; }
.color3-links:visited { color:#a1a1a1; }
.color3-links:hover { opacity:.65; color:#a1a1a1; }
.color3-links:visited:hover { color:#a1a1a1; }

	.dark-mode .color1 { color:#fff; }
	.dark-mode .color1-links,
	.dark-mode .color1-links:visited { color:#fff; }
	.dark-mode .color1-links:hover,
	.dark-mode .color1-links:visited:hover { color:#fff; }

	.dark-mode .color2 { color:#bbb; }
	.dark-mode .color2-links,
	.dark-mode .color2-links:visited { color:#bbb; }
	.dark-mode .color2-links:hover,
	.dark-mode .color2-links:visited:hover { color:#bbb; }

	.dark-mode .color3 { color:#888; }
	.dark-mode .color3-links,
	.dark-mode .color3-links:visited { color:#888; }
	.dark-mode .color3-links:hover,
	.dark-mode .color3-links:visited:hover { color:#888; }

.orange { color:rgba(255,120,0, 1); }
.red { color:rgba(250,25,25, 1); }
.green { color:rgba(43,157,0, 1); }
.blue { color:rgba(51,119,236, 1); }
.purple { color:rgba(182,62,221, 1); }

	.dark-mode .orange { color:rgba(255,120,0, .8); }
	.dark-mode .red { color:rgba(250,25,25, .8); }
	.dark-mode .green { color:rgba(43,157,0, .85); }
	.dark-mode .blue { color:rgba(51,119,236, 1); }
	.dark-mode .purple { color:rgba(182,62,221, .8); }

.orange-bg { background:rgba(255,120,0, 1); }
.green-bg { background:rgba(43,157,0, .85); }
.blue-bg { background:rgba(51,119,236, .9); }
.purple-bg { background:rgba(182,62,221, .9); }

	.dark-mode .orange-bg { background:rgba(255,120,0, .75); }
	.dark-mode .green-bg { background:rgba(43,157,0, .8); }
	.dark-mode .blue-bg { background:rgba(51,119,236, .8); }
	.dark-mode .purple-bg { background:rgba(182,62,221, .65); }

.green-links { opacity:1; color:rgba(43,157,0, 1); }
.green-links:visited { color:rgba(43,157,0, 1); }
.green-links:hover { opacity:.65; color:rgba(43,157,0, 1); }
.green-links:visited:hover { color:rgba(43,157,0, 1); }

	.dark-mode .green-links,
	.dark-mode .green-links:visited { color:rgba(43,157,0, .85); }
	.dark-mode .green-links:hover,
	.dark-mode .green-links:visited:hover { color:rgba(43,157,0, .85); }

/* Threads */
.message-output-box-date { margin:20px 0px 10px 0px; font-size:12px; text-align:center; }

.system-bubble { margin:25px 0px 15px 0px; line-height:1.5; font-size:12px; text-align:center; }

/* Admin/visitor bubbles (followed by 1 and 0 based on "show_author," which determines whether or not it's a leading bubble) */
.incoming-bubble1 { float:left; max-width:75%; margin-top:15px; box-shadow:0 2px 3px rgba(0,0,0, .09); border-radius:15px 15px 15px 0px; padding:15px; background:#e1f7d8; line-height:1.5; font-size:16px; }
.incoming-bubble0 { float:left; max-width:75%; margin-top:5px; box-shadow:0 2px 3px rgba(0,0,0, .09); border-radius:0px 15px 15px 0px; padding:15px; background:#e1f7d8; line-height:1.5; font-size:16px; }
.outgoing-bubble1 { float:right; max-width:75%; margin-top:15px; box-shadow:0 2px 3px rgba(0,0,0, .09); border-radius:15px 15px 0px 15px; padding:15px; background:#e9f5fd; line-height:1.5; font-size:16px; }
.outgoing-bubble0 { float:right; max-width:75%; margin-top:5px; box-shadow:0 2px 3px rgba(0,0,0, .09); border-radius:15px 0px 0px 15px; padding:15px; background:#e9f5fd; line-height:1.5; font-size:16px; }

	.dark-mode .incoming-bubble1,
	.dark-mode .incoming-bubble0 { background:#263a1d; color:#fff; }
	.dark-mode .outgoing-bubble1,
	.dark-mode .outgoing-bubble0 { background:#293740; color:#fff; }

	.rtl .incoming-bubble1 { float:right; text-align:right; border-radius:15px 15px 0px 15px; }
	.rtl .incoming-bubble0 { float:right; text-align:right; border-radius:15px 0px 0px 15px;}
	.rtl .outgoing-bubble1 { float:left; text-align:right; border-radius:15px 15px 15px 0px; }
	.rtl .outgoing-bubble0 { float:left; text-align:right; border-radius:0px 15px 15px 0px; }

.bubble-spacer { clear:both; }

.message-author { margin:0px 0px 7px 0px; line-height:1.25; font-family:'Ubuntu Sans', sans-serif; font-size:11px; font-weight:400; }

	.dark-mode .message-author { font-weight:300; }

.viewed-status .icon { opacity:.8; bottom:0px; font-size:9px; }
.viewed-status .icon:nth-of-type(2) { left:-5px; } /* Moves the 2nd arrow to the left */

	.rtl .viewed-status .icon { opacity:.8; left:10px; bottom:0px; font-size:9px; }
	.rtl .viewed-status .icon:nth-of-type(2) { left:-3px; }

.message-text { margin:0px 0px 5px 0px; white-space:pre-wrap; word-break:break-word; }
.message-text a,
.message-text a:visited { text-decoration:underline; }
.message-text a:hover,
.message-text a:visited:hover { opacity:.75; }

.message-text .i-translate { bottom:0px; font-size:12px; }

.original-message { display:none; opacity:.9; padding-bottom:12px; font-size:13px; font-style:italic; }
.original-message.show { display: block; }

.message-translation-notice { padding-top:10px; font-size:11px; font-style:italic; }

	.outgoing-bubble0 .message-translation-notice { display:none; }

.message-translation-error { padding-top:10px; font-size:11px; font-style:italic; }

.message-thumbnail { display:block; padding:5px 0px 10px 0px; }
.message-thumbnail img { display:inline-block; width:50px; height:50px; border-radius:10px; cursor:pointer; }

.large-emoji { line-height:1.4; font-size:38px; }

.typing-indicator { float:left; margin-top:5px; border-radius:15px; padding:25px; opacity:0; transform:translateY(3px); transition:opacity .15s ease, transform .15s ease; }
.typing-indicator.show { opacity:1; transform:translateY(0); }

	.rtl .typing-indicator { float:right; }

.dot-typing {
	position:relative;
	left:-9999px;
	width:4px;
	height:4px;
	margin:0px auto;
	border-radius:5px;
	box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0;
	animation:dot-typing 1s infinite linear;
}
@keyframes dot-typing {
	0% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	5% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	10% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	15% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	20% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	25% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	30% { box-shadow:9991px -2px 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	35% { box-shadow:9991px -4px 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	40% { box-shadow:9991px -6px 0 0, 9999px -2px 0 0, 10007px 0 0 0; }
	45% { box-shadow:9991px -4px 0 0, 9999px -4px 0 0, 10007px 0 0 0; }
	50% { box-shadow:9991px -2px 0 0, 9999px -6px 0 0, 10007px -2px 0 0; }
	55% { box-shadow:9991px 0 0 0, 9999px -4px 0 0, 10007px -4px 0 0; }
	60% { box-shadow:9991px 0 0 0, 9999px -2px 0 0, 10007px -6px 0 0; }
	65% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px -4px 0 0; }
	70% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px -2px 0 0; }
	75% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	80% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	85% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	90% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	95% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
	100% { box-shadow:9991px 0 0 0, 9999px 0 0 0, 10007px 0 0 0; }
}

/* Message input textarea */
.message-input-box textarea { height:48px; border-radius:5px; padding:10px 30px 10px 15px; }

	.rtl .message-input-box textarea { direction:rtl; padding:10px 15px 10px 30px; }

/* Translation preloader */
.translation-preloader {
	animation: translatePulse 1.25s ease-in-out infinite;
}
@keyframes translatePulse {
	0% { opacity:1; }
	50% { opacity:.15; }
	100% { opacity:1; }
}

/* Scroll button */
.scroll-button { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); border:0px; border-radius:50%; padding:20px; background:rgba(0,0,0, .2); }
.scroll-button .icon { color:#fff; }

	.dark-mode .scroll-button { background:rgba(255,255,255, .25); }
	.dark-mode .scroll-button .icon { color:#000; }

/* Notify */
#notify { background:#f9f9ff; }

	.dark-mode #notify { background:#000000; }

.notify-wrapper { max-width:500px; margin:0px auto; padding:0px 30px; text-align:center; }
.notify-icon { padding-top:125px; line-height:1; font-size:54px; }
.notify-heading { margin:25px auto 15px auto; }
.notify-heading h1 { margin:0px; font-size:22px; }
.notify-text { font-size:16px; white-space:pre-line; }
.notify-text a,
.notify-text a:visited { text-decoration:underline; }
.notify-link { margin:25px auto; font-size:16px; }
.notify-link a,
.notify-link a:visited { font-weight:500; text-decoration:underline; white-space:nowrap; }
.notify-link button { border-radius:0px; border:1px; padding:0px; background:none; font-size:16px; font-weight:500; text-decoration:underline; } /* Undo the button styling for the link */

	.dark-mode .notify-link button { color:#fff; font-weight:400; }

/* Turnstile */
.cf-turnstile { margin-bottom:7px; }

/* Modal */
.backdrop { display:none; position:fixed; inset:0; z-index:2; overflow-y:auto; box-sizing:border-box; padding:0px; background:rgba(0,0,0, .85); cursor:pointer; }
.backdrop.active { display:block; }

.modal-container { max-width:520px; width:90%; margin:0px auto; }

/* Emojis */
.modal-emojis { box-sizing:border-box; border-radius:10px; padding:15px 10px; background:#fff; text-align:center; cursor:pointer; }

	.dark-mode .modal-emojis { background:#171a1b; }

.modal-emojis button { border-radius:0px; border:0px; padding:5px; background:none; line-height:1.5; font-size:28px; user-select:none; } /* Undo the button styling for the selector */

/* Scripts */
.modal-scripts-outer { overflow:hidden; box-sizing:border-box; border-radius:10px; padding:15px 10px; background:#fff; cursor:pointer; }

	.dark-mode .modal-scripts-outer { background:#171a1b; }

.modal-scripts-inner { max-height:60vh; overflow-y:auto; }

	.dark-mode .modal-scripts-inner { scrollbar-color:#222 #111; }