/* Dialog css styles
    <div class="dialogContent" id="xxx">
        <div class="dialog_row dialog_row_header">
            <?=$speak['TITEL'];?>
        </div>
        <div class="dialog_row dialog_row_subTitel">
            <?=$speak['SUBTITEL'];?>
        </div>
        <div class="dialog_row">
            <i class="dialog_row_i_tag_at_the_beginning COLOR_MAIN fa-regular fa-file-lines"></i>
            <input class="dialog_input">
            <select class="dialog_select">
                <option value="0"><?=$speak['???'];?></option>
            </select>
        </div>
        <div class="dialog_row">
            <div class="dialog_group">
                
            </div>  
        </div>
        <div class="dialog_row_buttons">
            <div class="dialog_row_buttons_fill">
                <i class="taskBlockDetailsBigButtons fontawesome200 COLOR_MAIN fa-solid fa-ban fontAwesomeHoverable" onclick="closeVacationSetting()"></i>
                <i class="taskBlockDetailsBigButtons fontawesome200 COLOR_MAIN fa-solid fa-floppy-disk fontAwesomeHoverable" onclick="saveVacationSetting()"></i>
            </div>
        </div>
    </div>
*/
/* inside this div all content has to be.*/
.dialogContent, .dialogElement
{
  margin: 10px;
  display: flex;
  flex-direction: column;
} 
/* per default each row of elements has to be in side this container */
.dialog_row {
  flex-direction: row;
  display: flex;
  margin-top: 2px;
}

/* per right side of elements can be flexible arranged */
.dialog_row_right_flex
{
    max-width: 500px;
    flex: auto;
    flex-wrap: wrap;
    flex-direction: row;
    display: flex; 
}

/*  the first dialog_row should be a dialog_row_header with a $speak["TITEL"] */
.dialog_row_header
{
    font-size: 120%;
    font-weight: bold;
}

/* Sometime a subtitel makes sence, but them in a seperate dialog_row */
.dialog_row_subTitel
{
    font-size: 100%;
    font-weight: bold;
}

/* The last row should not be dialog_row, insead use this dialog_row_buttons, this css filles the space. */
.dialog_row_buttons 
{
    flex-direction: column;
    display: flex;
    margin-top: auto;
}

/* this class has to be added to the container inside dialog_row_buttons container, add here all buttons from fontawesome */
.dialog_row_buttons_fill
{
    flex-direction: row-reverse;
    display: flex;
    margin-top: auto;
}
/* icons at the beginning of a line has this style, 
 - use this also if you will not use any icon for one line and all others have one 
 - use this if icon has function (fasHoverable)*/
.dialog_row_i_tag_at_the_beginning 
{
    min-width: 25px;
    max-width: 25px;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

/* icons (i-tags) without any function are just singleSymbol */
.singleSymbol
{
    min-width: 25px;
    max-width: 25px;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    margin: 5px;
}

/* inside dialog_row there can be multi groups, each group have to contain an icon and an input/other type of element */
.dialog_group
{
    background: var(--COLOR_MAIN10);
    margin-right: 5px;
    border-radius: 5px;
    display: flex;    
    margin-top: 3px;
}

/* styles for specfic inptu elements and there states 
warn: missing data or highlight for neccessary action
selected: highlight for selected state
*/

/* select input field */
.dialogContent select, select.dialogContent
{
    font-size: inherit;
    background: transparent; 
    border-style: solid; 
    border-width: 1; 
    border-color: var(--COLOR_BUTTON);
}

.dialogContent select.select_warn
{  
    border-color: var(--COLOR_WARN);
}


/* default input field */
.dialogContent input
{
    background: white;
    border-style: solid; 
    border-width: 1; 
    border-color: var(--COLOR_BUTTON);
}

.dialogContent input.input_warn
{  
    border-color: var(--COLOR_WARN);
}

/* default textarea*/
.dialogContent textarea
{
    resize: vertical;
    max-height: 200px;
    border-color: var(--COLOR_BUTTON);
}

/* textarea warn state*/
.dialogContent textarea.textarea_warn
{
    box-shadow: inset -1px -1px 3px 0px;
    border-style: groove;
    border-color: var(--COLOR_WARN);
}

/* maintenance message */
#maintenance_info_box
{
    width: 40%;
    margin: auto;
    border-width: 1px;
    border-style: solid;
    border-color: var(--COLOR_MAIN);
    box-shadow: var(--COLOR_MAIN40) 0px 5px 15px;
    border-radius: 5px;
}

#maintenance_info_box_title {
    background-color: var(--COLOR_MAIN);
    color: var(--COLOR_WHITE);
    padding: 10px;
    font-size: larger;
    font-weight: bold;
}

#maintenance_info_box_message
{
    color:var(--COLOR_MAIN);
    padding: 10px;
}