.color-black {
  color: #8A8A8A; }

.color-light-grey {
  color: #DBDADA; }

.color-primary {
  color: #005493; }

.color-secondary {
  color: #04ACD3; }

.color-text-primary {
  color: #000000; }

.color-text-secondary {
  color: #8A8A8A; }

#main #content-wrap {
  padding-top: 0 !important; }

.ui-datepicker-calendar {
  margin-bottom: 0 !important; }

.widget-no-margin {
  margin-bottom: 0 !important; }

.webcam-wrap {
  line-height: 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }
  .webcam-wrap .cam-top {
    width: 100%;
    min-height: 250px;
    position: relative;
    background-size: cover !important; }
    .webcam-wrap .cam-top__play {
      height: 75px;
      width: 75px;
      display: inline-block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url("../img/Layer 74@2x.png") no-repeat center center;
      background-size: cover;
      position: absolute;
      cursor: pointer; }
    .webcam-wrap .cam-top__status {
      height: 25px;
      width: 25px;
      background: url("../img/signal-white.svg") no-repeat center center;
      background-size: contain;
      position: absolute;
      bottom: 15px;
      right: 15px; }
      .webcam-wrap .cam-top__status.no-signal {
        background: url("../img/no-signal-white.svg") no-repeat center center; }
  .webcam-wrap .cam-info {
    width: 100%;
    height: auto;
    padding: 5px 10px;
    box-sizing: border-box;
    background: #ffffff;
    line-height: 30px;
    display: inline-block;
    overflow: hidden; }
    .webcam-wrap .cam-info__loc {
      width: 100%;
      float: left;
      font-size: 21px;
      text-decoration: underline;
      padding-right: 5px;
      box-sizing: border-box; }
    .webcam-wrap .cam-info__metadata {
      width: 65%;
      float: left; }
      .webcam-wrap .cam-info__metadata .cam-meta {
        padding-left: 15px;
        margin-right: 3px;
        display: inline-block;
        position: relative;
        font-size: 15px;
        min-width: 1px;
        min-height: 1px;
        float: left; }
        .webcam-wrap .cam-info__metadata .cam-meta::before {
          content: '';
          height: 20px;
          width: 15px;
          display: inline-block;
          background-size: 10px;
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%); }
        .webcam-wrap .cam-info__metadata .cam-meta.r22deg::before {
          transform: translateY(-50%) rotate(22deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r43deg::before {
          transform: translateY(-50%) rotate(43deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r67deg::before {
          transform: translateY(-50%) rotate(67deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r90deg::before {
          transform: translateY(-50%) rotate(90deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r112deg::before {
          transform: translateY(-50%) rotate(112deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r135deg::before {
          transform: translateY(-50%) rotate(135deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r165deg::before {
          transform: translateY(-50%) rotate(165deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r180deg::before {
          transform: translateY(-50%) rotate(180deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r205deg::before {
          transform: translateY(-50%) rotate(205deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r225deg::before {
          transform: translateY(-50%) rotate(225deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r248deg::before {
          transform: translateY(-50%) rotate(248deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r270deg::before {
          transform: translateY(-50%) rotate(270deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r292deg::before {
          transform: translateY(-50%) rotate(292deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r315deg::before {
          transform: translateY(-50%) rotate(315deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.r338deg::before {
          transform: translateY(-50%) rotate(338deg); }
        .webcam-wrap .cam-info__metadata .cam-meta.x2::before {
          background-size: 15px; }
        .webcam-wrap .cam-info__metadata .cam-meta.mph::before {
          background-image: url("../img/speed.svg"); }
        .webcam-wrap .cam-info__metadata .cam-meta.rainfall::before {
          background-image: url("../img/raindrop.svg"); }
        .webcam-wrap .cam-info__metadata .cam-meta.sail::before {
          background-image: url("../img/Layer 149.png"); }
        .webcam-wrap .cam-info__metadata .cam-meta.rating::before {
          width: 50px;
          background-size: 50px;
          background-image: url("../img/Layer 90.png"); }

.tide-times-wrap {
  width: 100%;
  height: auto;
  display: inline-block;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  background: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 15px; }
  .tide-times-wrap .tide-times__head {
    width: 100%;
    height: auto;
    border-bottom: 2px solid #005493;
    display: inline-block;
    padding: 5px 0; }
    .tide-times-wrap .tide-times__head .sunrise,
    .tide-times-wrap .tide-times__head .sunset {
      width: 40%;
      float: left;
      font-size: 16px;
      font-weight: bold;
      color: #005493; }
      .tide-times-wrap .tide-times__head .sunrise img,
      .tide-times-wrap .tide-times__head .sunset img {
        max-height: 20px; }
    .tide-times-wrap .tide-times__head .icon-holder {
      width: 20%;
      float: left;
      text-align: center;
      display: inline-block; }
      .tide-times-wrap .tide-times__head .icon-holder img {
        max-height: 20px;
        margin: 0 auto; }
    .tide-times-wrap .tide-times__head .sunset {
      text-align: right; }
  .tide-times-wrap .tide-times__body {
    width: 100%;
    height: auto;
    display: inline-block; }
    .tide-times-wrap .tide-times__body .current-day,
    .tide-times-wrap .tide-times__body .next-day {
      width: 100%;
      float: none;
      box-sizing: border-box; }
      .tide-times-wrap .tide-times__body .current-day .day-head,
      .tide-times-wrap .tide-times__body .next-day .day-head {
        font-size: 18px;
        color: #8A8A8A; }
      .tide-times-wrap .tide-times__body .current-day table.table-tide-times,
      .tide-times-wrap .tide-times__body .next-day table.table-tide-times {
        margin: 10px 0 0 !important; }
        .tide-times-wrap .tide-times__body .current-day table.table-tide-times thead th,
        .tide-times-wrap .tide-times__body .next-day table.table-tide-times thead th {
          color: #005493;
          font-weight: bold;
          font-size: 16px;
          text-transform: capitalize; }
        .tide-times-wrap .tide-times__body .current-day table.table-tide-times tr,
        .tide-times-wrap .tide-times__body .next-day table.table-tide-times tr {
          border: none; }
          .tide-times-wrap .tide-times__body .current-day table.table-tide-times tr th, .tide-times-wrap .tide-times__body .current-day table.table-tide-times tr td,
          .tide-times-wrap .tide-times__body .next-day table.table-tide-times tr th,
          .tide-times-wrap .tide-times__body .next-day table.table-tide-times tr td {
            padding: 2px;
            border: none; }

.glive-icon {
  width: auto;
  height: auto;
  min-height: 1px;
  min-height: 1px;
  margin-left: 3px;
  display: inline-block;
  float: left; }
  .glive-icon.float-none {
    float: none; }
  .glive-icon::before {
    content: '';
    display: inline-block;
    height: 30px;
    width: 20px;
    margin-right: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle; }
  .glive-icon.tiny {
    margin-left: 0; }
    .glive-icon.tiny::before {
      height: 20px;
      width: 12px; }
  .glive-icon.paddleboarder::before {
    background-image: url("../img/Layer 93@2x.png"); }
  .glive-icon.surfer::before {
    background-image: url("../img/surf.svg"); }
  .glive-icon.tide-up::before {
    background-image: url("../img/tide-up.svg"); }
  .glive-icon.tide-down::before {
    background-image: url("../img/tide-down.svg"); }
  .glive-icon.water::before {
    background-image: url("../img/water.svg"); }
  .glive-icon.wind::before {
    background-image: url("../img/wind.svg"); }
  .glive-icon.info::before {
    background-image: url("../img/info.svg"); }
  .glive-icon.buoy::before {
    background-image: url("../img/buoy.svg"); }
  .glive-icon.speed::before {
    background-image: url("../img/speed.svg"); }
  .glive-icon.rating::before {
    background-position: center left;
    background-size: 15px;
    background-image: url("../img/star.svg"); }
  .glive-icon.rating.x::before, .glive-icon.rating.x1::before {
    background-repeat: no-repeat;
    width: 15px; }
  .glive-icon.rating.x2::before {
    background-repeat: repeat-x;
    width: 30px; }
  .glive-icon.rating.x3::before {
    background-repeat: repeat-x;
    width: 45px; }
  .glive-icon.rating.x4::before {
    background-repeat: repeat-x;
    width: 60px; }
  .glive-icon.rating.x5::before {
    background-repeat: repeat-x;
    width: 75px; }

.table-all-tide-data thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 100px;
  z-index: 99999 !important; }

.live-surf-time {
  width: 100%;
  height: auto;
  display: inline-block;
  padding-bottom: 20px; }

.live-surf-conds {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .live-surf-conds .item {
    background-color: #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    text-align: center;
    vertical-align: middle;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    flex: calc( (100% - (10px * 3))/4);
    margin: 0 10px 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .live-surf-conds .item:last-child {
      margin-right: 0; }
    .live-surf-conds .item__title {
      font-size: 20px;
      color: #8A8A8A; }
    .live-surf-conds .item__icon img {
      height: 30px;
      width: auto;
      margin: 5px auto; }
    .live-surf-conds .item__value {
      font-size: 22px;
      color: #000000;
      font-weight: 300; }
    .live-surf-conds .item__note {
      font-size: 21px;
      font-weight: 300; }

.surf-report {
  width: 100%;
  height: auto;
  display: inline-block;
  background: #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  padding: 20px; }
  .surf-report__item {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #DBDADA;
    display: inline-block;
    padding: 0 0 10px 0;
    margin: 0 0 10px;
    box-sizing: border-box; }
    .surf-report__item:last-child {
      border-bottom: none;
      margin-bottom: 0; }
  .surf-report__title {
    font-weight: bold;
    font-size: 16px;
    color: #005493;
    width: 100%; }
  .surf-report__data div {
    float: left; }
    .surf-report__data div .label {
      width: 100%;
      display: inline-block;
      color: #A2A2A2;
      font-size: 15px;
      min-width: 1px;
      min-height: 1px; }
    .surf-report__data div .value {
      font-size: 16px;
      color: #000000; }
  .surf-report__data-swell {
    width: 25%; }
  .surf-report__data-windstyle {
    width: 35%; }
  .surf-report__data-rating {
    width: 40%;
    text-align: right; }
    .surf-report__data-rating .value {
      float: right; }

.section-head {
  width: 100%;
  display: inline-block; }
  .section-head div {
    display: inline-block;
    float: left; }
  .section-head__title {
    width: calc(100% - 30px); }
    .section-head__title h2 {
      margin-bottom: 0;
      padding-bottom: 0; }
  .section-head__info {
    width: 30px; }

div[class^='col-'] {
  height: auto;
  display: inline-block;
  float: left;
  box-sizing: border-box; }

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

.col-one-third {
  width: 33%; }

.col-two-third {
  width: 67%; }

.col-half {
  width: 50%; }

.col-full {
  width: 100%; }

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

.live-w-station {
  width: 100%;
  height: auto;
  display: inline-block; }
  .live-w-station__title {
    width: 100%;
    height: auto;
    display: inline-block; }
  .live-w-station__content {
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }
    .live-w-station__content .item {
      width: 100%;
      height: auto;
      display: inline-block;
      border-bottom: 1px solid #DBDADA;
      padding: 5px 0 10px; }
      .live-w-station__content .item:last-child {
        border-bottom: none;
        padding-bottom: 0; }
      .live-w-station__content .item .left {
        width: 60%;
        display: inline-block;
        float: left; }
      .live-w-station__content .item .right {
        width: 40%;
        display: inline-block;
        float: left; }
        .live-w-station__content .item .right .top,
        .live-w-station__content .item .right .bottom {
          width: 100%;
          display: inline-block; }
      .live-w-station__content .item img.cloud-rain {
        max-width: 60px;
        height: auto;
        margin-right: 10px;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 8px; }
      .live-w-station__content .item .text-large {
        color: #000000;
        font-size: 60px;
        font-weight: 300;
        line-height: 60px; }
      .live-w-station__content .item div {
        box-sizing: border-box;
        display: inline-block;
        float: left; }
      .live-w-station__content .item .label {
        color: #005493;
        font-weight: bold;
        width: 20%; }
        .live-w-station__content .item .label .live-tag {
          color: #FF0000;
          display: inline-block;
          padding: 3px 10px;
          border: 1px solid #FF0000;
          border-radius: 3px;
          font-size: 12px;
          line-height: 12px;
          margin-left: 5px; }
          .live-w-station__content .item .label .live-tag::before {
            content: "";
            height: 4px;
            width: 4px;
            border-radius: 100%;
            background-color: #FF0000;
            margin-right: 3px;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block; }
      .live-w-station__content .item .value {
        color: #005493;
        width: 20%; }
      .live-w-station__content .item .note {
        color: #8A8A8A;
        width: 60%; }

.webcam-details {
  width: 100%;
  height: auto;
  display: inline-block;
  background: #ffffff;
  padding: 35px 10px 10px;
  box-sizing: border-box; }
  .webcam-details .item {
    width: auto;
    display: inline-block;
    float: left;
    margin-right: 15px; }
    .webcam-details .item .label {
      color: #8A8A8A;
      width: 100%;
      display: inline-block; }
    .webcam-details .item .glive-icon {
      color: #000000; }

/* Webcam Tooltips */
.glive-webcam-frame {
  position: relative; }
  .glive-webcam-frame .top-tooltip,
  .glive-webcam-frame .bottom-tooltip {
    top: -30px;
    right: 5px;
    background-color: rgba(4, 172, 212, 0.22);
    background-size: 12px;
    background-position: right bottom;
    color: #005493;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 12px;
    display: inline-block;
    position: absolute; }
    .glive-webcam-frame .top-tooltip::after,
    .glive-webcam-frame .bottom-tooltip::after {
      content: "";
      height: 15px;
      width: 15px;
      position: absolute;
      background-image: url("../img/arrow-down.png");
      background-size: 12px;
      background-repeat: no-repeat;
      background-position: bottom right;
      display: inline-block;
      bottom: -5px;
      right: 10px; }
  .glive-webcam-frame .bottom-tooltip {
    top: inherit;
    bottom: -30px; }
    .glive-webcam-frame .bottom-tooltip::after {
      bottom: inherit;
      top: -5px;
      right: 43px;
      transform: rotate(180deg); }

.clickable {
  cursor: pointer; }

.gowerlive-table-wrap {
  width: 100%;
  height: auto;
  overflow-x: auto; }
  .gowerlive-table-wrap table tr:nth-child(odd) {
    background-color: #fafafa; }
  .gowerlive-table-wrap table tr th {
    background-color: #005493;
    color: #ffffff;
    padding: 7px 5px !important; }
  .gowerlive-table-wrap table tr td {
    padding: 7px 5px !important; }

#ui-datepicker-div {
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 99999 !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  #ui-datepicker-div .ui-datepicker-next {
    float: right; }
  #ui-datepicker-div .ui-datepicker-next,
  #ui-datepicker-div .ui-datepicker-prev {
    cursor: pointer; }
  #ui-datepicker-div .ui-datepicker-title {
    text-align: center; }
  #ui-datepicker-div table tr td {
    padding: 5px !important; }

.gowerlive-form-wrap {
  width: 100%;
  height: auto;
  display: inline-block;
  background-color: #ffffff;
  margin-bottom: 20px;
  padding: 20px;
  box-sizing: border-box; }
  .gowerlive-form-wrap .item {
    margin-bottom: 5px;
    display: inline-block; }

.gowerlive-pagination-wrap {
  width: 100%;
  height: auto;
  display: inline-block;
  text-align: center; }
  .gowerlive-pagination-wrap ul {
    width: auto !important; }
    .gowerlive-pagination-wrap ul li span, .gowerlive-pagination-wrap ul li a {
      border-color: #005493 !important; }
    .gowerlive-pagination-wrap ul li span.current {
      background-color: #005493;
      color: #ffffff; }

.mobile-full-width {
  display: inline-block !important; }

@media screen and (max-width: 768px) {
  .text-right {
    text-align: left !important; }
  .live-surf-conds .item {
    flex: 50%;
    margin: 0; }
  .live-w-station .item .left,
  .live-w-station .item .right {
    width: 100%;
    float: none; }
  .live-w-station .item .label {
    width: 40%; }
  .live-w-station .item .value {
    width: 60%; }
  .live-w-station .item .note {
    width: 100%; }
  .webcam-wrap .cam-info {
    padding: 5px; }
    .webcam-wrap .cam-info__metadata, .webcam-wrap .cam-info__loc {
      width: auto; }
  .tide-times-wrap .tide-times__body table {
    margin-bottom: 10px; }
  .tide-times-wrap .tide-times__body .current-day,
  .tide-times-wrap .tide-times__body .next-day {
    width: 100%;
    padding: 0;
    border: none; }
  .glive-webcam-frame {
    margin-top: 35px; }
  .mobile-no-padding {
    padding: 0 !important; }
  .elementor-tab-mobile-title {
    border-bottom: 1px solid #04ACD3 !important; } }

@media screen and (max-width: 768px) and (orientation: portrait) {
  .webcam-details .item {
    width: 100%;
    margin-right: 0; }
  .gowerlive-tide-search-submit {
    padding: 12px 15px !important; } }