@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');

/* Drehender Ladespinner */
.loader {position: fixed;top: 50%;left: 45%;border: 16px solid #eee;border-radius: 50%;border-top: 16px solid #336699;width: 120px;height: 120px;-webkit-animation: spin 2s linear infinite; /* Safari */animation: spin 2s linear infinite;z-index: 10;}
@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }} /* Safari */
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/* Dropdown */
.dropdown-menu.community{margin-top: .4em;min-width: 300px;}
.dropdown-menu.option_community:nth-child(1){border-bottom: 1px solid lightgray;}
.option_community{padding: 1em .5em;}
.option_community:hover{background: #ececec;}
.option_link{cursor: pointer;color: #333;font-weight: 500;text-decoration: none;}
.option_link:hover{color: #333;text-decoration: none;}
.option_explanation{font-weight: 300;color: grey;font-size: .9em;}
#dropdown_options_community{cursor:pointer;}

/* Flexbox */
.flexcontainer-register {display: flex;flex-wrap: wrap;align-content: space-around;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;}
.flexcontainer-register > .flexchild-register{height: 100%;background: #fff;border: 1px solid lightgray;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;background: #ffffff;border-radius: 1em;}
.flexcontainer-register > .flexchild-register:nth-child(1) {flex: 9;overflow: auto;margin-right: 1em;position: -webkit-sticky;}
.flexcontainer-register > .flexchild-register:nth-child(1)::-webkit-scrollbar {width: 0px;}
.flexcontainer-register > .flexchild-register:nth-child(2) {flex: 3;position: sticky;top: 5em;border: 1px solid lightgray;margin: 0em .5em !important;margin: 0px auto;}
.flexcontainer-register:last-child {border-bottom: none !important;border-bottom-right-radius: 1em;border-bottom-left-radius: 1em;}
.flexcontainer-register:last-child > .flexchild-register-liste:first-child{border-bottom-left-radius: 1em;}
.flexcontainer-register:last-child > .flexchild-register-liste:last-child{border-bottom-right-radius: 1em;}

/* Tooltip */
.register-tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}
.register-tooltip .tooltiptext {visibility: hidden;width: 240px;background-color: black;color: #fff;text-align: center;border-radius: .5em;padding: .5em;position: absolute;z-index: 1;bottom: 150%;left: 50%;margin-left: -120px;}
.register-tooltip .tooltiptext::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparent transparent;}
.register-tooltip:hover .tooltiptext {visibility: visible;}

/* Allgemeine styles */
.form-horizontal{padding:.5em}
.register_ueberschrift {padding: .5em;background: #eee;border-bottom: 1px solid lightgray;border-top-right-radius: .4em;border-top-left-radius: .4em;margin-bottom: 0;}
.datenschutz_erklaerung{padding: .5em 1em;}
.datenschutz_erklaerung>p>a{color:#286090;}
.nutzungsbedingungen{background:#fff;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;    margin-top: 2em;border: 1px solid lightgray;border-radius: .9em;}

.c100.register{position: relative;cursor:pointer;font-size: 3.5em;width: 1em;height: 1em;border-radius: 50%;float: left;margin-right: .3em;background-color: #fff;}
img.profilbild{border-radius: 100%;object-fit: cover;border: 1px solid white;margin-top: -.5em;}

#register_success_wrapper{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;background: white;border: 1px solid lightgray;border-radius: .5em;}

/* Mobile Styles */
@media (max-width: 767px) { /* < Mobile L */
   .flexcontainer-register > .flexchild-register:nth-child(1) {border-right:0;flex: none; width: 100%;height: 100%;position: relative;top: 0;margin: 0;}
   .flexcontainer-register > .flexchild-register:nth-child(2) {margin: 1em 0em 0em 0em !important;width: 100%;}
   .flexcontainer-register:last-child > .flexchild-register-liste:first-child{border-bottom-left-radius: 0;}
   .flexcontainer-register:last-child > .flexchild-register-liste:last-child{border-bottom-right-radius: 1em; border-bottom-left-radius: 1em;}
   .form-horizontal .form-group .control-label {text-align: left !important;}
   .form-horizontal{padding: .5em 1em}
   .register-tooltip{display: none;}
}