// Shadows
.shadowIt(@opa) {
    -moz-box-shadow: 0 0 10px 10px rgba(0,0,0,@opa);
    -webkit-box-shadow: 0 0 10px 10px rgba(0,0,0,@opa);
    box-shadow: 0 0 10px 10px rgba(0,0,0,@opa);
}

.snb {
    .shadowIt(0.5);
}

.shb, footer, .navbar-inverse {
    .shadowIt(0.3);
}


// Texts
@mainFont: "Cairo";
@headerFont: "Changa";

.main-text, .ar2, p, .pagination {
    font-family: @mainFont !important;
}

.header-text, .ar1, h1, h3, h2, a > strong, div > u, div > b, .btn, button, .navbar {
    font-family: @headerFont !important;
}


// General fixes
.hide {
    display: none;
}

a {
    text-decoration: none !important;
    cursor: pointer;
    &:hover {
        text-decoration: none !important;
        cursor: pointer;
    }
}

.modal-body > center > img {
  height: 60%;
}

footer, footer > .row {
  width: 100% !important;
}

label {
  margin-top: 1.5% !important;
  margin-bottom: 0.5% !important;
  margin-left: 1% !important;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.coat {
  background: rgba(0,0,0,0.85);
  border-radius: 30%;
}

.dropdown-header {
  text-align: center;
  .ar2;
}

hr {
  width: 90%;
  margin-left: 5%;
  margin-top: 3%;
  margin-bottom: 3%;
}

.rmCurs * {
    cursor: default !important;
}

// Effects
@eDuration: 0.3s;
@eDelay: 0.1s;

.animateDo {
    transition: all @eDuration ease-in-out;
    transition-property: all;
    transition-duration: @eDuration;
    transition-timing-function: ease-in-out;
    transition-delay: @eDelay;
    cursor: pointer;
}

.lightit, .navbar-brand, i {
    &:hover {
        filter: brightness(2.5);
        .animateDo;
    }
}

#map {
    &:hover {
      opacity: 0.6;
      .animateDo;
    }
}


// Navbar
.navbar-inverse {
  background: rgba(0,0,0,0.6);
  font-size: large;
  z-index: 999;
  -webkit-transition: background .5s ease-in-out, opacity .5s ease;
  -moz-transition: background .5s ease-in-out, opacity .5s ease;
  transition: background .5s ease-in-out, opacity .5s ease;
  margin-bottom: 3%;
}


// Buttons
@bDarken: 10%;
@bPrimary: #337ab7;
@bWarning: #419641;
@bDanger: #ff003c;

.animateBtn {
    transition: all 0.2s ease-in-out;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.shadowBtn(@col) {
    border: none;
    box-shadow: 0 4px 0 0 @col;
}
.effectBtn(@cols) {
    background-color: @cols;
    box-shadow: none;
    margin-bottom: -4px;
    margin-top: 4px;
}

.btn-primary, .btn-info {
    .animateBtn;
    background: @bPrimary;
    .shadowBtn(lighten(@bPrimary, @bDarken));
    &:active {
        .effectBtn(darken(@bPrimary, @bDarken));
    }
    &:focus, &:hover {
        background: lighten(@bPrimary, @bDarken);
    }
}

.btn-danger {
    .animateBtn;
    background: @bDanger;
    .shadowBtn(lighten(@bDanger, @bDarken));
    &:active {
        .effectBtn(darken(@bDanger, @bDarken));
    }
    &:focus, &:hover {
        background: lighten(@bDanger, @bDarken);
    }
}

.btn-warning {
    .animateBtn;
    background: @bWarning;
    .shadowBtn(lighten(@bWarning, @bDarken));
    &:active {
        .effectBtn(darken(@bWarning, @bDarken));
    }
    &:focus, &:hover {
        background: lighten(@bWarning, @bDarken);
    }
}

// Alerts
@fadingPercent: 0.2;

.alert {
    margin: 15px;
    background-color: rgba(255, 255, 255, 0.76) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    margin-bottom: 2%;
    box-shadow: 0 0 4px 4px rgba(128, 128, 128, @fadingPercent);
}

.alert > .close {
    opacity: 1 !important;
}

.alert-info {
    border-color: @bPrimary;
}

.alert-danger {
    border-color: @bDanger;
}

.alert-success {
    border-color: @bWarning;
}

.alert-info > h4 > strong, .alert.info > .close {
    color: @bPrimary;
}

.alert-danger > h4 > strong, .alert-danger > button.close {
    color: @bDanger;
}

.alert-success > h4 > strong, .alert-success > button.close {
    color: @bWarning;
}
