/* 
    Created on : 16.09.2023, 09:01:45
    Author     : christian
*/

body {
    
}
#content {
    /*position: relative;
    margin-top: 130px;*/
    /*margin-left: auto;
    margin-right: auto;
    /*top: 200px!important;*/
    
}
/* --- Message box --- */
.msgbox_wrapper {
    z-index: 1000000;
    width: 100%;
    position: absolute;
    top: 70px;
}
.msgbox {
    /*display: none;*/
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(165,255,65,0.9);
    border-radius: 5px;
    width: 350px;
    max-width: 400px;
    opacity: 0.99;
    transition: opacity 0.5s linear;
    text-align: center;
    padding: 6px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}
.msgbox-hide {
    opacity: 0;
}
.msgbox-ok {
    background-color: rgba(165,245,65,0.9);
}
.msgbox-error {
    background-color: rgba(245,165,65,0.9);
}

/* --- Datepicker --- */
.datepicker {
    width: 250px;
    z-index: 10000!important;
}
.table-condensed {
    width: 240px;
}

/* --- Allgmein  --- */
.fixed-top {
    /*Fixierung der navbar z-index von standard auf 5 setzen, wegen datapicker*/
    /*z-index: 5!important;*/
}    
.vertical-center {
    min-height: 100%;
    min-height: 100vh; 
    display: flex;
    align-items: center;
    /* background-color: #c2c2c2; */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.cursor-pointer {
    cursor: pointer;
}
.txt-small-7 {
    font-size: 0.7em;
}
.txt-small-8 {
    font-size: 0.8em;
}

.txt-mirror {
    display: inline-block;
    -webkit-transform: scale(-1, 1);
            transform: scale(-1, 1);
}

select:required:invalid {
  color: rgba(150,150,150,0.7);
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}



/* --- Farben --- */
.c-gray {
    color: rgba(150,150,150,0.2);
}
.c-gray2 {
    color: rgba(100,100,100,0.9);
}
.c-green {
    color: rgba(40,165,45,0.9);
}
.c-red {
    color: rgba(255,0,0,0.9);
}
.icon:hover {
    text-shadow: 1px 1px rgba(120,120,120,0.3);
}

.btnFilter {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 2px;
    border-color: rgba(220,220,220,1);
    color: rgba(100,100,100,0.9);
    cursor: pointer;
    font-size: 0.9rem;
}
.btnFilter:hover {
    background-color: rgba(200,200,200,1);
    color: rgba(80,80,80,0.9);
}
.btnFilter_noHover {
    border: 1px solid #000;
    border-radius: 5px;
    padding: 2px;
    border-color: rgba(220,220,220,1);
    background-color: rgba(200,200,200,1);
    color: rgba(100,100,100,0.9);
    font-size: 0.9rem;
}

/* --- Hintergrundfarben  --- */
.bg-gray {
    background-color: rgba(240,240,240,1);
    /*#0275d8; /* primary color bootstrap */
}

#pageHeader {
    position: fixed;
    top: 80px;
    z-index: 10;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
   /*border: 1px solid #000;*/
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    /*text-align: center;*/
}

/* --- Conatact --- */
.contact-img-outline {
    position: relative;
    top: 6px;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border: 1px solid #000;
    border-radius: 50%;
    border-color: #0275d8;
    overflow: hidden;
}
.contact-img-outline .bi {
    position: relative;
    top: -16px;
    color: #0275d8;
}
.contact-img-outline img {
    width: auto;
    max-height: 100px;
    position: absolute;
    transform: translateX(-50%);
}
.contact-edit-div {
    /*border: 1px solid #000;*/
    position: absolute;
    top: 6px;
    right: 5px;
}
.contact-edit-div .bi {
    /*color: rgba(100,100,100,0.8);*/
    /*cursor: pointer;*/
}
.contact-edit-div .bi:hover {
    /*color: rgba(80,80,80,1);
    text-shadow: 2px 2px rgba(120,120,120,0.3);*/
}
.contact-anmerkungen {
    /*min-height: 30px;
    height: 60px;*/
}
.card {
    overflow: hidden!important;
}
.card-bg {
    /*background-image: url("../img/lv.jpg");*/
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
    url("../img/lv.jpg");
    background-size: 250px;
    border-bottom: 2px rgba(100,100,100,0.2) solid;
    
}
.card-bg-level2 {
    border-bottom: 2px rgba(50,250,50,0.8) solid;
}
.card-bg-level1 {
    border-bottom: 2px rgba(255,0,0,0.8) solid;
}
.card-mail {
    text-decoration: none;
    color: rgba(100,100,100,1);
}
.card-mail:hover {
    color: rgba(20,20,20,1);
    text-shadow: 2px 2px rgba(120,120,120,0.3);
}
.info-circle {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255,0,0,0.7);
    opacity: 0.8;
    color: #fff;
    border: 1px rgba(200,0,0,1) solid;
    display: flex;
    justify-content: center;
    padding-bottom: 3px;
}
.info-circle span {
    position: relative;
    top: 1px;
    font-size: 0.7rem;
}
.result-output {
    /*text-align: center;*/
    /*padding-top: 5px;*/
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- Forms --- */
.btn-outline-gray {
    border-color: rgba(150,150,150,0.7);
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: rgba(150,150,150,0.7);
            opacity: 1; /* Firefox */
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: rgba(150,150,150,0.7);
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
            color: red;
}
.form-label {
    font-size: 0.7em;
    color: #0275d8;
}
.invalid-feedback {
    padding-left: 3px;
    text-align: left;
    font-size: 0.8em;
    font-weight: bold;
    
    
}
.form-header {
    border: 2px solid rgba(100,100,100,0.9);
    border-radius: 5px;
    background-color: rgba(200,200,200,0.05);
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
}


/* --- Table Visits --- */
/*#table-visits tbody th[scope=row]{
    padding: 0.25rem;
}*/
#table-visits tbody th[scope=row], td{
    padding: 0.25rem!important;
}
.tanmerkung {
    background-color: rgba(0, 255, 130, 0.4)!important;
}
.expandicon {
    width: 22px;
}

.btnEdit, .btnEditVisits, .btnDelete, .btnDeleteVisits {
    cursor: pointer;
    color: rgba(100,100,100,0.8);
}
.btnEdit:hover, .btnEditVisits:hover  {
    color: rgba(80,80,80,1);
    text-shadow: 2px 2px rgba(120,120,120,0.3);
}
.btnDelete:hover, .btnDeleteVisits:hover {
    color: rgba(255,20,20,1);
    text-shadow: 2px 2px rgba(120,120,120,0.3);
}

/* ---------------------- Drag & Drop Upload normale Dateien ---------------- */
#rowUpload input#selectfile {
    display: none;
}
#drag_file_zone {
    background-color:rgba(255, 255, 255, 1);
    border:#b5b5b6 1px dashed;
    width: 100%;
    padding: 8px;
    font-size:18px;
    border-radius: 4px;
    margin-bottom: 10px;;
}
#drag_file_zone.active {
    background-color: rgba(192, 192, 192, 0.2);
    border:#1683ff 1px solid;
}
#drag_upload_file p {
    font-size: 12px;
    color: #a09795;
    margin-bottom: 5px;
}
#drag_upload_file {
    margin: 0 auto;
    cursor: pointer;
}
#drag_upload_file div {
    text-align: center;
}
#drag_upload_file .icon {
    font-size: 30px;
    color: #1683ff;
}
#drag_upload_file button {

}
#rowSelectFile {
    display: flex;
    justify-content: space-between;
    margin: 0px 5px;
    font-size: 15px;
    font-weight: bold;
}
#rowSelectFile i {
    color: #ff2d00;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

#upload-area section .row {
    background: #e9f0ff;
    margin-bottom: 10px!important;
    list-style: none;
    padding: 10px 15px!important;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#upload-area section .row i {
    font-size: 30px;
    color:#6990f2;
}
#upload-area section .details span {
    font-size: 14px;
}
#upload-area .progress-area .row .content {
    width: 95%;
    margin-left: 10px;
}
#upload-area .progress-area .details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#upload-area .progress-area .progress-bar {
    height: 6px;
    background: #fff;
    border-radius:5px;
}
#upload-area .progress-area .progress {
    height: 100%;
    /*width: 50%;*/
    background: #6990f2;
    border-radius: inherit;
}

#upload-area .uploaded-area .row .content {
    display: flex;
    align-items: center;
}
#upload-area .uploaded-area .row .details {
    display: flex;
    margin-left: 30px;
    flex-direction: column;
}
#upload-area .uploaded-area .details .size {
    font-size: 11px;
    color: #404040;
}
#upload-area .uploaded-area .fa-check {
    font-size: 16px;
    color:#6990f2;
}
.upld-error {
    font-size: 14px;
    font-weight: bold;
    color: #ff2d00;
}



/* --- Numpad  --- */
/*#wrapper-pinsystem {
    margin: 0px auto;
    min-height: 40px;
    width: 250px;
    border: 1px solid rgb(255,2555,255);
    opacity: 0.1;
    border-radius: 8px;
    background-color: rgba(250,250,250,0.1);
    overflow: hidden;
    padding: 8px;
}

#wrapper-pin {
    margin-bottom: 10px;
    
   
}
#wrapper-pin input {
    border: none;
    outline: none;
    height: 35px;
    width: 200px;
    font-size: 30px;
    text-align: center;
    border-bottom: 1px solid #000;
    
}
#wrapper-pin input:disabled {
    background-color: #fff;
}

#wrapper-numpad {
    background-color: #f8f8f8;
}
#numpad {
    position: relative;
    left: 15px;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}
#numpad li {
  font-family: monospace;
  font-size: 180%;
  border-radius: 50%;
  float: left;
  padding: 8px 20px;
  background: #000;
  color: #fff;
  margin: 5px;
  cursor: pointer;
  -webkit-transition: box-shadow 0.3s ease-in-out;
  -moz-transition: box-shadow 0.3s ease-in-out;
  -o-transition: box-shadow 0.3s ease-in-out;
  -ms-transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out; 
}
.pressed {
  box-shadow: inset 2px 2px 12px 5px rgba(220,220,220,0.5);
}*/