@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

body { /*height:100%;*/ margin:0; padding:0; }

label {
   color:#369;
   font-weight:normal !important;
}

/*
#absender { width: 300px; }
#absender h4 {  }
.requiredFields { color: tomato; font-size: 0.8em; }
.inputarea { border-bottom: 1px solid #555; display: block; overflow: hidden; height: 30px;}
.inputArea input { border: 0; width: 90%; margin-top: 10px;}
.inputArea input#userZip { width: 75px; margin-right: 10px;}
.inputArea input#userTown { width: 210px; }
.inputArea input#userVorname { width: 45%; margin-right: 10px;float: left;}
.inputArea input#userName { width: 45%; float: left;}
.inputArea input#kkNumber { border: 0; width: 210px; margin-top: 10px;}
#empfaenger { width: 270px; float:left;}
#empfaenger h4 {}
#empfaenger .inputArea { border: 0; }
#dateArea { float: right; }
#kuendigung_text { clear: both;}
#kuendigung_text h2 {}
#kuendigung_text h3 { float: left; font-size: 1.1em;}
#kuendigung_text .inputArea { float: left; margin: 10px 0 0 10px; }
#kuendigung_text .inputArea input {  }
.musterText { clear: both; float: none; display: block; overflow: hidden; }
*/
.signature { border: 0px; display: block; overflow: hidden; min-height: 100px; }
#signatureStart { width: 100%; }
#signatureStart span { display: block; overflow: hidden; border: 1px dotted #aaa; cursor: pointer; padding: 2px; margin-right: 5px; width: 146px; font-size: 0.75em; float:left; }
#signatureActionArea { }
#signature-pad { visibility: hidden; /*min-width:500px !important; */}
#uploadSignature { }

h2, .h2 {
   font-family: inherit;
   font-size:24px !important;
}

.h2 {
   margin-top: 20px;
   margin-bottom: 10px;
}

.h4 {
  font-weight:bold;
  opacity: 0.8;
}

.signaturePaint {
   border:2px solid #369 !important;
   background: #fff !important;
   padding: 10px !important;
   color: #369 !important;
   font-size:1em !important;
}

.inputArea {
   display:block;
   overflow:hidden;
}

/*
#getDateTown { font-size: 0.7em; }
#sendDate { width: 75px; }
*/

.close { display: none;  }


.videoArea { font-size: 0.8em; }
video { width: 280px; }
.button { cursor: pointer;  }

#getPhotoArea { display: none; }
#uploadSignature { display: none; }
#signatureImage { max-width: 100%; } 

input {
   border: 2px solid #ccc !important;
}

/* Modalwindow */
/*
.overlayButton {
   width: 18px;
   height: 15px;
   border: 1px solid tomato;
   border-radius: 30px;
   text-align: center;
   display: block;
   overflow: hidden;
   cursor: pointer;
   margin-left: 10px;
   padding-top:3px;
   float:right;
   position:relative;
   font-size: 0.8em;
}
*/


.replaceOverlayCSS .overlayButton {
   position: relative; top: 5px;
}

#overlay-email, #overlay-kk-nummer, #overlay-telefon, #overlay-date {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     z-index: 1000;
}

#overlay-email div, #overlay-kk-nummer div, #overlay-telefon div, #overlay-date div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
}

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     z-index: 1000;
}

#impressum { font-size: 0.8em; cursor:pointer; }
#impressumContent, #impressumNoScript { font-size: 0.9em;  margin-top: 20px;}

#impressum a {
  color: #aaa; 
}

.rectangle-2 {
   box-sizing: border-box;
   height: 614px;
   width: 629px;
   border: 1px solid #BFBFBF;
   background-color: #FFFFFF;
   box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.12);
   display:table-cell;
   margin-bottom: 20px;
}

.btn {
   margin-top: 20px;
   width: 100%;
}

.empfaenger {
   height:30px;
   vertical-align: middle;
   padding-top:5px;
   font-size: 0.8em;
}

.datumHeute {
   padding-top:28px;
   font-size: 0.7em;
   text-align:right;
}

.line-2 {	box-sizing: border-box;	height: 3px;	width: 570px;	border-top: 1px dotted #858A8D; margin-bottom: 10px;}

.bg {	height: 44px;	width: 100%;	border: 1px solid #2E6DA4;	border-radius: 4px;	background-color: #336699;	box-shadow: 1px 5px 10px 0 rgba(51,102,153,0.25); color:#fff;}
.bg:hover { color:#fff;}

/* Zeug von AL :) */

.form-control {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   border: 2px solid #CED3D6;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #FFFFFF;
   line-height:45px;
   font-size: 16px;
   color: #4d5256;
   height: 45px;
   margin-bottom: 5px;
}

label {
   color: #336699;
   font-size: 14px;
   font-weight: 600 !important;
   line-height: 21px;
   margin-bottom: 10px;
}

body {
   -webkit-font-smoothing: antialiased;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   line-height: 1.618;
   color: #3A3A3A;
}

h2, .h2 {
   color: #3A3A3B;
   font-size: 20px;
   font-weight: 600;
   line-height: 32px;
}

.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   font-size: 16px;
   color: #4d5256;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
   font-size: 16px;
   color: #4d5256;
}
.form-control:-ms-input-placeholder { /* IE 10+ */
   font-size: 16px;
   color: #4d5256;
}
.form-control:-moz-placeholder { /* Firefox 18- */
   font-size: 16px;
   color: #4d5256;
}

.input-group-addon {
   background: white;
   border: 2px solid #cccccc;
   color: white;
   font-weight: bold;
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 0;
   padding: 6px 15px;
}

.input-group-addon:before {
   content: '';
   width: 25px;
   height: 25px;
   background: #CED3D6;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   border-radius: 100%;
   -webkit-transform: translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   z-index: -1;
}

#signatureStart span {
   height: 44px;
   width: 193px;
   border: 2px solid #336699;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #FFFFFF;
   -webkit-box-shadow: 0 5px 10px 0 rgba(51,102,153,0.25);
   -moz-box-shadow: 0 5px 10px 0 rgba(51,102,153,0.25);
   box-shadow: 0 5px 10px 0 rgba(51,102,153,0.25);
   font-size:14px !important;
}

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) {
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-topleft: 4px;
   border-top-left-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -moz-border-radius-bottomleft: 4px;
   border-bottom-left-radius: 4px;
}

form#kuendigungsForm:before {
   content: '';
   width: 100vw;
   height: 645px;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   background: #F3F4F8;
   z-index: -1;
   opacity: .5;
}

.form-control:focus {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   border-color: #888888 !important;
}

.empfaenger {
   height: auto;
   padding-top: 15px;
   padding-bottom: 10px;
   color: #5A656C;
   font-family: "Open Sans";
   font-size: 10px;
   line-height: 14px;
}

p#kkData {
   margin-left:-15px;
   display:block;
   color: #3A3A3A;
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   margin-bottom: 0;
   margin-top: 5px;
}

p#kkData > .inputArea:first-of-type {
   height: auto !important;
   font-weight: bold;
}

.datumHeute + .col-xs-12
.input-group {
   margin-bottom: 15px;
}

.rectangle-2 {
   height: auto;
   /*width: auto;*/
   display: block;
   /*max-width: 100%;*/
   /*margin: 0 !important;*/
}

div#impressum {
   background: red;
   color: #C0C2CE;
   font-size: 14px;
   font-weight: 600;
   line-height: 35px;
   text-align: center;
   background-color: #F3F4F8;
   /*padding: 5rem 0;*/
}

.container + hr {
   display: none;
}
@media (max-width:767px) {
   form#kuendigungsForm:before {
      height: 90%;
   }
}

.line-2 {
   width: 100%;
}

.ui-widget-header {
   background: #336699;
   border-radius: 0;
   border: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
   border-radius: 4px;
   border: 0;
   background: white;
   margin-right: 5px;
   margin-top: -10px;
}

.ui-widget-content {
   border-radius: 0;
   border: 1px solid #BFBFBF;
   background-color: #FFFFFF;
   box-shadow: 1px 3px 6px 0 rgba(0,0,0,0.12);
}

.m-signature-pad:before, .m-signature-pad:after {
   display: none;
}

.ui-widget-content {padding: 0;}

.ui-dialog { top: 400px !important; }

@media screen and (max-width:640px) {
   
  body {
    overflow-x: hidden;
  }

   .kassenuebersicht {
    column-count: 1 !important;
   }

   .rectangle-2 {
    width: auto;
   }

}

@media screen and (max-width:480px) {
   .m-signature-pad--body {
      left:3px;
      right:3px;
   }

   .m-signature-pad--footer .description {
      color: #000;
      text-align: center;
      font-size: 1em;
      margin-top: 1.6em;
   }

   .m-signature-pad--footer {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 30px;
      height: 40px;
   }
}

.textCanvas {
   width: 95%; height: 300px; margin-left:2.5%;
}

.signaturePaint {
    border: 2px solid rgba(51, 102, 153,0.5) !important;
    background: #fff !important;
    padding: 10px !important;
    color: #369 !important;
    font-size: 1em !important;
}

#signatureStart span {
    background:#FEF6F0 !important;
    color: #92490D !important;
    border: 1px solid #C75B02 !important;
}
.btn-primary {
    width:100%;
}

#preview {
    visibility: hidden; display:none;
}

.save {
   position:absolute;
   right:20px;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    border: 1px solid #cd0a0a !important;
    background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
        background-color: rgb(254, 241, 236);
        background-image: url("images/ui-bg_glass_95_fef1ec_1x400.png");
    color: #cd0a0a;
}

.m-signature-pad--footer .button.save {
   right: 0;
   background: #e98816;
   padding: 10px;
   color: #000;
   opacity: 1;
   border-radius: 3px;
   border: 1px solid #000;
}

.m-signature-pad--footer .button.clear {
   right: 0;
   background: tomato;
   padding: 10px;
   color: #000;
   opacity: 1;
   border-radius: 3px;
   border: 1px solid #000;
   width:100px;
}

/* New Changes 28-11-2019 */
.h1, h1 {
    font-size: 2em;
    color: #369;
    font-weight: bold;
}

#sendbutton {
  font-size: 1.2em;
  line-height: 1.2em;
}

.glyphicon {
  color: #ccc;
}

.andere_kassen {
	width: 33%;
	float: left;
	text-align: center;
	margin-bottom: 50px;
}

.andere_kassen a {
	color: #369;
}