/* AMOS-LAYOUT */

/* LAYOUT COMMON DEFAULT VARIABLES*/
@background-color-network-scope: @primary-color;
@font-color-network-scope: contrast(@primary-color);

/**
PAGE CONTENT
*/
html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: @main-background-color;
  background-image: @image-background-default;
  //background: linear-gradient( rgba(26, 148, 111, 0.45), rgba(26, 148, 111, 0.45) );
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding: 0;
  margin: 0;
  overflow-x: hidden;

  .flexbox;
  .flexbox-column;
  width: 100%;
  min-height: 100vh;

  #bk-page {
    >.container {
      //padding-bottom: 60px; commented because container-message it's too distance
      padding-top: 10px;

      &.container-full-width {
        width: 100%;
      }
    }
  }
}

/**
LAYOUTS
*/
.page-header {
  margin: 30px 0 0 0;
  color: @text-primary-color;
  border-bottom: 1px solid @text-primary-color;

  h1,
  .title {
    color: @text-primary-color;
    margin: 0;
    font-weight: 200;
    font-size: 2.36em;
    line-height: 1.1;
  }

  .title+.text-help-layout {
    margin: @margin-medium 0;
    padding: @padding-large;
    background-color: @info-color;
    color: contrast(@info-color);
    font-size: 1.25em;
    line-height: 1.4;

    a {
      color: contrast(@info-color);
    }
  }
}

.page-content {
  background-color: #fff;
  padding: @padding-large;
  float: left;
  width: 100%;
  margin-bottom: 100px;

  /* space bottom for assistance */
  &.network-breadcrumb {
    /* class set in view_network layout */
    background-color: transparent;

    .breadcrumb a {
      /* override */
      color: @white-color;
    }
  }
}

.icon-view,
.grid-view,
.list-view {
  @media (min-width: 420px) {
    float: left;
    width: 100%;
  }
}

.btnViewContainer {
  margin: @margin-default 0 0 0;
}

//-----------------------------------------------
// VIEW
// DD DT
// CENTERED
//-----------------------------------------------
.centered-details {
  section {
    margin: 25px 0px;

    h2 {
      border-bottom: 1px solid @primary-color;
      padding-bottom: 8px;
    }

    h3 {
      color: @primary-color;
      border-bottom: 2px solid @border-color-default;
      margin-bottom: 20px;
    }

    dl {
      width: 100%;
      clear: both;
      text-align: center;
      margin-bottom: 0;
    }

    dt {
      font-weight: normal;
      float: left;
      width: 40%;
      margin-bottom: @margin-min;
      text-align: right;
    }

    dd {
      font-weight: bold;
      float: left;
      text-align: left;
      margin-left: 20px;
    }
  }
}

/**
NETWORK SCOPE
 */
.network-container {

  +.page-content,
  +.container-custom>.page-content {
    margin-top: 0;
  }

  .back-to-dashboard {
    color: @font-color-network-scope;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    padding: 5px @padding-default;
    background: #A0A1A0;
  }

  .enter-community {
    color: @white-color;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    padding: 10px @padding-default;
    background: @brand-primary-color;
    font-size: 1.4em;
    width: 100%;
    display: block;
    text-align: center;

    >span {
      display: none;
    }
  }

  .network-box {
    //overflow: hidden;
    position: relative;
    min-height: 540px;

    img {
      .cover-object;
    }

    .network-infos {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 15px;
      color: #fff;
      background: rgba(22, 22, 22, 0);
      //background: -moz-linear-gradient(to bottom, rgba(22,22,22,0) 0%, #161616 100%);
      //background: -webkit-linear-gradient(to bottom, rgba(22,22,22,0) 0%, #161616 100%);
      //background: linear-gradient(to bottom, rgba(22,22,22,0) 0%, #161616 100%);

      .network-name {
        a {
          color: @font-color-network-scope;
          font-weight: bold;
          margin-bottom: 0;
        }
      }

      .wrap-icons {
        .flexbox;
        align-items: center;

        >*:not(.modal-utility) {
          margin: 0 5px;
        }
      }

      .manage-network-scope {
        /* custom layout from basic widget */
        font-size: 2em;
        margin: 0;

        .manage-menu {
          text-decoration: none;
          color: @font-color-network-scope;
        }

        @media (max-width: 991px) {
          right: 30px;
        }

        @media (max-width: 450px) {
          right: 0;
          top: 40px;
        }
      }

      .reportflag-widget a {
        /* override basic widget */
        color: @font-color-network-scope;
      }

      .amos-tooltip {
        /* override basic widget */
        color: @font-color-network-scope;
        font-size: 2em;
      }
    }
  }

  +.page-content.network-breadcrumb {
    /* for community dashboard */
    margin-bottom: 0;
    /* override */
  }

  &.event-network-container~.network-breadcrumb,
  &.community-network-container~.network-breadcrumb {
    display: none;
  }

  .container-like {
    margin-right: auto;

    #like.likeme>.btn {
      color: @danger-color;
    }

    .btn {
      border: none;
      box-shadow: none;
      padding: 6px 0;
      text-transform: none;
      color: @text-primary-color;
    }

    +.modal {
      .modal-header {
        .dash-heart {
          color: @danger-color;
          margin-right: @margin-min;
        }
      }

      .modal-body {
        .container-round-img-sm {
          margin: 0;
        }
      }
    }
  }
}

.header-network {
  .flexbox;
  flex-direction: column;
  //justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 30px 0 15px 0;

  .network-footer {
    padding: 15px 30px 15px 20px;
    border-top: 1px solid #404040;
    .flexbox;
    margin-top: auto;
    justify-content: space-between;
    //.back-to-dashboard + .btn.btn-icon,
    //.wrap-icons .amos-tooltip,
    //.wrap-icons .report-dropdown .btn,
    //.wrap-icons .manage-network-scope .manage-menu {
    //  color: #ffffff;
    //  background: transparent;
    //  border: none;
    //  position: relative;
    //  width: 28px;
    //  height: 28px;
    //  font-size: 26px;
    //  padding: 0;
    //  display: block;
    //  margin-top: 0;
    //  > .ic {
    //    width: 28px;
    //    height: 28px;
    //    display: block;
    //    position: relative;
    //    right: 7px;
    //  }
    //}

    .btn.link_calendar {
      color: @white-color;
      background: transparent;
      border-color: transparent;
      text-transform: uppercase;
      text-decoration: none;
      border-color: transparent;
      font-weight: normal;
    }

    .wrap-icons {
      .flexbox;

      >*:not(.modal):not(.open) {
        margin-left: 5px;
      }

      /**
      socialshare - report
       */
      .btn.dropdown-toggle {
        border-radius: 50%;
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 20px;
        border-color: transparent;
        background: @white-color;

        .caret {
          display: none;
        }

        .am-flag {
          color: #161616;
        }
      }

      .manage-network-scope .ic.ic-settings,
      .amos-tooltip {
        font-size: 2.1em;
        color: @white-color;
      }

      .manage-network-scope .ic.ic-settings {
        position: relative;
        left: -8px;
      }
    }

    .report-dropdown {
      .counter {
        position: absolute;
        color: contrast(#FFE300);
        background: #FFE300;
        font-size: 12px;
        border-radius: 50%;
        padding: 0px 5px;
        left: 18px;
        top: -8px;

        +.caret {
          display: none;
        }
      }
    }

    /*    .manage-network-scope {
      width: 26px;
      .manage-menu {
        text-decoration: none;
      }
    }*/
  }
}

.event-network-container {

  .wrap-head {
    display: flex;
    justify-content: space-between;
    height: 250px;

    >div {
      margin: 0 25px;
    }

    .poster-event {
      flex: 53%;
    }

    .map-event {
      flex: 33%;
    }
  }

  .network-box {
    height: 540px;
  }

  .header-event {
    .header-network;
    width: 100%;
  }

  .control-event {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .control-address,
  .control-subscribe {
    color: #fff;

    .boxed-data {
      font-weight: normal;
    }
  }

  .control-subscribe {
    margin-top: 18px;
  }
}

.community-network-container {
  .header-community {
    .header-network;
    width: 33.333%;

    @media (min-width: @tablet) {
      width: 70%;
    }

    @media (min-width: @desktop) {
      width: 50%;
    }

    @media (min-width: @desktop-large) {
      width: 33.333%;
    }

    @media (max-width: @smartphone-only) {
      width: 100%;
    }

    .poster-community {
      background: @white-color;
      margin: 0 30px;

      @media (max-width: @smartphone-only) {
        height: 40%;
      }
    }

    .control-community {
      padding: 0 30px 20px;
    }
  }
}

.community-network-container,
//backward compatibility amos-community
.fullscreen-network-container {
  .network-box {
    min-height: unset;

    >img {
      position: absolute;
    }

    .network-infos {
      position: relative;
      .flexbox;
      top: 0;
      padding: 0 !important;

      .container-custom {
        .flexbox;
        width: 100%;

        .network-name>a {
          font-size: 0.8em;
          text-decoration: none;
        }

        .community-status {
          text-transform: uppercase;

          &:before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin: 3px 10px 8px 0;
          }

          &.private {
            &:before {
              background: @warning-color;
            }
          }

          &.open {
            &:before {
              background: @success-color;
            }
          }

          &.closed {
            &:before {
              background: @danger-color;
            }
          }
        }

        /*.btn {
          font-size: 2em;
          padding: 0;
          line-height: 0;
          color: @white-color;
        }*/
      }
    }
  }
}

/**
WIDGET BODY CONTENT
contains
- report-dropdown widget
- socialshare-dropdown widget
- like widget
in view (amos-news, amos-documenti, amos-discussioni)
 */
.widget-body-content {
  display: inline-flex;
  .flexbox-row;
  justify-content: flex-end;
  margin: @margin-default 0;

  >div[class*="-dropdown"]+div[class*="-dropdown"],
  >div[class*="-dropdown"]+.modal+div[class*="-dropdown"],
  >div[class*="-dropdown"]+.modal+.modal+div[class*="-dropdown"] {
    margin-left: @margin-default;
  }

  .btn.dropdown-toggle {
    color: @text-primary-color;
    padding: 2px @padding-min;
    max-height: 32px;
    margin-left: 3px;

    .am-flag,
    .am-share {
      font-size: 2em;
    }

    .counter,
    .caret {
      position: relative;
      bottom: 4px;
    }

    .caret {
      border-top: 6px dashed;
      border-right: 6px solid transparent;
      border-left: 6px solid transparent;
      margin-left: @margin-medium;
    }
  }

  .container-like {
    margin-right: auto;

    #like.likeme>.btn {
      color: @danger-color;
    }

    .btn {
      border: none;
      box-shadow: none;
      padding: 6px 0;
      text-transform: none;
      color: @text-primary-color;
    }

    +.modal {
      .modal-header {
        .dash-heart {
          color: @danger-color;
          margin-right: @margin-min;
        }
      }

      .modal-body {
        .container-round-img-sm {
          margin: 0;
        }
      }
    }
  }
}

/**
ATTACHMENT SECTION
 */
.attachment-section {
  /* in sidebar _form */
  background-color: @light-background-color;
  display: block;

  h2 {
    text-transform: uppercase;
    margin-bottom: 0;
  }

  .tooltip-field .help-block {
    line-height: 1.1em;
  }

  .attachments-list .attachment-list-item .attachment-list-item-name {
    width: 80%;
    /* hide attachment name too long */
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
  }

  .file-caption.form-control.kv-fileinput-caption {
    background-color: @white-color;
  }

  &.attachment-inline {
    /* in main body form (ersaf-announcements) */
    background-color: transparent;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 40% 60%;
    grid-template-columns: 40% 60%;
    -webkit-column-gap: 30px;
    column-gap: 30px;
    margin-bottom: @margin-min;
    padding-right: 45px;
    padding-bottom: @padding-medium;
    border: 1px solid @primary-color;

    .attachments-list {
      margin-top: 25px;

      .attachment-list-item {
        padding: @padding-min;
        background-color: @light-background-color;

        &:last-child {
          margin-bottom: 0;
        }
      }

      label {
        width: 100%;
        background-color: @primary-color;
        padding: @padding-min;
        color: @white-color;
        margin-bottom: 0;
      }

      .no-items {
        width: 100%;
        background-color: @secondary-color;
        padding: @padding-min;
        color: @white-color;
      }
    }
  }

  @media screen and (max-width: 991px) {
    display: block;
    padding: 0 @padding-medium @padding-default;
    border: 1px solid @primary-color;
    margin-top: @margin-default;

    &.attachment-inline {
      .attachments-list {
        margin-top: @margin-min;
      }
    }
  }
}

.attachment-section-sidebar {
  /* in sidebar view */
  background-color: @light-background-color;

  h2 {
    background-color: @primary-color;
    text-transform: uppercase;
    color: contrast(@primary-color);
    font-size: 1em;
    font-weight: bold;
    padding: 10px 7px;
    margin-top: 0;
  }

  .attachments-list .attachment-list-item .attachment-list-item-name {
    width: 80%;
    /* hide attachment name too long */

    overflow: hidden;
    position: relative;
    top: 8px;
  }

  .dash-paperclip {
    margin-right: @margin-min;
  }
}

/**
TAGS SECTION
 */
.tags-section-sidebar {
  background-color: @light-background-color;

  h2 {
    background-color: @primary-color;
    text-transform: uppercase;
    color: contrast(@primary-color);
    font-size: 1em;
    font-weight: bold;
    padding: 10px 7px;
    margin-top: 0;

    &+div {
      //max-height: 275px; /* calc for view 5 tags */
      //overflow: auto;
    }
  }

  .dash-tag {
    margin-right: @margin-min;
  }
}

/**
CHILDREN ORGANIZATION
(amos-organizzazioni)
 */
.children-organizations-section-sidebar {
  background-color: @light-background-color;
  padding-bottom: @padding-default;

  h2 {
    background-color: @primary-color;
    text-transform: uppercase;
    color: contrast(@primary-color);
    font-size: 1em;
    font-weight: bold;
    padding: 10px 7px;
    margin-top: 0;
  }

  .children-organizations-list-item .children-organizations-list-item-name {
    overflow: hidden;

    >p {
      font-weight: bold;
    }
  }
}

/**
TYPOLOGY SECTION
(amos-community view)
 */
.typology-section-sidebar {
  background-color: @primary-color;
  color: contrast(@primary-color);
  padding-bottom: @padding-default;

  h2 {
    background-color: @primary-color;
    text-transform: uppercase;
    color: contrast(@primary-color);
    border-bottom: 1px solid contrast(@primary-color);
    font-size: 1em;
    font-weight: bold;
    padding: 10px 7px;
    margin-top: 0;
  }

  .dash-key {
    margin-right: @margin-min;
  }

  .info-label {
    text-align: right;
    padding-right: @margin-min;
  }

  .info-value {
    text-transform: uppercase;
    font-weight: bold;
  }

  .btn-join-community {
    text-align: center;
    margin-top: @margin-default;

    .btn {
      /* override */
      padding: 3px 12px;
      min-width: 150px;
    }
  }
}

/**
MEMBER SECTION (include m2mwidgetmini)
(amos-community)
 */
@member-section-status-background-color: lighten(desaturate(spin(#006057, -88.6607), 47.4308), 31.5686);
@member-section-status-color: contrast(@member-section-status-background-color);

.member-section {
  background-color: @light-background-color;

  h2 {
    text-transform: uppercase;
    margin-bottom: 0;
    max-width: 80%;
    float: left;
  }

  .btn-m2m {
    margin-top: 18px;
    /* same as h2 */
    float: right;
  }

  .container-tools {
    /* override */
    background-color: transparent;
    padding: 0px;
    margin: @margin-medium 0;
  }

  .member-items {
    >p {
      margin: 0;
    }

    .member-item-name {
      font-weight: bold;
    }

    .member-item-role {
      font-style: italic;
      text-transform: uppercase;
    }

    .member-item-status {
      padding: 0px @padding-medium;
      background-color: @member-section-status-background-color;
      color: @member-section-status-color;
    }
  }
}

.member-section-sidebar {
  background-color: @light-background-color;

  h2 {
    background-color: @primary-color;
    text-transform: uppercase;
    color: contrast(@primary-color);
    font-size: 1em;
    font-weight: bold;
    padding: 10px 7px;
    margin-top: 0;
  }

  .am-globe {
    margin-right: @margin-min;
    font-size: 1.2em;
  }

  .btn-m2m {
    float: right;
  }

  .container-tools {
    /* override */
    background-color: transparent;
    padding: 0px;
    margin: @margin-medium 0;
  }

  .member-items {
    >p {
      margin: 0;
    }

    .member-item-name {
      font-weight: bold;
    }

    .member-item-role {
      font-style: italic;
      text-transform: uppercase;
    }

    .member-item-status {
      padding: 0px @padding-medium;
      background-color: @member-section-status-background-color;
      color: @member-section-status-color;
    }
  }
}

/**
SUBCOMMUNITY SECTION include m2mwidgetmini)
(amos-community)
 */
@subcommunity-section-status-background-color: lighten(desaturate(spin(#006057, -88.6607), 47.4308), 31.5686);
@subcommunity-section-status-color: contrast(@member-section-status-background-color);

.subcommunity-section {
  background-color: @light-background-color;

  h2 {
    text-transform: uppercase;
    margin-bottom: 0;
    max-width: 80%;
    float: left;
  }

  .btn-m2m {
    margin-top: 18px;
    /* same as h2 */
    float: right;
  }

  .container-tools {
    /* override */
    background-color: transparent;
    padding: 0px;
    margin: @margin-medium 0;
  }

  .member-items {
    >p {
      margin: 0;
    }

    .member-item-name {
      font-weight: bold;
    }

    .member-item-role {
      font-style: italic;
      text-transform: uppercase;
    }

    .member-item-status {
      padding: 0px @padding-medium;
      background-color: @subcommunity-section-status-background-color;
      color: @subcommunity-section-status-color;
    }
  }
}

/**
COMMON RULES -FORM
 */

div[class*="-form"] {
  >.row>.col-md-8 {
    /* form main body + sidebar*/
    padding: 0;

    >.form-group {
      padding: 0 @padding-default;
    }

    +div.col-md-4 {
      /* form sidebar */
      padding: 0 @padding-default 0 @padding-default;
    }
  }

  >.row>.col-md-12 {
    /* form full body */
    padding: 0;
  }
}

/**
COMMON RULES -FORM into TAB
 */
div[class*="-form"] {
  @media (min-width: 992px) {
    >.row .tab-content .tab-pane>.col-md-8 {
      /* body into tab (amos-admin) */
      padding: 0 @padding-default 0 0;
    }

    >.row .tab-content .tab-pane>.col-md-4 {
      /* sidebar into tab (amos-admin) */
      padding: 0 @padding-default 0 0;
    }
  }

  @media (max-width: 991px) {

    >.row .tab-content .tab-pane>.col-md-8,
    >.row .tab-content .tab-pane>.col-md-4 {
      padding: 0;
    }
  }
}

/**
COMMON RULES -VIEW
(amos-news, amos-discussioni, amos-documenti, amos-community)
 */
div[class*="-view"] {
  @media (min-width: 992px) {
    >.col-md-8 {
      /* main body */
      padding: 0 @padding-default 0 0;
    }

    >.col-md-4 {
      /* sidebar */
      padding: 0;
    }
  }

  .header-widget {
    position: relative;
    margin: @margin-medium 0;

    .post-header .publication-date {
      text-align: right;
    }

    .manage {
      /* override */
      margin-top: 0;
    }

    .amos-tooltip {
      float: right;
    }

    .reportflag-widget {
      float: right;

      a {
        margin: 0px 12px;
        position: relative;
        bottom: 2px;
      }
    }
  }

  .header {
    background-color: @light-background-color;
    margin-bottom: @margin-default;
    overflow: hidden;
    max-height: 350px;
    .flexbox;
    align-items: center;
    justify-content: center;

    @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
      /* fix IE11 */
      display: block;
    }

    .img-responsive {
      margin: 0 auto;
    }

    .title {
      background-color: rgba(255, 255, 255, 0.8);

      .title-text {
        font-weight: bold;
        margin-top: @margin-medium;
        margin-bottom: @margin-min;
        color: @black-color;
      }

      .subtitle-text {
        margin-top: 0;
        color: @black-color;
        font-style: italic;
        font-size: 1.3em;
      }
    }

    @media (max-width: 420px) {
      min-height: initial;
      display: block;

      .title {
        position: relative !important;
      }
    }
  }

  .text-content {
    iframe {
      width: 100%;
      min-height: 350px;
      margin-top: 20px;
    }
    img{
      max-width: 100%;
      height: auto;
    }
  }
}

/**
COMMON RULES -SECTION-SIDEBAR
 */
div[class*="-section-sidebar"] {
  h2.section-disabled {
    background-color: @light-background-color;
    border-bottom: 1px solid @white-color;
    color: @secondary-color;

    &+div {
      margin-bottom: @margin-default;
    }
  }

  .no-items {
    text-align: center;
  }

  +div[class*="-section-sidebar"] {
    margin-top: @margin-default;
  }

  @media (max-width: 991px) {
    margin-top: @margin-min;
  }
}

/**
COMMON RULES -SECTION
 */
div[class*="-section"] {
  +div[class*="-section"] {
    margin-top: @margin-default;
  }

  .no-items {
    clear: left;
    padding-bottom: @padding-medium;
  }
}

/**
UNDERLINE DECORATION HOVER X LINK AND TITLE
 */

.wrap-graphic-widget .box-widget .widget-listbox-option .wrap-item-box a:hover {
  text-decoration: underline !important;
}

.listview-container.news-item .icon-body .title:hover {
  text-decoration: underline !important;
}

.post-content .post-title a {
  text-decoration: none !important;

  &:hover {
    text-decoration: underline !important;
  }
}