@import url("https://use.typekit.net/yjx6gql.css");

:root {

/* Colors: */
--grey: #808080;
--white: #FFFFFF;
--black: #000000;
--blue: #1D71B8;
--red: #E5292A;
--green: #95C11F;

/* Font/text values */
--twyz-font-family-myriadpro-semibold: Myriad Pro-Semibold;
--twyz-font-family-myriadpro-regular: Myriad Pro-Regular;
--twyz-font-family-myriadpro-bold: Myriad Pro-Bold;
--twyz-font-family-myriadpro-light: Myriad Pro-Light;
--twyz-font-style-normal: normal;
--twyz-font-style-bold: bold;
--twyz-font-style-light: light;
--twyz-font-weight-normal: normal;
--twyz-font-weight-bold: 700;
--twyz-font-weight-light: 300;
--twyz-font-size-10: 10px;
--twyz-font-size-11: 11px;
--twyz-font-size-12: 12px;
--twyz-font-size-14: 14px;
--twyz-font-size-16: 16px;
--twyz-font-size-18: 18px;
--twyz-font-size-24: 24px;
--twyz-character-spacing-0: 0px;
--twyz-character-spacing-0-5: 0.5px;
--twyz-character-spacing-0-6: 0.6px;
--twyz-line-spacing-18: 18px;
--twyz-line-spacing-24: 24px;
--twyz-line-spacing-28: 28px;
--twyz-decoration-underline: underline;
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/ubuntu-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'),
       url('/fonts/ubuntu-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ubuntu-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ubuntu-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ubuntu-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ubuntu-v13-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}





/* ----------------------------------------------------------------------------- *

 *                                Hauptselectoren                                            *

 * ----------------------------------------------------------------------------- */

body, html {
background: white;
font-size: 16px;
font-family: 'Roboto', Arial, Verdana, sans-serif !important;
}


h1{font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700 !important; color: #000 !important;}
h2{font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500 !important; color: #000 !important; font-size: 1.75rem !important;}



h3 {

font-style: var(--twyz-font-style-bold);
font-weight: var(--twyz-font-weight-bold);
font-size: var(--twyz-font-size-24);
line-height: var(--twyz-line-spacing-28);
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
margin-bottom: 0px !important;
}

h4 {

font-style: var(--twyz-font-style-bold);
font-weight: var(--twyz-font-weight-bold);
font-size: var(--twyz-font-size-18);
line-height: var(--twyz-line-spacing-28);
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
}

h5 {
font-size: var(--twyz-font-size-18);
line-height: var(--twyz-line-spacing-28);
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
margin-bottom: 20px;
}



/* ----------------------------------------------------------------------------- *

 *                                Inhalt                                                           *

 * ----------------------------------------------------------------------------- */

.login--container {
width: 25%;
}


.btn-classic  {

font-style: var(--twyz-font-style-normal);
font-weight: var(--twyz-font-weight-normal);
font-size: var(--twyz-font-size-14);
color: var(--black);
padding: 8px 14px;
border-radius: 3px;
border: 2px solid black;
text-transform: uppercase;
}

.btn-classic a,
.btn-classic a:link,
.btn-classic a:active,
.btn-classic a:visited,
.btn-classic a:hover {color: var(--black) !important} 


.a-link {
color: var(--blue) !important;
text-decoration: var(--twyz-decoration-underline);
font-size: var(--twyz-font-size-16);
cursor: pointer;
}

.a-link-small {
color: var(--blue) !important;
text-decoration: var(--twyz-decoration-underline);
font-size: var(--twyz-font-size-14);
}

.a-link-color {color: var(--blue) !important;}


.text-button {

font-style: var(--twyz-font-style-normal);
font-weight: var(--twyz-font-weight-normal);
font-size: var(--twyz-font-size-14);
line-height: var(--twyz-line-spacing-18);
letter-spacing: var(--twyz-character-spacing-0-5);
color: var(--white);
}

.text-button a, .text-button a:hover {color: var(--white) !important} 


.text-button-exit {

font-style: var(--twyz-font-style-normal);
font-weight: var(--twyz-font-weight-normal);
font-size: var(--twyz-font-size-14);
line-height: var(--twyz-line-spacing-18);
letter-spacing: var(--twyz-character-spacing-0-6);
color: var(--blue);
}

.text-formname {

font-style: var(--twyz-font-style-light);
font-weight: var(--twyz-font-weight-light);
font-size: var(--twyz-font-size-14);
line-height: var(--twyz-line-spacing-24);
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
}

.text-content {

font-style: var(--twyz-font-style-normal);
font-weight: var(--twyz-font-weight-normal);
font-size: var(--twyz-font-size-16) !important;
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
}

.text-content-small {

font-style: var(--twyz-font-style-normal);
font-weight: var(--twyz-font-weight-normal);
font-size: var(--twyz-font-size-14);
color: var(--grey);
}

.form-outline .form-control{
	padding: .33em 0 !important;
}

.form-notch-leading{
	border: none !important;
}

.form-notch-middle{
	border-top: none !important;
	border-color: #bdbdbd !important;
	border-width: 1px !important;
}

.form-notch-trailing{
	border-top: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	border-color: #bdbdbd !important;
	border-width: 1px !important;
}

.blue-btn{
background: var(--blue) 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
box-shadow: none !important;
padding: .5rem !important;
}

.btn.blue-btn:hover{
	color: var(--white);
	background-color: var(--blue);
}

.btn-twyz
{
background: var(--blue);
border-radius: 3px;
box-shadow: none !important;
margin-bottom: .5rem !important;
border: 0px;
font-size: 14px;
text-transform: none;
color: var(--white);
cursor: pointer;
padding-top: .3rem;
padding-right: 1rem !important;
padding-bottom: .3rem;
padding-left: 1rem;
font-size: 16px;
}

.btn-twyz:hover{
	color: var(--white);

}

.btn-twyz-outline
{
	border: 1px solid var(--blue);
	border-radius: 3px;
	box-shadow: none !important;
	color: var(--blue) !important;
	padding: calc(.5rem - 1px);
}

.btn-twyz-outline:hover
{
	color: var(--blue) !important;
}

.twyz-exit{
height: 25px;
width: 25px;
}

.ok
{
background: var(--green);
}

.error
{
background: var(--red);
}


.blue-without-padding-btn{
background: var(--blue) 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
box-shadow: none !important;
}

.btn.blue-without-padding-btn:hover{
	color: var(--white);
	background-color: var(--blue);
}

.red-btn{
	background: var(--red) 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    box-shadow: none !important;
}

.btn.red-btn:hover{
	color: var(--white);
	background-color: var(--red);
}

.green-btn{
	background: var(--green) 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    box-shadow: none !important;
}

.btn.green-btn:hover{
	color: var(--white);
	background-color: var(--green);
}

.select-input.form-control{
	height: 36px;
    padding-left: calc(var(--mdb-gutter-x)/2) !important;
	font-family: 'Roboto', Arial, Verdana, sans-serif;
    font-style: var(--twyz-font-style-normal);
    font-weight: var(--twyz-font-weight-normal);
    font-size: var(--twyz-font-size-14);
    line-height: var(--twyz-line-spacing-18);
    letter-spacing: var(--twyz-character-spacing-0);
    color: var(--black);
}

.select-group{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.select-option{
    font-style: var(--twyz-font-style-normal);
    font-weight: var(--twyz-font-weight-normal);
    font-size: var(--twyz-font-size-14);
    line-height: var(--twyz-line-spacing-18);
    letter-spacing: var(--twyz-character-spacing-0);
    color: var(--black);
}

.select-arrow {
	top: 0 !important;
}

.logo {
  height: auto;
  width: 100px;
  margin-left: 50px;
}



.logo-register{
    margin: 0px 0px 15px 15px;
}

.form-label{
	color: rgba(0,0,0,.6) !important;
}

.padding-logo{
	padding-top: 15px;
	padding-bottom: 15px;
	z-index: 1031;
}

.collapse-btn{
	margin-left: auto;
	margin-right: 30px;
}

.min-height-sidebar{
	min-height: 0;
}

.collapse-menu{
	position: fixed;
	background-color: white;
	z-index: 10;
	left: 0;
	right: 0;
	top: 0;
	padding-top: 77px;
	bottom: 0;
	padding-left: 15px;
}

.nav-link.active{
	color: var(--blue) !important;
}

.content-max-height{
	max-height: calc(100vh - 3rem - 3rem);
}

.navbar{
	box-shadow: none;
}

.info-text{
	text-align: left;
}

.text-right{
	text-align: right;
}

.min-height-100{
	min-height: 100%;
}

.nav-tabs .nav-link:hover{
	background-color: transparent;
}

.form-check-input[type="checkbox"]:checked{
	background-color: var(--blue);
}

.form-check-input:checked{
	background-color: var(--blue);
	border-color: var(--blue);
}

.form-check-input[type="checkbox"]:checked:focus{
	background-color: var(--blue);
}

.form-check-input:checked:focus{
	box-shadow: none;
}

.form-check-input{
	width: 1.1em;
	height: 1.1em;
}

.title-popup{

    font-style: var(--twyz-font-style-normal);
    font-weight: var(--twyz-font-weight-normal);
    font-size: var(--twyz-font-size-24);
    line-height: var(--twyz-line-spacing-28);
    letter-spacing: var(--twyz-character-spacing-0);
    color: var(--black);
}

.blue-outline-btn{
	color: var(--blue);
	border-color: var(--blue);
	border-width: 1px;
	padding: .5rem !important;
}

.blue-outline-btn:hover{
	color: var(--blue);
	border-color: var(--blue);
}

.border-none-mobile{
	border: none !important;
}

.h2-title{

font-style: var(--twyz-font-style-bold);
font-weight: var(--twyz-font-weight-bold);
font-size: var(--twyz-font-size-16);
line-height: var(--twyz-line-spacing-28);
letter-spacing: var(--twyz-character-spacing-0);
color: var(--black);
}

.lh-app{
	line-height: 2.4;
}

.normalCheckbox.form-check-input[type="checkbox"]:checked::after{
	width: .3rem !important;
	height: .8rem !important;
	margin-left: .3rem !important;
}

hr{
	background-color: #e0e0e0;
	opacity: inherit;
}

.info-border{
	border: 5px solid #e6e6e6;
	border-radius: 10px;
}



.form-outline .form-control.disabled, .form-outline .form-control:disabled, .form-outline .form-control[readonly]
{background-color: #fff !important;}

a#sidebar.bars{
	color: var(--black) !important;
}

.disabled{
	pointer-events: none;
	opacity: .6;
}

.form-switch{
	display: -webkit-box;
}

.mobile-nav-max-height {
	max-height: calc(100vh - 77px - 94.6px);
}

.nav-max-height {
	max-height: calc(100vh - 6rem - 120.2px - .5rem - 27.5px);
}

.line-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cursor-pointer {
	cursor: pointer;
}

.activeLanguage{
	font-weight: bold;
}

/* ----------------------------------------------------------------------------- *

 *                                Media Queries                                  *

 * ----------------------------------------------------------------------------- */








/* ----------------------------------------------------------------------------- *

 *                                1024px                                  *

 * ----------------------------------------------------------------------------- */







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

    

    .login--container {

    width: 50%;

    }

    

}


/* ----------------------------------------------------------------------------- *

 *                               992px                                  *

 * ----------------------------------------------------------------------------- */



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



    .login--container {

    width: 100%;

    }

    .info-text{
        text-align: center;
    }

}

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

    .modal .modal-side {
        position: absolute;
        width: 100%;
        right: 10px;
        bottom: 10px;
        margin: 0;
    }

	.border-none-mobile{
		border-right: 1px solid #e0e0e0 !important;
	}

}


/* ----------------------------------------------------------------------------- *

 *                                768px                                  *

 * ----------------------------------------------------------------------------- */

/*

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



    .login--container {

    width: 100%;

    }

    .info-text{
        text-align: center;
    }

}

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

    .modal .modal-side {
        position: absolute;
        width: 100%;
        right: 10px;
        bottom: 10px;
        margin: 0;
    }

	.border-none-mobile{
		border-right: 1px solid #e0e0e0 !important;
	}

}
*/

/* ----------------------------------------------------------------------------- *

 *                                640px                                  *

 * ----------------------------------------------------------------------------- */





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



}





/* ----------------------------------------------------------------------------- *

 *                                414px                                  *

 * ----------------------------------------------------------------------------- */







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






}











/* ----------------------------------------------------------------------------- *

 *                                376px                                  *

 * ----------------------------------------------------------------------------- */





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





}





/* ----------------------------------------------------------------------------- *

 *                                360px                                  *

 * ----------------------------------------------------------------------------- */







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





}



/* ----------------------------------------------------------------------------- *

 *                                320px                                  *

 * ----------------------------------------------------------------------------- */







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

 	.logo{
		width: 130px;
	}

	.btn-classic{
		font-size: var(--twyz-font-size-11);
	}

}