:root
{        
 --dialog-header-height: 40px; 
 --dialog-header-title-height: 1.2em;    
 --header-height: 0px;
 --dialog-header-icon-width: 0px;
 --dialog-header-icon-height: 0px;    
}

.modal-background
{
 position: fixed;
 z-index: 1005;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 overflow: auto;
 display: none;
 background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog
{
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: rgb(40,40,40);
}

.dialog-column
{
 display: flex; 
 flex-direction: column; 
 padding: 20px;
 border-radius: 20px;    
}

.dialog-column-90
{
 display: flex; 
 flex-direction: column; 
 max-height: 90%;  
 padding: 20px;
 border-radius: 20px;    
}

.dialog-column-80
{
 display: flex; 
 flex-direction: column; 
 max-height: 80%;
 padding: 20px;
 border-radius: 20px;     
}

.dialog-column-50
{
 display: flex; 
 flex-direction: column; 
 max-height: 50%;
 padding: 20px;
 border-radius: 20px;     
}

.dialog-header
{
 display: flex;
 flex-direction: row;
 align-items: center;    
 color: white;
 height: var(--dialog-header-height);
 line-height: var(--dialog-header-height);    
}

.dialog-icon,
.dialog-header-icon
{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: center;
 align-items: center;
 width: var(--dialog-header-height);
 height: var(--dialog-header-height);
 line-height: var(--dialog-header-height); 
 font-size: 1.2em;
 color: var(--primary-colour-500);    
}

.dialog-header-image
{
 width: auto;
 height: var(--dialog-header-height);    
}

.dialog-title,
.dialog-header-title
{
 flex-grow: 1;
 flex-shrink: 1;
 text-transform: uppercase;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis; 
 font-size: var( --dialog-header-title-height);    
}

.dialog-close,
.dialog-header-close
{
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: center;
 align-items: center;
 width: var(--dialog-header-height);
 height: var(--dialog-header-height);
 line-height: var(--dialog-header-height);    
 cursor: pointer;
}

.dialog-close:hover,
.dialog-header-close:hover
{ 
 background-color: rgba(128,128,128, 0.125);
 border-radius: 50%;    
 color: white;
}
     
.dialog-close i,
.dialog-header-close i
{
 font-weight: bold;
 font-style: normal;
 font-size: 1.5em;
}
     
.dialog-content
{
 overflow-y: auto;
 padding: 1px;
 color: white;    
}


/*
  Created: 2019-10-21
  Edited:  2021-02-16
*/

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.modal-container 
{
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: white;
 padding: 20px;
}

.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.modal .modal-header span.modal-close
{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 30px;
 width: 30px;
 min-width: 30px;  
 background-color: transparent;
 border-radius: 50%;
 cursor: pointer;
 font-weight: bold;
 text-align: center;
}

div.modal .modal-header > span.modal-close i 
{
 margin-top: -3px;
 font-style: normal;
 font-size: 1.1em;
}
 
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);
}

#loadingmodal 
{
 z-index: 1010;
}

div.modal .helpicon 
{
 display: flex;
 align-items: center;
 justify-content: center;
 height: 30px;
 width: 30px;
 min-width: 30px;
 border-radius: 50%;
 background-color: transparent;
 color: rgb(0,130,199);
 cursor: pointer;
 font-weight: bold;
}

div.modal .helpicon:hover
{
 background-color: rgb(0,130,199);
 color: rgb(255,255,255);
}