@charset "utf-8";


/*----- html -----*/

html {
    height: 100%;
}



/*----- body -----*/

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: rgb(0,0,0);
    overflow-y: scroll;
}



/*----- selection -----*/

::selection {
    background: rgb(250,160,0);
}



/*----- main -----*/

main {
    flex: 1;
    background: rgb(255,255,255);
}



/*----- center -----*/

.center {
    margin: 0 auto;
    max-width: 1220px;
}



/*----- h1 -----*/

h1 {
    margin: 0;
    /*margin: 30px 0 20px;*/
    font-size: 25px;
}


/*
@media only screen and (min-width: 992px) {


    h1 {
        margin: 15px 0 50px;
    }

}
*/



/*----- h2 -----*/

h2 {
    margin: 0;
    font-size: 22px;
}



/*----- h3 -----*/

h3 {
    margin: 0;
    font-size: 22px;
}



/*----- a -----*/

a,
a:hover,
a:focus,
a:active {
    color: rgb(0,0,0);
  	text-decoration: none;
  	outline: none;
}



/*----- anchor -----*/

.anchor {
    position: relative;
    top: -15px;
    visibility: hidden;
}




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

.label {
    margin-bottom: 3px;
    font-weight: 500;
}




.label-checkboxes {
    margin-bottom: 13px;
    font-weight: 500;
}



/*----- form field -----*/

.form-field {
    margin-bottom: 15px;
}


@media only screen and (min-width: 576px) {


    .form-field {
        margin-bottom: 20px;
    }

}






/*----- last form field -----*/

.last-form-field {
    margin-bottom: 20px;
}


@media only screen and (min-width: 576px) {


    .last-form-field {
         margin-bottom: 30px;
    }

}



/*----- value -----*/

.value {
    padding-left: 0;
}




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

input[type=text],
input[type=password] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px 15px;
    margin: 0 0 20px;
    box-sizing: border-box;
    border: 1px solid rgb(200,200,200);
    border-radius: 0;
    outline: none;
}



/*----- select box -----*/

.select {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}


.select select {
    width: 100%;
    padding: 0 15px;
    cursor: pointer;
    outline: 0;
    border: 0;
    border-radius: 0;
    line-height: 50px;
    color: rgb(120,120,120);
    -webkit-appearance: none;
    /*-moz-appearance: none;*/
    appearance: none;
    background: rgb(230,230,230);
}


/*
.select select::-ms-expand {
    display: none;
}
*/


.select select:hover,
.select select:focus {
    color: rgb(0,0,0);
    background: rgb(204,204,204);
}


.select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}


.select-arrow {
    position: absolute;
    right: 15px;
    align-self: center;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: rgb(120,120,120) transparent transparent transparent;
}


.select select:hover ~ .select-arrow,
.select select:focus ~ .select-arrow {
    border-top-color: rgb(0,0,0);
}


.select select:disabled ~ .select-arrow {
    border-top-color: rgb(204,204,204);
}


/* Wenn gewollt über Media Queries den Hover für die Desktopversion ausschalten. Für die Mobilversion ist der Hover für das "optisch" richtige Verhalten notwendig (IOS) */









/*----- checkbox -----*/

.control {
    position: relative;
    display: flex;
    height: 25px;
    margin-bottom: 20px;
    padding-left: 35px;
    cursor: pointer;
}


.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}


.control-indicator {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    padding-bottom: 3px;
    border: 1px solid rgb(200,200,200);
    background: rgb(255,255,255);
}


.control-checkbox .control-indicator {
    /*border-radius: 3px;*/
}


/* Diesen Status nur über Media Querie für Desktopversion??? -> Wegen "Tabulatorsprung" */

/*.control:hover input:not([disabled]) ~ .control-indicator,*/
.control input:focus ~ .control-indicator {
border-color: rgb(120,120,120);
}


.control input:disabled ~ .control-indicator {
    background: rgb(230,230,230);
    opacity: 0.5;
    pointer-events: none;
}


.control-indicator:after {
    content: "";
    display: none;

}


.control input:checked ~ .control-indicator:after {
    display: block;
}


.control-checkbox .control-indicator:after {
    width: 7px;
    height: 14px;
    border: solid rgb(99,0,0);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}


.control-checkbox input:disabled ~ .control-indicator:after {
    border-color: rgb(120,120,120);
}



/*----- placeholder -----*/

::placeholder {
    color: rgb(200,200,200);
}



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

.button-green {
    width: 100%;
    line-height: 50px;
    margin: 0;
    /*margin: 30px 0 15px;*/
    padding: 0 20px;
    color: rgb(255,255,255);
    font-size: 20px;
    text-shadow: 1px 1px 3px rgb(59,59,59);
    text-decoration: none;
    border: none;
    border-radius: 10px;
    background: rgb(34,117,69);
    background-image: linear-gradient(to bottom, rgb(34,117,69), rgb(33,88,55));
}


.button-green:hover {
    background: rgb(33,88,55);
    text-decoration: none;
}


.button-green:focus {
    outline: none;
}


@media only screen and (min-width: 576px) {


    .button-green {
        line-height: 40px;
        /*margin: 0;*/
        /*margin: 30px 0 25px;*/
        font-size: inherit;
        border-radius: 6px;
    }

}



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

.button-gray {

    width: 100%;
    line-height: 46px;
    margin: 0;
    /*margin: 0 0 15px;*/
    padding: 0 20px;
    color: rgb(200,200,200);
    font-size: 20px;
    /*text-shadow: 1px 1px 3px rgb(59,59,59);*/
    text-decoration: none;
    border: 2px solid rgb(220,220,220);
    border-radius: 10px;
    background: rgb(255,255,255);
}


.button-gray:hover {
    text-decoration: none;
}


.button-gray:focus {
    outline: none;
}


@media only screen and (min-width: 576px) {


    .button-gray {
        line-height: 36px;
        /*margin: 0;*/
        /*margin: 30px 0 25px;*/
        font-size: inherit;
        border-radius: 6px;
    }

}





/*----- button as icon -----*/

.button-as-icon,
.button-as-icon:focus {
    padding: 0;
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
}




/*----- button as link -----*/

.button-as-link,
.button-as-link:focus {
    padding: 0;
    border: none;
    cursor: pointer;
    outline: none;
    background: none;
}




/*----- button as photo overlay -----*/

.button-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    /*transform: translate(50%, -50%);*/
    width: 100%;
    height: 100%;
}


.button-transparent {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    /*border-radius: 50%;*/
    background: none;
}


.button-transparent:focus,
.button-transparent:active {
    outline: none;
}



/*----- favorite -----*/

.favorite {
    margin-left: 7px;
}



/*----- icon right -----*/

.icon-right,
.icon-right:hover,
.icon-right:focus,
.icon-right:active {
    padding-left: 10px;
    /*text-decoration: none;*/
}



/*----- icon left -----*/

.icon-left,
.icon-left:hover,
.icon-left:focus,
.icon-left:active {
    padding-right: 10px;
    /*text-decoration: none;*/
}



/*----- icons -----*/

.icon-info,
.icon-info:hover,
.icon-info:focus,
.icon-info:active {
    padding-left: 7px;
    color: rgb(99,0,0);
}


.icon-bulb,
.icon-bulb:hover,
.icon-bulb:focus,
.icon-bulb:active {
    padding-right: 7px;
}


.icon-caution,
.icon-caution:hover,
.icon-caution:focus,
.icon-caution:active {
    padding-right: 7px;
}










/*----- error alert -----*/

.error-alert {
    margin: 0;
    /*margin-bottom: 25px;*/
    padding: 20px 15px;
    color: rgb(255,0,0);
    font-size: 20px;
    font-weight: 500;
    background: rgb(245,215,218);
}


@media only screen and (min-width: 992px) {


    .error-alert {
        /*margin-bottom: 50px;*/
        padding: 25px 15px;
    }

}



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

.error-label {
    margin-bottom: 8px;
    color: rgb(255,0,0);
    font-weight: 500;
}



/*----- confirmation alert -----*/

.confirmation-alert {
    margin: 0;
    /*margin-bottom: 25px;*/
    padding: 20px 15px;
    color: rgb(1,111,1);
    font-size: 20px;
    font-weight: 500;
    background: rgb(212,237,218);
}


@media only screen and (min-width: 992px) {


    .confirmation-alert {
        /*margin-bottom: 50px;*/
        padding: 25px 15px;
    }

}











/*----- divider -----*/

.divider {
    width: 100%;
    height: 1px;
    margin: 0;
    content: "";
    background: rgb(220,220,220);
}







/*----- modal -----*/

@media only screen and (max-width: 575px) {


    .modal-dialog {
        margin: 15px;
    }

}


.modal-content {
    border-radius: 0;
}


.modal-header {
    padding: 15px;
    border-bottom: 1px solid rgb(220,220,220);
}


.modal-title {
    font-size: 17px;
}


.close,
.close:hover,
.close:focus {
    color: rgb(120,120,120);
    opacity: 1.0;
    outline: none;
}


.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
    color: rgb(120,120,120);
    opacity: 1.0;
}


.modal-body {
    padding: 15px;
}


.modal-footer {
    padding: 10px 15px;
    border-top: 1px solid rgb(220,220,220);
}


.modal-footer a {
    color: rgb(34,117,69);
    font-weight: 500;
}


.modal-backdrop.show {
    opacity: 0.7;
}



/*----- photo -----*/

.photo {
    position: relative;
}



/*----- photo overlay -----*/

.photo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255,255,255);
    /*font-size: 40px;*/
}







/*----- notification badge -----*/

.notification-badge {
    line-height: 24px;
    padding: 0 7.5px;
    border-radius: 12px;
    color: rgb(255,255,255);
    /*font-size: 17px;*/
    font-weight: 500;
    background: rgb(131,0,0);
}













/*
.error {
	color: red;
}

select.error {
	border: 1px solid #FF0000;
	outline: none;
	color: black;
}

input.error {
	border: 1px solid #FF0000;
	outline: none;
	color: black;
}
*/



/*
input[type="radio"] {
	display: none;
}

input[type="radio"] + img {
	border: 2px solid transparent;
}

input[type="radio"]:checked + img {
	border: 2px solid red;
}
*/


/*
.confirmation {
	color: green;
}
*/





/* Farben Chat */

.sender {
	background-color: rgba(220,248,198,1.0);
}

.receiver {
	background-color: rgba(247,247,247,1.0);
}









/* Button als Link */

.test {
    background: none !important;
     border: none; 
     padding: 0 !important;
    
    /*optional*/
    font-family: arial, sans-serif; /*input has OS specific font-family*/
     /*color:#069;*/
     /*text-decoration: underline;*/
     cursor: pointer;
}



/* Button als Bild */

#submit-icon {
	background-image: url(/images/write.jpg);
	background-size: cover;
	border: none;
	width: 150px;
	height: 50px;
	cursor: pointer;
	color: transparent;
}




/* TEST -> funktioniert!!!
TESTEN: Webfont

input[type=submit] {padding:5px 15px; background:#ccc; border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
    font-family: arial;
    font-size: 30px;}
*/