/* ==========================================================================
   # BOF maepim.css
   --------------------------------------------------------------------------
   # StyleSheet: maepim.css - PIM4travel css
   # Datum: 2021-03-16
   # Version: 1.0.0
   # Autor: Patrick Dietze | MAE Systems GmbH
   ========================================================================== */



/* Definitionen
   ========================================================================== */

/* Colors
   --------------------------------------------------------------------------
   # P #3a4d60  rgb(58, 77, 96)     hsl(210, 25%, 30%)  hwb(210, 23%, 62%)  cmyk(40%, 20%, 0%, 62%)
   # I #007b86  rgb(0, 123, 134)    hsl(185, 100%, 26%) hwb(185, 0%, 47%)   cmyk(100%, 8%, 0%, 47%)
   # M #00679b  rgb(0, 103, 155)    hsl(200, 100%, 30%) hwb(200, 0%, 39%)   cmyk(100%, 34%, 0%, 39%)
   # 4 #b3b3b3  rgb(179, 179, 179)  hsl(0, 0%, 70%)     hwb(0, 70%, 30%)    cmyk(0%, 0%, 0%, 30%)
   
   #   #f5f7ff  rgb(245, 247, 255)  hsl(228, 100%, 98%) hwb(228, 96%, 0%)   cmyk(4%, 3%, 0%, 0%)
   
   
   -------------------------------------------------------------------------- */


/* Grundeinstellungen
   ========================================================================== */


/* Scrollbar-Design
   -------------------------------------------------------------------------- */

/* width */
::-webkit-scrollbar {
    height: 8px; /* horizontale Scrollbar */
    width: 8px; /* vertikale Scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
    box-shadow: inset 0 0 4px #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}







::placeholder {
    color: #ccc;
}



*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color: black;
    font-family: Arial, Verdana, sans-serif;
    font-size: 16px;
    height: 100%;
    overflow: hidden;

    overflow-wrap: break-word;

}

body {
    height: 100%;
    overflow: hidden;
}

.pim {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}




h1 {
    color: #3a4d60;
}


h2 {
    color: #007b86;
}


form {
    margin: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.label {
    display:inline-block;
    font-size: 0.875rem;
    margin: 0.25rem 0;
}

.label-bold {
    font-weight: bold;
}

.input,
.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    color: inherit;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    outline: 0;
    width: 100%;
}


.input {
    background-clip: padding-box;
    padding: .25rem 0.5rem;
}

.select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233a4d60' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 0.75em;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
}

.select.select-special {
    background: none;
    padding: 0;
    overflow: auto;
    border: none;
    height: 8rem; /* je Eintrag 2rem */
}

.select.select-special:focus {
    border: none;
}

.select-special option {
    padding: 0.25rem 0.5rem;
    text-align: center;
    border-radius: 0.25rem;
    border: 1px solid #3a4d60;
    margin-bottom: 0.25rem;
    color: #3a4d60;
}

.select-special option[disabled] {
    color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}
.select-special option:hover {
    background-color: #3a4d60;
    color: #fff;
}

.select-small {
    font-size: 0.875rem;
}
.select-programm-auswahl {
    width: 15rem; 
}

textarea {
    resize: vertical;
}


.readonly {
    color: #ccc;
}

.disabled {
    color: #888;
}

input[disabled],
select[disabled],
textarea[disabled]{
    cursor: not-allowed;
}



.button {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.25rem 0.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
}

.input:focus,
.select:focus {
    border: 1px solid #aaa;
}


.button .icon-svg:first-child:not(:last-child) {
    margin-right: .5em;
}

.button .icon-svg:last-child:not(:first-child) {
    margin-left: .5em;
}

.button-icon {
    margin: 0.25rem;
    padding: 0.25rem;
}

td .button-icon {
    margin: 0 0 0 0.25rem;
    padding: 0;
}

td.table-sorting .button-icon {
    margin: 0.25rem;
}

.sidebar-form-config-container .button-icon {
    margin: 0 0 0 0.25rem;
    padding: 0;
}

.button-stretch {
    width: 100%;
}

.button-center span {
    margin: auto;
}

.button-double {
    align-items: center;
    text-align: left;
}
.button-double .text {
    font-size: 0.875em;
    margin-right: 0.5em;
}

.button-primary {
    background-color: #3a4d60;
    border-color: #3a4d60;
    color: #fff;
}

.button-primary:hover {
    background-color: #fff;
    border-color: #3a4d60;
    color: #3a4d60;
}

.button-secondary {
    background-color: #007b86;
    border-color: #007b86;
    color: #fff;
}

.button-secondary:hover {
    background-color: #fff;
    border-color: #007b86;
    color: #007b86;
}


.button-outline-primary {
    border-color: #3a4d60;
    color: #3a4d60;
}

.button-outline-primary:hover {
    background-color: #3a4d60;
    border-color: #3a4d60;
    color: #fff;
}

.button-outline-secondary {
    background-color: #fff;
    border-color: #007b86;
    color: #007b86;
}

.button-outline-secondary:hover {
    background-color: #007b86;
    border-color: #007b86;
    color: #fff;
}

.button-variant01 {
    border-color: transparent;
    color: #3a4d60;
}

.button-variant01:hover {
    border-color: #3a4d60;
}

.button-variant02 {
    border-color: transparent;
    color: #00679b;
}

.button-variant02:hover {
    border-color: transparent;
    color: #007b86;
}


.button[disabled],
.button-disabled,
.button:hover[disabled],
.button-disabled:hover {
    background-color: #fff;
    color: inherit;
    cursor: not-allowed;
    opacity: 0.5;
}


.button-fixed-width {
    justify-content: center;
    width: 200px;
}



.button-input {
    background-color: #fff;
    border-color: #eee;

}

.button-input:hover {
    background-color: #3a4d60;
    border-color: #3a4d60;
    color: #fff;
}

.tag {
    align-items: center;
    background-color: #f5f5f5;
    border-radius: .375em;
    color: #4a4a4a;
    display: inline-flex;
    font-size: .75rem;
    height: 2em;
    justify-content: center;
    line-height: 1.5;
    padding-left: .75em;
    padding-right: .75em;
    white-space: nowrap;
}

.tag-bordered {
    border: 1px solid #ccc;
}

.tag-counter {
    background-color: #007b86;
    color: #fff;
    font-size: 1rem;
    width: 5rem;
}


.page-counter {
  font-weight: normal;
  font-size: 0.75rem;
  padding: 0.25rem 0;
}


.counter-label {
    font-weight: bold;
    margin-right: 1rem;
}


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

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

.no-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ul.unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.flex-list {
    display: flex;
    flex-wrap: wrap;
}
ul.flex-list li {
    margin-right: 0.5rem;
}
ul.flex-list li:not(:last-child):after {
    content: '|';
    margin-left: 0.5rem;
}

.icon-svg {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    height: 1.5em;
    width: 1.5em;
}


.icon-svg svg {
    fill: currentColor;
    height: 100%;
    width: 100%;
}

.font-marck {
    font-family: 'Marck Script';
}


.icon-svg.icon-size-big{
    height: 1.2em;
    width: 1.2em;
}

.icon-svg.icon-size-normal {
    height: 1em;
    width: 1em;
}
.icon-svg.icon-size-small {
    height: 0.875em;
    width: 0.875em;
}



/* # HEADER
   ========================================================================== */
/* - derzeit nicht im Einsatz
.pim-header {
  border-bottom: 1px solid #eee;
  height: 45px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
*/


/* # NAV
   ========================================================================== */

.pim-nav {
    border-right: 1px solid #eee;
    /* bottom: 45px; // wenn Footer */
    bottom: 0;
    left: 0;
    max-width: 100%;
    position: absolute;
    /* top: 45px; // wenn Header */
    top: 0;
    transition: width linear 0.1s;
    width: 64px;
    z-index: 1000;
}

.pim-navbar-expanded .pim-nav {
    width: 280px;
}

.pim-navbar-toggle {
    border-radius: 0.25rem 0 0 0.25rem;
    left: 100%;
    margin: 0;
    outline: none;
    padding: 0;
    position: absolute;
    top: 0;
    transform: rotate(180deg);
    z-index: 10;
}

.pim-navbar-expanded .pim-navbar-toggle {
    border-radius: 0 0.25rem 0.25rem 0;
    transform: none;
}

.pim-nav-logo {
    border-bottom: 1px solid #ccc;
    display: flex;
    height: 100px;
    padding: 0.5rem 0;
    position: relative;
}

.pim-nav-logo a {
    display: flex;
    flex: 1 1 auto;
}

.pim-logo {
    display: block;
    height: auto;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

.pim-navbar-expanded .pim-logo {
    transform: none;
}

.pim-nav-container {
    display: flex;
    flex-direction: column;
    /* 100% minus Höhe Logo minus Höhe Footer */
    height: calc(100% - 148px);
}



.pim-nav-menu {
    border-bottom: 2px solid #ccc;
    min-height: 10rem;
    /*max-height: 75%;*/
    overflow: auto;
}

.pim-nav-menu a {
    align-items: center;
    background-color: #f5f7ff;
    border-bottom: 1px solid #ccc;
    color: #3a4d60;
    display: flex;
    justify-content: flex-start;
    padding: 0.5rem;
    position: relative;
    text-decoration: none;
}

.menu-icon {
    height: 2em;
    margin: 0 auto;
    min-width: 2rem;
    width: 2em;
}

.pim-navbar-expanded .menu-icon {
    margin: 0;
}

.menu-name {
    display: none;
}

.pim-navbar-expanded .menu-name {
    display: inline-block;
    margin-left: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pim-nav-menu a:hover,
.pim-nav-menu a.active {
    background: #007b86;
    color: #fff;
}


.has-submenu > ul {
    display: none;
}

.has-submenu ul a {
    background-color: #fff;
    font-size: 0.875rem;
    padding: 0.125rem 0.5rem;
}
.has-submenu ul a:hover,
.has-submenu ul a.active {
    background-color: rgba(0, 123, 134, 0.8);
    color: #fff;
}

.has-submenu ul .menu-icon {
    font-size: 0.75rem;
}


.has-submenu.opened > ul {
    display: block;
}

.pim-navbar-expanded .has-submenu > a:after {
    content: '\203A';
    margin-left: 5px;
    position: absolute;
    right: 1rem;
    transform: rotate(90deg);
}
.pim-navbar-expanded .has-submenu.opened > a:after {
    transform: rotate(-90deg);
}
.pim-navbar-expanded .has-submenu .menu-name {
    margin-right: 1rem;
}



.pim-nav-records-opened {
    border: none;
    display: block;
    min-height: 2.5rem;
    min-width: 100%;
    overflow-x: hidden;
    overflow-y:auto;
}

.pim-nav-records-opened a {
    align-items: center;
    border-bottom: 1px solid #ccc;
    color: #3a4d60;
    display: flex;
    font-size: 0.75rem;
    justify-content: flex-start;
    padding: 0.5rem 0.25rem;
    text-decoration: none;
}

.pim-navbar-expanded .pim-nav-records-opened a {
    padding: 0.5rem 0.5rem;
}

.edit-icon {
    display: none;
    margin: 0;
}

.close-icon {
    display: none;
    margin: 0;
}

.pim-navbar-expanded .edit-icon {
    display: inline-flex;
}

.pim-navbar-expanded .close-icon {
    display: inline-flex;
    color: #b3b3b3;
    margin-left: auto;
}

.pim-navbar-expanded .close-icon:hover {
    color: #000;
    z-index: 10;
}

.record-code,
.record-name {
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-code {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1.5em;
}

.record-name {
    display: none;
}


.pim-navbar-expanded .record-code {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.pim-navbar-expanded .record-name {
    display: inline-block;
    margin-right: 0.5rem;
}

.pim-nav-records-opened a:hover,
.pim-nav-records-opened a.active {
    background: #007b86;
    color: #fff;
}
.pim-nav-records-opened a:hover {
    opacity: 0.5;
}



.pim-nav-footer {
    align-items: center;
    background-color: #00679b;
    bottom: 0;
    color: #fff;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    left: 0;
    letter-spacing: 0.125rem;
    line-height: 1;
    padding: 0.5rem;
    position: absolute;
    right: 0;
}

.pim-nav-footer > a {
    align-items: center;
    color: #fff;
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    overflow: hidden;
    text-decoration: none;
}

.login-name {
    display: none;
}

.pim-navbar-expanded .login-name {
    display: inline-block;
    flex: 1 1 auto;
    margin-right: 1rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-icon {
    height: 2em;
    margin: 0 auto;
    width: 2em;
}



.pim-user-settings {
    display: none;
}

.pim-user-settings.opened {
    background-color: #f5f7ff;
    border: 1px solid #3a4d60;
    border-radius: 0.25rem 0.25rem 0.25rem 0;
    bottom: 100%;
    display: flex;
    left: 75%;
    max-width: 300px;
    padding: 0.5rem;
    letter-spacing: normal;
    position: absolute;
    font-weight: normal;
    font-family: Arial, Verdana, sans-serif;
}

.pim-user-settings a {
    align-items: center;
    color: #3a4d60;
    display: flex;
    justify-content: space-between;
    padding: 0.25rem;
    text-decoration: none;
}

.pim-user-settings a:hover {
    background-color: #007b86;
    color: #fff;
    opacity: 0.5;
}

.setting-name {
    margin-right: 0.5rem;
    white-space: nowrap;
}



/* # MAIN
   ========================================================================== */

.pim-main {
    /* bottom: 45px; // wenn Footer */
    bottom: 0;
    left: 64px;
    overflow: auto;
    position: absolute;
    right: 0;
    /* top: 45px; // wenn Header */
    top: 0;
    transition: left linear 0.1s;
}

.pim-navbar-expanded .pim-main {
    left: 280px;
}

.pim-sidebar {
    background-color: #f5f7ff;
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    transition: width linear 0.1s;
    width: 0;
}

.pim-sidebar-expanded .pim-sidebar {
    border-right: 1px solid #eee;
    width: 281px; /* 1px mehr, da border-right */
}

.pim-sidebar-toggle {
    border-radius: 0.25rem 0 0 0.25rem;
    left: 100%;
    margin: 0;
    margin-left: 1.6rem;
    outline: none;
    padding: 0;
    position: absolute;
    top: 0;
    transform: rotate(180deg);
    z-index: 10;
}

.pim-sidebar-expanded .pim-sidebar-toggle {
    border-radius: 0 0.25rem 0.25rem 0;
    margin-left: 0;
    transform: none;
}




.pim-sidebar-inner {
    border: none;
    display: block;
    height: 100vh;
    min-width: 100%;
    overflow-x: hidden;
    overflow-y:auto;
    /* width: 1px; */
}



.header-sidebar {
    align-items: center;
    color: #3a4d60;
    display: flex;
    font-size: 1.25rem;
    justify-content: center;
    margin: 1rem 0;
    text-align: center;
}



.header-text {
    margin-left: 1rem;
}

.search-form,
.sidebar-form {
    margin: 1rem;
}

.form-row {
    margin-bottom: 1rem;
}

.form-row:last-child {
    margin-bottom: 0;
}


.pim-content {
    background-color: #fff;
    bottom: 0;
    display: block;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: left linear 0.1s;
}

.pim-sidebar-expanded [style*="block"].pim-sidebar + .pim-content {
    left: 281px; /* Breite der Sidebar */
}





.pim-content-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 2rem 0.5rem;
    min-height: 75px;
    overflow: auto;
}

.pim-content-top-left {
    overflow: hidden;
}
.pim-content-top-right {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.pim-content-top-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 2rem;
    min-height: 90px;
    overflow: auto;
}

.pim-content-inner {
    border: none;
    display: flex;
    flex-direction: column;
    /* Höhe: 100% - Höhe pim-content-top (75px) */
    height: auto;
    max-height: calc(100vh - 75px);
    min-height: 400px;
    min-width: 100%;
    /* overflow-x: hidden; */
    overflow-x: auto;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    /* width: 1px; */
}

.pim-content-top-nav + .pim-content-inner {
    /* max-height: calc(100vh - 165px); */
    height: calc(100vh - 165px);
    padding-top: 0;
}






/* # FOOTER
   ========================================================================== */
/* - derzeit nicht im Einsatz
.pim-footer {
  border-top: 1px solid #eee;
  bottom: 0;
  height: 45px;
  left: 0;
  position: absolute;
  right: 0;
}
*/











/* # TEMP
   ========================================================================== */

.pim-pw-change .notiz {
    font-size: 0.875rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
}

.pim-pw-change .label {
    width: 200px;
}


.start {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}
.box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
.box-inner {
    border: 1px solid #aaa;
    flex: 1 1 auto;
    margin: 1rem;
    overflow: auto;
    padding: 1rem;
}

.box-inner h2 {
    margin-bottom: 1rem;
    margin-top: 0;
}

.form-row-start {
    align-items: center;
    display: flex;
    justify-content: center;
}

.form-row-start h2 {
    margin-bottom: 0;
    margin-right: 1rem;
}
.form-row-start label {
    display: none;
}

.form-row-start .form-field {
    width: 20rem;
    margin-right: 1rem;
}

.form-row-start .form-search-button {

}

.pim-content-top h1 {
    margin: 0;
}


.col-100 {
    width: 100%;
}
.col-50 {
    width: 50%;
}


/* Tabelle */

.pim-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.pim-table tbody tr:hover {
    background-color: #fafafa;
}

.pim-table tbody tr.table-toggle-row:hover {
    background-color: inherit;
}

/*
.pim-table tbody tr:last-child td {
  border-bottom-width: 0;
}*/

.pim-table tbody tr.odd {
    background-color: #f5f5f5;
}

.pim-table tbody tr.odd.table-toggle-row:hover {
    background-color: #f5f5f5;
}

.pim-table th,
.pim-table td {
    border-bottom: 1px solid #eee;
    padding: 0.5em;
    text-align: left;
}

.pim-table th.align-center,
.pim-table td.align-center {
    text-align: center;
}

.pim-table th {
    border-bottom-width: 2px;
    /* border-top: 2px solid #eee; */
    vertical-align: top;
}

.pim-table th.aktion,
.pim-table td.aktion {
    text-align: right;
    white-space: nowrap;
}


.table-header {
    font-weight: bold;
    color: #00679b;
}

.table-prog-header {
    min-width: 16rem;
}


.programm-table tr.p4tf-reiseprogramme-content:first-child button.button-up {
  display: none;
}



/* Sort-by */
th a.sort-by {
    cursor: pointer;
    padding-right: 1rem;
    position: relative;
    white-space: nowrap;
}
a.sort-by:before,
a.sort-by:after {
    border: 4px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    right: 4px;
    top: 50%;
    width: 0;
}
a.sort-by:before {
    border-bottom-color: rgba(0, 123, 134, 0.5);
    margin-top: -9px;
}
a.sort-by:after {
    border-top-color: rgba(0, 123, 134, 0.5);
    margin-top: 1px;
}

a.sort-by.sort-asc:before {
    border-bottom-color: #007b86;
}
a.sort-by.sort-desc:after {
    border-top-color: #007b86;
}


.tr-lnk {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.tr-lnk:hover {
    text-decoration: underline;
}


.tr-doppelseite {
    color: #ccc;
}

.pim-table-small {
    font-size: 0.75rem;
}



/* table-rbc */

.table-rbc .col-nr {
    width: 3rem;
}
.table-rbc .col-anf {
    width: 3rem;
}
.table-rbc .col-code {
    width: 12rem;
}
.table-rbc .col-date {
    width: 15rem;
}

.table-rbc .col-za,
.table-rbc .col-va,
.table-rbc .col-pg,
.table-rbc .col-belegung,
.table-rbc .col-nb {
    width: 8rem;
}


/* # LOGIN */

.pim-login-logo {
    margin: auto;
    max-height:50vh;
    max-width :50vh;
    position: relative;
}

.pim-login-form {
    margin: auto;
    max-width: 100%;
    min-height: 40vh;
}

.pim-login-form h1 {
    margin-bottom: 0;
}

.pim-login-box {
    border: 1px solid #007b86;
    max-width: 100%;
    padding: 1rem;
    width: 360px;
}

.forgot-password {
    color: #3a4d60;
    text-decoration: none;
}
.forgot-password:hover {
    text-decoration: underline;
}

/* flashmessages */

ul.flashmessages {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}

.pim-message li {
    margin: 0.5rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border: 1px solid #888;
    color: #888;
    background-color: #eee;
    border-radius: 2px;
    /*cursor: pointer;*/
}

.pim-message li.pim-message-error {
    margin: 0.5rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border: 1px solid #888;
    color: #888;
    background-color: #eee;
    border-radius: 2px;
    cursor: pointer;
}

.pim-message li.pim-message-error:after {
    content: '+';
    position: absolute;
    right: 1rem;
    transform: rotate(45deg);

    display: inline-block;
    background: rgba(255,255,255,0.3);
    width: 1rem;
    height: 1rem;
    text-align: center;
    border-radius: 1rem;

}
.pim-message li:hover:after {
    font-weight: bold;
}

.pim-message li.pim-message-ok {
    color: #3b7826;
    background-color: #cdeaca;
    border-color: #58b548;
}
.pim-message li.pim-message-error {
    color: #aa0225;
    background-color: #f6d3cf;
    border-color: #d66c68;
}



/* status */

.status01 {
    color: #007b86;
}
.status02 {
    color: #b3b3b3;
}
.status03 {
    color: blue;
}
.status04 {
    color: greenyellow;
}

.inaktiv {
    color: #b3b3b3;
}

.danger {
    color: #aa0225;
}



.pim-filter-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.pim-filter-list li {
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
}
.pim-filter-list li .tag {
    background-color: #fff;

}
.pim-filter-list li:hover .tag {
    background-color: #f5f5f5;
    border-color: #3a4d60;
}

.pim-filter-list li .tag .button-icon {
    font-size: 0.75em;
    margin: 0 -0.375rem 0 0;
    outline: none;
}

.filter-label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}



.content-header span {
    font-size: 0.75em;
}
.content-header span.pim-code-prefix {
    font-size: inherit;
}






.pim-tab-nav ul {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
}

.pim-tab-nav li + li {
    margin-left: -1px;
}

.pim-tab-nav-level-01 li {
    flex: 0 1 300px;
}


.pim-tab-nav li a {
    border: 1px solid #ccc;
    color: #3a4d60;
    display: block;
    padding: 0.5rem 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}


.has-sub-nav .sub-nav {
    display: none;
}

.has-sub-nav a.active + ul.sub-nav {
    display: flex;
}

ul.sub-nav {
    position: absolute;
    left: 2rem;

    margin-top: 0.5rem;
    max-width: calc(100% - 4rem);
}


.pim-tab-nav-level-02 li a {
    padding: 0.25rem 1rem;
}

.pim-tab-nav-level-01 li a.active,
.pim-tab-nav-level-01 a.active:hover{
    background-color: #00679b;
    border-color: #00679b;
    color: #fff;
}

.pim-tab-nav-level-02 li a.active,
.pim-tab-nav-level-02 li a.active:hover{
    background-color: #007b86;
    border-color: #007b86;
    color: #fff;
}



.pim-tab-nav li a:hover {
    background-color: #f5f5f5;
    border-color: #3a4d60;
    color: #3a4d60;
    z-index: 2;
}

.pim-tab-nav li:first-child > a {
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.pim-tab-nav li:last-child > a {
    border-bottom-right-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}





.form-section {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem -1rem;
}

.modal-inner .form-section {
  margin: 1rem 0;
}

.form-section-preview {
    margin-top: 0;
}

div.margin-bottom-large {
    margin-bottom: 3rem;
}

div.margin-bottom-small {
    margin-bottom: 1rem;
}


.form-set {
    flex: 1 1 auto;
    min-width: 30rem; /* 30rem = 480px bei 16px Basis */
    padding: 1rem 1rem 0;
    width: 50%;
}

.form-set.form-set-33 {
    width: 33.3333%;
    min-width: 20rem;
}


.form-flexible .form-set {
    min-width: auto;
    width: auto;
}


.form-section h3 {
    border-bottom: 1px solid #ccc;
    margin: 0 0 0.5rem 0;
}

.form-section .form-row {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}

.form-section .form-row.align-top {
    align-items: flex-start;
}

.form-section .form-row .label {
    margin-right: 0.5rem;
    min-width: 120px;
    /* width: 120px; */
    align-self: flex-start;
}

.form-section .form-row .form-field {
    flex: 1 1 auto;
    text-align: left;
}


.form-section .form-row.form-row-space-b {
    justify-content: space-between;
}

.form-field-buttons {
    display: flex;
    justify-content: space-between;
}

.form-edit-button {
    position: relative;
    align-self: flex-start;
}

.form-edit-button .button-icon {
    margin: 0 0 0 0.5rem;
}

.form-set-special {
    padding-bottom: 0;
    width: 100%;
}
.form-set-special ~ .form-set {
    padding-bottom: 0;
    padding-top: 0;
}

.form-multiselection .form-set {
    min-width: 0;
}

.form-multiselection {}


.form-alt-selection {
    position: absolute;


    /* bottom: 2rem;*/ /* left: -6rem; */
    right: 2rem;  /* top: -5rem; */

    top: 1rem;

    background-color: #f5f7ff;
    border: 1px solid #3a4d60;
    border-radius: 0.25rem;

    padding: 1rem;
    width: 12rem;
    margin-right: 3px;
    margin-bottom: 3px;
    z-index: 100;
}

.form-alt-selection h3 {
    margin: 0;
    font-size: 1rem;
    text-align: center;
    border: none;
    margin-bottom: 0.75rem;
    color: #3a4d60;
}


.button-box-vertical {
    max-width: 42px;
}
.button-box-vertical .button-icon {
    margin-bottom: 0.25rem;
}
.multiselect-left,
.multiselect-right {
    height: 100%;
}
.form-field-left {
    height: 190px;
}
.form-field-right {
    height: 190px;
    display: flex;
    flex-direction: column;
}


.form-multiselection-small .form-field-left,
.form-multiselection-small .form-field-right {
    /* height: 110px; */
    height: 7rem;
}

.form-multiselection-medium .form-field-left,
.form-multiselection-medium .form-field-right {
    /* height: 150px; */
    /* height: 9.5rem; */
    height: 12rem;
}

.multiselect-right option[disabled] {
    color: #eee;
    display: none;
}


.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/* nur im bildform genutzt, eher nicht nötig?!? */
.select2-special {
    /* min-height: 300px; */
}



.loading {
    position: fixed;
    width: 100vw;
    height: 100vh;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    /*background-color: rgba(179, 179, 179, 0.5);*/
    font-size: 1.5rem;
    font-weight: bold;
}

.show-template {
    height: 100vh;
    width: 100%;
}

.show-template-iframe {
    height: 100%;
    width: 100%;

}

.single-select-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 165px;
    background-color: #fff;
    padding: 0.5em;
    font-size: 0.875em;
}

.single-select-text.single-select-text2 {
    width: 140px;
}

.sidebar-form-config-container .form-field {
    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;

}
.ppsp-item {
    margin-bottom: 0.5rem;
}

.ppsp-reisebilder {
    margin-bottom: 1rem;
}


.position-fields {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.position-fields .label {
    width: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-position {
    width: 4rem;
    font-size: 0.875rem;
    margin-left: 0.25rem;
    text-align: right;
}

input[type="range"].input-position {
    width: 9rem;
}

.select-position {
    width: 165px;
    font-size: 0.875rem;
    margin-top: 0.25rem;

}
.select-selection {
    width: 9rem;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.bt-titel{
    width: 100%;
    margin-top:0.25rem;
    font-size: 0.75rem;
}

.input-position[readonly] {
    color: #ccc;
}

.stoerer-zeile {
    margin-top: 0.25rem;
    width: 100%;
}

.input-stoerer {
    font-size: 0.875rem;
}


.download-container {
    margin: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #ccc;
}

.sidebar-download {
    font-size: 0.875rem;
    margin: 0.5rem 0;
}


.hidden {
  display: none;
}

.sidebar-hint {
  font-size: 0.75rem;
  border: 1px solid rgb(255, 0, 0);
  border-radius: 0.25rem;
  background-color: rgba(255, 0, 0, 0.5);
  color: #fff;
  padding: 0.5rem;
  margin: 0.5rem 0;
  transition: transform 0.4s;
}
.sidebar-form-config-container:hover .sidebar-hint {
  transform: scale(1.05);
}

/* ==========================================================================
   # EOF maepim.css
   ========================================================================== */


.modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    z-index: 1500;
}
.modal-bg {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
}
.modal-container {
    background-color: #fff;
    border-radius: 0.25rem;
    max-height: 98vh;
    position: relative;
    padding: 2rem;
    max-width: 98%;
    min-width: 40vw;
}
.modal-inner {
    max-height: calc(98vh - 4rem);
    overflow: auto;
}
.modal-cross {
    position: absolute;
    right: 0;
    top: 0;
    outline: none;
    appearance: none;
    color: red;
    background: none;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
    padding: 0.25rem;
}


.modal .pim-modal-add-filter {
    flex: 0 1 auto;
    width: 300px;
}

.model .pim-modal-add-list {
    flex: 1 1 auto;
    max-width: calc(100% - 300px);
}

.modal-info {
    text-align: center;
    margin-top: 4rem;
}


/* bilder */
.subsection {
    margin:1rem 0;
}

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

.flex-item {
    flex: 1 1 auto;
    margin-bottom: 1rem;
}

.medium-details-bottom .flex-item {
    max-width: 50%;
    min-width: 360px;
}


.medium-container {
    margin-bottom: 1rem;
    /*  flex-wrap: wrap; */
    justify-content: stretch;
}

.medium-list {
    flex: 0 1 220px;
    margin-right: 2rem;
}

.medium-image,
.medium-document {
    flex: 0 1 auto;
    margin-right: 2rem;
    min-width: 300px;
    background-color: #fafafa;
    width: 640px;
    height: 360px;
    max-width: 100%;
    position: relative;
    border: 1px solid #aaa;
}

.medium-image img {
    max-width: 100%;
    height: auto;
    max-height: 358px; /* Höhe Container abzüglich border */
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.image-list,
.document-list {
    margin: 0;
    padding-left: 1.5rem;
    max-height: 360px;
    overflow-y: auto;

}
.image-list li,
.document-list li{
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    padding-left: 0.5rem;


}

.image-list li::marker,
.document-list li::marker {
    color: #007b86;
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 2;

}
.image-list img {
    display: block;
    max-width: 100%;
    max-height: 100%;

    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.image-list a.aktiv,
.image-list a.aktiv:hover,
.document-list a.aktiv,
.document-list a.aktiv:hover {
    border-color: #007b86;
}
.image-list .list-item-link:hover,
.document-list .list-item-link:hover{
    border-color: #eee;
}

.list-item-link {
    display: flex;
    border: 4px solid #fff;
    height: 100px;
    width: 180px;
    background-color: #fafafa;
    position: relative;
    justify-content: center;
    align-items: center;
    color: #007b86;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-item-link > span {
    overflow: hidden;
}

.reise-medium-item {
    position: relative;
}
.reise-medium-item .icon-pos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}


.detail-container {
    margin-bottom: 1rem;
    /* max-width: 360px; */
}
.detail-container h4 {
    margin: 0;
}

.medium-details-bottom .flex-item {
    margin-right: 1rem;
}
.medium-details-bottom .form-field {
    max-width: 300px;
}

.medium-table-image {
    /*
    max-width: 160px;
    max-height: 90px;
    */
    max-width: 96px;
    max-height: 96px;
    display: block;
    margin: 0 auto;
    
    border: 1px solid transparent;
    padding: 2px;
}


td.pos-rel {
    height: 100px;
    padding: 0 0.5em;
}

td.pos-rel:hover .medium-table-image {
    /* max-width: 480px;
    max-height: 480px; */
    
    max-width: 640px;
    max-height: 640px;
    
    display: block;
    margin: 0 auto;
    position: absolute;
    transition: all 0.5s;
    z-index: 1;
    top: 0;
    left: 0.5em;
    border-color: #eee;
}


.medium-container-upload {
    background-color: #eee;
    margin: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #ccc;

}
.medium-container-upload img {
    max-width: 100%;
    max-height: 200px;
    margin: 0.5rem auto;
    display: block;
}

.sub-quelle {
    display: block;
    font-size: 0.875em;
    margin-top: 0.25em;
}
.sub-copyrights {
    display: block;
    font-size: 0.875em;
    margin-top: 0.25em;
}
.sub-kommentar {
    display: block;
    font-size: 0.875em;
    margin-top: 0.5em;
    color: #666;
}


/* eventuell eine Lösung scrollbare tabelle*/
table.scroll thead tr:after {
    content: '';
    overflow-y: scroll;
    visibility: hidden;
}
table.scroll thead th {
    flex: 1 auto;
    display: block;
}
table.scroll tbody {
    display: block;
    width: 100%;
    overflow-y: auto;
    height: auto;
    max-height: 200px;
}
table.scroll thead tr,table.scroll tbody tr {
    display: flex;
}
table.scroll tbody tr td {
    flex: 1 auto;
    word-wrap: break;
}


/*Rubrik-Pikto-Preview*/
.piktogramm-preview img {
    display: block;
    max-width: 100%;
    max-height: 4rem;
    height:100%;
    object-fit: contain;
}


/* filter liste */

.pos-rel {
    position: relative;
}

.filter-list-selection {
    position: absolute;
    display: none;
}
.filter-item:hover div.filter-list-selection,
.filter-item .button-group.active + div.filter-list-selection {
    display: block;
}

.filter-list-selection li:hover {
    background-color: rgba(0, 123, 134, 0.8);
    color:#fff;
}
.filter-list-selection label {
    display: flex;
    padding: 0.25rem 0.5rem;
    align-items: baseline;
}



.filter-list-selection-inner {
    overflow: auto;
    max-height: 250px;
    box-sizing: border-box;
    padding: 0.25rem;
    background-color: #fff;
}

input.cb-filter {
    margin-right: 0.5em;
}

.filter-item .button-group.active + div.filter-list-selection {
    display: block;
}



.pim-code-prefix {
    color: #b3b3b3;
}

/* pim-version */
.pim-version {
    font-size: 0.5rem;
    color: #00679b;
    padding: 0.25rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1100;
    transition: 0.2s all;
}
.pim-version:hover {
    font-size: 0.75rem;
}
.page-start .pim-version {
    color: #fff;
}

/* pim-environment */
.pim-environment {
    font-size: 0.5rem;
    font-weight: bold;
    color: #3a4d60;
    padding: 0.25rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    transition: 0.2s all;
    width: 100%;
    margin: auto;
    text-align: center;
}
.pim-navbar-expanded .pim-environment {
    font-size: 0.875rem;
}
.pim-login-logo .pim-environment {
    font-size: 1rem;
    bottom: -1rem;
}



/* Accordion */
.accordion-toggle {
    display: block;
}

.accordion-content {
    display: none;
}

.accordion-content.active {
    display: block;
}


table tr.hidden {
    display: none;
}

table tr.active {
    display: table-row;
}

.table-toggle-row > td {
    padding: 0 0 2rem 0;
}

.table-toggle-btn-row {
    cursor: pointer;
}

.table-toggle-row .form-section {
    margin: 0;
}
.table-toggle-row .form-set {
    padding: 0.5em 0.5em 0;
}



.table-toggle-btn-row .icon-svg {
    transition: transform 0.5s;
}

.table-toggle-btn-row > td > p {
    margin: 0;
}

.table-toggle-btn-row[aria-expanded=true] .icon-svg {
    transform: rotateX(-180deg);
}

.bordered-table {
    border: 1px solid #eee;
}

.bordered-table .table-toggle-row > td {
    border-bottom: 2px solid #eee;
}


table .icon-rubrik {
    max-height: 40px;
    max-width: 40px;
}

.icon-rubrik-note {
    display: none;
}

.back-to-list-link {
    position: absolute;
    margin: 0 2rem 0.25rem;
    font-size: 0.875rem;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0;
}

.programm-default {
    font-weight: normal;
    font-size: 0.875em;
}

.m-right-1 {
    margin-right: 1rem;
}



.pp-table .col-day {
    width: 5rem;
}
.pp-table .col-time {
    width: 4rem;
}
.pp-table .col-type {
    width: 8rem;
}
.pp-table .col-title {
    width: 15rem;
}

.modal .pim-content-top {
    padding: 0 0 0.5rem;
    min-height: 60px;
}

.modal .modal-inner {
    max-height: calc(98vh - 8rem);
}

.modal-v1 .modal-inner {
    overflow: hidden;
}

.modal h1 {
    font-size: 1.5rem;
}

.modal .pim-content-inner {
    /*overflow: hidden;*/
    max-height: calc(98vh - 192px);
    padding: 0.5rem 1rem 0.5rem 0rem;
}

.modal-inner .pim-content-top {
    margin-right: 0.5rem;
}



.list-programm {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 200px);
}

.list-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    width: 200px;
}

.list-programm li,
.list-buttons li {
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
}

.list-programm li:last-child,
.list-buttons li:last-child {
    padding-right: 0;
}

.list-programm .input {
    background-color: #fff;
    border-color: #eee;
    color: #00679b;
}

.list-programm .input.aktiv {
    background-color: #00679b;
    border-color: #00679b;
    color: #fff;
}

.list-programm input[disabled].input {
    cursor: pointer;
}


.table-day {
    width: 5rem;
}
.table-time {
    width: 7rem;
}
.table-aktion {
    width: 2rem;
}

.table-day .input,
.table-time .input {
    margin-bottom: 0.25rem;
}



.kapitel > h2 {
    font-size: 1.25rem;
}

.kapitel-content {
    margin-bottom: 2rem;
}



.mod-katalog-allgemeine-infos .label {
    width: 180px;
    min-width: 180px;
}


.bordered-box {
    border: 1px solid #eee;
}

.box-size-480 {
    max-width: 480px;
}



.pdf-tool {
    font-size: 0.875em;
}

.p4tf-ppsp-reise {
    margin-bottom: 1rem;
}

/* Katalog Vorschau */

.preview-select {
    width: 100%;
    position: relative;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.preview-select-auswahl {
    max-width: 15rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-select-auswahl label {
    margin-right: 0.5rem;
    /*display: none; */
}


.preview-section {
    width: 100%;
    position: relative;
}

.preview-item {
    max-width: 768px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0.25rem;
    border: 1px solid #eee;
}

.preview-item-image {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}

.preview-arrows {
    position: absolute;
    left: 0;
    right: 0;
    top: 43%;
}

.preview-arrows > a {
    position: absolute;
}

.preview-arrows > a .icon-svg {
    font-size: 3rem;
    color: #00679b;
}

.preview-arrows:hover > a .icon-svg {
    color: #007b86;
}


.preview-arrows .arrow-next {
    right: 20%;

}
.preview-arrows .arrow-back {
    left: 20%;
}

.preview-pagination {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    overflow: auto;
}

.preview-pagination-selector {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.preview-pagination-link {
    display: flex;
    width: 160px;
    margin: 0.5rem;
    flex-wrap: wrap;
    text-decoration: none;
    color: #007b86;
    transition: 0.2s all;
}

.preview-pagination-link:hover,
.aktiv .preview-pagination-link {
    width: 180px;
}


.preview-pagination-header {
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
}

.preview-pagination-link:hover .preview-pagination-header,
.aktiv .preview-pagination-header {
    font-weight: bold;
}

.preview-pagination-page {
    width: 50%;
}

.preview-pagination-page-ds {
    width: 100%;
}

.preview-item-page {
    width: 50%;
}

.preview-item-page-ds {
    width: 100%;
}

.preview-pagination-link:hover .preview-pagination-page,
.aktiv .preview-pagination-page {
    border: 2px solid #007b86;
}

.preview-pagination-link:hover .preview-pagination-page-left,
.aktiv .preview-pagination-page-left {
    border-right: none;
}
.preview-pagination-link:hover .preview-pagination-page-right,
.aktiv .preview-pagination-page-right {
    border-left: none;
}


.preview-pagination-image {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
}


.hint-upload {
    font-size: 0.75rem;
    margin-top: 2rem;
}

/*  slimselect overrides*/
.ss-main .ss-multi-selected {
    border: none;

}

.ss-main .ss-multi-selected.ss-disabled {
    background-color: #fff;
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {
    display: none;
}

.ss-main.input {
    padding: 1px 0 !important;
}

th .ss-main.input {
    margin-top: 2px;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    background-color: #007b86;
}

.pim-table .ss-content .ss-list .ss-option {
    white-space: nowrap;
}

.pim-table .ss-content {
    width: auto;
}

/*Funktionelle Komponenten von SK*/

.p4tf-hidden {
    display: none !important;
}

/* für Verschachtelungen benötigt...*/
.p4tf-hidden-two {
    display: none !important;
}

.p4tf-reise-rbc-rt-anzeige-select,
.p4tf-reise-rbc-rt-anzeige-katalog-select, 
.p4tf-reise-rbc-rt-anzeige-online-select,
.p4tf-reise-rbc-rt-anzeige-beilage-select,
.p4tf-reise-rbc-rt-anzeige-anzeige-select {
    font-size: 0.5em;
    padding: 2px;
    margin: 2px 0 0 0;
}

/* erstmal zur Verdeutlichung, dass 2 Seiten zusammengehören, da preview-pagination-page-leftDoppelseite oder Links+rechts*/
tr.p4tf-ppsp-list-element:nth-child(4n),
tr.p4tf-ppsp-list-element:nth-child(4n+1){
    background-color: #eeeeee;
}

tr.p4tf-ppsp-list-element-first,
tr.p4tf-ppsp-list-element-last {
    background-color: #dddddd !important;
}

tr.p4tf-ppsp-list-element-first td {
    border-bottom: 2px solid #aaa;
}

tr.p4tf-ppsp-list-element-last td {
    border-top: 2px solid #aaa;
}

.pim-table tbody tr.p4tf-ppsp-list-element-active {
    background-color: #fafafa;
}

.fade-out-3 {
    opacity: 0;
    transition: opacity 3.0s ease;
}

.p4tf-filter-out-seite,
.p4tf-filter-out-seitenart,
.p4tf-filter-out-inhaltsart,
.p4tf-filter-out-zielgebiet,
.p4tf-filter-out-rubrik,
.p4tf-filter-out-pm,
.p4tf-filter-out-template,
.p4tf-filter-out-status,
.p4tf-filter-out-turista,
.p4tf-filter-out-kalkulation
{
    display: none;
}

input.p4tf-filter-select {
    width: 60px;
}

td .button-icon.p4tf-ppsp-move-up {
    margin-right: 34px;
}



.spinner-item {
    -webkit-animation:spin 4s ease-in-out infinite;
    -moz-animation:spin 4s ease-in-out infinite;
    animation:spin 4s ease-in-out infinite;
    display: inline-block;
    height: 3em;
    margin: 0 auto;
    width: 3em;
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}


.pim-char-counter {
    font-size: 0.75rem;
    color: #b3b3b3;
    display: block;
    text-align: right;
    margin-top: 0.25rem;
}

/* tinyMce override */
div.tox-tinymce-aux {
    z-index: 1800;
}

/*PA Arrow Toggle Content*/

.btn-toggleShow {
    color: black;
    width: 100%;
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}

.btn-toggleShowPikto {
    color: black;
    width: 100%;
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}

.btn-toggleShowStoerer {
    color: black;
    width: 100%;
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}

.btn-toggleTravel {
    
    width: 100%;
    display: flex;
    text-decoration: none;
    justify-content: space-between;
}

a.btn-toggleShow {
    display: none;
}

a.btn-toggleShowPikto + div.form-field
{
    display: none;
}

a.btn-toggleShowStoerer + div.form-field
{
    display: none;
}

a.btn-toggleShow + div.form-field
{
    display: none;
}

.arrow {
    display: flex;
    width: 11px;
    height: 11px;
    border-top: 1.6px solid #000;
    border-right: 1.6px solid #000;
    margin-right: 4px;
}

.arrow-top {
    transform: rotate(-45deg);
    margin-top: 8px;
}
.arrow-bottom {
    transform: rotate(135deg);
}

/*.modal-bg.modal-exit {
    pointer-events: none;
}*/


/* Markierung in NAV */
.pim-nav-records-opened a {
    border-left: 6px solid transparent;
}

/* Reisen */
.pim-nav-records-opened a[data-workspace="reise"] {
    border-left-color: blue;
}

/* Multimedia */
.pim-nav-records-opened a[data-workspace="bild"] {
    border-left-color: green;
}

/* Printprojekte */
.pim-nav-records-opened a[data-workspace="katalog"],
.pim-nav-records-opened a[data-workspace="beilage"],
.pim-nav-records-opened a[data-workspace="anzeige"],
.pim-nav-records-opened a[data-workspace="printproduktseite"] {
    border-left-color: red;
}

/* Stammdaten */
.pim-nav-records-opened a[data-workspace="hotel"],
.pim-nav-records-opened a[data-workspace="schiff"],
.pim-nav-records-opened a[data-workspace="region"],
.pim-nav-records-opened a[data-workspace="startpunkt"],
.pim-nav-records-opened a[data-workspace="veranstalter"],
.pim-nav-records-opened a[data-workspace="reiseart"],
.pim-nav-records-opened a[data-workspace="unterkategorie"],
.pim-nav-records-opened a[data-workspace="reiseinhalt"],
.pim-nav-records-opened a[data-workspace="reisehinweis"],
.pim-nav-records-opened a[data-workspace="mandant"],
.pim-nav-records-opened a[data-workspace="produktmanager"],
.pim-nav-records-opened a[data-workspace="zimmerart"],
.pim-nav-records-opened a[data-workspace="zielgebiet"],
.pim-nav-records-opened a[data-workspace="verpflegungsart"],
.pim-nav-records-opened a[data-workspace="befoerderungsart"],
.pim-nav-records-opened a[data-workspace="kategorie"],
.pim-nav-records-opened a[data-workspace="rubrik"],
.pim-nav-records-opened a[data-workspace="template"],
.pim-nav-records-opened a[data-workspace="printprodukteigenschaft"] {
    border-left-color: violet;
}

/* Einstellungen */
.pim-nav-records-opened a[data-workspace="user"] {
    border-left-color: beige;
}

.icon-lock-opened {
    color: green;
    cursor: pointer;
}
.icon-lock-closed {
    color: red;
    cursor: pointer;
}
.icon-lock-closed-no {
    color: red;
}


.ivz-container .notiz {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.ivz-header {
    margin-bottom: 0.5rem;
}
.ivz-item {
    margin-bottom: 0.25rem;
    display: flex;
    font-size: 0.75rem;
    justify-content: space-between;
    align-items: center;
}

.ivz-item-number  {
    width: 8%;
}
.ivz-item-content  {
    width: 82%;
}
.ivz-item-button  {
    width: 10%;
    text-align: right;
}

.ivz-item-content > div {
    display: inline;
}

.ivz-popup {
    min-width: 960px;
    min-height: 400px;
}

.reise-container {
    margin-bottom: 0.5rem;
}


.kommentare-header {
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}
.kommentar-item {
    margin-bottom: 0.25rem;
    display: flex;
    font-size: 0.75rem;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid #fff;
    padding: 0.125rem;
    background-color: rgba(255,255,255, 0.1)
}

.kommentar-item-header {
    font-size: 0.65rem;
    width: 100%;
}
.kommentar-item-content {
    margin-top: 0.15rem;
    padding-top: 0.15rem;
    width: 100%;
    border-top: 1px dashed #fff;
}




.template-select-container {
    min-width: 800px;
    display: flex;
    flex-wrap: wrap;
}

.template-select-item {
    width: 25%;
    padding: 1rem;
}
.ivz-neu {
    width: 8%;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* PA - diasbled background Printprodukteigentschaften*/
input[type="text"]:disabled {
    background: #ccc;
}

/* PA - Preview Button Printprodukteigentschaften*/
.previewSelection {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.template-select-item-block {
    border: 1px solid #000;
    padding: 1rem;
    background-color: #fff;
    position: relative;
}

.template-select-item-block.sel-1:hover,
.template-select-item-block.sel-1 {
    background-color: #f5f7ff;
}


.template-select-item-block:hover {
    background-color: #eee;
}
.t-image {
    max-width: 200px;
    margin: 0.5rem auto;
}

.t-button {
    text-align: center;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
  cursor: pointer;
}
.template-item {
    font-size: 0.875rem;
}

.template-select-item .t-default-icon,
.template-select-item:hover .t-hover-icon {
    display: flex;
    /*visibility: visible; / *PA - Ticket#1913529 hover effect wird ausgelöst obwohl Fenster nicht offen, führt bei kleinen bildschirmen und bei Reise bearbetiung zu nicht auswählbaren Buttons*/
    visibility: unset; 
}

.template-select-item:hover .t-default-icon,
.template-select-item .t-hover-icon {
    display: none;
    visibility: hidden;
}

.preview-image {
    max-width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.preview-image.ppsa-1 {
    margin-right: auto;
    margin-left: 0;
}
.preview-image.ppsa-2 {
    margin-left: auto;
    margin-right: 0;
}
.preview-image.ppsa-3 {
    max-width: 100%;
}


/* PA replace textarea with div styling */

.viewText {
    min-height: 40px;
    max-height: 200px;
    overflow-y: scroll;
    padding: 0.5rem;
    border: 1px solid #ccc;
    min-width: 540px;
}

.viewText.viewTextSmall {
    max-height: 140px;
}

.viewText:hover {
    background-image: url("../Icons/edit_black_24dp.svg"); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
}

.info-empty {
    color: #ccc;
    font-style: italic;
}

.tox-tinymce {
    min-width: 540px;
}



/*PA Animation hightlight on clicked Element in Sidebar*/

.animation-highlight {
    animation: highlight 2.5s;
}

.animation-highlight2 {
    animation: highlight2 2.5s;
}


@keyframes highlight{
    0%   {
        background: #FFFF6B;
    }
    75%  {
        background: #FFFF93;
    }
}

@keyframes highlight2{
    0%   {
        background: #FFFF6B;
    }
    75%  {
        background: #FFFF93;
    }
}

/*PA Pagination Routen/Bilder*/

.paginationList a:hover {
    cursor: pointer;
    background-color: #007b86;
    color: #fff;
}
.paginationList {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.paginationList ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.paginationList li {
    color: #fff;
    display: flex;
}

.paginationList div {
    min-width: 26px;
    text-align: center;
}

.paginationList a {
    padding: 0.25rem 0.5rem;
    border: 1px solid #3a4d60;
    border-radius: 0.25rem;
    color: #3a4d60;
    text-decoration: none;
    margin: 0.125rem;
}

.paginationList  a.active {
    background-color: #3a4d60;
    color: #fff;
}

.paginationList  li:first-child a {

}
.paginationList  li:last-child a {
    
}

a .invis {
    display: none;
}

/*Ergänzung SK wg. Programmverwaltung*/

input.p4tf-reiseprogramme-bezeichnung {
    pointer-events: none;
}

li[data-reiseprogramm-index] {
    cursor: pointer;
}

.p4tf-reise-multimedia-ove {
    pointer-events: none;
}

.p4tf-ppsp-workflowstatus-only-upload-inactive + .p4tf-ppsp-workflowstatus-only-upload, .p4tf-ppsp-workflowstatus-init {
    display:none;
}

.p4tf-maxlength-warning-content {
    font-size:smaller;
    padding: 0.10rem 0.5rem;
}

.p4tf-maxlength-warning-content .icon-svg {
    padding-right:2px;
    padding-top:4px;
}

.tooltip {
    cursor: help;
}

th > .icon-svg {
    margin-top: -0.25em;
}

th > .text-row-before-select {
    height: 25px;
    display: inline-block;
}