.widget {
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0px;
  }
  .widget-title {
    color: @sidebarHeadingsColor;
    font-size: @font-size-h4;
    .header-highlight-stroke;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  select {
    max-width: 100%;
  }
}


.widget_rss, .widget_pages, .widget_meta, .widget_recent_comments, .widget_nav_menu, .widget_archive, .widget_categories, .widget_recent_entries {

  ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    padding-left: 10px;
    li {
      // border: 1px solid #A7BED3;
      margin-bottom: 8px;
      position: relative;
      padding: 3px 0px 3px 15px;
      font-size: ceil(@baseFontSize * 0.9);
      line-height: @baseFontSize;
      &:before {
        content: "\f10c";
        .osfont;
        color: lighten(@linkColor, 10%);
        font-size: 6px;
        position: absolute;
        left: 0px;
        top: 6px;
      }
      a {
        // border-left: 3px solid #DAE6F2;
        // background-color: #fff;
        &:hover {
          color: #3878B5;
          text-decoration: underline;
        }
      }
    }
  }
}

.widget_rss {
  .rssSummary {
    font-size: ceil(@baseFontSize * 0.9);
  }
  .rss-date {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  cite {
    font-size: 10px;
    margin-top: 5px;
    display: block;
  }
}
.widget_tag_cloud {
  .tagcloud {
    a {
      font-size: 11px!important;
      padding: 2px 6px;
      margin-bottom: 4px;
      display: inline-block;
      background-color: @tagLinkBackground;
      color: @tagLinkColor;
      border: 1px solid @tagLinkBorderColor;
      border-radius: 4px;
      &:hover {
        border-color: darken(@tagLinkBorderColor, 20%);
        background-color: lighten(@tagLinkBackground, 20%);
        text-decoration: none;
      }
    }
  }
}

.widget_calendar {
  caption {
    text-transform: uppercase;
    color: #748799;
    font-size: 11px;
    margin-bottom: 5px;
  }
  table {
    width: 100%;
    font-size: ceil(@baseFontSize * 0.9);
  }
  th {
    text-align: right;
    padding: 5px;
    border: 1px solid darken(@sidebarBackgroundColor, 10%);
    background-color: darken(@sidebarBackgroundColor, 5%);
  }
  tfoot td{
    padding-top: 10px;
  }
  tbody td {
    text-align: right;
    padding: 5px;
    border: 1px solid darken(@sidebarBackgroundColor, 10%);
    color: #6A8496;
    a {
      color: #0083FF;
    }
  }
}

.widget_search {
  border-radius: @sidebarSearchBorderRadius;
  padding: @sidebarSearchPadding;
  .box-shadow(@sidebarSearchShadow);
  background-color: @sidebarSearchBackgroundFrom;
  #gradient > .vertical(@start-color: @sidebarSearchBackgroundFrom; @end-color: @sidebarSearchBackgroundTo);
  border: @sidebarSearchBorder;

  form {
    position: relative;
    &:before {
      .osfont;
      content: "\f002";
      top: 7px;
      right: 10px;
      position: absolute;
      color: @sidebarSearchIconColor;
      font-size: 16px;
    }
  }

  .widget-title, .search-submit, .screen-reader-text {
    display: none;
  }
  label {
    display: block;
    margin-bottom: 0px;
  }
  .search-field {
    display: block;
    width: 100%;
    border-radius: ceil(@sidebarSearchBorderRadius * 0.6);
    border: 1px solid @sidebarSearchInputBorder;
    border-top: 1px solid darken(@sidebarSearchInputBorder, 10%);
    padding: 5px 8px;
    .box-shadow(@sidebarSearchInputShadow);
    background-color: @sidebarSearchInputBackground;
    outline: none;
    color: @sidebarSearchInputColor;
    &:focus {
      border: 1px solid darken(@sidebarSearchInputBorder, 20%);
    }
  }
}



// Popular posts widget
.tptn_posts_widget {
  ul {
    list-style: none;
    margin: 0px;
    padding: 0px;

    li {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid darken(@sidebarBackgroundColor, 10%);
      .clearfix();

      > a {
        display: block;
        float: left;
        width: 20%;
        img {
          width: 100%;
          height: auto;
        }
      }
      .tptn_after_thumb {
        display: block;
        float: left;
        width: 80%;
        padding-left: 10px;

        .tptn_link {
          display: block;
          font-size: ceil(@baseFontSize * 0.9);
        }
        .tptn_author {
          font-size: ceil(@baseFontSize * 0.7);
        }
        .tptn_date {
          font-size: ceil(@baseFontSize * 0.7);
          color: #899CAF;
        }
      }
      &:last-child {
        border-bottom: none;
        margin-bottom: 0px;
      }
    }
  }
}

.widget-written-by, .widget-related-post {
  border-top: 1px solid darken(@bodyBackgroundColor, 10%);
  padding-top: 40px;
  img {
    max-width: 100%;
    height: auto;
  }
  .widget-caption {
    margin-bottom: 5px;
    margin-top: 0px;
    a {
      color: @bodyHeadingsColor;
    }
  }
  .widget-title {
    color: @bodyHeadingsColor;
    margin-top: 0px;
  }
  .widget-content {
    font-size: ceil(@baseFontSize * 0.9);
    color: @bodyTextColor;
  }
  @media (max-width: @screen-sm-max){
    .row {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
}

.sidebar-under-post .under-post-widget-column:first-child .widget {
  @media (min-width: @screen-md-min) {
    padding-right: 20px;
  }
  @media (max-width: @screen-sm-max) {
    margin-bottom: 40px!important;
  }
}
.sidebar-under-post .under-post-widget-column:last-child .widget {
  @media (min-width: @screen-md-min) {
    padding-left: 20px;
  }
}

.widget_text {
  iframe {
    width: 100%;
  }
}


// WRAPPED WIDGETS
.wrapped-widgets {
  .widget {
    margin-bottom: 30px;
    padding: 20px;
    border: @postBorder;
    .box-shadow(@postShadow);
    background-color: @postBackground;
    border-radius: @border-radius-large;
    .widget-title {
      margin-top: 0px;
    }
    &:last-child {
      margin-bottom: 0px;
    }
    &.AdWidget_ImageWidget {
      padding: 0px;
      border: none;
      .box-shadow(none);
      background-color: transparent;
      border-radius: 0px;
    }
  }
}


.under-menu-sidebar-wrapper {
  .widget {
    &.AdWidget_ImageWidget {

    }
  }
}

.top-sidebar-wrapper {
  .widget {
    &.AdWidget_ImageWidget {
    }
  }
}

// HIDE AD WIDGET ON SMARTPHONES IF SO SET IN ADMIN
.no-ads-on-smartphones {
  @media (max-width: @screen-xs-max) {
    .top-sidebar-wrapper {
      display: none;
    }
    .AdWidget_HTMLWidget {
      display: none;
    }
  }
}
// HIDE AD WIDGET ON TABLETS IF SO SET IN ADMIN
.no-ads-on-tablets {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .top-sidebar-wrapper {
      display: none;
    }
    .AdWidget_HTMLWidget {
      display: none;
    }
  }
}


.menu-position-top {
  .top-sidebar-wrapper {
    padding-top: 30px;
  }
}

.ads_top_placeholder_widget {
  background-color: @adsTopBackground!important;
  color: @adsTopColor;
  border: @adsTopBorder;
  border-radius: @adsTopBorderRadius;
  padding: 30px!important;
  .box-shadow(none!important);
  font-size: 18px;
  font-weight: @headingsFontWeight;
  margin: 0px auto;
  max-width: 700px;
  width: auto;
}

.ads_side_placeholder_widget {
  background-color: @adsSideBackground;
  border: @adsSideBorder;
  border-radius: @adsSideBorderRadius;
  color: @adsSideColor;
  text-align: center;
  background-color: @adsSideBackground!important;
  color: @adsSideColor;
  padding: 50px 20px!important;
  .box-shadow(none!important);
  h4 {
    color: @adsSideColor;
    border-bottom: 1px solid darken(@adsSideBackground, 5%);
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: inline-block;
  }
}

.ads_menu_placeholder_widget {
  background-color: @adsMenuBackground;
  color: @adsMenuColor;
  border: @adsMenuBorder;
  border-radius: @adsMenuBorderRadius;
  text-align: center;
  background-color: @adsMenuBackground!important;
  color: @adsMenuColor;
  padding: 30px 20px!important;
  .box-shadow(none!important);
  h4 {
    color: @adsMenuColor;
    border-bottom: 1px solid darken(@adsMenuBackground, 5%);
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: inline-block;
  }
}


// Mailchimp newsletter widget
.mc4wp-form {

  border-radius: @sidebarSearchBorderRadius;
  padding: @sidebarSearchPadding;
  .box-shadow(@sidebarSearchShadow);
  background-color: @sidebarSearchBackgroundFrom;
  #gradient > .vertical(@start-color: @sidebarSearchBackgroundFrom; @end-color: @sidebarSearchBackgroundTo);
  border: @sidebarSearchBorder;
  position: relative;
  text-align: center;

  label {
    display: block;
    margin-bottom: 7px;
    padding-left: 3px;
  }
  select,
  textarea,
  input[type="text"],
  input[type="email"] {
    display: block;
    width: 100%;
    border-radius: ceil(@sidebarSearchBorderRadius * 0.6);
    border: 1px solid @sidebarSearchInputBorder;
    border-top: 1px solid darken(@sidebarSearchInputBorder, 10%);
    padding: 5px 8px;
    .box-shadow(@sidebarSearchInputShadow);
    background-color: @sidebarSearchInputBackground;
    outline: none;
    color: @sidebarSearchInputColor;
    &:focus {
      border: 1px solid darken(@sidebarSearchInputBorder, 20%);
    }
  }
  input[type="submit"] {
    .btn;
    .btn-unflat-primary;
    display: block;
    width: 100%;
  }
  h4 {
    color: @sidebarHeadingsColor;
    margin-bottom: 35px;
    position: relative;
    font-size: @font-size-h4;
    &:after {
      content: "";
      position: absolute;
      width: 40px;
      display: block;
      height: @highlightStrokesHeight;
      background-color: @highlightStrokesBackground;
      bottom: -15px;
    }
  }
  .mc4wp-alert {
    font-size: ceil(@baseFontSize * 0.8);
    line-height: ceil(@baseFontSize * 1);
    margin-top: 10px;
    &.mc4wp-success {
      padding: 5px 10px;
      background-color: #648E33;
      color: #fff;
    }
  }
}

.widget {
  .zilla-social {
    a {
      margin-right: 5px;
      margin-bottom: 5px;
      display: inline-block;
      img {
        width: 24px;
        .opacity(0.8);
      }
      &:hover {
        img {
          .opacity(1);
        }
      }
    }
  }
}


@media (min-width: @screen-lg-min + 350) {
  .widget .tptn_posts_widget {
    li {

      > a {
        img {
        }
      }
      .tptn_after_thumb {
        padding-left: 20px;

        .tptn_link {
          display: block;
          font-size: ceil(@baseFontSize * 1);
          margin-bottom: 2px;
        }
        .tptn_author {
          font-size: ceil(@baseFontSize * 0.9);
        }
        .tptn_date {
          font-size: ceil(@baseFontSize * 0.9);
        }
      }
    }
  }
  .widget_rss, .widget_pages, .widget_meta, .widget_recent_comments, .widget_nav_menu, .widget_archive, .widget_categories, .widget_recent_entries {
    ul {
      li {
        font-size: ceil(@baseFontSize * 1);
        line-height: ceil(@baseFontSize * 1.2);;
      }
    }
  }
}

.widget .instagram-pics {
  list-style: none;
  margin: 0px;
  padding: 0px;
  .clearfix;
  li {
    float: left;
    width: 50%;
  }
}



// WIDGETS IN THE FOOTER
.pre-footer {
  &.floated-widgets {

    .widget {
      background-color: #fff;
      float: left;
      border-radius: @borderRadiusBase;

      .widget-title {
        border-bottom: 1px dashed rgba(0,0,0,0.1);
        padding-bottom: 15px;
        margin-bottom: 15px;
        margin-top: 0px;
        text-align: center;
      }
      .shortcode-categories-icons {
        table {
          margin-top: 0px;
        }
      }
    }

    &.widgets-count-2 {
      .widget {
        width: 47.5%;
        padding: 40px;
        margin-right: 5%;
        &:last-child {
          margin-right: 0px;
        }
      }  
    }
    &.widgets-count-3 {
      .widget {
        width: 30%;
        padding: 30px;
        margin-right: 5%;
        &:last-child {
          margin-right: 0px;
        }
      }  
    }
    &.widgets-count-4 {
      .widget {
        width: 22%;
        padding: 20px;
        margin-right: 4%;
        &:last-child {
          margin-right: 0px;
        }
      }  
    }
    &.widgets-count-4 {
      .widget {
        width: 22%;
        padding: 20px;
        margin-right: 4%;
        margin-bottom: 4%;
        &:last-child, &:nth-child(4n) {
          margin-right: 0px;
        }
        &:nth-child(4n + 5) {
          clear: left;
        }
      }  
    }
  }

  &.stacked-widgets {
    .widget {
      width: 100%;
      display: table;
      table-layout: fixed;
      padding: 25px 50px;
      margin-bottom: 0px;
      &.no-padding {
        padding: 0px;
      }
      .widget-title {
        display: table-cell;
        width: 200px;
        font-size: floor(@headingsBaseFontSize * 1.1);
        padding-right: 20px;
        vertical-align: middle;
        &:after {
          height: 30px;
          width: 5px;
          top: 50%;
          bottom: auto;
          right: 0px;
          .transform(translateY(-50%));
        }
      }

      ul {
        display: table-cell;
        list-style: none;
        padding-left: 40px;
        vertical-align: middle;
        li {
          display: inline-block;
          border: none;
          padding: 0px;
          margin-right: 3px;
          margin-bottom: 6px;
          .font-headings();
          a {
            font-size: floor(@headingsBaseFontSize * 0.7);
            padding: 2px 6px;
            display: inline-block;
            border: none;
          }
        }
      }
      .tagcloud {
        display: table-cell;
        list-style: none;
        padding-left: 40px;
        vertical-align: middle;
        .font-alternative();
        a {
            margin-right: 3px;
            margin-bottom: 6px;
            font-size: floor(@baseFontSize * 0.9);
            padding: 2px 6px;
            display: inline-block;
        }
      }
      #sbi_load {
        padding: 0px!important;
      }
      &.widget_widget_tptn_pop {
        ul {
          li {
            width: 300px;
            border: none;
            padding: 0px;
            padding-right: 40px;
            margin: 0px;
            .font-headings();
            display: table;
            table-layout: fixed;
            & > .tptn_link {
              width: 50px;
              display: table-cell;
              float: none;
              vertical-align: middle;
              img {
                width: 100%;
                height: auto;
              }
            }
            .tptn_after_thumb {
              vertical-align: middle;
              display: table-cell;
              float: none;
            }
            .tptn_after_thumb a {
              font-size: floor(@headingsBaseFontSize * 0.7);
              padding: 2px 6px;
              display: inline-block;
            }
          }
        }
      }
      &.widget_categories li a{
        .font-alternative();
      }
    }
  }
  &.color-scheme-dark {

    &.stacked-widgets {
      .widget {
        border-top: 1px solid rgba(255,255,255, 0.2);
        .widget-title {
          color: rgba(255,255,255, 0.8);
        }

        ul {
          li {
            color: rgba(255,255,255, 0.8);
            a {
              color: rgba(255,255,255, 0.7);
              border: 1px solid rgba(255,255,255, 0.5);
              background-color: rgba(0,0,0,0.2);
            }
          }
        }
        .tagcloud {
          a {
              color: rgba(255,255,255, 0.7);
              border: 1px solid rgba(255,255,255, 0.5);
              background-color: rgba(0,0,0,0.2);
          }
        }
        &.widget_widget_tptn_pop {
          ul {
            li {
              color: rgba(255,255,255, 0.8);
              .tptn_after_thumb a {
                color: rgba(255,255,255, 0.8);
                border: 1px solid rgba(255,255,255, 0.5);
              }
            }
          }
        }
      }
    }
  }
  &.color-scheme-light {
    &.stacked-widgets {
      .widget {
        border-top: 1px solid rgba(0,0,0,0.3);
        .widget-title {
          color: rgba(0,0,0,0.8);
        }

        ul {
          li {
            color: rgba(0,0,0,0.8);
            a {
              color: rgba(0,0,0,0.8);
              border: 1px solid rgba(0,0,0,0.7);
            }
          }
        }
        .tagcloud {
          a {
              color: rgba(0,0,0,0.8);
              border: 1px solid rgba(0,0,0,0.7);
          }
        }
        &.widget_widget_tptn_pop {
          ul {
            li {
              color: rgba(0,0,0,0.8);
              .tptn_after_thumb a {
                color: rgba(0,0,0,0.8);
                border: 1px solid rgba(0,0,0,0.7);
              }
            }
          }
        }
      }
    }
  }
}