/* Global variables */
@primaryColor: #303940;
@secondaryColor: #FF6600;
@defaultColor: #FFFFFF;

@headerBkColor: #5A697B;
@headerFontColor: @defaultColor;

@headerSubMenuColor: @primaryColor;
@headerSubMenuBkColor: #EAEAEA;

@sideBarBkColor: @primaryColor;
@contentBkColor: #ecf0f5;

@menuTextColor: @defaultColor;
@menuIconColor: #EAEAEA;
@subMenuTextColor: @primaryColor;
@subMenuBkColor: #FAFAFA;

@defaultBkColor: @defaultColor;
@defaultFontColor: @primaryColor;
@defaultFontSize: 12px;
@defaultFontSizeBox: 13px;
@defaultControlHeight: 32px;

@successBkColorBorder:  green;
@successBkColor:  #00a65a;
@infoBkColorBorder: #337ab7;
@infoBkColor: #3c8dbc;
@warningBkColorBorder: #F93;
@warningBkColor: #f39c12;
@dangerBkColorBorder: #C00;
@dangerBkColor: #dd4b39;
@succesFontColor: @defaultColor;
@infoFontColor: @defaultColor;
@dangerFontColor: @defaultColor;
@warningFontColor: @defaultColor;
@btnDefaultColor: #ccc;
@btnPrimaryColor: #e6e6e6;
@btnGreyColor: #97a0b3;
@tooltipBorderColor:#D3D6D3;
@tooltipBgColor: #EFEFEF;
@arrowBgColor: #D3D6D3;
@arrowDefaultWidth: 8px;
@opacity: 45;
@defaultMargin: 15px;
@defaultTop: 55px;
@defaultFooterHeight: 40px;

@defaultImageWidth: 400px;
@defaultImageHeight: 200px;

.skin-aida {
   
    font-family: Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif,Verdana;
    font-size: @defaultFontSize;

    .margin(@top,@right,@bottom,@left){
        margin-top: @top;
        margin-right: @right;
        margin-bottom: @bottom;
        margin-left: @left;
    }

    .margin-left(@left){
        margin-left: @left;
    }

    .margin-right(@right){
        margin-right: @right;
    }

    .margin-top(@top){
        margin-top: @top;
    }
    
    .margin-bottom(@bottom){
        margin-top: @bottom;
    }

    .missing-field(){
        border-left: 8px solid red;
    }

    .round-input{
        border-radius: 4px !important;
        border-style: solid;
        border: 1px solid rgb(170,170,170);
        text-transform:uppercase;
    }

    .no-margin{
        margin: 0;
    }

    .with-margin-left {
        .margin-left(15px);
    }

    .with-margin-right {
        .margin-right(10px);
    }

    .with-margin-top{
        .margin-top(10px);
    }

    .with-extra-margin-top{
        .margin-top(30px);
    }

    .fields-left-margin{
        .margin-left(28px);
    }
    .display-block{
        display:block;
    }

    .inline-block{
        display: inline-block;
    }

    .cursor-pointer{
        cursor: pointer;
    }

    .pos-relative{
        position: relative;
    }
    .pos-absolute{
        position: absolute;
    }

    .action-button-cell{
        max-width: 55px;
    }
    .italic{
        font-style: italic;
    }

    .border{
        border: 1px solid @tooltipBorderColor;
    }

    h1,h2,h3,h4,h5,h6{
        font-family: Tahoma,"Helvetica Neue",Helvetica,Arial,sans-serif,Verdana;
    }
    .no-list-style{
        list-style-type: none;
    }
    .width-sm {
        width: 100%;
        min-width: 80px;
        max-width: 160px;
    }
    .width-md {
        width: 100%;
        min-width: 150px;
        max-width: 400px;
    }
    .width-lg {
        width: 100% !important;
        min-width: 300px;
        max-width: 500px;
    }
    .width-full {
        width: 100%;
    }
    .bottom-separator {
        margin-bottom: 15px;
    }
    .content-wrapper {
        background-color: @contentBkColor;   
        position: relative;
        top: 95px;
        min-height: 900px !important;
        z-index: 825;
    }

    &.content-center{
        height: 50%;
        position:fixed; 
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }

    .wrapper{
        overflow: unset !important;
     }

    .main-footer{
        position: relative;
        top: @defaultTop;
        margin-top: @defaultFooterHeight;
    }

    .small-box:hover{
        color: @primaryColor;
    }

    .box-body .tab-content{
        margin-top: 5px;
    }

    .tab-pane{
        min-height: 215px;
    }

    .vertical-scroll(@h){
        max-height: @h;
        overflow-y: auto;
    }

    .div-vertical-scroll{
        max-height: 470px;
        overflow-y: auto;
    }

    /*------------------------------Switches --------------------------------*/
    .switch {
      position: relative;
      display: inline-block;
      width: 37px;
      height: 15px;
    }

    .switch input {
        display:none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
 
    .slider:before {
      position: absolute;
      content: "";
      height: 11px;
      width: 11px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: @warningBkColor;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px @warningBkColor;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(22px);
      -ms-transform: translateX(22px);
      transform: translateX(22px);
    }

    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    /*------------------------------Spinner--------------------------------*/
    .full-overlay {
        z-index: 50;
        background: rgba(255,255,255,0.7);
        border-radius: 3px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .full-overlay>.fa {
        position: fixed;
        z-index: 999;
        height: 1em;
        width: 1em;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: black;
        font-size: 30px;
    }
    /*------------------------------Arrows --------------------------------*/
    .arrow(@top, @right, @left, @bottom, @bgColor){
        position:relative;
        background: @bgColor;
        top: @top;
        left: @left;
        right: @right;
        bottom: @bottom;
    }

    .arrow-box(){
        left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
    }

    .arrow-after(){
        border-bottom-color: @arrowBgColor;
	    border-width: @arrowDefaultWidth;
	    margin-left: -@arrowDefaultWidth;
    }

    .arrow-before(){
        border-bottom-color: @tooltipBorderColor; 
	    border-width: @arrowDefaultWidth;
	    margin-left: -@arrowDefaultWidth;
    }

    .arrow_up {
        .arrow(-12px, 0, 0, 0, @arrowBgColor);
        &:before, &:after{
            bottom: 100%;
	        .arrow-box();
        }
        &:after {
	        .arrow-after();
        }
        &:before {
	        .arrow-before();
        }
    }

    .arrow_down {
        .arrow(12px, 0, 0, 0, @arrowBgColor);
        &:before, &:after{
            top: 100%;
	        .arrow-box();
        }
        &:after {
            border-top-color: @arrowBgColor;
	        border-width: @arrowDefaultWidth;
	        margin-left: -@arrowDefaultWidth;
        }
        &:before {
            border-top-color: @arrowBgColor;
            border-width: @arrowDefaultWidth;
	        margin-left: -@arrowDefaultWidth;
        }
    }
 
    /*----------------------------------------------------------*/

    /*------------------------------------Permissions------------*/
    .permissionSection{
        height: 40px;
        background-color: @contentBkColor;
        border-radius: 3px;
        padding-top: 10px;
        text-align: left;
        margin-bottom: 12px;

        i{
            padding-left: 10px;
            padding-right: 10px;
        }
    }


    /*----------------------------------------------------------*/

    /*------------------------------------Borders------------*/
    .border-bottom{
        border-bottom: 1px solid @btnDefaultColor;
    }

    .border-right{
        border-right: 1px solid @btnDefaultColor;
    }
    /*-----------------------------------------------------------*/
    .margin(@margin){
        margin: @margin;
    }

    .display-none{
        display:none;
    }

    .modal-dialog{
        position:relative;
        top: @defaultTop;
    }
    .modal-backdrop{
        z-index: 0;
    }

    .inline-checkbox{
        vertical-align: sub;
    }

    .inline-span{
        margin-left: 10px;
    }

    .tooltip.fade.top.in, .tooltip.fade.bottom.in, .tooltip.fade.left.in,.tooltip.fade.right.in{
        opacity: 1 !important;
    }
    .tooltip(){
        border: 3px solid @tooltipBorderColor;
        border-radius: 4px;
        padding: 10px;
        background-color: @tooltipBgColor;
        color: black;
    }

    .tooltip.top .tooltip-arrow {
        border-top-color: @tooltipBorderColor !important;
    }
    .tooltip.bottom .tooltip-arrow{
        border-bottom-color: @tooltipBorderColor !important;
    }
    .tooltip-inner{
        .tooltip();
    }
    .tooltip-div{
        margin: 15px;
        .tooltip();

        .tooltip-title{
            font-size: 15px;
            button{
                margin-right: 5px;
                font-size: 15px;
            }
		    z-index: 3000;
        }
        table{
            margin: 10px;
            margin-left: 25%;
            th, td{
                padding: 0 15px 0 0;
            }
        }
    }
    .callout-table{
        margin-top: 15px;
        margin-left: 15px;
    }
    .callout {
        table{
            font-size: @defaultFontSize + 1px;
            margin: 0 auto;
            thead{
                font-weight: bold;
                th{
                    padding-bottom: 5px;
                }
            }
            td {
                padding-right: @defaultMargin;
            }
        }
    }
    callout a{
        color: black;
    }
    /*-------------------------------------Panel title--------------------------*/
    .panel-title {
        a:hover, a:focus{
            color: @warningBkColor;
        }
    }

    /*--------------------------------------------------------------------------*/

    /*-------------------------------------Panel title--------------------------*/

    .select2-results__option--highlighted{
        .option-disabled{
            color:#eee;
        }
    }

    .select2-results>.select2-results__options {
        max-height: 350px;
    }

    .option-disabled{
        color: #aaa;
        i {
            padding-right: 5px;
        }
    }
    /*--------------------------------------------------------------------------*/

    /*-------------------------------------Panel title--------------------------*/
    .selectablebox {
        padding: 10px;
        border-radius: 2px;
        background: white !important;
        span{
            white-space: normal;
        }
    }

    .modal-body .selectablebox{
        padding: 1px;
        padding-top: 10px;
    }

    .box-detail .modal-body .selectablebox{
        padding: 8px;
    }

    .box-detail .modal-body .selectablebox{
        padding: 8px;
    }

    .selectablebox:hover {
        cursor:pointer;
        background: #EAEAEA !important;
        border-left-color: @warningBkColor;
        border-left-width: 3px;
        border-left-style: solid;
    }

    .selectableboxSelected {
        background: #72afd2;
    }

    /* Timeline ----------------------------------------------------------------*/

    .timeline {
        .timeline-header{
            font-weight: bold;
            background: #e6e6e6;
        }

        .timeline-body{
            border-left: 1px solid @btnPrimaryColor;
            border-right: 1px solid @btnPrimaryColor;
        }

        .timeline-item{
            .box-header{
                background-color: @btnPrimaryColor;
            }
        }

        >li.time-label>span {
            font-size: @defaultFontSize;
            padding: 5px 10px;
            background-color: @secondaryColor;
            color: white;
            font-weight: 500;
            font-size: @defaultFontSizeBox;
        }

        .small-box {
            margin-bottom: 0;
        }

        .description-header {
            font-size: @defaultFontSize;
            margin-top: 0;
        }
    }

    .btn-collapse{
        color: @btnGreyColor !important;
        background-color: white;
        border-color: white;
    }

    /* Main-Header ------------------------------------------------------------ */

    header.main-header {
        background-color: @headerBkColor;
        position: fixed;
        width: 100%;
        .logo { 
            background-color: @headerBkColor;
            color: @headerFontColor; 
        }
        .sidebar-toggle {
            color: @menuIconColor;
            font-size: 18px;
            &:hover {
                color: #596B79;
                background: rgba(0, 0, 0, 0.1);
            }    
        }
        div.productName {
            margin-top: 5px;
            float: left;
            vertical-align: middle;        
            span.title { font-size: 16px; }
            span.subtitle {
                font-size: @defaultFontSize;
                display: block;
            }
        }
        nav.navbar {
            span { color: @menuTextColor; }
        }
        ul.nav.navbar-nav {
            text-align: center;
            padding: 0 10px;        
            >li.option {
                a {
                    color: @menuIconColor;
                    //height: 54px;
                    padding-left: 15px;
                    padding-right: 15px; 
                    @media (min-width: 768px) {
                        padding-top: 5px; 
                        padding-bottom: 5px; 
                    }
                    &:hover, &:active, &:focus {
                        background: rgba(0, 0, 0, 0.1);
                        color: @menuTextColor;
                    }
                    >span { display: block; }    
                }              
            }  
            li.option {
                height: 54px;
                padding: 0;
                i { font-size: 22px; }
                ul.dropdown-menu {
                    background-color: @subMenuBkColor;
                    margin-top: 3px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    width: auto;
                    font-size: @defaultFontSize;
                    box-shadow: none;
                    border: 0;
                    border-radius: 0 0 4px 4px;
                    border-bottom: 2px solid @secondaryColor;
                    list-style: none;    
                
                    ul { 
                        list-style: none; 
                        padding-left: 5px;
                    }
                    &.with-content { 
                        padding-top: 0;
                        width: 360px;
                        @media (max-width: 400px){
                            width: 92%;
                        }
                    }
                    &.user { 
                        padding-top: 0;
                        width: 360px;
                        @media (max-width: 400px){
                            width: 92%;
                        }
                        text-align: left;
                    }
                    li.divider {            
                        @media (max-width: 767px) {
                            background-color: rgba(255, 255, 255, 0.1);
                        }
                    }
                    li.dropdown {
                        color: @headerSubMenuColor;
                        font-size: @defaultFontSizeBox;
                        &:hover {
                            background: @headerSubMenuBkColor;
                            >a {
                                color: @headerSubMenuColor;
                                background: transparent;
                                border-left-color: @secondaryColor;
                            }       
                            &.user { 
                                background: transparent; 
                            }
                            &.with-content { 
                                background: transparent;
                            }
                        }
                        i:hover {
                          color: @headerSubMenuColor;
                        }
                        &.with-content {
                            padding: 0px 12px;
                            table {
                                margin-bottom: 0;
                            }
                            .menuitem-cursor:hover {
                                background: transparent;
                            }
                        }
                        &.header {
                            padding: 10px 0;
                            &.user {
                                background-color: @headerBkColor;
                                text-align: center;
                                color: @menuTextColor;
                                padding: 10px 0;
                                span {
                                    font-size: 14px;
                                    color: @menuTextColor; 
                                }
                            }
                            &.with-content {
                                background-color: @headerBkColor;
                                text-align: center;
                                color: @menuTextColor;
                                padding: 10px 0;
                                span {
                                    font-size: 14px;
                                    color: @menuTextColor; 
                                }
                                i {
                                    position: absolute;
                                    left: 15px;
                                    font-size: 18px;
                                    margin-top: 2px;
                                }
                                .btn-icon{
                                    .with-padding(5px);
                                    .margin-top(-3px);
                                }
                            }
                        }
                        &.footer {
                            margin-top: 20px;
                        }                    
                        span { 
                            color: @subMenuTextColor; 
                            display: inline;
                        }
                        a, a > i { 
                            color: @primaryColor;
                            font-size: @defaultFontSize;
                            padding: 5px;
                        }
                        form {
                            a {
                                color: @subMenuTextColor;
                                padding: 0;
                                &:hover { background: @subMenuBkColor; }
                                i {
                                    font-size: @defaultFontSize;
                                    margin-right: 6px
                                }
                            }                        
                            height: 54px;
                            margin: 15px 15px 5px 15px;
                            select {
                                display: block;
                                margin: 5px 0;
                                font-size: @defaultFontSize;
                            }
                        }
                        .button {
                            margin: 10px;
                            padding: 5px;
                            border: 1px solid #dddddd;
                            border-radius: 3px;
                            background-color: #eeeeee; 
                            &:hover { border: 1px solid #555555; }
                            a {
                                color: @subMenuTextColor;
                                padding: 0;
                                i {
                                    color: @subMenuTextColor;
                                    margin-right: 10px;
                                }
                                &:hover { background: #eeeeee; }
                            }
                            span {
                                display: table-cell !important;
                                font-size: @defaultFontSizeBox;
                                vertical-align: middle;
                            }
                        }
                    }
                }
            }        
        }
        .nav .open > a{
            background-color: transparent;
        }
    }

    .content-header {
        background: #9cc1ca;
        color: @defaultFontColor;
        padding: 10px 15px;
        display: table;
        width: 100%;
        position: fixed;
        top: 55px;
        z-index: 8;
        height: 50px;
        >div {
            display: table-cell;
            vertical-align: middle;
            padding: 0;
            margin: 0;
            &.title {
                h1 {
                    color: @defaultFontColor;
                    font-size: 20px; 
                    margin: 0 10px;  
                    small {
                        color: @defaultFontColor; 
                        font-size: 15px;
                        display: inline-block;
                        padding-left: 6px;
                        font-weight: 300;
                    }                   
                }
            }
            &.searcher {
                float: right;
                width: 400px;
                position: fixed;
                right: 15px;
                form {
                    display: inherit;
                    font-size: 16px;
                    height: 30px;
                    input.form-control.search {
                        background-color: @defaultBkColor; 
                        color: @defaultFontColor;
                        margin-bottom: 0;
                    }
                    button.btn.btn-default.search {
                        background-color: #eeeeee; 
                        color: @defaultFontColor;
                    }
                }
                @media (max-width: 767px){
                    position: relative;
                }
            }        
        }
        @media (max-width: 767px){
            position: relative;
            top: 0px;
        }
    }

    /* Side Bar-----------------------------------------------------   */

    .main-sidebar {
        background-color:  @sideBarBkColor;  
        color: #EAEAEA;
        position: fixed;
        height: 100%;
        .sidebar {
            height: 100%;
            div.productName {
                vertical-align: middle;        
                span.title { font-size: @defaultFontSize + 2; }
                span.subtitle {
                    font-size: @defaultFontSize;
                    display: block;
                }
            }
            a {
                color: #EAEAEA;
                :hover {
                    text-decoration: none;
                }
            }
        }
        .sidebar-menu {
            height: 100%;
            overflow-y: inherit;
            >li>a {
                border-left: 3px solid transparent;
            }               
            >li.active {          
                >a {
                    color: @menuTextColor;
                    background: @headerBkColor;
                    border-left-color: @secondaryColor;
                }  
                &:hover i,i { color: @secondaryColor; }            
            }
            >li:hover {
                >a {
                    color: @menuTextColor;
                    background: @headerBkColor;
                    border-left-color: @secondaryColor;
                }  
                i { color: @menuTextColor; }
            }
            .fa-angle-left,.fa-angle-down { font-size: @defaultFontSize + 6; }
            .treeview-menu {
                margin: 0 1px;
                margin-top: -3px;
                background: #2c3b41;            
                >li {
                    >a { 
                        color: @menuTextColor;
                        font-size: @defaultFontSize; 
                        border-left: 3px solid transparent;
                    }
                    :hover {
                        color: @menuTextColor;
                        background: @headerBkColor;
                        border-left-color: @secondaryColor;
                        i { color: @menuTextColor; }
                    }
                }
            }
        }  
    }

    /* Boxes -------------------------------------------------------   */

    .box {
        .box-title { 
            font-size: @defaultFontSize + 3; 
            width: 100%;
            .btn{
                padding: 0 !important;
                min-height: 0 !important;
            }
        }
        .subbox-title{
            font-size: @defaultFontSize + 3px;
            font-weight: bold;
        }
        .box-header {
        
            padding-left: @defaultMargin;
            padding-right: @defaultMargin;
            h3.box-title { 
                font-family: inherit;
                font-size: @defaultFontSize + 3; 
            }
                        
            .row > div{
                .margin-top(5px);
                .margin-bottom(5px);
            }
        }
        .box-footer{
            .input[type="checkbox"]{
                margin-top: 2px !important;
            }        
        }
        .box-body {
        
            padding-left: @defaultMargin;
            padding-right: @defaultMargin;
            font-size: @defaultFontSize + 1;
            .fa-mobile{
                font-size: @defaultFontSize + 4px !important;
                margin-left: -2px;
            }
            .appointment-info{
                .margin(5px,0,0,0);
            }
            .box-checkbox{
                margin-top: 20px !important;
            }
            .equipments-title{
                .margin(10px,0,10px,0);
                div{
                    .margin(5px,0,5px,0);
                }
            }
            .customer-main-icon{
                margin-top: 100%;
            }
            input[type="checkbox"]{
                margin-top: 3px !important;
            }
            .panel-title{
                font-size: @defaultFontSizeBox; 
            }
            h3 {
                font-family: inherit;
                font-size: @defaultFontSize + 5;
                margin-top: 0;
                .break-word();
            }
            td {
                h5 { margin: 3px 0 0 0; }
            }
            .header-tools {
                margin: 10px 0;
                div[class^=col-] {
                    padding: 0;            
                }
            }
            .fa-lock, .fa-unlock{
                color: rgb(51,51,51);
            }
            .logo { max-height: 120px; }
            .small { font-size: @defaultFontSize; }
            .text { cursor: pointer;}
            .title{
                    font-style: italic;
                    font-size: @defaultFontSize;
                }
            .description{
                span{ display: block; }
            }

            .selector{
                border: solid 0.2px #CCCCCC;
                border-radius: 10px;
                margin-top: 10px;
                margin-bottom: 10px;
                box-shadow: none;

                &:hover{
                    cursor: pointer;
                    background: #eaeaea;

                }
                .info-box-icon {
                    background: @headerBkColor;
                    color: #FFF;
                    border-radius: 50%;
                    max-width: 81%;
                    width: 70px;
                    height: 70px;
                    text-align: center;
                    line-height: inherit;
                    margin: 10px;
                }

                .info-box {
                    margin: 0;
                    border-radius: 10px;
                }
                        
                .info-box:hover {
                    background: #eaeaea; 
                    background: transparent;
                    color: #303940;
                }

                .info-box .info-box-content {
                    padding: 20px 10px;
                }
            }
            .selector:hover{
                cursor: pointer;
                background: #eaeaea;
            }
            .table-responsive{
                overflow-x: inherit;
            }
            .no-results-callout{
                .margin(@defaultMargin + 10px);
            }
            .no-results-text{
                font-size: @defaultFontSizeBox;
                font-weight: normal;
                .italic();
            }
            .unableToRebuildItems{
                margin-right: 0;
            }
            .input-group{
                select2-container .select2-selection--single{
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    min-height: @defaultControlHeight !important;
                }
            }
            .form-group{
                .select2-container .select2-selection--single{
                    min-height: @defaultControlHeight !important;
                }
                .box{
                    .margin(15px,0,15px,0);
                }
            }
            .vehicle-image-size{
                max-height: @defaultImageHeight;
                max-width: @defaultImageWidth;
            }
        }
        &.notification { 
            .todo-list>li { padding: 3px 10px; }
            li:hover {
                background-color: #CCCCCC;
            }
            ul { margin: 14px 0; }
            a { color: @defaultFontColor }
            .label {
                padding: .2em .6em .1em;
                font-size: 100%;
            }
        }
        &.box-detail{
            .box-body{
                position:relative;
                .title{
                    font-style: italic;
                    font-size: @defaultFontSize;
                }
                .description{
                    span{ display: block; }
                }
                .form-group{
                    margin-bottom: 10px;
                    .input-data{
                        margin-left:15px;
                    }
                    .control {
                        font-size: @defaultFontSize + 1;
                        line-height: 1;
                        padding-top: 10px;
                        padding-bottom: 0; 
                    }
                    .control-label {
                        .control();
                        padding-right: 0;
                        -ms-word-wrap: normal;
                        word-wrap: normal;
                        text-align:left;
                        padding-left: 15px;
                        font-weight: bold;
                        font-size:@defaultFontSize + 1;
                        padding-bottom: 5px;
                    }
                    label.control-data{ 
                        .control();
                        padding-left: 15px;
                        padding-right: 10px;
                    }
                    label.inline-control-data{
                        .control();
                        padding-left: 0;
                        padding-right: 0;
                        font-weight: normal;
                    }
                    .control-data {
                        padding-top: 6px;
                        padding-bottom: 6px;
                    }
                    input[type=checkbox].control-data { 
                        margin-top: 8px;
                    }
                    input, textarea{
                        border-radius: 4px !important;
                        border-style: solid;
                        border: 1px solid rgb(170,170,170);
                    }
                    input.missing-field, select.missing-field{
                        .missing-field();
                    }
                    .select2-container {
                        .select2-selection {
                            height: @defaultControlHeight;
                            min-height: @defaultControlHeight - 4px;
                            padding-top: 1px;
                            padding-bottom: 1px;
                        }
                        .missing-field{
                            .missing-field();
                        }
                    }
                    .input-group{
                        input.form-control {
                            border-top-right-radius: 0 !important; 
                            border-bottom-right-radius: 0 !important;
                            padding-left: 10px;
                        }
                        .select2-container();
                        .select2-container--default,
                        .select2-selection--single {
                            border-top-left-radius: 4px;
                            border-bottom-left-radius: 4px;
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                            //width: inherit !important;
                            width: 100% !important;
                        } 
                        input.round-border{
                            border-top-right-radius: 4px !important;
                            border-bottom-right-radius: 4px !important;
                        } 
                    }
                    .form-control{
                        margin-bottom: 0;
                    
                    }
                    select {
                        padding-bottom: 6px;
                        padding-top: 6px;
                        border-radius: 4px;
                    }

                }
                .box-footer{
                    .form-footer{
                        padding-left:20px;
                    }
                }
            } 
            .collapse{
                margin-top: 0;
            }
        }
    }

    /* Callouts         ---------------------------------------------   */

    .callout-container{
        z-index: 9999;
        left: 0;
        right: 0;
        margin: 0 auto;
        /*height: 40px;*/
        height: 100%;
        position: fixed;
        top: @defaultTop - 9px;
        font-size: @defaultFontSize + 2px;
        display: none;
        
    }
    .alert {
        border-color: #D9D9D9;
        border-width: 0px 0px 0px 10px;
        background-color: white !important;
        border-radius: 4px;
        color:black !important;
        .with-shadow(#AAA,10px);
        &.alert-success {
            border-left-color: @successBkColorBorder !important;
        }
        &.alert-info {
            border-left-color: @infoBkColorBorder !important;
        }
        &.alert-warning {
            border-left-color: @warningBkColorBorder !important;
        }
        &.alert-error {
            border-left-color: @dangerBkColor !important;
        }
        .close {
            position: relative;
            right: 0;
            top: 0;
        }
        span {
            .multiline()
        }
    }

    .callout-container > #callout{
       .vertical-scroll(50%);
    }

    .orderErrorSubtitle{
        margin-left: 25px;
        margin-top: 20px;
        margin-bottom: -15px;
        font-size: @defaultFontSizeBox;
    }
    /* Labels -------------------------------------------------------   */

    .label {
        &.label-danger { 
            background-color: @dangerBkColor !important;
            color: @dangerFontColor !important; 
        }
        &.label-warning { 
            background-color: @warningBkColor !important;
            color: @warningFontColor !important; 
        }
        &.label-info { 
            background-color:  @infoBkColor !important;
            color: @infoFontColor !important; 
        }
    }

    /* Buttons -------------------------------------------------------   */

    .btn {
        font-size: @defaultFontSize;
        color: @infoFontColor;
        padding: 6px 12px;
        min-height: @defaultControlHeight;
        &.btn-default {
            background-color: @btnDefaultColor;  
            color: @defaultFontColor;
            border-color: #aaa;
            &:hover {
                background-color: lighten(@btnDefaultColor, 5%)
            }
        }
        &.btn-link {
            color: #428bca;
        }
    }

    .modal-footer{
        .btn-primary{
            color: @defaultColor;
            background-color: @infoBkColorBorder;
            border-color: @infoBkColor;
            &:hover {
                background-color: lighten(@infoBkColorBorder, 5%)
            }
        }
        .error-text {
            color: red;
            text-align: center;
        }
    }


    .input-group-btn {
        .btn {
            &.btn-primary, &.btn-default {
                border-left: 0;
            }
        }
        action-button {
            button{
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        button{
            span{ 
                font-size:@defaultFontSizeBox;
            }
        }
    }

    /* Forms & Controls  ---------------------------------------------   */
    .form-footer {
        margin-top: 10px;
        border-radius: 0 0 3px 3px;
        border-bottom: 1px solid #f4f4f4;
        padding: 10px;
        background-color: #fff;
    }

    .form-control {
        height: @defaultControlHeight;
        margin-bottom: 0;
        font-size: @defaultFontSize;
    }

    textarea.form-control{
        height: auto;
        overflow-y: auto;
    }

    .box-tools {
        .form-control { margin-bottom: 0; }
    }

    .dropdown-menu {
        font-size: @defaultFontSize;
        min-width: 140px;
        border-bottom: 2px solid #FF6600;
    
        &.plate-masks-dropdown{
            overflow-y: auto;
            max-height: 270px;
            margin-bottom: 20px;
        }
    }

    .dropdown .user .footer >a.dropdown-toggle:hover{
        background-color: #dddddd !important;
    }

    .form-group {
        margin-bottom: 5px;
        .select2-container{
            width: 100% !important;
        }
        .input-group {
            select.form-control {
                border: 0;
                font-size: @defaultFontSize;
            }    
            .select2-container--default,
            .select2-selection--single {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                height: 100%;
            }   
            .select2-container {
                .select2-selection {
                    min-height: @defaultControlHeight;
                    padding-top: 1px;
                    padding-bottom: 1px;
                }
            }    
            select.select2-hidden-accessible {
                height: 0;
            }
            span.select2 {
                height: @defaultControlHeight;
            }
            .btn { margin: 0 5px; }
            .input-group-btn { 
                .btn { margin: 0; }
            }
        }
        .control-label {
            line-height: 97%;
        }
        .control-data {
            padding: 5px;
            font-weight: normal;
        }
        select.form-control {
            font-size: @defaultFontSize;
            margin-bottom: 5px;
        }
    }

    .input-sm {
        font-size: @defaultFontSize;
    }

    input.datepicker,
    input.datepicker:read-only {
        background-color: transparent;
    }

    select.form-control {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px !important;
    }


    /* Miscelanea  ---------------------------------------------   */

    .vcenter {
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }


    .truncate {
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .ellipsis {
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .size-md {
        width: 400px;
    }

    .with-padding(@padding){
        padding: @padding;
    }

    .no-margin {
        div.form-group {
            margin: 0;
            padding-bottom: -10px;
        }
    }

    .no-vertical-margin {
        margin-top: 0;
        margin-bottom: 0;
    }
    .no-vertical-padding {
        padding-top: 0;
        padding-bottom: 0;
    }

    .no-horizontal-padding {
        padding-left: 0;
        padding-right: 0;
    }

    .no-left-padding {
        padding-left: 0;
    }

    .validation-box {
        color: #a94442;    
        margin-bottom: 5px;
    }

    .html-tooltip + .tooltip > .tooltip-inner {
        background-color: #eaeaea !important;
        border: 2px solid #cccccc !important;
        padding: 5px 10px !important;
        color: black !important;
        border-radius: 2px !important;
        box-shadow: 0 0 2px black !important;
        font-size: 12px;
        max-width: 350px !important;
        min-width: 1px  !important;
        white-space: nowrap !important;
    }

    .aida-dropdown-menu {
        background-color: #eaeaea !important;
        border: 2px solid #cccccc !important;
        padding: 5px 10px !important;
        color: black !important;
        border-radius: 10px !important;
        font-size: 12px;
    }

    .multiline {
        white-space: pre-wrap;
        -ms-word-break: break-word;
        word-break: break-word;
    }
    .break-word{
        -ms-word-break: break-word;
        word-break: break-word;
    }
    .bold {
        font-weight: bold;
    }
    .normal {
        font-weight: normal;
    }
    .cell-padding-left {
        padding-left: 5px;
    }
    .cell-disabled {
      background: #eaeaea; 
      border: 1px solid #cccccc;
    }
    .cell-with-bottom-border {
      border-bottom: 1px solid #cccccc;
    }

    .cell-with-border {
      border: 1px solid #cccccc;
    }
    .cell-text-center {
      text-align: center;
    }

    .cell-fit-to-content {
        width: 1px;
        white-space: nowrap;
    }

    .clickable {
        cursor: pointer;
    }

    .radio-orange {
        display: inline-block;
        vertical-align: middle;
        margin: 5px;
        padding: 0;
        width: 20px;
        height: 20px;
        background: url(../../img/common/orange.png) no-repeat;
        border: none;
        background-position: -88px 0;
    }

    .radio-orange.checked {
        background-position: -110px 0;
    }

    .without-opacity {
        opacity: 0;
    }

    /* Wizards*/
    .wizard{
        ul.steps>li.enable>a{
            background-color: transparent;
            border-top-color: transparent;
        }
        &>.row{
            margin-top: 10px;
        }
    }

    /* Tables -------------------------------------------------------   */

    table {
        >tbody>tr,
        >tbody>tr>td {
                border: none; 
        }
        .even-row {
            background-color: #F5F5F5;
        }
        &.table-hover > tbody > tr:hover {
            background-color: rgba(255, 102, 0, 0.06);
        }
        &.table-collapsable{
            tr,td{
                text-align: left;
                vertical-align: top;
            }
        }
        &.table-collapsable{
            tr,td{
                text-align: left;
            }
        }
    }

    /* Nav-Pills -------------------------------------------------------   */

    @pillBackColor: #f5f5f5;
    @linkColor: black;

    .nav {
        &.nav-tabs {
            border-bottom: 0;
            >li {
                margin-left: 5px;
                line-height: 1;
                border-top: 2px solid transparent;            
                >a {
                    color: @linkColor;
                    background-color: @pillBackColor;
                    border: none;
                    margin-top: 0; 
                    margin-left: 2px;
                }
                >a:hover {
                    color: ligthen(@linkColor, 5%);
                    background-color: darken(@pillBackColor, 5%);
                    border: none;
                    margin-top: 0; 
                    margin-left: 2px;
                }
                &.active {
                    border-top: 2px solid @secondaryColor;
                    >div {
                        padding: 10px 15px;
                    }
                    >div,>a {
                        font-weight: normal;
                    }
                    >div,>a,>a:focus,>a:hover {
                        background-color: transparent;
                        border: none;
                        margin-top: 0; 
                    }
                    .badge,.label {
                        background-color: @secondaryColor !important;
                    }
                }
            }
            .badge,.label {
                position: absolute;
                top: -6px;
                right: -2px;
                font-size: 11px;
                font-weight: 400;
                background-color: #ccc !important;
            }
        }
        &.list-tabs{
            margin-top: 5px;
        }   
    }

    /* Icons -------------------------------------------------------   */

    .icon {
        &.icon-btn {
            color: @infoBkColor;
            cursor: pointer;
        }
    }

    .width-select2-content{
        width: 95%;
    }

    .width-icon{
        width: 25px;
    }

    .with-overflow {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .with-margin-top {
        margin-top: 10px;
    }

    span.large {
        font-size: 20px;
    }

    .float-left {
	    float: left;
	    &.with-margin-left {
		    margin-left: 5px;
	    }
    }

    td .icon {
      width: 39px;
      height: 33px;
    }

    .searcher_customer_color{
        color: #625D5D;
    }

    .dropdown-menu-with-header {
        padding-top: 0;
	    text-align: left;
    }

    .dropdown-header {
        background-color: #5A697B;
        text-align: center;
        color: #FFFFFF;
        padding: 10px 0;

        >span {
            font-size: 14px;
            color: #FFFFFF;
        }
    }

    .fa {
        font-size: medium;
    }

    .with-red-border {
        border-left: 3px solid red;
    }

    .dropdown-table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        padding: 10px;
        font-size: 13px;
    }

    .inherit-size {
        font-size: inherit;
    }

    .fa-2x {
        font-size: 2em;
    }

    .with-shadow(@color, @px){
        box-shadow: @px @px @px @color !important;
    }
    .with-shadow {
        .with-shadow(#AAA, 10px);
    }

    .with-padding-left(@paddingLeft) {
        padding-left: @paddingLeft;
    }

    .with-padding-left {
        .with-padding-left(10px);
    }

    .with-padding-top(@paddingTop) {
        padding-top: @paddingTop;
    }

    .with-padding-top {
        .with-padding-top(10px);
    }

    .modal-message {
        font-size: 13px;
    }

    .with-margin-bottom {
        margin-bottom: 10px;
    }
    .jsgrid-grid-header,
    .jsgrid-grid-body{
      overflow: auto;
    }
    .without-background {
      background: transparent;
    }
    i.large {
      font-size: 20px;
    }
    .vertical-centered {
      vertical-align: middle;
    }
    .notifications {
      background-color: #ff6600 !important;
    }
    .background-light-orange {
      background-color: rgba(255, 102, 0, 0.1) !important;
    }
    .modal-auto-width{
      @media(min-width: 768px){
        width: 70%;
      }

    }
    .btn-grid{
        padding: 0px 5px;
        border: 1px solid #bbb;
        i, span{
            width: 1.28571429em;
            text-align: center;
            color: #5A697B;
        }
        &[disabled]{
            opacity: 0.4;
        }
    }

    .notifications-table tr{
        border-top: 1px solid @btnDefaultColor;
    }

    .dd-justify {
        text-align: justify;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}