/*import System UI Css*/
@import "/assets/css/system-ui.css";

/*Main Colors*/
:root {
	--main-color: #21232f;
	--main-color-light:#272B30;
	--main-color-dark:#05060F;
	--second-color: #F6704D;
	--third-color: #383737;
	--forth-color: #6E6F6F;
	--light: #fff;
	--dark: #000;
	--link-grey: #9D9DA1;
	--light-grey: #9D9DA1;
	--button-bg-inactive:#D8D8DA;

}



/*Hauptmenü*/
.logo-extern{
    width: 180px;
    margin-right: auto;
}

.main-menu {
background-color: var(--main-color);

}

.menu{
    width: 100%;
   
}

.mobil-menu-button{
position: absolute;
top: 5px;
right:15px;
color: var(--light);
}

.close-menu{
    color: var(--light);  
    background-color: var(--second-color);
    opacity:1;
    margin-right: 5px !important;
    margin-top: -15px;
}

.mobil-menu-button:hover, .mobil-menu-button:focus{
      color: var(--second-color);
    }

.nav-icon{
    color: var(--light);
}

.navbar-toggler:focus {
   
    outline: 0;
    box-shadow: 0 0 0 0rem;
  }



.header-btn{
    border: 0px solid var(--light);
    color: var(--light);
    white-space: nowrap;
    margin: 0px 5px 0px 5px;
    
}
.btn-rounded-outline{
    border: 1px solid var(--second-color);
}
.btn-rounded-fill{
background-color: var(--second-color);

}

.btn-rounded-fill a:link, .btn-rounded-fill a:visited, .btn-rounded-fill a:focus{
    color: var(--light);
}


.header-btn a:link, .header-btn a:visited, .header-btn a:focus{
    color:var(--light);
}
.header-btn a:hover{
    color:var(--second-color);
}

.header-btn-hollow {
    border-color:var(--light);
}

.header-btn-hollow a {
    color:var(--light);
}

.header-btn-hollow:hover {
    border-color:var(--second-color);

}

.header-btn-hollow:hover > a {
    color: var(--second-color);
}


.header-btn a:hover{
    color:var(--second-color);
}

.btn-rounded-fill a:hover{
    color: var(--main-color);
}

a.header-link, a.header-link:visited, a.header-link:focus{
    color: var(--light);
    white-space: nowrap;
}

a.header-link:hover{
    color: var(--second-color);
}


.formwrapper{
    max-width: 70%;
}

.formwrapper h2{
    font-family: 'VisbyCF-ExtraBold';
    font-weight: 900;
    font-size: 32px;
}

.formwrapper a:link, .formwrapper a:visited {
    color: var(--second-color);
} 

.login-img{
max-width: 90%;
margin: auto;
}



.login-button{
    background-color: var(--second-color);
    width: 100%;
    border-radius: 8px;
    color:var(--light);


}

.password {
 padding-top: 20px;;
}

.icon {
width: 16px;
padding-right: 6px;
padding-bottom: 12px;

}

.benutzer-icon{

}

.button-text{
    border: 1px soldi red;
    padding-bottom: 3px;

}

.form-text{
    margin-top: 30px;;
}



/*Mobil canvas Menu */
.mobil-canvas, .offcanvas-header{
background-color: var(--main-color);
min-width: 80%;
}
.offcanvas-start {
    width: 100%;
}



/*Überschreiben von bootsstrap*/

.btn-check:focus + .btn, .btn:focus {
 
    box-shadow: none;
  }



@media (min-width : 992px) {
    .offcanvas {
      visibility      : visible;
      position        : relative;
      background      : none;
      border          : none;
      justify-content : end;
      color           : red;
    }
  }
  @media (max-width : 992px) {
    .offcanvas {
      min-width : 250px !important;
    }
    .offcanvas-start-lg {
      top          : 0;
      left         : 0;
      border-right : 1px solid rgba(0, 0, 0, .2);
      transform    : translateX(-100%);
    }
  }
  .navbar-nav li a {
    color: white !important;
  }