/* SAC Pro - Hero Theme */

.sacpro { width: 100%; overflow: hidden; }

	.sacpro-box { position: relative; float: left; box-sizing: border-box; width: 60%; min-width: 340px; margin: 20px 0; padding: 0; }

		.sacpro-box-inner {
			height: 400px; min-height: 200px; overflow-y: auto; resize: vertical; border-style: solid; 
			background-color: #fefefe; background-size: 50px 50px; background-image: url(../img/sacpro-bg-box.png); 
			border-width: var(--form--border-width, 1px); border-color: var(--form--border-color, #d1d1d1);
			scroll-behavior: smooth;
			}
			.sacpro-error { 
				display: none; position: absolute; z-index: 99;
				left: var(--form--border-width, 1px); right: var(--form--border-width, 1px); top: var(--form--border-width, 1px); 
				margin: 0; padding: 15px; line-height: 20px; font-size: 14px;
				background-color: #CC6666; color: #fff; text-shadow: none;
				}
			.sacpro-error::before {
				content: '\02757'; display: inline-block; vertical-align: middle; margin: -3px 6px 0 0; 
				line-height: 12px; font-size: 12px; text-shadow: none; 
				}
			.sacpro-latest-message { 
				margin: 0; padding: 20px 15px 5px 15px; line-height: 20px; font-size: 14px; 
				color: #555; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
				}
			.sacpro-latest-message::before { 
				content: '\01f551'; display: inline-block; vertical-align: middle; margin: -3px 8px 0 0; 
				line-height: 14px; font-size: 14px; text-shadow: none; 
				}
				.sacpro-latest-message-key { cursor: help; }
				.sacpro-latest-message-val { font-style: italic; }

			.sacpro-chats { margin: 10px 0; width: 100%; overflow: hidden; }

				.sacpro-chat {
					float: left; clear: both; position: relative; margin: 0; padding: 7px 20px; line-height: 20px; font-size: 14px; 
					background-repeat: no-repeat; background-position: 80px 18px; background-size: 50px 50px; background-image: url(../img/sacpro-bg-chat.gif); 
					}

					.sacpro-chats .sacpro-chat a { border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; box-shadow: none; }

					.sacpro-chats .sacpro-chat a:hover { border: 0; text-decoration: none; box-shadow: none; }

					.sacpro-chat .sacpro-chat-date-time { display: none; font-size: 10px; color: #aaa; padding-right: 10px; text-align: right; }

					.sacpro-chat .sacpro-chat-name-wrap { display: block; margin: 0 0 0 80px; padding: 15px 20px 0 20px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; }

					.sacpro-chat .sacpro-chat-text-wrap { display: block; margin: 0 0 0 80px; padding: 5px 20px 15px 20px; background-color: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

					.sacpro-chat .sacpro-chat-sep { display: none; }

					.sacpro-chat .sacpro-chat-name { font-weight: bold; cursor: help; }

					.sacpro-chat .sacpro-chat-avatar, 
					.sacpro-chat .sacpro-chat-avatar-placeholder {
						position: absolute; top: 18px; left: 15px; 
						box-sizing: border-box; width: 50px; height: 50px; margin: 0; padding: 2px; 
						border-radius: 50%; border: 1px solid #ddd; box-shadow: none; cursor: help;
						}
					.sacpro-chat .sacpro-chat-avatar-placeholder {
						background-repeat: no-repeat; background-position: center center; background-size: 54px 54px; background-image: url(../img/sacpro-avatar-default.png); 
						}
					.sacpro-chat .sacpro-chat-name-meta {
						display: inline-block; vertical-align: middle; margin: -3px 3px 0 0; padding: 2px 3px; line-height: 10px; font-size: 10px; font-weight: normal; color: #fff;
						background-color: #bbb; border: 1px solid #999; border-radius: 2px; cursor: help;
						}
					.sacpro-role-superadmin  .sacpro-chat-name-meta { background-color: rgba(204,102,  0,0.6); border-color: rgba(204,102,  0,0.7); }
					.sacpro-role-admin       .sacpro-chat-name-meta { background-color: rgba(204,153,  0,0.6); border-color: rgba(204,153,  0,0.7); } 
					.sacpro-role-editor      .sacpro-chat-name-meta { background-color: rgba(153, 51, 51,0.6); border-color: rgba(153, 51, 51,0.7); }
					.sacpro-role-author      .sacpro-chat-name-meta { background-color: rgba(153,102,153,0.6); border-color: rgba(153,102,153,0.7); }
					.sacpro-role-contributor .sacpro-chat-name-meta { background-color: rgba(51, 102,153,0.6); border-color: rgba(51, 102,153,0.7); }
					.sacpro-role-subscriber  .sacpro-chat-name-meta { background-color: rgba(51, 153,153,0.6); border-color: rgba(51, 153,153,0.7); }
					.sacpro-role-visitor     .sacpro-chat-name-meta { background-color: rgba(119,119,119,0.6); border-color: rgba(119,119,119,0.7); }

	#sacpro .sacpro-form { float: left; box-sizing: border-box; width: 40%; min-width: 220px; margin: 20px 0; padding: 0 20px; }

		#sacpro .sacpro-form abbr[title] { cursor: help !important; border-bottom: 1px dotted #ccc !important; text-decoration: none !important; }

		#sacpro .sacpro-form fieldset { margin: 0; padding: 0 0 10px 0; outline: none; border: 0; }

		#sacpro .sacpro-form .sacpro-form-label { 
			display: block; box-sizing: border-box; margin: 0 0 5px 0; padding: 0; color: #777;
			line-height: 20px; font-size: 14px; font-weight: normal; 
			}
		#sacpro .sacpro-form .sacpro-form-input { 
			display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 10px; 
			line-height: 20px; font-size: 14px; font-weight: normal; 
			}
		#sacpro .sacpro-form .sacpro-form-textarea {
			display: block; box-sizing: border-box; width: 100%; height: 100px; min-height: 100px; margin: 0; padding: 10px; resize: vertical; 
			line-height: 20px; font-size: 14px; font-weight: normal; 
			}
		#sacpro .sacpro-form .sacpro-form-submit-button { 
			margin: 0; line-height: 14px; font-size: 14px; font-weight: normal; 
			}
		.sacpro-form-name-static { 
			display: inline-block; position: relative; top: -5px; margin: 0 0 -5px 2px; color: #777; cursor: help; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); 
			line-height: 14px; font-size: 14px; font-weight: bold; 
			}

		.sacpro-form-submit { position: relative; }
		.sacpro-count-chars { position: absolute; z-index: 0; top: -5px; right: 5px; font-size: 12px; }

/* @ */

.sacpro-chatbox-before,
.sacpro-chatbox-after,
.sacpro-chatform-before,
.sacpro-chatform-after { margin: 15px 0; }

/* @ */

#sacpro.sacpro-classic-narrow .sacpro-box,
#sacpro.sacpro-classic-narrow .sacpro-form { float: none; width: 100%; padding: 0 5px; }