menu {
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 30;
  height: calc(100vh - 80px);
  background: #fff; }
  @media (min-width: 1023px) {
  menu {
    width: 460px;
    -webkit-box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.19);
    box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.19); } }
  @media (max-width: 1023px) {
  menu {
    width: 100%;
    z-index: 30;
    height: calc(100% - 210px); } }
  menu .gallery {
    width: 100%;
    max-height: calc(100vh - (90px*3) - 80px - 140px);
    overflow-y: auto;
    display: none; }
    menu .gallery:not(.custom_gallery) .disabled {
      display: none; }
    menu .gallery .gallery_item {
      display: inline-block;
      position: relative;
      width: calc(100% / 4);
      height: 115px;
      background-size: cover;
      background-position: center;
      background-color: #fff;
      transition: 0.3s;
      cursor: pointer;
      vertical-align: top; }
      menu .gallery .gallery_item:before {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 0.3s; }
      menu .gallery .gallery_item:hover:before {
        background: rgba(20, 200, 20, 0.4); }
      menu .gallery .gallery_item.disabled:hover .tooltip {
        display: inline-block; }
        menu .gallery .gallery_item.disabled::before {
          display: flex;
          font-family: 'FontAwesome';
          content: '\f12a';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          color: #fff;
          font-size: 40px;
          transition: 0.2s;
          justify-content: center;
          align-items: center;
          background: rgba(200, 20, 20, 0.6); }
      menu .gallery .gallery_item::after {
        display: none;
        font-family: 'FontAwesome';
        content: '\f00c';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        font-size: 40px;
        transition: 0.2s;
        justify-content: center;
        align-items: center;
        background: rgba(172, 107, 48, 0.8); }
      menu .gallery .gallery_item.active:not(.disabled)::after {
        transition: 0.2s;
        display: flex; }
        menu .gallery .gallery_item.active::before {
          content: '\f00c'; }
  menu .btn_doorgaan, menu .btn_cart, menu .btn_save, menu .btn_afronden {
    display: none;
    width: 100%; }
    @media (max-width: 1023px) {
  menu .btn_doorgaan, menu .btn_cart, menu .btn_save, menu .btn_afronden {
    left: 10px;
    width: calc(100% - 20px); } }
  @media (max-width: 1023px) {
    menu .btn_mobile_afronden_menu, menu .btn_mobile_card_menu {
      display: none; } }
  menu .price {
    position: absolute;
    right: 35px;
    bottom: 85px;
    color: #414145;
    font-weight: 600;
    font-size: 28px;
    font-family: 'Roboto Slab'; }
    @media (max-width: 1023px) {
  menu .price {
    display: none; } }
  menu .stap {
    padding: 0 35px 0 35px;
    line-height: 87px;
    border-bottom: 1px solid #efefef;
    color: #030304;
    height: 87px;
    position: relative; }
    menu .stap:not(.visible) * {
      opacity: 0.3;
      pointer-events: none;
      user-select: none; }
    @media (max-width: 1023px) {
  menu .stap {
    padding: 0 10px; } }
    menu .stap .stap_title {
      font-weight: 600;
      display: inline-block;
      width: 35%;
      font-size: 16px;
      font-family: 'Roboto Slab'; }
      @media (max-width: 415px) {
  menu .stap .stap_title {
    width: 20%;
    font-size: 20px; }
    menu .stap .stap_title .hide_on_small_mobile {
      display: none; } }
    menu .stap .stap_content {
      display: inline-block;
      width: 65%; }
      @media (max-width: 358px) {
  menu .stap .stap_content {
    width: 80%;
    padding-left: 14px; } }
      menu .stap .stap_content .stap_x {
        font-size: 11px;
        margin: 0 10px; }
      menu .stap .stap_content .stap_cm {
        font-size: 14px;
        margin-left: 10px; }
        @media (max-width: 1023px) {
  menu .stap .stap_content .stap_cm {
    display: none; } }
      menu .stap .stap_content .afbeelding_optie {
        width: 100px;
        height: 40px;
        border: 1px solid #e2e2e1;
        border-radius: 5px;
        display: inline-block;
        line-height: 40px;
        font-size: 12px;
        text-align: center;
        margin-right: 14px;
        background-color: #f4f5f5;
        color: #bbb; }
        menu .stap .stap_content .afbeelding_optie:nth-child(2) {
          margin-right: 0px; }
        menu .stap .stap_content .afbeelding_optie:hover {
          cursor: pointer;
          background-color: #72725b;
          color: #fff; }
      menu .stap .stap_content .afbeelding_optie_active {
        background-color: #72725b;
        color: #fff; }
      menu .stap .stap_content .over_min {
        color: red;
        font-size: 13px;
        display: block;
        margin-top: 5px;
        transition: 0.4s;
        position: absolute;
        top: 28px;
        z-index: -1; }
      menu .stap .stap_content .no_frame {
        height: 35px;
        border: 1px solid #efefef;
        border-radius: 20px;
        background: white;
        padding: 8px 12px;
        text-align: center;
        font-size: 12px;
        color: #030304;
        font-weight: 600;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        line-height: 18px; }
      menu .stap .stap_content .no_frame_selected {
        border: 1px solid #72725b;
        background: #72725b;
        color: white; }
      menu .stap .stap_content .greyed_out {
        opacity: 0.4; }
    menu .stap input[type="text"] {
      width: 80px;
      border: 1px solid #e2e2e1;
      border-radius: 5px;
      height: 40px;
      padding: 10px;
      text-align: center;
      /* @include mq(1023px) {
				width: 75px;
			} */
      font-family: 'Roboto'; }
      menu .stap input[type="text"]::placeholder {
        color: #bababa;
        font-style: italic; }
    menu .stap input[type="radio"] {
      display: none; }
    menu .stap .bolletjes {
      position: absolute;
      right: 25px;
      /* @include mq(1023px) {
				right: auto;
				left: 126px;
			}

			@include mq(358px) {
				position: absolute;
				left: 38px !important;
				right: none;
		    width: 22px;
			} */
      top: 34px; }
      menu .stap .bolletjes div:not(.tooltip) {
        height: 20px;
        width: 20px;
        color: white;
        display: flex;
        line-height: 20px;
        text-align: center;
        display: none;
        border-radius: 50%;
        font-size: 14px;
        cursor: pointer; }
        @media (max-width: 1023px) {
 }
        menu .stap .bolletjes div:not(.tooltip).question {
          display: block;
          background: #ac6b30; }
        menu .stap .bolletjes div:not(.tooltip).error {
          background-color: red; }
        menu .stap .bolletjes div:not(.tooltip).done {
          background: #ac6b30; }
        menu .stap .bolletjes div:not(.tooltip).edit {
          background: #999; }
        menu .stap .bolletjes div:not(.tooltip):hover .tooltip {
          display: inline-block; }
    menu .stap .done {
      width: 65%;
      position: relative;
      display: inline-block;
      color: #989999;
      font-size: 15px;
      display: none; }
      menu .stap .done img {
        height: 45px;
        vertical-align: middle; }
      menu .stap .done .no_frame {
        height: 35px;
        line-height: 35px;
        display: inline-block;
        vertical-align: middle; }
    menu .stap .stap_opties {
      display: inline-block; }
  menu .afronden {
    display: none;
    text-align: center;
    padding: 75px 75px 0 75px;
    font-size: 16px;
    color: red;
    line-height: 38px; }
    @media (max-width: 1023px) {
  menu .afronden {
    padding: 10px 30px 0 30px; } }
  menu .upload_eigen {
    position: relative;
    display: none;
    width: 25%;
    height: 115px;
    align-items: center;
    text-align: center;
    color: white;
    transition: 0.5s;
    cursor: pointer;
    background-color: #ff9a51;
    background-image: url('https://samenstellen.beta.xlwallart.nl/assets/img/upload_button.gif');
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-position: center top; }
    menu .upload_eigen:hover {
      background-color: #db934e;
      transition: 0.5s; }
  menu .button_block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 35px; }
    @media (max-width: 1023px) {
  menu .button_block {
    display: none; } }
  menu .profiel {
    display: none; }
  menu .kleur label {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50px;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    margin-right: 13px;
    position: relative;
    vertical-align: middle; }
  menu .active_kleur:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid #72725b;
    border-radius: 50px; }
  menu .profiel label {
    width: 100px;
    height: 40px;
    background-color: #f4f5f5;
    color: #bbb;
    border-radius: 5px;
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #e2e2e1;
    cursor: pointer;
    margin-right: 10px; }
  menu .profiel input[type="radio"] {
    display: none; }
  menu .profiel input[type="radio"]:checked + label, menu .profiel input[type="radio"]:hover + label {
    border: 1px solid #72725b;
    background: #72725b;
    color: white; }