@charset "utf-8";

body { background-color:#fff; color:#000; font-size:16px; text-align:center; }

/* Smoother parallax scrolling on mobile devices */
#parallax { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1; transform:scale(1.0); }
#parallax:after { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; background-repeat:no-repeat; }

input[type=text],
input[type=email],
textarea { width:100%; padding:12px; color:#000; font-size:16px; }
input::placeholder,
textarea::placeholder { opacity:.5; color:#000; }

select { width:100%; height:52px; text-indent:10px; color:rgba(0,0,0, .5); font-size:16px; }
select option { background:#fff; }

input[type=submit],
input[type=button],
button { border:1px solid #ccc; padding:7px 12px; background:#f4f4f4; color:#000; font-size:12px; }
input[type=submit]:hover,
input[type=button]:hover,
button:hover { opacity:.75; cursor:pointer; }

input[type=submit]:disabled,
input[type=submit]:disabled:hover,
input[type=button]:disabled,
input[type=button]:disabled:hover,
button:disabled,
button:disabled:hover { opacity:1; color:rgba(0,0,0, .75); cursor:not-allowed; }

a,
a:visited { color:#000; }

.wrapper { padding:0px 10px; }
.prechat-wrapper { max-width:400px; margin:0px auto; padding:0px 20px; }
	.prechat-wrapper textarea { min-height:85px; }
	.prechat-wrapper button { width:100%; border:1px solid #2ea701; border-radius:5px; padding:15px; background:#2ea701; color:#fff; font-size:16px; font-weight:500; }
	.prechat-wrapper #last_name_field { display:none !important; }

.messenger-top-icon-bar { padding:9px 15px 0px 0px; text-align:right; }
.messenger-top-icon-bar button { border-radius:0px; border:0px; padding:0px; background:none; } /* Undo the button styling for the icon */
.messenger-top-icon-bar .icon { color:rgba(0,0,0, .65); font-size:16px; cursor:pointer; }

.menu-wrapper { position:relative; display:inline-block; }
.menu-button { padding:0px 10px; }
.dropdown { position:absolute; z-index:999; top:10px; right:10px; min-width:160px; border:1px solid #ddd; border-radius:10px; padding:5px; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.1); }
	.dropdown .hidden { display:none; }

.dropdown a,
.dropdown a:visited { display:block; width:140px; border:none; padding:10px; background:#fff; text-align:left; color:#000; cursor:pointer; }
.dropdown a:hover,
.dropdown a:visited:hover { background:#f5f5f5; color:#000; }

.message-output-wrapper { margin:0px 10px; }

h1 { margin:0px; font-size:24px; }

/* Content */
.container { margin:20px auto; box-sizing:border-box; border-radius:5px; padding:20px; }
.content { background:rgba(255,255,255, .85); border:1px solid rgba(0,0,0, .12); }
.edit-box { max-width:450px; }
.image-box { max-width:90%; }
.image-box img { width:100%; border-radius:10px; }

.message-output-box { max-width:750px; min-height:250px; margin:0px auto; padding:15px; }
.message-output-box-date { padding:5px 0px 15px 0px; font-size:12px; text-align:center; }

.message-thumbnail-visitor img { width:50px; height:50px; margin:10px 0px; border-radius:10px; cursor:pointer; }
.message-thumbnail-admin { display:none; }

.message-input-box { max-width:750px; margin:0px auto; padding:15px 10px; text-align:left; }
.message-input-box textarea { height:48px; margin-bottom:15px; border-radius:5px; padding:10px 30px 10px 15px; }

.messenger-footer { padding-top:3px; font-size:0px; text-align:center; }
.messenger-footer button { border-radius:0px; border:0px; padding:0px; background:none; } /* Undo the button styling for the icon */
.messenger-footer .icon { color:rgba(0,0,0, .65); font-size:16px; }
.messenger-footer .icon:hover { opacity:.75; cursor:pointer; }
.messenger-footer .branding { top:-1px; }
.messenger-footer .branding a { color:rgba(0,0,0, .85); font-size:16px; text-decoration:underline; }

@media all and (max-width:768px) {
	a:hover,
	a:visited:hover,
	input[type=submit]:hover,
	input[type=button]:hover,
	button:hover,
	.icon:hover { opacity:1; }
}

@media all and (max-width:480px) {
	.message-output-wrapper { margin:0px; }
	.thread-header { margin:0px 10px; }
	.message-output-box { border-radius:0px; }
}