:root
{
    --l_font: 18px;   
    --normal_font: 14px;   
    --small_font: 12px;    
    --xxl_space: 24px;  
    --xl_space: 12px;  
    --l_space: 6px;  
    --m_space: 4px;
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* 
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body
{      
    font-size: var(--normal_font);
    font-family: var(--font);
}
p
{
    margin-top: var(--m_space);
    margin-bottom: var(--m_space);
}
a
{
    text-decoration: none;
    color: #0074BC;                
}
iframe
{
    border: 0;
}
/* classes */
.button
{
    display: inline-block;
    background-color: #0074BC;
    color: #fff;
    padding: var(--l_space) var(--xxl_space) var(--l_space) var(--xxl_space);
    text-align: center;
}
.dialog_container
{
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
    display: none;
    align-items: center;
    justify-content: center;
}
.dialog_outer
{
    width: 75vw;
    min-height: 75vh;
    border-radius: var(--m_space);
    background-color: #F4F4F4;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.dialog_inner
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: auto;
}
.dialog_title
{
    font-weight: bold;
    text-transform: uppercase;
    font-size: var(--l_font);
    padding: var(--xl_space);
}
.dialog_contents_container
{
    flex: 1;
    display: flex;
    flex-direction: row;
}
.dialog_contents
{        
    flex: 5;
    padding: var(--xl_space);
}
.dialog_right_bar
{    
    padding: var(--xl_space);
    /*width: 25%;*/
    flex: 2;
    display: flex;
    flex-direction: column;
}
.dialog_bottom_bar
{
    display: flex;
    justify-content: end;
    background-color: #E7E7E7;
    padding: var(--xl_space);
    align-items: center;
    border-radius: 0 0 var(--m_space) var(--m_space);
    width: 100%;
}
.dialog_bottom_bar > *
{
    margin-right: var(--xxl_space);
}
.sub_title
{
    font-weight: bold;
}
.small_font
{
    font-size: var(--small_font);
}
.hint
{
    color: black;
    font-size: var(--small_font);
}
.dialog > :nth-child(2) > *
{
    margin-right: var(--xxl_space);
}
input[type=text], input[type=number], input[type='password'], input[type='file'], select
{
    font-size: var(--normal_font);
    font-family: var(--font);
    background-color: #fff;
    color: black;
    padding: var(--l_space);
    border: 1px solid #D3D3D3;
}
input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}
input[type=number]::-webkit-outer-spin-button {
    color: #fff;
    background-color: #0074BC;
}