/*Font Size*/
body {
  font-family: "Calibri", Fallback, sans-serif;
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("font/material_icons_sharp.woff2") format("woff2");
}
/*
.marker{
 z-index: 1;
}
*/
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
.txt-j {
  letter-spacing: 0;
  font-family: "Calibri", Fallback, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 0.875rem;
}
.txt-i {
  letter-spacing: 0;
  font-family: "Calibri", Fallback, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 0.875rem;
}
.mti-th {
  color: black;
}
.fav-inf {
    width: 11.75rem;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: unset;
}
.mti-pi img {
    max-height: 22rem;
    object-fit: cover;
}
.ti-th-topic {
   margin-bottom: 0.5rem;
   margin-top: 1.5rem;
}
.txt-h4 {
  letter-spacing: 0;
  font-family: "Calibri", Fallback, sans-serif;
  font-weight: normal;
  font-size: 1.75rem;
  color: black;
}
.mti-head {
  margin: 1rem 1rem 0.3125rem 1.5rem;
}
.txt-h3 {
  letter-spacing: 0;
  font-family: "Calibri", Fallback, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 0.875rem;
  color: black;
}
.mri-head .bttClose{
	right: 0.5rem;
}
.mti-head .material-icons {
    font-size: 30px;
    color: black;
}
.mti-head .bttClose {
    top: 0.125rem;
    right: 1rem;
}
.mti-th .th-v {
    white-space: normal;
}
/*End Font Size*/
/*TEST*/
.droplistSelect {
    height: 2rem;
    margin: 0 0 1rem 0;
    border: unset;
    background-color: #fff;
    margin-left: 1.5rem;
    width: calc(100% - 3rem);
    border-bottom: 1px solid black;
	-webkit-appearance: none;
}
/*END TEST*/
/*START Disable not Used*/
#mod_TopBar {
  display: none;
}
#mod_NavBar {
  display: none;
}
.btt-arf {
  display: none;
}
/*END Disable not Used*/

/*Start SideBar*/
#container_sidebar {
  display: flex;
}

#sidebar {
  position: fixed;
  top: 25px;
  right: -153px; /* Hidden initially */
  width: 203px; /* Expanded width */
  height: min-content;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: right 0.3s ease;
  gap: 1px;
}
.sidebar_element {
  text-decoration: none;
  color: #000000;
  display: flex;
  align-items: center;
  height: 47px;
  width: 100%;
  transition: background-color 0.3s ease;
  cursor: pointer;
  background-color: #f2f2f2;
  padding-bottom: 3px;
}

#sidebar img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

#content {
  margin-right: 40px; /* Adjusted margin for expanded menu */
  padding: 20px;
  transition: margin-right 0.3s ease;
}

#content h2 {
  margin-bottom: 20px;
}

.sidebar_elem_icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar_elem_txt {
  font-family: "Calibri", Fallback, sans-serif;
  font-size: 14px;
}
.sidebar_mobile_on {
  display: none;
}
#sidebar_mob {
  display: none;
  width: 203px;
  height: min-content;
  background-color: transparent;
  transition: right 0.3s ease;
  gap: 1px;
  right: 0 !important;
  position: relative;
  background-color: #f2f2f2;
}
.sidebar_element_mob {
  text-decoration: none;
  color: #000000;
  display: flex;
  align-items: center;
  height: 47px;
  width: 100%;
  transition: background-color 0.3s ease;
  cursor: pointer;
  background-color: #f2f2f2;
  padding-bottom: 3px;
}
#sidebar_mob {
  padding-bottom: 0;
}
#sidebar_mob_slider {
  position: absolute;
  top: 0;
  right: 203px;
  display: none;
}
.sidebar_element.sb_deact {
  pointer-events: none;
  cursor: none;
}
#tools_mob.sb_deact {
  pointer-events: none;
  cursor: none;
}
.sidebar_element.sb_deact .sidebar_elem_icon {
  opacity: 0.5;
}
.sidebar_element_mob.sb_deact .sidebar_elem_icon {
  opacity: 0.5;
}
#sidebar_mob_slider.clickedActive {
  display: flex !important;
}
#tools_mob.clickedActive {
  color: white;
}
#tools_mob.clickedActive .sidebar_elem_icon {
  background-color: black;
}
.sidebar_element.active {
  color: white;
  background: black;
}
.sidebar_element_mob .active .sidebar_elem_icon {
  color: white;
  background-color: black !important;
}
.mobile_f{
	display:none;
}
/*END SideBar*/
/*START TwoStep Detail Pics*/
#zoom_mapping_div {
    position: fixed;
    height: min-content;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    bottom: 25px;
    left: 25px;
	width: calc(100% - 3rem);
	max-width: max-content;
	overflow-x: auto;
}
.mod_zmd {
    width: 10.375rem;
    height: 6rem;
}
.mod_zmd_pic_inner {
    width: 10.375rem;
    height: 6rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.mod_zmd_name {
    display: block;
    position: absolute;
    margin-left: 10px;
    margin-top: 5px;
    color: #F2F2F2;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 14px;
}
.mod_zmd_name.is_white{
	color:black;
}
/*END TwoStep Detail Pics*/
/*Overrides MODS*/
.mcTitle{
	width: max-content;
}
.mod-zn {
  right: 53px;
  left: unset;
  top: 12.3rem;
}
.mrs-sa {
  display: none;
}
.mrs-sb {
  display: block;
}

.mrs-select {
  margin-top: 1rem;
  width: 100%;
}

.mrs-sel-m,
.mrs-sel-s {
  margin-bottom: 1.5rem;
}

.mrs-sel-m,
.mrs-sel-s {
  width: calc(100% - 1rem);
  overflow-x: auto;
  white-space: nowrap;
  margin-left: 1rem;
}

.mrs-sel-m .btt,
.mrs-sel-s .btt {
  text-align: left;
  cursor: pointer;
  display: inline-block;
  padding: 0.3rem 0.5rem;
  color: black;
}

.mrs-sel-m .btt {
  text-decoration: none;
  height: 1.2rem;
  line-height: 1rem;
  font-size: 1.125rem;
  font-family: "Calibri", Fallback, sans-serif;
}

.mrs-sel-s .btt {
  height: 1.2rem;
  line-height: 0.8rem;
  font-size: 1.125rem;
  font-family: "Calibri", Fallback, sans-serif;
  font-weight: normal;
}

.mrs-sel-m .btt.act,
.mrs-sel-s .btt.act {
  border-bottom: none;
  background: linear-gradient(#ffc510, #ffc510) bottom no-repeat;
  background-size: 90% 3px;
}
.mod-rs {
  background-color: #ffffff;
}
.mrs-head .txt {
  font-family: "Calibri", Fallback, sans-serif;
}
.mri-sw {
  display: none;
}
.mri-main {
  background-color: #fff;
  width: 100%;
  height: calc(100% - 4.5rem);
  text-align: left;
  position: absolute;
  top: 3.5rem;
  padding-top: 1rem;
  overflow: auto;
}
.ri-frame {
  width: 10.5rem;
  height: 7rem;
  background-color: grey;
  display: inline-block;
  float: left;
  position: relative;
}
.ri-data {
  display: inline-block;
  vertical-align: top;
  float: left;
  margin-left: 1rem;
  height: 6.875rem;
  width: calc(100% - 12rem);
}
.ri-data .txt.data-1 {
  font: normal normal bold 0.875rem/0.875rem "Calibri", Fallback, sans-serif;
  letter-spacing: 0rem;
  color: black;
  margin-right: 0.375rem;
  height: 1rem;
  overflow: visible;
}
.ri-data .txt.data-2 {
  text-align: left;
  font: normal normal normal 0.875rem/0.875rem "Calibri", Fallback, sans-serif;
  letter-spacing: 0rem;
  color: black;
  height: 3rem;
  margin-top: 0.375rem;
}
.ri-data .d-val {
  font: normal normal normal 0.875rem/0.875rem "Calibri", Fallback, sans-serif;
  letter-spacing: 0rem;
  color: black;
  height: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-ri .btt-info {
  position: absolute;
  right: 0.3125rem;
  bottom: 0.3125rem;
  top: unset;
}
.mrs-head .bttClose {
  height: 2.25rem;
  width: 2.25rem;
  position: absolute;
}
.mrs-head .bttClose .ico {
  height: 2.25rem;
  width: 2.25rem;
  cursor: pointer;
}
.mrs-head .bttClose .ico .material-icons {
  font-size: 36px;
}
.mtf-cnt {
  display: none;
}
.fav-img-hold,
.fav-color {
  cursor: unset;
  width: 10.5rem;
  height: 7rem;
}
.fav-chip {
  display: inline-block;
  vertical-align: top;
  margin-left: 1rem;
  margin-bottom: 1rem;
  position: relative;
  max-width: 10.5rem;
}
.fav-chip .icons .material-icons {
  color: white;
}
.fav-chip .icons .btt {
  width: max-content;
  height: max-content;
  display: inline-block;
  margin-left: unset;
  vertical-align: top;
  border-radius: unset;
  cursor: pointer;
  background-color: unset;
  background-repeat: no-repeat;
  background-position: center;
}
.fav-chip {
  max-width: 10.5rem;
  margin-right: 0.3rem;
  margin-left: 0;
}
.fav-chip .icons {
  position: absolute;
  right: 0.3125rem;
  top: 5rem;
}
.mtf-main {
  background-color: #fff;
  width: calc(100% - 0rem);
  height: calc(100% - 4rem);
  padding-left: 0rem;
  overflow: auto;
  text-align: left;
  padding-bottom: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.mtf-area {
  margin-bottom: 1.25rem;
  padding: 0px 0px 0px 1.5rem;
  gap: 10px;
}
.mtf-head .txt {
  font-family: "Calibri", Fallback, sans-serif;
  color: black;
}
.mtf-area-header .txt {
  margin-left: 0;
}
.mtf-area-header .txt {
  font-family: "Calibri", Fallback, sans-serif;
  color: black;
}
.mtf-head {
  margin: 1rem 0rem 0.3125rem 1.5rem;
}
.mk-back {
  display: none;
}
.mk-front {
  background-color: #fff;
  height: 2.5rem;
  width: 2.5rem;
  position: absolute;
  border-radius: 0;
}
.mti-pt {
  display: none;
}
.mti-pi .btt-favIcon {
  background-color: unset;
  right: 10px;
  cursor: pointer;
  top: 5px;
}
.mti-pi .btt-favIcon .material-icons {
  font-size: 30px;
  color: white;
}

.chip.isFav .fav .material-icons,
.btt-favIcon.btt.fav.isFav .material-icons {
  color: var(--az-color);
}

.mod-as {
  z-index: 14;
}
.mod-ri .btt {
  background-color: unset;
}
.mod-ri .btt-info {
  position: absolute;
  right: 0.3125rem;
  bottom: 0.3125rem;
  top: unset;
  color: white;
}
.mod-ri .btt-del {
  position: absolute;
  top: unset;
  color: white;
  right: 2rem;
  bottom: 0.3125rem;
}
.btt.btt-mlt {
  display: none !important;
}

.mcTextures[size="m"] .mcChip .frame,
.mcTextures[size="m"] .mcChip .frame-color {
  width: 10.5rem;
  height: 7rem;
}
.mcTextures.isMulti .mc-multi {
  display: none !important;
}
.mcf-head .material-icons {
  vertical-align: middle;
  margin-left: 20px;
  color: black;
}
.mcf-head .txt {
  text-align: left;
  font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
  letter-spacing: 0rem;
  color: black;
  opacity: 1;
  margin-left: 0;
  height: 1.8125rem;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 0.55rem;
}
.mcInfo {
  position: relative;
  background-color: white;
  top: 0rem;
  left: 40%;
  height: 2.125rem;
  width: 54%;
}
.mc-main {
  height: calc(100%);
  overflow-y: overlay;
}
.mcTextures {
  position: absolute;
  left: 40%;
  top: 3.2rem;
  background-color: #fff;
  width: 60%;
  border-radius: 1.5rem 0 0 0;
  height: calc(100% - 3.1rem);
}
.aoacc_front_icon {
  top: 13px;
}
.mcChip .icons .btt {
  color: white;
  background-color: unset;
}
.mcChip .icons {
  top: unset;
  bottom: 2rem;
}
.mcTitle .txt {
  text-align: left;
  font: unset;
  letter-spacing: 0rem;
  color: black;
  opacity: 1;
  height: 3.125rem;
  margin-left: 1rem;
  font-size: 1.75rem;
  font-family: "Calibri", Fallback, sans-serif;
}
.mcResetM {
  display: none;
}
.mcClose .ico .material-icons {
  font-size: 30px;
}
.mtf-head .bttClose .ico {
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  color: black;
}
.mtf-head .bttClose .ico .material-icons {
  font-size: 30px;
}
.mri-head .bttClose .ico {
  height: 1rem;
  width: 1rem;
  cursor: pointer;
  color: black;
}
.mri-head .bttClose .ico .material-icons {
  font-size: 30px;
}
.mcClose .ico {
  width: 1rem;
  height: 1rem;
  color: black;
}
.mcShowFilter .material-icons {
    color: black;
}
.mod-ct{
	background-color:white;
}
/*END Overrides MODS*/

/*Blocker Background*/
.blocker_back {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgb(128, 128, 128, 0.5);
  z-index: 1;
}
.blocker_areaselctor {
  display: none;
  position: absolute;
  width: 100%;
    top: 0;
  height: 100%;
  background-color: rgb(128, 128, 128, 0.5);
  z-index: 13;
}
.mod-rs.open ~ .blocker_back,
.mod-tf.open ~ .blocker_back,
.mod-ri.open ~ .blocker_back,
.mod-ct.open ~ .blocker_back {
  display: block;
}
.blocker_back_ti_info {
  display: none;
  position: absolute;
  width: 100%;
    top: 0;
  height: 100%;
  background-color: rgb(128, 128, 128, 0.5);
  z-index: 14;
}
.mod-ti.open ~ .blocker_back_ti_info {
  display: block;
}
.mod-as.open ~ .blocker_areaselctor {
  display: block;
}
/*END Blocker background*/

/*Compmode*/
.comp-btt {
  position: absolute;
  top: 10.625rem;
  background-color: white;
  width: 8.125rem;
  height: 2.5rem;
  text-align: center;
  padding: 0rem;
  line-height: 0.9375rem;
  cursor: pointer;
  color: var(--af-color);
}
#comp_left.act,
#comp_right.act {
  background-color: var(--az-color);
}
.comp-btt.act .comp-txt {
  color: black;
}
#comp_left,
#comp_right {
  border-radius: 0;
}
#comp_mover_show .img-l .material-icons {
  position: absolute;
  font-size: 45px;
  top: 0.4rem;
  right: 0px;
}
#comp_mover_show .img-r .material-icons {
  position: absolute;
  font-size: 45px;
  top: 0.4rem;
  left: 0px;
}
#comp_mover_show {
  background-color: #fff;
  border-radius: 0;
  width: 7.125rem;
  height: 3.563rem;
  cursor: pointer;
  left: -3.5rem;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0px 3px 6px #00000029;
}
#comp_mover_show .img-l {
  width: 3.563rem;
  height: 3.563rem;
  position: absolute;
  top: calc(50% - 1.75rem);
  left: 0;
}
#comp_mover_show .img-r {
  position: absolute;
  top: calc(50% - 1.75rem);
  right: 0;
  width: 3.563rem;
  height: 3.563rem;
}
.comp-txt {
  font: normal normal bold 1.438rem/2.5rem "Calibri", Fallback, sans-serif;
  letter-spacing: 0.28px;
  color: black;
  height: 3.3125rem;
  vertical-align: top;
  text-align: center;
}
/*END Compmode*/

/*Marker*/
.marker:hover .mk-front {
  background-color: var(--az-color);
}
/*END Marker*/

/*FILTER*/
.mcFilter {
  width: calc(40% - 0rem);
  height: calc(100% - 4.125rem);
  position: absolute;
  top: 4.2rem;
  overflow: auto;
  background-color: #f2f2f2;
}
.searchtext {
  height: 2.05rem;
  margin: 0 0 1rem 0;
  border: unset;
  display: block;
  background-color: #fff;
  margin-left: 1.5rem;
  width: calc(100% - 3rem);
  border-bottom: 1px solid black;
}
.searchtext_input {
  height: 1.9rem;
  width: calc(100% - 0.5rem);
  border: none;
  padding-left: 0.5rem;
  padding-bottom: 0.0625rem;
  padding-top: 0.0625rem;
  padding-right: 0rem;
  margin: 0rem;
  border-bottom: unset;
}
.aoacc_back {
  width: auto;
  overflow-y: hidden;
  margin-left: 0;
  position: absolute;
  background-color: white;
  width: calc(100% - 3rem);
  height: 100%;
  z-index: 11;
  margin: -0.5rem 0rem 0rem 0rem;
}
.filter_line,
.singlechoice {
  width: calc(100% - 10px);
  margin-left: 10px;
}

.aoacc {
  height: 2rem;
  margin: 0 0 1rem 0;
  border: unset;
  background-color: #fff;
  margin-left: 1.5rem;
  width: calc(100% - 3rem);
  border-bottom: 1px solid black;
}
.txt-c {
  text-align: left;
  letter-spacing: 0rem;
  color: black;
  opacity: 1;
  font-weight: normal;
  font-family: "Calibri", Fallback, sans-serif;
  font-size: 0.875rem;
}
.active .aoacc_front_text {
  color: black;
}
.aoacc_front.closed:hover .aoacc_front_text {
  color: #e0e0e0;
}
.aoacc_front:hover .aoacc_front_text {
  color: black;
}
.aoacc_front_text {
  margin-left: 10px;
}
.aoacc_front {
  line-height: 2rem;
}
.aoacc_front.closed .aoacc_front_text {
  color: #e0e0e0;
}
.aoacc_front .aoacc_front_text {
  color: black;
}
.aoarea {
  position: unset;
  top: 0px;
  width: auto;
  overflow-y: auto;
  height: calc(100%);
}
.mcReset {
  left: 16.5rem;
}

.searchtext_icon .ico .material-icons {
  color: black;
}
.searchtext_icon {
  height: 1.2rem;
  width: 1.6875rem;
  cursor: pointer;
  background: none;
  display: inline-block;
  border: none;
  vertical-align: middle;
}
.searchtext_form {
  height: 2.375rem;
  width: calc(100% - 2.2rem);
  display: inline-block;
  vertical-align: top;
  border: none;
}
/*END FILTER*/

/*media QUERYS*/
@media (min-width: 992px) {
  /*TwoStep*/
  .mcTwoStep_Header {
    display: flex;
    flex-direction: row;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 1.125rem;
    color: black;
    margin-left: 16px;
    font-weight: bold;
  }

  .mcPlate.Twostep .mcTwoStep {
    position: absolute;
    left: 0;
    top: 4rem;
    background-color: #fff;
    width: 100%;
    border-radius: 0;
    height: calc(100%);
    max-height: 10rem;
  }

  .mcPlate.Twostep .mcFilter {
    height: calc(100%);
    top: 14.8rem;
    max-height: 25.7rem;
  }
  .mcPlate.Twostep .mcTextures {
    border-radius: 0;
    height: calc(100%);
    top: 16.5rem;
    max-height: 23.9rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcTextures {
    left: 10rem;
    width: calc(100% - 10rem);
    top: 0;
  }
  .mcPlate.Twostep .mcTwoStep .mc-main {
    display: flex;
    flex-direction: row;
  }

  .mcPlate.Twostep .mcTwoStep .mcTextures[size="m"] .mcChip {
    width: 100%;
    max-width: 10.5rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip {
    margin: 0rem 0rem 0rem 0.5rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip.act .mcAct {
    border: 0.2rem solid #ff3939;
  }
  .mcPlate.Twostep .mcTwoStep .mcAct .ico {
    display: none;
  }

  .mcRenderTwoStep {
    position: absolute;
    bottom: 1.2rem;
    display: block;
    width: 11.25rem;
    height: 3rem;
    background-color: var(--az-color);
    cursor: pointer;
    right: 1.2rem;
  }
  .mcRenderTwoStep .txt_TS {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin-left: 0;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
  }
  .mcPlate.Twostep .mcInfo {
    top: 14.2rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip .icons {
    right: 0.5rem;
    bottom: 3.5rem;
  }
  .mcClose .ico {
    width: 2rem;
    height: 2rem;
    color: black;
  }

  /*End TwoStep*/
  .mcCount {
    text-align: left;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
    display: inline-block;
    position: absolute;
    bottom: 0.5625rem;
    left: 1rem;
  }
  .mcReset .ico {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.3125rem;
    background-size: 0.5rem;
    vertical-align: sub;
  }
  .mcReset .txt {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0.24px;
    color: black;
    opacity: 1;
  }
  .mcf-head,
  .mcf-bottom {
    display: block;
  }
  .mod-ct {
    background-color: white;
    position: absolute;
    z-index: 10;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-tf {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 14;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-rs {
    padding: 0rem 0 0 0;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }

  .mod-ri {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 14;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-ti {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 15;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-as {
    position: absolute;
    background-color: white;
    bottom: 3rem;
    z-index: 14;
    padding: 0rem 0 0 0;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mti-rgb {
    height: 24rem;
  }
  .mti-pi {
    width: 35.875rem;
    position: relative;
  }
  .mti-main {
    background-color: #fff;
    margin-left: 1rem;
    width: calc(100% - 1rem);
    height: calc(100% - 4.125rem);
    border-radius: 1.5rem 0rem 0rem 0rem;
    padding-top: 1rem;
    text-align: left;
    display: flex;
  }
  .mti-ph {
    width: 37.375rem;
    margin-left: 0.5rem;
  }
  .mas-chip {
    max-width: 10.5rem;
    max-height: 7rem;
  }
  .mcTitle {
    top: 0.5rem;
  }
  .mcClose {
    top: 1rem;
  }
}
@media (min-width: 768px) {
  .mrs-main {
    width: calc(100% - 2rem);
    height: calc(100% - 12.5rem);
    padding-bottom: 1rem;
    border-radius: 0;
    overflow: auto;
    position: unset;
    padding: 0rem 1rem 1rem 1rem;
  }
  .mrs-select {
    position: unset;
    height: min-content;
  }
  .mrs-head {
    position: relative;
    top: 1rem;
    left: 0.4rem;
    color: black;
  }
  .rsChip {
    width: 10.5rem;
    display: inline-block;
    margin: 0.5rem 0 0 0.5rem;
    position: relative;
    cursor: pointer;
  }
  .mrs-head .bttClose {
    top: -0.5rem;
    right: 1rem;
  }
  .mcRenderTwoStep.mobile {
    display: none;
  }
}

@media (max-width: 768px) {
  .mod-rs {
    padding: 0.9rem 0 0 0;
    top: 0;
    width: 100%;
    height: calc(100% - 0.9rem);
  }
  .mrs-head {
    margin: 0 1rem;
    color: black;
  }
  .mod-tf {
    padding: 0;
    top: 0;
    width: 100%;
    height: calc(100%);
    background-color: white;
  }
}
@media (hover: hover) and (min-width: 768px) {
  .sidebar_element:not(.active):hover {
    border-bottom: 3px solid #ffc510;
    padding-bottom: 0px;
  }
  #container_sidebar:not(.stop):hover #sidebar {
    right: 0; /* Displayed on hover */
  }
  #container_sidebar:hover #sidebar_mob {
    right: -153px !important;
    position: relative;
  }
}
@media (hover: hover) {
  .mrs-sel-s .btt:hover {
    border-bottom: none;
    background: linear-gradient(#ffc510, #ffc510) bottom no-repeat;
    background-size: 90% 3px;
  }
  .mrs-sel-m .btt:hover {
    border-bottom: none;
    background: linear-gradient(#ffc510, #ffc510) bottom no-repeat;
    background-size: 90% 3px;
  }
}
@media (min-width: 768px) and (max-width: 992px) and (min-height: 450px) {
  /*TwoStep*/
  .mcTwoStep_Header {
    display: flex;
    flex-direction: row;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 1.125rem;
    color: black;
    margin-left: 16px;
    font-weight: bold;
  }

  .mcPlate.Twostep .mcTwoStep {
    position: absolute;
    left: 0;
    top: 4rem;
    background-color: #fff;
    width: 100%;
    border-radius: 0;
    height: calc(100%);
    max-height: 10rem;
  }

  .mcPlate.Twostep .mcFilter {
    height: calc(100%);
    top: 14.8rem;
    max-height: 25.7rem;
  }
  .mcPlate.Twostep .mcTextures {
    border-radius: 0;
    height: calc(100%);
    top: 16.5rem;
    max-height: 23.9rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcTextures {
    left: 10rem;
    width: calc(100% - 10rem);
    top: 0;
  }
  .mcPlate.Twostep .mcTwoStep .mc-main {
    display: flex;
    flex-direction: row;
  }

  .mcPlate.Twostep .mcTwoStep .mcTextures[size="m"] .mcChip {
    width: 100%;
    max-width: 10.5rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip {
    margin: 0rem 0rem 0rem 0.5rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip.act .mcAct {
    border: 0.2rem solid #ff3939;
  }
  .mcPlate.Twostep .mcTwoStep .mcAct .ico {
    display: none;
  }

  .mcRenderTwoStep {
    position: absolute;
    bottom: 1.2rem;
    display: block;
    width: 11.25rem;
    height: 3rem;
    background-color: var(--az-color);
    cursor: pointer;
    right: 1.2rem;
  }
  .mcRenderTwoStep .txt_TS {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin-left: 0;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
  }
  .mcPlate.Twostep .mcInfo {
    top: 14.2rem;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip .icons {
    right: 0.5rem;
    bottom: 3.5rem;
  }
  .mcClose .ico {
    width: 2rem;
    height: 2rem;
    color: black;
  }
  .mcTextures[size="m"] .mcChip {
    width: calc((100% - 5rem) / 2);
    max-width: 167px;
  }
  /*End TwoStep*/
  .mcCount {
    text-align: left;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
    display: inline-block;
    position: absolute;
    bottom: 0.5625rem;
    left: 1rem;
  }
  .mcReset .ico {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.3125rem;
    background-size: 0.5rem;
    vertical-align: sub;
  }
  .mcReset .txt {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0.24px;
    color: black;
    opacity: 1;
  }
  .mcf-head,
  .mcf-bottom {
    display: block;
  }
  .mod-ct {
    background-color: white;
    position: absolute;
    z-index: 10;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-tf {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 14;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-rs {
    padding: 0rem 0 0 0;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }

  .mod-ri {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 14;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-ti {
    position: absolute;
    background-color: white;
    width: 65rem;
    height: calc(100% - 4rem);
    top: 4rem;
    z-index: 15;
    box-shadow: unset;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mod-as {
    position: absolute;
    background-color: white;
    bottom: 3rem;
    z-index: 14;
    padding: 0rem 0 0 0;
    width: calc(100% - 3.5rem);
    height: calc(100% - 3.5rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 61rem;
    max-height: 40.5rem;
  }
  .mti-rgb {
    height: 24rem;
  }
  .mti-pi {
    width: 35.875rem;
    position: relative;
  }
  .mti-main {
    background-color: #fff;
    margin-left: 1rem;
    width: calc(100% - 1rem);
    height: calc(100% - 4.125rem);
    border-radius: 1.5rem 0rem 0rem 0rem;
    padding-top: 1rem;
    text-align: left;
    display: flex;
  }
  .mti-ph {
    width: 37.375rem;
    margin-left: 0.5rem;
  }
  .mas-chip {
    max-width: 10.5rem;
    max-height: 7rem;
  }
  .mcTitle {
    top: 0.5rem;
  }
  .mcClose {
    top: 1rem;
  }
  .mod_zmd_pic_inner {
    height: 3rem;
}
.mod_zmd {
    height: 3rem;
}

}
@media (orientation: portrait) and (max-width: 768px) and (max-height: 1280px) {
  /* PHONE HOCH */
  .sidebar_mobile_off {
    display: none !important;
  }
  .mcRenderTwoStep.desktop {
    display: none;
  }
  .sidebar_mobile_on {
    display: unset !important;
  }
  .rsChip {
    display: inline-block;
    /* height: 10rem; */
    width: calc((100% - 2rem) / 2);
    margin-bottom: 0.6rem;
    overflow: hidden;
    position: relative;
    margin: 0rem 0.5rem 0.5rem 0.5rem;
  }
  .mcMSearch {
    display: none;
  }
  .mcTextures[size="m"] .mcChip {
    width: calc((100% - 1.875rem) / 2);
    max-width: 167px;
  }
  .mod-ti {
    background-color: white;
    position: absolute;
    z-index: 20;
    width: 100%;
    height: calc(100%);
    left: 0rem;
    top: 0;
    overflow: hidden;
  }
  .mti-main {
    margin-left: 0rem;
    width: calc(100% - 2rem);
    border-radius: 0rem;
    padding-top: 1rem;
    height: calc(100% - 53px);
    display: block;
    overflow: auto;
    margin-left: 1rem;
  }
  .mti-ph {
    margin-left: 0.5rem;
    width: calc(100% - 1rem);
  }
  .mti-pi img {
    width: 100%;
    max-height: 215px;
  }
  .mti-th {
    padding: 0.5rem 0.625rem 0.5rem 0.5rem;
  }
  .marker {
    display: unset;
  }
  .mti-rgb {
    height: 18.3125rem;
    max-height: 215px;
  }
  .mod-ri {
    background-color: white;
    height: calc(100%);
    top: 0;
  }
  .mri-main {
    height: calc(100% - 4rem);
  }
  .mtf-area {
    padding: 0px 0px 0px 1.25rem;
  }
  .mod-ct {
    padding: 0.9rem 0 0 0;
    top: 0;
    width: 100%;
    height: calc(100% - 0.9rem);
  }
  .mcTextures {
    position: absolute;
    left: 0;
    top: 3.2rem;
    background-color: #fff;
    width: 100%;
    border-radius: 1.5rem 0 0 0;
    height: calc(100% - 3.1rem);
  }
  .mcTitle {
    position: unset;
  }
  .mcFilter {
    position: unset;
  }
  .mcInfo {
    position: unset;
    width: 100%;
    display: none;
  }
  .mcTextures {
    position: unset;
    border-radius: unset;
  }
  .mcShowFilter .txt {
    text-align: left;
    text-decoration: none;
    font: normal normal normal 0.75rem/3.4375rem Helvetica;
    letter-spacing: unset;
    color: black;
    display: inline-block;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 1.125rem;
  }
  .mcFilter {
    width: 100%;
    height: max-content;
    position: unset;
    top: 4.2rem;
    overflow: auto;
    background-color: #f2f2f2;
  }
  .mcShowFilter {
    display: inline-block;
    height: 3.4375rem;
    line-height: 3.4375rem;
    vertical-align: top;
    margin-left: 0;
    width: 100%;
    background-color: #f2f2f2;
  }
  .mcPlate.openFilter .mcf-mcount {
    display: none;
  }
  .mcf-head,
  .mcf-bottom {
    display: none;
  }
  .mcResetM {
    display: inline-block;
    float: right;
    margin-top: 7px;
    margin-right: 1.5rem;
  }
  .mcResetM .ico {
    display: inline-block;
    vertical-align: middle;
  }
  .mcResetM .txt {
    display: inline-block;
  }
  .mcCountM {
    display: inline-block;
    height: 2.625rem;
    color: #505050;
    margin-left: 1rem;
    line-height: 2.625rem;
  }
  .mc-main {
    padding: 0rem 0.5rem 0rem 0.5rem;
  }
  /*TwoStep Start*/
  .mcTwoStep {
    background-color: white;
  }
  .mcTwoStep_Header {
    display: flex;
    flex-direction: row;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 1.125rem;
    color: black;
    margin-left: 16px;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .mcTwoStep .mc-main {
    height: calc(100%);
    overflow-y: overlay;
    display: flex;
    flex-direction: row;
  }
  .mcPlate.Twostep .mcTwoStep .mcChip.act .mcAct {
    border: 0.2rem solid #ff3939;
  }
  .mcPlate.Twostep .mcTwoStep .mcAct .ico {
    display: none;
  }
  .mcRenderTwoStep.mobile .txt_TS {
    position: absolute;
    bottom: 1.2rem;
    width: 11.25rem;
    height: 3rem;
    background-color: var(--az-color);
    cursor: pointer;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
    margin: 0 auto;
  }
  .mcRenderTwoStep.mobile {
    position: absolute;
    bottom: 0rem;
    width: 100%;
    background-color: white;
    height: 5rem;
  }
  #mcTextures_255 {
    height: calc(100% - 25.5rem);
  }
  /*TwoStep Ende*/
  .mcf-main .searchtext {
    margin-left: 1.5rem;
    width: calc(100% - 3rem);
  }
  .mcWrapper {
    height: 100%;
    background-color: white;
  }
  .mcShowFilter .material-icons {
    vertical-align: sub;
	margin-left: 0.5rem;
}
.mcPlate.openFilter .mcShowFilter .drop_up {
    display: inline-block;
    position: absolute;
    right: 0.25rem;
    font-size: 40px;
    margin-top: 7px;
}
.mcPlate:not(.openFilter) .mcShowFilter .drop_down {
    display: inline-block;
    position: absolute;
    right: 0.25rem;
    font-size: 40px;
    margin-top: 7px;
}
.mcClose {
    top: 1.2rem;
    right: 1.2rem;
}
.mtf-head .bttClose {
    top: 0.9375rem;
    right: 1.2rem;
}
.mcResetM .ico .material-icons {
    color: black;
}
.mod_zmd_pic_inner {
    height: 3rem;
}
.mod_zmd {
    height: 3rem;
}
}

@media (orientation: landscape) and (max-width: 915px) and (max-height: 480px) {
  /* PHONE QUER */
  .sidebar_mobile_off {
    display: none;
  }
  .sidebar_mobile_on {
    display: unset !important;
  }
  .mod-rs {
    padding: 0rem 0 0 0;
    top: 0rem;
    width: 100%;
    height: calc(100% - 0rem);
    z-index: 21;
  }
  .mrs-head {
    position: relative;
    top: 0.25rem;
    left: 0.35rem;
    color: black;
  }
  .mod-ti {
    top: 0rem;
    width: calc(100%);
    height: 100%;
    z-index: 22;
    background-color: white;
    position: absolute;
  }
  .mod-ri {
    background-color: white;
    position: absolute;
    z-index: 13;
    box-shadow: unset;
    height: calc(100%);
    width: calc(100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mti-ph {
    margin-left: 1.5rem;
  }
  .marker {
    display: unset;
  }
  .mod-tf {
    background-color: white;
    box-shadow: unset;
    width: calc(100%);
  }
  .mod-as {
    position: absolute;
    background-color: white;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0rem;
  }
  .mas-head .bttClose {
    display: unset;
  }
  .mas-chip {
    margin-bottom: 1rem;
    width: auto;
    margin-left: 0;
    margin-top: 0;
    max-width: 10.5rem;
    max-height: 7rem;
    display: inline-block;
  }
  .mcShowFilter {
    display: none;
  }
  .mcMSearch {
    display: none;
  }
  .mcTextures[size="m"] .mcChip .frame,
  .mcTextures[size="m"] .mcChip .frame-color {
    width: auto;
    height: auto;
  }
  .mcTextures[size="m"] .mcChip {
    max-width: 10.438rem;
    width: 100%;
  }
  .mod-ct {
    width: calc(100%);
    background-color: white;
  }
  .mcf-close {
    display: none;
  }
  .mcTwoStep {
    background-color: #fff;
    border-radius: 0;
    height: calc(100% - 2rem);
    display: inline-block;
    margin: 0.5rem 0.25rem 0 0;
    width: 100%;
    max-width: 195px;
  }
  .mcTitle {
    position: unset;
    margin-bottom: 1rem;
  }
  .mcChip {
    margin: 0rem 0rem 0rem 0.4rem;
  }
  .mcPlate {
    height: calc(100% - 1.1rem);
  }
  .mcFilter {
    height: calc(100% - 3.1rem);
    position: unset;
    top: unset;
    left: unset;
    overflow: auto;
    display: inline-block;
    background-color: #f2f2f2;
    max-width: 271px;
    width: 100%;
  }
  .mcPlate.Twostep .mcTwoStep .mcTextures {
    width: calc(100% - 1.25rem);
    max-width: 180px;
    margin-left: 1.25rem;
  }
  .mcTextures {
    position: unset;
    display: inline-block;
    width: calc(100% - 30rem);
    max-width: 360px;
  }
  .mcTwoStep_Header {
    display: block;
    margin-left: 1.25rem;
    font-family: "Calibri", Fallback, sans-serif;
    font-size: 1.125rem;
    color: black;
    font-weight: bold;
  }
  .mcPlate.Twostep .mcTwoStep .mcTextures .mcChip {
    margin: 0.5rem 0rem 0 0rem;
  }
  .mcInfo {
    position: absolute;
  }
  .mcInfo {
    background-color: unset;
    top: 2.5rem;
    left: unset;
    height: 3.125rem;
    width: 43%;
    right: 0rem;
  }
  .mcRenderTwoStep.mobile {
    display: none;
  }
  .mrs-select {
    margin-top: 1rem;
    width: 100%;
    margin-top: 1rem;
    width: 100%;
    position: unset;
    height: min-content;
  }
  .mrs-main {
    width: calc(100% - 2rem);
    height: calc(100% - 12.5rem);
    padding-bottom: 1rem;
    border-radius: 0;
    overflow: auto;
    position: unset;
    padding: 0rem 1rem 1rem 1rem;
  }
  .mcCount {
    text-align: left;
    letter-spacing: 0rem;
    display: inline-block;
    position: absolute;
    bottom: 0.5625rem;
    left: 0.2rem;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
  }
  .mcReset .txt {
    vertical-align: sub;
  }
  .mcReset .ico {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.3125rem;
    background-size: 0.5rem;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
    margin-top: unset;
  }
  .mcReset .txt {
    display: inline-block;
    text-align: left;
    text-decoration: none;
    opacity: 1;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
  }
  .mcReset {
    bottom: 0;
    position: fixed;
    top: 2.3rem;
    width: 10.75rem;
    left: 0.625rem;
    text-align: right;
    height: 1rem;
    vertical-align: top;
    line-height: 1rem;
    left: unset;
    right: 1.5rem;
  }
  .aoarea {
    height: max-content;
  }
  .mcRenderTwoStep {
    position: relative;
    bottom: 1.2rem;
    display: block;
    width: 11.25rem;
    height: 3rem;
    background-color: var(--az-color);
    cursor: pointer;
    right: 1.2rem;
    left: 3rem;
  }
  .mcRenderTwoStep .txt_TS {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin-left: 0;
    font: normal normal normal 1.125rem/1.125rem "Calibri", Fallback, sans-serif;
    letter-spacing: 0rem;
    color: black;
  }
  .mcf-main {
    height: calc(100% - 6.125rem);
  }
  .aoacc_back {
    width: 100%;
    max-width: 223px;
  }
  .aoarea {
    position: unset;
    top: 0px;
    width: unset;
    overflow-y: auto;
    height: calc(100%);
    display: block;
    padding: unset;
    height: max-content;
  }
  .mcf-main .searchtext {
    margin-left: 1.5rem;
  }
  .mcClose {
    top: 0.5rem;
    right: 1.75rem;
  }
  .mcPlate.openFilter .mcFilter{
	  display:none;
  }
  .mcPlate.openFilter .mcFilter {
    display: inline-block;
}
.mcPlate.openFilter .mcf-mcount {
    display: none;
    left: calc(((41.8% - 0.625rem)/2) - 6.125rem);
    bottom: 0.5rem;
}
.mod_zmd_pic_inner {
    height: 3rem;
}
.mod_zmd {
    height: 3rem;
}
}

@media (orientation: portrait) and (max-width: 768px) and (max-height: 915px) {
  .mtf-head {
    margin: 1rem 0rem 1rem 1.19rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .mod-rs {
    padding: 1rem 0 0 0;
    top: 0rem;
    width: calc(100%);
    height: calc(100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mod-tf {
    background-color: white;
    top: 0;
    z-index: 14;
    box-shadow: unset;
    width: calc(100%);
    height: calc(100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mod-ti {
    background-color: white;
    position: absolute;
    top: 0;
    z-index: 21;
    box-shadow: unset;
    height: calc(100%);
    width: calc(100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mod-ri {
    background-color: white;
    position: absolute;
    z-index: 13;
    box-shadow: unset;
    height: calc(100%);
    width: calc(100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mri-main {
    height: calc(100% - 4rem);
  }
  .mtf-head {
    margin: 1rem 0rem 0.3125rem 1.25rem;
  }
  .mrs-head {
    left: 0.75rem;
  }
}
/*END media QUERYS*/