@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
          @import url('/ins_web/ins_kit/css/ins-icons.css');






          :root {
              --col12-item-width: 8.33333333333%;
              --flex-gap: 1px;
              --slc: (100% / 10);

              --card-bg: #fff
          }

          *,
          ::after,
          ::before {
              box-sizing: border-box;
          }




          ul,
          li {
              padding: 0;
              list-style: none;
              margin: 0;
          }

          [class*="ins-flex"] {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: normal;
              align-content: normal;
              row-gap: 0.5rem;
              column-gap: 0.5rem;
              --flex-gap: 10px;
              align-content: flex-start;
              align-items: center;
          }





          .ins-flex-center {
              justify-content: center;
              align-items: center;
              align-content: center;
          }

          .ins-flex-space-between {
              justify-content: space-between;
              align-items: center;
          }

          .ins-col-025 {
              width: calc(var(--col12-item-width) * 0.25 - var(--flex-gap)) !important;
          }

          .ins-col-05 {
              width: calc(var(--col12-item-width) * 0.5 - var(--flex-gap)) !important;
          }

          .ins-col-1 {
              width: calc(var(--col12-item-width) * 1 - var(--flex-gap)) !important;
          }

          .ins-col-2 {
              width: calc(var(--col12-item-width) * 2 - var(--flex-gap)) !important;
          }

          .ins-col-3 {
              width: calc(var(--col12-item-width) * 3 - var(--flex-gap)) !important;
          }

          .ins-col-4 {
              width: calc(var(--col12-item-width) * 4 - var(--flex-gap)) !important;
          }

          .ins-col-5 {
              width: calc(var(--col12-item-width) * 5 - var(--flex-gap)) !important;
          }

          .ins-col-6 {
              width: calc(var(--col12-item-width) * 6 - var(--flex-gap)) !important;
          }

          .ins-col-7 {
              width: calc(var(--col12-item-width) * 7 - var(--flex-gap)) !important;
          }

          .ins-col-8 {
              width: calc(var(--col12-item-width) * 8 - var(--flex-gap)) !important;
          }

          .ins-col-9 {
              width: calc(var(--col12-item-width) * 9 - var(--flex-gap)) !important;
          }

          .ins-col-10 {
              width: calc(var(--col12-item-width) * 10 - var(--flex-gap)) !important;
          }

          .ins-col-11 {
              width: calc(var(--col12-item-width) * 11 - var(--flex-gap)) !important;
          }

          .ins-col-12 {
              width: 100%;
          }

          .ins-col-grow {
              flex-grow: 1;
          }



          body {
              margin: 0;
              padding: 0;
          }

          .insv-flex {
              display: flex;
              justify-content: start;
              flex-wrap: wrap;
          }

          .insv-flex .-insv-side-panel .fitem {
              align-items: center;
              display: flex;
              cursor: pointer;
              width: 100%;
              justify-content: start;
              transition: 0.1s ease-in-out;
              border-radius: 18px;
              width: 100%;
              border: 1px solid transparent;
          }

          .-insv-side-panel .fitem.active {
              color: #eee;
          }

          .-insv-side-panel .fitem:hover {
              color: #fbfbfb;
          }

          .ins-hidden {
              display: none !important
          }

          



          .-section-title{

font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    padding: 0 8px;

          }
          .-insv-side-panel>div {



         display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s 
ease;
    margin-bottom: 4px;
    background: transparent;
    border: 1px solid transparent;

          }
     .-insv-side-panel>div span{
font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
        color: #ffffff;

     }   .-insv-side-panel>div i{


  width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
     }




       
          

          .-insv-side-panel {
              display: flex;
              position: absolute;
              left: 0;
              z-index: 10;
              background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
              padding: 10px 20px;
               width: 200px;
              border: 1px solid rgba(255, 255, 255, 0.06);
              height: 100%;
          }

          .insv_txt_btn {
              background: #fff;
              height: 90px !important;
              width: 90px !important;
              border: 1px solid #fff;
              position: relative;
              border-radius: 50%;
              overflow: hidden;
              z-index: 111111;
          }

          .insv_txt_btn img {
              height: 100%;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
          }

          #insv-text-btns {
              position: absolute;
              padding: 10px 20px;
              border-radius: 25px;
              bottom: 140px;
              right: 50px
          }

          .ins-panel {
              position: absolute;
              color: #e9e9e9;
              padding: 6px;
              border-radius: 20px;
              background: #16181a;
              border: 1px solid #313030;
              display: none;
          }


          .insv {
              bottom: 20px;
              left: 20px;
              z-index: 10;
          }

          .insv-icon_btn {
              cursor: pointer;
              transition: 0.2s;
              height: 30px;
              width: 30px;
              margin: 0 10px;
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 100%;
          }




          #animProgress {
              width: 100%
          }

          #animList {
              background: #e3d3d300;
              min-width: 158px;
              border: 1px solid #666;
              border-radius: 6px;
              margin-left: 20px;
              color: #959595;
              padding: 3px;
              margin-top: 10px;
          }

          a {
              text-decoration: none;
              color: #d2924e;
          }


          #insv-body {
              position: absolute;
              width: 100%;
              height: 100%;
          }

          #insv-body canvas {
              margin: auto;
          }


          body {
              background: transparent;
          }

          canvas {
              background: transparent !important;
          }

          .ins-card {

              background: var(--card-bg);
              box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px -8px;
              transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
              border-radius: 6px;
              padding: 4px;

              border: 1px solid rgba(0, 0, 0, 0.2);

              border-radius: 20px;
          }

          .ins-panel-body {
              border: 1px solid rgb(129 127 127 / 15%);
              border-radius: 16px;
              width: 100%;
              padding: 16px;

          }




          .ins-title-icon {

              height: 25px;
              width: 25px;
              display: inline-block;


          }

          .insv-title {

              font-size: 18px;
              line-height: 32px;
              font-weight: 600;
          }





          .ins-button {
              border: 2px solid rgba(0, 0, 0, 0.2);
              background-color: #000000;
              border-radius: 9px;
              min-height: 30px;
              line-height: 30px !important;
              transition: all 0.3s;
              padding: 2px 12px;
              text-align: center;
              border: 1px solid #3e3e3e;

          }

          .ins-button.ins-active {
              border: 2px solid rgba(46, 87, 253, 0.5);
              background-color: rgba(46, 87, 253, 0.1);


          }





          .epmat-img-cont {

              height: 50px;
              overflow: hidden;
              border-radius: 12px;
              border: 1px solid #0000003d;
              box-shadow: 1px 1px 5px #00000052;

          }

          .annotation-tooltip {
              position: absolute;
              background: #111;
              color: #fff;
              padding: 5px 10px;
              border-radius: 5px;
              font-size: 14px;
              display: none;
              white-space: nowrap;
              z-index: 10;
          }





          .ins-tools-cont {


              position: absolute;
              bottom: 8px;
              left: 0;
          }


          .ins-tools {


              color: #e9e9e9;
              padding: 20px;
              border-radius: 20px;

              background: #16181a;
              border: 1px solid #313030;
              display: none;


              background: rgba(20, 20, 20, 0.95);
              backdrop-filter: blur(20px);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 16px;
              padding: 12px 16px;
              gap: 8px;
              box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
                  z-index: 111;


          }

          .ins-tools-show .ins-tools {

              display: flex;

          }

          .ins-tools-show .ins-tools-show-btn {

              display: none;

          }

          .ins-tools-show-btn {
              background: rgba(20, 20, 20, 0.95);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 16px;
              backdrop-filter: blur(20px);


              height: 40px;
              width: 40px;
              border-radius: 16px;
              color: #e9e9e9;
              text-align: center;
              font-size: 25px;
              cursor: pointer;

              box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);


          }

          .ins-tools-show-btn:hover {
              color: #fff;
              transition: 0.2s;
              transform: scale(1.1);

          }

          input[type="range"] {

              background: transparent;
              cursor: pointer;
          }

          /* Removes default focus */
          input[type="range"]:focus {
              outline: none;
          }

          input[type="range"]::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              margin-top: -6px;
              background-color: #808080;
              border-radius: 0.5rem;
              height: 1.5rem;
              width: 0.5rem;
          }


          input[type="range"]::-webkit-slider-runnable-track {
              border-radius: 0rem;
              height: 0.1rem;
          }



          .-panel-icon-btn,
          #playAnimBtn {
              background-color: #a3a3a3;
              cursor: pointer;
              transition: 0.2s;

              mask-size: 100%;
          }

          .-panel-icon-btn:hover {
              background-color: #ffffff;
          }





          .-panel-btn:hover {


              transform: scale(1.2);
          }


          .ins-active .-panel-btn,
          .ins-active.-panel-btn {
              color: rgb(86 119 255);
              --color: rgb(86 119 255) !important;

          }




          .Controlller {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_controllaer.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_controllaer.svg) no-repeat center;
              mask-size: 100%;

          }












          #arBtn {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_vr.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_vr.svg) no-repeat center;
              mask-size: 100%;

          }


          #vrBtn {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_ar.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_ar.svg) no-repeat center;

              mask-size: 100%;

          }


          #playAnimBtn {


              -webkit-mask: url(/ins_web/ins_images/icons/play.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/play.svg) no-repeat center;
              mask-size: 100%;


          }

          #playAnimBtn.active {


              -webkit-mask: url(/ins_web/ins_images/icons/insv_pause.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_pause.svg) no-repeat center;
              mask-size: 100%;

          }
























          .render {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_render.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_render.svg) no-repeat center;
              mask-size: 100%;

          }


          .wcolor {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_wcolor.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_wcolor.svg) no-repeat center;
              mask-size: 100%;
              ;
          }

          .metalness {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_metalness.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_metalness.svg) no-repeat center;

              mask-size: 100%;

          }


          .roughness {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_roughness.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_roughness.svg) no-repeat center;

              mask-size: 100%;

          }

          .normal {
              -webkit-mask: url(/ins_web/ins_images/icons/ins_normal.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/ins_normal.svg) no-repeat center;
              mask-size: 100%;

          }

          .wireframe {
              -webkit-mask: url(/ins_web/ins_images/icons/insv_wireframe.svg) no-repeat center;
              mask: url(/ins_web/ins_images/icons/insv_wireframe.svg) no-repeat center;
              mask-size: 100%;

          }




          .insv>span {
              cursor: pointer;


          }






          .insv-contr-btn i {
              height: 30px;
              width: 30px;
              border-radius: 10px;
              border: 1px solid rgba(255, 255, 255, 0.15);
              background: rgba(30, 30, 30, 0.9);
              color: #ffffff;
              cursor: pointer;
              transition: all 0.2s ease;
              font-size: 15px;
          }

          .insv-contr-btn:hover i {
              background: rgba(50, 50, 50, 0.9);
              border-color: rgba(255, 255, 255, 0.25);
              transform: translateY(-1px);
          }


          .insv-contr-divider {
              width: 1px;
              background: rgba(255, 255, 255, 0.1);
              margin: 4px 8px;
              height: 25px;
          }

          .insv-contr-btn i.ins-active {
              color: var(--primary);

              border: 1px solid var(--primary);
              ;


          }



          .toggle-checkbox {
              display: none;
          }

          .toggle-label {
              display: block;
              width: 35px;
              height: 20px;
              background-color: #2b2f34;
              border-radius: 10px;
              position: relative;
              cursor: pointer;
              transition: background-color 0.3s;
          }

          .slider {
              position: absolute;
              top: 3px;
              left: 3px;
              width: 14px;
              height: 14px;
              background-color: #919191;
              border-radius: 50%;
              transition: transform 0.2s;
          }

          .toggle-checkbox:checked+.toggle-label {
              background-color: rgb(86 119 255)
          }

          .toggle-checkbox:checked+.toggle-label .slider {
              transform: translateX(15px);
              background-color: #ccc;

          }



          .insv-input {
              color: #c0bebe;
              background: rgb(45 51 57);
              border-radius: 6px;
              border: 1px solid rgb(75 72 72 / 79%);
              line-height: 30px;
              padding: 0 4px;
          }

          label {
              font-size: 12px;
          }