/*
###################################################################################
  RoyalArt(R) Chatsoftware
  Entwicklungsstand: 01.05.2021 Version 1.0

  RoyalArt - Agentur für Softwaregestaltung
  https://chat-software.eu
  https://www.newslettersystem.com
  https://www.royalart.de
  https://www.shopsoftware.com

  (c) Copyright by Dipl. Des. (FH) Sven Scholz - RoyalArt Agentur

  Copyrightvermerke duerfen NICHT entfernt werden!
  ------------------------------------------------------------------------
  Bei Verstoß gegen die Lizenzbedingungen kann die Lizenz jederzeit entzogen werden.
  Der Kaufpreises wird nicht erstattet. Wer gegen die Lizenzbedingungen verstoesst, muss
  mit einer Vertragsstrafe von 50.000 Euro je Einzeldelikt rechnen!
  ------------------------------------------------------------------------
  Dieses Programm ist eine Software von Dipl. Des. (FH) Sven Scholz, RoyalArt Agentur.
  Diese Software darf nicht veroeffentlicht, weitergeben und/oder modifizieren werden.
  Es gelten die Ihnen mitgeteilten Lizenzbestimmungen.
  Diese Software/Website ist eine Einzellizenz und für den Betrieb auf einem Speicherplatz
  (Webspace) berechtigt.
  Die Veroeffentlichung dieses Programms erfolgt OHNE IRGENDEINE GARANTIE, sogar ohne
  die implizite Garantie der MARKTREIFE oder der VERWENDBARKEIT FUER EINEN BESTIMMTEN ZWECK.

##################################################################################
  Copyrightvermerke duerfen NICHT entfernt werden!
*/
:root {
  --font-family: Century Gothic, sans-serif;
}
* { margin:0; padding:0; border:0; font-family:var(--font-family), arial, sans-serif; font-size:15px; color: #333333}

a { width: 100%; height:auto; position: relative; display: inline-block;text-decoration:none; }
.ib { display:inline-block; position:relative; vertical-align:top; }
.clear { clear:both; }
img { vertical-align:top; }
body { display:block !important; }
.cursor-pointer {cursor: pointer;}
/* ********** Farben *********************************************** */
a { color:#888888; }
 .button_blue { color:white; background-color: #018dca;} 
 .button_red { color:white; background-color: #930102;} 

#title { background-color:#eeeeee; }
#menu { background-color:#f1f1f1; }
#menu ul.menu_sub  { background-color:#ffffff; }
#menu .menu_sub li { background-color:#ffffff; }
#menu li.menu_subitem.active a { background-color:#f3f3f3 !important; }
#menu .menu_subitem a:hover { background-color:#e8e8e8 !important; }

.button_blue, .button_red, .button{ position:absolute;left:calc(50% - 58px); bottom: 15px; border-radius: 25px; width:116px; height:30px; line-height:22px; text-align:center;  cursor: pointer; }

input[type="text"], input[type="password"] { height:32px; display:inline-block; vertical-align:top;
        border:1px solid #cccccc; padding:0 10px; border-radius:3px;
        box-shadow: inset 1px 2px 4px 1px rgba(0, 0, 0, 0.10); box-sizing:border-box; cursor:pointer; }
input[type="text"]:hover, input[type="password"]:hover, textarea:hover { box-shadow: inset 1px 2px 4px 1px rgba(0, 0, 0, 0.15); }

/* Reset Password */
.reset_body { margin-top: 250px; width:100%; max-width:100%;}
.reset_wrapper { position: relative; margin:auto; width:350px; height: 300px; max-width:100%; padding:0 10px; box-sizing:border-box; background-color: white; padding:10px; border: 1px solid;}
.reset_container {position:relative; height: calc(100% - 40px); background-color: #f1f1f1; margin-top:10px; padding:15px}
.reset_title {text-align: center; font-size: 20px;}

/* admin setting */
.admin_background { background-image: url(../img/background_picture.jpg); background-repeat: no-repeat;background-attachment: fixed; background-size: cover }
.admin_body { margin-top: 150px; width:100%; max-width:100%; }
.admin_home_wrapper { position: relative; margin:auto; width:650px; height:540px; max-width:100%; padding:0 10px; box-sizing:border-box; background-color: white; padding:10px}
.admin_home_wrapper input[type="checkbox"].custom-checkbox {display:none; }
.admin_home_wrapper input[type="checkbox"].custom-checkbox + label:before  { display:inline-block; content:'\f0c8'; font-family:'Font Awesome 5 Free'; margin-right:5px; font-size:16px; cursor:pointer; font-weight:normal; }
.admin_home_wrapper input[type="checkbox"].custom-checkbox:checked + label:before  { content:'\f14a'; }

.admin_home_wrapper .chat_enter_check {display:flex; position:absolute; left:10px; bottom: 20px; text-align:center;}
.admin_home_wrapper #chat_send_per_enter {position:absolute; left:calc(50% - 100px);width: 200px;  bottom: 21px; text-align:center; }

.admin_setting_wrapper { position: relative; margin:auto; width:650px; height:540px; max-width:100%; padding:0 10px; box-sizing:border-box; background-color: white; padding:10px}
.admin_wrapper { position: relative; margin:auto; width:375px; height: 540px; max-width:100%; padding:0 10px; box-sizing:border-box; background-color: white; padding:10px}
.admin_container {position:relative; height: calc(100% - 90px); background-color: #f1f1f1; margin-top:10px; padding:15px}
.admin_chat_container { position:relative; background-color: #f1f1f1; max-height: 470px; margin-top:10px; padding:5px}
.admin_chat_container-1 { position:relative; background-color: #f1f1f1; height: 395px; margin-top:10px; padding: 5px 10px 5px 10px;}
.admin-menu-title { font-weight: bold; position:relative; margin-left:10px; float:left;height: 50px;line-height: 50px; white-space: nowrap; z-index:30}
.admin-subtitle { float:left; font-weight:bold; padding-bottom:5px}
.admin_body textarea {width:100% }

.chat_header{ float:left; margin: 10px 0 10px 0; width:100%}
.chat_area { width:100%; height:200px; overflow-y:scroll; word-wrap: break-word; background-color: white; box-sizing: border-box; padding-top:3px}
.admin_chat_container-1 .chat_area { width:100%; height:240px; overflow-y:scroll; word-wrap: break-word; background-color: white; box-sizing: border-box; padding-top:3px; white-space: pre; white-space: pre-line;}
.admin_chat_container-1 .chat_input {line-height: 1.5em; box-sizing: border-box; padding-left:5px; resize:none; margin-top:5px; height:60px}
.admin_chat_container ul { white-space: nowrap; list-style-type:none; overflow-y:hidden; }
.admin_chat_container li {  display:inline-block; margin: 2px 8px 2px 8px;}
.admin_chat_container li a { display: block; border:2px solid white; text-decoration: none; text-align: center; padding:5px }
.chatbot-textarea {padding:5px 0px 0px 10px; border:1px solid rgba(0, 0, 0, 0.25); border-radius: 5px; resize:none; box-sizing: border-box;}
.li-active { background-color:#018dca; color:white;}
.li-unread { background-color:#930102; color:white;}
.d-flex{ display:flex; align-items: center; padding-bottom:3px; }
.col50{flex:50%;}
.col100{flex:100%;}
.pt-5 {padding-top: 5px}
.pt-10 {padding-top: 10px}
.pt-15 {padding-top: 15px}
.pt-20 {padding-top: 20px}
.pr-5 {padding-right: 5px}
.pr-10 {padding-right: 10px}
.pl-5 {padding-left: 5px}
.pl-10 {padding-left: 10px}

.pb-5 {padding-bottom: 5px}
.pb-10 {padding-bottom: 10px}
.mb-1 {margin-bottom: 1px}
.mb-5 {margin-bottom: 5px}
.mb-10 {margin-bottom: 10px}
.mb-15 {margin-bottom: 15px}
.mb-20 {margin-bottom: 20px}

.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-15 {margin-top: 15px}
.mt-20 {margin-top: 20px}

.hide { display:none }
.show { display:block }
.float-right{ float:right}
.float-left{ float:left}
.werbebanner {display:flex; align-items:center; margin: 0 auto; max-width: 100%; width:100%; }
.reset-password-message {text-align:center;}
.forgot-password-message {text-align:center; color:green; font-size:13px}

.footer-link-home {display:flex; width: 650px; max-width: 100%; margin: 0 auto; padding: 3px 0 3px 0;}
.footer-link-home a {color:#000000; font-size:11px}
.footer-link-home .left-link {text-align: left; } 
.footer-link-home .right-link {text-align: right; }

.footer-link {display:flex; width: 375px; max-width: 100%; margin: 0 auto; padding: 3px 0 3px 0;}
.footer-link a {color:#000000; font-size:11px}
.footer-link .left-link {text-align: left; } 
.footer-link .right-link {text-align: right; }

.text-default {color: #aaaaaa}
.text-black {color: #000000}
.chat_item {padding-bottom : 0.5em; padding-left: 5px;white-space:pre-wrap;}
.chat_item a{ display: inline; color: blue; text-decoration: underline;}
.chat_input {line-height: 1.5em; box-sizing: border-box; padding-left:5px; resize:none}

.icon-papierkorb{ width: 15px; height:15px;}
/* Setting  */
#setting_form .text-right {float:right;padding-right: 10px;}
#setting_form .text-heading {font-size: 15px; font-weight: bold;}
#setting_form input[type="text"], input[type="password"]{ width:100%}
#setting_form .pw_eye{  position:relative; float:right; margin-right:7px; margin-top:-22px; ; z-index:20}
#setting_form .email_label {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#setting_form .check { display: inline-block; width: 20px; }
#setting_form input[type="checkbox"].custom-checkbox {display:none; }
#setting_form input[type="checkbox"].custom-checkbox + label:before  { display:inline-block; content:'\f0c8'; font-family:'Font Awesome 5 Free'; margin-right:5px; font-size:16px; cursor:pointer; font-weight:normal; }
#setting_form input[type="checkbox"].custom-checkbox:checked + label:before  { content:'\f14a'; }
#setting_form .selectbox30 { display: inline-block !important; position: relative !important; line-height: 30px !important; ; height: 30px !important; border-radius: 4px; box-sizing: border-box !important; background-color: #ffffff; vertical-align: top; border: 1px solid #cccccc; max-width:100; width:100%; padding-left:5px}
#setting_form .selectbox30::before { content: ''; position: absolute; right: 1px; top: 1px; width: 24px; height: 26px; pointer-events: none; display: block; background-color: #ffffff; z-index: 11; line-height: 30px !important; }
#setting_form .selectbox30::after { content: '\f0d7'; position: absolute; right: 0; top: 4px; width: 20px; height: 22px; line-height: 20px; font-size: 18px; font-family: 'Font Awesome 5 Free'; font-weight: 900; text-align: center; pointer-events: none; z-index: 12; color: #888888;border-left: 1px solid #cccccc; }
#setting_form .divider { border-top:10px solid white; width:100%; display:block;position:absolute; left:0;  }
#setting_form .setting_div { display: flex; }
#setting_form .setting_div_chatwidget { flex:50%; margin-left:20px}
#setting_form .setting_div_bottom { flex:50%; margin-right:20px}
#setting_form .setting_div_bottom_right { flex:50%; }
#setting_form .chatwidget_html_textarea { padding:5px 0px 0px 10px; border:1px solid rgba(0, 0, 0, 0.25); border-radius: 5px; resize:none; box-sizing: border-box; height:260px}
/* #setting_form .d-flex {padding-bottom:8px} */

/* ******************** Login ************************ */
.login_htmlbody { 
  background-image: url(../img/bg_white.png), url(../img/bg_login.jpg);
  background-repeat: no-repeat, repeat;
  background-position: 50% 55% , left top;
  background-attachment: fixed, fixed; 
  background-clip: content-box, border-box;
}
.login_body { position:absolute; top:50%; margin-top:-150px; width:100%; max-width:100%;}
.login_wrapper { position:relative; margin:auto; width:470px; max-width:100%; padding:0 10px; box-sizing:border-box; }
.login_wrapper input[type="text"], .login_wrapper input[type="password"] { display:inline-block; vertical-align:top; width:calc(100% - 2px); height:48px; border:1px solid #cccccc; padding:0 10px; box-sizing:border-box; }
.login_logo { margin:0 auto; position:relative; width:380px; max-width:100%; height:150px; background-image:url(../img/logo.png); background-position: center; background-size: 100%; background-repeat:no-repeat; padding-bottom: 20px }
.login_input { position:relative; margin-top:10px; width:450px; max-width:100%; height:50px; white-space: nowrap; }
.login_email { width:48.5%; margin-right:3%; }
.login_pass { width:48.5%;}
.login_ok { position:relative; width:100%; height:50px; line-height:50px; text-align:center; margin-top:20px; color:#ffffff; background-color:#000000; cursor:pointer;}
.login_err { position: absolute; top: -33px; text-align: center; left: 0; right: 0; color:#cc0000; border: 1px solid red; padding: 5px 0; }
.login_forgot_pass { position:relative; text-align:center; padding:22px 0px 2px 0px; font-size:13px; cursor: pointer;}

/* ******************** Menü ************************ */

#menu { position:relative; text-align:center; height:50px; padding:0 5px; z-index:20; }
#menu .element_wrapper { width:100%; max-width:100%;}

#menu li.menu_item { cursor:pointer; }
#menu a { cursor:pointer; }
#menu ul.menu_main { float:right}
#menu li.menu_item { display:inline-block; position:relative; padding:5px; height:50px; line-height:50px;  text-align:center; }
#menu li.menu_item:first-child { padding:0 8px; }
#menu li.menu_item a { font-size:20px; }
#menu li.menu_item span { font-size:20px; }

#menu .home { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon2.png); background-image:url(../img/Icon2.png); background-size: 100% 100%; }
#menu .home:hover { background-image:url(../img/Icon2_ovr.png); }
#menu .home a { height:100%;}
#menu .home-active { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon2_ovr.png); background-image:url(../img/Icon2_ovr.png); background-size: 100% 100%; }

#menu .chatbot { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon3.png); background-image:url(../img/Icon3.png); background-size: 100% 100%;}
#menu .chatbot:hover { background-image:url(../img/Icon3_ovr.png); }
#menu .chatbot a { height:100%;}
#menu .chatbot-active { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon3_ovr.png); background-image:url(../img/Icon3_ovr.png); background-size: 100% 100%; }

#menu .delete { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon4.png); background-image:url(../img/Icon4.png); background-size: 100% 100%;}
#menu .delete:hover { background-image:url(../img/Icon4_ovr.png); }
#menu .delete a { height:100%;}
#menu .delete-active { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon4_ovr.png); background-image:url(../img/Icon4_ovr.png); background-size: 100% 100%; }

#menu .setting { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon5.png); background-image:url(../img/Icon5.png); background-size: 100% 100%;}
#menu .setting:hover { background-image:url(../img/Icon5_ovr.png); }
#menu .setting a { height:100%;}
#menu .setting-active { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon5_ovr.png); background-image:url(../img/Icon5_ovr.png); background-size: 100% 100%; }

#menu .logout { display:inline-block; width:25px; height:25px; background-image:url(../img/Icon6.png); background-image:url(../img/Icon6.png); background-size: 100% 100%;}
#menu .logout:hover { background-image:url(../img/Icon6_ovr.png); }
#menu .logout a { height:100%;}

/* Adjust css style for smaller screen */
@media screen and (max-width: 512px) {
  #menu {height:40px}
  #menu li.menu_item { height:40px; line-height:40px;}
  .admin_body { margin-top: 30px; }
  .admin-menu-title {height: 40px; line-height: 40px;}
  .admin_home_wrapper {width:375px;}
  .admin_wrapper {width: 375px;}
  .admin_setting_wrapper {width:375px; height: 830px}
  .admin_container {height: calc(100% - 80px);}
  .admin_chat_container-1 {height: 385px}
  .footer-link-home {width: 375px;}
  .footer-link {width: 375px;}
  #setting_form .setting_div { display: block;}
  #setting_form .setting_div_chatwidget { display:block; margin-left:0px}
  #setting_form .setting_div_bottom {  display: block; margin-right: 0px;}
  #setting_form .setting_div_bottom_right {display: none;  }
}

.minicolors{ height:26px !important; width:100px !important;  margin-right:3px; }
.minicolors-theme-default.minicolors-position-right .minicolors-input {padding-left:10px}
.minicolors-theme-default .minicolors-swatch { top: 0; left: 0; width: 25px; height: 25px;margin:0 ;padding:0 }
.minicolors-theme-default .minicolors-swatch-color {width: 25px; height:25px; margin:0 ;padding:0}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch { left: auto;  right: 0; }
.minicolors-theme-default.minicolors { vertical-align:top; }
.minicolors-theme-default.minicolors { width:100%; }

/* Chatwidget */
#chatwidget { border-radius:25px 25px 0 0; width: 346px; box-shadow: 0px 14px 12px -12px rgba(0, 0, 0, 0.5); color: #000000; background-color: #f7f7f7;}
#chatwidget_container{ margin-top:15; height: 346px; padding: 20px 20px 20px 20px; position:relative; }
#chatwidget input, textarea{ margin: 0 0 10px 0;  width: 100%; border: 1px solid rgba(0, 0, 0, 0.6);}
#chatwidget_title img{ width:30px; height:30px; padding-right:15px; }
#chatwidget_greeting_text { padding: 10px 0 10px 0; white-space: pre; white-space: pre-line;}
#chatwidget .email { width:25px; padding-left:10px; flex-grow: 1;}
#chatwidget .whatsapp { width: 25px; flex-grow: 1;}
#chatwidget .telefon { text-align:right; line-height:25px;height:25px; font-size: 16px;  flex-grow: 1;}
#chatwidget .frage {line-height: 1.5em; box-sizing: border-box;margin-bottom: 2px; padding:5px 0 0 10px; resize:none; height:75px; max-height:75px}
#chatwidget .privacy {font-size:13px; display:block; line-height:2px;}
#chatwidget .privacy_checkbox {width:13px; vertical-align:text-top}
#chatwidget .privacy_link {display:inline; text-decoration:underline; font-size:13px; color:#333333}
#chatwidget .backlink {text-align: right; position:absolute; bottom:1px; left:-7px ; font-size:12px; color: #888888}
#chatwidget_chat_input {height: 70px; margin-top: 10px}
#chatwidget_body {  word-wrap: break-word;}
#chatwidget #chatwidget_send_per_enter {text-align: center;}
.delete_wrapper { margin-top:10px; padding-top: 10px;text-align:center; background-color:#f1f1f1; padding-bottom: 20px }
.delete_container { position:relative; height:88px; padding-top: 10px }
.delete_container .button_blue { position:static; text-align: center; margin-top:10px}
.delete_container .button_disabled { opacity: 0.65; cursor: not-allowed;}
/* add additional styling for firefox */
@-moz-document url-prefix() {
   #chatwidget_greeting_text{
    font-size: 14px;
  }
  #chatwidget .privacy { margin-top: 2px;}
  #chatbot_form textarea {height: 60px}
}