/* 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 */
.helpPageWithIMG img {
  margin-bottom: 100px;
  margin-top: 20px;
  border: 1px solid grey;
  max-width: 100%;
}
.helpPageWithIMG div {
  font-weight: 600;
}
.helpPageWithIMG h4 {
  color: #007fbf;
}
.redBorder {
  border: 3px solid red !important;
  border-radius: 4px;
}
.redColor {
  color: red;
}
.greyBackgroundOnHover:hover {
  background-color: #f7f7f7;
}
.spinner.onTheRight {
  right: 25px !important;
  left: auto !important;
}
.textBox {
  padding: 10px;
  border-radius: 2px;
}
.spinner div div {
  transition: all 5s;
}
.spinner:hover div div {
  background: green !important;
  box-shadow: #000000 2000px 19px 5px !important;
}
.customTooltip {
  position: relative;
  display: inline-block;
}
.customTooltip .tooltiptext {
  display: none;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  /* Position the tooltip */
  position: absolute;
  z-index: 150;
}
.customTooltip:hover .tooltiptext {
  display: block;
}
.customTooltip .tooltiptext::after {
  content: "";
  position: absolute;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
}
.tooltiptextTop {
  bottom: 300%;
  left: 50%;
  margin-left: -60px;
}
.customTooltip .tooltiptextTop::after {
  border-color: black transparent transparent transparent;
  left: 50%;
  top: 100%;
}
.customTooltip .tooltiptextBottom::after {
  border-color: transparent transparent black transparent;
  left: 50%;
  bottom: 100%;
}
.tooltiptextBottom {
  top: 150%;
  left: 50%;
  margin-left: -60px;
}
.tooltiptextLeft {
  top: -5px;
  right: 110%;
  white-space: nowrap;
}
.customTooltip .tooltiptextLeft::after {
  border-color: transparent transparent transparent black;
  top: 50%;
  left: 100% !important;
  margin-left: 0px;
  margin-top: -5px;
}
.tooltiptextRight {
  top: -5px;
  left: 110%;
  white-space: nowrap;
}
.customTooltip .tooltiptextRight::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.ButtonWithSmallIcon {
  height: 38px;
}
.ButtonWithSmallIcon img {
  height: 100%;
}
.ButtonWithSmallIcon span {
  vertical-align: sub;
}
.highlightedFont {
  color: #007fbf;
}
/* Page specific */
.btnWithImageTop {
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 5px;
  display: inline-block;
  padding: 7px;
  height: 70px;
  cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
  margin: 3px;
  text-align: center;
  font-size: 0.8em;
  color: black;
}
.btnWithImageTop:hover {
  box-shadow: 0px 0px 10px 0px #cde6f7;
  border-color: rgba(0, 114, 198, 0.5);
}
.btnWithImageTop img {
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}
.btnWithImageTopFixedSize {
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 5px;
  display: inline-block;
  padding: 3px;
  height: 70px;
  width: 100px;
  cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
  margin: 3px;
  text-align: center;
  vertical-align: bottom;
  font-size: 0.8em;
  color: black !important;
  position: relative;
  background: transparent;
}
.btnWithImageTopFixedSize p {
  position: absolute;
  bottom: 10px;
  width: 100%;
  left: 0px;
}
.btnWithImageTopFixedSize:hover {
  box-shadow: 0px 0px 10px 0px #cde6f7;
  border-color: rgba(0, 114, 198, 0.5);
  background-color: rgba(255, 255, 255, 0.5);
}
.btnWithImageTopFixedSize img {
  max-width: 95px;
  max-height: 40px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 35px;
}
.btnWithImageTopFixedSize .material-icons {
  font-size: 3em;
  opacity: 0.6;
}
.btnWithImageTopFixedSize:hover .material-icons {
  opacity: 1;
}
.btnWithImageLeft {
  border: 1px solid rgba(186, 186, 186, 0.2);
  border-radius: 5px;
  display: inline-block;
  padding: 5px;
  height: 50px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 3px;
}
.btnWithImageLeft:hover {
  box-shadow: 0px 0px 10px 0px #cde6f7;
  border-color: rgba(0, 114, 198, 0.5);
  transition: all 0.1s;
}
.btnWithImageLeft img {
  max-width: 40px;
  max-height: 40px;
}
.btnWithImageLeft span {
  font-size: 1.2em;
  padding: 0 20px 0 10px;
}
.btnThin {
  height: 36px !important;
}
.radioBtns {
  margin-right: 5px;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  padding: 3px;
  transition: all 0.3s;
  margin-bottom: 0px;
}
.radioBtns:hover {
  background-color: #EFEFEF;
}
.radioBtns input {
  margin-left: 2px;
}
.checkBox {
  margin-right: 5px;
  border: 1px solid #EFEFEF;
  border-radius: 5px;
  padding: 3px;
  transition: all 0.3s;
  margin-bottom: 0px;
}
.checkBox:hover {
  background-color: #EFEFEF;
}
.checkBox input {
  margin-left: 2px;
}
.language-dropdown-btn {
  color: #333333;
  padding: 10px;
}
img.dropdown-option-flag {
  height: 18px;
  width: 30px;
  border: 1px solid #e8e8e8;
}
a.languageDropdownOption:hover {
  background-color: #f5f5f5 !important;
}
.open > .dropdown-menu {
  display: block;
}
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 25px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 150px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #e85211;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  left: auto;
  right: 0;
}
.dropdown-menu-left {
  left: 0;
  right: auto;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
[role="button"] {
  cursor: pointer;
}
.SwitchPageBtn {
  background-color: #009fe3;
  border-radius: 10px;
  border: 1px solid black;
  margin-left: 10px;
}
.SwitchPageBtn:hover {
  background-color: #cde6f7;
}
.SwitchPageBtn:disabled {
  background-color: #fff;
  color: black;
}
.clickableImage {
  border: 1px solid #C1C1C1;
  border-radius: 4px;
  transition: all 0.3s;
  cursor: pointer;
}
.clickableImage:hover {
  box-shadow: 8px -7px 20px 1px #ebebeba8;
  transform: scale(1.02, 1.02);
}
.clickable {
  cursor: pointer;
}
.tableWithNoBorder tr td {
  border: 0;
}
.btn.activated {
  background: white;
  cursor: not-allowed;
  border-bottom-color: #0072c6;
  border-bottom-width: 3px;
  padding: 5px 12px;
}