/* Variables */
/*
    This file is used to ensure consistency across the whole web application
    It define the used colors for texts, backgrounds and borders
    They will be used to customize the given kendo and bootstrap styles as well as custom UI Elements
*/
/*
    The following contains the var declarations of all used colors, the names of the variables are equal to the
    bootstrap variables to easily set the coloring
*/
/* Defaults */
/* Mixins */
/* Main Styles*/
/* Style Definitions of the generic dropdown buttons and its drop down options */
/* Opens the drop down menu via hover over a corresponding trigger */
li.dropdown-trigger:hover ul.dropdown-menu {
  display: block;
  margin: 0px 0px 0px 0px;
}
ul.dropdown-menu {
  /* Border of drop down menus */
}
@media screen and (min-width: 768px) {
  ul.dropdown-menu {
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
    -webkit-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
  }
}
/* Style Definitions of the language button and its drop down options */
/* Sizing and styling of the Dropdown Flag images for language Dropdown */
img.dropdown-option-flag {
  height: 18px;
  width: 30px;
}
.language-dropdown-btn {
  color: #333333;
  padding: 10px;
}
ul.language-dropdown-selection li a.languageDropdownOption {
  color: #333333;
  padding: 10px;
  width: 74px;
}
li.dropdown-trigger:hover a.language-dropdown-btn {
  /* Hide any decorations */
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
li.dropdown-trigger:hover a.languageDropdownOption:hover {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
li.dropdown-trigger.open a.language-dropdown-btn.dropdown-toggle {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
li.dropdown-trigger.open a.languageDropdownOption:hover {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
.metricInchSwitch.active_True {
  pointer-events: none;
}
@media screen and (min-width: 1550px) {
  #tuLogo {
    width: 241px !important;
    padding: 7px;
    margin-top: 5px;
    display: block;
  }
  #tuLogoSmall {
    display: none;
  }
}
@media screen and (max-width: 1550px) {
  #tuLogo {
    width: 100px !important;
    padding: 7px;
    display: none;
  }
  #tuLogoSmall {
    display: block;
    padding: 7px;
    margin-top: 6px;
  }
  .dropdown-trigger.login {
    top: 10px;
  }
}
.innerMenu li.customDropDown {
  position: relative;
  margin-right: 20px;
}
li.dropdown-trigger.languageSelectionLi .material {
  color: #0072c6;
}
a.languageDropdownOption {
  clear: both;
  display: block;
  white-space: nowrap;
}
.languageSelectionLi ul.customDropDown-menu {
  width: 455px;
  transform: translateX(-50%);
}
.innerMenu {
  margin: 20px 0px 0px 0px;
}
.innerMenu .userAccountLi a {
  margin-bottom: 16px;
  margin-top: -8px;
}
.dropdown-trigger.login {
  top: 28px;
}
.header {
  position: fixed;
  width: 100%;
  top: 0px;
  background-color: white;
  box-shadow: 0px 0px 3px 1px #c9c9c9;
  z-index: 100;
}
@media screen and (max-height: 600px) {
  .header {
    position: absolute;
  }
}
@media print {
  .header {
    display: none;
  }
}
#ExportMenuUL {
  /*margin-top: 50px;
    right: 5px;
    left: inherit;*/
  width: 915px;
}
.ExportMenuULS {
  width: 800px !important;
}
#BasketUL {
  min-width: 280px;
}
#nav {
  display: table;
  table-layout: fixed;
}
div#navMiddleDiv,
.nav_left,
.nav_right {
  display: table-cell;
  white-space: nowrap;
  vertical-align: middle;
}
#navMiddleDiv {
  display: table-cell;
  width: 100%;
  text-align: center;
  padding: 10px 30px;
}
.navbarUL {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  white-space: nowrap;
}
.navbarUL ul {
  padding: 0;
}
.MainNavbarUL li {
  display: inline-block;
  vertical-align: top;
}
.RightNavbarUL {
  float: right;
  padding-right: 8px;
  height: 76px;
}
.RightNavbarUL li {
  display: inline-block;
  vertical-align: top;
}
.RightNavbarUL li ul li {
  display: block;
}
.innerMenu {
  list-style: none;
}
.drop {
  color: #5fb662;
}
.whileDragging {
  /*border: 1px solid red !important;
        transform: scale(1.1,1.1);*/
}
.whileDragging .droptargetSign {
  opacity: 1 !important;
  font-size: 5em;
}
.whileDragging .droptargetSign .material-icons {
  font-size: 1em;
}
.droptarget {
  /*border: 1px solid rgba(255, 0, 0, 0);
        transition: all 0.5s;*/
  position: relative;
}
.droptargetSign {
  position: absolute;
  opacity: 0;
  top: 40px;
  right: 0px;
  width: 100%;
  text-align: center;
  transition: all 0.3s;
  pointer-events: none;
}
.activeLi {
  border-bottom: 3px solid #0072C6;
}
.buttonAmountDiv {
  position: absolute;
  margin: -70px 70px;
  padding: 2px 7px 2px 7px;
  border-radius: 18px;
  background-color: rgba(0, 158, 224, 0.5);
  color: white;
  display: table-cell;
}
#LoginMenuInHeader {
  width: 520px;
  margin-left: -160px;
  padding: 0px 25px 10px;
}
@media screen and (max-width: 1400px) {
  .languageSelectionLi ul.customDropDown-menu {
    transform: translateX(-74%);
  }
  #LoginMenuInHeader {
    margin-left: -290px;
  }
}
.RightNavbarUL .alert.alert-danger li {
  float: inherit;
}
.basketHeaderLink div {
  width: 100%;
  padding: 10px;
  border-radius: 3px;
}
.basketHeaderLink div:hover {
  background-color: #f7f7f7;
}
#headerIfSmallMenu {
  position: absolute;
  background-color: white;
  border: 1px solid #b3b3b3;
  border-radius: 20px;
  overflow: hidden;
}
.loginTextBox {
  width: 100%;
}
.bigHeadline {
  font-size: 2em;
}
.smallHeadline {
  font-size: 1.3em;
}
.menuForSmallResolution ul {
  font-size: 1.5em;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menuForSmallResolution ul li a {
  color: black;
  margin: 5px 0px 0px;
  padding: 10px 40px 10px 20px;
  display: block;
  background: #f7f7f7;
  height: 60px;
}
.menuForSmallResolution ul li a:hover {
  background: #efefef;
}
.menuForSmallResolution ul li p {
  display: inline;
}
div#headerIfSmallMenu li div {
  width: 70px;
  display: inline-block;
  text-align: center;
}
div#headerIfSmallMenu img {
  max-height: 40px;
}
.btnWithImageTopFixedSize .mhx {
  width: 45px;
  position: absolute;
  top: 20px;
  margin-left: 10px;
  z-index: 1;
  transition: all 0.15s;
}
.btnWithImageTopFixedSize:hover .mhx {
  margin-left: 21px;
}
.btnWithImageTopFixedSize .fsn {
  width: 35px;
  position: absolute;
  top: 22px;
  margin-left: 63px;
  transition: all 0.15s;
}
.btnWithImageTopFixedSize:hover .fsn {
  margin-left: 49px;
}
.unitAndSearchRegionLi a {
  text-align: left;
  padding: 0px 10px;
}
li.customDropDown {
  cursor: pointer;
}
ul.customDropDown-menu {
  display: none;
  cursor: default;
}
li.customDropDown:hover ul.customDropDown-menu {
  display: block;
  z-index: 9;
}
ul.customDropDown-menu {
  position: absolute;
  background: white;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;
  -webkit-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
}
ul.customDropDown-menu.customDropDown-right {
  right: 5px;
}
.customDropDown.show ul.customDropDown-menu {
  display: block;
}
.customDropDown-menu li {
  list-style: none;
  float: left;
}
a[role='button'] radio,
label {
  cursor: pointer;
}
li.userAccountLi {
  margin-right: 20px;
}
#navSearchBar {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: inline-block;
}
#navSearchBar input {
  height: 40px;
  width: calc(100% - 43px);
  display: inline-block;
  border-radius: 20px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  z-index: 1;
  position: relative;
}
#navSearchBar input:focus {
  box-shadow: none;
  border-color: #ced4da;
}
#navSearchBar .nav_mainSearchBtn {
  height: 40px;
  display: inline-block;
  border-radius: 20px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-left: -5px;
  margin-top: -3px;
  z-index: 1;
  position: relative;
}
#navSearchBar .searchHelp {
  position: absolute;
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  z-index: 100;
}
#navSearchBar .searchHelp .innerDiv {
  border: 1px solid #ced4da;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: white;
  border-top: 0;
  overflow: hidden;
}
#navSearchBar.open .searchHelp {
  max-height: 1000px;
  transition: all 1s;
}
#navSearchBar.open button {
  border-bottom-right-radius: 0px;
}
#navSearchBar.open input {
  border-bottom-left-radius: 0px;
}
#navSearchBar .searchHelpModalHelper {
  display: none;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: #0000001f;
  position: fixed;
}
#navSearchBar.open .searchHelpModalHelper {
  display: block;
}
@media print {
  .footer {
    display: none;
  }
}
.footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: 35px;
  z-index: 100;
  left: 0px;
}
.footerTransition {
  height: 10px;
  background-image: linear-gradient(to top, #ffffff 0%, rgba(248, 248, 248, 0) 100%);
}
.footerMainRow {
  box-shadow: inset 0px 1px 3px #8e8e8e;
  background-color: white;
  height: 25px;
  padding: 1px 15px;
}
.footer .list-inline li {
  border-right: 1px solid #cccccc;
  padding-right: 8px;
}
.footer .list-inline li:hover {
  background-color: #e4e4e4;
}
.footer .list-inline a {
  color: black;
}
.footer .list-inline li.legalLink a {
  color: #4a4a4a;
}
.footer .list-inline li.legalLink a:hover {
  color: black;
}
.highlightedLi {
  border-bottom: 2px solid #0072c6 !important;
  color: #0072c6;
}
#HistoryPageDropUpDiv div:hover {
  background-color: #e4e4e4;
}
#HistoryPageDropUpDiv div {
  padding: 2px 30px;
}
.fullscreenModal {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -5;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.centeredText {
  transition: all 0.5s;
  background-color: white;
  padding: 20px;
  width: 300px;
  margin-left: -150px;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  border-radius: 140px;
  color: #e6e6e6;
  border: 1px solid #e6e6e6;
}
.fullscreenModal:hover .centeredText {
  color: #7f7f7f;
  border-color: #7f7f7f;
}
#footerMenu {
  position: fixed;
  background-color: white;
  padding: 20px 20px 10px 0px;
  border: 1px solid black;
}
/* Variables */
/* Mixins */
/* Page specific */
button.k-button.k-primary.bigImgBtn:focus,
button.k-button.k-primary.bigImgBtn:active {
  background: white;
  color: black;
  border-bottom: 2px solid #0072c6;
}
.bigImgBtn {
  color: black;
  background-color: white;
  width: 45%;
  width: calc(50% - 12px);
  max-width: 185px;
  transition: all 0.2s;
  border-radius: 4px;
  display: inline-block;
}
button.k-button.k-primary.bigImgBtn:hover {
  background-color: #ffffff;
  color: black;
  transform: scale(1.1);
}
.Export3DMenuText {
  max-width: 750px;
}
.spanGrafic2D3D {
  border: 1px solid #8e8e8e;
  border-radius: 30px;
  padding: 0px 5px;
}
.Export3DMenuHelpDiv {
  position: absolute;
  margin-left: -360px;
  top: 50%;
  background-color: white;
  padding: 20px;
  width: 300px;
  transition: all 0.3s;
}
.Export3DMenuHelpDiv span.material-icons:hover {
  color: black;
  background-color: lightgrey;
}
.Export3DMenuHelpDiv span.material-icons {
  position: absolute;
  top: 5px;
  right: 5px;
  color: grey;
  padding: 3px;
  cursor: pointer;
}
.export3DModelTable tr td:first-child {
  width: 200px;
}
.whereToBuyTable tr td,
.whereToBuyTable tr th {
  padding: 10px;
  min-width: 100px;
}
.inShop-False td {
  background-color: greenyellow;
}
.whereToBuyRow img {
  max-width: 150px;
  max-height: 50px;
}
.whereToBuyTable {
  width: 100%;
}
.whereToBuyTable tr:hover {
  background-color: #f1f1f1;
}
.geometricDataForm th {
  border-left: 1px solid white !important;
  border-right: 1px solid white !important;
}
#exportMenuLoadingDiv {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  border: 2px solid black;
  width: 100%;
  z-index: 9099999;
  padding: 10px 10px 0px;
}
#exportMenuLoadingDiv .k-icon.k-i-close {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 25px;
}
#ThreeDViewerShowHideMenuBtn {
  position: absolute;
  top: 20px;
  right: 5px;
  color: white;
  transition: all 0.3s;
  cursor: pointer;
}
#ThreeDViewerShowHideHelpTextBtn {
  position: absolute;
  top: 40px;
  right: 5px;
  color: white;
  transition: all 0.3s;
  cursor: pointer;
}
div#ThreeDViewerShowHideHelpTextBtn:hover {
  transform: scale(1.5, 1.5);
}
.movedToTheRight {
  margin-right: -400px;
}
div#ThreeDViewerShowHideMenuBtn:hover {
  transform: scale(1.5, 1.5);
}
#ThreeDViewerDiv_wnd_title {
  margin-left: 90px;
}
table.export3DModelTable tr td {
  padding: 5px;
}
.export3DModelTable tr:hover {
  background-color: #e6f1fa;
}
#prizeList {
  min-height: 500px;
  min-width: 500px;
}
#exportMenu {
  min-height: 140px;
  min-width: 300px;
  padding: 0;
}
#imnportMenu {
  min-height: 140px;
  min-width: 300px;
}
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.DetailsViewNavBarBtnFront {
  left: -126px;
  text-align: center;
  transform: rotate(270deg);
  background-color: white;
  padding: 6px 35px 6px 15px;
  width: 150px;
  height: 40px;
  border: 1px solid #E0E0E0;
  border-bottom: 0;
  position: absolute;
  box-shadow: 1px -12px 12px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.6s;
  cursor: pointer;
}
.exportDialogForm {
  padding: 0px 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}
.exportDialogForm h3 {
  color: #0072C6;
  font-size: 1.5em;
  text-align: center;
  margin: 30px 0px;
  border-bottom: 1px solid #d3d3d3;
  line-height: 0.1em;
}
.exportDialogForm h3 span {
  background: white;
  padding: 0px 20px;
}
.exportDialogForm fieldset {
  margin: 0;
  padding: 0;
}
.exportDialogForm label {
  margin-right: 20px;
  font-weight: normal;
}
.exportDialogForm span input[type='radio'] {
  display: none;
}
.exportDialogForm span input[type="radio"]:hover + label {
  border-bottom: 2px solid #0170c745;
}
.exportDialogForm span input[type="radio"] + label {
  border-radius: 2px;
  padding: 10px 5px;
  border: 2px solid #eaeaea;
  cursor: pointer;
}
.exportDialogForm span.disabled input[type="radio"] + label {
  cursor: not-allowed;
  color: lightgrey;
}
.exportDialogForm span input[type="radio"]:checked + label {
  border-bottom: 2px solid #0071c7;
}
#resultFilters .k-grid-header {
  display: none;
}
.detailsBoxTable {
  display: table;
  border-collapse: separate;
  width: 100%;
  font-size: 0.9em;
}
.detailsBoxTable tr:hover {
  background-color: #f1f1f1;
}
.detailsBoxTable th {
  background-color: #cde6f7;
}
.detailsBoxTable tr td {
  border: 0;
  padding: 1px 5px;
}
#singleArticleView .detailsBoxTable {
  min-width: 70%;
  width: auto;
  border-radius: 4px;
}
#singleArticleView .detailsBoxTable tr:hover {
  background-color: white;
}
.bigArticleDetailsHead {
  /*border: 1px solid #c1c1c1;*/
  border-radius: 10px;
  width: 96%;
  background-color: rgba(238, 238, 238, 0.3);
  margin-bottom: 2px;
  margin-top: 25px;
  margin-left: 2%;
}
.ArticleDetailsHeadImageonlyusertools:hover {
  background-blend-mode: difference;
}
.ArticleDetailsHeadImagetoolsunited {
  background-image: url(../gfx/TU/Icons/signet_TU_sw_128.png);
  background-position: 50% 8%;
  background-size: 5em;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
}
@-moz-document url-prefix() {
  .ArticleDetailsHeadImagetoolsunited {
    background-blend-mode: inherit;
  }
}
.ArticleDetailsHeadImageonlyusertools {
  background-image: url(../gfx/TU/Icons/googleIconPerson.png);
  background-repeat: no-repeat;
  background-position: 50% 8%;
  background-size: 7em;
  background-blend-mode: hard-light;
}
.ThreeDSign1 {
  color: blue;
}
.ThreeDSign0 {
  visibility: hidden;
}
.ThreeDSign2 {
  color: grey;
}
.ThreeDSign3 {
  color: lightgrey;
}
.ThreeDSign4 {
  color: grey;
  text-decoration: underline;
}
.DINGTCSwitches {
  display: inline;
  float: right;
  min-height: 30px;
}
.DINGTCSwitches div {
  display: inline-block;
  padding: 2px 10px;
  min-width: 50px;
  border: 1px solid #C9C9C9;
  text-align: center;
  position: relative;
  z-index: 10;
  background: white;
  cursor: pointer;
  border-radius: 4px;
}
.DINGTCSwitches div:hover {
  background-color: #efefef;
}
.activeClassification {
  border-bottom: 3px solid #0072C6 !important;
}
.duringEditVisible {
  display: none;
}
.switchTableMainDiv {
  margin: 7px;
  margin-bottom: 20px;
}
.articleDetailsImageDiv {
  position: absolute;
  right: -242px;
  width: 215px;
  height: 100%;
  height: calc(100% + 45px);
  padding-left: 30px;
  padding-top: 2px;
  overflow: auto;
  margin-top: 0px;
  z-index: 100;
  top: -45px;
  transition: all 0.2s;
}
.articleDetailsImageDiv.largeChild {
  right: -542px;
  width: 510px;
}
.articleDetailsImageDiv .btnWithImageLeft span {
  padding: 0 0px 0 10px;
}
.articleDetailsImageDiv div {
  margin-left: -10px;
  margin-top: 7px;
  pointer-events: none;
  /*richtig?! war mal: auto*/
  width: fit-content;
}
.articleDetailsImageDiv img {
  max-width: 200px;
  max-height: 150px;
  margin-bottom: 10px;
  background-color: white;
  padding: 1px;
  transition: all 0.2s;
  display: block;
  pointer-events: all;
}
.articleDetailsImageDiv img.large {
  max-width: 500px;
  max-height: inherit;
}
.articleDetailsImageDiv img.clickableImage.large:hover {
  transform: scale(1, 1);
}
.articleDetailsImageDiv img.clickableImage:hover {
  box-shadow: -8px 7px 20px 1px rgba(0, 0, 0, 0.66) !important;
  -webkit-box-shadow: -8px 7px 20px 1px rgba(0, 0, 0, 0.66) !important;
  transform: scale(1.1, 1.1);
}
.is-hover {
  transform: rotate(-2deg);
}
.is-hover .DetailsViewNavBarBtnFront {
  box-shadow: 1px -22px 22px -2px rgba(0, 0, 0, 0.24);
}
.is-hover .detailsPage {
  box-shadow: -17px -1px 22px -5px rgba(0, 0, 0, 0.28);
}
.whilePressed {
  transform: rotate(-8deg) !important;
  z-index: 20;
}
.activePage.is-hover {
  transform: rotate(0deg) !important;
}
.rotateMainView {
  transform: rotate(90deg);
  width: 585px;
  position: relative;
  height: 820px;
  top: -117px;
  left: -542px;
}
.detailViewTopDiv {
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
  overflow: visible !important;
}
.detailsViewPage {
  position: absolute;
  width: calc(100% - 7px);
  height: calc(100% + 37px);
  top: -37px;
  left: 7px;
  z-index: 10;
  transform-origin: bottom left;
  transition: all 0.6s;
}
.activePage {
  z-index: 15;
  left: 0px;
  width: 100%;
}
.k-window > .k-resize-handle {
  z-index: 30;
}
#bigArticleDetails {
  overflow: hidden;
}
.detailsPage {
  background-color: white;
  width: 100%;
  border: 1px solid #E0E0E0;
  box-shadow: -12px 3px 12px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.6s;
}
.DetailsViewBtnArea {
  vertical-align: bottom;
  padding-top: 45px;
  padding-left: 5px;
  padding-right: 5px;
}
.bigArticleDetailsBottom {
  overflow-y: hidden;
  /*border: 1px solid #c1c1c1;*/
  border-radius: 10px;
  height: 62%;
  width: 98%;
  margin-left: 1%;
}
.scrollDiv {
  overflow-y: auto;
  height: 100%;
}
#bigArticleDetailsBottomMainTable {
  height: 100%;
}
.tableDetails {
  overflow-x: auto;
}
.k-window-titlebar.k-header {
  border: 0px;
  background-color: rgba(255, 255, 255, 0);
  z-index: 20;
}
#bigArticleDetailsNavBar {
  transform: rotate(270deg);
  position: relative;
  top: 166px;
  left: -85px;
  margin: 6px 26px;
  text-align: right;
  z-index: -1;
}
.DetailsViewNavBarBtns {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  position: absolute;
  z-index: -30;
  transition: all 0.6s;
  top: 0px;
  width: 202px;
  height: 100px;
}
.disabledBtn {
  color: #E0DFDF;
}
.DetailsViewNavBarBtnBackside {
  z-index: 10;
  background-color: white;
  height: 100px;
  top: 60px;
  position: absolute;
  -webkit-box-shadow: 1px -16px 22px -2px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 1px -16px 22px -2px rgba(0, 0, 0, 0.28);
  box-shadow: 1px -16px 22px -2px rgba(0, 0, 0, 0.28);
  border: 1px solid #E0E0E0;
}
.DetailsViewNavBarBtns:nth-child(1) {
  left: -363px;
}
.DetailsViewNavBarBtns:nth-child(2) {
  left: -182px;
}
.DetailsViewNavBarBtns:nth-child(3) {
  left: 10px;
}
.DetailsViewNavBarBtns:hover {
  top: -40px;
  transform: rotate(-2deg);
}
.DetailsViewNavBarBtns:hover .DetailsViewNavBarBtnFront {
  box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
}
.DetailsViewNavBarBtns:hover .DetailsViewNavBarBtnBackside {
  box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 5px -20px 22px -2px rgba(0, 0, 0, 0.45);
}
.DetailsViewNavBarBtns:disabled:hover {
  top: 7px;
  transform: rotate(0deg);
}
.DetailsViewNavBarBtns:disabled {
  top: 7px;
}
.DetailsViewNavBarBtns:active {
  top: -50px;
  transform: rotate(-7deg);
  transition: all 0.3s;
}
#bigArticleDetailsArticleImages {
  position: absolute;
  top: 10px;
  left: 600px;
  width: 100px;
}
#bigArticleDetailsArticleImages img {
  max-width: 200px;
  max-height: 150px;
  padding: 1px;
  margin-bottom: 10px;
  background-color: white;
  transition: all 0.6s;
}
#bigArticleDetailsArticleImages img:hover {
  max-width: 350px;
  max-height: 250px;
}
.active {
  top: -10px;
  z-index: 10;
}
.active:hover {
  top: -10px;
  z-index: 10;
  transform: rotate(0deg);
  transition: all 0.3s;
}
.DetailsViewBtns {
  width: 120px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid #fff;
  border-radius: 10px;
  vertical-align: top;
  transition: all 1.5s;
  margin-bottom: 5px;
}
.DetailsViewBtns:hover {
  border: 2px solid #c1c1c1;
  background-color: rgba(237, 247, 255, 0.95);
  transition: all 0.5s;
  box-shadow: 3px 3px 20px 5px rgba(128, 128, 128, 0.2);
  -webkit-box-shadow: 3px 3px 20px 5px rgba(128, 128, 128, 0.2);
  -moz-box-shadow: 3px 3px 20px 5px rgba(128, 128, 128, 0.2);
}
.DetailsViewBtns img {
  height: 25px;
  max-width: 120px;
  transition: all 0.3s;
}
.DetailsViewBtns:hover img {
  height: 32px;
  max-width: 120px;
  transition: all 0.2s;
}
/*#mainContent {
    position: absolute;
    left: 285px;
    padding-right: 5px;
}*/
.editSignOnHover:hover img {
  opacity: 1 !important;
}
.imageInfoIcon {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  z-index: 10;
  pointer-events: none;
}
.imgTrash {
  position: absolute;
  top: inherit;
  margin-top: -30px;
  margin-left: 5px;
  pointer-events: all;
}
.imgTrash:hover {
  color: #e52e35;
}
.detailViewWindow .k-window-titlebar.k-header {
  text-align: center;
  border-top: 0px solid #dbdbdb;
  margin-top: -38px !important;
  position: relative;
}
.detailViewWindow .k-window-titlebar.k-header .k-window-title {
  padding: 0px 40px 0px 10px;
}
.detailViewWindow .k-window-titlebar.k-header .k-window-title span {
  color: #0072c6;
}
.k-widget.k-window.detailViewWindow .k-overlay {
  display: none;
}
.bigArticleDetailsBottom form div {
  border: 0px;
}
.bigArticleDetailsBottom form div .k-grid-header th.k-header,
.k-filter-row th {
  border: 0px;
  padding: 0 5px;
  background-color: #cde6f7;
}
#resultFileSettingsInputFormComponents {
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
}
#resultFileSettingsInputFormComponents tbody tr:hover {
  background-color: #e4e4e4;
}
#resultFileSettingsInputFormComponents tr td {
  text-align: center;
}
#resultFileSettingsInputFormComponents .glyphicon.glyphicon-eye-open:hover {
  color: #0072c6;
}
#resultFileSettingsInputFormComponents th {
  text-align: center;
  padding: 0px 5px;
}
.bigArticleDetailsBottom .scrollDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.01);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.bigArticleDetailsBottom .scrollDiv:hover::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}
.bigArticleDetailsBottom .scrollDiv::-webkit-scrollbar {
  width: 15px;
  background-color: #F5F5F5;
}
.bigArticleDetailsBottom .scrollDiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.01);
  background-color: rgba(85, 85, 85, 0.2);
}
.bigArticleDetailsBottom .scrollDiv:hover::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
  background-color: rgba(85, 85, 85, 0.5);
}
.detailViewTopDiv .articleDetailsImageDiv::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.01);
  border-radius: 10px;
  background-color: #F5F5F5;
}
.detailViewTopDiv .articleDetailsImageDiv:hover::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}
.detailViewTopDiv .articleDetailsImageDiv::-webkit-scrollbar {
  width: 7px;
  background-color: #F5F5F5;
}
.detailViewTopDiv .articleDetailsImageDiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.01);
  background-color: rgba(0, 0, 0, 0.6);
}
.detailViewTopDiv .articleDetailsImageDiv:hover::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
  background-color: rgba(0, 0, 0, 0.7);
}
form#createOwnComponentForm {
  padding: 10px 30px;
}
.accessoriesDiv td {
  width: 50%;
}
.fakeWindow {
  position: fixed;
  top: 20%;
  left: 25%;
  background: white;
  border: 1px solid black;
  z-index: 10;
}
.speedsFeedsTable tr td:nth-child(1) {
  width: 30px;
}
span.Inactive-true {
  color: grey;
}
.tableWithSwitch {
  /*border: 1px solid #C1C1C1;*/
  border-radius: 2px;
  cursor: pointer;
}
.tableWithSwitch h5 {
  text-align: center;
  background-color: #009fe3;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.tableWithSwitch:hover h5 {
  background-color: #005692;
}
span.materialGroup-0 {
  opacity: 0.1;
  background: lightgrey;
}
span.materialGroup-1 {
  background-image: linear-gradient(to right bottom, #f2f2f2 40%, #ff000000 60%);
}
.MaterialIcons span {
  border: 1px solid #e0e0e0;
  padding: 1px;
  display: inline-block;
  width: 19px;
  text-align: center;
  border-radius: 4px;
}
.MaterialIcons span.P {
  background-color: #00B5FF;
}
.MaterialIcons span.M {
  background-color: #FFFF32;
}
.MaterialIcons span.K {
  background-color: #ff4400;
}
.MaterialIcons span.N {
  background-color: #1CEA00;
}
.MaterialIcons span.S {
  background-color: #FFA02F;
}
.MaterialIcons span.H {
  background-color: #DADAE7;
}
.MaterialIcons span.O {
  background-color: #777;
}
.MaterialIcons {
  text-align: right;
  margin-right: 5px;
}
.articleDetailTitle {
  text-overflow: ellipsis;
  overflow: hidden;
}
.highlight {
  border-bottom: 1px solid #007fbf !important;
}
.secondRow th,
.secondRow td {
  font-weight: 100;
  font-size: 0.9em;
  background: white;
  color: grey;
  padding: 0px;
  min-width: 45px;
}
.detailInfo {
  font-weight: 100;
  font-size: 0.9em;
  color: grey;
}
.detailsBoxTable th {
  padding: 2px;
}
.detailsBoxTable tr td {
  border: 0;
  padding: 1px 5px;
  max-width: 150px;
  vertical-align: top;
}
.k-list-container {
  min-width: 126px !important;
  /*width: auto !important;*/
}
.k-list {
  width: auto !important;
}
.matchingTextInput {
  width: 100%;
}
.matchingRow {
  border: 1px solid #e6f2fa !important;
  border-radius: 3px;
  margin: 10px 0px;
}
.matchingRow .matching {
  margin-bottom: 15px;
  padding-bottom: 15px;
  overflow: auto;
}
.matchingRow .matching:not(:last-child) {
  border-bottom: 1px solid #cde6f7;
}
/* General layout styles */
.w-fixed-250 {
  width: 250px;
}
.top-50 {
  top: 50%;
}
.p-right-4 {
  padding-right: 2rem !important;
}
.p-left-4 {
  padding-left: 2rem !important;
}
.p-right-5 {
  padding-right: 3rem !important;
}
.p-left-5 {
  padding-left: 3rem !important;
}
.m-bottom-3 {
  margin-bottom: 1rem !important;
}
.m-bottom-4 {
  margin-bottom: 2rem !important;
}
/* General theme styles */
.color-grid-alt {
  background-color: rgba(0, 114, 198, 0.1);
}
.export-card-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #cccccc;
}
.export-list-title {
  width: 100%;
  background-color: #007fbf;
  color: white;
  text-align: center;
  margin-bottom: 1.75rem;
  padding: 0.875rem;
  font-weight: 600;
  font-size: 1.25rem;
}
.export-card {
  width: 180px;
  height: 180px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #cccccc;
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  -ms-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
  overflow: hidden;
  -ms-flex-align: stretch;
  align-items: stretch;
  padding: 0.875rem;
}
.export-card:focus {
  outline: 2px solid #3aabf0;
}
.export-card:hover {
  -ms-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 1.5px 6px rgba(0, 0, 0, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 1.5px 6px rgba(0, 0, 0, 0.18);
}
.export-card.export-card--disabled {
  opacity: 1;
  pointer-events: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Gray()";
  filter: grayscale(1);
}
.export-card.export-card--disabled:hover .export-card-disabled-overlay {
  display: -ms-flexbox;
  display: flex;
}
.export-card-disabled-overlay {
  display: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(220, 220, 220, 0.85);
  color: #444;
  font-size: 1.1rem;
  font-weight: 600;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  border-radius: 5px;
}
.export-card--disabled {
  opacity: 0.5;
  pointer-events: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Gray()";
  filter: grayscale(1);
}
.export-card-img-wrapper {
  width: 100%;
  height: 80%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
  /* Add space for the border */
}
/* Add a pseudo-element for the consistent border */
.export-card-img-wrapper::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #cccccc;
  width: 100%;
  /* Full width border */
}
.export-card-logo {
  position: absolute;
  top: 0;
  bottom: 20px;
  /* Increase bottom space to account for border */
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: calc(100% - 20px);
  /* Adjust to account for bottom space */
  margin: auto;
  width: auto;
  height: auto;
  -ms-transition: opacity 0.2s;
  transition: opacity 0.2s;
  /* Remove the border and padding from here */
}
.export-card-title {
  width: 100%;
  height: 20%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  color: #222;
  font-size: 1.1875rem;
  font-weight: 600;
  background: none;
  opacity: 1;
  padding: 5px 0;
  white-space: pre-line;
  letter-spacing: 0.5px;
}
.export-card-list-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* IE doesn't support gap, so we need margin fallback */
  margin: -1.3125rem;
  -ms-flex-pack: center;
  justify-content: center;
  max-height: 187.5rem;
  overflow: hidden;
  -ms-transition: max-height 0.8s ease-in;
  transition: max-height 0.8s ease-in;
  margin-bottom: 1.75rem;
  padding-bottom: 10px;
  width: 100%;
  /* Ensure container uses full width */
  /* Add margin to children for IE gap fallback */
}
.export-card-list-inner > * {
  margin: 1.3125rem;
  /* Ensure cards don't grow beyond their width */
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.export-card-list-inner.export-card-list-collapsed {
  max-height: 14rem;
}
.export-card-toggle-bar {
  width: 180px;
  background: #007fbf;
  color: #fff;
  text-align: center;
  cursor: pointer;
  padding: 5px 0;
  font-size: 1rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* IE doesn't support gap, so add margin to children */
  -ms-user-select: none;
  user-select: none;
}
.export-card-toggle-bar .material-icons {
  font-size: 2.375rem;
  vertical-align: middle;
  margin-right: 0.875rem;
}
.export-list-title .export-list-download-icon {
  vertical-align: text-bottom;
  margin-right: 0.525rem;
  font-size: 1.5rem;
  text-align: center;
  position: relative;
}
#toolClassCard,
.tool-class-card-list {
  border: none !important;
  box-shadow: none !important;
}
.tool-class-card-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: 15px;
  width: 100%;
  min-height: 200px;
  margin-top: 1.5rem;
}
/* IE fallback for gap property */
.tool-class-card-list > * {
  margin: 0 7.5px;
}
.tool-class-card-list > *:first-child {
  margin-left: 0;
}
.tool-class-card-list > *:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1000px) {
  .tool-class-card-list {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  /* Reset margin for IE in wrap mode */
  .tool-class-card-list > * {
    margin: 7.5px;
  }
}
.tool-class-card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  width: 180px;
  height: 190px;
  border: 1px solid #ccc;
  border-radius: 10px;
  -ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  background: #f3f3f3;
  -ms-transition: box-shadow 0.2s, border-color 0.2s, transform 0.1s;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.1s;
}
.tool-class-card:hover {
  -ms-box-shadow: 0 4px 16px rgba(0, 123, 198, 0.15);
  box-shadow: 0 4px 16px rgba(0, 123, 198, 0.15);
  border-color: #0072c6;
  -ms-transform: translateY(-2px) scale(1.03);
  transform: translateY(-2px) scale(1.03);
}
.tool-class-card-content {
  -ms-flex: 1 1 60%;
  flex: 1 1 60%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 60%;
}
.tool-class-icon-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
}
.tool-class-icon {
  max-width: 70px;
  max-height: 33px;
  display: block;
}
.tool-class-id {
  color: #888;
  font-size: 1em;
  margin-top: 8px;
}
.tool-class-card-title-wrapper {
  height: 40%;
  width: 100%;
  background: #fff;
  border-radius: 0 0 10px 10px;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 16px;
  border-top: 1px solid #f0f0f0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.tool-class-card-title {
  width: 100%;
  text-align: center;
  font-size: 1.1em;
  font-weight: 600;
  color: #222;
  padding: 10px 0;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/* Page Specific Styles */
/*@import "accessory/search.less";
@import "administration/user.less";*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%;
  }
}
.unsupportedBrowserDiv {
  position: absolute;
  top: 30%;
  left: 35%;
  width: 30%;
  background-color: white;
  padding: 50px 50px 10px;
  border: 1px solid black;
  text-align: center;
  z-index: 99999999;
}
.unsupportedBrowserDiv div {
  margin-bottom: 20px;
}
.greyText {
  color: grey;
}
.glyphicon-ok.default-color {
  color: #00c500;
}
.glyphicon-remove.default-color {
  color: red;
}
.invisibleTable {
  border: 0;
}
.invisibleTable tr {
  border: 0;
}
.invisibleTable tr td {
  border: 0;
}
.invisibleTable tr th {
  border: 0;
}
.tableWithPadding tr td {
  padding: 10px;
}
body {
  font-family: Arial;
}