/*
 * Component: modal
 * ----------------
 */
.modal {
  //background: rgba(0, 0, 0, .3);
}

.modal-dialog {
  overflow-y: initial !important
}

.modal-body {
  overflow-y: auto;
  max-height: ~"calc(100vh - 210px)";

  .list-assistant {
    table {
      thead {
        th {
          a {
            color: @black-bootstrap;
            pointer-events: none;
            cursor: default;
          }

          i, img {
            display: none;
          }
        }
      }
    }
  }
}

.modal-content {
  .border-radius(3px);
  .box-shadow(0 5px 10px rgba(0, 0, 0, .3));
  border: 0;
  @media (min-width: @screen-sm-min) {
    .box-shadow(0 5px 10px rgba(0, 0, 0, .3));
  }
}

.modal-header {
  color: #ffffff;
  border-bottom: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
  cursor: move;
  padding: 10px 15px;

  .modal-title {
    font-weight: 500;
  }

  .close {
    color: #ffffff;
    margin-top: 0;
    font-size: 34px;
    font-weight: normal;
    text-shadow: none;
    filter: alpha(opacity=80);
    opacity: .8;
    &:hover {
      filter: alpha(opacity=100);
      opacity: 1;
    }
  }
}

.modal-footer {
  border-top-color: @box-border-color;
  padding: 10px 15px;

  .button-delete,
  .button-submit-add {
    display: none;
  }
}

//Modal variants
.modal-module-list {
  .modal-body {
    max-height: 580px;
  }

  .dui-svg-icon {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
  }

  .btn-app {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 100px;
    background-color: #ffffff;
    border-color: transparent;
    border-radius: 5px;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: box-shadow .25s;

    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, .2);

      > .badge.badge-pin {
        display: inline-block;
      }
    }

    &:active, &:focus {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
    }

    > .badge.badge-pin {
      display: none;
      top: 0;
      right: -3px;
      background-color: transparent;
      border: none;
      font-size: 11px;

      &:hover {
        .icon-pin-module path {
          fill: #888888;
        }
      }

      &.active {
        display: inline-block;
        .icon-pin-module path {
          fill: #888888;
        }
      }

      .icon-pin-module {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        path {
          fill: #bbbbbb;
        }
      }
    }
  }
}

@media (min-width: @screen-lg-min) {
  .modal-lg {
    width: @screen-lg;
  }

  .modal-module-list .modal-lg {
    width: @modal-lg;
  }
}