/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=63v0i0kwrAU4It8jwvzNZsjZJm5 */

/* Feel free to copy&paste color codes to your application */
/* Test */

/* As hex codes */

.color-primary-0 { color: #0A71B4 }	/* Main Primary color */
.color-primary-1 { color: #808C94 }
.color-primary-blue {
    background-color: #457CA1;
    }
.color-primary-3 {
    background-color: #035990
}
.color-primary-4 {
    background-color: white;
    border-top: 2px solid #222324; /* Top border */
}

.color-primary-footer-4 {
    background-color: white;
    border-top: 2px solid #222324; /* Top border */
}


.color-secondary-1-0 { color: #00B395 }	/* Main Secondary color (1) */
.color-secondary-1-1 { color: #7D938F }
.color-secondary-1-2 { color: #3E9F8F }
.color-secondary-1-3 { color: #008F77 }
.color-secondary-1-4 { color: #00705D }

.color-secondary-2-0 { color: #1443BB }	/* Main Secondary color (2) */
.color-secondary-2-1 { color: #878D9C }
.color-secondary-2-2 { color: #4D67A9 }
.color-secondary-2-3 { color: #073097 }
.color-secondary-2-4 { color: #012276 }

.color-complement-0 { color: #FF8E00 }	/* Main Complement color */
.color-complement-1 { color: #E8D9C6 }
.color-complement-2 { color: #FBB862 }
.color-complement-3 { color: #E27E00 }
.color-complement-4 { color: #B06200 }

/* As RGBa codes */

.rgba-primary-0 { color: rgba( 10,113,180,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba(128,140,148,1) }
.rgba-primary-2 { color: rgba( 69,124,161,1) }
.rgba-primary-3 { color: rgba(  3, 89,144,1) }
.rgba-primary-4 { color: rgba(  0, 68,113,1) }

.rgba-secondary-1-0 { color: rgba(  0,179,149,1) }	/* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba(125,147,143,1) }
.rgba-secondary-1-2 { color: rgba( 62,159,143,1) }
.rgba-secondary-1-3 { color: rgba(  0,143,119,1) }
.rgba-secondary-1-4 { color: rgba(  0,112, 93,1) }

.rgba-secondary-2-0 { color: rgba( 20, 67,187,1) }	/* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba(135,141,156,1) }
.rgba-secondary-2-2 { color: rgba( 77,103,169,1) }
.rgba-secondary-2-3 { color: rgba(  7, 48,151,1) }
.rgba-secondary-2-4 { color: rgba(  1, 34,118,1) }

.rgba-complement-0 { color: rgba(255,142,  0,1) }	/* Main Complement color */
.rgba-complement-1 { color: rgba(232,217,198,1) }
.rgba-complement-2 { color: rgba(251,184, 98,1) }
.rgba-complement-3 { color: rgba(226,126,  0,1) }
.rgba-complement-4 { color: rgba(176, 98,  0,1) }

.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Hier kannst du die Schatten-Eigenschaften anpassen */
}

/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */



/* Header Buttons */
.header-button {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

.header-button:hover {
    background-color: red;
    color: white

}.header-button-blue {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

.header-button-blue:hover {
    background-color: blue;
    color: white
}

.custom-dropzone.dropzone {
border: 2px dashed #666666;
background-color: #f2f2f2;
border-radius: 8px;
}

.custom-dropzone.dropzone.dragover {
background-color: rgba(69, 124, 161, 0.5);
border: 3px solid #666666;
}

.custom-dropzone.dropzone:hover {
background-color: rgba(69, 124, 161, 0.5);
}

.image-container {
  width: 160px; /* Hier kannst du die gewünschte Fläche festlegen */
  height: 160px; /* Hier kannst du die gewünschte Fläche festlegen */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}

.image-container-card {
  width: 100px; /* Hier kannst du die gewünschte Fläche festlegen */
  height: 100px; /* Hier kannst du die gewünschte Fläche festlegen */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container-card img {
  max-width: 100%;
  max-height: 100%;
}

/* Die Vorschau des Bildes */
.dz-preview .dz-image {
  width: 200px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Das Bild innerhalb der Vorschau */
.dz-preview .dz-image img {
  width: 200px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dropzone .dz-preview {
  position: relative;
}

.dropzone .dz-filename {
  position: absolute;
  bottom: -20px; /* Adjust the value to set the vertical position */
  left: 0;
  width: 100%;
  text-align: center;
}

.no-boarder {
  border: none;
}

.monochrome-icon {
  fill: green;
  height: 55px;
  width: 55px;
  background-color: white;
  border-radius: 25%;
  /* Set the initial color of the icon (e.g., white) */
}

/* Optional: Change the color on hover */
.monochrome-icon:hover {
  /* Set the color on hover (e.g., green) */
  fill: white;
  background-color: green;
}

.monochrome-icon-save {
  fill: green;
  height: 50px;
  width: 50px;
  background-color: white;
  border-radius: 5%;
  /* Set the initial color of the icon (e.g., white) */
}

/* Optional: Change the color on hover */
.monochrome-icon-save:hover {
  /* Set the color on hover (e.g., green) */
  fill: white;
  background-color: green;
}

.orange-border {
  border: 2px solid orange;
}

.form-check-size {
width: 40px;
height: 40px;
}

.custom-card {
    display: inline-block;
    border-radius: 5%;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin: 5px;
    font-size: smaller;
}

.custom-margin-hr {
    margin-top: -5px;
    margin-bottom: 10px;
}

.company-card {
    box-sizing: border-box;
}

.company-card:hover {
    border: 1.5px solid;
    border-color: #457CA1;
}


/* Mobile view */
@media (max-width: 576px) {
    .text-sm {
        font-size: 16px;
    }
    .text-sm-2 {
        font-size: 16px;
    }
    .text-sm-3 {
        font-size: 14px;
    }
}

/* Tablet view */
@media (min-width: 577px) and (max-width: 768px) {
    .text-md {
        font-size: 24px;
    }
    .text-md-2{
        font-size: 18px;
    }
}

/* Desktop view */
@media (min-width: 769px) {
    .text-lg {
        font-size: 30px;
    }
    .text-lg-2 {
        font-size: 20px;
    }
}

.color-control {
  filter: brightness(1.1) contrast(1.1) saturate(0.55);
}

.newsletter-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.newsletter-form {
  flex: 1;
  padding: 20px;
}
.newsletter-form label {
  font-weight: bold;
  margin-top: 10px;
}
.newsletter-button {
  background-color: #d9534f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 15px;
  text-align: center;
  width: 50%;
}
.newsletter-button:hover {
  background-color: #FF0000;
}