@import url('https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap');
@font-face {
    font-family: 'Futura';
    src: url(/fonts/FuturaMediumBT.woff?303d918d0daf475a8eb82d05a7cdc04f) format("WOFF");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'futurabold';
    src: url(/fonts/futurabold-webfont.woff2?190cc742fc02469b5b89950ff4e23f7c) format("woff2"), url(/fonts/futurabold-webfont.woff?5d143ef80630635ec662137c5267bce5) format("woff"), url(/fonts/FuturaBold.ttf?4c62644b159530ff6214336f8cfb1d32) format("truetype");
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.3px;
}


$font-family: "Futura", 'Nunito', Helvetica, Arial, sans-serif;
$font-family-bold: "futurabold", 'Nunito', Helvetica, Arial, sans-serif;


$primary: #03237F;
$bg-color: #FBFBFB; //rgb(50,50,50);
$font-color: #000;
$white-font-color: #fff;
$header-font-color: #fff;
$footer-font-color: #fff;

$yellow: rgb(245,202,60);
$black: #000;
$blue-light: #2b96af;
$blue-dark: #095B92;
$purple: #CF9AD8;
$btn-green: #00FF00;

$error-color: red;

$header-title-color: $font-color;

$navbar-brand-color: $white-font-color;
$navbar-menulinks-color: $white-font-color;
$hambuger_menubars-color: $white-font-color;

$voucher_card-bg: #FBFBFB;
$voucher_card-color: #222222;
$voucher_card-title-color: $blue-dark;

$voucher_card-claimable_button-bg: $purple;
$voucher_card-claimable_button-color: $white-font-color;
$voucher_card-unclaimable_button-bg: grey;
$voucher_card-unclaimable_button-color: #D9D9D9;

$voucher_card-usable_button-bg: $btn-green;
$voucher_card-usable_button-color: $white-font-color;
$voucher_card-unusable_button-bg: grey;
$voucher_card-unusable_button-color: #D9D9D9;

$voucher_usage-bg: $primary;
$voucher_usage-color: $white-font-color;
$voucher_usage-button-bg: $btn-green;
$voucher_usage-button-color: $black;

$register-modal-bg: $primary;
$register-modal-color: $white-font-color;
$register-modal-title-color: $white-font-color;
$register-modal-button-bg: $btn-green;
$register-modal-button-color: $black;

body {
  text-rendering:optimizeLegibility;
  background-color: $bg-color;
  color: $font-color;
  font-family: $font-family;
}

h1, h2, h3{
  font-family: $font-family;
  color: $primary;
}

h4, h5, h6{
  font-family: $font-family;
  color: $black;
}

a{
  color: $font-color;
}

.color-white{
  color: $font-color;
  b{
    color: $yellow;
  }
}

.container {
  padding: 0;
}

.navbar {
  margin-bottom: 0 !important;
  //background: $primary;

  .navbar-brand {
    color: $navbar-brand-color;
    max-width: 60%;
    height: inherit;
    padding-bottom: 0;
    padding-top: 0;

    img {
      max-height: 80px;
    }
  }
  .navbar-toggler {
    padding: 0;
    .menu-bar {
      display: block;
      width: 25px;
      height: 4px;
      margin-bottom: 4px;
      position: relative;

      background: $hambuger_menubars-color;
      border-radius: 3px;
      z-index: 1;


      &:last-child {
        margin-bottom: 0px;
      }
    }
  }

  .navbar-nav {
      .nav-link{
          margin: 0;
      }

    .nav-item {
      color: $navbar-menulinks-color;


        margin: 2px 0;
        padding: 0 16px;

        @media only screen and (max-width: 991px) {
            background-color: #4F629A;
        }
      &:hover {
        text-decoration: underline;
      }
    }


    a {
      color: inherit;
    }
  }
}

.justify-space-between {
  justify-content: space-between;
}

.arrow {
  box-sizing: border-box;
  height: 7px;
  width: 7px;
  display: inline-block;
  border-style: solid;
  border-color: $font-color;
  border-width: 0px 1px 1px 0px;
  transition: border-width 150ms ease-in-out;

  &.right {
    transform: rotate(-45deg);
  }

  &.left {
    transform: rotate(135deg);
  }

  &.down {
    transform: rotate(45deg);
    margin-left: 0.3em;
    margin-bottom: 0.1em;
  }

  &.up {
    transform: rotate(-135deg);
  }
}

.tick {
  display:inline-block;

  &:after{
    /*Add another block-level blank space*/
    content: '';
    display: block;

    /*Make it a small rectangle so the border will create an L-shape*/
    width: 5px;
    height: 10px;

    /*Add a white border on the bottom and left, creating that 'L' */
    border: solid #000;
    border-width: 0 2px 2px 0;

    /*Rotate the L 45 degrees to turn it into a checkmark*/
    transform: rotate(45deg);
  }
}

.header-title {
  padding: 0 15px;
  color: $header-title-color;
  font-weight: 700;
  text-transform: uppercase;
}

// voucher_feed and register
#register-modal {
  .modal-content {
    background-color: $register-modal-bg;
    color: $register-modal-color;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
  }

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

  .modal-title {
    color: $register-modal-title-color;
  }

  .modal-body {
    padding-top: 0;
    padding-bottom: 0;
  }

  .modal-footer {
    border-top: none;
    justify-content: center;
  }

  .form {
    .form-group {
      font-size: 14px !important;
    }
    .form-control {
      font-size: 14px;
    }
    .input-group-text {
      font-size: 14px;
    }

    input {
      box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    }

    .form-text {
      &.error {
        color: $error-color;
      }
    }

    .form-check {
      .form-text {
        margin-left: -1.25rem;
      }
      .form-check-label {
        font-size: 14px;
      }
    }


    .form-group {
      .select2 {
        span {
          height: 35px;
          line-height: 35px;
          border-radius: 0.25rem 0 0 0.25rem;
          border-color: #ced4da;
        }
      }
    }


    a {
      color: inherit;
      text-decoration: underline;
    }

  }

  #register-modal-countrycode {
    cursor: pointer;
  }

  #register-modal-submit {
    background-color: $register-modal-button-bg;
    color: $register-modal-button-color;
  }
}


#register_page {
  background-color: $register-modal-bg;
  color: $register-modal-color;
  padding: 1rem;
  .form {
    .form-group {
      font-size: 14px !important;
    }
    .form-control {
      font-size: 14px;
    }
    .input-group-text {
      font-size: 14px;
    }

    input {
      box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    }

    .form-text {
      &.error {
        color: $error-color;
      }
    }

    .form-check {
      .form-text {
        margin-left: -1.25rem;
      }
      .form-check-label {
        font-size: 14px;
      }
    }


    .form-group {
      .select2 {
        span {
          height: 35px;
          line-height: 35px;
          border-radius: 0.25rem 0 0 0.25rem;
          border-color: #ced4da;
        }
      }
    }


    a {
      color: inherit;
      text-decoration: underline;
    }


    button[type="submit"] {
      background-color: $register-modal-button-bg;
      color: $register-modal-button-color;
    }

  }

  .button-container {
    text-align: center;
    margin-top: 1em;
  }

  #register-modal-countrycode {
    cursor: pointer;
  }

  #register-modal-submit {
    background-color: $register-modal-button-bg;
    color: $register-modal-button-color;
  }
}



// voucher_feed and my_vouchers


.voucher_card {

  //max-width: 400px;
    .voucher_card-wrapper {
        position: relative;
        background-color: $voucher_card-bg;
        color: $voucher_card-color;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
        border-radius: 5px;
        overflow: hidden;
        border:0;
    }
  a {
    color: inherit;
    &:hover, &:active, &:visited {
      text-decoration: underline;
    }
  }

  @media screen and (max-width: 575px) {
    //margin: auto;
  }

  .voucher_card-content {
      display: flex;
      flex-direction: column;
      font-size: .8rem;
      line-height: 1.2;
      color: #222;
      font-family: $font-family;
      padding-bottom: 30px !important;

      @media screen and (max-width: 479px) {
          font-size: .6rem;
      }
      .voucher_card-title {
          //color: $voucher_card-title-color
          color: $primary;
      }

  }

  .voucher_card-image {
      width: 100%;
      padding-top: 100%;
      //height: 210px;
      //max-height: 40vh;
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;

    @media screen and (max-width: 575px) {
      //height: calc(70vw - 1em);
    }

    @media screen and (max-width: 479px) {
      //height: 70vw;
    }
  }

  .voucher_card-tc {
      padding-bottom: 2px;
      font-size:9px;
      ol {
          padding-left: 8px;
      }

    div[data-toggle] {
      cursor: pointer;
    }

    .arrow {
      border-color: $voucher_card-color;
    }
  }

  .voucher_card-claimable, .voucher_card-unclaimable {
      padding: 8px 10px;
      text-align: center;
      cursor: pointer;
      border-radius: 0em;
      font-weight: bold;
      letter-spacing: 1px;
      position: absolute;
      bottom: 0;
      width: 100%;
      font-size: 12px;
      line-height: 1.2;
      height: 30px;
  }

  .voucher_card-claimable {
    background-color: $voucher_card-claimable_button-bg;
    color: $voucher_card-claimable_button-color;
  }

  .voucher_card-unclaimable {
    background-color: $voucher_card-unclaimable_button-bg;
    color: $voucher_card-unclaimable_button-color;
  }


  .voucher_card-usable {
    background-color: $voucher_card-usable_button-bg;
    color: $voucher_card-usable_button-color;
  }

  .voucher_card-unusable {
    background-color: $voucher_card-usable_button-bg;
    color: $voucher_card-usable_button-color;
  }

}

.ui-loader {
  display: none;
}

#usemy_vouchers{
    .voucher_card-claimable {
        //border-radius: 20px;
        background-color: $btn-green;
        color: $black;
    }
}


#usemy_vouchers-13DIGIT {

  .voucher_card {

    .voucher_card-claimable, .voucher_card-unclaimable {
      border-radius: 0;
    }

    .voucher_card-claimable {
      touch-action: none;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        // border-width: 0 16px 16px 0;
        // border-style: solid;
        // border-color: rgba($voucher_card-claimable_button-color, 1) $bg-color;
        height: 16px;
        width: 16px;
        background: linear-gradient(
                        to top right,
                        $voucher_card-claimable_button-color 0%,
                        $voucher_card-claimable_button-color 50%,
                        $bg-color 50%,
                        $bg-color 100%
        );
        //box-shadow: 0 2px 2px rgba(0,0,0,0.2), -2px 2px 2px rgba(0,0,0,0.1);
        transition: height 200ms ease, width 200ms ease;
      }



      &.swiped {
        &::before {
          height: 100%;
          width: 100%;
          background: $voucher_card-claimable_button-color;
          box-shadow: none;
          transition: height 200ms ease, width 200ms ease;
        }
      }
    }
    .voucher_card-tc {
      padding-bottom: 0;
    }
  }
}

.voucher_single-claimable{

  background-color: $voucher_card-claimable_button-bg !important;
  color: $voucher_card-claimable_button-color !important;
}

#header{
  background: $primary;
  color: $header-font-color;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-sizing: content-box;
  a{
    color: $header-font-color;
  }
}

.search-input{
    max-width:300px;
    width:300px;
  text-align: center;
  border-radius: 10px 10px;
  height: 30px;
  border: 0;
  color: $black;
  background: white;
  display: flex;
  padding-right: 10px;
  input{
    width: 100%;
    border: 0;
    margin-left: 10px;
  }
  i{
    color: white;
    vertical-align: middle;
  }
  button{
    margin: auto;
    width: 45px;
    height: 100%;
    background: #2b96af;
    margin: auto;
    text-align: center;
    right: 0;
    margin-right: -10px;
    border-radius: 0 10px 10px 0;


  }

    @media only screen and (max-width: 576px) {
        width: 100%;
    }
}

#content_div{
  color: initial;
  min-height: 100vh;
}
placeholder{
  color: #757575;
}

footer{
    font-size: .8rem;
    color: $footer-font-color;
    padding: 2px;
    line-height: 1.2;
    //padding: 50px 80px;
  background-color: $primary;
  b{
      color: $yellow;
    }

    @media screen and (max-width: 575px) {
        padding: 0;
        .img-fluid {
            width: 50px !important;
            //margin-right: 10px;
        }
        font-size: 9px;
    }
}

@media screen and (max-width: 575px) {
  .m-sm-auto {
    margin: auto !important;
  }
}