// Bootstrap
@import "../bootstrap/variables";
@import "../bootstrap/mixins";
@import "../bootstrap/grid";

// Template Color : https://flatuicolors.com/palette/defo
$nephritis : #27ae60;
$amethyst: #9b59b6;
$wisteria: #8e44ad;
$wetasphalt: #34495e;
$carrot: #e67e22;
$alizarin: #e74c3c;
$concrete: #95a5a6;
$silver: #bdc3c7;
$peterriver: #3498db;

// Assets
#form-message {
  display:none;
  padding:10px 0;
  font-weight:bold;
  color: $alizarin;
}
// Switch
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 23px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  &:before {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    left: 6px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  &.round { border-radius: 34px; }
  &.round:before { border-radius: 50%; }
}
input:checked + .slider {
  background-color: $alizarin;
}
input:focus + .slider {
  box-shadow: 0 0 1px $alizarin;
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

// Btn
.btn-submit {
  cursor:pointer;
  border:none;
  background: $concrete;
  color:#000;
  padding: 8px 25px;
  border-radius:5px;
}
.fab {
  cursor: pointer;
  width: 70px;
  height: 70px;
  background: $concrete;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  font-size: 35px;
  color: white;
  text-align: center;
  line-height: 70px !important;
  position: fixed;
  right: 50px;
  bottom: 50px;
}
.fab:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

// Background
.bg-amethyst { background: $amethyst; }
.bg-wetasphalt { background: $wetasphalt; }
.bg-carrot { background: $carrot; }
.bg-alizarin { background: $alizarin; }

// Text
.text-alizarin { color:$alizarin; }