﻿/** ===================================== **/
/** http://codepen.io/dimbslmh/full/mKfCc **/
.modal-vertical-centered {
  text-align: center;
  padding: 0!important;
}

.modal-vertical-centered:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-vertical-centered > .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
/** ===================================== **/

.modal-body {
  /*max-height: 200px;*/
  overflow: hidden;
  overflow-y: auto;
}

.modal-footer 
{
  background: #ececec;
}

.modal-footer > .modal-footer-options 
{
  float:left;
}

.modal-footer > .modal-footer-buttons 
{
  float: right;
}

.model-footer-option-label
{
  padding-right:10px;
  font-size:14px;
}


.dialog-toolbar {
  background: #ececec !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

.smart-style-glass .dialog-toolbar {
    background: rgba(0, 0, 0, 0.5)!important;
    border-bottom-color: rgba(0, 0, 0, 0.3)!important;
}

/*==================================================================================*/
/* FULL SCREEN */
/*http://codepen.io/yewnork/pen/Kpaqeq*/
.modal-fullscreen
{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog-fullscreen 
{
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content-fullscreen 
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  box-shadow: none;
}

.modal-header-fullscreen {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 50px;
  padding: 10px;
  background: #6598d9;
  border: 0;
}

.modal-body-fullscreen {
  position: absolute;
  top: 50px;
  bottom: 60px;
  right:0px;
  left:0px;
  max-height:none!important;
  font-weight: 300;
  overflow: auto;
  padding:0px!important;
  overflow-x:hidden;
}

.modal-footer-fullscreen {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 60px;
  padding: 10px;
  background: #f1f3f5;
}
/*==================================================================================*/

/*==================================================================================*/
/* FIXED SIZE */
.modal-dialog-640x480 
{
  width: 642px;
  margin-top:40px;
}

.modal-body-640x480 {
  width: 640px;

  /*height: 534px;*/ /*we add 50+4 for the menu bar and borders*/
}
/*==================================================================================*/

/*==================================================================================*/
/* FIXED SIZE */
.modal-dialog-800x640 
{
  width: 802px;
  margin-top:40px;
}

.modal-body-800x640 
{
  width: 800px;
  /*height: 694px;*/  /*we add 50+4 for the menu bar and borders*/
}
/*==================================================================================*/

/* https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width */
@media (max-width: 480px) {

}

@media (max-width: 767px) {

}

@media (min-width: 768px) {
  .modal-dialog-extralarge { width: 720px; margin:40px auto; }
  .modal-dialog-large { width: 720px; margin:40px auto; }
  .modal-dialog-medium { width: 600px; margin:40px auto; }
  .modal-dialog-small { width: 480px; margin:40px auto; }
}

@media (min-width: 992px) {
  .modal-dialog-extralarge { width: 920px;margin:40px auto; }
  .modal-dialog-large { width: 920px; margin:40px auto; }
  .modal-dialog-medium { width: 600px; margin:40px auto; }
  .modal-dialog-small { width: 480px; margin:40px auto; }
}

@media (min-width: 1200px) {
  .modal-dialog-extralarge { width: 1100px; margin:40px auto; }
  .modal-dialog-large { width: 960px; margin:40px auto; }
  .modal-dialog-medium { width: 600px; margin:40px auto; }
  .modal-dialog-small { width: 480px; margin:40px auto; }
}

/* Large Devices, Wide Screens */
@media (min-width : 1600px) {
  .modal-dialog-extralarge { width: 1400px; margin:40px auto; }
  .modal-dialog-large { width: 960px; margin:40px auto; }
  .modal-dialog-medium { width: 600px; margin:40px auto; }
  .modal-dialog-small { width: 480px; margin:40px auto; }
}





/* FANCY CHECKBOXES */
.form-group-checkbox-button input[type="checkbox"] {
  display: none;
}

.form-group-checkbox-button input[type="checkbox"] + .btn-group > label span {
  width: 20px;
}

.form-group-checkbox-button input[type="checkbox"] + .btn-group > label span:first-child {
  display: none;
}

.form-group-checkbox-button input[type="checkbox"] + .btn-group > label span:last-child {
  display: inline-block;
}

.form-group-checkbox-button input[type="checkbox"]:checked + .btn-group > label span:first-child {
  display: inline-block;
}

.form-group-checkbox-button input[type="checkbox"]:checked + .btn-group > label span:last-child {
  display: none;
}


