div.message_box
{
	text-align: left;
	background-color: white;
	width: 400px;
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	margin-bottom: 5px;

	background-repeat: no-repeat;
	background-position: 10px 50%;
	padding: 10px 10px 10px 40px;
}

div.error_message_box
{
	border-color: #e45b50;
	background-image: url(../images/message_error.gif);
}

div.warning_message_box
{
	border-color: #dd8235;
	background-image: url(../images/message_warning.gif);
}

div.success_message_box
{
	border-color: #47ad54;
	background-image: url(../images/message_success.gif);
}

div.info_message_box
{
	border-color: #4c9dc0;
	background-image: url(../images/message_info.gif);
}

div.confirm_message_box
{
	border-color: #0072a6;
	background-image: url(../images/message_confirm.gif);
}

.input_error_message_box
{
	background-color: #e45b50;
	border-style: solid;
	border-color: gray;
	border-width: 1px;
	padding: 1px 5px 1px 3px;
	width: 100%
}

div.section_header
{
	font-size:12px;
	font-family:Tahoma;
	font-weight:bold;
	background-color:#E6E7ED;
	color:#050509;
	border-bottom:1px solid #F7941D;
	width:100%;
	float:left;
	margin:5px 10px 5px 0px;
	padding:4px 0px 4px 0px;
	text-align:left;
}

div.form_header
{
	font-size:14px;
	float:none;
	border-bottom:2px solid #324B92;
	border-top:1px dotted #324B92;
	padding:6px 0px 6px 0px;
}

div.mailjob_confirmation
{
	max-width: 60em;
}

ul.message_box
{
	margin: 0;
	padding-left: 22px;
}

div.order_element_description
{
	font-size:0.85em;
	width:320px;
	margin: 6px 25px 0px 2px;
	color:#556655;
	line-height: 120%;
}

div.order_element_right_comment
{
	font-size:0.85em;
	width:320px;
	margin: 6px 25px 0px 2px;
	color:#556655;
	line-height: 120%;
	background-color:#EFEFEF;
	padding:3px;
	border:2px solid #d5d0c9;
}

div.order_element_validation_error
{
	 width:320px;
	 color:red;
	 margin: 0px 25px 6px 2px;
}

/* Nachbau des Firefox-Standard-Styles für Text-Inputs */
input[type=text], input[type=password], textarea, .StripeElement {
	background-color: #ffffff;
	border: 1px solid #b6b6b3;
	border-radius: 3px;
	padding: 6px;
}

input[type=text]:focus, input[type=password]:focus,  textarea:focus, .StripeElement--focus {
	border: 2px solid #4a90d9;
	padding: 5px;
}

/* Das Stripe-Element braucht noch etwas mehr Padding damit es wie ein Text-Input aussieht. */
.StripeElement {
	padding-top: 8px;
	padding-bottom: 7px;
}

.StripeElement--focus {
	padding-top: 7px;
	padding-bottom: 6px;
}

input.button
{
	font-family:Arial, Verdana;
	font-weight:bold;
	color:#0072a6;
	border:1px solid #0072a6;
	background-color:#efefef;
}

input.button:hover
{
	background-color:#e0e0e0;
}

input.button_send_success
{
	background-image:url(../images/button_send_success.gif);
	background-repeat:no-repeat;
}

input.button_send_success:hover
{
	background-image:url(../images/button_send_success_hover.gif);
}

input.button_send_warning
{
	background-image:url(../images/button_send_warning.gif);
	background-repeat:no-repeat;
}

input.button_send_warning:hover
{
	background-image:url(../images/button_send_warning_hover.gif);
}

input.button_send_error
{
	background-image:url(../images/button_send_error.gif);
	background-repeat:no-repeat;
}

input.button_send_error:hover
{
	background-image:url(../images/button_send_error_hover.gif);
}

button.standard
{
	font-family:Arial, Verdana;
	font-weight:bold;
	color:#0072a6;
	border:1px solid #0072a6;
	background-color:#efefef;
}

button.standard:hover
{
	background-color:#e0e0e0;
}

/* Veraltet seit 2018-06-14 */
.foaInfoBox
{
	width:70%;
	font-size:13px;
	text-align:justify;
	background-color:#F6F8FF;
	border:1px solid #7070d0;
	padding-top:18px;
	padding-left:18px;
	padding-right:18px;
	padding-bottom:18px;
}

pre.condition_box
{
	margin-top:0px;
	margin-bottom:5px;
	background-color:#E6E7ED;
	white-space:pre-wrap;
}

/* Source: https://www.w3schools.com/howto/howto_css_modals.asp */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default, show with display: flex */
	align-items: center; /* Requires display: flex */
	justify-content: center; /* Requires display: flex */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
}

/* Source https://tobiasahlin.com/spinkit/ */
.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 50%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}