// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.

body {overflow-x: hidden;}
a, button {&:hover {cursor: pointer !important;}}
code {color: $spacegray !important;}
.form-control::-webkit-input-placeholder { color: $input-color-placeholder; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: $input-color-placeholder; }  /* Mozilla Firefox 4 to 18 */
.form-control:-ms-input-placeholder { color: $input-color-placeholder; }  /* Internet Explorer 10-11 */

// feedback
.form-control-feedback {
  color: $pink;
  margin: .5em 0;
  text-align: left !important;
  font-size: .85em;
  font-style: italic;
}

// loading
#loading {
  width: 150px;
  height: 150px;
  display:inline-block;
  fill: white !important;
}
.loadingText {
  .display-4 {
    font-size: 1rem;
    font-weight: 400;
    padding-right: 5px;
    border-right: .1em solid $blue;
    white-space: nowrap;
    -webkit-animation: blink-caret .5s step-end infinite alternate;
    color: white;
  }
}
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

// datepicker
.datepicker__input {
  border-color: transparent !important;
  padding: 0 !important;
  text-align: left;
  color: $input-color !important;
  width: 100%;
  text-align: center;
  &::-webkit-input-placeholder { color: $input-color-placeholder; }  /* WebKit, Blink, Edge */
}

// container
#content {
    width: 100%;
    position: relative;
    padding: 0 0 65px 70px;
}

// sidebar
#sidebar {
  z-index: 1035;
  position: fixed;
  width: 70px;
  height: 100%;
  overflow-y: auto;
  background: $brand-primary;
  .menu {
    li {
      opacity: .3;
      transition: .1s ease-in;
      margin: 1.5em 0;
      text-align: center;
      &.active {
        opacity: 1;
        .bar {
          opacity: 1;
          width: 2px;
          height: 20px;
          background-color: white;
          float: right;
          position: absolute;
          margin: 11px 6px 0 6px;
        }
      }
      &:hover {
        opacity: .8;
        cursor: pointer !important;
        .bar {opacity: 0;}
      }
      img {width: 42px;}
    }
  }
  .second {
    bottom: 1%;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    li {
      margin: 1.5em 0 1em 0;
      text-align: center;
      transition: .1s ease-in;
      a {
        color: rgba($white,.6);
        &:hover {
          color:$white;
          text-decoration: none;
        }
      }
      span {font-size: 1.5em;}
    }
  }
}

// NAVBAR
#navbarBreeze {}

// jumbotron
.jumbotron {
  h5 {
    font-size: .85em;
    color: $gray;
    margin-bottom: 0;

    &.walletName {
      color: $black;
      font-size: 1em;
      font-weight: bolder;
      margin-bottom: 1.5em;
    }
  }
  p {margin-bottom: 0 !important;}
  .lead {
    color: $black;
    font-size: 1.65em;
    font-weight: 500;
    margin-bottom: 0;

    .h2 {
      font-size: 2em;
      font-weight: 600;
    }
    small {
      font-size: .5em;
      padding-left: .5em;
      font-weight: 400;
    }
  }
}

// bagdes
.badge {
  &.badge-danger {color: $pink;}
  &.badge-warning {color: $yellow;}
  &.badge-success {color: $green;}
}

// status box
.status {
  background: $white;
  width: auto;
  height: 40px;
  border: 1px solid $teal;
  box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
  border-radius: 80px;
  position: fixed;
  bottom: 2%;
  right: 2%;
  text-align: center;
  ul {
    transform: translateY(50%) translateX(0);
    display: inline-block;
    position: relative;
    padding: 0 2em;
  }
  li {
    font-size: .9em;
    position: relative;
    float: left;
    margin-right: 4px;
    .text-info {color: $gray-dark !important;}
    &.pending {
      i {
        font-size: .9em;
        color: $brand-warning;
      }
    }
    &.statusOK {
      i {
        color: $brand-success;
        font-size: .9em;
        position: absolute;
      }
    }
  }
}

// modal
.modal-header {
  .bubble {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: $white;
    border: 2px solid rgba(152,163,179,.5);
    transform: translateY(-50%);
    i {
      display: block;
      text-align: center;
      font-size: 1.5em;
      width: 50px;
      height: 50px;
      transform: translateY(25%) translateX(-3%);
    }
  }
}
.modal-body {
  .blockID {word-wrap: break-word;}
}
.modal-footer {
  .btn {
    transform: translateY(50%);
    &:hover {cursor: pointer;}
  }
}
#modalSend {
  label {
    color: $gray;
    font-size: .825em;
  }
  .float-right {a {text-decoration: underline; &:hover {text-decoration: none;}}}
  // Fee Buttons
  .radioButtons {
    .btn {border-radius: 50px;}
    .btn-outline-success,
    .btn-outline-danger,
    .btn-outline-warning {
      &:hover {color: white !important;}
    }
    .btn-outline-success,
    .btn-outline-danger,
    .btn-outline-warning {
      &.active,
      .show > &.dropdown-toggle {
        color: white !important;
        outline: none;
      }
    }
  }
  p {
    color: $blue;
    font-size: .825em;
    font-style: italic;
  }
  .btn-link {padding: 0 !important;}
  .form-group {margin-bottom: .5rem;}
}
#modalReceive {
  .myAddress {margin-bottom: 1rem;}
  .modal-body {padding: 0 3em;}
  label {
    color: $gray;
    font-size: .825em;
  }
}
#modalDetail, #modalCheck, #modalSettings {
  .blockLabel {
    color: $gray;
    font-size: .825em;
  }
  .blockText {
    color: $darkgray;
  }
}
#modalCheck {
  .lead {
    animation: 2s ease 0s normal forwards 1 fadein;
    font-size: 1em !important;
  }
  .card {animation: 3s ease 0s normal forwards 1 fadein;}
  @keyframes fadein {
    0% {opacity:0;}
    66% {opacity:0;}
    100% {opacity:1;}
  }
  .list-inline {
    margin: .25em 0 !important;
  }
}
#modalSettings {
  .modal-body {padding: 0 6em !important;}
}

// Toggle button
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196;
}

// CHECK VALIDATION
$color--green: $green;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: $color--green;
  fill: none;
  animation: stroke 1s $curve forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 4em auto 2em;
  box-shadow: inset 0px 0px 0px $color--green;
  animation: fill .4s ease-in-out .8s forwards, scale .6s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke .3s $curve .8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px $color--green;
  }
}

// Fees slider
.feeSlider {margin: 2em 0 4em;}
 .slider-tick-label-container {display: block; width: 100%; margin: 0 0 30px -70px !important;}
 .slider-tick-label {width:140px !important;}
 .slider{display:inline-block;vertical-align:middle;position:relative}
 .slider.slider-horizontal{width:280px;height:20px}
 .slider.slider-horizontal
 .slider-track{height:3px;width:100%;margin-top:-7px;top:65%;left:0}
 .slider.slider-horizontal .slider-selection,
 .slider.slider-horizontal .slider-track-low,
 .slider.slider-horizontal .slider-track-high{height:100%;top:0;bottom:0}
 .slider.slider-horizontal .slider-tick,
 .slider.slider-horizontal .slider-handle{margin-left:-10px}
 .slider.slider-horizontal .slider-tick.triangle,
 .slider.slider-horizontal .slider-handle.triangle{position:relative;top:50%;transform:translateY(-50%);border-width:0 10px 10px 10px;width:0;height:0;border-bottom-color:#0480be;margin-top:0}
 .slider.slider-horizontal .slider-tick-container{white-space:nowrap;position:absolute;top:0;left:0;width:100%}
 .slider.slider-horizontal .slider-tick-label-container{white-space:nowrap; margin-top: 30px !important;}
 .slider.slider-horizontal .slider-tick-label-container .slider-tick-label{padding-top:4px;display:inline-block;text-align:center}
 .slider.slider-horizontal.slider-rtl .slider-track{left:initial;right:0}
 .slider.slider-horizontal.slider-rtl .slider-tick,
 .slider.slider-horizontal.slider-rtl .slider-handle{margin-left:initial;margin-right:-10px}
 .slider.slider-horizontal.slider-rtl .slider-tick-container{left:initial;right:0}
 .slider.slider-vertical{height:210px;width:20px}
 .slider.slider-vertical .slider-track{width:10px;height:100%;left:25%;top:0}
 .slider.slider-vertical .slider-selection{width:100%;left:0;top:0;bottom:0}
 .slider.slider-vertical .slider-track-low,
 .slider.slider-vertical .slider-track-high{width:100%;left:0;right:0}
 .slider.slider-vertical .slider-tick,.slider.slider-vertical .slider-handle{margin-top:-10px}
 .slider.slider-vertical .slider-tick.triangle,.slider.slider-vertical .slider-handle.triangle{border-width:10px 0 10px 10px;width:1px;height:1px;border-left-color:#0480be;border-right-color:#0480be;margin-left:0;margin-right:0}
 .slider.slider-vertical .slider-tick-label-container{white-space:nowrap}
 .slider.slider-vertical .slider-tick-label-container .slider-tick-label{padding-left:4px}
 .slider.slider-vertical.slider-rtl .slider-track{left:initial;right:25%}
 .slider.slider-vertical.slider-rtl .slider-selection{left:initial;right:0}
 .slider.slider-vertical.slider-rtl .slider-tick.triangle,.slider.slider-vertical.slider-rtl .slider-handle.triangle{border-width:10px 10px 10px 0}
 .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label{padding-left:initial;padding-right:4px}
 .slider.slider-disabled .slider-handle{background-color: #ddd;}
 .slider.slider-disabled .slider-track{background-image:-webkit-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:-o-linear-gradient(top,#e5e5e5 0,#e9e9e9 100%);background-image:linear-gradient(to bottom,#e5e5e5 0,#e9e9e9 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5',endColorstr='#ffe9e9e9',GradientType=0);cursor:not-allowed}
 .slider input{display:none}
 .slider .tooltip.top{margin-top:-36px}
 .slider .tooltip-inner{white-space:nowrap;max-width:none}
 .slider .hide{display:none}
 .slider-track{position:absolute;cursor:pointer;background-image: linear-gradient(270deg, #2ECCA9 0%, #F7931A 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}
 .slider-selection{position:absolute;background-image: linear-gradient(270deg, #2ECCA9 0%, #F7931A 51%, #FF5B8A 100%);; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
 .slider-track-low {position:absolute;background-color:$gray-lighter;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
 .slider-track-high {position:absolute;background-color:$gray-lighter;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
 .slider-handle:nth-child(1) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-danger !important;}
 .slider-handle:nth-child(2) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-primary !important;}
 .slider-handle:nth-child(3) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-success !important;}
 .slider-handle.round{border-radius:50%}
 .slider-handle.triangle{background:transparent none}
 .slider-handle.custom{background:transparent none}
 .slider-tick{position:absolute;width:14px;height:14px;background-color: $white; border: 2px solid $gray-lighter;}
 .slider-tick.round{border-radius:50%}
 .slider-tick.triangle{background:transparent none}
 .slider-tick.custom{background:transparent none}
 .slider-tick.custom::before{line-height:14px;font-size:14px;content:'\2605';color:#726204}
 .slider-tick.in-selection:nth-child(1) {border-color:$brand-danger; background-color: $brand-danger;opacity:1;}
 .slider-tick.in-selection:nth-child(2) {border-color:$brand-primary; background-color: $brand-primary;opacity:1;}
 .slider-tick.in-selection:nth-child(3) {border-color:$brand-success; background-color: $brand-success;opacity:1;}

// LOGIN
.login {
  height: 100vh;
  background-image: linear-gradient(0deg, #1488C8 0%, #20B7C1 99%);
  border: 2px solid $white;
  border-top: none !important;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

  .container {
    .form-control-feedback {
      color: $white;
      margin: 1em 0;
      background-color: rgba($pink, .8);
      display: inline-block;
      padding: .3em 1em;
      border-radius: 40px;
    }
    label {
      color: $gray-lightest;
      font-size: .825em;
      text-align: left !important;
    }
    .display-5 {
      font-family: "Lato-Bold";
      font-size: 1.25em;
      color: $white;
      text-transform: uppercase;
    }
    .lead {
      font-size: 1em;
      color: rgba($gray-lighter, .9);
      font-weight: 300;
      line-height: 1.25em;
      margin: 2rem 0 .5rem 0;
    }
    .btn-darkgray {
      font-size: 1em;
    }
    .btn-linkgray {
      color: $darkgray;
      background-color: transparent !important;
      text-decoration: underline;
      &:hover {
        text-decoration: none;
        color: lighten($darkgray,10%);
      }
    }
    form {margin-bottom: 1em;}
    .textback {
      a {
        font-size: 1.5rem;
        color: $darkgray;
        text-decoration: none;
        &:hover {
          text-decoration: none;
          color: lighten($darkgray,20%);
        }
      }
    }
    .badge {
      margin: .5em auto;
      &.badge-default {
        background-color: #B6CDDE;
        color: $darkgray;
      }
    }
  }
}

// Loading spinner
.spinner {
  width: 30px;
  height: 30px;

  position: relative;
  margin: 0 auto;
  margin: 1em 0;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: $black;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

// Tumblebit
#Tumblebit {
  padding-top: 4em;
  label {
    font-size: .85em;
    color: $gray;
  }
  .btn-danger {
    color: $btn-danger-bg !important;
    background: rgba($btn-danger-bg, .4);
  }
  .table {
    font-size: 0.75rem;
    background: white;
    border: 1px solid $teal;
    box-shadow: 0 2px 10px 0 rgba(80,96,120,0.10);
    margin-bottom: 2.75em;

    .badge {
      &.badge-default {
        padding: 0.6em 1.2em;
        font-size: 1.1em;
      }
  }

    .total {
      td {font-weight: bold;}
    }
    td {color: $gray;}
    strong, th {
      margin-right: 1.2em;
      font-weight: 400;
      color: #878685;
    }
  }
}

 // QUERIES
@media screen and (max-width: 768px) {
  .jumbotron {
    .col-xs-12 {
      text-align: center !important;
      margin: .75em 0;
    }
  }
 }
