/* style.css Design für Backend */
 @font-face {
     font-family: 'DM Sans';
     src: url('../fonts/DMSans-Light.woff2') format('woff2');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'DM Sans';
     src: url('../fonts/DMSans-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;f
}
 @font-face {
     font-family: 'DM Sans';
     src: url('../fonts/DMSans-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'DM Sans';
     src: url('../fonts/DMSans-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'DM Sans';
     src: url('../fonts/DMSans-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

 body {
     font-family: 'DM Sans', sans-serif;
     background-color: #fff;
     background-image: linear-gradient(#eaecf7, #eff1f0);
     color: #1d3e5b;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: start;
     min-height: 100vh;
}
.page-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
 a{
     color: #1c5e9a;
}
/*.create-card{
     display: none;
}
*/
/*.edit-fields{
     display: none;
}
*/
 .container{
     background: #ffffff60;
     max-width: 360px;
     width: 90%;
     padding: 22px 30px 30px;
     margin: 20px auto;
     border-radius: 12px;
     border: 2px solid #fff;
     box-shadow: 0 3px 12px -2px rgba(0,0,0,0.1);
}
 .container-table{
     max-width: 900px !important;
     padding: 30px 2rem 40px !important;
}
 h1, h2, h3, h4, h5{
     margin-bottom: 1rem;
     text-align: center;
     color: #1d3e5b;
}
 h1{
     font-size: 1.5rem;
     text-transform: uppercase;
     margin-top: 40px;
}
 h2{
	font-size: 1.2rem;
    text-transform: uppercase;
    color: #1c5e9a;
    margin-bottom: 40px;
}
 h3{
     font-size: 1rem;
     margin-bottom: 7px;
     text-transform: uppercase;
}
 label{
     width: 100%;
     display: block;
     margin: 18px 1px 2px;
     font-size: 0.9rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     color: #7c90a1;
}
 .two-labels label{
     margin: 6px 0px 6px;
}
/*FORM INPUT SELECT FIELDS*/
 form {
     display: flex;
     flex-direction: column;
     gap: 0rem;
}
 input{
     padding: 0.5rem;
     width: 100%;
     margin-bottom: 1rem;
	 color: #1e3e5b;
}
 input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea {
     font-family: 'DM Sans', sans-serif;
     padding: 0.75rem;
     border: 2px solid #cddce9;
     border-radius: 6px;
     font-size: 1rem;
     width: 100%;
     box-sizing: border-box;
     margin: 3px 0px 
}
 input[type="checkbox"]{
     width: auto;
}
 textarea {
     min-height: 110px;
     max-width: 100%;
     max-height: 250px;
	 color: #1e3e5b;
}
 .phone-input input[type="text"]:first-child{
     width: 17%;
}
 .phone-input input[type="text"]:nth-child(2){
     width: 81%;
}
 input[type="number" i]{
     width: 92%;
     padding: 0.8rem;
     border: 1px solid #ccc;
     border-radius: 6px;
}
 input#search_input{
     padding: 10px;
}
 .feldsteuerung input{
     width: auto !important;
}
 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active{
     -webkit-box-shadow: 0 0 0 30px #e6f1ec inset !important;
}
 input:focus, input:-webkit-autofill:focus, textarea:focus, select:focus{
     border: 2px solid #7bb793 !important;
     outline: #7bb793;
}

input::placeholder, textarea::placeholder, select::placeholder{
	color: #93a8b9;
}
 select{
     padding: 0.7rem 2rem 0.7rem 1rem;
     width:100%;
     border: 2px solid #cddce9;
     border-radius: 6px;
     font-size: 1rem;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-color: #fff !important;
     background-image: url("data:image/svg+xml charset=UTF-8,%3Csvg fill='%23333' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 0.75rem center;
     background-size: 1rem;
	 margin: 3px 0px;
	 color: #1e3e5b;
}
 .feldsteuerung select{
     margin-top:0px !important;
}
/*Dashboard Nav*/

.dashboard-company{
	color:#1c5e9a;
	margin: 0 auto;
    text-align: center;
	font-size: 1.3rem;
}

 nav {
     font-family: "DM Sans", sans-serif;
}
 nav ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 nav li {
     margin: 0;
}
 nav a {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background-color: #f4f5f9;
     color: #1c5e9a;
     border: 2px solid #cddce9;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 700;
     line-height: 1rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
     width: 90%;
     padding: 0.8em 1em;
     margin-top: 10px;
     cursor: pointer;
     transition: 0.3s ease;
}
 nav .icon {
     flex-shrink: 0;
}
 nav a:hover {
     background-color: #f1f3f2;
     color: #358258;
     border: 2px solid #c1d2ca;
}
i.bi-eye{
    line-height: 2em !important;
}
 .logout{
     color: #d6322f;
     font-size: 0.9rem;
     font-weight: 700;
     text-transform: uppercase;
     text-align: center;
     display: block;
     margin-top: 20px;
     text-decoration: none;
     letter-spacing: 0.2px;
}
 .top-header h1{
     font-size: 1.8rem;
     text-transform: none;
     font-weight: 500;
     margin: 0px;
     color: #5b7c99;
}
 .top-header p{
     font-size: 1.2rem;
     text-align: center;
     margin-top: -10px;
     font-weight: 400;
}
 .top-header .info{
     text-align: center;
     margin-bottom: 20px;
     color: #cf3636;
     background: #f3ecec;
     padding: 7px 9px;
     border: 2px solid #ebd3d3;
}
 .socialmedia-section{
     margin-top: 30px;
}
 .socialmedia-section h2{
     font-size: 1.1rem;
}
 .fullwidth-controls{
     max-width: calc(360px + 4rem);
     width: 90%;
     margin: 0 auto;
}
 .btn{
     background-color: #1b5e99;
     color: #ffffff;
     border: 2px solid #1b5e99;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 600;
     line-height: 1rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
     width: 100%;
     padding: 0.8em 1em;
     margin-top: 10px;
     cursor: pointer;
     transition: 0.3s ease;
}
 .btn:hover {
     background-color: #5B7C99;
}
 .btn-blue{
     background-color: #eaecf7;
     color: #1b5e9a;
     border: 2px solid #cddce9;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 600;
     line-height: 1rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
     width: calc(100% - 2rem);
     padding: 0.7em 1em;
     margin-top: 10px;
     cursor: pointer;
     transition: 0.3s ease;
     display: block;
}
 .btn-blue:hover {
     background-color: #ecf2ef96;
	 color: #358258;
	 border: 2px solid #c1d2ca;
}

 .btn-darkblue{
     background-color: #1b5e99;
     color: #fff;
     border: 2px solid #1b5e99;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 600;
     line-height: 1rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
     width: 100%;
     padding: 0.65em 1em;
     margin-top: 10px;
     cursor: pointer;
     transition: 0.3s ease;
     display: block;
}
 .btn-darkblue:hover {
     background-color: #67a57b;
	 border: 2px solid #67a57b;
	 text-decoration: none !important;
     text-decoration-color: #67a57c;
}
 .btn-red{
     background-color: #f0d8d8;
     color: #ce3636;
     border: 2px solid #cf363629;
     border-radius: 6px;
     font-size: 0.8rem;
     font-weight: 600;
     line-height: 1rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     text-align: center;
     width: calc(100% - 2rem);
     padding: 0.7em 1em;
     margin-top: 10px;
     cursor: pointer;
     transition: 0.3s ease;
     display: block;
}
 .btn-red:hover {
     background-color: #eac9c9;
}
 .btn-edit{
     padding: 0.7rem 3.3rem;
     border-radius: 6px;
     margin-bottom: 1rem;
     text-align: center;
     background-color: #1b5e99;
     color: #fff;
     border: 2px solid #1b5e99;
     text-decoration: none;
     width: 300px;
     cursor: pointer;
     transition: 0.3s ease;
}
 .btn-edit:hover{
     background-color: #67a57b;
	 color: #fff;
	 border: 2px solid #67a57b;
}

 .btn-top{
     display: flex;
     justify-content: space-between;
     align-items: center;
     column-gap: 10px;
     max-width: calc(360px + 4rem);
     width: 90%;
     margin: 0 auto 20px;
}
 .btn-full{
     width: 100% !important;
}
 .custom-file-upload{
     background-color: #d9dee8;
     color: #1b5e9a;
     border: 2px solid #1c5e9a1f;
     border-radius: 6px;
     padding: 0.55em 1em;
     font-size: 0.8rem;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     transition: 0.3s ease;
     width: 100%;
     margin-top: 14px;
}
 .custom-file-upload:hover{
     background-color: #c4cfe4;
}
 .custom-file-upload input[type="file"] {
     display: none;
}
 .btn-flex{
     display: flex;
     justify-content: space-between;
     align-items: center;
     column-gap: 10px;
}

.meldung{
	max-width: 360px;
	margin: 0 auto;
}

 p.success {
     background: #e0ebe6;
     color: #358258;
     padding: 1rem;
     border-radius: 6px;
     margin-bottom: 1rem;
     text-align: center;
}
 .form-errors p{
     background: #f2dede;
     color: #a94442 !important;
     padding: 1rem;
     border-radius: 6px;
     margin-bottom: 1rem;
     text-align: center;
}
 p.error, p.error-message {
     background: #f2dede;
     color: #a94442;
     padding: 1rem;
     border-radius: 6px;
     margin-bottom: 1rem;
     text-align: center;
}
 hr{
     border-top: 1px solid #cddce9;
     margin-top: 30px;
     width: 100% !important;
}
 .image-upload-preview {
     margin-bottom: 1rem;
}
 .image-upload-preview img {
     max-width: 120px;
     height: auto;
     display: block;
     margin-bottom: 0.5rem;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
     background: #f6f6f6;
}
 #cropperModal, .cropper-content, .cropper-container, .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop .cropper-modal, .cropper-crop-box{
     margin-top: 0px !important;
}
 .cropper-container {
     max-width: 100%;
}
 #cropperModal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0,0,0,0.5);
     justify-content: center;
     align-items: center;
     z-index: 9999;
     flex-direction: column;
}
 .cropper-content{
     background: #fff;
     padding: 1rem;
     border-radius: 8px;
     max-width: 80vw;
}
 .filter-controls {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-bottom: 30px;
     align-items: flex-end;
}
 .filter-group {
     display: flex;
     flex-direction: column;
     flex: 1 1;
     min-width: 200px;
}
 @media (max-width: 768px) {
     .filter-controls {
         flex-direction: column;
    }
     .filter-group {
         width: 100%;
    }
}
/*table*/
 table {
     width: 100%;
     border-collapse: collapse;
     font-family: 'DM Sans', sans-serif;
     background-color: #ffffff30;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid #fff;
	 outline: 2px solid #ffffff;
}
 thead {
     background-color: #eaecf7;
     color: #333;
     text-align: left;
}
 tr, th{
     border: 1px solid #fff;
}
 tr{
     border-bottom: 3px solid #fff;
}

 tr:last-child{
     border-bottom: 0px;
}
 thead th {
     padding: 1rem;
     font-weight: 600;
     font-size: 0.95rem;
     border: 2px solid transparent;
     color: #1e3e5b;
	 text-transform: uppercase;
}
 tbody td {
     padding: 0.85rem 1rem;
     border: 2px solid transparent;
     font-size: 0.95rem;
     color: #1e3e5b;
}
 tbody tr:hover {
     background-color: #f9fafb;
}
 code {
     background-color: #eef0f4;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 0.85rem;
     font-family: monospace;
     color: #0057b8;
}
 td a {
     color: #0057b8;
     text-decoration: none;
     font-weight: 500;
}
 td.table-btn a{
     text-decoration: none;
     font-weight: 600;
     padding: 4px 8px;
     border-radius: 4px;
     margin: 0px 0px 4px;
     display: inline-block;
     transition: 0.3s;
	 font-size: 0.9rem;
}
 td.table-btn a.table-btn-view{
    background: #e0e4f0;
    color: #1c5e9a;
}
 td.table-btn a.table-btn-view:hover{
     background: #ccd2e4;
     color: #1c5e9a;
     text-decoration: none;
}
 td.table-btn a.table-btn-edit{
     background: #e0ebe6;
     color: #358257;
}
 td.table-btn a.table-btn-edit:hover{
     background: #c4ddd2;
     color: #358257;
     text-decoration: none;
}
 td.table-btn a.table-btn-settings{
     background: #e6e6e6;
     color: #62666a;
}
 td.table-btn a.table-btn-settings:hover{
     background: #dad8d8;
     color: #62666a;
     text-decoration: none;
}
 td.table-btn a.table-btn-delete{
     background: #efdcdd;
     color: #bc2c29;
}
 td.table-btn a.table-btn-delete:hover{
     background: #e7cbcc;
     color: #bc2c29;
     text-decoration: none;
}
 td a:hover {
     text-decoration: underline;
}
 td .actions a {
     margin-right: 0.5rem;
}
td svg{
	position: relative;
	top: 5px;
}
/* === Mobile-Ansicht === */
 @media (max-width: 786px) {
     thead {
         display: none;
    }
     table, tbody, tr, td {
         display: block;
         border-color: transparent;
		 outline: 0;
		 box-shadow: none;
    }
     tbody td {
         border: 1px solid #fff;
		 font-weight: 600;
		 font-size: 1rem;
    }
     tr {
         border: 2px solid #fff;
         border-radius: 6px;
         overflow: hidden;
         box-shadow: 0 1px 4px rgba(0,0,0,0.03);
		 margin-bottom: 20px;
    }
     td {
         padding: 0.75rem 1rem;
         text-align: left;
         border-bottom: none;
         position: relative;
    }
     td::before {
         content: attr(data-label);
         display: block;
         font-weight: bold;
         font-size: 0.85rem;
         color: #93a8b9;
         margin-bottom: 0.25rem;
		 text-transform: uppercase;
        letter-spacing: 0.2px;
    }
	 td:first-child {
		 border-radius: 4px 4px 0px 0px;
    }
     td:last-child {
         text-align: left;
		 border-radius: 0px 0px 4px 4px;
    }
     td.table-btn a.table-btn-view, td.table-btn a.table-btn-edit, td.table-btn a.table-btn-settings, td.table-btn a.table-btn-delete{
         width: 41%;
         text-align: center;
    }
}
table.carduser-table {
     width: 100%;
     border-collapse: collapse;
     font-family: 'DM Sans', sans-serif;
     background-color: #ffffff30;
     overflow: hidden;
	 box-shadow: none !important;
	 border: 0px !important;
	 outline: 0px !important;
}
.carduser-table thead {
	 display: none !important;
}
.carduser-table table, .carduser-table tbody, .carduser-table tr, .carduser-table td {
	display: block;
  	border-color: transparent;
	outline: 0;
	box-shadow: none;
}
.carduser-table tbody td {
	border: 1px solid #fff;
	font-weight: 600;
	font-size: 1rem;
}
.carduser-table tr {
	border: 2px solid #fff;
 	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.03);
	margin-bottom: 20px;
}
.carduser-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: none;
	position: relative;
}
.carduser-table td::before {
	content: attr(data-label);
	display: block;
	font-weight: bold;
	font-size: 0.85rem;
	color: #93a8b9;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.2px;
}
.carduser-table td:first-child {
	border-radius: 4px 4px 0px 0px;
}
.carduser-table td:last-child {
	text-align: left;
	border-radius: 0px 0px 4px 4px;
}
.carduser-table td.table-btn a.table-btn-view, .carduser-table td.table-btn a.table-btn-edit, .carduser-table td.table-btn a.table-btn-settings, .carduser-table td.table-btn a.table-btn-delete{
	width: 41%;
	text-align: center;
}
 .message-bottom{
     color: #358259;
     text-transform: uppercase;
     font-size: 0.8rem;
     letter-spacing: 0.5px;
     font-weight: 500;
     text-align: center;
     line-height: 1.2rem;
	 margin-bottom: 40px;
}
 .footer{
     color: #358257;
     padding: 20px 2rem 30px;
     font-size: 0.85rem;
     border-top: 1px solid #dce3ea;
     font-weight: 600;
     text-transform: uppercase;
     width: 90%;
     margin: auto auto 0px 
}
 .footer-text{
     display: flex;
     justify-content:space-between;
     align-items: center;
     flex-wrap: wrap;
}
 @media (max-width: 500px) {
     body {
         min-height: 90vh;
    }
     .container{
         padding: 1.5rem;
         width: 80%;
    }
	 .container-table{
	 	width: 76%;
	 }
     .btn-top{
         width: 90%;
    }
	 .btn, .btn-blue, .btn-darkblue, .btn-red{
	 	font-size: 0.8rem;
     	padding: 0.7em 0.5em;
		 width: 100% !important;
	 }
	 .fullwidth-controls .btn, .fullwidth-controls .btn-blue, .fullwidth-controls .btn-darkblue, .fullwidth-controls .btn-red{
		width: 95% !important;
	 }
	 .editor-btn-top .btn-darkblue{
	 	width: 100% !important;
	 }
     h1, h2 {
         font-size: 1.3rem;
    }
     .top-header h1{
         font-size: 1.8rem;
    }
     button {
         font-size: 0.95rem;
    }
	 footer{
	 	width: 85% !important;
	 }
}

/*Custom Allianz*/

fieldset{
    border: 2px solid #cddce9;
    border-radius: 6px;
	margin: 15px 0px 25px;
}

legend{
	font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #7c90a1;
}

fieldset label{
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 2rem;
    color: #1e3e5b;
    text-transform: none;
	margin: 5px 1px 2px !important;
}