/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root {
  --crm-main-font-family: "CRM Argo";
  --crm-font-size-base: 14px;
  --crm-font-size-medium: 14px;
  --crm-font-size-bigger: 20px;

  --crm-search-result-padding-vertical: 30px;
  --crm-search-result-padding-sides: 20px;

  --crm-thieme-dunkelblau: #013476;
  --crm-thieme-white: #fff;

  --crm-sky-01: #edf7fd;
  --crm-sky-02: #d4e2ea;
  --crm-sky-03: #82adc5;
  --crm-sky-04: #59718b;
  --crm-new-blue: #a3d8f6;
  --crm-new-blue-25: #a3d8f640;
  --crm-thieme-text-default: #1a1c1e;
  --crm-thieme-text-50-percent-trans: #1a1c1e80;

  --crm-text-dark-01: #222222;
  --crm-text-dark-02: #666666;
}

/*
h2, h3 {
    font-family: var(--crm-main-font-family);
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    line-height: 44px;
    color: var(--crm-thieme-dunkelblau);
    
}
*/
select {
  background: url("data:image/jpeg;base64,/9j/2wCEABoZGSccJz4lJT5CLy8vQkc9Ozs9R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHCcnMyYzPSYmPUc9Mj1HR0dEREdHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//dAAQAAv/uAA5BZG9iZQBkwAAAAAH/wAARCAAKABIDACIAAREBAhEB/8QAXQAAAgMAAAAAAAAAAAAAAAAAAAEDBAUBAQAAAAAAAAAAAAAAAAAAAAAQAAECBQMFAAAAAAAAAAAAAAEAAgMEEhNRETFBISJCcfARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwAAARECEQA/AN6avU1QNKm9aT5DGvBwfhDKxY0w644WoWzWOHeTyTgYHO/u+UkDQhCD/9k=")
    no-repeat right 8px center;

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

div.crm-select-input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 0px 0px 0px;
  gap: 8px;

  width: 459px;
  height: 125px;
}

label.crm-select-input-label {
  display: block;
  /* THI/L/p/small */
  font-family: var(--crm-main-font-family);
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 8px;
  color: var(--crm-thieme-text-default);
}

.crm-input {
  box-sizing: border-box;
  text-align: left;
  padding: 6px 16px 6px 16px;


  width: 100%;
  max-width: 90vw;
  height: 60px;

  background-color: white;

  border: 1px solid var(--crm-thieme-dunkelblau);

  font-family: var(--crm-main-font-family);
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  /* identical to box height, or 156% */

  /* THI/text-50%trans */
  color: var(--crm-thieme-text-50-percent-trans);
}

.crm-primary-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  margin: 0;

  height: 60px;

  background: var(--crm-thieme-dunkelblau);
  border-radius: 2px;
  cursor: pointer;

  font-size: 18px;
  line-height: 28px;
  color: white;
}

a.crm-no-underline {
  text-decoration: none;
  color: var(--crm-thieme-dunkelblau) !important;
  
}

hr {
  margin-top: 32px;
  margin-bottom: 32px;

  border-top: 1px solid #a3d8f6;
  border-bottom: 1px solid #a3d8f6;
}

.crm-flex-bottom {
  display: flex;
  align-items: end;
}

.crm-checkbox-label-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.crm-select-input-container-wrapper {
  border: 1px solid black;
}

.crm-input.crm-input-borderless {
  border: none;
}

.crm-input-caret {
  background: url(../../assets/down.svg) no-repeat right 20px center;
}

/* CRM Input Checkbox */
.crm-shortcode-section input[type="checkbox"] {
  -moz-appearance: none !important;
  -o-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--form-background);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 28px;
  height: 28px;
  border: 1px solid var(--crm-thieme-dunkelblau);
  border-radius: 0px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.crm-shortcode-section input[type="checkbox"]::before {
  content: "";
  width: 20px;
  height: 20px;
  clip-path: polygon(
    8% 0%,
    0% 8%,
    42% 50%,
    0% 92%,
    8% 100%,
    50% 58%,
    92% 100%,
    100% 92%,
    58% 50%,
    100% 8%,
    92% 0%,
    50% 42%
  );
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: var(--crm-thieme-dunkelblau);
  color: var(--crm-thieme-dunkelblau);
}

.crm-shortcode-section input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.crm-shortcode-section input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid var(--crm-new-blue);
  outline-offset: max(2px, 0.15em);
}



.crm-shortcode-section input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.crm-icon.crm-icon-close {
  content: "";
  width: 20px;
  height: 20px;
  clip-path: polygon(
    8% 0%,
    0% 8%,
    42% 50%,
    0% 92%,
    8% 100%,
    50% 58%,
    92% 100%,
    100% 92%,
    58% 50%,
    100% 8%,
    92% 0%,
    50% 42%
  );

  /* Windows High Contrast Mode */
  background-color: var(--crm-thieme-dunkelblau);
  color: var(--crm-thieme-dunkelblau);
}

@media screen and (max-width: 1400px) {
  div.crm-select-input-container-wrapper {

    width: 90vw;
    max-width: 460px;
  }
  .crm-input {
    width: 100%;
    max-width: 460px
  }
}

@media screen and (max-width: 700px) {
  button.crm-input,
  input.crm-input {
    width: 90vw;
    max-width: 460px;
  }
}