body {
    margin: 0;
    /* font-family: 'Trebuchet MS', 'Arial', sans-serif; */
    font-family: 'Arial', sans-serif;
    /* font-family: 'Helvetica Neue', serif; */
}

/* .main {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    min-height: 100vh;
   
} */
/* .frame {
    box-sizing: border-box;
    width: 400px;
    min-width: 300px;
    max-width: 400px;
    background-color: white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    text-align: center;
} */





table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    /* width: 100%; */
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

th {
    background-color: #ddddddb4;
}

tr:nth-child(even) {
    background-color: #dddddd5c;
}






.overflowHidden {
    overflow: hidden;
}

.scrollY {
    overflow-y: scroll;
}

.border {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.minHeight {
    min-height: 60px;
}

.borderRadius {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
}

.error {
    color: white;
    background-color: red;
    border-radius: 0px 0px 20px 20px;
    padding: 5px;
    overflow: hidden;
    text-align: center;
    display: none;
}

.error2 {
    color: white;
    background-color: red;
}



.input {
    width: 100%;
    justify-content: center;
}

.button {
    /* width: calc(100% - 20px); */
    width: 100%;
    /* text-align: center; */
    font-weight: bold;
    text-transform: uppercase;
    /* margin: 10px; */
}


/* .space_before{
    margin-left: 15px;
} */

.spacer {
    height: 20px;
}


.hidden {
    display: none;
}

.greenBox {
    background-color: rgb(0, 255, 0);
    border-radius: 10px;
    padding: 10px;
}

.redBox {
    color: white;
    background-color: rgb(255, 0, 0);
    border-radius: 10px;
    padding: 10px;
}






.field-holder {
    position: relative;
    margin-top: 20px;
}

.input_label_move {
    position: absolute;
    top: 0px;
    left: 15px;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);
    cursor: text;
    transition: 0.2s;
    height: 100%;
    pointer-events: none;
}

.input:focus+label,
.input:valid+label {
    font-size: .75em;
    top: -10px;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    color: rgba(0, 0, 0, 1);
    background-color: rgb(255, 255, 255);
    pointer-events: none;
}

.input_label_fixed {
    position: absolute;
    display: flex;
    align-items: center;
    cursor: text;
    height: 100%;
    font-size: .75em;
    top: -10px;
    left: 15px;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    color: rgba(0, 0, 0, 1);
    background-color: rgb(255, 255, 255);
    pointer-events: none;
}



/* padding: 10px; */
/* padding: 10px 20px; */
/* background-color: #3498db; */
/* color: white; */
.arrowDownAfter {
    display: inline-block;
    padding-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    padding-right: 30px;
}

/* Stil für den Pfeil */
.arrowDownAfter::after {
    content: '';
    font-size: 1.2em;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}






.image {
    max-width: 100%;
    height: auto
}

.flex {
    display: flex;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flexColumn {
    display: flex;
    flex-direction: column;
}



.center_absolut-horizontal {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.center_absolut-vertical {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.center_absolut {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.posAbsolut {
    position: absolute;
}


.center {
    justify-content: center;
    align-items: center;
}

.center1 {
    justify-content: center;
}

.center2 {
    align-items: center;
}

.textCenter1 {
    text-align: center;
}

.textCenter2 {
    text-justify: center;
}



.margin8px {
    margin: 8px;
}

.margin16px {
    margin: 16px;
}



.padding5px {
    padding: 5px;
}

.padding8px {
    padding: 8px;
}

.padding16px {
    padding: 16px;
}



.bold {
    font-weight: bold;
}

.lightGray {
    background-color: lightgray;
}

.flex1 {
    flex: 1;
}

.fillHeight {
    height: 100vh;
}

.box-shadow {
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.space-between1 {
    justify-content: space-between;
}

.space-between2 {
    align-items: space-between;
}

.posRelative {
    position: relative;
}

.posAbsolut {
    position: absolute;
}

.flex-end1 {
    justify-content: flex-end;
}

.flex-end2 {
    align-items: flex-end;
}

.displayInline {
    display: inline;
}

.height100 {
    height: 100%;
}

.width50 {
    width: 50%;
}

.width100 {
    width: 100%;
}



.height100vh {
    height: 100vh;
}

.width100vw {
    width: 100vw;
}


.icon {
    cursor: pointer;
    width: 20px;
    height: auto;
    margin-left: 15px;
    margin-right: 15px;
}




/* Computer */
@media (min-width: 900px) {
    .flex_ls {
        display: flex;
    }
}

/* Handy */
@media (max-width: 900px) {
    .flex_ss {
        display: flex;
    }
}




/* textarea {
      width: 100%;
  } */

.pre-wrap {
    white-space: pre-wrap;
}

.space-right {
    margin-right: 10px;
}


fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Rahmenfarbe */
    border-radius: 5px;
    /* Abgerundete Ecken */
    padding: 10px;
    /* Innenabstand */
    margin: 20px 0px 20px 0px;
    /* Außenabstand */
}



.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}


.gap10 {
    gap: 10px;
}


.borderUp {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
}

.borderDown {
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}


.rotate90 {
    transform: rotate(90deg);
}

.rotate-90 {
    transform: rotate(-90deg);
}

.rotate180 {
    transform: rotate(180deg);
}


/* RESPONSIVE ARROWS */
[class^=arr-] {
    border: solid currentColor;
    border-width: 0 .2em .2em 0;
    display: inline-block;
    padding: .20em;
    /* width: 8px; 
    height: 8px;  */


}

.arr-right {
    transform: rotate(-45deg);
}

.arr-left {
    transform: rotate(135deg);
}

.arr-up {
    transform: rotate(-135deg);
}

.arr-down {
    transform: rotate(45deg);
}



.prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}



/*is needed for the function enablePlaceholderForDivContentEditAble(selector)*/
div[contenteditable][placeholder] {
    min-height: 50px;
}

/*is needed for the function enablePlaceholderForDivContentEditAble(selector)*/
div[contenteditable].placeholder-visible:before {
    content: attr(placeholder);
    color: #c0c0c0;
    pointer-events: none;
    white-space: pre-line;
    position: absolute;
}


li {
    margin-bottom: 10px;
}