/*===========*/
/* VARIABLES */
/*===========*/
:root {
  --navbar-padding: 50px;
  --topbar-height: 46px;
}

html {
  scroll-padding-top: var(--navbar-padding);
}

#cloud-navbar-header{
  position: fixed;
  width: 100%;
  z-index: 9;
}

#list-container {
  height: 100%;
  overflow: auto;
  margin: 0;
  padding: 0;
}

html.ew-framework .ew-tooltip-container.hover .tooltip-top,
html.ew-framework .ew-tooltip-container.hover .tooltip-bottom,
html.ew-framework .ew-tooltip-container.hover .tooltip-right,
html.ew-framework .ew-tooltip-container.hover .tooltip-left {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-in;
}

.ew-input-container.js-search.loading + .search-spinner {
  display: block;
}

.ew-input-container.js-search + .search-spinner{
  display: none;
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: 24px;
  right: 30px;
}

html.ew-framework textarea.ew-input, html.ew-framework textarea.ew-input.flat {
  height: auto;
}

html.ew-framework .create--top-bar {
  display: flex;
  position: sticky;
  height: var(--topbar-height);
  z-index: 10;
}

html.ew-framework .create--top-bar .tc-left-menu, html.ew-framework .create--list-container .tc-left-menu {
  border-right: 1px solid var(--brand-color);
}

html.ew-framework.dark-theme .create--top-bar .tc-left-menu,
html.ew-framework.dark-theme .create--list-container .tc-left-menu {
  border-right: 1px solid #E9EBF2;
}

html.ew-framework .create--list-container {
  overflow: hidden;
}

html.ew-framework .create--placeholder, html.ew-framework .create--loader, html.ew-framework .create--list-container {
  height: calc(100vh - var(--navbar-padding) - var(--topbar-height));
}

html.ew-framework .ew-side-menu ul li .ew-dropdown.open-dropdown > div ul.ew-dropdown-content {
  background-color: #192736;
}

html.ew-framework .ew-side-menu  ul li .ew-dropdown.open-dropdown > div ul.ew-dropdown-content > li:hover > .dropdown-btn-link {
  color: #192736;
}

html.ew-framework.dark-theme .ew-side-menu  ul li .ew-dropdown.open-dropdown > div ul.ew-dropdown-content {
  background-color: #e1e1ff;
}

html.ew-framework.dark-theme .ew-side-menu  ul li .ew-dropdown.open-dropdown > div ul.ew-dropdown-content > li:hover > .dropdown-btn-link {
  color: #e1e1ff;
}

html.ew-framework .navbar--title {
  color: var(--brand-color);
}

html.ew-framework .ew-input-container input.error {
  background: red;
}

html.ew-framework .admin-panel-item {
  width: 100%;
}

html.ew-framework label.ew-file-input + input[type="file"] {
  visibility: hidden;
}

html.ew-framework label.ew-file-input {
  cursor: pointer;
}

html.ew-framework label.label-status {
  height: 100%;
  padding: 33% 0;
}

html.ew-framework .label-status > input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

html.ew-framework .position-absolute {
  position: absolute;
}

html.ew-framework img.click-img {
  margin: auto;
  height: 100%;
  max-height: 96px;
  max-width: 100%;
}

html.ew-framework .delete-1, .delete-2 {
  top: 395px;
}

html.ew-framework .delete-1 {
  left: 195px;
}

html.ew-framework .delete-2 {
  left: 280px;
}

html.ew-framework .delete-comm {
  top: 190px;
  left: 335px;
}

html.ew-framework .delete-1, html.ew-framework .delete-2, html.ew-framework .delete-comm {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 1px solid gray;
  border-radius: 8px;
  z-index: 3;
  cursor: pointer;
}
html.ew-framework div.tyness-comm {
  top: 180px;
  left: 190px;
  height: 35px;
  width: 135px;
}

html.ew-framework .expansion-1 {
  left: 164px;
  z-index: 2;
}

html.ew-framework .expansion-2 {
  left: 250px;
}

html.ew-framework .ew-modal-container.large {
  min-width: 60%;
  max-width: 60%;
}

html.ew-framework .ew-modal-container.xlarge {
  min-width: 80%;
  max-width: 80%;
}

html.ew-framework .ew-modal-container .ew-modal-body form {
  padding-right: 10px;
}

html.ew-framework .title > span {
  font-size: 0.9rem;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.ew-framework img.tyness-comm {
  position: relative;
  top: 0;
  left: 0;
  height: 30px;
  width: auto;
  max-width: 130px;
}

html.ew-framework .main-wrapper, html.ew-framework .top-square, .changelogs-list {
  top: var(--navbar-padding);
}

html.ew-framework .margin-auto {
  margin: auto;
}

html.ew-framework .margin-ub-auto, html.ew-framework p.margin-ub-auto {
  margin: auto 0;
}

html.ew-framework .margin-left-0, html.ew-framework * .margin-left-0, html.ew-framework button.margin-left-0 {
  margin-left: 0;
}

html.ew-framework .no-padding, html.ew-framework * .no-margin {
  margin: 0;
}

html.ew-framework .no-padding, html.ew-framework * .no-padding {
  padding: 0;
}

html.ew-framework .presse-etoupe-1, html.ew-framework .presse-etoupe-2 {
  position: absolute;
  left: 50%
}

html.ew-framework .presse-etoupe-1 {
  top: 30%;
}

html.ew-framework .presse-etoupe-2 {
  top: 66%
}


html.ew-framework .slider-text {
  font-size: 0.6rem;
}

html.ew-framework .text-align-right {
  text-align: right;
}

html.ew-framework .text-red {
  color: red;
}

html.ew-framework .step-title {
  line-height: 3rem;
  padding-left: 10px;
  font-size: 1.5rem;
}

html.ew-framework .tc-left-menu {
  background-color: var(--gradient-color-1);
  color: #E9EBF2;
  padding: 0;
}

html.ew-framework .tc-left-menu ul > li {
  margin: 1rem 1rem;
}

html.ew-framework .tc-left-menu .tc-category.active,
html.ew-framework .tc-left-menu .tc-subcategory.active {
  color: var(--brand-color);
  font-weight: bold;
}

html.ew-framework .top-square {
  position: sticky;
  z-index: 10;
}

html.ew-framework .top-square .top-square-content {
  width: 50%;
}

html.ew-framework .top-square .top-square-content > span {
  display: inline-block;
  padding: 1rem;
  font-weight: bold;
}

html.ew-framework .tyness-btn {
  position: absolute;
  height: 120px;
  width: 90px;
  top: 272px;
  z-index: 1;
  /*cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 150ms ease-in-out;*/
}

/*html.ew-framework .tyness-btn:focus:not(img), html.ew-framework .tyness-btn:hover:not(img) {
  z-index: 5;
  border-color: var(--success-color-saturated);
}*/

html.ew-framework .tyness-btn.fastening,  html.ew-framework .tyness-btn.other, html.ew-framework .tyness-btn.pwr {
  right: 0;
  white-space: normal;
}

html.ew-framework .tyness-btn.fastening {
  top: 136px;

}

html.ew-framework .tyness-btn.pwr {
  top: 0;
}

html.ew-framework .ew-table td.value {
  word-break: break-word;
}

html.ew-framework .tyness-table {
  width: 100%;
  min-width: 500px;
}

html.ew-framework .tyness-table td.price-error {
  color: var(--error-contrast-font);
  background-color: var(--error-color);
}

html.ew-framework .tyness-table td img {
  margin: auto;
}

html.ew-framework .tyness-nowrap {
  flex-wrap: nowrap;
}

html.ew-framework .type {
  background-color: #192736;
  color: #F5F6F7;
  font-weight: bold;
  line-height: 0.2rem;
  text-align: start;
}
html.ew-framework.dark-theme .type {
  background-color: #39597c;
}

html.ew-framework .type.filled {
  background-color: rgba(20,255,60,0.3);
}

html.ew-framework .visual {
  max-height: 150px;
  object-fit: contain;
}

.changelogs-date {
  margin-left:auto;
  margin-right: 1rem;
  font-size: 1rem;
  white-space: inherit;
}

.changelogs-list {
  position: fixed;
  max-height: calc(100% - var(--navbar-padding) - 5px);
  overflow: auto;
  z-index: 10;
}

#side-menu-navigation[type="checkbox"]:checked ~ .changelogs-list {
  left: 235px;
}

.clickable:hover {
  cursor: pointer;
}

.cursor-blocked:hover{
  cursor: not-allowed;
}

html.ew-framework span.product-label {
  display: block;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
}

html.ew-framework .ew-btn.hidden, html.ew-framework .hidden, .hidden {
  display: none;
}

html.dark-theme .img-label-wrapper.dark-theme {
  background: var(--complement-color);
}

html.dark-theme .tyness-table-img {
  background: var(--complement-color-light);
}

.img {
  margin: 0 auto;
}

.img-label-wrapper{
  width: 100%; height: 100px;  display: flex; justify-content: center; align-items: center;
  border: 2px solid transparent; transition: border-color 150ms ease-in-out;
}

.img-label-wrapper:hover, span:hover + .img-label-wrapper {
  cursor: pointer;
  border: 2px solid var(--success-color-saturated);
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.logo {
  position: absolute;
  top: 5px;
  left: 30px;
  height: 5%;
  border-bottom: solid 3px #00C87C
}

.low-opacity {
  opacity: 40%;
}

#step-content, #tyness-img {
  position: relative;
}

.today {
  color: blue;
}

/**
 * SVG
 */
svg .fill-font-color {
  fill: var(--font-color)
}

svg .fill-none {
  fill: none
}

svg .fill-complement-color-dark {
  fill: var(--complement-color-dark)
}

svg .fill-color-0 {
  fill: #ffffff
}

svg .fill-color-1 {
  fill: #44cc5f
}

svg .fill-color-2 {
  fill: #7467f0
}

svg .fill-color-3 {
  fill: #f5365d
}

svg .fill-color-4 {
  fill: #fb6340
}

svg .fill-color-5 {
  fill: #575756
}

svg .stroke-font-color {
  stroke: var(--font-color)
}

/**
 * MEDIA QUERIES
 */
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

html.ew-framework .xs-1dot5 {
  box-sizing: border-box;
  flex-basis: 12.5%;
  max-width: 12.5%;
  padding: 1rem;
}

@media only screen and (max-width: 40rem) {
  html.ew-framework button.xs-no-text, html.ew-framework .ew-btn.xs-no-text {font-size: 0;}
}

@media only screen and (min-width: 41rem) {
  html.ew-framework .sm-1dot5 {
    box-sizing: border-box;
    flex-basis: 12.5%;
    max-width: 12.5%;
    padding: 1rem;
  }
}

@media only screen and (min-width: 65rem) {
  html.ew-framework .md-1dot5 {
    box-sizing: border-box;
    flex-basis: 12.5%;
    max-width: 12.5%;
    padding: 1rem;
  }
}

@media only screen and (min-width: 91rem) {
  html.ew-framework .lg-1dot5 {
    box-sizing: border-box;
    flex-basis: 12.5%;
    max-width: 12.5%;
    padding: 1rem;
  }
}

@media only screen and (min-width: 121rem) {
  html.ew-framework .xl-1dot5 {
    box-sizing: border-box;
    flex-basis: 12.5%;
    max-width: 12.5%;
    padding: 1rem;
  }
}

@media only screen and (min-width: 151rem) {
  html.ew-framework .xxl-1dot5 {
    box-sizing: border-box;
    flex-basis: 10%;
    max-width: 10%;
    padding: 1rem;
  }
}


/*
    FONTS
*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(./../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}