/**
 * File: General.scss
 * Description : Contains all general styling for the WPLMS
 * Author: Mr.Vibe 
 * Credits: www.VibeThemes.com
 * Project: WPLMS
 * version 2.0
 **/
/*========================================================================*/
/*   TABLE OF CONTENT
/*========================================================================*/
/*
/*    01. GLOBAL STYLING
/*    02. TYPOGRAPHY STYLING
/*    03. FORMS STYLING
/*    04. SELECT DROPDOWN
/*    05. LINKS STYLING
/*    06. LISTS STYLING
/*    07. PAGE BLOCKS
/*    08. MISCELLANEOUS
/*
/*========================================================================*/
/*   01. DEFAULT STYLING 
/*========================================================================*/


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, address, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
-webkit-font-smoothing: antialiased;
}
html{
  font-size:14px;
}

body {
  z-index:0;
  overflow-x: hidden;
  background-color: $globalbg;
  color: $textcolor;
  font-weight: $fontweight;
  font-size: 14px;
  font-family: $font-family;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container,
.container-fluid{
  position:relative;
}

/*========================================================================*/
/*   02. TYPOGRAPHY STYLING
/*========================================================================*/


h1,h2,h3,h4,h5,h6{
  line-height:1.35em;
   font-family: 'Open Sans', sans-serif;
  color: #282828;
}
h1{
  font-size: 2.5rem;
}
h2{
  font-size: 2rem;
}
h3{
  font-size: 1.8rem;

}
h4{
  font-size: 1.5rem;
}
h5{
  font-size: 1.2rem;
}
h6{
  font-size: 1rem;
}

small{
  font-size: 75%;
}

a,
a:hover,
a:focus,
a:active{
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
}

figure,
img{
  max-width: 100%;
  height:auto;
}

h3+p,p+h3,
p+p,
ul+p,
p+ul,ul+ol,ol+ul,
blockquote+p,
p+blockquote{
  margin-top: 10px;
}
.tab-pane+h3{margin-top:0;}

blockquote p{
  font-weight:400;
}

.alignleft{
  float:left;
  margin: 0 15px 15px 0;
}

.alignright{
  float:right;
  margin: 0 0 15px 15px;
}

.aligncenter{
  display: block;
  margin: 0 auto;
}


code{
  background:$light-border-color;
  padding:4px 6px;
  color:#444;
  line-height:1.5;
  white-space:pre-line;
}

/*========================================================================*/
/*   03. FORMS STYLING
/*========================================================================*/

textarea:focus,button:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    bordercolor: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
}


ins{text-decoration:none;}

label{
  font-weight:600;
}

input[type="radio"]:hover{
  -webkit-appearance: radio;
}


.form_field,
.input-text,.edd-input,
.ninja-forms-field,
.wpcf7 input.wpcf7-text,
#s{
  padding: 6px 20px;
  border: 1px solid $bordercolor;
  color: #888;
  width:100%;
}

.input{
  padding: 5px 10px;
  border: 1px solid $bordercolor;
  color: #888;
}

input[type="file"]{
  margin-bottom:15px;
}

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none;
  padding: 0 24px 0 10px;
  height:36px;
  border-radius:2px;
  max-width:100%;
  line-height:1;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1);
  background-color: transparent;
  color: $textcolor;
  outline: 0;
  transition: .05s bordercolor ease-in-out;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAHCAYAAAD9NeaIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE1LTA0LTE3VDE3OjEyOjQyKzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTU4MjBDRURERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTU4MjBDRUVERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RUVFRDJCNkREQzMxMUU0QTM3QUI4MEQzQjkxMTEyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNTgyMENFQ0RGNUIxMUU0QTM3QUI4MEQzQjkxMTEyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuShL/sAAABeSURBVHjaYszOzjZnYGDYCcT8DMSBv0AcP2XKlKVEqmdgAuKTQOwOxB+JtQCIibYAZgkDkRaRZQGyJYQsItsCdEtwWUSRBdgsQbeIYgtAgAWHOMwiJSBezkAhAAgwAJSTG/DI0S9VAAAAAElFTkSuQmCC");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: auto 15%;
  border-radius: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="image"],
input[type="time"],
input[type="url"],
input[type="number"],
input[type="search"]{
    padding:5px;
    border:1px solid $bordercolor;
}

textarea{
    width: 100%;
    border: 1px solid $bordercolor;
    padding: 5px;
}

.radio{
  list-style: none !important;
}
.radio>input[type="radio"] {
  margin: 0 10px;
  float: none;
}


.input-text.highlight{bordercolor:#cf4f2f;}

.form_field:focus{
  color: #444;
}

.form_field.error_input{
   bordercolor: #eb3f22;
}

input+input,
input+textarea{
  margin-top:10px;
}

input[type='submit'].form_field,
input[type='submit'].ninja-forms-field,
.sidebar .widget #searchform input[type="submit"],
#signup_submit,
#submit,#searchsubmit{
  padding:10px 24px;
  font-size:11px;
  font-weight:600;
  text-transform: uppercase;
  background-color:$secondarybg;
  border:none;
  color:#FFF;
  border-radius:2px;
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus {
  outline:0px !important;
}



.radio{
  & > input[type="radio"]{
    display:none;
    & + label{
      padding-left: 0;
      display:block;
      &:before{
        display: inline-block;
        content:"";
        border:1px solid rgba(0,0,0,0.4);
        width:16px;
        height:16px;
        border-radius:50%;
        padding-right: 8px;
        transition: all 0.2s ease-in-out;
        margin-right: 8px;
      }
    }
    &:checked+ label:before {
       border-width:4px;
       border-color: $primarybg;
    }
  }
}

.checkbox{
  & > input[type="checkbox"] {
    display: none;
    & + label{
      padding-left: 0;
      display:block;
      position:relative;
      &:before{
        content:"";
        display: inline-block;
        width:16px;
        height:16px;
        overflow:hidden;
        border:1px solid rgba(0,0,0,0.4);
        transition: all 0.2s ease-in-out;
        margin-right: 8px;
      }
    }
    &:checked + label:before {
        border-width:8px;
        border-color: $primarybg;
    }
    &:checked + label:after {
        content: "\f00c";
        font-family: fontawesome;
        position: absolute;
        color: #FFF;
        left: 1px;top: 1px;line-height: 1;
        font-size: 14px;
    }
  }
  &.small{
    input[type="checkbox"] {
      & + label:before{
        width:12px;height:12px;
      }
      &:checked + label:before {border-width:6px;}
      &:checked + label:after {
        font-size:10px;
      }
    }
  }
}

/*========================================================================*/
/*   04. SELECT DROPDOWN CUSTOMIZATION
/*========================================================================*/

.chosen-container{
  min-width:160px;
  &.chosen-with-drop .chosen-drop{
    border-radius:0 0 2px 2px;
    border-color:$bordercolor;
  }
  .chosen-results li.highlighted{
    background:#78c8c9;
  }
}

.chosen-container-active.chosen-with-drop .chosen-single, 
.chosen-container-single .chosen-single{
  background:#FFF;
  border:1px solid $bordercolor;
  border-radius:2px;
  box-shadow: none;
  height: 40px;
  padding: 6px 10px;
}
.chosen-container-single .chosen-single div b{
  background-position: 0 10px;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 10px;
}

/* === SELECT 2 ===*/


.select2-container {
  vertical-align: middle;
  &.input-mini       { width: 60px; }
  &.input-small      { width: 90px; }
  &.input-medium     { width: 150px; }
  &.input-large      { width: 210px; }
  &.input-xlarge     { width: 270px; }
  &.input-xxlarge    { width: 530px; }
  // Size to the width of a default text input.
  &.input-default    { width: 220px; }
  &[class*="span"] {
    float: none;
    margin-left: 0;
  }
  span.selection{
    border-color:$bordercolor;
  }
}

.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  height: 36px;
  line-height: 36px;
  border: 1px solid $bordercolor;
  background: none;
  filter: none;
}

.select2-container .select2-choice,
.select2-container.select2-container-disabled .select2-choice {
  div, .select2-arrow {
    border-left: none;
    background: none;
    filter: none;
  }
}

.control-group.error [class^="select2-choice"] {
  border-color: $errorcolor;
}

.select2-container-multi .select2-choices .select2-search-field {
  height: 28px;
  line-height: 27px;
  width:100% !important;
}

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: $bordercolor;
  outline: none;
}

[class^="input-"] .select2-container {
  font-size: 14px;
}

.input-prepend [class^="select2-choice"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-append [class^="select2-choice"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-dropdown-open [class^="select2-choice"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

[class^="input-"] .select2-offscreen {
  position: absolute;
}


select.select2 {
  height: 28px;
  visibility: hidden;
}

.select2-container-multi {

  .select2-choices {

    .select2-search-choice {
      padding: 3px 18px 3px 5px;
      margin: 3px 5px 1px 5px;

      .select2-search-choice-close {
        left: auto;
        right: 3px;
        top: 3px;
      }
    }

    .select2-search-field {
      input.select2-active {
        background: white image-url("../images/spinner.gif") no-repeat !important;
      }
    }
  }
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-dropdown,.select2-container--default .select2-selection--multiple{border-color:$bordercolor;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:#FFF;
  border-color:$bordercolor;
  img{
    margin-right:4px;
  }
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-dropdown {
    border-color:$bordercolor;
    display: inline-block;
    width: 100%;
    padding: 10px;
}

/*========================================================================*/
/*   05. LINKS STYLING
/*========================================================================*/

a{
  font-weight:400;
  &:hover{
  color: $primarybg;
  text-decoration:none;
  transition: all 0.2s ease-in-out;
  }
}

.reply a,
.link,.ahref{
  color: $primarybg;
  text-decoration:none;
  font-weight: 600;
  font-size:11px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;  
}

.link:after{
  content: '';
  padding-left: 5px;
  transition: all .2s ease-in-out;
  font-family: 'fontawesome';
}

.link:hover:after{
  content:"\f178";
}

.fitvids{
  margin-bottom:30px;
}


/*========================================================================*/
/*   06. LISTS STYLING
/*========================================================================*/

ul,ol{
  margin:0;
  padding:0;
  list-style: none;
}

.content > ul,.content p > ul{
  list-style: disc outside none;
  margin-left:15px;
}

.content > ol,.content p > ol{
  list-style: decimal outside none;
  margin-left:15px;
}

.content ul > li > ul,
.content ol > li > ol{
  padding-left:30px;
}


/*========================================================================*/
/*   07. PAGE BLOCKS
/*========================================================================*/
  
.global,
.pusher{
  height: auto;
  display:block;
  width: 100%;
}

.global{
  position: relative;
  &.open{
    overflow:hidden;
  }
}

.pusher{
   z-index:99;
   background:$globalbg;
   width: 100%;
   height: auto;
   display:inline-block;
}

.pagesidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  visibility: hidden;
  width: 220px;
  height: 100%;
  background:$pagesidebarbg;
  color: $pagesidebarcolor;
  transition: all 0.5s;
  li>ul{
    display: none;
  }
  .left.menu-item{float:none;}
  .open .menu::after {
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    display:block;
    background: transparent;
    content: '';
          cursor:pointer;
  }
}

#main{
  z-index:1;
  background:#FFF;
}



/*========================================================================*/
/*   08. MISCELLANEOUS
/*========================================================================*/


.clear{
  clear: both;
}

.center{
  text-align:center;
}

.left{
  float: left;
}

.right{
  float: right;
}


.first{
  clear:both;
}

.fa:before{
  font-family:fontawesome;
}

.success{
  padding: 10px;
  display: inline-block;
  background: $successbg;
  color:$successcolor;
  font-weight:600;
  width: 100%;
  text-align: center;
}

div.error,.alert.alert-block{
  padding: 10px;
  display: inline-block;
  background: $errorbg;
  color:$errorcolor;
  font-weight:600;
  width: 100%;
  text-align: center; 
}

.error{
  padding:8px 20px;
  border-radius:2px;
  background:#f9edbe;
  border:1px solid #f0c36d;
  font-weight:600;
  margin:5px 0;
  display:inline-block;
  width:100%;
  font-size:11px;
  text-transform: uppercase;
}
span.error{display:none;}


.modal.fade{opacity:1;}
