/*-------------------------------*/
/* Farben : Roland Mills United  */
/*-------------------------------*/
/* #e30613  : ROT                */
/* #7c7c7b  : GRAU               */
/*-------------------------------*/
/* #000060  : DARK BLUE          */
/*-------------------------------*/

body
{
  margin:                0em;
  padding:               0em;
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-user-select:   none; /* prevent copy paste, to allow, change 'none' to 'text' */
  background:            linear-gradient(to top, rgb(32,55,100), rgb(91,155,213) 80%);
  /*background:            linear-gradient(to top, rgb(0,51,153), rgb(91,155,213) 80%);*/
  min-height:            100vh;
  display:               flex;
  flex-direction:        column;
}

*
{
  box-sizing:  border-box;
  font-family: Calibri, Arial, sans-serif;
}

/*--------*/
/* button */
/*--------*/

button
{
  padding-left:     1em;
  padding-right:    1em;
  padding-top:      0.2em;
  padding-bottom:   0.2em;
  margin:           0.1em;
  color:            white;
  cursor:           pointer;
  background-color:           dodgerblue;
  border:           1px solid dodgerblue;
  border-radius:    1em;
}

button:disabled
{
  opacity:          0.7;
  background-color: gray;
  border: 1px solid gray;
}

button:disabled:hover
{
  opacity:          0.7;
  background-color: gray;
  border: 1px solid gray;
}

button:hover
{
  background-color: royalblue;
  border: solid 1px royalblue;
}

button:active
{
  background-color: dodgerblue;
  border: 1px solid dodgerblue;
}

.cl_button_container_center
{
  background-color: white;
  display:          flex;
  flex-direction:   row;
  flex-wrap:        wrap;  
  align-items:      stretch;
  justify-content:  center;
  align-content:    center;
  gap:              1em;
  overflow:         hidden;
}

.cl_button_container_padding
{
  padding-top:    1em;
  padding-bottom: 1em;
}

.cl_button_x_close
{
  background-color: transparent;
  color:            silver;
  font-size:        1.2em;
  font-weight:      bold;
  padding:          0px;
  margin:           0px;
  border:           0px solid gray;
  display:          block;
  text-align:       right;
  width:            100%;
  line-height:      1em;
}

.cl_button_x_close:hover
{
  background-color: transparent;
  color:            black;
  text-decoration:  none;
  cursor:           pointer;
  border:           0px solid gray;
}

/*-------*/
/* input */
/*-------*/

input,
select
{
  padding-left:     1em;
  padding-right:    1em;
  padding-top:      0.2em;
  padding-bottom:   0.2em;
  margin:           0.1em;
  background-color: white;
  border:           1px solid dodgerblue;
  width:            100%;
  border-radius:    0.5em;
}

input:focus,
select:focus
{
  outline:      none;
  border-color: dodgerblue;
  box-shadow:   0px 0px 10px rgba(0, 123, 255, 0.8);
}

input:disabled
{
  border: 1px solid white;
  color:  black;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Firefox */
input[type=number],
input[type=number] {
  -moz-appearance: textfield;
}

/*-------*/
/* label */
/*-------*/

label
{
  padding-left:     0em;
  padding-right:    0em;
  padding-top:      0.2em;
  padding-bottom:   0.2em;
  margin:           0.2em;
  background-color: white;
  border:           0px solid dodgerblue;
  width:            100%;
}

/*------*/
/* text */
/*------*/

.cl_text_title
{
  font-size:   1.0em;
  font-weight: normal;
}

.cl_text_normal
{
  font-size:   1.0em;
  font-weight: normal;
}

.cl_text_bold
{
  font-size:   1.0em;
  font-weight: bold;
}

.cl_text_input
{
  font-size:   1.0em;
  font-weight: normal;
}

.cl_text_button
{
  font-size:   1.0em;
  font-weight: normal;
}

.cl_text
{
  background-color: transparent;
  margin:           0px;
  padding:          10px;
  border:           0px;
}

.cl_text_center
{
  text-align: center;
}

.cl_text_container_center
{
  background-color: yellow;
  width:            100%;
  height:           100%;
  display:          flex;
  flex-direction:   row;
  margin-left:      auto;
  margin-right:     auto;
  align-items:      center;
  justify-content:  center;
  gap:              1em;
}

/*------*/
/* line */
/*------*/

.cl_deviding_line
{
  width:         100%;
  margin-left:   0;
  margin-right:  0;
  margin-top:    0.3em;
  margin-bottom: 0.3em;
  border-left:   0px solid #d5d5d5;
  border-right:  0px solid #d5d5d5;
  border-top:    0px solid #d5d5d5;
  border-bottom: 1px solid #d5d5d5;
}

.cl_margin_top_line
{
  background-color: transparent;
  width:            100%;
  border:           0px solid #d5d5d5;
  margin-left:   0;
  margin-right:  0;
  margin-top:    2.5em;
  margin-bottom: 2em;
}

.cl_margin_bottom_line
{
  background-color: transparent;
  width:            100%;
  border:           0px solid #d5d5d5;
  margin-left:   0;
  margin-right:  0;
  margin-top:    4em;
  margin-bottom: 4em;
}

.cl_margin_line
{
  background-color: transparent;
  width:            100%;
  border:           0px solid #d5d5d5;
  margin-left:   0;
  margin-right:  0;
  margin-top:    1em;
  margin-bottom: 1em;
}

/*--------------*/
/* Modal Window */
/*--------------*/

.cl_modal_window,
.cl_modal_window_bestellung,
.cl_modal_window_lieferschein
{
  z-index:          8;
  display:          none;
  position:         fixed;
  left:             0px;
  top:              0em;
  width:            100%;
  height:           100%;
  background-color: rgba(0,0,0,0.4);
  overflow:         auto;
}
  
.cl_modal_window_bestellung,
.cl_modal_window_lieferschein
{
  z-index: 4;
}
  
.cl_modal_window_content
{
  background-color: transparent;
  border:           0px solid #d5d5d5;
  margin-left:      0.5em;
  margin-right:     0.5em;
  margin-top:       4em;
}

.cl_modal_window_wrapper
{
  display:          block;
  background-color: white;
  width:            100%;
  overflow:         hidden;
  margin:           0px;
  padding:          0px;
}

.cl_modal_window_container_hinweis,
.cl_modal_window_container_eingaben_loeschen,
.cl_modal_window_container_bestellung,
.cl_modal_window_container_lieferschein
{
  border-radius:    0.5em 0.5em 0.5em 0.5em;
  border:           1px solid #d5d5d5;
  background-color: white;
  padding:          10px;
  overflow:         hidden;
  margin-top:       2em;
  font-size:        1.0em;
  margin-left:      auto;
  margin-right:     auto;
}

/*----------*/
/* CheckBox */
/*----------*/
  
.cl_delivery_conditions
{
  display:               grid;
  gap:                   1em;
  grid-template-columns: 2em auto;
  margin-left:           2em;
  margin-right:          2em;
  margin-top:            1em;
  margin-bottom:         1em;
  background-color:      white;
}

.cl_delivery_conditions_1
{
  display:          flex;
  justify-content:  right;
  align-items:      flex-start;
  padding-top:      0.5em;
  padding-right:    0em;
  border:           0px solid red;


}

.cl_delivery_conditions_2
{
  display:         flex;
  justify-content: left;
  align-items:     flex-start;
  border:          0px solid blue;
}

.cl_delivery_conditions label
{
  cursor:    pointer;
}

.cl_delivery_conditions input[type="checkbox"]
{
  cursor: pointer;
}