/***********************************/
/* custom widgets classes (email widget, charts, etc). This file can be removed. */
/***********************************/

/***********************************/
/**          EVENTS               **/
/**********************************/

.external-event {
  margin: 15px 0;
  padding: 5px 10px;
  color: #fff;
  cursor: pointer;
  border-radius: $border-radius-base;
}


/***********************************/
/**          FEED                 **/
/**********************************/

.feed{
  height: 100%;
  //overflow-y: auto;
  position: relative;

  .wrapper{
    position: relative;
  }

  .vertical-line{
    height: 100%;
    width: 2px;
    background: $feed-item-line-color;
    position: absolute;
    left: 13px;
  }
}

.feed-item{
  @include clearfix;
  padding-right: 6px;
  .icon{
    position: relative;
    z-index: 1;
    background: $feed-item-bg;
    text-align: center;
    color: $feed-item-color;
    width: 28px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    border-radius: 20px;
    font-size: 16px;

    img{
      position: relative;
      top: -2px;
      width: 26px;
      height: 26px;
    }
  }
}

.feed-item + .feed-item{
  margin-top: 10px;
}

.feed-item-body{
  padding-top: 3px;
  margin-left: 40px;
  vertical-align: bottom;

  .time{
    font-size: $font-size-small;
    line-height: 1.5em;
    color: $text-muted;
  }
}

//jQuery DataTables

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
}

table.table thead .sorting { background: url('#{$libs-compiled-folder}/datatables/media/images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('#{$libs-compiled-folder}/datatables/media/images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('#{$libs-compiled-folder}/datatables/media/images/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('#{$libs-compiled-folder}/datatables/media/images/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('#{$libs-compiled-folder}/datatables/media/images/sort_desc_disabled.png') no-repeat center right; }

.per-page-selector label{
  vertical-align: middle;
  line-height: 26px;
}

.table-top-control{
  margin-bottom: 5px;
}

.table-bottom-control{
  margin-top: 10px;
  .pagination{
    margin: 0;
  }
}

/***********************************/
/**          BOXES               **/
/**********************************/


/*boxes*/
.box{
  border-radius: $border-radius-base;

  padding: 5px;
  text-align: center;
  margin-bottom: $widget-mb;
  background: $widget-bg;
  color: $widget-color;

  .description{
    font-weight: normal;
    text-align: center;
    margin: 10px -5px;
  }

  .icon, .big-text{
    margin-top: 15px;
    font-size: 36px;
    line-height: 36px;
    height: 36px;
    font-weight: bold;
  }
}

/***********************************/
/**          CHARTS               **/
/**********************************/


.large .pie-chart{
  height: 212px;
}

.xlarge .pie-chart{
  height: 298px;
}

.pie-chart{
  position: relative;

  .total{
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
  }

  .visits{
    font-weight: $font-weight-base;
    color: $widget-header-color;
    font-size: $font-size-large;
  }
}

.pie-chart-footer{

  .controls{
    margin-top: 16px;
    width: 100%;
  }

  .control{
    @include box-sizing(content-box);
    background: $bg-addition;
    text-align: center;
    font-weight: normal;
    padding: 3px 2%;
    color: $widget-header-color;
    width: 20.625%;
    cursor: pointer;
    @include user-select(none);

    margin-left: 0.5%;

    float:left;

    &:first-child{
      border-bottom-left-radius: $border-radius-base;
      margin-left: 0;
    }

    &:last-child{
      border-bottom-right-radius: $border-radius-base;
    }

    &.disabled{
      border-top: 3px solid transparent !important;
    }

    .key{
      font-size: $font-size-small;
      font-weight: normal;
      margin: 0;
    }

    .value{
      font-size: $font-size-large;
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
}

.visits-chart{
  height: 200px;
}

.visits-info{
  margin: $widget-padding-vertical (-$widget-padding-horizontal) (-$widget-padding-vertical);
  padding-top: 18px;
  padding-bottom: 3px;
  border: none;
  text-align: center;

  .key{
    color: $widget-header-color
  }

  .value{
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: $font-size-large;
  }
}

/* disable bootstrap 3 border-box for tooltips */
.jqstooltip{
  &, *{
    @include box-sizing(content-box);
  }
}

/***********************************/
/**          NEWS LIST           **/
/**********************************/
/**
 * Legacy .users-list. Will be removed in next release.
 */

.news-list,
.users-list{

  &.news-list-no-hover li:hover{
    background: none;
    cursor: default;
  }

  &.stretchable > li{
    height: auto;
  }

  li{
    @include box-sizing(content-box);
    border-top: 1px solid $bg-addition;
    padding: 12px;
    margin: 0 (-$widget-padding-horizontal);
    cursor: pointer;
    height: 50px;
    @include transition(background-color .2s ease-out);

    &:hover{
      background: $bg-addition;
    }

    &:last-child{
      margin-bottom: -$widget-padding-vertical;
    }
  }

  img,
  .icon{
    float: left;
    height: 50px;
    width: 50px;
  }

  .icon{
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
  }

  .news-item-info{
    margin-left: 62px; /*50 + 12px padding*/
  }

  .name, .time, .position{
    line-height: 16px;
  }

  h4.name{
    text-transform: none;
  }

  .name{
    margin: 0;
    text-transform: uppercase;

    a{
      text-decoration: none;
      &:hover{
        color: $link-color;
      }
    }
  }

  p{
    margin-top: 5px;
    font-size: 90%;
    line-height: 1.4;
  }

  .time{
    font-size: $font-size-small;
    color: $text-muted;
  }

  .options{
    margin-top: 5px;
  }

  .comment{
    font-size: $font-size-small;
    color: $widget-color;
    line-height: 1.3em;
  }
}

.users-list-group{
  img{
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
  }

  .fa-circle{
    margin-top: 14px;
  }
}


/***********************************/
/**          LOGIN                **/
/**********************************/

.single-widget-container {
  left: 0;
  top: 50%;
  margin-top: -(385px / 2);
  position: absolute;
  width: 100%;

  .widget {
    margin: 0 auto;
  }
}

.login-widget, .registration-widget {
  width: 350px;
  padding-bottom: 0;

  header {
    margin: 15px 0 25px 0;
  }

  .form-control{
    font-size: $font-size-base;
  }

  .input-group-addon{
    padding: 8px 7px;
    i{
      &, &:before, &:after{
        width: 20px;
        margin: 0;
      }
    }
  }

  .form-actions {
    margin: 0 (-$widget-padding-horizontal);
    padding: 20px 15px 0 15px;

    .small-circle {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: rgba(0,0,0,.2);

      i{
        position: relative;
        left: 1px;
      }
    }
    .forgot {
      display: block;
      text-align: center;
      color: $widget-header-color;
      padding: 15px 0;
    }
  }

  footer{
    margin: 0 (-$widget-padding-horizontal);
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    overflow: hidden;
    position: static;
  }

  .facebook-login {
    @include box-sizing(content-box);
    height: 30px;
    background: $blue;
    text-align: center;
    padding-top: 10px;

    a {
      color: $white;
      display: block;
      text-shadow: none;
      text-decoration: none;
    }

  }
}

/***********************************/
/**          CHAT                 **/
/**********************************/

.chat-messages{
  padding-right: 15px; //some space for scroll
}

.chat-footer{
  height: 40px;
  @include box-sizing(border-box);
  padding-top: 10px;
  input{
    margin-bottom: 0;
  }
}

.chat-message{
  @include clearfix;
  .icon{
    position: relative;
    z-index: 1;
    text-align: center;
    width: 53px;
    height: 53px;
    line-height: 53px;
    vertical-align: middle;
    border-radius: 53px;

    img{
      position: relative;
      top: -2px;
      width: 50px;
      height: 50px;
    }
  }

  .time{
    font-size: $font-size-small;
    line-height: 1.5em;
    text-align: center;
    color: $text-muted;
  }
}

.chat-message + .chat-message{
  margin-top: 10px;
}

.chat-message-body{
  margin-left: 63px;
  padding: 8px 10px;
  background: $bg-addition;
  position: relative;
  border-left: 2px solid darken($widget-bg, 10%);

  border-radius: $border-radius-base;

  &.on-left{
    margin-left: 0;
    margin-right: 63px;
    border-left: none;
    border-right: 2px solid darken($widget-bg, 10%);

    .arrow{
      left: auto;
      right: -7px;

      border-right: none;
      border-left: 5px solid darken($widget-bg, 10%);
    }

    .sender, .text{
      text-align: right;
    }
  }

  .arrow{
    display: block;
    position: absolute;
    top: 21px;
    left: -7px;
    width: 0;
    height: 0;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid darken($widget-bg, 10%);
  }
}

/***********************************/
/**           ICON LIST           **/
/***********************************/

.icon-list{
  margin-top: $line-height-computed;
}

.icon-list-item{
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  > a{
    color: $widget-color;
    text-decoration: none;
  }


  .glyphicon,
  .fa{
    width: 32px;
    margin-right: 10px;
  }

  &:hover{
    .glyphicon,
    .fa{
      font-size: 28px;
    }

    .fa{
      vertical-align: -5px;
    }

    .glyphicon{
      vertical-align: -6px;
    }
  }
}

.widget-padding-md {
  padding: 20px;
}

/***********************/
/*    Notifications    */
/***********************/

.location-selector {
  width: 100%;
  height: 220px;
  border: 1px dashed $location-selector-border-color;
  background-color: $location-selector-bg;
  position: relative; }
.location-selector .bit {
  background-color: darken($location-selector-bg, 10%);
  @include transition(background-color .15s ease-in-out);
  cursor: pointer;
  position: absolute; }
.location-selector .bit:hover {
  background-color: darken($location-selector-bg, 15%);; }
.location-selector .bit.top, .location-selector .bit.bottom {
  height: 25%;
  width: 40%;
  margin: 0 30%; }
.location-selector .bit.top {
  top: 0; }
.location-selector .bit.bottom {
  bottom: 0; }
.location-selector .bit.right, .location-selector .bit.left {
  height: 20%;
  width: 20%;
  margin-left: 0;
  margin-right: 0; }
.location-selector .bit.right {
  right: 0; }
.location-selector .bit.left {
  left: 0; }