/* Button Auswahl */
#dsV3SelectButtons{
   margin: 0 -5px;
}

button:focus-visible,
button:hover {
   outline: none;
}

#dsV3SelectButtons > div {
   padding: 0 5px;
   width: 50%;
   float: left;
}

.dsV3SelectButton {
   display: block;
   width: 100%;
   box-shadow: none;
   background: transparent;
   padding: 5px 15px;
   margin: 0 0 15px;
   border: 2px solid #fff;
   border-radius: 6px;
   border-color: #333;
   font-size: 16px;
}

.dsV3SelectButton:hover,
.dsV3SelectButton:focus-visible {
    border-color: #333;
    color: #fff;
    background-color: #333;
    font-weight: bold;
    box-shadow: 0 0 0 2px #fff inset;
}

.dsV3SelectButton.selected {
    border-color: #333;
    color: #fff;
    background-color: #333;
    font-weight: bold;
}

/* Kategorien/Services */
#dsV3Kategorien, #dsV3Services {
   clear: both;
   max-height: 300px;
   overflow-y: auto;
   padding: 0;
   position: relative;
   scrollbar-width: thin;
   word-break: break-word;
}

#dsV3Services { padding-bottom: 5px; }

#dsV3Services div {
   margin-top: 2px;
   margin-bottom: 3px;
}

#dsV3Kategorien .kategorieWrapper {
   border-bottom: 1px solid #aaa;
   overflow: hidden;
   margin: 0 0 10px;
   padding: 2px 0 10px 0;
}

#dsV3Kategorien .kategorieWrapper div[disabled] {
   font-size: 16px;
   display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
}

#dsV3Kategorien .kategorieWrapper:last-child {
   border-bottom: none;
}

#dsV3Kategorien .kategorieWrapper > div,
#dsV3Services > div {
   position: relative;
}

#dsV3Kategorien .kategorieWrapper > span {
   font-weight: 700;
   display: block;
   clear: both;
}

#dsV3Kategorien button,
#dsV3Services button {
   box-shadow: none;
   background: transparent;
   border: none;
   text-align: left;
   width: 100%;
   padding: 0 0 0 2px;
   font-size: 16px;
   
   
   display: flex;
   justify-content: space-between;
   flex-direction: row-reverse;
   align-items: center;
}

#dsV3Dialog #dsV3Kategorien button.btn_all_cat {
   padding-left: 0px;
   padding-right: 0;
   display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
}

#dsV3Services button {
   padding-left: 0;
   position: relative;
}

#dsV3Dialog button.icon-chevron {
   width: 20px;
   height: 20px;
   padding: 0;
   line-height: 12px;
   position: absolute;
   top: 1px;
   right: 32px;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

#dsV3Dialog button.icon-chevron:before {
   content: "";
   display: block;
   width: 12px;
   height: 12px;
   background-color: transparent;
   border: 3px solid transparent;
   border-left-color: #333;
   border-bottom-color: #333;
   transform: rotate(-45deg);
   transform-origin: center;
}

#dsV3Dialog button.icon-chevron:after,
#dsV3Dialog button.glyphicon-info-sign:after {
   content: "";
   display: block;
   position: absolute;
   top: -2px;
   right: -2px;
   bottom: -2px;
   left: -2px;
   border: 2px solid transparent;
   border-radius: 5px;
}

#dsV3Dialog button.icon-chevron:hover:after,
#dsV3Dialog button.icon-chevron:focus-visible:after,
#dsV3Dialog button.glyphicon-info-sign:hover:after,
#dsV3Dialog button.glyphicon-info-sign:focus-visible:after {
   border-color: #333;
}

#dsV3Dialog button.icon-chevron.open {
   align-items: flex-end;
}

#dsV3Dialog button.icon-chevron.open:before {
   transform: rotate(135deg);
}

#dsV3Dialog button.glyphicon-info-sign {
   display: block;
   width: auto;
   padding: 0;
   position: absolute;
   top: 3px;
   right: 32px;
}

#dsV3Dialog .icon-chevron,
#dsV3Dialog .dsUnchecked,
#dsV3Dialog .dsChecked {
   /*
   position: absolute;
   right: 30px;
   bottom: 5px;
   */
   position: relative;
   cursor: pointer;
}

#dsV3Dialog .kategorieWrapper button:focus-visible,
#dsV3Dialog .kategorieWrapper button:hover,
#dsV3Dialog #dsV3Services button:focus-visible,
#dsV3Dialog #dsV3Services button:hover {
   span:after {
      content: "";
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border: 2px solid #333;
      border-radius: 5px;
   }
}

#dsV3Dialog .akkordeon {
   position: absolute;
   right: 40px;
   top: 0;
   bottom: 0;
   cursor: pointer;
}

#dsV3Dialog .glyphicon-chevron-down:before {
   display: inline-block;
   transform: translateX(3px) translateY(2px);
   transform-origin: center;
}

#dsV3Dialog .glyphicon-chevron-down.open:before {
   transform: translateX(2px) translateY(-2px) rotate(180deg);
}

#dsV3Dialog button[disabled],
#dsV3Dialog div[disabled] {
   opacity: 0.7;
}

#dsV3Dialog button[disabled] span,
#dsV3Dialog div[disabled] span {
   pointer-events: none;
}

#dsV3Dialog p {
   font-size: 14px;
}

/** Erweiterter dsV3Dialog **/
#dsV3Overlay {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 150000;
   background-color: rgba(51,51,51,0.8);
   padding: 20px;
   overflow: auto;
}

#dsV3Dialog {
   position: relative;
   margin: 75px auto;
   z-index: 151000;
   background-color: #fff;
   max-width: 720px;
   padding: 10px 15px;
   border-radius: 6px;
   font-family: Arial, sans-serif;
}

#dsV3Dialog abbr {
   border-bottom: initial;
}

@media (max-width: 599px){ 
   #dsV3Dialog{
      max-width: 100%;
      margin: auto;
   }
   #dsV3Overlay{
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
   }
}

#dsV3Dialog a {
   font-weight: 600;
   color: #4d4d4d;
   text-decoration: underline;
}

#dsV3Dialog a:focus-visible,
#dsV3Dialog a:hover,
#dsV3Dialog a:active {
   background-color: #4d4d4d;
   color: #fff;
}


#dsV3Dialog a:focus-visible .dsArrowRight:before,
#dsV3Dialog a:hover .dsArrowRight:before,
#dsV3Dialog a:active .dsArrowRight:before {
   background-color: #fff;
}

#dsV3Dialog a:focus-visible .dsArrowRight:after,
#dsV3Dialog a:hover .dsArrowRight:after,
#dsV3Dialog a:active .dsArrowRight:after {
   border-left-color: #fff;
}

#dsV3Dialog .datenschutzLinks a {
   margin-left: 8px;
   white-space: nowrap;
}
#dsV3Dialog .datenschutzLinks a:focus-visible,
#dsV3Dialog .datenschutzLinks a:active{
   outline: none;
}

#dsV3Dialog .datenschutzLinks a:focus-visible{
   text-decoration-thickness: 2px;
}

#dsV3Dialog strong {
   font-weight: bold !important;
}

#dsV3Dialog .datenschutzTitle {
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 5px;
}

#dsV3Dialog .datenschutzLangs {
   pointer-events: none;
   height: 35px;
   position: relative;
   z-index: 5;
}

@media (min-width: 600px) {   
   #dsV3Dialog .datenschutzLangs {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 200px;
   }
}

#dsV3Dialog .datenschutzLangs > button {
   background-color: #fff;
   border-radius: 3px;
   border: 1px solid #777;
   box-shadow: 0 1px 1px rgba(51,51,51,0.2);
   width: 100%;
   display: block;
   text-align: left;
   padding: 4px 25px 4px 5px;
   margin: 0;
   position: relative;
   pointer-events: initial;
}

#dsV3Dialog .datenschutzLangs > button .dsArrowDown {
   position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -11.5px;
}

#dsV3Dialog .datenschutzLangs ul {
   opacity: 0;
   pointer-events: none;
   transition: opacity ease 100ms;
   border: 1px solid #777;
   border-radius: 5px;
   background-color: #fff;
}

#dsV3Dialog .datenschutzLangs.dsActive ul {
   opacity: 1;
   pointer-events: initial;
}

#dsV3Dialog .datenschutzLangs ul button {
   width: 100%;
   border: none;
   padding: 4px 5px;
   background-color: #fff;
   border-radius: 5px;
   text-align: left;
   outline: none;
}

#dsV3Dialog .datenschutzLangs ul button:focus-visible,
#dsV3Dialog .datenschutzLangs ul button:hover,
#dsV3Dialog .datenschutzLangs ul button:active {
   background-color: #eee;
}

#dsV3Dialog .datenschutzDetails {
   display: none;
   border-top: 1px solid #ccc;
   padding-top: 10px;
}

#dsV3Dialog .datenschutzDetails.datenschutzDetailsActive {
   display: block;
}

#dsV3Dialog .datenschutzLangs ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

@media (min-width: 600px) {   
   #dsV3Dialog .datenschutzCategorySelection ul {
      display: flex;
   }
}

#dsV3Dialog .datenschutzCategorySelection button {
   background-color: transparent;
   border: none;
   text-align: left;
   margin: 0 30px 5px 0;
   padding: 5px 5px 5px 0;
   outline: none;
   white-space: nowrap;
}

#dsV3Dialog .datenschutzCategorySelection button span {
   margin-right: 5px;
}

#dsV3Dialog .datenschutzCategorySelection button:focus-visible,
#dsV3Dialog .datenschutzCategorySelection button:hover,
#dsV3Dialog .datenschutzCategorySelection button:active {
   text-decoration: underline;
}

#dsV3Dialog .datenschutzCategoryRequired {
   opacity: 0.5;
}

#dsV3Dialog .datenschutzCategoryTitle {
   font-weight: 600;
   font-size: 16px;
}

#dsV3Dialog .datenschutzDetailsToggleBtn {
   background-color: transparent;
   font-weight: 600;
   font-size: 13px;
   border: none;
   margin: 5px 0;
   padding: 0;
   outline: none;
}

#dsV3Dialog .datenschutzDetailsToggleBtn:focus-visible,
#dsV3Dialog .datenschutzDetailsToggleBtn:hover,
#dsV3Dialog .datenschutzDetailsToggleBtn:active {
   text-decoration: underline;
}

#dsV3Dialog .dsFlagIcon {
   width: 12px;
   height: 9px;
   display: inline-block;
}

#dsV3Dialog .dsArrowUp {
   width: 15px;
   height: 15px;
   display: inline-block;
   position: relative;
}

#dsV3Dialog .dsArrowUp:before {
   position: absolute;
   content: "";
   width: 8px;
   height: 8px;
   bottom: -2px;
   left: 2px;
   border-bottom: 2px solid #333;
   border-right: 2px solid #333;
   transform: rotate(225deg);
}

#dsV3Dialog .dsArrowDown {
   width: 15px;
   height: 15px;
   display: inline-block;
   position: relative;
}

#dsV3Dialog .dsArrowDown:before {
   position: absolute;
   content: "";
   width: 8px;
   height: 8px;
   bottom: 2px;
   left: 2px;
   border-bottom: 2px solid #333;
   border-right: 2px solid #333;
   transform: rotate(45deg);
}

#dsV3Dialog .dsChecked,
#dsV3Dialog .dsUnchecked {
   width: 15px;
   height: 15px;
   flex: 0 0 15px;
   border: 2px solid #333;
   background-color: #333;
   border-radius: 3px;
   margin-right: 6px;
   display: flex;
   justify-content: center;
}

#dsV3Dialog .dsChecked:before {
   display: block;
   content: "";
   width: 5px;
   height: 9px;
   border-bottom: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: rotate(45deg);
}

#dsV3Dialog .dsArrowRight {
   width: 15px;
   height: 15px;
   display: inline-block;
   position: relative;
   margin-right: 1px;
}

#dsV3Dialog .dsArrowRight:before {
   position: absolute;
   content: "";
   width: 6px;
   height: 3px;
   background-color: #4d4d4d;
   top: 8px;
   left: 2px;
}

#dsV3Dialog .dsArrowRight:after {
   position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 5.5px;
    left: 8px;
    top: 4px;
    border-color: transparent transparent transparent #4d4d4d;
}

#dsV3Dialog .datenschutzFooter {
   display: flex;
}

#dsV3Dialog .datenschutzFooter button {
   color: #333;
   border: 2px solid #333;
   background-color: #fff;
   padding: 5px 15px;
   margin-left: 15px;
   border-radius: 6px;
   font-weight: 600;
   width: 100%;
   margin: 15px 0 0;
   font-size: 16px;
}
@media (min-width: 500px) {
   #dsV3Dialog .datenschutzFooter {
      justify-content: flex-end;
   }
   #dsV3Dialog .datenschutzFooter button {
      width: auto;
      margin: 0 0 0 15px;
   }
}

#dsV3Dialog .datenschutzFooter button:hover,
#dsV3Dialog .datenschutzFooter button:focus-visible{
   background: #333;
   color: #fff;
   outline: none;
    box-shadow: 0 0 0 2px #fff inset;
}

#dsV3Dialog .datenschutzFooter button.datenschutzFooterSelectAll {
   background-color: #333;
   color: #fff;
}

.dsV3DialogOpen {
   overflow: hidden !important;
}

@media (max-width: 494px) {
   #dsV3Dialog {
      font-size: 12px;
      padding: 6px 12px 8px 12px;
   }
   #dsV3Dialog .datenschutzTitle {
      font-size: 20px;
   }
   #dsV3Dialog .einleitungstext {
      font-size: 12px;
      margin-bottom: 5px;
   }
   
   #dsV3Dialog .datenschutzLinks {
      font-size: 12px;
      margin-bottom: 5px;
   }
   
   #dsV3Dialog p {
      font-size: 12px;
   }
   
   #dsV3Kategorien .kategorieWrapper div[disabled],
   #dsV3Kategorien button,
   #dsV3Services button {
      font-size: 14px;
   }

   #dsV3Services div:last-child {
      border-bottom: none;
   }
   .kategorieWrapper div:last-child {
      border-bottom: 0 none;
   }
   #dsV3Dialog .datenschutzFooter {
      flex-wrap: wrap;
      justify-content: space-between;
   }
   
   .dsV3SelectButton {
      margin-bottom: 7px;
      font-size: 14px;
   }
   
   #dsV3Dialog .datenschutzFooter button.datenschutzFooterConfirm,
   #dsV3Dialog .datenschutzFooter button.datenschutzFooterDenyAll {
      flex: 0 0 49%;
      margin-top: 0;
   }
   #dsV3Dialog .datenschutzFooter button {   
      margin-top: 7px;
      font-size: 14px;
      padding: 5px 12px;
   }
}