﻿/* 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 */
/* Page specific */
#searchBtn {
  min-width: 200px;
}
#toolTree .k-plus {
  background-position: 0 -208px;
}
#toolTree .k-treeview .k-item {
  white-space: initial;
}
.TuOwnComponentsSwitch span.sourceCount {
  min-width: 33px;
  display: inline-block;
}
#classificationTreeview .k-sprite,
#treeview .k-sprite {
  background-image: url("");
}
.rootfolder {
  background-position: 0 0;
}
.folder {
  background-position: 0 -16px;
}
.pdf {
  background-position: 0 -32px;
}
.html {
  background-position: 0 -48px;
}
.image {
  background-position: 0 -64px;
}
#helpImgDiv {
  border: 2px solid #c3c3c3;
  border-radius: 10px;
}
.parametricSearchTreeUL {
  /*border: 1px solid #c3c3c3;
    border-right:0;*/
}
.firstChilds {
  background-color: #fafafa;
}
.secChilds {
  background-color: #f1f1f1;
}
.thirdChilds {
  background-color: #fafafa;
}
#classificationTreeview,
#treeview {
  border: 1px solid #ddd;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 0px;
  background-color: #fbfbfb;
  padding: 5px;
}
#classificationTreeview .treeviewItem > span {
  display: flex;
  align-items: center;
}
#mainTable td,
th {
  padding: 2px 7px;
}
.container {
  width: auto;
  max-width: initial;
}
#helpImg {
  width: 100%;
  min-width: 230px;
  max-width: 800px;
  max-height: 70vh;
  background-color: white;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  background-color: #fbfbfb;
}
.classificationIcons {
  max-height: 30px;
  max-width: 60px;
}
/*#extendedsearchForm, #flip {
    border: solid 1px #c3c3c3;
}*/
#flip {
  margin-top: 15px;
  transition: border-bottom-left-radius 1s, border-bottom-right-radius 1s;
}
#flip .down {
  display: inline;
}
#flip.flipped .down {
  display: none;
}
#flip .up {
  display: none;
}
#flip.flipped .up {
  display: inline;
}
#flip.flipped {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
#extendedsearchForm {
  display: none;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  border-top: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  background-color: #fbfbfb;
  padding: 10px 0px 10px 0px;
}
#searchForm {
  border: 1px solid #ddd;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  background-color: #fbfbfb;
  border-radius: 4px;
  margin-top: 15px;
  padding: 10px 0px 10px 0px;
}
#checkBoxesDiv {
  border: 1px solid #ddd;
  background-color: #fbfbfb;
  border-radius: 4px;
  width: 100%;
}
#checkBoxesDiv ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  float: right;
  list-style-type: none;
}
#checkBoxesDiv ul li {
  margin: 5px;
}
.k-treeview .k-state-selected {
  border-radius: 10px;
}
div.k-treeview {
  overflow: hidden;
}
#classSystemSwitcher {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 1;
}
#classSystemSwitcher a {
  background-color: white;
  border: 1px solid #c1c1c1;
  border-radius: 2px;
}
#toolTree {
  position: relative;
  min-width: 340px;
}
.active {
  border-bottom: 2px solid #0072c6 !important;
}
span.ParametricSearchImgSpan {
  width: 60px;
  padding-left: 5px;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
}
.toolClassSelectionWithFilterEntry:hover {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.toolClassSelectionWithFilterEntry {
  padding-left: 20px;
}
.marginBottom {
  margin-bottom: 40px;
}
div.cssTable {
  display: table;
  border-collapse: collapse;
}
div.cssTr {
  display: table-row;
  flex-wrap: wrap;
  margin-left: 5px;
}
#searchFormTD div.cssTr {
  display: flex;
}
@media screen and (max-width: 800px) {
  #mainTable > div.cssTr {
    display: flex;
  }
}
div.cssTd {
  display: table-cell;
  padding: 5px;
  vertical-align: top;
  overflow: hidden;
}
#searchFormTD iv.cssTd {
  vertical-align: middle;
}
div.cssTd.hasPlusBtn_True > span,
div.cssTd.hasPlusBtn_True > input {
  width: 258px !important;
}
#searchFormTD {
  width: 655px;
  min-width: 655px;
}
#searchFormTD .textTD {
  width: 266px;
}
#searchFormTD .standardAbbreviationTD {
  width: 50px;
}
@media screen and (max-width: 1700px) {
  #searchFormTD {
    width: 555px;
    min-width: 555px;
  }
  #searchFormTD .textTD {
    width: 166px;
  }
}
@media screen and (max-width: 1000px) {
  #searchFormTD {
    width: 340px;
    min-width: 340px;
  }
  #searchFormTD .textTD {
    width: 266px;
  }
  #searchFormTD .standardAbbreviationTD {
    width: auto;
  }
  #searchFormTD div.cssTr:not(:last-child) {
    margin-bottom: 5px;
    border-bottom: 10px solid #fff;
    padding-bottom: 5px;
  }
  #searchFormTD div.cssTd {
    padding: 0px 5px;
  }
}
@media screen and (max-width: 800px) and (min-width: 570px) {
  #searchFormTD {
    width: 555px;
    min-width: 555px;
  }
  #searchFormTD .textTD {
    width: 166px;
  }
}