/*********************************
    File Name: om-core.less
    Role: Online-Makler core file
**********************************/

/**********************************************************
    THEME 1 DETAILS
    Theme_Name  : Policendirekt Theme
    Type        : Init (set variable)
    Usage       : Comment out for policendirekt.de website
************************************************************/
$royal-blue-100: #4870a4;

/**********************************************************
    THEME 2 DETAILS
    Theme_Name  : AVW Theme
    Type        : Init (set variable)
    Usage       : Comment out for avw.de website
************************************************************/

/*$royal-blue-100: #312783;
$royal-blue-10: #8fa4d2;
$font-family: 'Roboto Condensed', sans-serif;*/

// Init
// $light-blue: #66afe9;
// $light-blue-3: dodgerblue;
// $light-blue-4: #5bc0de;
// $light-blue-5: #c9dcf1;

// $light-green: #DFF0D8;

// $light-red: #F2DEDE;
// $dark-red: #a94442;
// $grey: #ccc;
// $light-grey: #eee;
// $light-grey-1: #efefef;

$covomo-light-blue: #44b1d2;
$covomo-green: #7eac49;
$facebook: #3b5998;
$facebook: #25d366;
$google: #d34836;
$twitter: #55acee;

$bannerHXL-block-bg-c: none;
$screen-xs-min: 300px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

// Import scss files here
@import '@pdv/styles/variables.scss';
@import '@pdv/styles/breakpoints.scss';
@import '@pdv/styles/mixins.scss';

// steps css
@import 'wizard.scss';

/*@import "adminTo.scss";*/

/*@import "uploader.scss";*/
//@import "logos_v3.scss";
@import 'sprites.scss';

@import 'primeng-overwrite.scss';

@import 'ie-only.scss';

// Components
//@import "component/customDatePicker.scss";
//@import "signaturePad.scss";
//@import "component/legalText.scss";
//@import "component/bannerHorizontalXL.scss";
//@import "component/readMore.scss";
// Layout
//@import "layout/footerBar.scss";
//@import "layout/sideBar.scss";
//@import "layout/topBar.scss";
// Pages
//@import "pages/dankeseite";
//@import "pages/dashboard/dashboard.scss";
//@import "pages/dashboard/dashboardView.scss";
//@import "pages/passwortVorhanden.scss";
//@import "pages/emailAendern.scss";
//@import "pages/vertragsdaten.scss";
//@import "pages/register/registerStep1.scss";
//@import "pages/register/registerStep2.scss";
//@import "pages/register/registerStep3.scss";
//@import "pages/register/registerStep4.scss";

/**************** body *********************************/

html {
  @include font-size(16);
  @include media-breakpoint-down(lg) {
    @include font-size(16);
  }
  @include media-breakpoint-down(md) {
    @include font-size(15);
  }
  @include media-breakpoint-down(sm) {
    @include font-size(14);
  }
  @include media-breakpoint-down(xs) {
    @include font-size(13);
  }
}

body.mobile.modal-open {
  // verhindert dass man bei offenem modal den body scrollen kann
  overflow: hidden;
  position: fixed;
}

.modal-header {
  border-bottom: none;
}

@media only screen and (min-width: 992px) {
  body.gradient-dark {
    /*background: url(../images/background-gradient-darker-desktop.jpg) !important;
        background-repeat: repeat-x !important;
        background-attachment: fixed !important;*/
    background-image: linear-gradient(#eee 5%, #f7f7f7 75%, #ffffff 80%);
  }
}

@media only screen and (max-width: 992px) {
  body.gradient-dark {
    /*background: url(../images/background-gradient-darker-mobile.jpg) !important;
        background-repeat: repeat-x !important;
        background-attachment: fixed !important;*/
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 65px, #fff 20%, #f6f6f6 50%) !important;
    background: -webkit-linear-gradient(top, #ffffff 65px, #fff 20%, #f6f6f6 50%) !important;
    background: linear-gradient(to top, #ffffff 65px, #fff 20%, #f6f6f6 50%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
  }
}

/************* Container ********************/
.container-fluid {
  max-width: 1200px;
}

.container-min-height {
  min-height: 1500px;

  @media (max-width: 767px) {
    min-height: 1000px;
  }
}

.content-bg {
  background-color: $white;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  padding-bottom: 1rem;
}

/*************** leftsidebar *********************/
#leftsidebar {
  background-color: $royal-blue-100;
  color: $white;
}

.sidebar {
  box-shadow: none;
}
// leftsidebar footer
.bc-blue-c1 {
  background-color: $royal-blue-100;
}

/********************* Main Block ************************************/
.fontsize-main {
  font-size: 22px;
}

.color-main {
  color: $royal-blue-100;
}

.b-c-light-blue-1 {
  background-color: $royal-blue-10;
}

/*********************** START toast classes overwrite **********************/

#toast-container.toast-bottom-center {
  bottom: 4px;

  @media (max-width: 1199px) {
    bottom: 60px;
  }

  .toast {
    opacity: 1;

    @media (max-width: 480px) {
      width: 92%;
    }

    box-shadow: none;
    border-radius: 0px;

    &:hover {
      box-shadow: none;
    }
  }

  .toast-success {
    background-color: $green;
  }

  .toast-info {
    background-color: $medium-blue-100;
  }

  .toast-error {
    background-color: $red;
  }
}

/*********************** END toast classes overwrite **********************/

/*********************** Default Classes overwritten or customized classes created to overwrite Defaults **********************/

.close-invert {
  color: $white;

  &:hover {
    color: $white;
  }
}

.form-control {
  border-radius: 0;
}

.well-customized {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.well-mobile {
  @media (max-width: 420px) {
    padding: 5px;
  }
}

/*******************************
8. Bootstrap Jumbotron customization
*******************************/
.jumbotron.pdv-jumbotron-c1 {
  background: url(/assets/PDVCustom/images/woman-2.jpg);
  color: #fff;
  background-position: -836px -313px;
}

/*******************************
7. Modals
*******************************/
.modal-backdrop {
  display: none; /* bug fix - no overlay */
}

.modal-content {
  .nav.nav-tabs + .tab-content {
    margin-bottom: 0px;
  }

  .panel {
    border-top: none;
  }
}

.modal-body-nopadding {
  padding: 0;
}

@media (min-width: 992px) {
  /* MODALS START */
  .modal-wide {
    width: 980px;
  }
  /* MODALS END */
}

.modal-open {
  .modal {
    overflow-y: hidden;
  }
}

.modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 190px);
}

.modal-body-header-xl {
  max-height: calc(100vh - 220px);
}

.modal-customized {
  /*@media(min-width: 768px) {
        .modal-dialog {
            margin: 10px auto;
        }
    }*/

  .modal-footer {
    border-top: 0;

    .mf-upload-buttons {
      @media (min-width: 768px) {
        float: left;
      }
    }
  }

  .calendar-customized {
    position: inherit;
    left: auto;
    margin-top: auto;
  }
}

.modal-header {
  position: relative;

  p {
    margin: 0;
  }

  span.close {
    font-size: 15px;
    opacity: 1;
  }
}

.badge-customized {
  border-radius: 0;
}

.btn-default-i {
  color: $black !important;
  background-color: $dark-gray-50 !important;
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type='file'] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.btn-full-wide {
  width: 100%;
}

.btn-big {
  font-size: 18px;
  font-weight: bold;
  height: 50px;
}

.btn-small {
  padding: 3px 6px;
}

.btn-text-underline {
  text-decoration: underline;

  &:hover {
    text-decoration: underline;
  }
}

.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-cta4,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-cta4:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-cta4:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-cta4:active {
  color: $medium-blue-100;
}

.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: absolute;
  display: inline-block;
  left: 5px; //changed from right:15
  margin-top: 5px;
}

/* Labels ====================================== */
.label {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

.label-success {
  background-color: $green;
}

.label-warning {
  background-color: $yellow;
}

.label-danger {
  background-color: $red;
}

.panel-register {
  background: $white;
  border-radius: 0;
  .panel-body {
    padding: 0;

    a {
      font-size: 18px;
      display: block;
      padding: 22px 0px;

      &:hover {
        text-decoration: underline;
      }

      i {
        text-decoration: none;
      }
    }
  }
}
/*panel register media queries*/
@media (max-width: 580px) {
  .panel-register {
    .panel-body {
      .shortext {
        white-space: normal;

        .spritename {
          margin-left: 98px;
        }
      }

      a {
        font-size: 14px;

        span {
          display: block;
        }
      }
    }
  }
}

.navbar-fixed-bottom {
  margin-top: 1px solid $white;
}

.navbar-fixed-bottom-c1 {
  background-color: $royal-blue-100;
  color: $white;
  height: 70px;
  line-height: 60px;
  border-top: 1px solid #fff;

  a {
    color: $white;
    text-decoration: underline;
  }
}

.thumbnail-noborder {
  border: none;
  padding: 0;
}

.modal-fullscreen {
  &:before {
    margin-right: -4px;
  }

  .modal-dialog {
    width: 95%;
    height: 95%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: 95%;
    min-height: 100%;
    border-radius: 0;
    border: 0;

    .modal-body {
      /*max-height: calc(100vh - 110px);*/
    }
  }

  @media (max-width: 480px) {
    .modal-content {
      .modal-body {
        padding: 0;
      }
    }
  }
}

.btn-default {
  border: none;
  border: 1px solid gray;
}

.overlay-custom {
  position: relative;
  display: block;
  min-height: 330px;
  background-color: $dark-gray-10;
}

//Table mobile
@media screen and (max-width: 600px) {
  .highlight-item-custom {
    padding: 0px;
    margin-bottom: 0px;
    border-bottom: none;
  }

  .table.table-customized {
    border: 0;
    margin-bottom: 0px;

    thead {
      display: none;
    }

    tbody {
      tr {
        padding: 8px 0px;

        td {
          border: none;
          padding: 2px;
        }
      }
    }

    tr {
      display: block;
      border-top: 1px solid $medium-blue-100;
    }

    td {
      display: block;
      font-size: 14px;
    }

    tr:last-child {
      border-bottom: 1px solid $medium-blue-100;
    }

    td:before {
      content: attr(data-label);
      float: left;
      text-transform: uppercase;
      font-weight: bold;
    }
  }
}

.pdv-donut-chart-container {
}

.panel-info-custom-2 {
  border-color: $royal-blue-10;
  border-radius: 0px;

  .panel-heading {
    background: $white;
    border: 0;
    border-color: $royal-blue-10;
    border-radius: 0px;
    color: $black;
  }
}

.thumbnail-custom-1 {
  border: 0;
  border-radius: 0;
  padding: 0px;

  img {
    margin: 0px;
  }
}

.badge-custom-success {
  background: $green;
}

.badge-custom-warning {
  background: $yellow;
}

.badge-custom-danger {
  background: $red;
}

.badge-error {
  background-color: $yellow;
  margin: 0;
  color: $royal-blue-100;
  font-size: 14px;
}

/*.text-info-c1 {
  color: $royal-blue-100;
}*/

/*.panel-c1 {
  border-radius: 0;

  .vertragoptionenwrapper {
    margin: 0px;

    .icon-float-div {
      float: right;

      .optionbox-c1 {
        margin-right: 0px;
      }
    }
  }
}*/

/*@media(max-width: 767px) {
  .panel-c1 {
    .vertragoptionenwrapper {
      .icon-float-div {
        float: left;
      }
    }
  }
}*/

.panel-c2 {
  border: none;
  border-radius: 0px;
  box-shadow: none;
  background-color: $royal-blue-10;

  .panel-heading {
    background-color: $royal-blue-10;
    padding: 0px;
  }

  .panel-body {
    padding: 15px 0px 0px 0px;
  }
}

.label-c1 {
  border: 1px solid $dark-gray-100;
  font-size: 12px;
  color: $black;
  margin-bottom: 5px;
}

.label-c2 {
  border-radius: 0;
  background-color: $yellow;
  color: $black;
  border: 1px solid $black;
}

.table-first-row-border-top-zero {
  tbody {
    tr:first-child {
      td {
        border-top: 0;
      }
    }
  }
}

.table-c1 {
  margin-bottom: 0px;

  tbody {
    tr {
      td {
        padding: 0px;
        border: 0px;
        width: 50%;
      }
    }
  }
}

.table-c1-same-width-td {
  tbody {
    tr {
      td {
        width: 50%;
      }
    }
  }
}

/*table-c1 media queries*/
@media screen and (max-width: 600px) {
  .table-c1 tr {
    border-top: none;
  }

  .table-c1 tr:last-child {
    border-bottom: none;
  }
}

/*******************
        PDV Carousel
    *******************/
carousel.pdv-carousel-1 {
  .carousel.slide {
    .carousel-indicators {
      bottom: -55px;

      li {
        background-color: $royal-blue-50;
        border-radius: 0;
        height: 15px;
        width: 15px;
        margin-left: 7px;
        margin-right: 7px;
      }

      li.active {
        background-color: $royal-blue-100;
      }
    }

    .carousel-inner {
      .carousel-item {
        .item {
          position: relative;

          .carousel-overlay-block {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

            section {
              position: relative;
            }

            section.carousel-section-c1 {
              height: 400px;

              .carousel-caption-c1 {
                padding-top: 2rem !important;
              }
            }

            section.carousel-section-c2 {
              background-color: rgba(255, 255, 255, 0.7);
              /*.carousel-caption-c2 {
                                padding: 20px;
                            }*/
            }

            section.carousel-section-c3 {
              .carousel-caption-c3 {
                position: absolute;
                top: 0;
                right: 15px;
                z-index: 10;
                padding: 10px;
                color: $white;
                background-color: rgba(15, 65, 155, 0.6);
                width: 300px;
                border-radius: 0px 0px 4px 4px;
              }
            }
            /*==========  Non-Mobile First Method  ==========*/
            /* Large Devices, Wide Screens */
            @media only screen and (max-width: 1200px) {
            }
            /* Medium Devices, Desktops */
            @media only screen and (max-width: 992px) {
              position: relative;
              background: $royal-blue-10;

              section.carousel-section-c1 {
                height: auto;
                background: $royal-blue-10;

                .carousel-caption-c1 {
                  padding-top: 1rem !important;
                }
              }

              section.carousel-section-c2 {
                height: auto;
                background: $royal-blue-10;
              }
            }
            /* Small Devices, Tablets */
            @media only screen and (max-width: 768px) {
            }
            /* Extra Small Devices, Phones */
            @media only screen and (max-width: 480px) {
            }
            /* Custom, iPhone Retina */
            @media only screen and (max-width: 320px) {
            }
          }
        }
      }
    }

    .carousel-control-next,
    .carousel-control-prev {
      width: 4%;
    }

    .left.carousel-control-prev {
      background: $royal-blue-100;
      width: 40px;
      height: 40px;
      top: 45%;
      cursor: pointer;
      // left: -60px;
      border-radius: 4px;
    }

    .right.carousel-control-next {
      background: $royal-blue-100;
      width: 40px;
      height: 40px;
      top: 45%;
      cursor: pointer;
      // right: -60px;
      border-radius: 4px;
    }
  }
}

carousel.pdv-carousel-2 {
  .carousel.slide {
    .carousel-indicators {
      bottom: -70px;

      li {
        background-color: $royal-blue-50;
        border-radius: 0;
        height: 15px;
        width: 15px;
      }

      li.active {
        background-color: $royal-blue-100;
      }
    }

    .carousel-inner {
      .carousel-item {
        .item {
          position: relative;

          .card {
            min-height: 250px;
            border-radius: 0;

            .card-img-box {
              position: relative;

              .card-category-box {
                position: absolute;
                bottom: 0;
                background: rgba(255, 255, 255, 0.7);
                width: 100%;
                text-transform: uppercase;
                padding: 20px;
                font-size: 14px;
                font-weight: 700;

                .card-category {
                  @include font-size(15);
                  margin-bottom: 0px;
                }
              }

              .card-price-box {
                position: absolute;
                top: 0;
                right: 0;
                background: $royal-blue-100;
                color: $white;
                padding: 5px 10px;
                font-size: 14px;
              }
            }

            .card-body {
              padding: 20px;

              .card-title {
                @include font-size(15);
              }

              .card-cta {
                color: $royal-blue-100;
                font-weight: $font-weight-700;

                span {
                  text-decoration: underline;
                }
              }

              .card-text {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                display: block;
              }
            }
          }

          .card-type1 {
            .card-img-box {
              height: 250px;
              background: $dark-gray-25;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;

              .card-priority-box {
                display: inline-block;
                padding: 5px 10px;
                background: $white;
                color: $royal-blue-100;
              }
            }

            .card-body {
              .card-title {
                margin-bottom: 10px;
              }
            }
          }

          .card-type2 {
            .card-img-box {
              height: 150px;
              background: $dark-gray-25;
              background-repeat: no-repeat;
              background-size: cover;
              background-position: center;
            }

            .card-body {
              .card-title {
                margin-bottom: 10px;
              }
            }
          }

          .card-type3 {
            .card-img-box {
              height: 60px;
            }

            .card-body {
              background: $dark-gray-10;

              &:hover {
                color: $white;
                background: $royal-blue-100;

                .card-title {
                  color: $white;
                }

                .card-description {
                  p {
                    color: $white;
                  }
                }

                .card-cta {
                  span {
                    color: $white;
                    text-decoration: none;
                  }

                  i {
                    color: $white;
                  }
                }
              }

              .card-title {
                margin-bottom: 10px;
              }

              .card-description {
                height: 130px;
              }
            }
          }

          .carousel-overlay-block {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;

            section {
              .container {
                width: 100%;
                position: relative;

                .carousel-caption-c1 {
                  padding: 20px 0px;
                  height: 300px;
                }

                .carousel-caption-c2 {
                  padding: 20px 0px;
                  height: 200px;
                }

                .carousel-caption-c3 {
                  position: absolute;
                  top: 0;
                  right: 15px;
                  z-index: 10;
                  padding: 10px;
                  color: $white;
                  background-color: rgba(15, 65, 155, 0.6);
                  width: 300px;
                  border-radius: 0px 0px 4px 4px;
                }
              }
            }

            section.section-bc-transparent {
              background-color: rgba(255, 255, 255, 0.7);
            }
          }
        }
      }
    }

    .left.carousel-control-prev {
      background: $royal-blue-100;
      width: 40px;
      height: 40px;
      top: 45%;
      cursor: pointer;
      // left: -60px;
      border-radius: 4px;
    }

    .right.carousel-control-next {
      background: $royal-blue-100;
      width: 40px;
      height: 40px;
      top: 45%;
      cursor: pointer;
      // right: -60px;
      border-radius: 4px;
    }
  }
}

/********************
    TABS
**********************/

.pdvom-tabs-2 {
  tabset {
    .nav-tabs {
      border-bottom: 1px solid $dark-gray-25;
      padding: 0px;
      margin: 0px;

      .nav-item {
        padding: 0;
        margin: 0;
        margin-bottom: -1px;
        margin-left: 1px;

        .nav-link {
          color: $dark-gray-100 !important;
          border-color: $white $white $dark-gray-25 !important;
          padding: 15px 15px;
          border: 0px;
          text-decoration: none !important;
          font-weight: $font-weight-500 !important;

          &:hover {
            text-decoration: underline !important;
          }
        }

        .nav-link.active {
          color: $royal-blue-100 !important;
          font-weight: $font-weight-700 !important;
          border-radius: 0px;
          border-top: 1px solid $dark-gray-50 !important;
          border-left: 1px solid $dark-gray-50 !important;
          border-right: 1px solid $dark-gray-50 !important;
          border-bottom: 1px solid $white !important;
          background-color: transparent;

          &:hover {
            text-decoration: none !important;
          }
        }

        .nav-link.pdv-nav-link-special {
          background-color: $orange-100 !important;
          color: $white !important;
          border-color: $orange-100 !important;
          border-radius: 0;
          padding-top: 17px;
        }

        .nav-link.pdv-nav-link-special.active {
          color: $royal-blue-100 !important;
          background-color: transparent !important;
          font-weight: 700;
          border-radius: 0px;
          border-top: 1px solid $dark-gray-50 !important;
          border-left: 1px solid $dark-gray-50 !important;
          border-right: 1px solid $dark-gray-50 !important;
          border-bottom: 1px solid $white !important;
        }

        &:before {
          display: none;
        }
      }

      .nav-item.show,
      .nav-item.active {
        a.active {
          border-left-color: $dark-gray-25 !important;
          border-right-color: $dark-gray-25 !important;
          border-top-color: $dark-gray-25 !important;
        }

        .nav-link {
          color: $royal-blue-100;
          font-weight: 700;
        }
      }
    }

    .tab-content {
      padding: 15px 0px;
    }
  }
  /*==========  Non-Mobile First Method  ==========*/
  /* Large Devices, Wide Screens */
  @media only screen and (max-width: 1200px) {
    tabset {
      ul.nav-tabs {
        li.nav-item {
          width: 100%;
        }

        li.nav-item.active {
          a.nav-link.active {
            border: 1px solid $dark-gray-50 !important;
          }
        }
      }
    }
  }
  /* Medium Devices, Desktops */
  @media only screen and (max-width: 992px) {
  }
  /* Small Devices, Tablets */
  @media only screen and (max-width: 768px) {
  }
  /* Extra Small Devices, Phones */
  @media only screen and (max-width: 480px) {
  }
  /* Custom, iPhone Retina */
  @media only screen and (max-width: 320px) {
  }
}

/********************
    ACCORDION
**********************/

accordion.pdvom-accordion-1 {
  border-bottom: 1px solid $dark-gray-50;

  accordion-group {
    border-top: 1px solid $dark-gray-50;

    .panel.card {
      background: none;
      border: 0;

      .panel-heading {
        background: none;
        border: 0;
        padding: 20px 0px;
        cursor: pointer;
      }

      .panel-collapse {
        .panel-body.card-body {
          padding: 0px 0px 90px 0px;

          .bedarf-accordion-body {
            .bedarf-card-item {
              border-radius: 0px;
              margin-bottom: 15px;

              .bedarf-remove-vertrag {
                position: absolute;
                right: 0;
                padding: 1px 5px;
                cursor: pointer;
              }
            }
          }
        }
      }

      .accordion-toggle {
        font-weight: 700;
        cursor: pointer;
      }
    }
  }

  accordion-group:first-child {
    border-top: 1px solid $orange-100;

    .panel.card {
      .panel-heading {
        color: $orange-100;
      }

      .accordion-toggle {
        a {
          text-decoration: underline;
        }
      }
    }
  }

  accordion-group:nth-child(2) {
    border-top: 1px solid $orange-100;
  }
}

.contractgroup {
  .card {
    border-radius: 0;
    border: none;
  }

  .card-body {
    padding: 0.25rem 1rem !important;
  }

  .contractgroupheader {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }

  .card-header {
    border-bottom: 0;
    padding: 1rem;
    background: none;
  }

  .panel-body {
    background: none;
  }

  .panel-open.odd .pdvom-tabs-2 tabset .nav-tabs .nav-item .nav-link.active {
    border-bottom: 1px solid #f7f7f7 !important;
  }

  .panel-open.even .pdvom-tabs-2 tabset .nav-tabs .nav-item .nav-link.active {
    border-bottom: 1px solid #ffffff !important;
  }

  .odd {
    .card-header {
      background: rgba(0, 0, 0, 0.03);
    }

    .panel-body {
      background: rgba(0, 0, 0, 0.03);
    }
  }

  .price_main {
    @include font-size(20);
    color: $medium-blue-100;
    font-weight: bold;
  }

  margin-bottom: 2rem;
}

accordion.pdvom-accordion-3 {
  /*border-bottom: 1px solid $dark-gray-50;*/
  accordion-group {
    /*border-top: 1px solid $dark-gray-50;*/
    .panel.card.panel-default {
      box-shadow: none;
      border: 0;
      padding: 0;

      .panel-heading {
        color: $black;
        background-color: $royal-blue-10;
        border: 1px solid $dark-gray-10;
        font-weight: $font-weight-700;
        cursor: pointer;
        padding-bottom: 0px;

        .panel-title {
          .accordion-toggle {
            .tarifdetails {
              padding: 15px;
              margin-top: 20px;
              display: inline-block;
            }

            .tarifdetails.active {
              background: $white;
              border-bottom: 1px solid $white;
              margin-bottom: -1px;
            }

            .ac2-heading {
              border: 3px dashed $white;
              border-bottom: none;

              @media (max-width: 767px) {
                padding: 0px 10px;
              }

              .meine-vertrage-min-height {
                min-height: 85px;

                @media (max-width: 767px) {
                  min-height: 45px;
                }

                .ac2-icon-block {
                  height: 80px;
                }
              }
            }

            .highlighter-c1 {
              border: 3px dashed $royal-blue-100;
              border-bottom: none;
            }
          }
        }
      }

      .panel-collapse {
        .panel-body {
          padding: 15px;
          border-left: 1px solid $dark-gray-10;
          border-right: 1px solid $dark-gray-10;
          border-bottom: 1px solid $dark-gray-10;
        }
      }

      @media (max-width: 767px) {
        padding: 0px;
      }

      @media (max-width: 480px) {
        .panel-body {
          /*padding: 0px;*/
          padding-right: 10px;
        }
      }
    }
  }
}

.accordion-c1.panel-group {
  accordion-group {
    background-color: none;
    border: none;
    box-shadow: none;

    .card {
      min-height: 0px;
      box-shadow: none;
      background-color: $royal-blue-10;
      border: none;
    }

    .panel.panel-default {
      .panel-heading {
        padding: 10px 0px;
        background-color: $royal-blue-10;
        border-bottom: none;

        .panel-title {
          border-bottom: 1px solid $dark-gray-100;
        }
      }
    }

    .panel-collapse {
      .panel-body {
        padding: 0;
        padding-top: 10px;
        border: none;
      }
    }
  }
}

.accordion-c2 {
  accordion {
    .ac2-capsuled-panel {
      border-bottom: 2px solid $royal-blue-10;

      @media (max-width: 767px) {
        padding: 0px 10px;
      }

      .ac2-capsuled-min-height {
        min-height: 64px;
      }
    }

    accordion-group {
      border-bottom: 1px solid $royal-blue-10;

      .panel-default {
        box-shadow: none;
        border: none;
        /*margin-bottom: 5px;*/
        .panel-body {
          padding: 0px 10px;
        }

        @media (max-width: 767px) {
          padding: 0px;
        }

        @media (max-width: 480px) {
          .panel-body {
            /*padding: 0px;*/
            padding-right: 10px;
          }
        }

        .panel-heading {
          color: $black;
          background-color: $white;
          border-color: $white;

          .panel-title {
            .accordion-toggle {
              .ac2-heading {
                border: 3px dashed $white;
                border-bottom: none;

                @media (max-width: 767px) {
                  padding: 0px 10px;
                }

                .meine-vertrage-min-height {
                  min-height: 85px;

                  @media (max-width: 767px) {
                    min-height: 45px;
                  }

                  .ac2-icon-block {
                    height: 80px;
                  }
                }
              }

              .highlighter-c1 {
                border: 3px dashed $royal-blue-100;
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
}

.accordion-c3 {
  accordion {
    accordion-group {
      box-shadow: none;
      border: none;

      .panel {
      }

      .up-down-arrows {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
        padding: 10px;
      }

      .panel-register {
        box-shadow: none;
        position: relative;
        background: $dark-gray-10;

        .right-arrows {
          position: absolute;
          right: 0px;
          top: 0px;
          cursor: pointer;
          padding: 10px;
        }

        .panel-body {
          a {
            padding: 10px 0px;
            overflow: hidden;
            color: $dark-gray-100;
            cursor: pointer;
            border-radius: 5px;
          }

          .contractgroupheader .fa-lg {
            color: $royal-blue-100;

            @media (max-width: 340px) {
              display: none;
            }
          }

          .dach-name {
            display: inline;

            &:hover {
              text-decoration: underline;
            }

            @media (max-width: 340px) {
              padding-left: 14px;
            }
          }
        }
      }

      .panel-default {
        box-shadow: none;
        border: none;
        margin-bottom: 0px;
        min-height: 44px;
        padding: 0px;
        background: $dark-gray-10;

        .panel-heading {
          color: $black;
          background-color: $white;
          border: none;
          padding: 0px;
        }
      }
    }
  }
}

.accordion-c4 {
  accordion {
    accordion-group {
      padding: 10px;
      margin-bottom: 10px !important;
      background-color: $dark-gray-50;

      .panel-default {
        .panel-heading {
          background: $dark-gray-50;

          .panel-title {
            color: $black;
          }
        }

        .panel-body {
          padding: 10px 0px 0px 0px !important;
          border: 0 !important;
          color: $black !important;
          background: $dark-gray-50;
        }
      }
    }
  }
}

.search-c1 {
  .input-group {
    .input-group-append {
      .input-group-text {
        @include font-size(15);
        background-color: $royal-blue-100;
        border-radius: 0px 5px 5px 0px;
        color: $white;
        cursor: pointer;
        border-color: $royal-blue-100;
      }
    }

    .input-group-btn {
      .btn {
        border-radius: 0px 5px 5px 0px;
      }
    }

    .form-control {
      height: inherit;
      /*padding: 15px 20px;*/
      border-radius: 5px 0px 0px 5px;
      @include font-size(15);

      &:focus {
        box-shadow: none;
        border-color: $medium-blue-100;
      }
    }
  }
}

.text-danger-custom {
  color: $red;
}

.form-group {
  .input-group-unstyled {
    .form-control {
      border-radius: 4px;
      /*z-index: 0;*/
      z-index: unset;
    }

    .input-group-addon {
      border-radius: 4px;
      border: 0px;
      background-color: transparent;
    }
  }
}

/*********************** Below CSS classes are used, whenever there are small changes ***************************/
.spacer {
  height: 2em;
}

.spacer5 {
  height: 5px;
  width: 100%;
}

.spacer7 {
  height: 7px;
  width: 100%;
}

.spacer10 {
  height: 10px;
  width: 100%;
}

.spacer13 {
  height: 13px;
  width: 100%;
}

.spacer15 {
  height: 15px;
  width: 100%;
}

.spacer16 {
  height: 16px;
  width: 100%;
}

.spacer20 {
  height: 20px;
  width: 100%;
}

.spacer25 {
  height: 25px;
  width: 100%;
}

.spacer30 {
  height: 30px;
  width: 100%;
}

.spacer35 {
  height: 35px;
  width: 100%;
}

.spacer40 {
  height: 40px;
  width: 100%;
}

.spacer45 {
  height: 45px;
  width: 100%;
}

.spacer50 {
  height: 50px;
  width: 100%;
}

.spacer100 {
  height: 100px;
  width: 100%;
}

.spacer200 {
  height: 200px;
  width: 100%;
}

.text-align-center {
  text-align: center;
}

.link-underline {
  text-decoration: underline;
}

.clearfix,
.clearer {
  clear: both;
}

.mr-10 {
  margin-right: 10px !important;
}

.ml-15 {
  margin-left: 15px;
}

.m-l-1 {
  margin-left: 1px;
}

.m-15 {
  margin: 15px !important;
}

.m-0 {
  margin: 0;
}

.p-20 {
  padding: 20px;
}

.p-5 {
  padding: 5px;
}

.p-8 {
  padding: 8px;
}

.p-l-2 {
  padding-left: 2px;
}

.p-l-28 {
  padding-left: 28px !important;
}

.p-tb-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.p-tb-2 {
  padding: 2px 0px;
}

.p-tb-5 {
  padding: 0px 5px;
}

.p-relative {
  position: relative;
}

.m-0-a {
  margin: 0 auto;
}

.background-white {
  background-color: white;
}

.highlight-item-nomargin {
  margin-bottom: 0;
}

.text-center {
  text-align: center;
}

.d-inline-block {
  display: inline-block;
}

.d-inline-block-i {
  display: inline-block !important;
}

.d-block {
  display: block;
}

.row.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.row.d-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

/*
.w-50 {
    width: 50px;
}

.w-300 {
    width: 300px;
}

.w-100-p {
    width: 100%;
}
*/

.fa-8x {
  font-size: 8em;
}

.f-s-2-5 {
  font-size: 2.5em;
}

.f-s-28 {
  font-size: 28px;
}

.f-s-12 {
  font-size: 12px;
}

.f-s-14 {
  font-size: 14px;
}

.f-s-15 {
  font-size: 15px;
}

.f-s-16 {
  font-size: 16px;
}

.f-s-17 {
  font-size: 17px;
}

.f-s-18 {
  font-size: 18px;
}

.f-s-20 {
  font-size: 20px;
}

.f-s-22 {
  font-size: 22px;
}

.green-c1 {
  color: $green;
}

.yellow-c1 {
  color: $yellow;
}

.red-c1 {
  color: $red;
}

.black-c1 {
  color: $black;
}

.margin-center {
  margin: 0px auto;
}

li.check-green-icon:before {
  content: '\f00c'; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  color: $green;
}

.color-green {
  color: $green;
}

.bg-light-blue-1 {
  background: $royal-blue-10;
}

.color-red {
  color: $red;
}

.color-white {
  color: $white;
}

.l-h-1dot5-em {
  line-height: 1.5em;
}

.l-s-t-n {
  list-style-type: none;
}

.f-w-b {
  font-weight: bold;
}

.f-w-n {
  font-weight: normal;
}

.padding-reset-zero {
  padding: 0;
}

.b-n {
  border: none;
}

.p-c1 {
  padding-left: 5px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 0px;
}

.h-i {
  height: inherit;
}

.w-i {
  width: inherit;
}

.text-right {
  text-align: right;
}

/**************************Custom class created*******************************/

.button-disabled-c1 {
  opacity: 0.65;
}

.spacer12 {
  height: 12px;
  width: 100%;
}

/*.full-width-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  left: 0px;
  top: 120px;
  z-index: 5;
}*/

/*.bug-fix-invite-container {
  min-height: 700px; // dont change it
  @media(max-width: 1200px) and (min-width: 1045px) {
    min-height: 1120px; // dont change it
  }

  @media(max-width: 1044px) and (min-width: 950px) {
    min-height: 1060px; // dont change it
  }

  @media(max-width: 949px) and (min-width: 750px) {
    min-height: 1020px; // dont change it
  }

  @media(max-width: 749px) and (min-width: 330px) {
    min-height: 930px; // dont change it
  }

  @media(max-width: 329px) {
    min-height: 950px; // dont change it
  }
}*/

/*.invite-container-for-mobile-tablet {

    @media(max-width: 1200px) {
        .invite-image-transparent-block {
            background: rgba(0,0,0, 0.5);
            height: 100%;
        }

        background: $dark-gray-100 url(/assets/PDVCustom/images/woman-2.jpg) no-repeat 0;
        background-size: cover;
        height: 190px;
        position: absolute;
        width: 100vw;
        left: 0px;
        top: 120px;
        z-index: 6;

        h1, p {
            color: $white;
        }
    }
}*/

/*.invite-set-position-relative {
    position: relative;
    height: 100%;
}*/

/*.invite-container {
  background: $dark-gray-100 url(/assets/PDVCustom/images/woman-2.jpg) no-repeat 0 0;
  background-size: cover;
  background-position: top;
  color: $white;

  @media(max-width: 1199px) {
    background: #424241;
  }

  @media(max-width: 767px) {
    .invite-p-mobile {
      padding: 0px 20px;
    }
  }

  h1, h2, h4 {
    color: $white;
  }

  .invite-share-links {
    a {
      margin-right: 5px;

      i {
        width: 20px;
      }
    }
  }

  .invite-label {
    font-weight: 100;
  }

  .invite-terms-block {
    a {
      color: $white;

      &:hover {
        color: $white;
      }
    }
  }
}*/

/*.btn-facebook {
  background: $facebook;
  color: $white;

  &:hover {
    color: $dark-gray-100;
  }
}

.btn-whatsapp {
  background: $whatsapp;
  color: $white;

  &:hover {
    color: $dark-gray-100;
  }
}

.btn-google {
  background: $google;
  color: $white;

  &:hover {
    color: $dark-gray-100;
  }
}

.btn-twitter {
  background: $twitter;
  color: $white;

  &:hover {
    color: $dark-gray-100;
  }
}*/

#section-c1.section-c2 {
  position: relative;
  z-index: 10;

  #breadcrumb-c1 .fluid-bread .container .breadcrumb li:before {
    color: $white;
  }

  .custom-breadcrumb-item {
    a {
      color: $white;
    }
  }

  .breadcrumb {
    li {
      a {
        color: $white;
      }
    }

    .active {
      color: $white;
    }
  }
}

#section-c1.section-c1 {
  margin: 0px 15px 0px 315px;

  @media (max-width: 1169px) {
    margin: 0px;
  }

  .container {
    padding: 0px;

    @media (max-width: 1484px) {
      padding: 0px 15px;
    }

    @media (max-width: 1169px) {
      margin: 0px;
    }
  }
}

.sec-c1 {
  .container {
    padding: 0px 20px;
  }

  .custom-breadcrumb-item {
    display: inline-block;
    font-size: 11px;

    a {
      text-decoration: underline;
    }
  }

  #breadcrumb-c1 {
    display: inline-block;

    .fluid-bread {
      max-width: 210px;
      background: none;
      padding: 0px;

      .container {
        margin: 0px;
        padding: 0px;

        @media (min-width: 1200px) {
          width: 1094px;
        }

        @media (min-width: 992px) {
          width: 894px;
        }

        @media (min-width: 768px) {
          width: 674px;
        }

        .breadcrumb {
          padding-left: 0px;
          font-size: 11px;
          background: none;

          li {
            white-space: nowrap;
          }

          .active {
            margin-left: 4px;
          }

          li.active:nth-child(2) {
            @media (max-width: 767px) {
              span {
                position: absolute;
              }
            }

            @media (max-width: 390px) {
              span {
                display: inline-block;
                width: 60px;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }

          .breadcrumb-item {
            a {
              text-decoration: underline;
            }
          }

          li:before {
            padding: 0 5px;
            color: #ccc;
            content: '>\A0';
          }
        }
      }
    }
  }
}

.img-center {
  margin: 0 auto;
}

.experten-check-disabled {
  cursor: not-allowed !important;
  opacity: 0.65;
}

.has-error {
  .mat-select {
    border-color: $red !important;
  }
}

.center-outer {
  display: grid;

  .center-inner {
    margin: auto;
  }
}

.vertical-center-outer {
  display: table-cell;
  vertical-align: middle;

  .vertical-center-outer-inner {
    display: inline-block;
  }
}

.highlighter-c2 {
  border: 3px dashed $royal-blue-100;
  border-top: none;
}

.h-l-c1 {
  border-top: 1px solid #c9dcf1;
  margin: 0;
}

.same-height-col [class*='col-'] {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.same-height-col {
  overflow: hidden;
}

.slide-animation-fix {
  min-height: 1000px;
  background: $white;

  @media (max-width: 1199px) {
    min-height: 0px;
  }
}

.thumnbail-ribbon {
  position: relative;
}

/**************
VERTRÄGE, ANGEBOTE, EXPERTENCHECK
**************/

@include media-breakpoint-up(sm) {
  .vertragbox {
    margin-bottom: 3rem;
    min-height: 10rem;
  }
}

@include media-breakpoint-only(xs) {
  .vertragbox {
    margin-bottom: 1.5rem;
  }
}

.vertragbox {
  .vertragbox-inner {
    padding: 1rem;
  }

  .vertrag-close-outer {
    position: relative;
    display: inline-block;
    width: 100%;

    .vertrag-close-inner {
      position: absolute;
      right: 0;
      top: -40px;
      margin: 10px;
      display: inline-block;
    }
  }

  .price_main {
    @include font-size(20);
    color: $orange-100;
    font-weight: bold;
  }

  .price_old {
    @include font-size(20);
    color: $medium-blue-100;
    font-weight: bold;
  }
}
.cross {
  position: relative;
  display: inline-block;
}
.cross::before,
.cross::after {
  content: '';
  width: 100%;
  position: absolute;
  right: 0;
  top: 10%;
  margin-top: 10px;
}
.cross::before {
  border-bottom: 2px solid $medium-blue-100;
  -webkit-transform: skewY(-10deg);
  transform: skewY(-20deg);
}
// .cross::after {
//     border-bottom: 2px solid $medium-blue-100;
//     -webkit-transform: skewY(10deg);
//     transform: skewY(20deg);
// }
.vertragbox-blue {
  background: $lightblue;
}
.vertragbox-gray {
  background: $lightgray;
}
.vertragbox-angebot {
  background: $lightblue;
}
.vertragbox-expertenangebot {
  background: $lightgreen;
}
.vertragbox-vertrag {
  background: $lightgray;
}
.vertragbox-vertragsanfrage {
  background: #e5e6e9;
}

.ribbon {
  position: relative;
  padding: 2px 10px;
  /*height: 10%;*/
  top: 0;
  left: 0;
  z-index: 5;
}
@include media-breakpoint-down(sm) {
  .ribbon {
    max-width: 80%;
  }
}
@include media-breakpoint-between(md, lg) {
  .ribbon {
    max-width: 50%;
  }
}
@include media-breakpoint-up(lg) {
  .ribbon {
    max-width: 30%;
  }
}

.ribbon-success {
  background-color: $green;
  color: $white;
}

.ribbon-success > .ribbon-sub {
  background-color: $green;
  color: $white;
}

.ribbon-info {
  background-color: $medium-blue-100;
  color: $white;
}

.ribbon-pending {
  background-color: $white;
  color: $black;
}

.ribbon-info > .ribbon-sub {
  background-color: $medium-blue-100;
  color: $white;
}

.ribbon-sub.ribbon-clip:after,
.ribbon-sub.ribbon-clip:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent !important;
  bottom: -10px;
}

.ribbon-sub.ribbon-clip:before {
  border-width: 0 10px 10px 0;
  border-right-color: #222 !important;
  left: 0;
}

.headline-wrapper {
  background-color: #f3f5fa;
  padding: 10px;
  margin-bottom: 15px;
}

.text-right-c1 {
  @media (min-width: 992px) {
    text-align: right;
  }
}

.covomo-headline {
  color: $covomo-light-blue;
  font-size: 30px;
}

.covomo-line {
  margin-top: 0px;
  margin-bottom: 10px;
  border-top: 8px solid $covomo-green;
}

.internal-link {
  color: $royal-blue-100;
  text-decoration: underline;

  &:hover {
    background: $medium-blue-100;
  }
}

.header-bottom-border {
  border-top: 1px solid $medium-blue-100;
}

/*.card-box-bluearea {
  background-color: $royal-blue-10;
  border-left-color: $royal-blue-100;
  border-left-width: 5px;
  border-left-style: solid;

  h4 {
    color: $royal-blue-100;
  }
}*/

.success-block-no-color {
  padding: 1em;
  width: 100%;

  .success-message {
    margin-top: 0;
  }

  .success-icon {
  }
}

.success-block {
  background-color: $green;
  padding: 1em;
  width: 100%;
  position: relative;

  .success-message {
    margin-top: 0;
    color: $green;

    a {
      color: $dark-gray-100;
      font-size: 14px;
      font-weight: 100;
    }
  }

  .success-icon {
    color: $green;
  }

  .success-block-close-icon {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    padding: 10px 14px;
    color: $green;
  }
}

.warning-block {
  background-color: $red;
  padding: 1em;
  width: 100%;

  .warning-message {
    margin-top: 0;
    color: $red;
  }

  .warning-icon {
    color: $red;
  }

  .warning-block-close-icon {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    padding: 10px 14px;
    color: $red;
  }
}
// success, warning & info block media query
@media screen and (max-width: 800px) {
  .warning-block {
    .warning-message {
      width: 100%;
      text-align: center;
    }

    .warning-icon {
      width: 100%;
      text-align: center;
    }
  }

  .success-block {
    .success-message {
      width: 100%;
      text-align: center;
    }

    .success-icon {
      width: 100%;
      text-align: center;
    }
  }

  .info-block {
    .info-message {
      width: 100%;
      text-align: center;
    }

    .info-icon {
      width: 100%;
      text-align: center;
    }
  }
}
// Passwort und Email Aendern
.validation-message {
  color: $red;
}

.check-icon {
  color: $royal-blue-10;
}

.check-icon-valid {
  color: $green;
}

@media (max-width: 1505px) and (min-width: 1200px) {
  .custom-col-width {
    width: 60%;
  }

  .custom-col-width-sign {
    width: 100%;
  }
}

section.content {
  margin: 40px 15px 0 315px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media (max-width: 1199px) {
  .ls-closed section.content {
    margin: 0;
  }

  .ls-closed section.section-c1 {
    margin: 0;
  }
}

.my-drop-zone {
  text-align: center;
  color: $dark-gray-100;
  border: dotted 3px $royal-blue-100;
  background: $royal-blue-10;
  height: 250px;
  display: table-cell;
  vertical-align: middle;
}

.angebot {
  .angebot-categories {
    min-height: 150px;
    padding: 10px;
    color: $royal-blue-100;
  }
}

.point-list {
  position: relative;

  .point-list-span {
    position: absolute;
    left: 0;
    top: 0;
  }
}

.bluearea {
  background: $royal-blue-10;
  padding: 15px;
}

/*.sidewrapper {
    height: 65px;
}*/

.fa-ul-register {
  font-size: 20px;

  .fa-li {
    left: -1.742857em;
  }

  li {
    margin-bottom: 10px;
  }
}

.border-top-lightblue {
  border-top: 1px solid $royal-blue-10 !important;
}

.text-green {
  color: $green;
}

.color-dark-grey {
  color: $dark-gray-100;
}

.color-grey {
  color: $dark-gray-100;
}

.text-white {
  color: $white;
}

.note {
  background-color: $royal-blue-100;
  padding: 10px;
  color: $white;
  margin-bottom: 15px;
  position: relative;

  h4 {
    color: $white !important;
    margin-bottom: 3px !important;
  }

  .remove-icon {
    padding: 8px 10px;
    color: $white;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.form-block {
  background-color: $royal-blue-10;
  padding: 1em;
}

.contact-block {
  background-color: $bannerHXL-block-bg-c;
}

.versicherung-manager-block {
  background-color: $white;
}

.signature-block {
  background-color: $white;
}

.insurance-already-have-block {
  background-color: $royal-blue-10;
  padding: 1em;
}

.load-insurance-block {
  background: $white;
  padding: 1em;
}

.modal-form-block {
  background-color: $royal-blue-10;
}

.link-block {
  display: block;
  width: 100%;
  height: 150px;
  padding: 50px 0px;
  text-align: center;
  vertical-align: middle;
  background-color: $royal-blue-10;
  color: $royal-blue-100;

  &:hover {
    text-decoration: none;
    color: $white;
    background-color: $royal-blue-100;
  }

  i {
    margin-bottom: 4px;
  }
}

.link-block-container.active-hide {
  display: none;
}

.link-block.active {
  text-decoration: none;
  color: $royal-blue-100;
  background-color: $dark-gray-100;
}

.login-box {
  max-width: 360px;
  margin: auto;
}

.shortext {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: $dark-gray-100;
  cursor: pointer;

  &:hover {
    color: $dark-gray-100;
  }
}

.loader-container {
  position: absolute;
  margin: 140px auto;
  width: 100%;
}

.loader {
  margin: auto;
  z-index: 11;
  border: 10px solid $dark-gray-50;
  border-top: 10px solid $royal-blue-100;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

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

  100% {
    transform: rotate(360deg);
  }
}

.loader-wrapper {
  width: 50px;
  height: 50px;
  left: 40%;
  top: 40%;
  position: absolute;
}

.close {
  opacity: 1;
  font-size: 1.5rem !important;
}

/*mobile handy*/
@media (max-width: 480px) {
  .d-block-mobile {
    display: block;
  }

  .container-mobile {
    padding: 0px;
  }

  .f-s-15-m {
    font-size: 15px;
  }
}

//card Flip begin
.tp-box {
  position: relative;
  height: inherit;

  .tp-box-side {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .tp-box-front {
  }

  .tp-box-back {
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}
//card Flip end

//policy-block
.policy-block {
  .policy-box {
    .thumbnail-reset {
      padding: 0;
      width: 100%;
      border-radius: 0;
      margin-bottom: 15px;

      .delete-button {
        position: absolute;
        padding: 10px;
        cursor: pointer;
        top: 0;
        right: 6px;
        z-index: 10;

        i {
          color: $dark-gray-100;
        }
      }

      p {
        margin: 0;
      }

      .policy-box-content {
        position: relative;
        height: inherit;

        .policy-box-footer {
          padding: 5px;
          color: $white;
          width: 100%;
          background: $royal-blue-100;

          .text-center {
            padding: 7px 0px;
          }

          .checkbox-inline {
            label {
              margin: 0;
            }
          }
        }

        .policy-box-img-container {
          overflow: hidden;
          position: relative;

          img {
            width: 100%;
          }

          .img-bug-fixer-1 {
            @media (min-width: 992px) and (max-width: 1199px) {
              height: 100%;
              width: auto;
            }
          }

          .pricestartwrapper {
            position: absolute;
            background: $royal-blue-10;
            color: $dark-gray-100;
            padding: 2px 5px 0px 3px;
          }

          .pricestartwrapper-r1 {
            left: 0px;
            top: 10px;

            @media (max-width: 767px) {
              left: 10px;
            }
          }

          .pricestartwrapper-r2 {
            left: 10px;
            top: 10px;
          }
        }

        .policy-details {
          position: absolute;
          opacity: 0.7;
          background: $dark-gray-100;
          color: $white;
          margin-top: -30px;
          left: 18px;
          padding: 1px 3px;
        }

        .vergleichen {
          background-color: $royal-blue-100;
          min-height: 33px;

          .vergleichen-link-container {
            padding: 6px 0px;

            .vergleichen-link {
              color: $white;
              padding: 0px 5px;

              &:hover {
                text-decoration: none;
              }
            }
          }
        }

        .policy-image {
          height: 100px;
        }

        .times-icon {
          position: absolute;
          right: 0.3em;
          top: 0.3em;
          color: $dark-gray-100;
          border-radius: 0%;
          height: 15px;
          width: 15px;
          line-height: 16px;
        }

        .caption-custom {
          strong {
            font-size: 16px;
          }

          a {
            cursor: pointer;
          }

          p {
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              line-height: 16px; /* fallback */
              max-height: 32px; /* fallback */
              -webkit-line-clamp: 2; /* number of lines to show */
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }

    .thumbnail-back-side {
      height: 100%;

      .policy-box-footer {
        position: absolute;
        bottom: 0;

        .text-center {
          padding: 7px 0px;
        }
      }

      .scroll-bar-c2 {
        height: inherit;
        /*overflow-y: auto;*/
      }
    }
  }
}

// animating policies block if times/cross icon clicked
.policy-box-animation {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s;
}

.policy-box-animation.ng-hide {
  opacity: 0;
}

/* Extra small devices (phones, less than 480px) */
@media screen and (max-width: 480px) {
  .policy-block {
    .policy-box {
      .thumbnail-reset {
        .policy-box-content {
          .caption-custom {
            strong {
              font-size: 1em;
            }
          }

          .checkbox-inline {
            font-size: 12px;

            label {
              input[type='checkbox'] {
                margin: 2px -16px 0;
              }
            }
          }
        }
      }
    }
  }

  .fixed-block {
    .btn {
      strong {
        font-size: 15px;
      }
    }
  }
}

/****************** media queries shared or common *****************/
//md
@media (min-width: 992px) and (max-width: 1199px) {
}
//sm
@media (min-width: 768px) and (max-width: 991px) {
  /*body {
        overflow-x: hidden;
    }*/

  .modal-wide {
    width: 730px;
  }
}
//xs
@media (max-width: 767px) {
  .container-nopadding {
    padding-left: 0;
    padding-right: 0;
  }

  .btn-wide {
    min-width: 120px;
  }

  .modal-wide {
    width: inherit;
  }
}

@media (max-width: 585px) {
  .btn-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

/*************** Angular Material UI overwrite by creating custom classes or direct */
.auto-complete-field-c1 {
  mat-form-field {
    width: 100%;
  }
}

.select-field-c1 {
  mat-form-field {
    font-family: $font-family;
    width: 100%;

    .mat-form-field-wrapper {
      padding-bottom: 0px;

      .mat-form-field-underline {
        display: none;
      }

      .mat-form-field-infix {
        border-top: none;
        padding: 0;
      }

      .mat-select.has-error {
        border-color: $red;
        box-shadow: none;
      }

      .mat-select-required .mat-select-placeholder::after {
        content: none;
      }

      .mat-select {
        width: 100%;
        border: 1px solid $royal-blue-50;
        box-shadow: none;
        background: $white;
        border-radius: 4px;
        padding: 10px;
        font-family: $font-family;
        @include font-size(14);
        height: 2rem;

        .mat-select-trigger {
          min-width: 0px;
          width: 100%;

          .mat-select-value {
            .mat-select-placeholder {
              color: $dark-gray-25;
              -webkit-text-fill-color: $dark-gray-25;
            }
          }
        }
      }

      .mat-select.mat-select-invalid {
        .mat-select-arrow {
          color: $red;
        }
      }

      .mat-form-field-label-wrapper {
        .mat-form-field-label {
          display: none;
        }
      }

      .mat-form-field-placeholder-wrapper {
        top: -8px;
        left: 10px;

        .mat-form-field-placeholder {
          color: rgba(0, 0, 0, 0.54);
        }
      }
    }
  }

  .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow,
  .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
    color: $black;
  }
}

/*used for bedarfs step1*/
.select-field-c2 {
  display: inline-block;
  padding: 0px 10px;

  .mat-focused {
    .mat-form-field-flex {
      border: none;
    }
  }

  mat-form-field {
    font-family: $font-family;
    width: 100%;

    .mat-form-field-wrapper {
      padding-bottom: 0px;

      .mat-form-field-flex {
        .mat-form-field-infix {
          border-top: none;
          padding: 0;

          .mat-select {
            font-family: $font-family;
            width: 100%;
            padding: 0px;

            .mat-select-trigger {
              padding: 6px;
              padding-left: 0px;
              border-bottom: 2px dotted $black;
              width: 100%;

              .mat-select-placeholder.mat-floating-placeholder {
                display: none;
              }

              .mat-select-placeholder {
                min-width: 152px;
                text-align: left;
                color: $medium-blue-100;
                -webkit-text-fill-color: $royal-blue-100;
              }

              .mat-select-value {
                left: 5px;
                top: -3px;
                color: $royal-blue-100;

                .mat-select-value-text {
                  @include font-size(16);
                  font-weight: $font-weight-700;
                }
              }

              .mat-select-arrow {
                border-left: 3.5px solid transparent;
                border-right: 3.5px solid transparent;
                color: $royal-blue-100;
                position: absolute;
                right: -5px;
              }

              .mat-select-underline {
                display: none;
              }
            }
          }

          .mat-form-field-label-wrapper {
            display: none;
          }
        }
      }

      .mat-form-field-underline {
        display: none;
      }
    }

    .mat-input-wrapper {
      .mat-form-field-placeholder-wrapper {
        top: -18px;
        @include font-size(16);

        .mat-form-field-placeholder {
          color: $medium-blue-100;
          transform: none;
        }
      }

      .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow,
      .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-triggerr {
        color: $medium-blue-100;
      }

      .mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-placeholder {
        color: $medium-blue-100;
      }
    }
  }
}

.cdk-overlay-container {
  z-index: 1127;
}
/************************** Vendor CSS overwrite *****************************/
.scroll-bar-c1 {
  height: calc(100% - 125px);
}

.scroll-bar-c1 > .slimScrollDiv:first-of-type {
  height: 100% !important;
}

.scroll-bar-c1 > .slimScrollDiv > div:first-of-type {
  height: 100% !important;
}

.scroll-bar-c3 {
  height: 300px;
}

//ss-multiselect-dropdown css overwrite move to bedarfsstep1 when finish editing
.ss-multiselect-dropdown-1 {
  div.dropdown {
    width: 225px;
    display: inline-block;

    button.btn {
      border: none;
      border-bottom: 2px dotted $dark-gray-100 !important;
      background-color: $white !important;
      color: $royal-blue-100 !important;
      padding: 1px 6px;
      box-shadow: none;
      width: 100%;
      text-align: left;
      text-transform: capitalize;
      font-weight: 700;

      &:hover,
      &:focus,
      &:active {
        background-color: $white !important;
        color: $royal-blue-100 !important;
      }

      span.caret {
        color: $royal-blue-100 !important;
        float: right;
        margin-top: 9px;
      }
    }

    .dropdown-toggle {
      &:after {
        margin-top: 8px;
        float: right;
      }
    }

    div.dropdown-menu {
      a.dropdown-item {
        display: block;
        color: #666;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        @include font-size(14);
        line-height: 25px;
        padding: 6px 20px;
        text-decoration: none;

        &:hover {
          background-color: rgba(0, 0, 0, 0.075);
        }
      }

      a.dropdown-item.active {
        background-color: $royal-blue-100;
        color: $white;
      }
    }
  }
}

.ss-multiselect-dropdown-2 {
  div.dropdown {
    width: 100%;

    button.dropdown-toggle {
      width: 100%;
      text-align: left;
      height: 40px;

      span {
        float: right;
        margin-top: 8px;
      }
    }

    .dropdown-toggle {
      &:after {
        margin-top: 8px;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        float: right;
      }
    }

    div.dropdown-menu {
      width: 100%;

      a.dropdown-item {
        display: block;
        color: #666;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        @include font-size(14);
        line-height: 25px;
        padding: 6px 20px;
        text-decoration: none;

        &:hover {
          background-color: rgba(0, 0, 0, 0.075);
        }
      }

      a.dropdown-item.active {
        background-color: $royal-blue-100;
        color: $white;
      }
    }
  }
}

.copyright a {
  &:hover {
    text-decoration: underline;
  }
}

app-root {
  display: block;
}

.fa.fa-twitter:before {
  content: 'TWITTER';
  font-family: 'Libre Franklin', sans-serif;
}

.sb-facebook {
  background: #3b5998;
  color: #fff;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;

  .fa {
    font-weight: normal !important;
  }

  &:hover {
    background: #2d4983;
  }
}

.sb-amazon {
  background: #ff9900;
  color: #fff;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;

  .fa {
    font-weight: normal !important;
  }

  &:hover {
    background: #ff6a00;
  }
}

.sb-twitter {
  background: #1da1f2;
  color: #fff;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;

  .fa {
    font-weight: normal !important;
  }

  &:hover {
    background: #1283c8;
  }
}

.sb-whatsapp {
  background: #26d266;
  color: #fff;
  border: 0;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;

  .fa {
    font-weight: normal !important;
  }

  &:hover {
    background: #1dac52;
  }
}

.sb-wrapper {
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight: normal;
}

.fa.fa-facebook:before {
  content: 'FACEBOOK';
  font-family: 'Libre Franklin', sans-serif;
}

.fa.fa-whatsapp:before {
  content: 'WHATSAPP';
  font-family: 'Libre Franklin', sans-serif;
}
// Metronic Header Fix
.m-subheader {
  padding: 50px 15px 0px 15px;
}

/*** Boostrap Cards overwrite*****/
.card.card-type-1 {
  border: 0;

  .card-header {
    background: $dark-gray-5;
  }

  .card-body {
    padding: 1rem;
    background: $dark-gray-5;
  }
}

.card.card-type-2 {
  border: 0;

  .card-header {
    background: $white;
    padding: 10px 0px;
  }

  .card-body {
    background: $white;
    padding: 10px 0px;
  }
}

@media only screen and (min-width: 992px) {
  .root-component-container {
    min-height: 1000px;
    margin-top: 76px;
  }
}

@media only screen and (max-width: 992px) {
  .root-component-container {
    min-height: 1000px;
    margin-top: 76px;
  }
}

.deleteicon-outer {
  position: relative;

  .deleteicon-inner {
    cursor: pointer;
    position: absolute;
    right: 0;
    padding: 0.5rem;
    display: inline-block;
    z-index: 150;
    a {
      text-decoration: none !important;
    }
  }
}

.progress-wrapper {
  margin-bottom: initial;
  padding: 0.2rem;
  box-shadow: 0 0 15px 1px rgba(64, 78, 74, 0.2);
  left: -10px;
  top: 10px;

  .progress-label-wrapper {
    float: left;
    height: 22px;
    margin-right: 0.6rem;
  }

  .progress {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .progress-bar.progress-bar-blue {
    background-color: $royal-blue-100;
  }

  .progress-bar.progress-bar-orange {
    background-color: $orange-100;
  }

  .progress-bar.progress-bar-green {
    background-color: $green;
  }

  .ribbon-float {
    float: left;
    margin-right: 0.4rem;
  }
}

.expertencheck-wrapper {
  .tab-content {
    padding: 0px !important;
    margin-top: -1px;
  }

  .nav-tabs {
    border-bottom: none;
  }

  .tabset-blue,
  .tabset-green {
    .nav-link {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      padding-top: 1rem;
      padding-bottom: 1rem;
      font-size: 1rem;
      background: $royal-blue-100;
      color: $white;
      margin-right: 0.2rem;
    }
  }

  .nav-link.active {
    font-weight: bold;
    background: $lightblue;
    border: none;
    color: $royal-blue-100;
  }

  .tabset-green {
    .nav-link.active {
      background: $lightgreen;
    }
  }
}