@charset "UTF-8"; 

/*
darkgrey: #333333 51, 51, 51
medgrey: #666666 102, 102, 102 
lightgrey #CCCCCC 204, 204, 204
*/

/*=== start important -- used by default_nav.js used to fix modal scroll bug*/


.modal-backdrop {
  /*z-index:19999;*/

/*
border: solid 10px rgba(0, 0, 255, 1.0);
*/


}

.modal {


 overflow-x: hidden;
 overflow-y: scroll;

 z-index:10000;

}


/*=== end important -- used by default_nav.js used to fix modal scroll bug*/

/*========== Start Set Font CSS  ==========*/

/*========== End Set Font CSS  ==========*/

/*==========Start Modal ==========*/

/*===== start css based on media query*/
@media (min-width: 1200px) {
  .modal-dialogue-cq  {
    width:60%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .modal-dialogue-cq  {
    width:80%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .modal-dialogue-cq  {
    width:90%;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .modal-dialogue-cq  {
    width:90%;
  }
}

@media (max-width: 480px) {
  .modal-dialogue-cq  {
    width:90%;
  }
}
/*===== end css based on media query*/

.modal-container {

/*poop v centers modal -- done with jquery bassed on viewport*/
/*
  position: relative;
  top: 50%;
  transform: translateY(-50%);
*/


  /*border:1px solid #0000FF;*/
  display:inline-block !important;
  text-align:center !important;
  width:100%;

  /*height:auto !important;*/
}

.modal-dialog { 

  height:auto !important;

/*
  background-color: rgba(255, 255, 255, 0.3);
*/

  background-color:transparent;

  margin: auto; /*causes issue if set--setting works with 100% width*/
  padding: 0px 0px 0px 0px;
  /*padding:10px 10px 10px 10px;*/

/*
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5px; 
  -khtml-border-radius: 5px; 
*/


  /*text-shadow: black 0.1em 0.1em 0.2em;*/
  box-shadow: 2px 3px 5px #000000, 0px 1px 1px #333;
}

.modal-inner-dialog { 
 
  height:auto !important;
   
/*-moz-border-radius: 5p;
  -webkit-border-radius: 5px;
   border-radius: 5px; 
  -khtml-border-radius: 5px; 
*/


}

.modal-content {

  /*border: solid 1px #0000FF !important;*/

  /*min-height:100%;*/ /*this has to be set min-height to avoid height stretch issue*/

  /*box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;*/
  /*box-shadow: 2px 2px 0 #828181 inset;*/
  /*border-bottom:1px solid #FF0000;*/

   background-color: rgba(255, 255, 255, 0.7);

  -webkit-backdrop-filter: blur(3px)!important;
   backdrop-filter: blur(3px)!important;

/*

   backdrop-filter: blur(0.3);

  filter: blur(8px)!important;
  -webkit-filter: blur(8px)!important;
*/


   -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important; 

}


.modal-header {


 /*border:1px solid #00FF00;*/

 height:auto;
 /*
  color:#333333;
*/
  border-bottom:0px solid rgba(51, 51, 51, 0.9);
  /*
  background-color: rgba(138, 37, 40, 1.0);
  padding:5px 5px 5px 5px;
  
  
  background-color: rgba(255, 255, 230, 0.9);
  
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
*/

background-color: transparent;

}

.modal-title {


   /*border:1px solid #FFFF00;*/

  font-size:28px; 

  color:rgba(102, 102, 102, 1.0) !important;
  text-shadow:-0.2px -0.2px 0 rgba(0, 0, 0, 1.0), 0.2px -0.2px 0 rgba(0, 0, 0, 1.0), -0.2px 0.2px 0 rgba(0, 0, 0, 1.0), 0.2px 0.2px 0 rgba(0, 0, 0, 1.0) !important;


}

h1,
h2,
p {
  margin: 0;
  padding: 0; /* Although I'm fairly certain it's only the margin causing the problem. */
}

.modal-body {


  height:100%;
  margin: 0px 0px 0px 0px !important;


  display:inline-block;
  /*text-align:center;*/
  min-height:200px;
  width:100%;

/*
  background-color: rgba(0, 0, 0, 0.2);
*/

  background-color:transparent;


  /*border:0px solid #FF0000;*/
  /*border-top:1px solid #FFFFFF;*/
  /*border-bottom:1px solid #FFFFFF;*/

  border-bottom:0px solid rgba(51, 51, 51, 0.9);
  border-top:0px solid rgba(51, 51, 51, 0.9);


}

.modal-footer {


  display:inline-block;

  height: 50px;

  margin: 0px 0px 0px 0px !important;

  padding: 5px 5px 5px 5px;


  position:static;

/*
  position:absolute !important;
  top: 0px !important;
  bottom: 0px !important;
*/



  width: 100%;


  border-top:0px solid rgba(51, 51, 51, 0.9);
}



/*==========End Modal ==========*/

.modal-x {
 font-size:40px;
  color:#002868;
  opacity:0.8;
}


.modal-x:hover {
  /*color:rgba(0, 40, 104, 0.5);*/
  /*color:rgba(0, 14, 36, 0.5) !important;*/
  color:#002868;
  opacity:1.0;
}


/*
.modal-button {
background-color: rgba(138, 37, 40, 0.5);
color:#FFFFE6;
}


.modal-button: hover {
background-color: rgba(138, 37, 40, 1.0)!important;
color:#FFFFE6!important;
}
*/

/*override bootstrap button*/
.modal-footer .btn-secondary {
  background-color: rgba(102, 102, 102, 0.7);
  color:#FFFFFF;
  border-color: #CCCCCC;
}

.modal-footer .btn-secondary:hover, .btn-secondary:focus,  .btn-secondary:active,  .btn-secondary.active, .open>.dropdown-toggle.btn-secondary {
  background-color: rgba(102, 102, 102, 1.0);
  color:#FFFFFF;
  border-color: #CCCCCC;
}