/*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;
}

body{
  font-size: 14px;
  line-height: 17px;
  overflow-x:hidden;
  font-family: "Helvetica Neue";
}
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;
   }
}
.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.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-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;
}
.draggable {
    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-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(2rem + 1px);
}
.card-body{
  padding: 16px;
}
/* OVERRIDE CHOSEN JS */
.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;
}
.alert {
  h4 {
    font-size: 14px;
  }
  p {
    margin-bottom: 0;
  }
  ul {
    margin: 0;
    padding: 0 0 0 20px;
  }
}