/*************************************************************************
**
** Copyright (c) by jeff (jeff@lipsia.de)
**
** Author:  jeff
**
** File:    $Date: $
**
** Purpose: the dialog elements css
**
** Created: 2019/12/09
**
** Update:  $Date: $
**
** Notes:
**
************************************************************************/

*:focus
{
	outline: none;
}

.dialog_title
{
    color:              #030870;
    font-weight:        bold;
    font-size:          18px;
    position:           relative;
    float:              left;
    clear:              both;
    margin-bottom:      10px;
    margin-top:         -18px;
    background-color:   white;
    padding-left:       10px;
    padding-right:      10px;
}

.dialog_wrapper
{
	height:				auto;
}

.dialog_element_wrapper
{
	width:				auto;
	height:				auto;
	padding-bottom:		5px;
	float:				left;
	clear:				both;
}

.dialog_buttons
{
	position:           relative;
	float:              left;
	clear:              both;
	text-align:         center;
	width:              100%;
	font-size:          14px;
	font-weight:        bold;
	align-items:        center;
	justify-content:    center;
	display:            flex;
	margin-top:			20px;
	margin-bottom:		20px;
}

.missing_box
{
    border:              1px solid red !important;
}

input:-webkit-autofill
{
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}

input::placeholder
{
    color:              #808080;
    text-align:         center;
}

input[type=text]:focus, textarea:focus, select:focus, checkbox_marker:focus,
input[type=text]:hover, textarea:hover, select:hover, checkbox_marker:hover
{
    box-shadow:         0 0 5px rgba(81, 203, 238, 1);
}

input[readonly]
{
    border-color:       #aaa;
    box-shadow:         0 0 0 0 !important;
}

.label
{
	width:				160px;
	height:				30px;
	position:			relative;
	float:				left;
	clear:				both;
	font-size:			14px;
	font-weight:		bold;
	text-align:			left;
	color:				black;
	padding-left:		10px;
	padding-top:		5px; 
	box-sizing:			border-box;
    margin-left:        10px;
}

.label_empty
{
    width:              33px !important;
}

.input50 
{
	background:          white !important;
	height:              25px;
	width:               50px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.input75 
{
	background:          white !important;
	height:              25px;
	width:               75px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.input100 
{
	background:          white !important;
	height:              25px;
	width:               100px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.input150
{
	background:          white !important;
	height:              25px;
	width:               150px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.input200 
{
	background:          white !important;
	height:              25px;
	width:               200px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.input220 
{
	background:          white !important;
	height:              25px;
	width:               220px;
	float:				 left;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
}

.text500x250 
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              250px;
	width:               500px;
	float:				 left;
    word-wrap:           break-word;
    overflow-wrap:       break-word;
    white-space:         normal;
}

.text700x250 
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              250px;
	width:               700px;
	float:				 left;
    word-wrap:           break-word;
    overflow-wrap:       break-word;
    white-space:         normal;
}

/* select:required:invalid */
/*
select option[disabled]
{
    color:              #b0b0b0 !important;
    text-align:         center;
}
*/

select:required:invalid
{
    color:              #b0b0b0;
    text-align:         center;
}

option[value=""][disabled]
{
    display:            none;
}

option
{
    color:              #000;
}

.select50
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               50px;
	float:				 left;
}

.select75
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               75px;
	float:				 left;
}

.select100
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               100px;
	float:				 left;
}

.select140
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               140px;
	float:				 left;
}

.select150
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               150px;
	float:				 left;
}

.select160
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               160px;
	float:				 left;
}

.select200
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               200px;
	float:				 left;
}

.select220
{
	background:          white !important;
	border:              1px solid #030870;
	border-radius:		 5px;
	padding-left:        5px;
	font-size:           14px;
	font-weight:         normal;
	color:               black !important;
    font-family:         Candara, Calibri, Verdana, Arial, Helvetica;
	background-image:	 none !important;
	outline:			 none;
	height:              25px;
	width:               220px;
	float:				 left;
}

.dialog_image
{
	height:				 50px;
	width:				 150px;
}

.dialog_image_small
{
	height:				 30px;
	width:				 90px;
}

input:read-only
{
    border-color:        #7d7d7d;
    color:               #7d7d7d;
}

select:disabled
{
    border-color:        #7d7d7d;
    color:               #7d7d7d;
}

textarea:read-only
{
    border-color:        #7d7d7d;
    color:               #7d7d7d;
}

.checkbox_wrapper
{
    position:            relative;
    float:               left;
    display:             flex;
    width:               auto;
    height:              auto;
    margin-left:         20px;
}

.checkbox_container 
{
    display:             block;
    position:            relative;
    cursor:              pointer;
    font-size:           22px;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    width:               18px;
    height:              18px;
}

.checkbox_label
{
    display:             inline-block;
    padding-top:         2px;
    padding-left:        15px;
    font-size:           14px;
    font-weight:         bold;
    min-width:           150px;
    cursor:              pointer;
}

/* Hide the browser's default checkbox */
.checkbox_container input 
{
    position:            absolute;
    opacity:             0;
    top:                 0px;
    left:                0px;
}

/* Create a custom checkbox */
.checkbox_marker 
{
    position:            absolute;
    top:                 0;
    left:                0;
    height:              18px;
    width:               18px;
/*    background-color:    #eee; */
    border:              1px solid #030870;
    border-radius:       3px;
}

.checkbox_marker_disabled
{
    position:            absolute;
    top:                 0;
    left:                0;
    height:              18px;
    width:               18px;
/*    background-color:    #eee; */
    border:              1px solid #7d7d7d;
    border-radius:       3px;
    cursor:              default;
}

/* On mouse-over, add a grey background color */
.checkbox_container:hover input ~ .checkbox_marker 
{
    background-color:    #eee;
    box-shadow:          0 0 5px rgba(81, 203, 238, 1);
}

/* On mouse-over, add a grey background color */
.checkbox_container:focus input ~ .checkbox_marker 
{
    background-color:    #eee;
    box-shadow:          0 0 5px rgba(81, 203, 238, 1);
}

/* When the checkbox is checked, add a blue background */
.checkbox_container input:checked ~ .checkbox_marker 
{
    background-color:    #030870;
}

/* Create the checkbox_marker/indicator (hidden when not checked) */
.checkbox_marker:after 
{
    content:             "";
    position:            absolute;
    display:             none;
}

/* Show the checkbox_marker when checked */
.checkbox_container input:checked ~ .checkbox_marker:after 
{
    display:             block;
}

/* Style the checkbox_marker/indicator */
.checkbox_container .checkbox_marker:after 
{
    left:                5px;
    top:                 2px;
    width:               5px;
    height:              10px;
    border:              solid white;
    border-width:        0 3px 3px 0;
    -webkit-transform:   rotate(45deg);
    -ms-transform:       rotate(45deg);
    transform:           rotate(45deg);
}

.radio_button_wrapper
{
    position:            relative;
    float:               left;
    display:             flex;
    width:               auto;
    height:              auto;
    margin-left:         20px;
}

/* Customize the label (the container) */
.radio_button_container 
{
    display:             block;
    position:            relative;
    padding-left:        15px;
    cursor:              pointer;
    font-size:           22px;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    width:               23px;
    height:              23px;
}

.radio_button_label
{
    display:             inline-block;
    padding-top:         5px;
    font-size:           14px;
    font-weight:         bold;
    min-width:           150px;
    cursor:              pointer;
}

/* Hide the browser's default radio button */
.radio_button_container input 
{
    position:            absolute;
    opacity:             0;
    top:                 0px;
    left:                0px;
}

/* Create a custom radio button */
.radio_button_marker 
{
    position:            absolute;
    top:                 0;
    left:                0;
    height:              18px;
    width:               18px;
/*    background-color:    #eee; */
    border-radius:       50%;
    border:              1px solid #030870;
}

.radio_button_marker_disabled
{
    position:            absolute;
    top:                 0;
    left:                0;
    height:              18px;
    width:               18px;
/*    background-color:    #eee; */
    border-radius:       50%;
    border:              1px solid #7d7d7d;
    cursor:              default;
}

/* On mouse-over, add a grey background color */
.radio_button_container:hover input ~ .radio_button_marker 
{
    background-color:    #eee;
    box-shadow:          0 0 5px rgba(81, 203, 238, 1);
}

/* On mouse-over, add a grey background color */
.radio_button_container:focus input ~ .radio_button_marker 
{
    background-color:    #eee;
    box-shadow:          0 0 5px rgba(81, 203, 238, 1);
}

/* When the radio button is checked, add a blue background */
.radio_button_container input:checked ~ .radio_button_marker 
{
    background-color:    #030870;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_button_marker:after 
{
    content:             "";
    position:            absolute;
    display:             none;
}

/* Show the indicator (dot/circle) when checked */
.radio_button_container input:checked ~ .radio_button_marker:after 
{
    display:             block;
}

/* Style the indicator (dot/circle) */
.radio_button_container .radio_button_marker:after 
{
    top:                 9px;
    left:                9px;
    width:               8px;
    height:              8px;
    border-radius:       50%;
    background:          white;
}

input:focus, select:focus, textarea:focus, checkbox_container:focus, radio_button_container:focus
box-shadow: 0 0 5px rgba(81, 203, 238, 1);