/*
  Created: 15-10-2018
  Edited:  06-08-2019
  Version: 1.08 
*/

div#site div.modal 
{
 z-index: 1005;
 display: none;
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgb(0, 0, 0);
 background-color: rgba(0, 0, 0, 0.4);
}

div#site div.modal-container 
{
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: white;
 padding: 20px;
 border-radius: 3px;
 border: 1px solid rgba(0,0,0, 0.5);
}

.modal-header
{
 font-weight: 500;
 padding: 16px 16px 16px 24px;
}

.modal-title 
{
 display: inline-flex;
 align-items: center;
 font-size: 1.1rem;
 text-transform: uppercase;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

div#site div.modal .modal-header span.modal-close
{
 height: 30px;
 width: 30px;
 min-width: 30px;  
 background-color: transparent;
 border-radius: 50%;
 cursor: pointer;
 font-weight: bold;
 text-align: center;
}

div#site div.modal .modal-header > span.modal-close i 
{
 display: block;
 margin-top: 3px; 
 margin-left: -1px;
 font-style: normal;
 font-size: 1.1em;
}
 
div#site div.modal .modal-header > span.modal-close:hover
{
 background-color: rgba(0, 0, 0, 0.1);
 color: white;
}

/*.modal-icon
{
 color: rgb(19, 147, 0);
}*/

@media (max-width: 575px)
{
 .modal-xs-6
 {
  width: 25%;
  max-width: 25%;   
 }
     
 .modal-xs-7
 {
  width: 29.166666666666666666666666666667%;
  max-width: 29.166666666666666666666666666667%;   
 }
     
 .modal-xs-8
 {
  width: 33.333333333333333333333333333333%;
  max-width: 33.333333333333333333333333333333%;   
 }  
     
 .modal-xs-9
 {
  width: 37.5%;
  max-width: 37.5%;   
 }

 .modal-xs-10 
 {
  width: 41.666666666666666666666666666667%;
  max-width: 41.666666666666666666666666666667%;
 }

 .modal-xs-11 
 {
  width: 45.833333333333333333333333333333%;
  max-width: 45.833333333333333333333333333333%;
 }

 .modal-xs-12 
 {
  width: 50%;
  max-width: 50%;
 }

 .modal-xs-13 
 {
  width: 54.166666666666666666666666666667%;
  max-width: 54.166666666666666666666666666667%;
 }

 .modal-xs-14 
 {
  width: 58.333333333333333333333333333333%;
  max-width: 58.333333333333333333333333333333%;
 }

 .modal-xs-15 
 {
  width: 62.5%;
  max-width: 62.5%;
 }

 .modal-xs-16 
 {
  width: 66.666666666666666666666666666667%;
  max-width: 66.666666666666666666666666666667%;
 }

 .modal-xs-17 
 {
  width: 70.833333333333333333333333333333%;
  max-width: 70.833333333333333333333333333333%;
 }

 .modal-xs-18 
 {
  width: 75%;
  max-width: 75%;
 }

 .modal-xs-19 
 {
  width: 79.166666666666666666666666666667%;
  max-width: 79.166666666666666666666666666667%;
 }

 .modal-xs-20 
 {
  width: 83.333333333333333333333333333333%;
  max-width: 83.333333333333333333333333333333%;
 }
}

@media (min-width: 576px) and (max-width: 767px)
{
 .modal-sm-6
 {
  width: 25%;
  max-width: 25%;   
 }
     
 .modal-sm-7
 {
  width: 29.166666666666666666666666666667%;
  max-width: 29.166666666666666666666666666667%;   
 }
     
 .modal-sm-8
 {
  width: 33.333333333333333333333333333333%;
  max-width: 33.333333333333333333333333333333%;   
 }  
     
 .modal-sm-9
 {
  width: 37.5%;
  max-width: 37.5%;   
 }

 .modal-sm-10 
 {
  width: 41.666666666666666666666666666667%;
  max-width: 41.666666666666666666666666666667%;
 }

 .modal-sm-11 
 {
  width: 45.833333333333333333333333333333%;
  max-width: 45.833333333333333333333333333333%;
 }

 .modal-sm-12 
 {
  width: 50%;
  max-width: 50%;
 }

 .modal-sm-13 
 {
  width: 54.166666666666666666666666666667%;
  max-width: 54.166666666666666666666666666667%;
 }

 .modal-sm-14 
 {
  width: 58.333333333333333333333333333333%;
  max-width: 58.333333333333333333333333333333%;
 }

 .modal-sm-15 
 {
  width: 62.5%;
  max-width: 62.5%;
 }

 .modal-sm-16 
 {
  width: 66.666666666666666666666666666667%;
  max-width: 66.666666666666666666666666666667%;
 }

 .modal-sm-17 
 {
  width: 70.833333333333333333333333333333%;
  max-width: 70.833333333333333333333333333333%;
 }

 .modal-sm-18 
 {
  width: 75%;
  max-width: 75%;
 }

 .modal-sm-19 
 {
  width: 79.166666666666666666666666666667%;
  max-width: 79.166666666666666666666666666667%;
 }

 .modal-sm-20 
 {
  width: 83.333333333333333333333333333333%;
  max-width: 83.333333333333333333333333333333%;
 }
}

@media (min-width: 768px) and (max-width: 991px)
{
 .modal-md-6
 {
  width: 25%;
  max-width: 25%;   
 }
     
 .modal-md-7
 {
  width: 29.166666666666666666666666666667%;
  max-width: 29.166666666666666666666666666667%;   
 }
     
 .modal-md-8
 {
  width: 33.333333333333333333333333333333%;
  max-width: 33.333333333333333333333333333333%;   
 }  
     
 .modal-md-9
 {
  width: 37.5%;
  max-width: 37.5%;   
 }

 .modal-md-10 
 {
  width: 41.666666666666666666666666666667%;
  max-width: 41.666666666666666666666666666667%;
 }

 .modal-md-11 
 {
  width: 45.833333333333333333333333333333%;
  max-width: 45.833333333333333333333333333333%;
 }

 .modal-md-12 
 {
  width: 50%;
  max-width: 50%;
 }

 .modal-md-13 
 {
  width: 54.166666666666666666666666666667%;
  max-width: 54.166666666666666666666666666667%;
 }

 .modal-md-14 
 {
  width: 58.333333333333333333333333333333%;
  max-width: 58.333333333333333333333333333333%;
 }

 .modal-md-15 
 {
  width: 62.5%;
  max-width: 62.5%;
 }

 .modal-md-16 
 {
  width: 66.666666666666666666666666666667%;
  max-width: 66.666666666666666666666666666667%;
 }

 .modal-md-17 
 {
  width: 70.833333333333333333333333333333%;
  max-width: 70.833333333333333333333333333333%;
 }

 .modal-md-18 
 {
  width: 75%;
  max-width: 75%;
 }

 .modal-md-19 
 {
  width: 79.166666666666666666666666666667%;
  max-width: 79.166666666666666666666666666667%;
 }

 .modal-md-20 
 {
  width: 83.333333333333333333333333333333%;
  max-width: 83.333333333333333333333333333333%;
 }
}

@media (min-width: 992px) and (max-width: 1199px)
{
 .modal-lg-6
 {
  width: 25%;
  max-width: 25%;   
 }
     
 .modal-lg-7
 {
  width: 29.166666666666666666666666666667%;
  max-width: 29.166666666666666666666666666667%;   
 }
     
 .modal-lg-8
 {
  width: 33.333333333333333333333333333333%;
  max-width: 33.333333333333333333333333333333%;   
 }  
     
 .modal-lg-9
 {
  width: 37.5%;
  max-width: 37.5%;   
 }

 .modal-lg-10 
 {
  width: 41.666666666666666666666666666667%;
  max-width: 41.666666666666666666666666666667%;
 }

 .modal-lg-11 
 {
  width: 45.833333333333333333333333333333%;
  max-width: 45.833333333333333333333333333333%;
 }

 .modal-lg-12 
 {
  width: 50%;
  max-width: 50%;
 }

 .modal-lg-13 
 {
  width: 54.166666666666666666666666666667%;
  max-width: 54.166666666666666666666666666667%;
 }

 .modal-lg-14 
 {
  width: 58.333333333333333333333333333333%;
  max-width: 58.333333333333333333333333333333%;
 }

 .modal-lg-15 
 {
  width: 62.5%;
  max-width: 62.5%;
 }

 .modal-lg-16 
 {
  width: 66.666666666666666666666666666667%;
  max-width: 66.666666666666666666666666666667%;
 }

 .modal-lg-17 
 {
  width: 70.833333333333333333333333333333%;
  max-width: 70.833333333333333333333333333333%;
 }

 .modal-lg-18 
 {
  width: 75%;
  max-width: 75%;
 }

 .modal-lg-19 
 {
  width: 79.166666666666666666666666666667%;
  max-width: 79.166666666666666666666666666667%;
 }

 .modal-lg-20 
 {
  width: 83.333333333333333333333333333333%;
  max-width: 83.333333333333333333333333333333%;
 }
}

@media (min-width: 1200px)
{
 .modal-xl-4
 {
  width: 16.666666666666666666666666666667%;
  max-width: 16.666666666666666666666666666667%;   
 }
     
 .modal-xl-5
 {
  width: 20.833333333333333333333333333333%;
  max-width: 20.833333333333333333333333333333%;   
 }

 .modal-xl-6
 {
  width: 25%;
  max-width: 25%;   
 }
     
 .modal-xl-7
 {
  width: 29.166666666666666666666666666667%;
  max-width: 29.166666666666666666666666666667%;   
 }
     
 .modal-xl-8
 {
  width: 33.333333333333333333333333333333%;
  max-width: 33.333333333333333333333333333333%;   
 }  
     
 .modal-xl-9
 {
  width: 37.5%;
  max-width: 37.5%;   
 }

 .modal-xl-10 
 {
  width: 41.666666666666666666666666666667%;
  max-width: 41.666666666666666666666666666667%;
 }

 .modal-xl-11 
 {
  width: 45.833333333333333333333333333333%;
  max-width: 45.833333333333333333333333333333%;
 }

 .modal-xl-12 
 {
  width: 50%;
  max-width: 50%;
 }

 .modal-xl-13 
 {
  width: 54.166666666666666666666666666667%;
  max-width: 54.166666666666666666666666666667%;
 }

 .modal-xl-14 
 {
  width: 58.333333333333333333333333333333%;
  max-width: 58.333333333333333333333333333333%;
 }

 .modal-xl-15 
 {
  width: 62.5%;
  max-width: 62.5%;
 }

 .modal-xl-16 
 {
  width: 66.666666666666666666666666666667%;
  max-width: 66.666666666666666666666666666667%;
 }

 .modal-xl-17 
 {
  width: 70.833333333333333333333333333333%;
  max-width: 70.833333333333333333333333333333%;
 }

 .modal-xl-18 
 {
  width: 75%;
  max-width: 75%;
 }

 .modal-xl-19 
 {
  width: 79.166666666666666666666666666667%;
  max-width: 79.166666666666666666666666666667%;
 }

 .modal-xl-20 
 {
  width: 83.333333333333333333333333333333%;
  max-width: 83.333333333333333333333333333333%;
 }
}
