/* Main CSS File */
:root {
  --mainSchriftColor: #665752;
  --DHHred: #B3081B;
  --DHHlightGrey1: #f1f1f1;
  --DHHlightGrey2: #f9f9f9;
  --mainSchriftSize: 20px;
  --mainDetails: #565656;
  --rounded: 20px;
  --iaDefaultPadding: 20px;
  --iaDefaultPaddingField: 6px 10px;
  --iaDefaultBorderField: 1px;
  --iaDefaultFontSize: 17px;
  --iaDefaultPaddingButton: 5px 15px 5px 15px;
  --mainEffectDuration: 0.5s;
  --iaDefaultShadow: 0px 12px 6px -6px rgba(0,0,0,0.12);
}


/*    ####################################################     */

/* ia Standards */
.iaInline {
	display:inline-block;
}
.iaNone {
	display:none;
}
.iaBold {
	font-weight:bold;
}
.iaMarginTop1 {
	margin-top: 1rem;
}
.iaMarginTop2 {
	margin-top: 2rem;
}
.iaMarginTop3 {
	margin-top: 3rem;
}
.iaMarginBottom1 {
	margin-bottom: 1rem;
}
.iaMarginBottom2 {
	margin-bottom: 2rem;
}
.iaMarginBottom3 {
	margin-bottom: 3rem;
}
.iaWhite {
	color:white;
}
.iaButton {
font-weight: 500;
    padding: 0.3em 1em;
    line-height: 1.7em!important;
    background-color: transparent;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid;
	cursor: pointer;
}
.iaButton:hover {
	border: 2px solid;
	border-color:rgba(0,0,0,0.1);
	background-color: rgba(0,0,0,0.1);
	
}
.iaButtonLight {
font-weight: 500;
    padding: 0.3em 1em;
    line-height: 1.7em!important;
    background-color: transparent;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid;
	cursor: pointer;
	color:white;
}
.iaButtonLight:hover {
	border: 2px solid;
	border-color:rgba(255,255,255,0.1);
	background-color: rgba(255,255,255,0.1);
	
}
.iaSpaceXS { height: 0.5em; }
.iaSpaceS { height: 1em; }
.iaSpaceL { height: 2em; }
.iaSpaceM { height: 3em; }
.iaSpaceL { height: 4em; }
.iaSpaceXL { height: 5em; }

.iaRounded {
	border-radius: var(--rounded);
}
.iaDefaultPaddingField {
	padding: var(--iaDefaultPaddingField);
}
.iaDefaultBorderField {
	border-width: var(--iaDefaultBorderField);
}

.iaInfoIconCalculator {
	cursor: pointer;
}



/* Service Center */
.viewClientsAdminCenterContainer {
	display: flex;
	flex-wrap: wrap;
}

.viewClientsAdminCenterMenu {
	background-color: #f8f9fa;
	width: 15em;
	min-height: 100vh;
	padding: 1em;
}

.viewClientsAdminCenterContent {
	flex-grow: 1;
	padding: 1em;
}

/* Responsive design for screens smaller than 980px */
@media (max-width: 980px) {
	.viewClientsAdminCenterMenu {
		width: 100%;
		height: auto;
  }

	.viewClientsAdminCenterContent {
		width: 100%;
  }
}

/* MENU lEFT SIDE */
.menu-item .submenu {
    display: none;
}

.main-point {
	padding-left: 0.5em;
    cursor: pointer;
}
.main-point:hover {
	background-color: #dfdfdf;
}
.sub-point {
	padding-left: 2em;
	
}
.sub-point:hover {
	background-color: #dfdfdf;
}
.toggle-container {
    display: inline-block;
    width: 1em; /* Feste Breite, die breit genug für das + und - ist */
}


/* Apps */
/* displayInfoForLoggedOutVisitors */
.displayInfoForLoggedOutVisitorsFrame {
	margin-top: 10vh;
	margin-left: 10vw;
	margin-right: 10vw;
	padding: 20px;
}
/* createCustomer */
.form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.form-group .label, .form-group .input {
    width: 48%;
}

@media (max-width: 980px) {
    .form-group {
        flex-direction: column;
    }

    .form-group .label, .form-group .input {
        width: 100%;
    }
}
/* displayCustomers */
.customer-container {
    display: flex;
    flex-direction: column;
}

.customer-row {
    display: flex;
    justify-content: space-between;
}

.customer-row.header {
    font-weight: bold;
}

.customer-cell {
    flex-basis: 0;
    flex-grow: 1;
    padding: 10px;
}

@media (max-width: 980px) {
    .customer-row {
        flex-direction: column;
    }
}

/* viewTickets */
.tickets-container {
    width: 100%;
    overflow-x: auto; /* Ergänzt, um horizontales Scrollen zu ermöglichen, wenn der Inhalt breiter ist als der Container */
    padding: 10px;
}

.tickets-container table {
    width: 100%;
    table-layout: fixed; /* Beibehalten, um die Zellenbreite zu kontrollieren */
    word-wrap: break-word; /* Beibehalten, um Wörter ordnungsgemäß in einem begrenzten Raum zu brechen */
    box-sizing: border-box; /* Ergänzt, um sicherzustellen, dass Padding und Border in der Gesamtbreite des Elements enthalten sind */
}

.tickets-container th, .tickets-container td {
    box-sizing: border-box; /* Ergänzt, um sicherzustellen, dass Padding und Border in der Gesamtbreite des Elements enthalten sind */
    padding: 10px;
    border: 1px solid #ccc;
}

/* Medienabfrage für Auflösungen kleiner als 980 Pixel */
@media (max-width: 980px) {
    .tickets-container .description {
        display: none;
    }
}

/* CSS VOM WEBSITE RECHNER */
.iaProductCalculatorField {
	min-width: 15em;
	padding: 0.4em 0.7em 0.4em 0.7em;
	border-width: 0px;
}
@media (max-width: 980px) {
	.iaProductCalculatorField {
		width: 100%;
		padding: 0.4em 0.7em 0.4em 0.7em;
	}
}


/* IT SUPPORT RECHNER */
.iaProductCalculatorTable {
    width: 100%;
    border-collapse: collapse;
    border: none!important;
    padding: 0!important;
}

.iaProductCalculatorTable tr,
.iaProductCalculatorTable td {
    border: none!important;
    padding: 0!important;
}

.iaProductCalculatorTable td:first-child {
    padding-right: 20px!important; /* Fügt ein Padding nach rechts hinzu */
}

/* Media Queries */
@media only screen and (max-width: 980px) {
    .iaProductCalculatorTable,
    .iaProductCalculatorTable tr,
    .iaProductCalculatorTable td {
        display: block;
        width: 100%;
        border: none; /* Entfernt die Rahmen */
        padding: 0;   /* Entfernt das Padding */
    }
    .iaProductCalculatorTable td:first-child {
        padding-right: 0!important; /* Entfernt das Padding nach rechts in kleinen Bildschirmgrößen */
    }
}