/***************************************************************************
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 2 of the License', or
 *   ('at your option) any later version.
 *
***************************************************************************/


/**********************************/
/**  MODAL STYLES  **/
/**********************************/

#mysbOverlay {
  position: fixed;
  width: 100%;
  height: 200%;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.modal {
  display: inline-block;
  /* z-index: 10000 !important; */
  width: 768px;
  top: 10px;
  bottom: 25%;
  margin-top: 10px;
}
div#overlaySize { /* TODO */
  display:none;
}
#contentWrap .content {
  margin-bottom: 0;
}

/* default close button positioned on upper right corner */
.modal .close {
  position:absolute;
  z-index: 101;
  right: 5px;
  top: 10px;
  cursor: pointer;
  height: 45px;
  width: 45px;
  opacity: 1;
  transition: opacity .15s ease-in-out;
}
.modal .close:hover {
  opacity: 1;
  transition: opacity .15s ease-in-out;
}
.close img {
  min-height: 48px;
}


/**********************************/
/**  MODAL TITLE  **/
/**********************************/

div.modalTitle {
  top: 0;
  left: 0;
  right: 0;
  font-weight: bold;
  vertical-align: middle;
  position: relative;
  display: table;
  padding: 0;
  margin: 0px 0px 0px;
  border-collapse:separate;
  border-spacing:0px 0px;
  width: 100%;
  text-align: left;
}

div.modalBody {
  display: block;
  left: 0;
  right: 0;
  width: 100%;
  margin-bottom: 1px; /*  */
}

div.modalFoot {
  display: table;
  text-align: center;
  /* z-index: 10001; */
  border-collapse:separate;
  border-spacing:0px 0px;
  width: 100%;
  padding: 3px 0;
  margin: 0px 0px 0px;
}

div.modalBodyFoot {
  display: inline-block;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
}

.modalTitle > [class*="col-"],
.modalFoot > [class*="col-"] {
  display: table-cell;
  height: 100%;
  float: none;
  clear: both;
  vertical-align: middle;
}
.modalTitle h1 {
  width: 100%;
  font-size: 110%;
  text-align: left;
}
.modalTitle *[class*="col-"] {
  min-width: 52px;
}

/**********************************/
/**  MODAL MECHANICS  **/
/**********************************/

@media (min-width: 1125px) { /* +100px for closing cross */
  .modal {
    width: 760px;
  }
}
@media (max-width: 1124px) { /* +100px for closing cross */
  .modal .f-right-lg,
  .modal .f-left-lg {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .modal *[class*="col-lg"] {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 868px) { /* +100px for closing cross */
  .modal {
    width: 470px;
  }
  .modal .f-right-md,
  .modal .f-left-md {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .modal *[class*="col-md"] {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-right: .2rem;
    padding-left: .2rem;
  }
}

@media (max-width: 580px) { /* +100px for closing cross */
  .modal {
    width: auto;
    max-width: 470px;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;
  }
  .modal .close {
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    border-radius: 0;
    border: 0;
    text-align: right;
  }
  .modal .f-right-sm,
  .modal .f-left-sm {
    float: none;
    clear: both;
    display: inline-block !important;
  }
  .modal *[class*="col-sm"] {
    float: none;
    clear: both;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: .1rem;
    padding-left: .1rem;

  }
}


div.modalBody,
div.modalBodyFoot {
  overflow-y: auto;
}
@media (max-width: 580px) { /* +100px for closing cross */
  div.modalContent {
    overflow-y: auto;
  }
  div.modalBody,
  div.modalBodyFoot {
    overflow-y: visible;
  }
}


/**********************************/
/**  MODAL ACTIVATION  **/
/**********************************/

#mysbOverlay {
  opacity: 0;
  z-index: -20;
  -webkit-transition: opacity 0.2s,
              z-index 0s ease 0.2s;
  transition: opacity 0.2s,
              z-index 0s ease 0.2s;
}
#mysbOverlay.active {
  opacity: 1;
  z-index: 100;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}