/* ===================================
1. General
==================================== */
@import url('font.css');
@import url('font-awesome.css');
@import url('jquery.fancybox.css');
@import url('style_cms.css');
html, body {
	overflow-x:hidden;
	background: #E8F0D9;
} 
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 1em;
  width:100%;
  border: 1px solid #bbb;
  padding:.75em 1em .5em 1em;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
  background-color:white;
  background-image:url(../images/select-arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

select:hover {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}
#wrapper{
	overflow: hidden;
}
header{
	background: #fff;
}

.row{margin: 0;}
/* Online Chat Bewerbung */
#main-chat{max-width: 100%; margin: 0 auto 30px; /*box-shadow: 0 0 25px 0 rgba(47, 73, 102, 0.25);*/ background: #E8F0D9; padding-bottom: 50px;}
#main-chat .content h2{font-size: 24pt; font-weight: 500; color: #70B52C; text-transform: uppercase; margin: 10px 10px 0; padding-bottom: 0; text-align: center;}
#main-chat .content h2 span{display: inline-block; padding:8px 10px 4px; margin: 2px 0;}
#main-chat .content h3{font-size: 16px; text-align: center; margin: 0; padding: 0 10px;}
#main-chat .chat_content{min-height: calc(100vh - 215px); overflow: hidden; padding-left: 0; padding-right: 27px; padding-top: 30px; margin-right: 0 !important;}
::-webkit-scrollbar  { opacity: 0 !important }
.main-msg{display: none;}
.main-msg.enable{display: block;}
.main_qs, .main_an{margin-bottom: 25px;}

.main_qs .personne{float: left; text-align: left; position: relative;}
.main_qs .personne img{border-radius: 50%; display: block; margin: 0 auto 5px 15px; position: relative; z-index: 1;}
.main_qs .personne p{display: block; font-size: 12px; font-weight: normal; color: #000; margin: 0; line-height: 14px;
					position: absolute; top: 8px; width: 200px; z-index: 1; left: 120px;}
.main_qs .personne span.utcdate{color: #000; font-size: 10px; display: inline-block; position: absolute; left: 120px; top: 22px; z-index: 1; width: 100px;}
.main_qs .question{
	background: #fff; border-radius: 5px; color: #000; float: left; font-size: 15px;font-weight: normal; line-height: 24px; margin-left: 20px; max-width: 468px; padding: 50px 22px 8px; position: relative; width: 100%;}
.main_qs .question textarea{display: none;}
.main_qs .question::before{background-image: url("../images/white-triangle.png"); content: ""; height: 22px; left: -9px; position: absolute; top: 19px; width: 23px;}
.main_qs .question p{color: #000; font-size: 15px; font-weight: normal; line-height: 22px; margin: 0 0 10px;}

.main_an .personne{float: right; text-align: center; position: relative;}
.main_an .personne .circle{border-radius: 50%; color: #fff; font-weight: bold; height: 61px; line-height: 61px; margin: 0 auto 12px; width: 61px; background-color: #70B52C; position: relative; z-index: 1;}
.main_an .personne p{font-size: 12px; font-weight: 500; margin:0; line-height: 8px;}
.main_an .personne span.utcdate{font-size: 10px; display: inline-block;}

.main_an .answer{background-color: #70B52C; border-radius: 5px; float: right; margin-right: 30px; font-size: 15px; font-weight: normal; line-height: 24px; max-width: 468px; padding: 15px 22px; position: relative; width: 100%; }
.main_an .answer p{color: #fff; }
.main_an .answer textarea{width: 100%; padding: 5px; font-size: 14px; margin-bottom: 10px; border: none; display: none;}
.main_an .answer .btn-save{ display: none; background: #fff; border: medium none; border-radius: 5px; color: #70B52C; float: right; font-family: Montserrat; font-size: 12px; font-weight: 500; margin-left: 10px; width: 90px; padding: 1px; text-align: center;}
.main_an .answer::before{
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #70B52C;
border-style: solid; border-width: 12px 0 12px 12px; content: ""; height: 0; left: auto; position: absolute; right: -10px; top: 18px; width: 0;}
.main_an .answer .edit-data{bottom: -30px; cursor: pointer; font-size: 11px; position: absolute; right: 20px; color: #70B52C;}

.bewerbungsform{position: relative; width: 100%; max-width: 750px; margin: 0 auto;}
.bewerbungsform .submit-btn{position: absolute; bottom: 10px; right: 5px; background: #70B52C none repeat scroll 0 0; border: 2px solid #70B52C; color: #ffffff; padding: 4px 12px; font-size: 18px; display: none;}
.bewerbungsform .submit-btn .fas{margin-right: 8px;}

.main-dsb{padding:15px 15px 0; position: relative; background: #ccc; width: calc(100% + 27px);}
#chat-form{padding:15px; position: fixed; background: #ccc;  min-width: 750px; left: 50%; bottom: 0; margin-left: -375px; z-index: 2;}

.main-dsb input[type="text"],
#chat-form input[type="text"],
#chat-form textarea { color: #000; font-size: 18px; font-weight: normal; height: 40px; padding: 10px 30px; background: #fff; border: none;}
#chat-form select {width:calc(100% - 85px); float: left; margin-right: 25px; font-size: 18px; color: #000; font-weight: normal; padding: 10px 30px;}
.main-dsb input.error,
#chat-form input.error,
#chat-form textarea.error{border:1px solid #E71418;}

.main-dsb input[type="text"]{float: left; margin-right: 25px; width: calc(50% - 25px);}
#chat-form input[type="text"]{float: left; margin-right: 25px; width: calc(50% - 55px);}

#chat-form textarea {width:calc(100% - 85px); float: left; margin-right: 25px; height: 81px;}

#chat-form a.button{padding: 0; border: 0; float: left; font-size: 40px; background: none; cursor: pointer; color: #fff; margin:0;}

#chat-form a.button:hover{color: #70B52C; }
#chat-form::after {clear: both; content: ""; display: table; float: none;}

.datenschutz {padding: 15px 0 10px; color: #333;}
.datenschutz a{color: #70B52C; text-decoration: underline;}

.anim-cercle_qs{ position: absolute; top: -5px; left: -5px; z-index: 0; }
.personne.active .anim-cercle_qs:before {border: 6px solid rgba(255,255,255,0); position: absolute; content: ''; height: 80px; width: 80px; left: auto; right: -90px; top: -5px; z-index: 5; margin: 0 auto;  border-radius: 50%; animation: pulsate 3s ease-out infinite; }
.anim-cercle_qs:before { -webkit-animation-delay: 3s; animation-delay: 3s; }

.anim-cercle_an{position: absolute; top: -5px; left: -10px; z-index: 0;}
.personne.active .anim-cercle_an:before {border: 6px solid rgba(167,220,248,0); position: absolute; content: ''; height: 80px; width: 80px; left: auto; right: -86px; top: -5px; z-index: 5; margin: 0 auto; border-radius: 50%; animation: pulsate2 3s ease-out infinite;}
.anim-cercle_an:before {-webkit-animation-delay: 3s; animation-delay: 3s;}


/* Input Type File CSS */
.js .inputfile {width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}

.inputfile + label {max-width: 80%; font-size: 12px; font-weight: normal; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block;overflow: hidden; padding: 6px 10px;/* 10px 20px */}

.inputfile + label .fas{font-size: 20px; margin-right: 8px; vertical-align: text-bottom; }

.no-js .inputfile + label {display: none;}

.inputfile:focus + label,
.inputfile.has-focus + label {outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }

/* Input type file Style*/
.inputfile-1 + label {color: #fff; background-color: #333;}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {background-color: #70B52C;}

footer{text-align: center; display: none;}
footer a{display: inline-block; margin: 0 8px; color: #70B52C;}
footer a:hover{color: #333;}

a.scrollup{position: fixed; bottom: 8px; left: 8px; display: none; z-index: 999;}
/* Animation Circle */
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
	  border-color: rgba(112,181,44,0)
  }
	50% {
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 1;
	border-color: rgba(112,181,44,0.5)
  }
  100% {
    -webkit-transform: scale(0, 0);
    transform: scale(1.2, 1.2);
    opacity: 0;
	border-color: rgba(112,181,44,0.1)
  }
}

@-webkit-keyframes pulsate2 {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 1;
	  border-color: rgba(255,255,255,0)
  }
	50% {
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    opacity: 1;
	border-color: rgba(255,255,255,0.5)
  }
  100% {
    -webkit-transform: scale(0, 0);
    transform: scale(1.2, 1.2);
    opacity: 0;
	border-color: rgba(255,255,255,0.1)
  }
}


@media (max-width: 768px) {
	#main-chat{padding-top: 70px;}
	#chat-form{min-width: 100%; margin: 0; left: 0;}
}
/*
@media (max-width: 720px) {
	#stellenangebote .content{padding-right: 15px; padding-bottom: 220px;}
	#stellenangebote .content .online-chat-btn{top: inherit; bottom: -40px; right: 50%; margin-right: -123px;}
	.ui-accordion .ui-accordion-content{margin-right: 0;}
	
	#firma .content{padding-right: 15px; padding-bottom: 500px;}
	#firma .content .right-side{top: inherit; bottom: -50px; right: 50%; margin-right: -127px;}
}

@media (max-width: 620px) {
	footer .content p{width: 100%; text-align: center; display: block;}
	footer .content p:nth-child(2){text-align: center;}
	
	#main-chat .content h2,
	#firma .content h2,
	#stellenangebote .content h2{font-size: 20pt;}
	
	.ui-accordion .ui-accordion-header{font-size: 16pt;}
}
*/
@media (max-width: 580px) {
	.main_qs, .main_an{position: relative;}
	.main_qs .personne{position: absolute;}
	.main_qs .personne img{max-width: 45px; margin: -20px auto 5px 15px;}
	.main_qs .personne p{left: 65px; top: 2px;}
	.main_qs .personne span.utcdate{left: 65px; top: 18px;}
	
	.main_an .personne{position: absolute; top:8px ; right:-25px ;}
	.main_an .personne p{display: none;}
	.main_an .personne .circle{line-height: 41px; width: 41px; height: 41px; margin-bottom: 4px;}
	.main_an .personne span.utcdate{max-width: 70px; line-height: 11px;}
	
	.main_an{margin-bottom: 40px;}
	.main_an .answer{width: calc(100% - 45px); margin-right: 40px;}
	
	.anim-cercle_qs, .anim-cercle_an{display: none;}
	.main-dsb input[type="text"], #chat-form input[type="text"], #chat-form textarea{padding: 10px;}
}

@media (max-width: 460px) {
	label{font-size: 13px;}
	#wrapper header h1{transform: scale(0.8);}
	#chat-form input[type="text"]{width: calc(94% - 55px); margin-bottom: 5px;}
	/*#main-chat .chat_content{height: 380px; padding-right: 40px;}*/
	
	.main-dsb{padding: 15px 15px 50px; margin-top: -20px;}
	.main-dsb input[type="text"]{width: 100%; margin-bottom: 5px;}
	.bewerbungsform .submit-btn{right: 24%;}
	.main-dsb .box{text-align: center;}
	
	.msgerror{background: #efefef; position: fixed; bottom: 0; width: 100%; line-height: 14px; padding: 5px;}
}
