/*LAYOUT*/
$icon-offcanvas-width: 38px !default;
$icon-offcanvas-height: 16px !default;
$offcanvas-width: 300px !default;
$out-transition: 350px !default;
$brand-warning: #0275D8;
$primary-color: #0275D8;
$link-color: #0275D8;
$main-color: #FF9C00;
$danger-color: #d9534f;



@mixin transitonFade() {
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); // IE9 only
      -o-transform: translate($x, $y);
      transform: translate($x, $y);
    }
    @mixin translate3d($x, $y, $z) {
      -webkit-transform: translate3d($x, $y, $z);
      transform: translate3d($x, $y, $z);
    }
    @mixin rotate($degrees) {
      -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
      -o-transform: rotate($degrees);
      transform: rotate($degrees);
    }
    @mixin rotateX($degrees) {
      -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees); // IE9 only
      -o-transform: rotateX($degrees);
      transform: rotateX($degrees);
    }
    @mixin rotateY($degrees) {
      -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees); // IE9 only
      -o-transform: rotateY($degrees);
      transform: rotateY($degrees);
    }
    @mixin transition($transition...) {
      -webkit-transition: $transition;
      -o-transition: $transition;
      transition: $transition;
    }

    @font-face {
     font-family: 'Helvetica Neue';
     src: url(../font/helveticaneue.ttf);
   }
   @font-face {
     font-family: 'Helvetica Neue';
     src: url(../font/helveticaneuebold.ttf);
     font-weight: bold;
   }

   img{
     max-width: 100%;
   }
   input[type=range] {
    height: 100%;
  }
  input[type=range]::-moz-range-track {
    height: 5px;
    width: 100%;
    background: rgba(78,78,76,0.2);
    cursor: pointer;
  }
  input[type=range]::-moz-focus-outer {
    border: 0;
  }
  input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    width: 90%;
    background: rgba(78,78,76,0.2);
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    margin-top: -5px;
  }
  input[type=range]::-moz-range-thumb {
    margin-top: -5px;
  }

  .jsn-main-content .mouseover {
    -webkit-transition : border 0.25s ease-out !important;
    -moz-transition : border 0.25s ease-out !important;
    -o-transition : border 0.25s ease-out !important;
    transition : border 0.25s ease-out !important;
  }

  i.fa, .fa {
    color: #666;
  }
  button:focus{
    outline: none;
  }
  button.close:hover {
    cursor: pointer;
  }
  .btn{
    font-size: 12px;
    border-radius: 3px;
    padding: 5px 12px;
    @include transitonFade;
    &:focus{
      box-shadow: none;
    }
    &:hover{
      cursor: pointer;
    }
    &.dropdown-toggle-split {
      padding-right: .5625rem;
      padding-left: .5625rem;
    }
  }
  .btn-default {
    background: #fff;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    &.active,&:hover {
      background: #ECEEEF;
      box-shadow: none;
    }
    &[disabled]:hover, &[disabled] {
      background-color: #fefefe;
    }
  }
  .btn-primary{
    background-color: $primary-color;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    &:hover {
      background-color: #006ecc;
    }
    &[disabled]:hover, &[disabled] {
      background-color: $primary-color;
    }
  }
  .btn.btn-primary {
    &[disabled]:hover, &[disabled] {
      color: rgba(254,254,254,0.4);
    }
  }
  .dropdown-menu.show {
    opacity: 1;
    z-index: 10;
    visibility: visible;
  }
  @media (min-width: 768px) {
   .dropdown:hover > .dropdown-menu {
     display: block;
	    margin-top: 0; // remove the gap so it doesn't close
	    &.dropdown-menu-right{
	    	right: 0;
	    	left: auto;
	    }
    }
  }
  .btn-success {
    color: #fff;
    background-color: #348534;
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    &:hover, &:focus, &.active {
      background-color: #235923;
      border: solid 1px #235923;
    }
    i, .fa {
      color: #FFF;
      font-size: 12px;
    }
    &.btn.disabled, &.btn[disabled],
    &[disabled], &[disabled]:hover {
      background-color: #348534;
      border: 1px solid rgba(0,0,0,0.2);
      color: rgba(255,255,255,0.4);
    }
  }
  .btn-info {
  	color: #fff;
    i, .fa {
      color: #FFF;
      font-size: 12px;
    }  	
   }
  
  .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: default;
    color: rgba(41,43,44,0.4);
    opacity: 1;
    filter: alpha(opacity=35);
    -webkit-box-shadow: none;
    box-shadow: none;
    transition: 0s !important;
    z-index: inherit;
    i {
      opacity: 0.4;
    }
  }
  .btn-get-help.dropdown-toggle{
    border: 1px solid #10707f;
    border-radius: 0 3px 3px 0;
    background-color: #117a8b;
    color: #fff;
    &:focus{
      box-shadow: none;
    }
    &:after{
      vertical-align: middle;
    }
    &[disabled]:hover {
      background-color: #235923;
    }
  }  
  .btn-save.dropdown-toggle{
    border: 1px solid #235923;
    border-radius: 0 3px 3px 0;
    background-color: #235923;
    color: #fff;
    &:focus{
      box-shadow: none;
    }
    &:after{
      vertical-align: middle;
    }
    &[disabled]:hover {
      background-color: #235923;
    }
  }
  .btn-danger {
    background-color: $danger-color;
    border: solid 1px rgba(0, 0, 0, 0.2);
    &:hover {
      background: #cc4c48;
    }
    &.disabled {
      &:hover {
        background-color: $danger-color;
      }
    }
  }

  .sub-btn{
    font-size: 12px;
    padding: 0;
    background-color: #ECEEEF;
    border-radius: 3px;
    border: 1px solid #ccc;
    text-transform: capitalize;
    @include transitonFade;
    i.fa-times{
      color: #CE3C3E;
    }
    i.fa-columns{
      color: #0094CD;
    }
    span{
      @include transitonFade;
      padding: 5px 12px;
      display: inline-block;
      background-color: #fff;
      border-left: 1px solid #ccc;
      border-radius: 0 3px 3px 0;
      color: #292B2C;
    }
    &:hover {
      background-color: #eceeef;
      border: solid 1px #cccccc;
      span {
        background-color: #ECEEEF;
      }
    }
    &[disabled], &[disabled]:hover {
      background-color: #ECEEEF;
    }
  }
  a{
    color: #292B2C;
    @include transitonFade;
  }
  a:hover{
    text-decoration: none;
  }
// Link main color
a.main-color {
  color: $main-color !important;
  &:hover {
    text-decoration: underline;
  }
}
p{
  line-height: 21px;
  margin-bottom: 8px;
}
.jsn-sidebar i.fa.draggable:hover {
  cursor: move;
}
/* OVERRIDE BOOTSTRAP 4 */
.row{
  margin-left: -16px;
  margin-right: -16px;
}
.col,[class*='col-']{
  padding-right: 16px;
  padding-left: 16px;
}
.form-group{
  margin-bottom: 16px;
}
.form-check{
	margin-bottom: 16px;
}
.form-check-label{
  display: flex;
  align-items: center;
  overflow: hidden;
  .form-check-input{
    margin-top: 0px;
  }
}
.form-check-inline .form-check-input {
  margin-left: 1px;
}
.form-control{
  font-size: 14px;
  padding: 7px 12px;
  line-height: 17px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: none;
}
.form-control:disabled, .form-control[readonly]{
	background: #ECEEEF;
}
.form-control:focus{
  border-color: none;
  box-shadow: none;
}
.input-group-addon{
  font-size: 14px;
  line-height: 17px;
  background-color: #E6E6E6;
  @include transitonFade;
  &:hover {
    background-color: #ddd;
    color: #292b2c;
  }
}
.sunfw-slider {
  .input-group-addon {
    @include transitonFade;
    &:hover {
      background-color: #E6E6E6;
    }
  }
}

.form-group select.form-control:not([size]):not([multiple]){
  height: calc(2.25rem + 2px);
  padding-top: 0;
  padding-bottom: 0;
}
.card-body{
  padding: 16px;
}

.alert {
  h4 {
    font-size: 14px;
  }
  p {
    margin-bottom: 0;
  }
  ul {
    margin: 0;
    padding: 0 0 0 20px;
  }
}

/* Chosen */
.chzn-container-multi .chzn-choices{
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  padding: 2px 5px;
  background-image: none;
  li.search-choice{
    border: none;
    background-color: #DDDDDD;
    border-radius: 4px;
    background-image: none;
    box-shadow: none;
  }
}
.chzn-container-active .chzn-choices{
 box-shadow: none;
 border-color: #80bdff;
}

/* Input group addon */
.input-group-addon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  white-space: nowrap;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.input-group-addon:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.input-group-addon:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-control + .input-group-addon:not(:first-child) {
  border-left: 0;
}

.form-group.disabled,
.form-check.disabled {
  position: relative;
}
.form-group.disabled::after,
.form-check.disabled::after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}