/* ============================================================
                     BUTTONS + ICONS
   ============================================================ */

/*ToDo: Btn's(Farben) die nicht benötigt werden bearbeiten, mit Laura? (Abgestimmt mit Azure)*/



/*BUTTONS*/
.btn-list {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border: none;
  height: 30px !important;
  width: 100% !important;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

  .btn-list:hover {
    color: var(--softtec-dark-blue) !important;
    background-color: var(--softtec-light-blue2) !important;
    cursor: pointer;
    border-radius: 8px !important;
  }

.btn-white {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border-color: var(--softtec-medium-blue1);
  height: 30px;
}

.btn-transparent {
  background: transparent;
  color: var(--softtec-medium-blue1);
}

.btn-white:not(:disabled):not(.disabled):hover,
.btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active, .show > .btn-white.dropdown-toggle {
  color: #fff;
  background-color: var(--softtec-medium-blue1);
  border-color: var(--softtec-medium-blue1);
}

.btn-white-nohover {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border-color: var(--softtec-white);
}

.btn-white-shadow, .btn-white-shadow-active, .btn-white-shadow:hover {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border-radius: 8px !important;
}

.card-body .btn-white-shadow:hover {
  box-shadow: unset !important;
}

.show > .btn-white-shadow.dropdown-toggle {
  box-shadow: 0 0 2px 2px var(--softtec-light-blue-shadow);
}

.btn-white-shadow-active {
  box-shadow: 0 0 2px 2px var(--softtec-light-blue-shadow) !important;
}

.btn-white-nohover {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border-color: var(--softtec-white);
}

.btn-greywhite {
  color: var(--softtec-dark-blue);
  background-color: var(--softtec-grey);
}

  .btn-greywhite:hover {
    background-color: var(--softtec-dark-blue);
    color: var(--softtec-white);
  }

  .btn-greywhite.focus, .btn-greywhite:focus {
    background-color: var(--softtec-dark-blue);
    color: var(--softtec-white);
  }

  .btn-greywhite:not(:disabled):not(.disabled).active, .btn-greywhite:not(:disabled):not(.disabled):active, .show > .btn-greywhite.dropdown-toggle {
    color: var(--softtec-dark-blue);
    background-color: var(--softtec-grey);
  }

.btn-white-lightblue {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
}

  .btn-white-lightblue:hover {
    color: var(--softtec-medium-blue1);
    background-color: var(--softtec-light-blue1);
  }

  .btn-white-lightblue:not(:disabled):not(.disabled).active, .btn-white-lightblue:not(:disabled):not(.disabled):active {
    background-color: var(--softtec-light-blue1);
    border-color: var(--softtec-medium-blue1);
  }

.btn-blue {
  background-color: var(--softtec-dark-blue);
  color: var(--softtec-white);
}

  .btn-blue span.k-icon {
    color: var(--softtec-white);
  }

  .btn-blue:not(:disabled):hover {
    color: var(--softtec-white);
    background-color: var(--softtec-medium-blue1);
  }

  .btn-blue:not(:disabled):not(.disabled).active, .btn-blue:not(:disabled):not(.disabled):active, .show > .btn-blue.dropdown-toggle {
    color: var(--softtec-white);
    background-color: var(--softtec-dark-blue);
  }

.btn-lightblue {
  background-color: var(--softtec-medium-blue1);
  color: var(--softtec-white) !important;
  transition: all 0.2s;
}

  .btn-lightblue:not(:disabled):hover {
    color: var(--softtec-white);
    background-color: var(--softtec-dark-blue);
  }

  .btn-lightblue:not(:disabled):not(.disabled).active, .btn-lightblue:not(:disabled):not(.disabled):active, .show > .btn-lightblue.dropdown-toggle {
    color: var(--softtec-white);
    background-color: var(--softtec-medium-blue1);
  }

/*TODO: Die Farbcodes gibt es nur hier, global anderes Lightgreen angegeben?*/
.btn-lightgreen {
  background-color: #559784;
  border-color: #559784;
  color: var(--softtec-white);
  transition: all 0.2s;
}

  .btn-lightgreen:not(:disabled):not(.disabled):hover {
    color: var(--softtec-white);
    background-color: #005e30;
  }

  .btn-lightgreen:not(:disabled):not(.disabled).active,
  .btn-lightgreen:not(:disabled):not(.disabled):active {
    color: var(--softtec-white);
    background-color: #559784;
  }

.btn-whiteblue {
  background-color: var(--softtec-white);
  border-color: var(--softtec-medium-blue1);
  color: var(--softtec-medium-blue1);
}

  .btn-whiteblue:not(:disabled):hover {
    color: var(--softtec-white);
    background-color: var(--softtec-dark-blue);
  }

.btn-white.disabled img.fill-white, .btn-white:disabled img.fill-white {
  -webkit-filter: invert(39%) sepia(37%) saturate(457%) hue-rotate(168deg) brightness(97%) contrast(94%);
  filter: invert(39%) sepia(37%) saturate(457%) hue-rotate(168deg) brightness(97%) contrast(94%);
}

button.disabled, button:disabled, .k-editor.telerik-blazor .k-button-group .k-button-solid:disabled {
  background-color: var(--softtec-grey) !important;
  border: none;
  color: var(--softtec-dark-blue) !important;
  cursor: not-allowed;
  pointer-events: unset !important;
  opacity: .65;
}

.btn-whiteblue:not(:disabled):not(.disabled).active, .btn-whiteblue:not(:disabled):not(.disabled):active, .show > .btn-whiteblue.dropdown-toggle {
  color: var(--softtec-white);
  background-color: var(--softtec-medium-blue1);
}

.btn-outline-blue {
  color: var(--softtec-dark-blue);
  border-color: var(--softtec-dark-blue);
}

.btn-outline-medium-blue {
  background-color: transparent;
  color: var(--softtec-medium-blue1) !important;
  border-color: var(--softtec-medium-blue1);
}

  .btn-outline-blue:hover, .btn-outline-medium-blue:hover {
    color: var(--softtec-white) !important;
    background-color: var(--softtec-dark-blue);
  }

.btn-outline-white {
  border: 1px solid var(--softtec-white);
  color: var(--softtec-white);
}

  .btn-outline-white:hover {
    color: var(--softtec-dark-blue);
    background-color: var(--softtec-white);
    border: 1px solid var(--softtec-white);
  }

    /*if button has animate svg-icon input it*/
    .btn-outline-white:hover .btn-icon-white {
      filter: invert(80%) sepia(28%) saturate(2920%) hue-rotate(192deg) brightness(85%) contrast(102%)
    }

  .btn-outline-white:not(:disabled):not(.disabled).active, .btn-outline-white:not(:disabled):not(.disabled):active, .show > .btn-outline-white.dropdown-toggle {
    color: var(--softtec-dark-blue);
    background-color: var(--softtec-white);
    border: 1px solid var(--softtec-white);
  }

.btn.focus, .btn:focus {
  outline: 0;
  box-shadow: none;
}

.st-button {
  width: 180px;
  min-width: 180px;
  border-radius: 25px;
  height: 30px;
}

.btn-small {
  border-radius: 25px;
  min-width: 50px;
  width: 50px;
  height: 30px;
}

.btn-round {
  border-radius: 25px;
  width: 30px;
  height: 30px;
  min-width: 30px;
}

.dragdrop-btn {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  justify-content: center;
}

  .dragdrop-btn > span {
    font-size: var(--font-size-10) !important;
  }

.btn-icon {
  font-family: 'Montserrat-Medium', 'Montserrat-Regular', sans-serif;
  font-size: 2rem !important;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*Buttons Global Definiert (einmalig verwendet)*/
.room-settings-btn {
    min-width: 10rem !important;
    width: 10rem !important;
    border: 1px solid var(--softtec-light-blue-shadow);
    border-radius: 8px;
}

  .room-settings-btn > img {
    height: 2rem;
    margin-right: .5rem;
  }

  .room-settings-btn > span {
    margin-right: .5rem;
  }

.card-fold .price > button {
    background-color: var(--softtec-light-blue-shadow);
}

.btn.noPointer {
  cursor: inherit !important;
}

.btnAvatarSidebar {
  width: 100%;
  min-width: 2.5rem;
  padding: 0;
  height: 2.5rem;
  display: flex;
  justify-content: center;
}

  .btnAvatarSidebar div {
    padding: 0;
  }

  .btnAvatarSidebar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--softtec-white);
  }

.avatar {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem !important;
  padding: 0 !important;
  background-color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*------------------------*/

/*button group*/
.btn-group > button:not(.st-splitbuttondropdown-togglebutton) {
  max-width: 150px;
  min-width: fit-content;
}

.btn-group > button:not(:first-child):not(.st-splitbuttondropdown-togglebutton) {
  border-left: .1rem solid white !important;
}
/*-----------*/


/*ICONS*/



.info-hover {
  width: 2rem;
  height: 2rem;
}

.round-check-icon {
  border-radius: 25px;
  font-size: 8px !important;
  padding: .2rem;
  background: green;
  color: white;
  position: relative;
  top: -9px;
  right: 14px;
}

.table-active-icon {
  font-size: var(--font-size-14) !important;
}

.icon {
  height: 18px;
  margin-right: 10px;
  width: 18px;
}

.grid-icon {
  height: 100% !important;
  max-width: 4.5rem;
  object-fit: contain;
}

.widgetIcon {
  color: var(--softtec-medium-blue1);
  height: 2rem;
  border-radius: 8px;
  gap: 1.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}

  .widgetIcon:hover {
    cursor: pointer;
  }

  .widgetIcon span.fa-regular, .widgetIcon span.fa-solid {
    font-size: 2rem !important;
    width: 2rem;
    display: flex;
    justify-content: center;
  }

  .widgetIcon .widget-icon-img {
    background-color: var(--softtec-medium-blue1);
    background-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    height: 2rem;
    width: 2rem;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
  }

    .widgetIcon:hover .widget-icon-img {
        background-color: var(--softtec-dark-blue);
    }

.close-icon {
  background-color: var(--softtec-medium-blue1);
  background-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--softtec-medium-blue1);
  background-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  height: 2rem;
  width: 2rem;
  -webkit-mask-position: center;
  mask-position: center;
}

  .close-icon:hover {
    cursor: pointer;
    background-color: var(--softtec-dark-blue);
  }

.searchIcon { /* located in side-nav */
  position: absolute;
  margin: 6px 0 0 20px;
  color: var(--softtec-medium-blue1);
  background-color: transparent;
  width: 50px;
  padding: 0;
}

.search-icon, .st-searchfield span { /* located in table-header */
  position: absolute;
  top: inherit;
  left: inherit;
  z-index: 2;
  color: var(--softtec-medium-blue1);
  background-color: transparent;
  padding-left: 2rem;
}

.btn-icon-white {
  fill: var(--softtec-white);
  height: 18px;
  z-index: 100000;
}

  .btn-icon-white:hover {
    filter: invert(80%) sepia(28%) saturate(2920%) hue-rotate(192deg) brightness(85%) contrast(102%)
  }

button.icon-right {
  color: var(--softtec-dark-blue);
  background-color: transparent;
  opacity: 1;
  padding: 0.7rem 1rem;
}

  button.icon-right:disabled {
    color: #cdcdcd;
    opacity: .65;
    cursor: not-allowed
  }

button.icon-right:not(:disabled):hover {
  color: var(--softtec-medium-blue1);
 }

.form-floating-icon {
  position: relative;
}

.form-floating-icon > .input-icon-left:not(.input-icon-right) + input, .form-floating-icon > .input-icon-img-left:not(.input-icon-img-right) + input {
  padding-left: 2.5rem !important;
 }

.form-floating-icon > .input-icon-right + input, .form-floating-icon > .input-icon-img-right + input {
  padding-right: 3rem !important;
 }

.icon-lightblue {
  color: var(--softtec-medium-blue1);
}

.form-floating-icon > .input-icon-left ~ label.st-label, .form-floating-icon > .input-icon-img-left ~ label.st-label {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

/*equipment-icon Einstellungen-Zimmer*/
.card-body .btn-white-shadow img, .card-body .btn-white-shadow-active img {
  height: 20px;
}

/*icon class*/
.icon-hover:hover {
  cursor: pointer;
  color: var(--softtec-medium-blue2) !important;
}

.input-icon-left, .input-icon-right {
  position: absolute;
  left: 0.4rem;
  top: 0.75rem;
  text-align: center;
  background-color: transparent;
  color: var(--softtec-medium-blue1);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem !important;
  padding: 0;
  border: none;
}

.input-icon-img-left, .input-icon-img-right {
  height: 1.5rem;
  left: .5rem;
  width: 1.5rem;
  position: absolute;
  top: 0.75rem;
  z-index: 95;
}

.input-icon-img-right {
  right: 0.5rem;
  left: unset;
}

.icon-round-medium-blue {
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--softtec-medium-blue1);
  border-radius: 50%;
  background: var(--softtec-white);
  color: var(--softtec-medium-blue1);
}

.icon-round-medium-blue.disabled {
  border: unset;
  color: var(--softtec-white);
 }
/*--------------------------------------------------------------------------*/

/*Telerik Buttons*/
.k-button-group .k-button-solid {
  color: var(--softtec-medium-blue1);
  background-color: #fff;
  border: 1px solid var(--softtec-medium-blue2);
}

.k-button {
  height: 30px;
  width: 30px;
}

.k-calendar-header .k-button {
  height: unset;
  width: unset;
}

.k-calendar-header span.k-button-text {
  color: var(--softtec-dark-blue);
}

.k-button-group .k-button-solid:hover {
  color: var(--softtec-white);
  background-color: var(--softtec-light-blue2);
}

.k-button-solid-base:focus, .k-button-solid-base.k-focus {
  box-shadow: none;
}

.k-actions > .k-button-solid-base {
  color: var(--softtec-medium-blue1);
  background-color: var(--softtec-white);
  border: 1px solid var(--softtec-medium-blue1);
  height: 30px;
  border-radius: 25px;
}

.k-command-cell button:disabled:hover {
  cursor: not-allowed !important;
  pointer-events: unset !important;
  opacity: .65 !important;
  background-color: #cdcdcd;
}

.k-command-cell button:not(.btn-lightblue):not(:disabled) {
  background-color: var(--softtec-white);
  border: 1px solid var(--softtec-medium-blue1) !important;
  height: 30px;
  min-width: 50px;
  border-radius: 25px;
}

.k-command-cell button:not(.btn-lightblue):not(:disabled):hover {
  background-color: var(--softtec-medium-blue1);
  color: var(--softtec-white) !important;
  border-color: var(--softtec-medium-blue1);
 }

.k-command-cell button:not(.btn-lightblue):hover span.k-icon {
  color: var(--softtec-white) !important;
}

.k-actions > .k-button-solid-base:hover, #GridButtonPreferences .k-button-solid-base:hover {
  background-color: var(--softtec-medium-blue1);
  color: var(--softtec-white) !important;
  border-color: var(--softtec-medium-blue1);
}

.k-actions > .k-button-solid-primary, #GridButtonPreferences .k-button-solid {
  background-color: var(--softtec-medium-blue1);
  border-radius: 25px;
  height: 30px;
  border: none;
  color: var(--softtec-white);
}

.k-actions > .k-button-solid:hover {
  color: var(--softtec-white);
  background-color: var(--softtec-medium-blue1);
}

.k-actions > .k-button-solid-primary:hover {
  color: var(--softtec-white);
  background-color: var(--softtec-dark-blue);
}

.k-actions > .k-button-solid-primary:focus, .k-actions > .k-button-solid:focus {
  box-shadow: unset;
}

#GridButtonPreferences .k-button-solid .k-icon {
  color: var(--softtec-white);
}

.k-spin-button .k-button-solid-base {
  background-color: var(--softtec-medium-blue1) !important;
  border-color: var(--softtec-medium-blue1);
}

.k-spin-button .k-button-solid-base span {
  color: var(--softtec-white) !important;
}

.k-actions {
  gap: 1rem;
}

/*---------------------------------------------------------------------------------------------------------*/
@media (max-width: 1090px) {
  .btn-group > button:not(.st-splitbuttondropdown-togglebutton) {
    max-width: 100px;
  }

  .st-toprow div.gap-2 {
    gap: 1rem !important;
  }

  .st-toprow .st-button:not(.btn-round):not(.btn-small) {
    width: 10rem;
    line-height: 1rem;
    min-width: 10rem;
  }

  .st-toprow div.btn-group.st-splitbuttondropdown > button.st-splitbuttondropdown-button {
    width: 95px;
    min-width: 95px;
    line-height: 1rem;
  }
}

@media (max-width: 955px) {
  .btn-group > button:not(.st-splitbuttondropdown-togglebutton) {
    max-width: 150px;
  }
}

@media (max-width: 1060px) {
  .report-btns button {
    min-width: 50px !important;
    width: 50px !important;
    text-align: center;
    justify-content: center;
  }

    .report-btns button .fa-solid {
      font-size: 1.5rem !important;
    }

    .report-btns button span.text {
      display: none;
    }
}

/* DROP-DOWN STYLE */
.st-splitbuttondropdown-togglebutton {
  border: 0;
  min-width: 30px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

  .st-splitbuttondropdown-togglebutton.btn-white {
    border: 1px solid var(--softtec-medium-blue1);
  }

  .st-splitbuttondropdown-togglebutton:disabled {
    border-left: 1px solid var(--softtec-white);
  }

.st-splitbuttondropdown-button {
  width: 150px;
  border-right: 1px solid var(--softtec-white);
  margin-right: 1px;
}

.st-buttondropdown-menu {
  border-radius: 8px;
  border: 0;
}

.st-buttondropdown > .st-button {
  width: 150px;
}

.st-buttondropdown-menu .st-button {
  min-width: 5.5rem !important;
  display: block;
  width: 100% !important;
  border: unset !important;
  text-align: left !important;
}

  .dropdown-item:hover, .st-buttondropdown-menu .st-button:hover {
    background-color: var(--softtec-light-blue2) !important;
    color: var(--softtec-medium-blue1) !important;
    cursor: pointer
  }

.btn-small.fa-solid, .btn-small.fa-regular {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-textdropdown-menu-item, .st-enumdropdown-menu-item {
  padding: .5rem 1rem;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  word-break: break-word;
  min-height: 30px;
}

  .st-textdropdown-menu-item:hover, .st-enumdropdown-menu-item:hover {
    background: var(--softtec-light-blue2);
    color: var(--softtec-medium-blue1) !important;
    padding: .5rem 1rem;
    cursor: pointer;
  }

  .st-textdropdown-menu-item.selected, .st-enumdropdown-menu-item.selected {
    background: var(--softtec-light-blue2);
    padding: .5rem 1rem;
    color: var(--softtec-medium-blue1) !important;
  }

    .st-textdropdown-menu-item.selected::after, .st-enumdropdown-menu-item.selected:after {
      content: '\2714';
      font-family: FontAwesome;
      color: var(--softtec-medium-blue1) !important;
    }
/*----------------------------------*/