/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
@import"//fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";
html {
    line-height: 1.15;
    -webkit-text-size-adjust:100%
}
.navbar-static-top.navbar {
    background:white;
    border-bottom: 1mm solid #E90D45
    
}

.navbar-inverse .navbar-nav > li > a {
    color: black
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
    color: black
}

.navbar-toggle {
    background-color: #E90D45;
    
}

.navbar-inverse .navbar-nav > li > a:hover {
    color: #E90D45;
    background-color: white;
    border-bottom:#E90D45;
    padding-bottom: 10px

}

.section-diagonal-right .section-diagonal-right-content:before {
    background-color: #590d1f;
    opacity: 1.0;
    }

.section-diagonal-right {
   margin-bottom: -60px;
}

.btn-default {
    color: #E90D45;
    border-color:#666;
    height: 38px;
}

.btn-default:hover {
    color: #E90D45;
    border-color:#666;
    height: 38px;
}


.form-control {
  height: 38px;
  
}

.input-group-btn {
  border-color:#666;
  
}

input.form-control {
  margin-right:3px;
    
}

.input-group .form-control {
  margin-right:3px;
    
}

.btn-primary:hover {
  background-color: #232222;
  border:none
}

.btn-primary {
  background-color: #E90D45;
  border:none
}

.btn-cancel {
  background-color: #E90D45;
  color:white;
  border:none;
  height: 33.421875px;
}

.btn-cancel:hover {
  background-color: #232222;
  border:none;
  height: 33.421875px;
  color:white
}

.dropdown:active {
  color: #E90D45;
  background:#E90D45
}

.dropdown:open {
  color: #E90D45;
  background:#E90D45
}

.dropdown:checked {
  color: #E90D45;
  background:#E90D45
}

.dropdown:current {
  color: #E90D45;
  background:#E90D45
}

.homelink {
  color:black
}

.section-landing {
  background-image: url("/backgroundlogo.jpg");
  background-position: right;
  background-size: 900px;
  background-repeat:no-repeat;
  color:#232222
}

.section-landing .row > div .section-landing-sub-heading {
  color: #232222;
}

.section-landing .row > div .section-landing-heading {
  color: #232222;
}

footer .footer-top {
  background-color: #590d1f;
  min-height: 12px
}

footer .footer-bottom {
  background-color: #590d1f;
  min-height: 12px
}


.filter-container {
  margin-bottom: -5px;
  text-align: right; /* Aligns the filter to the right */
}

#category-filter {
  padding: 5px;
  font-size: 16px;
}

#save-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#save-button:hover {
  background-color: #45a049;
}

.image-checkbox {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  transform: scale(1.5);
  background-color: #fff;
  border: 2px solid #4CAF50;
  border-radius: 5px;
}

.image-checkbox:checked {
  background-color: #4CAF50;
}

.szenarienkatalog-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.szenarienkatalog-gallery-item {
  flex: 1 1 calc(50% - 10px); /* Two images per row */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #ccc; /* 1px border around images */
  background-color: #f0f0f0; /* Grey background */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px; /* Fixed width for the images */
  height: 300px; /* Fixed height for the images */
}

.szenarienkatalog-gallery-item img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease;
  object-fit: contain; /* Ensure the entire image is visible */
}


.szenarienkatalog-gallery-item.enlarged {
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  display: flex; /* Ensure display is flex for centering */
  flex-direction: column; /* Ensure direction is column for centering */
  position: fixed; /* Fix position to center it */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust position to center */
  z-index: 1000; /* Ensure it is on top */
  background-color: rgba(0,0,0,0.8); /* Add background color for better visibility */
  padding: 20px; /* Add padding for better visibility */
  border-radius: 10px; /* Add border radius for better visibility */
  width: 80%; /* Increase width when enlarged */
  height: 80%; /* Increase height when enlarged */
}


.enlarge-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  color: white;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #E90D45;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.szenarienkatalog-description-container {
  position: absolute;
  top: 10px; /* Description on top of the images */
  left: 10px;
  display: flex;
  align-items: center;
  z-index: 1; /* Ensure description is behind the image */
  transition: top 0.3s ease, left 0.3s ease, z-index 0.3s ease; /* Add transition for smooth movement */
}

.szenarienkatalog-description {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px; /* Increased padding */
  border-radius: 3px;
  margin-right: -15px; /* Slight overlap with the star */
}

.favourite-icon {
  color: gold; /* Golden color for the star */
  font-size: 24px; /* Size of the star */
  margin-left: 10px; /* Space between description and icon */
  position: relative;
  top: -15px; /* Move the star icon higher up */
}


.szenarienkatalog-gallery-item.enlarged .szenarienkatalog-description-container {
  z-index: 20; /* Ensure description and icon are in front of the image when enlarged */
}


.szenarienkatalog-category {
  position: absolute;
  bottom: 0; /* Position at the bottom */
  left: 10px; /* Position at the left */
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 3px;
  font-size: 12px; /* Smaller font size */
  z-index: 1; /* Ensure category is behind the image */
  transition: bottom 0.3s ease, left 0.3s ease, z-index 0.3s ease; /* Add transition for smooth movement */
}



/* FROM HERE ONLY FOR ONBOARDING */


/* For the lanugage selection */
.language-selection {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  /* allows the items to wrap if there's not enough space */
  margin-bottom: 20px;
}

.checkbox-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-basis: 20%;
  /* gives a base width to each checkbox group */
}

.language-label {
  margin-left: 8px;
  /* adds space between the checkbox and the label text */
  white-space: normal;
  /* allows the text to wrap */
  font-size: 0.9em;
  /* adjust font size as necessary */
  margin-top: 10px;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
  .language-selection {
      flex-direction: column;
      /* stack them on smaller screens */
  }

  .checkbox-group {
      margin-bottom: 10px;
      /* add some space between rows */
  }
}

label {
  color: #E90D45;
}

/* Additional CSS for the contenteditable div */
#theia_customerannotation {
  width: 100%;
  min-height: 150px;
  /* Adjust the height as needed */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-y: auto;
  /* Add a scrollbar when content exceeds the height */
}

#theia_link_clicked_only_sender {
  display: none;
}

/* End NZI CSS */


.btn-onboard {
  padding: 10px 12px; /* Reduced padding for smaller buttons */
  margin: 10px;
  border: none;
  border-radius: 30px; /* Slightly less rounded corners */
  color: black;
  font-size: 14px; /* Reduced font size */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Increased shadow for a cooler effect */
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn-green {
  background-color: #4CAF50; /* Slightly brighter green */
  color: white;
}

.btn-dark-gray {
  background-color: #333333; /* Darker gray */
  color: white;
}

.btn-group-onboard .btn-onboard:hover {
  transform: scale(1.1);
  color:#E90D45;
}

.btn-onboard:hover, .btn-onboard:focus, .btn-onboard.focus {
    color:#E90D45;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover/focus */
}

/* Additional styling for green buttons, if necessary */
.btn-group-onboard .btn-onboard.btn-green:hover {
  color: #e6e6e6; /* Light gray or soft white */
  text-decoration: none;
}

.btn-group-onboard .btn-onboard:focus,
.btn-group-onboard .btn-onboard:active {
  color: white; /* Or any color you prefer */
  outline: none; /* Removes the default focus outline */
  box-shadow: none; /* Removes any default focus shadow, if present */
}

.btn-save {
  display: inline-block;
  background-color: #4CAF50; /* Teal color, you can adjust this to better match your form */
  color: white;
  padding: 8px 16px; /* Reduced padding for smaller buttons */
  border: none;
  border-radius: 4px;
  font-size: 14px; /* Reduced font size */
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); /* Enhanced shadow for a cooler effect */
}

.btn-save:hover,
.btn-save:focus {
  color: white;
  background-color: #45a049; /* A slightly darker shade for hover effect */
}

.btn-onboard .bnt-default {
    color:white;
    background-color:#50a050;
    text-decoration:none
}


.step-buttons {
  margin-bottom: 20px;
}

.step-content {
  display: none;
}

.step-content .form-control {
  margin-bottom: 10px;
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
  
}

.form-control .onboarding-input {
  margin-bottom: 10px;
  border: 2px solid #ccc;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
  width:500px;
  color:black;
  vertical-align: center;  
}

/*Loading spinner*/
.loader-container {
  text-align: center;
  /* Centers the content horizontally */
  padding: 20px 0;
  /* Adjust padding as needed */
}


#loader {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

#loader:before,
#loader:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #E90D45;
}

#loader:before {
  z-index: 100;
  animation: spin 1s infinite;
}

#loader:after {
  border: 10px solid #ccc;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}