-

2c2
< [13. Form Elements]
---
> [15. Form Elements]
150a151,158
>     input[type="radio"]:focus{ 
>         & + label{
>             color:@color-master-dark;
>             &:before{
>                 background-color: @color-master-light;
>             }
>         }
>     }
152c160,162
<         display: none;
---
>         opacity: 0;
>         width: 0;
>         height: 0;
194c204
<             top: 2px;
---
>             top: 1.4px;
203c213
<             left: 1.2px;
---
>             left: 3.2px;
213c223,225
<         display: none;
---
>         opacity: 0;
>         width: 0;
>         height: 0;
229c241
<                 border-width: 8px;
---
>                 border-width: 8.5px;
237a250,257
>     input[type="checkbox"]:focus{ 
>         & + label{
>             color:@color-master-dark;
>             &:before{
>                 background-color: @color-master-light;
>             }
>         }
>     }
258,260d277
<                 // &::after {
<                 //     content:""
<                 // }
340a358,364
> @media (min-width: 768px) and (max-width: 991px){
>   form .row [class*="col-md-"]:not(:first-child), 
>   form .row [class*="col-md-"]:not(:last-child){
>     padding-right: 0;
>     padding-left: 0;
>   }
> }
408,411d431
<             & > .form-group-default{
<                 display: table;
<                 width: 100%;
<             }
435,436d454
<         display: table;
<         width: 100%;
438,441d455
<             display: table-cell;
<             height: 100%;
<             float: none;
<             vertical-align: top;
549,561d562
<     &.input-group-attached{
<         position: relative;
<         .input-group-btn{
<             right:-1%;
<             & > .btn{
<                 position: absolute;
<                 right: -100%;
<                 top: 0;
<                 height: 100%;
<                 z-index: 2;
<             }
<         }
<     }
611c612,620
< 
---
>     &.form-group-default-select{
>         overflow: visible;
>         .ui-select-container.ui-select-bootstrap.dropdown {
>             .ui-select-match{
>                 padding-top: 6px;
>                 height: 23px;
>             }
>         }
>     }
810a820,1468
> 
> 
> 
> /* Plugins
> --------------------------------------------------
> Datepicker
> https://github.com/eternicode/bootstrap-datepicker
> */
> .datepicker {
>     padding: 16px 25px;
>     border-radius: 2px;
>     font-size: 12px;
>     &:after{
>         border-bottom-color: @color-master-lightest;
>     }
>     thead {
>         tr {
>             .datepicker-switch {
>                 color: #6f7b8a;
>                 font-size: 13px;
>             }
>             .next,
>             .prev{
>                 color:  @color-primary;
>                 content:'';
>                 font-size: 0px;
>                 &:before {
>                     color:  @color-primary;
>                     font-family:'FontAwesome';
>                     font-size: 10px;
>                 }
>             }
>             .prev:before {
>                 content:"\f053";
>             }
>             .next:before {
>                 content:"\f054";
>             }
>             .dow {
>                 font-family: 'Montserrat';
>                 color: @color-primary;
>                 text-transform: uppercase;
>                 font-size: 11px;
>             }
>             th{
>                 width: 31px;
>                 height: 29px;
>             }
>         }
>     }
>     tbody {
>         tr {
>             .odd {
>                 color: #d0d3d8;
>             }
>         }
>     }
>     table {
>         tr {
>             td {
>                 width: 31px;
>                 height: 29px;
>                 &.old,
>                 &.new{
>                     color: @color-master-light;
>                 }
>                 &.day {
>                     &:hover {
>                         background: @color-master-lighter;
>                     }
>                 }
>                 &.active{
>                     background-color:@color-primary !important;
>                     &,
>                     &:hover, 
>                     &.disabled, 
>                     &.disabled:hover {
>                         background-image: none;
>                         text-shadow: none;
>                         font-weight: 600;
>                     }
>                 }
>                 &.today{
>                     &,
>                     &:hover, 
>                     &.disabled, 
>                     &.disabled:hover {
>                         background-color: @color-master-lighter;
>                         background-image: none;
>                         color: @color-white;
>                     }
>                 }
>                 span {
>                     border-radius: 4px;
>                     width: 42px;
>                     height: 42px;
>                     line-height: 42px;
>                     &.active{
>                         background-color: @color-primary !important;
>                     }
>                     &.active, 
>                     &.active:hover, 
>                     &.active.disabled, 
>                     &.active.disabled:hover {
>                         background-image: none;
>                         border: none;
>                         text-shadow: none;
>                     }
>                 }
>             }
>         }
>     }
>     &.dropdown-menu{
>         border-color: @color-master-light;
>         color:@color-master;
>     }
>     &.datepicker-dropdown.datepicker-orient-bottom:before{
>         border-color: @color-master-light;
>     }
> }
> 
> .datepicker-inline {
>     width: auto;
> }
> .input-daterange .input-group-addon{
>     text-shadow: none;
>     border:0;
> }
> 
> /* Timepicker 
> https://github.com/m3wolf/bootstrap3-timepicker
> */
> 
> .bootstrap-timepicker-widget{
>     table td a i{
>         font-size: 12px;
>     }
>     a.btn, .bootstrap-timepicker-widget input{
>         .border-radius(2px);
>     }
>     &.dropdown-menu{
>         background: #fff;
>     }
> }
> 
> 
> /* Daterangepicker
> http://www.dangrossman.info/
> */
> 
> .daterangepicker{
>     background: #fff;
>     .calendar{
>         .calendar-date{
>             border: 1px solid @form-control-border-color;
>         }
>         .prev, .next, th{
>             color: @color-primary;
>             text-transform: uppercase;
>             font-size: 11px;            
>         }
>         .month{
>             color: #6f7b8a;
>             font-size: 13px;            
>         }
>     }
>     td.active, td.active:hover{
>         background-color: @color-primary;
>         border-color: @color-primary;
>     }
>     td.in-range{
>       //å  background:@color-primary-lighter;
>     }
> }       
> /* Select2
> http://ivaynberg.github.io/select2/
> */
> 
> .form-group-default .select2-container .select2-choice, 
> .select2-container-multi .select2-choices{
>     border-color:transparent;
> }
> .select2-container {
>     .select2-choice {
>         background-image: none;
>         border-radius: 2px;
>         border: 1px solid @form-control-border-color;
>         padding: 3px 9px;
>         transition: border 0.2s linear 0s;
>         height: 35px;
>         .select2-arrow {
>             background: transparent;
>             border-left: 0px;
>             .transition(all 0.3s ease);
>             b {
>                 &:before {
>                     font-family:'FontAwesome';
>                     content:"\f0d7";
>                     position: relative;
>                     top: 2px;
>                     right: 5px;
>                     font-size: 12px;
>                 }
>             }
>         }
>     }
>     &.select2-drop-above {
>         .select2-choice {
>             border-bottom-right-radius: 2px;
>             border-bottom-left-radius: 2px;
>         }
>     }
> }
> .select2-search input, 
> .select2-search-choice-close, 
> .select2-container .select2-choice abbr, 
> .select2-container .select2-choice .select2-arrow b{
>     background-image: none !important;
> }
> .select2-dropdown-open.select2-drop-above .select2-choice, 
> .select2-dropdown-open.select2-drop-above .select2-choices {
>     background-image: none !important;
>     border: 1px solid @form-control-border-color;
>     background: @color-master-lighter;
> }
> .select2-dropdown-open {
>     .select2-choice {
>         .select2-arrow {
>             .scale(scale(1, -1));
> 
>         }
>     }
> }
> .select2-drop {
>     &.select2-drop-above {
>         border-top-left-radius: 2px;
>         border-top-right-radius: 2px;
>         box-shadow: none;
>         &.select2-drop-active {
>             border: 1px solid @form-control-border-color;
>             border-bottom: none;
>             border-radius: 2px;
>             padding-top: 0px;
>         }
>     }
> }
> .select2-container-active .select2-choice, 
> .select2-container-active .select2-choices {
>     box-shadow: none;
>     border: 1px solid @form-control-border-color;
>     background: @color-master-lighter;
>     border-top-left-radius: 2px;
>     border-top-right-radius: 2px;
> }
> .select2-search {
>     padding-left: 8px;
>     padding-right: 8px;
>     padding-top: 4px;
>     input {
>         background: @color-white !important;
>         vertical-align: baseline;
>         line-height: 28px;
>         border-radius: 2px;
>         border: none;
>         font-size: 12px;
>         border: 1px solid @form-control-border-color;
>     }
> }
> .select2-results {
>     margin: 3px 10px 10px 3px;
>     li {
>         color: @color-master;
>         &.select2-result-with-children {
>             & > .select2-result-label {
>                 color: @color-master-dark;
>                 &:first-child{
>                     padding-top: 8px;
>                 }
>             }
>         }
>     }
>     .select2-highlighted {
>         background: @color-master-lighter;
>         border-radius: 3px;
>         .select2-result-label {
>             color:  @color-master;
>         }
>     }
>     .select2-no-results, 
>     .select2-searching, 
>     .select2-selection-limit {
>         background: none;
>         color: @color-master;
>         font-size: 12px;
>         padding-left: 8px;
>         padding-top: 0px;
>         position: relative;
>         top: -5px;
>     }
> }
> 
> .select2-drop-active {
>     border: 1px solid  @form-control-border-color;
>     border-bottom: none;
>     border-top: none;
>     border-bottom-right-radius: 2px;
>     border-bottom-left-radius: 2px;
>     padding-top: 5px;
>     z-index: @zIndex-navbar - 10;
> }
> .select2-container-multi {
>     .select2-choices {
>         background-image: none;
>         border: 1px solid @form-control-border-color;
>         border-radius: 2px;
>         .select2-search-choice {
>             background-color: @color-master-light;
>             background-image: none;
>             border: none;
>             box-shadow: none;
>             color: inherit;
>             border-radius: 8px;
>             margin: 8px -5px 7px 10px;
>             padding: 4px 8px 4px 21px;
>         }
>     }
>     &.select2-container-active {
>         .select2-choices {
>             border: 1px solid @form-control-border-color;
>             box-shadow: none;
>         }
>         .select2-search-choice {
>             background-color: @color-white !important;
>         }
>     }
>     .select2-search-choice-close {
>         left: 6px;
>     }
> }
> .select2-search-choice-close {
>     background: none;
>     top: 4px;
>     right: 0;
>     &:hover {
>         text-decoration: none;
>     }
>     &:before {
>         font-family:'FontAwesome';
>         content:"\f00d";
>         font-size: 12px;
>         color: @color-master;
>     }
> }
> .select2-drop-multi .select2-results {
>     .select2-no-results, 
>     .select2-searching, 
>     .select2-selection-limit {
>         top: 0px;
>     }
> }
> .select2 {
>     &.form-control {
>         padding: 0;
>         box-shadow: none;
>         border: 0;
>     }
> }
> 
> .select2-drop-mask{
>     z-index: 700;
> }
> 
> .ui-select-bootstrap .ui-select-choices-row.active > a{
>     background: @color-master-lighter;
>     border-radius: 3px;
>     color: @color-master;
> }
> .ui-select-bootstrap > .ui-select-choices{
>     background-color: #fff;
>     // box-shadow: 0px 4px 5px rgba(0,​ 0,​ 0,​ 0.15);
> }
> .ui-select-choices-group-label{
>     color: @color-master-dark;
>     font-weight: bold;
> }
> .modal-open{
>     .select2-drop-active{
>         z-index: 1051;
>     }
>     .select2-drop-mask{
>         z-index: 1050;
>     }
>     .cs-skin-slide.cs-active{
>         z-index: 1050;
>     }
> }
> 
> .dropdown-placeholder{
>     display: inline-block;
>     vertical-align: middle;
> }
> .dropdown-mask{
>     bottom: 0;
>     display: none;
>     left: 0;
>     outline: 0 none;
>     overflow: hidden;
>     position: fixed;
>     right: 0;
>     top: 0;
>     z-index: @zIndex-dropdownMask;
> }
> 
> /* Bootstrap Tags input
> https://github.com/timschlechter/bootstrap-tagsinput
> */
> 
> .form-group-default .bootstrap-tagsinput{
>     border:0px;
>     padding-left: 0;
> }
> .bootstrap-tagsinput {
>     background-color: transparent;
>     border: 1px solid @form-control-border-color;
>     border-radius: 4px;
>     padding-bottom: 5px;
>     .box-shadow(none);
>     width: 100%;
>     .transition(background 0.2s linear 0s);
>     &.active-element {
>         background-color: @color-master-light;
>     }
>     input {
>         border: none;
>         margin-bottom: 0px;
>         min-height: 25px;
>         min-width: 10em !important;
>     }
>     .tag {
>         vertical-align: middle;
>         padding: 6px 9px;
>         padding-right: 6px;
>         border-radius: 3px;
>         line-height: 30px;
>     }
>     .tag[data-role="remove"]{
>         margin-left: 4px;
>     }
>     .tag[data-role="remove"]:hover:active,
>     .tag [data-role="remove"]:hover {
>         box-shadow: none;
>     }
>     .tag [data-role="remove"]:after{
>         font-family: 'pages-icon';
>         content: "\e60a";
>         padding: 0;
>     }
> }
> 
> /* Bootstrap3 wysihtml5
> https://github.com/Waxolunist/bootstrap3-wysihtml5-bower
> */
> .wysiwyg5-wrapper {
>     position: relative;
>     .wysihtml5-toolbar {
>         position: absolute;
>         bottom: 0;
>         left: 0;
>         right: 0;
>         /*height: 50px;*/
>         background: @color-master-lighter;
>         border-top:1px solid @color-master-light;
>         .btn {
>             background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
>             border-color:transparent;
>             border-right-color: @color-master-light;
>             color: #A5A5A5;
>             font-size: 16px;
>             font-weight: 600;
>             height: 50px;
>             line-height: 50px;
>             padding: 0 5px;
>             border-width: 1px;
>             border-radius: 0 !important;
>             box-shadow: none !important;
>             &:hover .editor-icon {
>                 opacity: .8;
>             }
>             &.active .editor-icon {
>                 opacity: 1;
>             }
>             &.dropdown-toggle {
>                 padding-left: 10px;
>                 padding-right: 20px;
>                 .current-font {
>                     opacity: .5;
>                     font-size: 14px;
>                 }
>             }
>         }
>         & > li {
>             margin:0;
>             padding: 0;
>         }
>     }
>     .wysiwyg {
>         width: 100%;
>         min-height: 200px;
>         font-size: 14px;
>         line-height: 18px;
>         padding-bottom:50px !important;
>         border: 0;
>         &:focus{
>             background-color:@color-master-lightest;
>             outline: 0 !important;
>             .box-shadow(none);
>         }
>     }
>     .expand-wysiwyg {
>         bottom: 0;
>         color: #A5A5A5;
>         font-size: 20px;
>         font-weight: 600;
>         height: 50px;
>         line-height: 50px;
>         padding: 0 15px;
>         position: absolute;
>         right: 0;
>     }
>     .wysihtml5-sandbox{
>         border: none !important;
>         padding: 16px 16px 50px !important;
>         width: 100% !important;
>         &.expanded{
>             height: 100% !important;
>         }
>     }
> }
> .toggle-wysiwyg {
>     position: absolute;
>     right: 15px;
>     top: 0;
>     li {
>         display: inline-block;
>         font-weight: 600;
>     }
> }
> .editor-icon {
>     background-image: url("../img/editor_tray.png");
>     display: inline-block;
>     height: 40px;
>     margin-top: 5px;
>     opacity: 0.4;
>     vertical-align: top;
>     width: 40px;
>     &-headline {
>         background-position: 0 0;
>         width:31px;
>     }
>     &-bold {
>         background-position: -40px 0;
>     }
>     &-italic {
>         background-position: -80px 0;
>     }
>     &-underline {
>         background-position: -120px 0;
>     }
>     &-link {
>         background-position: -160px 0;
>     }
>     &-quote {
>         background-position: -200px 0;
>     }
>     &-ul {
>         background-position: -240px 0;
>     }
>     &-ol {
>         background-position: -280px 0;
>     }
>     &-outdent {
>         background-position: -320px 0;
>     }
>     &-indent {
>         background-position: -360px 0;
>     }
>     &-image {
>         background-position: -400px 0;
>     }
>     &-html {
>         background-position: -440px 0;
>     }
> }
> 
> /* Summernote
> https://github.com/HackerWins/summernote
> */
> .summernote-wrapper{
>     .note-editor{
>         border-color:@color-master-light;
>         .note-toolbar{
>             padding: 0;
>             background-color: @color-master-lighter;
>             border-bottom: none;
>             .btn-group{
>                 margin: 0 -1px 0 0;
>                 .btn{
>                     font-size: 12px;
>                     font-weight: 600;
>                     height: 50px;
>                     min-width: 47px;
>                     line-height: 50px;
>                     padding: 0 5px;
>                     border-radius: 0;
>                     background-color: @color-master-lighter;
>                     border-color: transparent;
>                     border-right-color: @color-master-light;
>                     border-bottom-color: @color-master-light;
>                     color: @color-master;
>                     &.active, &:active{
>                         background-color: @color-master-light;
>                     }
>                     &.dropdown-toggle{
>                         min-width: 61px;
>                     }
>                     &:not(:last-child), &:not(:only-child){
>                         margin-right: 1px;
>                     }
>                 }
>             }
>         }
>         .note-statusbar {
>             background-color: transparent;
>             .note-resizebar{
>                 border-top-color: transparent;
>                 .note-icon-bar{
>                     border-top: 1px solid @color-master-light;
>                 }
>             }
>         }
>     }
>     .note-popover .popover .popover-content .dropdown-menu li a i, .note-toolbar .dropdown-menu li a i{
>         color: @color-primary;
>     }
> }
> 
> 
> 
> 
878a1537,1914
> 
> 
> /* Pages SelectFx */
> 
> /* Default custom select styles */
> div.cs-select {
>     display: inline-block;
>     vertical-align: middle;
>     position: relative;
>     text-align: left;
>     background: #fff;
>     width: 100%;
>     max-width: 500px;
>     -webkit-touch-callout: none;
>     -webkit-user-select: none;
>     -khtml-user-select: none;
>     -moz-user-select: none;
>     -ms-user-select: none;
>     user-select: none;
> }
> 
> div.cs-select:focus {
>     outline: none; /* For better accessibility add a style for this in your skin */
> }
> 
> .cs-select select {
>     display: none;
> }
> 
> .cs-select span {
>     display: block;
>     position: relative;
>     cursor: pointer;
>     padding: 1em;
>     white-space: nowrap;
>     overflow: hidden;
>     text-overflow: ellipsis;
> }
> 
> /* Placeholder and selected option */
> .cs-select > span {
>     padding-right: 3em;
> }
> 
> .cs-select > span::after,
> .cs-select .cs-selected span::after {
>     speak: none;
>     position: absolute;
>     top: 50%;
>     -webkit-transform: translateY(-50%);
>     transform: translateY(-50%);
>     -webkit-font-smoothing: antialiased;
>     -moz-osx-font-smoothing: grayscale;
> }
> 
> .cs-select > span::after {
>     content: '\25BE';
>     right: 1em;
> }
> 
> .cs-select .cs-selected span::after {
>     content: '\2713';
>     margin-left: 1em;
> }
> 
> .cs-select.cs-active > span::after {
>     -webkit-transform: translateY(-50%) rotate(180deg);
>     transform: translateY(-50%) rotate(180deg);
> }
> 
> /* Options */
> .cs-select .cs-options {
>     position: absolute;
>     overflow: hidden;
>     width: 100%;
>     background: #fff;
>     visibility: hidden;
> }
> 
> .cs-select.cs-active .cs-options {
>     visibility: visible;
> }
> 
> .cs-select ul {
>     list-style: none;
>     margin: 0;
>     padding: 0;
>     width: 100%;
> }
> 
> .cs-select ul span {
>     padding: 1em;
> }
> 
> .cs-select ul li.cs-focus span {
>     background-color: #ddd;
> }
> 
> /* Optgroup and optgroup label */
> .cs-select li.cs-optgroup ul {
>     padding-left: 1em;
> }
> 
> .cs-select li.cs-optgroup > span {
>     cursor: default;
> }
> 
> 
> 
> 
> div.cs-skin-slide {
>     color: #fff;
>     /*font-size: 1.5em;*/
>     width: 300px;
> }
> 
> @media screen and (max-width: 30em) {
>     div.cs-skin-slide { font-size: 1em; width: 250px; }
> }
> 
> div.cs-skin-slide::before {
>     content: '';
>     background: #282b30;
>     position: absolute;
>     width: 100%;
>     height: 100%;
>     top: 0;
>     left: 0;
>     -webkit-backface-visibility: hidden;
>     backface-visibility: hidden;
>     -webkit-transition: -webkit-transform 0.3s;
>     transition: transform 0.3s;
> }
> 
> .cs-skin-slide.cs-active::before {
>     -webkit-transform: scale3d(1.1,3.5,1);
>     transform: scale3d(1.1,3.5,1);
> }
> 
> .cs-skin-slide > span {
>     height: 80px;
>     line-height: 32px;
>     -webkit-transition: text-indent 0.3s, opacity 0.3s;
>     transition: text-indent 0.3s, opacity 0.3s;
> }
> 
> @media screen and (max-width: 30em) {
>     .cs-skin-slide > span { height: 60px; line-height: 28px; }
> }
> 
> .cs-skin-slide.cs-active > span {
>     text-indent: -290px;
>     opacity: 0;
> }
> 
> .cs-skin-slide.cs-active > span::after {
>     -webkit-transform: translate3d(0,-50%,0);
>     transform: translate3d(0,-50%,0);
> }
> 
> .cs-skin-slide .cs-options {
>     background: transparent;
>     width: 70%;
>     height: 400%;
>     padding: 1.9em 0;
>     top: 50%;
>     left: 50%;
>     -webkit-transform: translate3d(-50%,-50%,0);
>     transform: translate3d(-50%,-50%,0);
> }
> 
> @media screen and (max-width: 30em) {
>     .cs-skin-slide .cs-options { padding-top: 3em; }
> }
> 
> .cs-skin-slide .cs-options li {
>     opacity: 0;
>     -webkit-transform: translate3d(30%,0,0);
>     transform: translate3d(30%,0,0);
>     -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
>     transition: transform 0.3s, opacity 0.3s;
> }
> 
> .cs-skin-slide.cs-active .cs-options li {
>     -webkit-transform: translate3d(0,0,0);
>     transform: translate3d(0,0,0);
>     opacity: 1;
> }
> 
> .cs-skin-slide.cs-active .cs-options li:first-child {
>     -webkit-transition-delay: 0.05s;
>     transition-delay: 0.05s;
> }
> 
> .cs-skin-slide.cs-active .cs-options li:nth-child(2) {
>     -webkit-transition-delay: 0.1s;
>     transition-delay: 0.1s;
> }
> 
> .cs-skin-slide.cs-active .cs-options li:nth-child(3) {
>     -webkit-transition-delay: 0.15s;
>     transition-delay: 0.15s;
> }
> 
> .cs-skin-slide.cs-active .cs-options li:nth-child(4) {
>     -webkit-transition-delay: 0.2s;
>     transition-delay: 0.2s;
> }
> 
> .cs-skin-slide.cs-active .cs-options li:nth-child(5) {
>     -webkit-transition-delay: 0.25s;
>     transition-delay: 0.25s;
> } /* more options need more delay declaration */
> 
> .cs-skin-slide .cs-options li span {
>     text-transform: uppercase;
>     font-weight: 500;
>     letter-spacing: 2px;
>     font-size: 65%;
>     padding: 0.8em 1em 0.8em 2.5em;
> }
> 
> .cs-skin-slide .cs-options li span:hover,
> .cs-skin-slide .cs-options li.cs-focus span,
> .cs-skin-slide .cs-options li.cs-selected span {
>     color: #eb7e7f;
>     background: transparent;
> }
> 
> .cs-skin-slide .cs-selected span::after {
>     content: '';
> }
> 
> 
> /* Pages Select  overriding */
> 
> .form-group-default .cs-skin-slide > span{
>     padding: 0 30px 0 0;
>     height: 22px;
>     line-height: 21px;
> }
> .form-group-default .cs-wrapper{
>     width: 100%;
> }
> .cs-wrapper{
>     display: inline-block;
>     // width: 100%;
> }
> .form-control.cs-select:not(.cs-active){
>     width: 100% !important;
> }
> .cs-select:not(.cs-active):not(.form-control){
>     // width: 100% !important;
> }
> .cs-select{
>     background-color: transparent;
>     span{
>         text-overflow:initial;
>     }
>     .cs-placeholder{
>         width: 100%;
>     }
> }
> div.cs-skin-slide{
>     width: auto;
>     font-family: Arial,sans-serif;
>     //font-size: 14px;
>     color: #5e5e5e;
>     &:before{
>         background-color:  transparent;
>     }
>     &.cs-transparent{
>         background: none;
>         .cs-backdrop{
>             border-color: transparent;
>             background: none;
>         }
>         &.cs-active .cs-backdrop{
>             background: @color-master-lightest;
>         }
>     }
>     & > span{
>         height: 35px;
>         padding: 6px 33px 6px 17px;
>         line-height: 23px;
>         z-index: 1;
>     }
>     &.cs-active{
>         z-index: @zIndex-navbar - 10;
>         &:before{
>             -webkit-transform: scale3d(1,1,1);
>             transform: scale3d(1,1,1);
>         }
>         .cs-backdrop{
>             border: transparent;
>             background: @color-master-lightest;
>             box-shadow: -1px 0 1px #ccc, 1px 0 1px #ccc;
>         }
>     }
>     & > span:after,
>     &.cs-active > span:after{
>         content:"\f0d7";
>         font-family: FontAwesome;
>         color: #5e5e5e;
>     }
>     .cs-options{
>         height: auto;
>         padding: 9px 0;
>         width: auto;
>         padding: 10px;
>         max-height: 350px;
>         transform: translate3d(1,1,1);
>         overflow: hidden;
>         z-index: 1;
>           ul{
>             width: 100%;
>             display: table;
>             li{
>                 display: table-row;
>                 span{
>                     display: table-cell;
>                     font-size: 14px;
>                     font-weight: normal;
>                     letter-spacing: normal;
>                     padding: 5px 0;
>                     text-transform: none;
>                     max-height: 350px;
>                     overflow-y: auto;
>                 }
>                 span:hover, 
>                 &.cs-focus span, 
>                 &.cs-selected span{
>                     color: @color-master-dark;
>                 }
>             }
>           }
>     }
> }
> .cs-backdrop{
>     background: none repeat scroll 0 0 #fff;
>     border: 1px solid @form-control-border-color;
>     bottom: 0;
>     left: 0;
>     position: absolute;
>     right: 0;
>     top: 0;
>     .transition(all .3s ease);
>     
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(6) {
>     transition-delay: 0.3s;
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(7) {
>     transition-delay: 0.35s;
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(8) {
>     transition-delay: 0.4s;
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(9) {
>     transition-delay: 0.45s;
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(10) {
>     transition-delay: 0.5s;
> }
> .cs-skin-slide.cs-active .cs-options li:nth-child(11) {
>     transition-delay: 0.55s;
> }
> 
> /* Dropzone for Angular */
> .dropzone[dropzone="dropzone"] input[type="file"]{
>     visibility: hidden;
> }
> /* end overrides */
> 
> /* Demo specifc classes */
> .demo-form-wysiwyg{
>     height: 250px;
> }
\ No newline at end of file