
//----------------------------------
// ------  CARD GRID LAYOUT
// ---------------------------------

  .cards--grid.cards .card {

    .card-content__icon{
      width: 100%;
      height: auto;
      float: none;
      padding-bottom: 63%;
      .glyphicons {
        color: #fff;
        font-size: 64px;
        height: 64px;
        line-height: 64px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -32px 0 0 -32px;
        width: 64px;
      }
    }
  }

@media only screen and (min-width:480px) and (max-width: 979px) {
      .cards--grid.cards .card {
        width: (100% / 2);
    }

}


//----------------------------------
// ------  CARD IMAGES
// ---------------------------------
.cards--grid.cards .card {

  .card-content{
    &__img-container {
      position: relative;
      z-index: -1;
    }
    &__img{
      width: 100%;
      height: auto;
      max-height: 300px;
      float: none;

      img {
        width: 100% !important;
        height: auto;
      }
    }
  }
}

.cards--grid {
  .orgchart-card {
      padding: 0;
      border: none;
      .card-title {
         margin: 0;
      }
    @media only screen and (max-width: 479px) {
      width: 100%;
    }

    .card {
      &-content {
        position: relative;
        z-index: 2;

        .action_required {
          position: absolute;
          margin-right: 10px;
          min-height: 18px;
          padding: 9px;
          width: 100%;
          line-height: 13px;

          .orgchart-edit-link {
            color: #fff;
            line-height: 1.52857;
          }
        }

        &:hover {
          opacity: 1;
          -webkit-transform: translateY(-3px);
          -ms-transform: translateY(-3px);
          transform: translateY(-3px);


        }

        &__detail {
          height: 45px;
        }
      }
      &-title {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
        font-weight: bold;
        color: #000;

        img {
          width: 80%;
          max-width: 125px;
        }

        &:hover {
          text-decoration: none;
          color: #000;
        }
      }
    }
  }
}

.card-content:hover {
  .card-content__toolbar{
    visibility: visible;
    opacity: 1;
  }

  .card-content__inner {
    text-decoration: none;
    opacity: 1;
  }
}



// Card toolbar
.card-content__toolbar {
  position:absolute;
  top:0;
  width:99.9%;
  padding:10px;
  background-color:rgba( black, .5 );
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.15s linear;

  a {
    color:white;
    &:hover {
      color:white;
      text-decoration: none;
      opacity:0.8;
    }
  }
}

@media only screen and (max-width: 980px) {
  .card-content__toolbar {
    visibility: visible;
    opacity: 1;
  }
}


/*--------------Create/Edit OrgChart----------------*/

#head {
  .input-group {
    width: 100%;
  }
}

#title {
  @media only screen and (min-width: 768px) {
    width: 407px;
  }
}

#exclude_from_orgchart {
  .input-group {
    width: 75%;

    @media only screen and (max-width: 768px) {
      width: 100%;
    }

    .select2-container .select2-selection--multiple {
      border-right: 1px solid #ccc;
    }
  }

  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #66afe9;
  }

  a.btn.btn-secondary {
    margin-left: -2px;
  }
}

.page-preview {
    padding: 20px;

    .oc-export-btn {
        right: 18px;

        @media only screen and (max-width : 768px) {
            top: 0;
        }
    }
}

.select2-container--default {
  display: table!important;
  table-layout: fixed!important;
}

//----------------------------------
// ------  Orgchart view UI
// --------------------------------

@media only screen and (max-width : 480px) {
  .app-menu {
    .btn-toolbar .btn-success{
      width: calc(100% - 57px);
    }

    .orgchart-style-switch {
      width: 100%;

      .btn {
        float: left;
        width: 47%;
        display: inline-block;
        margin-top: 10px;

        &:first-child {
          margin-left: 5px;
        }

        &:nth-child(2) {
          margin-left: 3%;
        }
      }
    }
  }
}

.orgchart-zoom-buttons {
    display: flex;
    flex-wrap: nowrap;
}

.orgchart_title {
	@media only screen and (max-width : 768px) {
        order: 4;
        width: 100%;
	}

    @media only screen and (max-width : 576px) {
        font-size: 18px;
    }
}

.oc-download-btn {
    display: none;
}

// backup image to be shown when the profile photo is flagged as tainted by javascript cross-origin policy
.orgchart-tainted-image-replacement {
  background: transparent url('/interface_default/orgchart/profile_image_missing.png') no-repeat center 7px;
}

.orgchart-style-switch {
  display: inline-block;
}

.exclude-from-orgchart {
    width: 63%;
}

.admin-body .exclude-from-orgchart {
    width: 60.6%;
}
