@font-face {
  font-family: kukaWeb;
  src: url(../fonts/KUKA-Bulo_web.woff2);
}

@font-face {
  font-family: kukaWebBold;
  src: url(../fonts/KUKA-Bulo_Bold_web.woff2);
}

@font-face {
  font-family: kukaIcon;
  src: url(../fonts/KUKA-Brand_Iconfont.woff2);
}

:root {
  --plyr-color-main: #ff5800;
  --plyr-video-background: #000;
  --plyr-focus-visible-color: var(--plyr-color-main);
  --plyr-badge-background: #4a5464;
  --plyr-badge-text-color: #fff;
  --plyr-badge-border-radius: 2px;
  --plyr-captions-background: rgba(0, 0, 0, .8);
  --plyr-captions-text-color: #fff;
  --plyr-control-icon-size: 18px;
  --plyr-control-spacing: 10px;
  --plyr-control-padding: var(--plyr-control-spacing * 0.7 (7px));
  --plyr-control-radius: 3px;
  --plyr-control-toggle-checked-background: var(--plyr-color-main);
  --plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
  --plyr-video-control-background-hover: var(--plyr-color-main);
  --plyr-audio-controls-background: #fff;
  --plyr-audio-control-color: #4a5464;
  --plyr-audio-control-color-hover: #fff;
  --plyr-audio-control-background-hover: var(--plyr-color-main);
  --plyr-menu-background: hsla(0, 0%, 100%, .9);
  --plyr-menu-color: #4a5464;
  --plyr-menu-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  --plyr-menu-radius: 4px;
  --plyr-menu-arrow-size: 6px;
  --plyr-menu-item-arrow-color: #728197;
  --plyr-menu-item-arrow-size: 4px;
  --plyr-menu-border-color: #dcdfe5;
  --plyr-menu-border-shadow-color: #fff;
  --plyr-progress-loading-size: 25px;
  --plyr-progress-loading-background: rgba(35, 40, 47, .6);
  --plyr-video-progress-buffered-background: hsla(0, 0%, 100%, .25);
  --plyr-audio-progress-buffered-background: rgba(193, 200, 209, .6);
  --plyr-range-thumb-height: 13px;
  --plyr-range-thumb-background: #fff;
  --plyr-range-thumb-shadow: 0 1px 1px rgba(215, 26, 18, .15), 0 0 0 1px rgba(215, 26, 18, .2);
  --plyr-range-thumb-active-shadow-width: 3px;
  --plyr-range-track-height: 5px;
  --plyr-range-fill-background: var(--plyr-color-main);
  --plyr-video-range-track-background: var(--plyr-video-progress-buffered-background);
  --plyr-video-range-thumb-active-shadow-color: hsla(0, 0%, 100%, .5);
  --plyr-audio-range-track-background: var(--plyr-video-progress-buffered-background);
  --plyr-audio-range-thumb-active-shadow-color: rgba(215, 26, 18, .1);
  --plyr-tooltip-background: hsla(0, 0%, 100%, .9);
  --plyr-tooltip-color: #4a5464;
  --plyr-tooltip-padding: calc(var(--plyr-control-spacing)/2);
  --plyr-tooltip-arrow-size: 4px;
  --plyr-tooltip-radius: 3px;
  --plyr-tooltip-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  --plyr-font-size-base: 15px;
  --plyr-font-size-small: 13px;
  --plyr-font-size-large: 18px;
  --plyr-font-size-xlarge: 21px;
  --plyr-font-size-time: var(--plyr-font-size-small);
  --plyr-font-size-menu: var(--plyr-font-size-small);
  --plyr-font-size-badge: 9px;
  --plyr-font-weight-regular: 400;
  --plyr-font-weight-bold: 600;
  --plyr-line-height: 1.7;
  --plyr-font-smoothing: false;
}

.cc-kuka {
  --cc-bg: #fff;
  --cc-block-text: var(--cc-text);
  --cc-btn-primary-bg: #ff5800;
  --cc-btn-primary-hover-bg: linear-gradient(45deg, #ff5800, #e53200);
  --cc-btn-primary-hover-text: #fff;
  --cc-btn-primary-text: var(--cc-bg);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-hover-bg: transparent;
  --cc-btn-secondary-hover-text: #ff5800;
  --cc-btn-secondary-text: #595d61;
  --cc-cookie-category-block-bg-hover: #dbdcdd;
  --cc-cookie-category-block-bg: #ececeb;
  --cc-cookie-table-border: #ececeb;
  --cc-font-family: inherit;
  --cc-font-size: inherit;
  --cc-overlay-bg: hsla(208, 6%, 48%, .66);
  --cc-section-border: #ececeb;
  --cc-text: #595d61;
  --cc-toggle-bg-off: #dbdcdd;
  --cc-toggle-bg-on: #ff5800;
  --cc-toggle-bg-readonly: #b1b3b5;
  --cc-toggle-knob-bg: #ececeb;
  --cc-toggle-knob-icon-color: #878d91;
  --cc-webkit-scrollbar-bg-hover: #dbdcdd;
  --cc-webkit-scrollbar-bg: #ececeb;
  --cc-z-index: 2001;
}

body {
  color: #595d61;
  font-family: kukaWeb;
  font-size: 1em;
  -webkit-hyphens: manual;
  hyphens: manual;
  line-height: 1.375;
  margin: 0 auto;
  min-width: 320px;
  height: 100vh;
}

.header{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap:1em;
position: fixed;
top: 0px;
width: 100%;
height:3em;
}

#pageHeader{
background-image: linear-gradient(90deg, #fff 0, #dbdcdd);
background-repeat: repeat-x;
box-shadow: 0px 2px 8px -5px rgba(0, 0, 0, 0.28);
z-index: 10;
}


.logo svg{
height:2em
}

.pageLogo svg{
height:3em;
}

#pageNav p{
font-size: large;
}

#spanNav{
color: #ff5800;
}

#parentMain{
display: flex;
flex-direction: column;
flex-wrap: wrap;
text-align: center;
align-items: center;
}

main{
padding-top: 3em;
padding-bottom: 2em;
display: flex;
flex-direction: column;
background-color: white;
height: fit-content;
gap: 1em;
justify-content: space-between;
align-items: center;
}

p{
margin:0px;
font-size: 1em;
}


.parentFlex{
  display: grid;
  padding-bottom: 1em;
  padding-top:1em;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  grid-template-columns: 0.8fr 1.2fr 8em 6.5em 7em;
  align-items: center;
  text-align: start;
  column-gap: 1.5em;
}

.parentflex img{
  margin-bottom: 1em;
  margin-top: 1em;
  width: 1em;
}

.parentflex input{
  margin-bottom: 1em;
  margin-top: 1em;
  width: 1em;
}

.parentflex input:hover{
  cursor:pointer;
}

#appContainer{
  font-size:1.2em;
}
#appContainer img {
  width: 1.5em;
}

.parentFlex:last-of-type{
border-bottom: 0px
}

.containerFlex {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin:1em;
}

.parentFlex a{
  text-decoration: none;
}

.parentflex ul{
  padding:0px;
  margin:0px;
}

#pageTitle h1{
font-size: 2.75em;
font-weight: bolder;
color: #595d61;
font-family: kukaWebBold;
margin-bottom:0.2em;
}
#pageTitle{
  margin-bottom:2em;
}

.logo:hover{
  cursor: pointer;
}

h4{
  font-family: kukaWebBold;
}


h1,h2,h3{
	margin-bottom: 1.5em;
}

.confirmSearch {
  background-image: none;
  border: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: #fff;
  color: #6c757d;
  outline: #6c757d;
  border: solid 2px #6c757d;

}

.confirmSearch, .confirmSearch:hover {
	text-decoration: none;
}

.confirmSearch:hover{
	background: linear-gradient(90deg, #fff 0, #dbdcdd5e);
	outline: 0;
}

.inputSearch{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #878d91;
  border-radius: 0;
  display: inline-block;
  outline: none;
  padding: 0.25em 0;
  position: relative;
  vertical-align: top;
  z-index: 1;
  margin-right: 0.2em;
}


.clearSearch{
  background: none;
  border: 0;
  color: #595d61;
  outline: 0;
  padding: 0;
  z-index: 9;
  font-weight: bold;
  position: relative;
  right : 0.6em;
}


::placeholder {
  opacity: 0.5;
}

.format{
	font-size: small;
	color: #8d8d8e;
  text-align: start;
}

.formatKop, .bold{
	font-weight: bold;
}

#LicenseFileDesc{
  border:2px dotted #878d91;
  padding: 10px;
  text-align: center;
  width: fit-content;
}

#LicenseFileDescParent{
  display:flex;
  justify-content: center;
}

.containerSearch{
  display: flex;
  justify-content: center;
  align-self:center;
  margin: 1em;
  font-size: 0.8em;
}

footer{
  display: flex;
  justify-content: center;
  font-size:large;
  text-align: center;
  gap:2em;
  padding:0.8em;
  background-image: linear-gradient(90deg, #fff 0, #dbdcdd);
  background-repeat: repeat-x;
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 10;
}

#license,#wop{
  padding-top: 4em;
  text-align: center;
  min-width: 50vw;
  max-width:60vw;
  margin-right:2em;
  margin-left:2em;
}

#library{
  padding-top: 4em;
  text-align: center;
  margin-right:2em;
  margin-left:2em;
}

a{
  color:#8d8d8e;
  text-decoration: underline;
}

.containerFlex input{
  width:1em;
  margin-bottom: 0em;
  margin-top: 0em;
}

.containerFlex img{
  width:1em;
  margin-bottom: 0em;
  margin-top: 0em;
}

.containerFlex a{
  color:#595d61;
  text-decoration: none;
}

a:focus, a:hover{
  color:#ff5800;
  text-decoration: underline;
}

img{
  margin-bottom:0.5em;
  margin-top:0.5em;
  width:1.5em;
}

#startup img{
  margin-top:1.5em;
}

.infoSVG{
  width: 0.8em;
  margin-left: 0.2em;
}

.infoSVGParent{
  display:inline-block;
}

h1{
  font-size: 1.5em;
  margin-bottom: 0.5em;
}
header a{
  text-decoration: none;
  font-size: 0.8em;
}
#spinnerApps, #spinnerLicense,#spinnerWopLicense{
  color:#ff5800;
  align-self: center;
  margin-left: 1em;
}

#konstellationLogo{
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: kukaWebBold;
  margin-left: 1.2em;
}

#konstellationLogo:hover{
  cursor:pointer;
}

#kukaLogo{
  position: absolute;
  right: 0px;
  z-index: 0;
}


.arrow{
  transform: rotate(90deg);
}

.containerFlex ul li{
  display:none;
}

.containerFlex ul:hover li{
  display:block;
}

#releaseNotesBody{
	font-size: medium;
  padding: 2em;
}

#releaseNotesBody h2{
	border-block-start: 1.2px solid rgba(0, 0, 0, 0.2);
	margin-top: 20px;
	padding-top: 20px;
	font-family:kukaWebBold;
}

#releaseNotesBody ul{
	margin-bottom: 0rem;
}

#releaseNotesBody h1{
	margin-bottom:20px;
}

#releaseNotesBody h5{
	margin-bottom: 6.5px;
	font-family:kukaWebBold;
}

.releaseNotesDate{
	font-family:kukaWeb;
}

#gridStartUp{
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
  align-content: center;
  justify-content: center;
  align-items: center;
  width:80vw;
  flex-direction: column;
}

#gridStartUp div{
  width:300px;
}

#konstellationLogo{
  height:2em;
}

#wopHelp{
  text-align: start;
  margin-top:3em;
}

#wopHelp p{
  margin-top:1.5em;
}

#howto{
  font-family:kukaWebBold;;
}

.spinner-border{
  width:30px !important;
  height:30px !important;
}

.filterContainer {
  display: grid;
  grid-template-columns: 12em 4em 12em 7em 1fr;
  text-align:start;
  justify-items: start;
  align-items: end;
  margin-bottom:1em;
}

.filterContainer button{
  margin-bottom:0.25em;
}


.last{
  justify-self: end;
  display: flex;
  justify-content: flex-start;
  align-items: end;
}

@media (min-width: 768px) and (max-width:1600px){
  body{
    font-size:18px;
  }
  #library{
    max-width:100vw;
  }

  main{
    padding-top: 4em;
  }
  header a {
    text-decoration: none;
    font-size: 0.9em;
  }
  header p{
    font-size: 1.2em;
  }
  #konstellationLogo{
    height:1.5em;
  }
  .pageLogo svg {
    height: 2em;
  }
  #gridStartUp{
    column-gap: 7em;
    row-gap : 0.5em;
    flex-direction:row;
  }
}

@media (min-width: 1601px) {
  body{
    font-size:24px;
  }

  #gridStartUp div{
    width:450px;
  }

  #gridStartUp{
    column-gap: 4em;
    flex-direction:row;
  }

  .pageLogo svg{
    height:3em;
  }

  main{
    padding-top: 4.5em;
  }
  header a {
    text-decoration: none;
    font-size: 1em;
  }
  header p{
    font-size: 1.5em;
  }
  #konstellationLogo{
    height:2em;
  }
  header{
    height: 3em;
  }
  .table{
    font-size: 1em;
  }
}

@media only screen and (max-device-width: 768px) {
  body{
    font-size: 12px;
  }
  #konstellationLogo{
    margin-left: 0.2em;
  }
  header a {
    text-decoration: none;
    font-size: 0.75em;
  }
  header p{
    font-size: 1em;
  }
  #library{
    max-width:100vw;
  }
  .pageLogo svg {
    height: 2em;
  }
  .format {
    font-size: 0.75em;
}

  .filterContainer {
    display: grid;
    grid-template-columns: 12em 7em;
    row-gap: 0.5em;
  }
 
  .last{
    justify-self: start;
  }
  
}

.manualsPopover{
  display: flex;
  flex-direction: column;
  font-size: 1.1em;
  white-space: nowrap;
}

.footerSpace{
height: 5em;
}


.appDescription{
  font-size:0.9em;
  width:40vw;
}

#popUpContainer{
  position:fixed;
  top:0px;
  right:0px;
  font-size:0.9em;
  z-index:12;
}

.filterContainer .clearSearch{
  right:0.8em;
}

.confirmFilter{
  background-color: white;
  border: none;
  color:#ff5800;
}

.popover{
  max-width: none;
}

#downloadModalBody{
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  row-gap: 1em;
  column-gap: 0.5em;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: #8d8d8e !important;
}