@charset 'utf-8';

/*
TIM Logo Gelbe Farbe: #f2bd34
Tim Logo Graue Farbe: #585858
Menu Schrift Farbe: #585858
Logo & Menu Hintergrund Farbe: #ffffff
*/


/* Schriftarten */
@font-face {font-display: auto; font-family: 'Khand-Bold'; src: url('../files/fonts/Khand-Bold.ttf') format('truetype');}
@font-face {font-display: auto; font-family: 'Khand-Light'; src: url('../files/fonts/Khand-Light.ttf') format('truetype');}
@font-face {font-display: auto; font-family: 'Khand-Medium'; src: url('../files/fonts/Khand-Medium.ttf') format('truetype');}
@font-face {font-display: auto; font-family: 'Khand-Regular'; src: url('../files/fonts/Khand-Regular.ttf') format('truetype');}
@font-face {font-display: auto; font-family: 'Khand-Semibold'; src: url('../files/fonts/Khand-Semibold.ttf') format('truetype');}
@font-face {font-display: auto; font-family: 'Khand'; src: url('../files/fonts/Khand-Medium.ttf') format('truetype');}

html, body {width: 100%; height: 100%; margin: 0px; background: #ffffff;}

/* Allgemein */
body {font-family:Khand, sans-serif; font-size:14px; line-height:16px; font-weight:400; scrollbar-face-color:#eeeeee; scrollbar-highlight-color:#efefef; scrollbar-shadow-color:#efefef; scrollbar-3dlight-color:#666666; scrollbar-arrow-color:#666666; scrollbar-track-color:#efefef; scrollbar-darkshadow-color:#666666;}
form,input,textarea,div,th,td {font-family:Khand, sans-serif; font-size:14px; font-weight:400;}

.AnsichtContainer {height: 100%; overflow: hidden;}
.AnsichtsFenster {width: 100%; height: 84%;}
.customTIMColor {color:#6f6f6f;}
.FormularMandant {display: flex; margin: 0px; padding-top: 1px;}
.w-80 {width: 80%;}
.w-100 {width: 100%;}
#SubMenuSupport {right: 0px;}
.DLGDialog {visibility: hidden; position: absolute; left: 0; top: 0; z-index: 1000;}
#HilfsBox {z-index:999; position:absolute;left:0;top:0;visibility:hidden;}
.MandantText {padding-right:4; padding-top:2; text-align:right; color: #ffffff;}
.flex-center {align-items: center;}
.rmaTitle {padding-left: 50px; padding-right: 5px;}
.Formular {margin: 0px;}
.foundResult {background: yellow; font-weight: bold;}
.RemoteSupportContainer {padding-bottom: 93px; text-align: center;}
.v-hidden {visibility: hidden;}
.t-center {text-align: center!important;}
.va-top {vertical-align: top;}
.block {display: block;}
.requestTitleColor {color: #999999;}

.clickable {cursor: pointer;}
.Helpbox {position: absolute; background: #ffffe1; width: 300px; width: calc(300px + 15vh); border: 1px solid black;}
.Helpbox table {padding: 5px; display: block; overflow: auto; max-height: 60vh;}
.d-flex {display: flex;}

.hiddenFrame {visibility:hidden;position:absolute;left:0;top:0;}
.visibleFrame {visibility:visible;position:absolute;left:900;top:0;}

/* Navigation */
.header {padding: 1% 0px 1% 0px; display: flex; justify-content: space-between; align-items: center; min-height: 9vh;}
.navbar {display: flex; margin: auto 0px; flex-flow: wrap; justify-content: flex-end; line-height: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.navbar > div > div:last-child {cursor: pointer; white-space: nowrap; line-height: 1;}
.navbarEntry {padding: 0px 0.9vw; font-size: 3vh; font-family: Khand-Bold; white-space: nowrap; color: #585858; transition: 0.3s;}
.navbarEntry:hover {color: #f2bd34;}
#new {position: absolute; transform: rotate(35deg); height: 33px; margin-left: -10px; margin-top: -25px; border-radius: 100%;}

.subMenu {display: inline; white-space: nowrap; font-weight: bold; margin-right: 0.5vw; margin-left: 0.9vw; font-size: 1.6vh; color: #6f6f6f; font-family: Khand-Light; padding: 0.1vw 0.5vw 0.1vw 0.5vw; transition: 0.3s; vertical-align: top;}
.subMenu:hover {color: rgb(190,190,190);}
.logo {max-height: 9vh; padding-left: 1%; align-self: center;}
.FRMMandantText {float: right; padding: 0px; width: 280px;}
.tg-yellow {color: #f2bd34;}
.tg-sub-yellow {background-color: #f2bd34; color: #ffffff;}
.mandantAnzeige {padding: 0px; margin: 0px; padding-right: 5px;}

/* Infobar */
.infobar {background: #58585a; display: flex; justify-content: space-between; align-items: center;}
.infobarEntry {color: #ffffff; margin-left: 1vw; text-align: center; font-size: 1.5vh; white-space: nowrap;}
.infobarEntry a {font-weight: normal!important; white-space: nowrap; display: inline-block; padding: 0;}
.infobarEntry:last-of-type {display: flex; justify-content: flex-end;}

.loginEntry {display: flex; justify-content: space-around; align-items: center; background:#F2BD34;}

.infobarIcon {margin-right: 1px; max-width: 2vw; vertical-align: middle; padding: 1px; max-height: 22px}
.infobarDiv {display: inline; padding-left: 20px; padding-right: 20px;}
.login {background-color: #f2bd34; color: #ffffff; font-family: Khand-Medium; font-size: 16px; display: inline-block; text-align: center; float: right; height: 100%; min-width: 15vw;}
.login a {vertical-align: -webkit-baseline-middle; position: relative; top: -3px;}
.language {width: 5vw; font-family: Khand-Medium; text-align: center; color: #ffffff;}
.langEntry {display: block; width: 100%; color: #585858; text-align: center !important;}
.dropdown {width: 30%; height: 100%; background-color: #c7c7c7; text-align: center; min-width: 9vw; max-width: 10vw;}
.dropdownParent {padding: 1px!important; width: 100%; vertical-align: middle; position: relative; background-color: #CCCCCC;}
.dropdownMenu{padding: 0px; border-radius: 0; margin: 0; border: 0; float: none; text-align: center; z-index: 9; position: relative; display: inline-block; cursor: pointer; background-color: #c7c7c7; font-family: Khand-Medium;}
.rotatedArrow {transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari and Chrome */ -o-transform: rotate(180deg); /* Opera */  transition: all ease .3s; transition-duration: .2s; vertical-align: middle;}
.unrotatedArrow {transform: rotate(0deg); -ms-transform: rotate(0deg); /* IE 9 */ -moz-transform: rotate(0deg); /* Firefox */ -webkit-transform: rotate(0deg); /* Safari and Chrome */ -o-transform: rotate(0deg); /* Opera */  transition: all ease .3s; transition-duration: .2s; vertical-align: middle;}
.w3-dropdown-click {background: #c7c7c7; width: 10vw;}

/* Kontakt Page */
.contact {text-align: center; display: block; padding: 15px; padding-top: 0px;}
.contactElem {display: inline-block; vertical-align: top; padding: 1vw; font-size: 40px;}
.contactElemHeader {font-family: Khand-Medium; font-weight: bold; color: #ffffff; border-bottom: #d3d2cb 1px solid; margin: 1vh; display: inline;}
.contactElemTextBig {font-family: Khand-Medium; font-weight: bold; padding-bottom: 4px; color: #ffffff; font-size:20px; display: block;}
.contactElemTextSmall {font-family: Khand-Light; font-weight: bold; padding-bottom: 4px; color: #ffffff; font-size:15px; display: block;}

/* Support Pages */
.caseHelp {width: 330px; border-style: solid; border-width: 1px; border-color: #d4d0c8; padding: 4px; background-color: #ffffe1; display: inline-block; vertical-align: top; text-align: left; margin-right: 100px;}
.opencaseContent {background-color: #ffffff; width: 100%; padding: 20px;}
.opencaseFormfield {padding: 4px; padding-left: 5px; font-family: Khand-Medium; font-size: 16px; color: rgb(88, 88, 90)!important; font-weight: normal !important; height: 27px;}
.supportImg {max-width: 100%;}

/* Formular Pages */
.formular-docs-padding {padding: 0.5vh; vertical-align: middle; white-space: nowrap;}
.mytim-sp-table-row-height:nth-child(even) > .formular-docs-padding {background: #F3F3F3}
.mytim-sp-table-row-height:nth-child(odd) > .formular-docs-padding {background: #E4E4E4}

/* Offer Page */
.offer-table {width:100%; background-color:#ffffff; text-align: center; padding: 15px;}
.offer-td {padding: 4px; padding-left: 5px; display: inline-block;}

/* RMA Page */
.rmaContent {background-color: #ffffff; width: 100%; padding: 20px;}
.rmaButton {display: inline-block;}
.rmaFormfield {font-family: Khand-Medium; font-size: 16px; color: rgb(88, 88, 90)!important; font-weight: normal !important; height: 27px; padding: 4px; padding-left: 5px;}
.rmaHelpbox {font-family: Khand-Medium; width: 330px; border: 1px solid #d4d0c8; padding: 4px; background-color: #ffffe1; display: inline-block; vertical-align: top; margin-right: 115px; text-align: left;}

/* Home Page */
.mytim-home-content {vertical-align: middle; text-align: center; margin-left: auto; margin-right: auto; position: relative; top: -70px;}
.mytim-home-title {color: #f2bd34; font-size: 60px; font-family: Khand-Bold;}
.mytim-home-subtitle {color: #ffffff; font-size: 25px; font-family: Khand-Medium;}
.mytim-home-text {color: #ffffff; font-size: 15px; font-family: Khand-Regular;}
.mytim-home-button {min-width: 12vw; position: relative; color: #fff!important; border-radius: 0; padding: 14px 21px 10px; font-size: 18px; line-height: 24px; font-weight: 600; border: 2px solid #fff; background: 0 0; text-transform: uppercase; transition-duration: .2s;}
.mytim-home-button:hover {background: #fbbb00; border: 2px solid #fbbb00;}
.banner-banner {display: flex; justify-content: space-between;}
.banner-dist {margin: 3%;}
.banner-wrap {flex-wrap: wrap;}
.banner-row {width: 100%; text-align: left; padding: 5%; margin-left: 5%;}
.banner-shade {background: rgba(81, 81, 81, 0.5);}
.banner-border {border: 1px solid black;}
.banner-tg-logo {width: 40%;}
.banner-button {border: 1px solid black; border-radius: 3%; background: #f2bd34; color: #585858; font-family: KlinicSlab-Bold; border: 0; padding: 0% 5%; font-size: 80%; text-decoration: none; cursor: pointer;}
.banner-font {font-size: 5vh; font-family: Khand;}

/* Register Page */
.formField {text-align: left; padding: 3px; min-width: 180px;}
.formButton {width:100%; display: inline-block; text-align: center;}
.passOk {width: 20px; height: 20px; background: url("../files/Icons/okay.png") center no-repeat; background-size: 90%; position: static;}
.passEr {width: 20px; height: 20px; background: url("../files/Icons/error.png") center no-repeat; background-size: 90%; position: static;}

/* Shop Page */
.activateFormfield {padding: 4px; padding-left: 5px; margin-left: auto; margin-right: auto;}
/* History Page */
.border-white {border-style: solid; border-width: 2px; border-color: white;}
.row:nth-child(even) {background: #efefef;}
.row:nth-child(odd) {background: #d3d3d3;}

/* ID's */
#navigationDropdownArrow {position: relative; top: -1px; left: 1px;}
#navbarDropdown {top: 100%; min-width: 100%;}

/* FONT */
.mytim-font {font-family: Khand-Medium;}
.mytim-font-dark {font-family: Khand-Medium; font-size: 16px; color: rgb(88, 88, 90)!important; font-weight: normal !important;}
.mytim-font-white {font-family: Khand-Medium; font-size: 16px; color: #ffffff!important; font-weight: normal !important;}

/* Common */
.v-center {vertical-align: middle;}
.a-center {margin-left: auto; margin-right: auto; width: 100%; text-align: center;}
.a-right {text-align: right;}
.a-right {text-align: right;}
.o-hidden {overflow: hidden;}
.hidden {display: none;}
.p-top-default {padding-top: 1.5vh;}
.inline {display: inline-block;}
.animate {transition: 1s;}
.notAllowed {padding:40px; background: white;}
.bold {font-weight: bold;}
.nowrap {white-space: nowrap;}
.inherit {color: inherit; font-family: inherit; font-size: inherit;}
.block {display: block!important; opacity: 1!important;}

/* Footer */
.footer-logo {width: 14vw; display: block;}

/* Content Background outer/inner div*/
.bg-mytim-outer {background-image: url('../styles/normal/tim.technogroup/AnsichtsFenster_bg.jpg'); background-attachment: fixed; background-size: 100% auto; padding-bottom: 50px; background-position: center center;}
.bg-mytim-outer-height{min-height: 87vh;}
.bg-mytim-inner{margin-left: auto; margin-right: auto; width: 95%; padding-top: 93px;}
.bg-mytim-inner a{font-weight:bold;}
.bg-mytim-inner a:hover{text-decoration:none;color:#dba123;}
.bg-mytim-inner a:visited{text-decoration:none;color:#dba123;}
.bg-mytim-inner a:link{text-decoration:none; color:#f2bd34;}

/* MyTim Dashboard Div*/
.mytim-infobox-head{height: 38px;background-color: #F2BD34;color: #FFFFFF;font-family: Khand-Semibold;font-size: 27px;}
.mytim-infobox-head-content{padding-left: 18px;font-family: Khand-Medium; line-height: normal;}
.mytim-white-bg{background-color: #FFFFFF;}
.mytim-infobox-content{padding-left: 18px;padding-top: 5px;padding-bottom: 5px;font-family: Khand-Medium;font-size: 14px;color: #58585A;}
.dashboardPageInput {background: none; color: white; border: none; width: 5%;}
.dashboardBorderBg1 {background:#b3b3b3; border: 1px solid #b3b3b3; vertical-align:top; text-align:right;}

.dashboardTotal {background: #b3b3b3; padding: 4px; min-height: 22px;}

/* MyTim Dashboard devicelist*/
.mytim-devicelist{margin-top: 28px;background-color: #FFFFFF;}
.mytim-devicelist-head-outer{background-color: #a6a6a6; position: relative;}
.mytim-devicelist-head-inner{padding: 2px 2px 2px 18px; color: #FFFFFF !important;font-family: Khand-Medium; display: flex; justify-content: space-between;}
.mytim-devicelist-head-gerateliste{font-family: Khand-Medium;font-size: 27px;color: #FFFFFF;}
.mytim-devicelist-head-font{font-family: Khand-Medium;color: #FFFFFF;font-size: 18px;}
.mytim-devicelist-head-font-dark{font-family: Khand-Medium;color: #58585a;font-size: 18px;}
a.mytim-devicelist-head-font-dark{color: #f0c257;}
.mytim-devicelist-head-font-kundenfeld{color: #f2bd34; font-family: Khand-Medium; font-size: 18px; padding: 0px; padding-right: 4px; padding-top:2px; text-align: right; width: 140px;}
.mytim-devicelist-table-head-white{background-color: #FFFFFF;}
.mytim-devicelist-table-head-gray{background-color: #a6a6a6;}
.mytim-devicelist-table-kundenfeld{background-color: #F2BD34;}
.mytim-devicelist-table-col-hell{background-color: #F3F3F3;}
.mytim-devicelist-table-col-dunkel{background-color: #E4E4E4;}
.mytim-devicelist-table-head-font{color: #FFFFFF;font-family: Khand-Medium;font-size: 16px;}
.mytim-devicelist-table-col {background:#b3b3b3; border: 1px solid #d3d2cb; vertical-align:top; text-align:left; white-space:normal;}
.mytim-devicelist-table-col-font{color: #58585a;font-family: Khand-Medium;font-size: 16px;}
/* Zebratable | selektor vor dem erste komma für die gerätescheine, zweiter für die Supportpacks */
.zebra:nth-child(even) > td:nth-child(n+4), #myTIMSps .zebra:nth-child(even) > td {background: #E4E4E4}
.zebra:nth-child(odd) > td:nth-child(n+4), #myTIMSps .zebra:nth-child(odd) > td {background: #F3F3F3}
/* Indiv Produkte zebra */
.indiv-zebra:nth-child(even) > td {background: #F3F3F3}
.indiv-zebra:nth-child(odd) > td {background: #E4E4E4}

.mytim-devicelist-table-cell {background-color:#b3b3b3; border: 1px solid #b3b3b3; vertical-align: top; text-align: right; white-space: nowrap;}
.mytim-devicelist-table-SPSub {background-color:#b3b3b3; border: 1px solid #d3d2cb; vertical-align: top; text-align: left; white-space: normal; font-weight: bold;}
.dashboardBorderElem {border: 1px solid #d3d2cb;}

/* MyTim Dashboard Legend*/
.mytim-legend{padding-top: 67px;padding-bottom: 81px;display: flex;}
.mytim-legend-text{text-align: left;vertical-align: top;}
.mytim-legend-gray{font-family: Khand-Medium;font-size: 14px;color: #A7A7A7;}
.mytim-legend-white{font-family: Khand-Medium;font-size: 14px;color: #FFFFFF;}

/* MyTim Dashboard Footer*/
.mytim-footer{background-color: #FFFFFF; width: 100%; height: 100px;}
.mytim-footer-copyright, a.mytim-footer-copyright{text-align: center;font-family: Khand-Medium;font-size: 16px;color: #58585a;}
.mytim-footer-copyright{font-weight: bold;}
a.mytim-footer-copyright{font-weight: lighter;}
.mytim-footer-logo{float: right; margin-top: -10px;}
.mytim-footer-logo img{width: 230px; max-width: 30vw;}
.mytim-footer-3row{width: 33%;height:100%;float: left;padding-top: 40px;vertical-align: middle;text-align: center;}/*padding-top: 40px;*/

/* Kontodaten */
.mytim-kontodaten-table{width:100%;background-color: #FFFFFF;}
.mytim-kontodaten-table-head{background-color: #a6a6a6;height: 38px;}
.mytim-kontodaten-table-head-orange{background-color: #F2BD34;height: 38px;}
.mytim-kontodaten-table-head-icon{padding-left: 5px;width: 32px;}
.mytim-kontodaten-table-head-sub{height: 38px;color: #58585a;font-family: Khand-Medium;font-size: 16px;text-align:left;}
.mytim-kontodaten-table-head-sub-content{background-color: #C4C4C4;color: #58585a;font-family: Khand-Medium;font-size: 16px;padding: 5px; font-weight: normal !important;}
.mytim-kontodaten-table-head-content{padding-left: 4px;padding-top: 5px;color: #FFFFFF;font-family: Khand-Medium;font-size: 27px;}

.mytim-kontodaten-table-content-light{background-color: #F3F3F3;}
.mytim-kontodaten-table-content-dark{background-color: #E4E4E4;}
.mytim-kontodaten-table-content-font{color: #58585A;font-family: Khand-Medium;font-size: 16px;}
.mytim-kontodaten-table-content-icon{padding-left: 5px;}

/* Angebotsanfrage */
#angebotsAnfrageTable {padding: .5vw; margin: .5vw; overflow: auto; width: 95%; display: inline-block;}
form[name="angebotsAnfrageTable"] .ceSelect, #excel .ceSelect {display: inline-block; padding: 5px;}
form[name="angebotsAnfrageTable"] .ceSelect table {padding: 5px;}
#AddRowTabelle {margin: 2px; vertical-align: middle; height: 34px; height: calc(100% - 4px);}
.aAContent {width: 100%; background-color:#FFFFFF; padding: 25px; overflow: auto;}
.aAContent span.clickable {color: #f2bd34;}
#angebotsanfrageAdd {width: 35px; height: 10%; background: url("../files/Icons/plus.png") center no-repeat; background-size: 80%; max-width: 85px; display: inline-block;}
.p-top-default {padding-top: 2.5vh;}

/* Support Pack */
.mytim-sp-head{height:38px;}
.mytim-sp-head-orange{background-color: #F2BD34;}
.mytim-sp-head-gray{background-color: #a6a6a6;}
.mytim-sp-head-font{font-size: 27px;}
.mytim-sp-head-lp{padding-left: 5px;}

.mytim-sp-font-white{color: #FFFFFF;}
.mytim-sp-font-gray{color: #58585A;}
.mytim-sp-font{font-family: Khand-Semibold; font-weight: normal !important;}
.mytim-sp-font-size-normal{font-size: 16px;}

.mytim-sp-text-right{text-align: right;}
.mytim-sp-text-center{text-align: center;}
.mytim-sp-text-left{text-align: left;}

.mytim-sp-table-bg{background-color: #FFFFFF;}
.mytim-sp-table-full{width:100%;}
.mytim-sp-table-col-text{width:380px;}
.mytim-sp-table-col-pl{padding-left: 5px;}
.mytim-sp-table-row-bg-dark{background-color: #E4E4E4;}
.mytim-sp-table-row-bg-light{background-color: #F3F3F3;}
.mytim-sp-table-row-head{background-color: #BBBBBB;}
.mytim-sp-table-col-head{vertical-align: middle;white-space: nowrap;text-align: left;padding-left: 5px;}
.mytim-sp-table-row-height{height: 27px;}
.mytim-sp-table-col-cursor{cursor:pointer;color:#F2BD34 !Important;}
.mytim-sp-table-col-cursor:hover{color:#58585A !Important;}

/* My Portal UBS Stuff */
#myPortalHead {position: relative; background: white; height: 100%;}
#secondBar > th {position: relative;}
.mytim-sp-table-row-head > th {background: #BBBBBB;}

#myportal-table-content > tbody:first-child > tr:nth-child(n+3) > td {border-top: 2px solid white;}
#myportal-table-content td, #myportal-table-content th {border: 1px solid white;}
#myportal-table-content tr:nth-child(n+3):nth-child(odd) td {background: #E4E4E4;}
#myportal-table-content tr:nth-child(n+3):nth-child(even) td {background: #F3F3F3;}
#myportal-table-content tr:nth-child(n+2) th {background: #BBBBBB;}

.myportal-white-bg{background-color: #FFFFFF;}

.myportal-actionbar-position{position: fixed; top: 0px; left: 0px; right: 0px;}

.myportal-actionbar-head-position{position:fixed; top: 28px; left: 0px; right: 0px; width: 100%;}

.myportal-head-border{border-color: #aaaaaa; border-style: solid; border-width: 1 0 1 0; vertical-align:middle;}

.foundResult {background: yellow; font-weight: bold;}

.mytim-devicelist-action-ticket-table-row-color:nth-child(even) {background: #F3F3F3}
.mytim-devicelist-action-ticket-table-row-color:nth-child(odd) {background: #E4E4E4}

.truncate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.triangle-bg {float:right; margin-top: 4px; margin-right: 5px; display:inline-block;}
.triangle {width: 0; height: 0; border-style: solid; border-width: 0 7.5px 13.0px 7.5px; border-color: transparent transparent #000000 transparent; margin-top:4px; vertical-align: middle; display: none;}
.triangle-rotate180 {transform: rotate(180deg);}
.tim-accordion-head{margin-top: 4px; display:inline-block;}

/* LOADER */
#loader {position: absolute; left: 0px; top: 20vh; width: 100%; height: 50vh; display: none; z-index: 999999;}
#loaderbg {-webkit-box-shadow: 0px 0px 8px 2px #FFFFFF; box-shadow: 0px 0px 8px 2px #FFFFFF; height: 150px; width: 150px; margin-left: auto; margin-right: auto; vertical-align: middle; background: white; border-radius: 100%; position: relative; top: 40%; border: 1px solid wheat;}
/*preloader*/
.preloader {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); animation: rotatePreloader 2s infinite ease-in;}
@keyframes rotatePreloader {0% {transform: translateX(-50%) translateY(-50%) rotateZ(0deg);} 100% {transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);}}
.preloader div {position: absolute; width: 100%; height: 100%; opacity: 0;}
.preloader div:before {content: ""; position: absolute; left: 50%; top: 0%; width: 20%; height: 10%; background-color: #f2bd34; transform: translateX(-50%); border-radius: 50%;}
/*Single loading points*/
.preloader div:nth-child(1) {transform: rotateZ(0deg); animation: rotateCircle1 2s infinite linear; z-index: 9;}
@keyframes rotateCircle1 {0% {opacity: 0;} 0% {opacity: 1; transform: rotateZ(36deg);} 7% {transform: rotateZ(0deg);} 57% {transform: rotateZ(0deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(2) {transform: rotateZ(36deg); animation: rotateCircle2 2s infinite linear; z-index: 8;}
@keyframes rotateCircle2 {5% {opacity: 0;} 5.0001% {opacity: 1; transform: rotateZ(0deg);} 12% {transform: rotateZ(-36deg);} 62% {transform: rotateZ(-36deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(3) {transform: rotateZ(72deg); animation: rotateCircle3 2s infinite linear; z-index: 7;}
@keyframes rotateCircle3 {10% {opacity: 0;} 10.0002% {opacity: 1; transform: rotateZ(-36deg);} 17% {transform: rotateZ(-72deg);} 67% {transform: rotateZ(-72deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(4) {transform: rotateZ(108deg); animation: rotateCircle4 2s infinite linear; z-index: 6;}
@keyframes rotateCircle4 {15% {opacity: 0;} 15.0003% {opacity: 1; transform: rotateZ(-72deg);} 22% {transform: rotateZ(-108deg);} 72% {transform: rotateZ(-108deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(5) {transform: rotateZ(144deg); animation: rotateCircle5 2s infinite linear; z-index: 5;}
@keyframes rotateCircle5 {20% {opacity: 0;} 20.0004% {opacity: 1; transform: rotateZ(-108deg);} 27% {transform: rotateZ(-144deg);} 77% {transform: rotateZ(-144deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(6) {transform: rotateZ(180deg); animation: rotateCircle6 2s infinite linear; z-index: 4;}
@keyframes rotateCircle6 {25% {opacity: 0;} 25.0005% {opacity: 1; transform: rotateZ(-144deg);} 32% {transform: rotateZ(-180deg);} 82% {transform: rotateZ(-180deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(7) {transform: rotateZ(216deg); animation: rotateCircle7 2s infinite linear; z-index: 3;}
@keyframes rotateCircle7 {30% {opacity: 0;} 30.0006% {opacity: 1; transform: rotateZ(-180deg);} 37% {transform: rotateZ(-216deg);} 87% {transform: rotateZ(-216deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(8) {transform: rotateZ(252deg); animation: rotateCircle8 2s infinite linear; z-index: 2;}
@keyframes rotateCircle8 {35% {opacity: 0;} 35.0007% {opacity: 1; transform: rotateZ(-216deg);} 42% {transform: rotateZ(-252deg);} 92% {transform: rotateZ(-252deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(9) {transform: rotateZ(288deg); animation: rotateCircle9 2s infinite linear; z-index: 1;}
@keyframes rotateCircle9 {40% {opacity: 0;} 40.0008% {opacity: 1; transform: rotateZ(-252deg);} 47% {transform: rotateZ(-288deg);} 97% {transform: rotateZ(-288deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}
.preloader div:nth-child(10) {transform: rotateZ(324deg); animation: rotateCircle10 2s infinite linear; z-index: 0;}
@keyframes rotateCircle10 {45% {opacity: 0;} 45.0009% {opacity: 1; transform: rotateZ(-288deg);} 52% {transform: rotateZ(-324deg);} 102% {transform: rotateZ(-324deg);} 100% {transform: rotateZ(-324deg); opacity: 1;}}

.DialogHilfe {position:absolute; left:0; top:0; width:99%; border-style:solid; border-width:1; border-color:#d4d0c8; padding:4; background-color:#ffffe1;}

.customDialogContent > a {display: inline-block;}

/* Microsoft Edge Browser 12+ (All) - one-liner method */
/* Betrifft die Login Seite, f?r den MS Edge, welcher ohne PX einfach nur rumbockt */
_:-ms-lang(x), _:-webkit-full-screen, input[name="ceBenutzerName"], input[name="cePasswort"], input[name="cePasswortNeu1"], input[name="cePasswortNeu2"] {
    width: 176px; height: 16px; padding: 0px 3px!important; margin: 2px;
}

_:-ms-lang(x) _:-webkit-full-screen #DLGDialog3Resize {width: 421px;}
_:-ms-lang(x), _:-webkit-full-screen, form[name="cePasswortAendern"] center table tbody tr td {margin: 3px;}
_:-ms-lang(x), _:-webkit-full-screen, #PasswortBlock, #LoginBlock {margin: 5px;}
_:-ms-lang(x) _:-webkit-full-screen #LoginBlock tr td {padding: 1px;}

/*Passwort vergessen Dialog*/
.pwForgottDiv {padding: 4px 7px; height: auto;}
.pwForgottDiv div {display: inline-block; float: right; margin-right: 10px; margin-right: 1.5vh;}

/*Password*/
#password-strength {display: block; position: relative; font-size: 0px; top: 2px; width: 93%;}
#passwordstr .box {position: relative; width: 25%; height: 25px; display: inline-block; background-color: #e4e4e4; text-align: center;}
#passwordstr .box div.bar-text {position: absolute; width: 100%; height: 100%; color: #fff; text-align:center; font-size: 13px; z-index: 3; line-height: 25px;}
#passwordstr .box div.bar {position: absolute; width: 0%; height: 100%; z-index: 2; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s;}
#passwordstr .normal .box.box1 div.bar {background: #FF0000; width: 100%;}
.box.box1, #passwordstr .box.box1 div.bar{border-radius : 5px 0px 0px 5px;}
.box.box4, #passwordstr .box.box4 div.bar{border-radius : 0px 5px 5px 0px;}
#passwordstr .normal .box.box1 div.bar-text, #passwordstr .medium .box.box1 div.bar-text, #passwordstr .strong .box.box1 div.bar-text, #passwordstr .vstrong .box.box1 div.bar-text, {color: #fff;}
#passwordstr .schwach .box.box1 div.bar {background: #000; width: 100%;}
#passwordstr .medium .box.box1 div.bar {background: #E66C2C; width: 100%;}
#passwordstr .medium .box.box2 div.bar {background: #E66C2C; width: 100%;}
#passwordstr .strong .box.box1 div.bar {background: #2D98F3; width: 100%;}
#passwordstr .strong .box.box2 div.bar {background: #2D98F3; width: 100%;}
#passwordstr .strong .box.box3 div.bar {background: #2D98F3; width: 100%;}
#passwordstr .vstrong .box.box1 div.bar {background: #006400; width: 100%;}
#passwordstr .vstrong .box.box2 div.bar {background: #006400; width: 100%;}
#passwordstr .vstrong .box.box3 div.bar {background: #006400; width: 100%;}
#passwordstr .vstrong .box.box4 div.bar {background: #006400; width: 100%;}

.callAnzeige {text-align:right; font-weight:bold; white-space: nowrap; padding-left:2px; padding-right:2px;}

/* Paging myTIM Dashboard Credits to: https://codepen.io/robertcooper_rc/pen/XeabLa */
#paging ul {list-style: none; padding: 0; margin: 0; display: flex; height: 90%;}
#paging ul > li {color: white; display: flex;}
#paging ul > li > a {background: #a6a6a6; padding: 10px; border-radius: .2vw; display: flex; justify-content: center; flex-direction: column;}
#paging ul li.active a {background: #007bff;}
#paging > ul > li > a {cursor: pointer;}
#paging > ul > li:first-of-type > a {cursor: default;}
.mytim-devicelist-head-inner > div {display: flex; justify-content: center; flex-direction: column; text-align: center;}
.mytim-devicelist-head-inner > div > div:last-of-type {top: -3px; position: relative;}

.ceStyleFG > div {width: unset;}
/* garned gwösst das so eppis goht: wenn navbar klass block ned het und de burger ghoveret wird, hend die spans im burger trans 1 und bg yellow*/
.navbar:not(.block) + .burger:hover > span {transition: 1s; background: #f2bd34;}
.burger {cursor: pointer; margin-right: 1vw; z-index: 9999;}
.bar1, .bar2, .bar3 {width: 35px; height: 5px; background: rgb(88,88,90); margin: 5px 0; transition: 0.4s; display: block;}
.change .bar1 {-webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px);}
#burgerInfo {margin-top: 3vh; display: block; background: unset;}
.navbar.block + .logo {margin: unset;}
.navbar > .navContains:last-child > div:last-child {right: 1vw;}

/* Ticket-Übersicht */
.custInfo {display: flex; justify-content: space-between;}
.ticket-row, .ticket-head {display: flex; justify-content: space-between; padding: 1%; transition: 0.4s; }
.ticket-row:hover, .ticket-head:hover {background: #f2bd34!important;}
.ticket-head {background: #BBBBBB;}
.ticket-head > div, .ticket-head > div > div {font-weight: bold;}
.ticket-row:nth-child(even) {background: #efefef;}
.ticket-row:nth-child(odd) {background: #d3d3d3;}
.ticket-row > div, .ticket-head > div {white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
.ticket-row > div:first-child, .ticket-head > div:first-child {width: 5vw;}
.ticket-row > div:nth-child(n+2), .ticket-head > div:nth-child(n+2) {width: 23vw;}

/* ============================= */
/*              TPM              */
/* ============================= */
/* TPM */
/* TPM-Dashboard Head */
.mytpm-infobox-head img {width: 24px; height: 24px; margin: 0px 1vw;}
.mytpm-infobox-head img:nth-of-type(2n) {margin-left: auto;}
/* TPM Matrix */
#Dashboard {display: flex; padding: 4vh 10vw; background: white;}
#Dashboard * {transition: 0.4s;}
#Rubrik, #Hersteller, #Category, #Manufacturer {width: 20%;}
#Produkt, #Product {width: 60%;}
#Produkt > div, #Product > div {display: flex;}
#Produkt > div > .head, #Product > div > .head {display: inline-block; width: 100%; white-space: nowrap;}
.matrixCell {text-align: center; width: 100%;}
.matrixCell > .head {background: rgb(88,88,90); font-weight: bold; padding: 0.5vh 1vw; font-size: 1.3em; color: white;}
.matrixCell > .head:hover {color: #f2bd34;}
.matrixCell > div:not(.head):nth-of-type(odd) {background: #F3F3F3;}
.matrixCell > div:not(.head):nth-of-type(even) {background: #E4E4E4;}
.skRow {justify-content: space-evenly; align-items: center;}
.tpmSkill {width: 100%; padding: 0px 1vw; white-space: nowrap; display: inline-block;}
.tpmSkill:last-of-type {width: 32%;}
.tpmSkill:last-of-type  > span {float: right; cursor: normal;}
.tpmSkill > input {border: none; background: none; text-align: center;}
.tpmSkill > button {border: none; background: none; cursor: pointer;}

/* MyTPM Header Div*/
.mytpm-infobox-head, .mytpm-infobox-head div {background-color: #F2BD34; color: white; font-size: 27px; display: flex; align-items: center; padding-left: 15px;}

/* myTPM - Popup / Modal -> https://stackoverflow.com/questions/12289853/notfirst-child-selector */
.w3-modal-content > div:not(:first-child) {padding: 0.5vw!important;}
.tpmHead {font-family: Khand-Medium; line-height: normal; font-size: 1.3em; color: white; background: #f2bd34; display: flex; padding: 5px;}
.closeModalRight {margin-left: auto; color: black; font-weight: 900;}
#Modal > div {text-align: center;}
#Modal > div > div:not(.tmpHead), #Modal > div > div > div {padding: 1vh 1vw;}
#Modal > div > form > div > div, #SearchResult > div:first-of-type {padding: 1vw;}
#Modal, .w3-card-4 {padding-bottom: 15px!important;}
/* Die TPM-Checkbox */
.TPM-Checkbox {padding: 1vh; background: none; margin: 1px; border: 1px solid rgb(88,88,90); max-height: 30px; display: inline-block;}
.TPM-Checkbox-selected {background: green;}
/* myTPM - Legende */
#Legend {padding-top: 20px; font-family: Khand-Medium; line-height: normal; font-size: 1.3em; color: white;}
#Legend > div > div {min-width: 100px; padding-right: 1vw; display: inline-block;}
/* myTPM - Suche */
#SearchResult {border-top: 1px solid rgb(88,88,90); max-height: 25vh; overflow-y: auto;}
.searchCell {padding: 0px 20px; width: 20%; white-space: nowrap; display: inline-block;}

.select, .clicked {background: #f2bd34!important;}

/* Register Page */
.tpmRegister, .tpmWhite {background: white; padding: 15px;}
/* labels (letzten zwei) */
.tpmRegister label:not(:nth-last-child(n+3)) {font-weight: bold; position: relative; left: -1vw;}
/* spans */
.tpmRegister span {margin: auto;}
/* Formular */
.tpmForm {width: 480px; margin-right: auto; margin-left: auto;}
/* alle labels */
.tpmForm > label {display: block; font-weight: bold;}
/* reihen */
.registerRow {padding: 0.5vh 0px; display: flex; justify-content: space-between;}
.registerRow > table {display: inline-flex!important;}
/* Felder */
.formField {text-align: left; padding: 3px; display: inline-block; vertical-align: top;}
/* Button */
.formButton {width:100%; display: inline-block; text-align: center;}
/* Minus->icon -> jExcel */
.minus {background: url(../files/Icons/datensatz-minus.png) center no-repeat; background-size: 40%;}

.home-info {
 width:  300px;
 position: absolute;
 right: 0;
 top: 0;
 border: 1px solid #fff;
 padding: 7px;
 background: #404040;
}

/* MEDIA / AKA Responsive */
@media all and (max-width : 1500px){
    .navbar {position: absolute; opacity: 0; top: 0; left: 0; display: none; width: 100%; background: #f2bd34; z-index: 4000; transition: 0.2s; margin-top: calc(9vh); min-height: 95vh;}
    .burger {display: inline-block!important;}
    .navbarEntry {text-align: center; padding-top: 5vh; display: block; margin: auto 20%;}
    .navbarEntry:hover, .navbar .tg-yellow {color: white;}
    .subMenu {font-size: 2.5vh; display: block; text-align: center; padding: 1vh;}
    .navbar div[id^='SubMenu'] {position: unset!important;}
    .bg-mytim-outer {background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}
    iframe[name="AnsichtsFenster"] {height: 100%!important;}
    .mytim-footer-3row {padding-top: 5vh;}
    .infobar {display: none;}
    #burgerInfo > .infobarEntry {display: inline-block; width: 100%;}
    .w3-dropdown-click {padding: 1vw; width: calc(30px + 20vw + .5%); margin-top: 1vh;}
    #navbarDropdown {top: unset!important; bottom: 100%;}
    #burgerInfo > .infobarEntry:nth-child(2){white-space: pre-wrap;}
    .logo {max-width: 80vw;}
    .navbarEntry, .logout {font-size: 4vh!important;}
    .logout {width: 100%; line-height: unset!important; padding: 1vh!important; padding: 1vh 1vw;}
    .loginEntry {flex-wrap: wrap;}
    .infobarEntry, #burgerInfo > .infobarEntry > a > span {font-size: 3vh; margin-top: 1vh;}
    .FRMMandantText {float: unset; display: flex; justify-content: center;}
    .infobarEntry {margin: unset;}
    div[id^='DLGDialog'] {z-index: 4001!important;}
    .navbar > div > div:last-child {width: 100%;}
    .header {padding: 0px!important;}
}

@media all and (max-width: 600px) {
 .infobarIcon {display: none;}
}

@media (min-width: 1500px) {
 .navbarEntry{margin-bottom: 1vh; font-size: 22px; height: 25px;}
 .subMenu {font-size: 16px; height: 16px;}
 .infobarEntry {font-size: 14px;}
}

#mandantenAnzeigeTable .FRMMandantText a.ceSelect {display: inline-block;}

.logout {padding: 0 .5vw!important;}

#SubMenuMyTIM {right: 0px;}
#AGBsCheckOn a {display: inline-block!important;}

.subMenu.hidden {
 display: none!important;
}