/**
 * Misc. Salaxy components.
 */

 /* TODO: This was marked as a fix to AngularStrap datepicker. See if it still is relevant or not. */
.salaxy-component .datepicker.dropdown-menu button {
  outline: none;
  border: 0px;
}
 
.container-fluid{
    /* use to wrap elements when extra padding is needed
    /* i.e. fullwidth elements with box-shadow or such styling */
    .col-padding{
        padding-left:floor((@grid-gutter-width / 3));
        padding-right:floor((@grid-gutter-width / 3));
    }
} 

#salaxy-alert-container {
    // TODO: Rename
    position: fixed;
    top: 10px;
    right: 10px;
}
.chart-container{
    
    position: relative;
   
}

.salaxy-placeholder-empty{
  border-style: dashed;
  background-color:fade(@gray-base, 2%);
  border-color:#ddd;
  margin-bottom:10px;
  
  .margin-xs {
    @media screen and (max-width:767px) {
      margin-bottom:20px;
    }
  }
  .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5{
    padding-top:0;
    margin-top:0;
  }
  &.placeholder-lg{
    border-width:4px;
    padding: @grid-gutter-width;
    
  }
  &.placeholder-md{
    border-width:3px;
    padding: @grid-gutter-width;
    
  }
  &.placeholder-sm{
    border-width: 2px;
    padding: floor((@grid-gutter-width / 2));
    
           
  }
  &.placeholder-default{
   background-color:fade(@gray-base, 2%);
    border-color:#ddd;
  }
  &.placeholder-warning{
    background-color:fade(@brand-warning, 3%);
    border-color:@brand-warning;
  }
  &.placeholder-danger{
    background-color:fade(@brand-danger, 3%);
    border-color:@brand-danger;
  }
  &.placeholder-success{
    background-color:fade(@brand-success, 3%);
    border-color:@brand-success;
  }
  &.placeholder-info{
    background-color:fade(@brand-info, 3%);
    border-color:@brand-info;
  }
  &.placeholder-primary{
    background-color:fade(@brand-primary, 3%);
    border-color:@brand-primary;
  }
} 

.border-danger{
  border-color:@brand-danger;
}
.border-success{
  border-color:@brand-success;
}
.salaxy-component {
  .col-padding{
      padding-left: floor((@grid-gutter-width / 2));
      padding-right:floor((@grid-gutter-width / 2));
  }
  .popover {
      max-width: 276px;
      width: 276px;
      font-size: 13px; 
      .emphasis{
        margin-top: 7px;
        margin-bottom: 7px;
        display: block;
        padding: 5px 8px;
        background-color: rgba(0,0,0,0.05);
    }  
  }
    
  .copy-share-url{
    width:100%;
    .input-group {
      width:100%;
    }
    .input-group-addon{
      padding-left: 12px;
      padding-right: 12px; 
      position: relative; 
      border-radius:4px 0px 0px 4px;
      .fa{
        display: block;
        width: 100%; 
        font-size:125%;
      }
      .text-indicate{
        font-size: 70%;
        position: absolute;
        width: 100%;
        margin-left: -12px;
        display: block;
        text-align: center;
        margin-top: -6px;
      }
    }
    .form-control{
      font-size:85%; min-height:40px;
    }
    
  }
  .animated-input{
    display:inline-block;
     input{
      height:28px;
      font-size: 0.9em;
      border-radius:2px;
      border: 1px solid #ddd;
      padding:0;
     }
      
    &.hide-input{
      input{
        width:0;
        visibility:hidden;
        transition: all .3s ease;
      }
      
    }
    &.show-input{
      input{
        width:150px;
        visibility: visible;
        transition: all .3s ease;
        margin-right:2px;
        padding: 6px 12px;
      }
      
    }
  }
}
.max-h-600{
  max-height: 600px; overflow-y: auto;
}
.max-h-200{
  max-height: 200px; overflow-y: auto;
}
h4 .text-white, .text-white{
  color:#fff;
}

@media screen and (min-width: 992px){
    .margin-top-md{
        margin-top:20px;
    }
}
@media screen and (max-width: @screen-sm-max){
  .margin-top-sm{
      margin-top:20px;
  }
}
@media screen and (max-width: 767px){
    .margin-top-xs{
        margin-top:20px;
    }

}

@media (min-width: 768px) {
    .border-right-sm{
        border-right:2px dashed #ddd;
    }
    .pull-right-sm {
        float: right;
    }
    .text-center-sm{
        text-align:center;
        }
    .text-right-sm{
        text-align:right;
    }


}
/* TODO: go through widths and class names*/
@media (min-width:576px){
    .pull-right-xs {
        float: right !important;
    }
}

@media (max-width:480px){
    .col-xxs-12{
      width: 100%;
    }
    .col-xxs-10{
        width: 83.33333333%;
    }
    .col-xxs-9{
     width: 75%;
    }
    .col-xxs-3{
      width: 25%
    }
    .hidden-xxs{
        display:none !important;
    }
    .text-center-xxs-down{
      text-align:center;
    }
    /*typeahead dropdown*/
    [uib-typeahead-popup].dropdown-menu > li{ 
      > a.clickable {
        padding: 3px 7px;
        font-size:13px;
        white-space: normal;
        }
      }
    .salaxy-navi-main-container{ 
        .container {
             width: 100%;
         }
    }
    .salaxy-accounting-target-editor {
      .accounting-target-info-col {
          font-size: 0.9em;
      }
    } 
}
@media (min-width:481px){
  .visible-xxs{
    display:none;
  }
}

// Very large screens, mainly for Pro / Admin purposes.
@media (min-width: @salaxy-screen-xxl-min) {
  .make-grid(xxl);
}
.visible-xxl {
  .responsive-invisibility();
}
.visible-xxl-block,
.visible-xxl-inline,
.visible-xxl-inline-block {
  display: none !important;
}
.visible-xxl {
  @media (min-width: @salaxy-screen-xxl-min) {
    .responsive-visibility();
  }
}
.visible-xxl-block {
  @media (min-width: @salaxy-screen-xxl-min) {
    display: block !important;
  }
}
.visible-xxl-inline {
  @media (min-width: @salaxy-screen-xxl-min) {
    display: inline !important;
  }
}
.visible-xxl-inline-block {
  @media (min-width: @salaxy-screen-xxl-min) {
    display: inline-block !important;
  }
}
.hidden-xxl {
  @media (min-width: @salaxy-screen-xxl-min) {
    .responsive-invisibility();
  }
}


.uib-datepicker-popup.dropdown-menu {
  z-index:1051;
}