@import "ipw_variables.less";

.no-padding-left {
  padding-left: 0;
}

.no-padding-right {
  padding-right: 0;
}

.btn-cta {
  background   : #333;
  color        : #fff;
  border       : 2px solid #333;
  border-radius: 20px;
  padding      : 6px 14px;
  position     : relative;

  &.btn-cta-w-icon {
    padding: 6px 14px 6px 40px;
  }

  .btn-cta-icon {
    position     : absolute;
    left         : 3px;
    top          : 3px;
    width        : 26px;
    height       : 26px;
    line-height  : 26px;
    border-radius: 50%;
    color        : #333;
    background   : #fff;
  }
}

.btn-cta-invert {
  border       : 2px solid #333;
  color        : #333;
  padding      : 5px 10px;
  background   : #fff;
  border-radius: 20px;
  padding      : 6px 14px;
  position     : relative;

  &.btn-cta-w-icon {
    padding: 6px 14px 6px 40px;
  }

  .btn-cta-icon {
    position     : absolute;
    left         : 3px;
    top          : 3px;
    width        : 26px;
    height       : 26px;
    line-height  : 26px;
    border-radius: 50%;
    background   : #333;
    color        : #fff;
  }
}

.rw-star {
  color      : #ff5a5f;
  font-weight: bold;
  font-family: sans-serif;

  &.rw-star-lg {
    font-size: 160%;
  }
}

.top-nav-container {
  position: fixed;
  top     : 0;
  width   : 100%;
  z-index : 999;

  .top-nav-bar-primary {
    background: #222;
    padding   : 13px 0;
    height    : 90px;

    @media @mobile {
      height: 75px;
    }

    .col-site-logo {
      padding-right: 0;
      max-width    : 80px;
    }

    a.site-logo {
      display: block;

      img {
        max-width    : 100%;
        max-height   : 64px;
        border-radius: 4px;
      }
    }

    .site-name {
      color      : #fff;
      font-size  : 26px;
      line-height: 34px;
      margin     : 0 0 5px 0;

      @media @mobile {
        line-height  : 20px;
        font-size    : 20px;
        white-space  : nowrap;
        text-overflow: ellipsis;
        overflow     : hidden;
        margin       : 0 0 10px 0;
      }
    }

    .site-nav {
      margin-bottom: 0;

      >li {
        padding-right: 8px;
      }

      >li>a {
        color         : #eee;
        text-transform: uppercase;
        font-size     : 13px;
        padding       : 3px 0;
        border-radius : 0;

        &:focus,
        &:hover {
          background     : transparent;
          text-decoration: none;
          border-bottom  : 3px #fff solid;
          color          : #fff;
        }
      }

      >li.active>a,
      >li.active>a:focus,
      >li.active>a:hover {
        background     : transparent;
        text-decoration: none;
        border-bottom  : 3px #fff solid;
        color          : #fff;
      }

      @media @mobile {
        white-space: nowrap;
        overflow-y : hidden;
        overflow-x : scroll;

        >li {
          padding-right: 5px;
        }

        a.navigation-item {
          font-size: 12px;
        }
      }
    }
  }

  .top-nav-bar-secondary {
    background-color: rgba(255, 255, 255, 0.8);
    padding         : 7px 0;
    box-shadow      : 0px 3px 5px rgba(255, 255, 255, 0.1);
  }
}

.top-nav-inner-container {
  position        : fixed;
  top             : 0;
  left            : 0;
  right           : 0;
  padding         : 10px;
  background-color: #333;
  z-index         : 999;

  .site-name {
    margin       : 0 0 10px;
    color        : #fff;
    font-size    : 22px;
    line-height  : 26px;
    white-space  : nowrap;
    text-overflow: ellipsis;
    overflow     : hidden;
  }
}

.section-header-primary {
  @media @mobile {
    font-size: 24px;
  }
}

.section-header {
  font-weight: bold;
  margin     : 0px 25px 20px 25px;

  @media @mobile {
    font-size: 20px;

    small {
      font-size: 13px;
    }
  }
}

.blueimp-gallery>.indicator>li {
  width : 12px !important;
  height: 12px !important;

  @media @mobile {
    width: 6px !important;
    height: 6px !important;
  }
}

.modal.im-modal {
  z-index: 1621;

  .im-modal-whatsapp-btn {
    background: #1ebea5;
  }

  .iti {
    display: block;
  }
}

.modal-backdrop.in.im {
  z-index: 1620;
}

.modal {

  .modal-dialog,
  .modal-content {
    @media @mobile {
      height  : 90%;
    }
    overflow: hidden;

    .modal-header {
      padding      : 15px;
      border-bottom: none;
      background   : #26abac;
      color        : white;

      button.close {
        font-size  : 36px;
        padding    : 0;
        color      : whitesmoke;
        opacity    : 0.9;
        font-weight: 300;
        line-height: 26px;
      }
    }

    .modal-body {
      max-height: ~"calc(100% - 55px)";
      overflow-y: auto;
      overflow-x: hidden;

      >ul.list-unstyled {
        li> {
          a.btn-cta {
            margin-bottom: 6px;
          }

          .list-section-label {
            padding: 15px 0px 8px;
            font-size: 12px;
          }
        }
      }
    }
  }
}

.enquiry-modal {
  padding: 10px;

  .modal-dialog {
    width     : 800px;
    margin-top: 50px;

    @media @mobile {
      width : 100%;
      margin: 0px;
    }

    .modal-header {
      background-color: #26abac;

      .modal-title {
        color: #fff;
      }
    }

    .modal-body {
      h3 {
        text-align: center;
        font-size : 24px;
        padding   : 0px 0px 20px;
      }

      .clinic-enquiry-link {
        background-color: #fff;
        color           : #333;
        padding         : 10px;
        display         : block;
        height          : 70px;
        margin-bottom   : 10px;

        .clinic-item {
          width: 75%;

          .clinic-name {
            font-size  : 14px;
            font-weight: bold;
            line-height: 16px;
          }

          .clinic-location {
            color    : #333;
            font-size: 12px;
          }
        }

        .btn-enquiry-cta {
          background-color: #002e34;
          width           : 48px;
          height          : 48px;
          border-radius   : 50%;
          text-align      : center;
          margin-right    : 7px;

          .glyphicon {
            font-size  : 24px;
            line-height: 48px;
            text-align : center;
            color      : #fff;
          }
        }
      }
    }
  }
}

.contact-container {
  position        : fixed;
  bottom          : 0;
  left            : 0;
  right           : 0;
  padding         : 7px 0 13px;
  width           : 100%;
  background-color: #182450;
  ;
  box-shadow: 0px 0px 5px #fff;
  z-index   : 100;

  .contact-content {
    padding: 0;
    margin : 0;

    .mobile-cta-icon {
      color        : #fff;
      padding      : 5px;
      border-radius: 10px;
      text-align   : center;
      font-size    : 12px;
      display      : block;
      width        : 50px;
      height       : 50px;
      font-size    : 32px;
      line-height  : 50px;
    }
  }
}