/* styles by Mario Röhreich */
/* styles für TecArt Handbuch*/
/*  ------ globale Eigenschaften ------  */
p:empty { display: none; }
.clear { clear: both; display: block; margin: 0 auto; }
/* -------------------------- Design Labels ------------------------ */
.ta-label { display: inline-block; padding: 0px 7px; border-radius: 3px; line-height: inherit; font-size: 0.8em; }
.ta-label.admin { background-color: #bf2600; color: #ffffff; text-transform: uppercase; }
.ta-label.anwender { background-color: #006da3; color: #ffffff; text-transform: uppercase; }
.ta-label.fachwissen { background-color: #ff991f; color: #ffffff; text-transform: uppercase; }
.ta-label.erweitert { background-color: #00875a; color: #ffffff; text-transform: uppercase; }
.ta-label.abschnitt { background-color: #ebedef; border: 1px solid transparent; border-color: #d7d9db; color: #000000; font-weight: bold; border-radius: 0; }
.ta-label.feld { background-color: #ebedef; color: #333333; }
/* -------------------------- design modules ------------------------- */
.ta-modul { min-width: 54px; height: 54px; display: inline-block; line-height: inherit; background: #3a7fb1; color: #ffffff; padding: 6px 7px; text-align: center; font-size: 0.9em; margin: 0 5px; vertical-align: middle; transition: background-color 0.3s, color 0.3s; }
.ta-modul.standard { background-image: url('../img/ta-logo-80.png'); background-size: 80%; background-repeat: no-repeat; background-position: center; }
.ta-modul.modul1 { background-repeat: no-repeat; background-size: 80%; align-self: center; background-position: center; }
.ta-modul.modul2 { display: inline-flex; align-items: center; justify-content: center; background-color: #013240; padding: 4px; margin: 0 5px; }
.ta-modul:hover { background-color: #005a87; color: #e1e1e1; }
.ta-modul .dropdown.fas.fa-sort-down { font-size: 1.1em; margin-left: 3px; margin-top: 0; margin-bottom: 5px; }
/* ------ Design Buttons ------ */
.ta-button { white-space: nowrap !important; position: relative; display: inline-block; border: 1px solid #d7d9db !important; border-radius: 2px; margin: 0 .25rem; text-align: center; padding: 3px 7px; line-height: 1.66; vertical-align: baseline; cursor: pointer; font-size: 12px; transition: background-color 0.3s, color 0.3s; }
.ta-button.passiv { border-color: #d7d9db; background-color: #fff; color: #666666; }
.ta-button.passiv:hover { border-color: #7ec23a !important; background-color: #f1f8ea; }
.ta-button.aktiv { border-color: #3a7fb1 !important; background-color: #3a7fb1; color: #ffffff; }
.ta-button.aktiv:hover { background-color: #005a87; }
.icon-left { margin-right: 2px; }
.icon-right { margin-left: 2px; }
.ta-icon { color: inherit; }
.fas.fa-caret-left,
.fas.fa-caret-right,
.fas.fa-sort-down { vertical-align: middle; }
.fas.fa-caret-left { margin-right: 3px; }
.fas.fa-sort-down { transform: translateY(-3px); }
/* ------ design box ------ */
.ta_box { margin: 15px 0; padding: 15px; background: #ededed; border-radius: 3px; display: flex; align-items: flex-start; border-radius: 5px; color: #333; border: 1px solid darkred; }
.ta_box .box_icon { display: flex; align-items: center; width: 25px; margin-right: 15px; color: inherit; }
.ta_box .box_content { flex: 1; }
.ta_box h1,
.ta_box h2,
.ta_box h3,
.ta_box h4,
.ta_box h5,
.ta_box h6 { margin-top: 0; margin-bottom: 0.25em; color: #333; }
.ta_box .box_content img { margin-bottom: 15px; }
.ta_box.i { background-color: #EEF0F9; color: #3a7fb1; border: none; }
.ta_box.i h1,
.ta_box.i h2,
.ta_box.i h3,
.ta_box.i h4,
.ta_box.i h5,
.ta_box.i h6 { color: #3a7fb1; }
.ta_box.t { background-color: #edf9ed; color: #045c07; border: none; }
.ta_box.t h1,
.ta_box.t h2,
.ta_box.t h3,
.ta_box.t h4,
.ta_box.t h5,
.ta_box.t h6 { color: #045c07; }
.ta_box.h { background-color: #fef7ed; color: #ba7311; border: none; }
.ta_box.h h1,
.ta_box.h h2,
.ta_box.h h3,
.ta_box.h h4,
.ta_box.h h5,
.ta_box.h h6 { color: #ba7311; }
.ta_box.v { background-color: #fbf3f3; color: #b83030; border: none; }
.ta_box.v h1,
.ta_box.v h2,
.ta_box.v h3,
.ta_box.v h4,
.ta_box.v h5,
.ta_box.v h6 { color: #b83030; }
/* ------ design registerkarten ------ */
.ta-registerkarte { white-space: nowrap !important; position: relative; display: inline-block; border: 1px solid #d7d9db; border-top-left-radius: 6px; border-top-right-radius: 6px; margin: 0 .25rem; text-align: center; padding: 2px 10px; line-height: 1.66; vertical-align: middle; cursor: pointer; font-size: 12px; transition: background-color 0.3s, color 0.3s; height: 26px; }
.ta-registerkarte.icon-only i { margin: 0; }
.ta-registerkarte.aktiv { background-color: #2b648d; color: #fff; border-color: #2b648d; }
.ta-registerkarte.passiv { background-color: #fff; color: #242728; border-color: #d7d9db; }
.ta-registerkarte.passiv:hover { border-color: #7ec23a; background-color: #f1f8ea; }
/* ------- Icons --------- */
.ta-registerkarte i { margin-left: 0.5rem; font-size: 1.2em; line-height: 22px; }
.ta-registerkarte i.no-margin { margin-left: 0; }
.ta-registerkarte:empty::before { content: '\00a0'; }
/* ------ design shortcut ------ */
.ta-shortcut { display: inline-block; background-color: #f1f1f1; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 0px 8px; font-family: monospace; font-size: 12px; text-align: center; line-height: 1.66; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); margin: 0 0.2rem; }
/* ------ Design für Pfadangaben ------ */
.pfad-wrapper { display: inline-block; width: 100%; }
.pfad { display: inline-flex; flex-wrap: nowrap; font-size: 14px; color: #007bff; margin: 10px 0; }
.pfad .pfad-icon { margin-right: 5px; font-size: 12px; color: #007bff; line-height: inherit; }
.pfad .pfad-content { margin-right: 5px; color: #007bff; }
.pfad .pfad-separator { margin: 0 5px; color: #007bff; }
.pfad .pfad-item { color: #007bff; white-space: nowrap; }
.pfad-wrapper { text-align: left; width: 100%; overflow: hidden; white-space: nowrap; }
.pfad-wrapper .pfad { white-space: nowrap; }
.pfad-wrapper .pfad-separator,
.pfad-wrapper .pfad-item { white-space: normal; }
/* ------ Design Programm-Icons ------ */
.programm1 .program-icon i { font-size: 18px; }
/* ------ Design Programm-Typ 2 ------ */
.programm2 { display: inline-flex; align-items: center; border: 2px solid; border-radius: 5px; background-color: #fff; padding: 0px 8px; font-size: 12px; font-family: Arial, sans-serif; box-sizing: border-box; white-space: nowrap; }
.programm2 .program-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-right: 8px; }
.programm2 i { font-size: 14px; }
.programm2 .program-text { font-size: 14px; padding-left: 5px; }
/* ------ Design Aufzählung ------ */
.aufzaehlung-container { display: flex; align-items: center; width: 100%; height: 54px; margin: 1.0em 0; }
.aufzaehlung-kreis-wrapper { display: flex; align-items: center; }
.aufzaehlung-kreis { width: 54px; height: 54px; border: 1px solid #3a7fb1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.2em; }
.aufzaehlung-art1 .aufzaehlung-kreis-wrapper { padding-left: 15px; font-size: 0.9em; }
.aufzaehlung-art2 .aufzaehlung-kreis-wrapper { padding-left: 30px; font-size: 0.7em; }