body{
            background-color: #f6f6f6;
            position:relative;
         }

         #svgWrapper{
            margin: auto;
            overflow: hidden;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
         }

         #seats.editor #svgWrapper{
            max-width: calc(100vw - 330px);
            height: 100vh;
         }

         #seats.pricing #svgWrapper{
            max-width: calc(100vw - 530px);
            
         }

         .seats{
         opacity: 1;
         }
         .is_booked{
         background: #ebebeb;
         cursor: not-allowed;
         }
         .is_available{
         background: #29AB87;
         cursor: pointer;
         }
         .is-active{
         background: black !important;
         }
         .is_available:hover{
         background: #00755E;
         }
         .is_reserved{
         background: gray;
         cursor: not-allowed;
         }
         .js_poperover{
         position: absolute;   
         transition: all .3s;
         }
         .js_poperover_child{
         box-shadow: 0 0 20px rgb(0 0 0 / 10%);
         background: #fff;
         padding: 15px;
         width: fit-content;
         border-radius: 10px;
         min-width: 300px;
         text-align: center;
         transition: all .3s;
         }
         .js_poperover_child:before{
         content: '';
         position: absolute;
         width: 15px;
         height: 15px;
         background: #fff;
         }
         .js_poperover_child.pos-right:before{
         top: 32%;
         transform: translate(0%, -50%) rotate(45deg);
         left: -7px;
         }
         .js_poperover_child.pos-bottom:before{
         left: 50%;
         top: -7px;
         transform: translate(-50%, 0px) rotate(45deg);
         }
         .js_poperover_child.pos-top:before{
         left: 50%;
         bottom: -7px;
         transform: translate(-50%, 0px) rotate(45deg);
         }
         .js_poperover_child.pos-left:before{
         top: 32%;
         transform: translate(0%, -50%) rotate(45deg);
         right: -7px;
         }
         .brdr-top{
         margin-top: 10px;
         border-top: 1px solid #ebebeb;
         padding-top: 10px;
         }
         .pricingDetails{
         font-weight: 300;
         font-size: 14px;
         }
         .setStatus{
         text-transform: capitalize;
         font-size: 14px;
         }
         .setStatus.booked{
         color: red;
         }
         .setStatus.reserved{
         color: gray;
         }
         .setStatus.available{
         color: #29AB87;
         }
         .djhed{
         width: 300px;
         }
         .buyNow{
         background: #29AB87;
         color: #fff;
         border: none;
         }
         div[data-tippy-root]{
         pointer-events: unset !important;
         }
         .form-group{
         margin-bottom: 1rem;
         }
         .form-group label{
            margin-bottom: 10px;
            font-size: 12px;
         }
         .form-group .form-control{
            font-size: 12px;
         }

         #seats{
            height: 100vh;
            position: relative;
         }

         #seats.editor{
            width: calc(100vw - 160px);
         }

         #seats.pricing{
            width: calc(100vw - 360px);
         }


         .fixedCol{
            flex: 0 0 auto;
            box-shadow: 1px 1px 12px rgb(0 0 0 / 20%);
            padding-left: 0;
            position: relative;
            z-index: 999;
            background: #fff;
         }

         .fixedCol.editor{
            width: 160px;
         }

         .fixedCol.pricing{
            width: 360px;
         }

         .rightMenu{
            padding: 0;
            margin: 0;
            list-style-type: none;
         }

         .rightMenu li{
            padding: 20px;
            cursor: not-allowed;
            color: rgb(90, 90, 90);
            pointer-events: none;
            opacity: .2;
         }

         .rightMenu li.allowed{
            pointer-events: unset !important;
            cursor: pointer;
            opacity: 1;
         }

         .rightMenu li svg{
            font-size: 20px;
         }

         .rightMenu li div{
            font-size: 14px;
         }

         .rightMenu li:hover{
            color: rgb(106, 90, 205);
         }

         .rightMenu li.active{
            color: rgb(106, 90, 205);
         }

         #output{
            position:absolute;
            padding:10px;
            border-radius: 5px;
            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
            background: #fff;
         }

         #output div{
            font-size: 14px;
         }

         .section{
            position: absolute;
            padding: 10px;
            border: 1px solid lightgray;
            width: 100px;
            height: 100px;
            transform-origin: center;
         }

         .courtImg{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 30%;
         }

         .straightLine, .hrLine{
           position: absolute;
           background-color: #000080;
           top: 0;
         }

         #box {
           height: 100%;
           width: 100%;
         }

         .rangeSlider{
            margin-top: 12px;
            background: #ddd;
            height: .5rem;
         }

         .rangeSlider .ui-state-default{
            background: #318CE7;
             border-radius: 50%;
             height: 20px;
             width: 20px;
             top: -8px;
         }

         .rangeSlider .sliderStart:after{
            content: "";
             position: absolute;
             bottom: 12px;
             left: 50%;
             border: 10px solid #383c42;
             border-bottom: none;
             border-left-color: transparent;
             border-right-color: transparent;
             transform: translateX(-50%);
         }

         .venueCurve{
            padding: 0 10px;
         }

         .rangeSlider .sliderStart{
            position: absolute;
         }

         .rangeSlider .sliderStart:before{
            background: #383c42;
             width: 30px;
             height: 30px;
             font-size: 12px !important;
             display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 50%;
             top: -48px;
             content: attr(data-before);
             color: #fff;
             left: 50%;
             transform: translateX(-50%);
             position: absolute;
         }

         .createBg{
            position: absolute;
             left: 0;
             width: 0%;
             height: 0.5rem;
             border-radius: 3px;
             top: -1px;
             background: #32de84;
         }

         .seatWrapper{
            height: 100%;
            width: 100%;
         }

         .viewJSeWrapper{
            background: rgba(114,160,193,.2);
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 700;
             font-style: italic;
         }

         .section.active{
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
         }

         .childMenu, .submenu{
            list-style-type: none;
            padding: 15px 0 0 0;
            margin: 0px 0 0 0;
/*            border-top: 1px solid lightgray;*/
         }

         .childMenu li{
            padding: 10px 0;
            cursor: pointer;
/*            cursor: not-allowed;*/
/*            pointer-events: none;*/
/*            opacity: .2;*/
         }

         .childMenu li.grn{
            color: #77dd77;
         }

         .childMenu li.allowed{
            opacity: 1;
            pointer-events: unset;
            cursor: pointer;
         }
         
         .childMenu li svg{
            font-size: 20px;
         }

         .childMenu li div{
            font-size: 14px;
         }

         .childMenu li:hover{
            color: rgb(106, 90, 205);
         }

         .childMenu li.active{
            color: rgb(106, 90, 205);
         }

         .sectionSelection{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 99;
            cursor: pointer;
         }

         .section.brdr{
            border: 1px solid blue;
         }

         .sectionSelection.drag{
            cursor: grab;
         }

         [type='color'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  width: 15px;
  height: 15px;
  border: none;
}

[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type='color']::-webkit-color-swatch {
  border: none;
}

.color-picker {
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #f8f9f9;
}

.seat.ui-selected{
   background: black;
}

.seat.ui-selecting{
   background: transparent !important;
   border: 1px solid #000;
}

#venueDiv.underlay{
   overflow: unset !important;
}

.offCanvasDiv{
   left: 0;
   bottom: 20px;
}

.offCanvasDiv .offCanvasOpener{
   padding: 5px 10px;
    background: #728FCE;
    color: #fff;
    border-radius: 0 15px 15px 0px;
    margin: 5px 0;
    cursor: pointer;
    font-size: 12px;
}

.offCanvasDiv .offCanvasOpener:hover{
   background: #151B54;
}

.forms{

}

.seatGrp{
   transform-origin: center center;
   transform-box: fill-box;
}

.forms .row{
   margin-bottom: 12px;
}

.forms label{
   font-size: 12px;
}

.forms input{
   font-size: 12px;
    height: 30px
}

.forms input:focus, .forms input:active{
   box-shadow: none;
   outline: none;
}

#saveSin{
   right:0; left:0; bottom: 0px;margin:auto;width:200px;
   transition: bottom .3s;
}

#saveSin button{
   border: none;background: black;border-radius: 30px;color: #fff;padding: 10px 20px;font-weight: 400;font-size: 13px;display: flex;align-items: center;
}


/*svg*/
.HPcai{
   position: absolute;
    width: 90%;
    height: calc(100vh - 200px);
    background: center center / contain no-repeat;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.map__svg{
   /*outline: 0px;
   transform-origin: 0% 0%;
   will-change: transform, width, height;   
   touch-action: pan-x pan-y pinch-zoom;*/
   width: 100%;
   height: calc(100vh - 100px);
}

#seats.editor .zoomer{
   position: fixed;
    bottom: 15px;
    right: 200px;
}

#seats.pricing .zoomer{
   position: fixed;
    bottom: 15px;
    right: 400px;
}

.zoomer ul{
   padding: 0;
   list-style-type: none;
}

.zoomer ul li{
   background: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0px 0 7px rgba(0,0,0,0.2);
    margin: 5px 0;
    border-radius: 5px;
}

.clickAblePath{
   cursor: pointer;
}

.polygons .clickAblePath.active{
   fill:rgba(51, 155, 253, 1);
   stroke-width: 40px;
   stroke: red;
}

.polygons[data-transparent] .clickAblePath.active{
   stroke-width: 10px;
}

.clickAblePath.blue{
   fill:rgba(2, 108, 223);
}

.clickAblePath.black{
   fill:rgba(0, 0, 0);
}

.clickAblePath.white{
   fill:transparent;
}

.clickAblePath:hover{
   fill: rgb(1, 81, 167) !important;
}

.svgSeat{
   fill: blue;
   cursor: pointer;
}

.svgSeat.redSvg{
   fill: red !important;
}

.svgSeat:hover, .svgSeat.hover{
   fill: rgb(100, 149, 237);
}

.svgSeat.green{
   fill: #7CFC00;
}

.zoomer ul li:hover{
   background: rgb(2, 108, 223);
   color: #fff;
}

.venueDetails{

}

.venueDetails .name{
   
}

.venueDetails .location{
   font-size: 12px;
   color: gray;
}

.venueDetails .leftInfo{
   font-size: 13px;
}

.venueDetails .rightInfo{
   font-size: 13px;
   
}

.btnPublish{
   width: 100%;
    text-align: center;
    border: 1px solid;
    font-size: 12px;
    padding: 10px 10px;
}

.btnPublish.publish{
   background-color: rgb(2, 120, 223);
   border-color: rgb(2, 120, 223);
   color: #fff;
}

.btnPublish:hover{
   background: #6f42c1;
   border-color: #6f42c1;
   color: #fff;
}

.form-control{
   padding: 5px;
   font-size: 13px;
   color: #000;
}

.form-control:focus{
   outline: none;
   box-shadow: unset;
}

input[type='color']{
   width: 100%;
   border:1px solid;
}

.sectionPrice{
   overflow-x: auto;
   max-height: calc(100vh - 300px);
}

.selectBGColor{
   text-transform: capitalize;
}

.clickAblePath.gray{
   fill: #E8E8E8 !important;
}

.clickAblePath.disabled{
   fill: #A9A9A9;
}

.leftMenus{
   position: absolute;
   left: 20px;
   top: 20px;
   z-index: 999;
}

.leftMenus button{
   position: relative;
}

.backButton{
   border: 1px solid #000;
   color: #000;
   text-decoration: none;
   width: 100px;
   display: inline-block;
   text-align: center;
   padding: 5px;
   border-radius: 30px;
   cursor: pointer;
   
}

.backButton:hover{
   background: #000;
   color: #fff;
}

.backButton.not-allowed{
   pointer-events: none;
   cursor: not-allowed;
   opacity: .5;
}

.section_Info{
   text-align: center;
}

.section_Info .ews{
   margin-right: 10px;
}

.section_Info .ews:last-child{
   margin-right: 0px;
}

.section_Info h6{
   font-size: 12px;
}

.section_Info p{
   font-size: 10px;
}

.venueInfoTitle{
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
   text-align: center;
   top: 10px;
}

.venueInfoTitle h5{
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 2px;
}

.venueInfoTitle p{
   font-size: 12px;
   color: gray;
}

h5{
   font-size: 1rem !important;
}

h6{
   font-size: 13px !important;
}

.removeBttn{
   color: red;
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;
}

circle[data-price]{
   fill: #5CA29D;
}

.moreDropdown{
   background: transparent;
   border: none;
   padding: 0;
   cursor: pointer;
}

.moreDropdown:hover{
   color: red;
}

.moreOptions .dropdown-item{
   font-size: 12px;
}

.moreOptionDropdownRow{
   position: absolute;
   z-index: 999;
   background: #fff;
   box-shadow: 0px 0px 11px rgba(0,0,0, .1);
   border-radius: 10px;
   padding: 10px 0;
   display: none;
   width: 150px;
}

.moreOptionDropdownRow.show{
   display: block;
}

.moreOptionDropdownRow .dropdown-item{
   font-size: 12px;
   width: 100%;
   cursor: pointer;
   padding: 5px 15px;
}

.moreOptionDropdownRow .dropdown-item.disabled{
   cursor: not-allowed;
   opacity: .5;
}

.showSectionInfo{
   display: none;
   right: 30px;
   top: 30px;
   border-radius: 5px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
   padding: 15px;
}

.showSectionInfo strong{
   font-size: 12px;
   width: 60%;
   min-width: 100px;
}

.showSectionInfo p{
   font-size: 12px;
   margin-bottom: 0;
   width: 40%;
}

/*Right Click Menu*/

#context-menu, #left-menu{
   position: fixed;
   z-index: 10000;
   min-width: 250px;
   background: #fff;
   border-radius: 5px;
   transform: scale(0);
   transform-origin: top left;
   box-shadow: 0 2px 6px 2px rgba(60,64,67,.15);
   max-height: calc(100vh - 200px);
/*   overflow-y: auto;*/
}

#context-menu .items, #left-menu .items{
   padding: 10px;
   font-size: 14px;
   color: #333;
   cursor: pointer;
   border-radius: 0;
   position: relative;
   display: flex;
   align-items: center;
}

#context-menu .items .svgDiv, #left-menu .items .svgDiv{
   position: absolute;
   left: 15px;
   font-size: 18px;
   top: 5px;
}

#context-menu .items .txtDiv, #left-menu .items .txtDiv{
   padding-left: 30px;
   position: relative;
}

#context-menu .items:hover, #left-menu .items:hover{
   background-color: #f1f3f4;
}

#context-menu.visible, #left-menu.visible{
   transform: scale(1);
   transition: transform 200ms ease-in-out;
}

.sbMenu{
   position: absolute;
   right: 100%;
   top: -10px;
   margin-top: 0;
   padding: 0px 0px;
   border-radius: 6px 0 0 6px;
   opacity: 0;
   display: block;
   pointer-events: none;
   transition: 0s;
   background: #fff;
}

.sbMenu li{
   list-style-type: none;
   padding: 10px;
   cursor: pointer;
   width: 150px;
   font-size: 14px;
   color: #333;
}

.sbMenu li:hover{
   background-color: #f1f3f4;
}

.haveDropdown:hover .sbMenu{
   top: 0;
   opacity: 1;
   pointer-events: auto;
   transition: all 0.4s ease;
}



/*Side bar Menu*/
.sidebar{
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 260px;
   z-index: 100;
   transition: all 0.5s ease;
   background: #fff;
   box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.sidebar.close{
  width: 75px;
}

.sidebar .logo-details{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}

.sidebar .logo-details i{
  font-size: 30px;
  color: #11101d;
  height: 50px;
  min-width: 75px;
  text-align: center;
  line-height: 50px;
}

.sidebar .logo-details .logo_name{
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  transition-delay: 0.1s;
}

.sidebar.close .logo-details .logo_name{
  transition-delay: 0s;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links{
  height: 100%;
  padding: 30px 0 150px 0;
  overflow: auto;
}
.sidebar.close .nav-links{
  overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar{
  display: none;
}
.sidebar .nav-links li{
  position: relative;
  list-style: none;
  transition: all 0.4s ease;
}
.sidebar .nav-links > li.active:before,
.sidebar .nav-links > li:before{
  position:absolute;
  left:0;
  top:0;
  content:'';
  width:4px;
  height:100%;
  background:#93181a;
  opacity: 0;
  transition: all 0.25s ease-in-out;
  border-top-right-radius:5px;
  border-top-right-radius:5px;
}
.sidebar .nav-links li.active:before,
.sidebar .nav-links li:hover:before{
  opacity: 1;
}
.sidebar .nav-links li .iocn-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar.close .nav-links li .iocn-link{
  display: block
}
.sidebar .nav-links li i{
  height: 40px;
  min-width: 75px;
  text-align: center;
  line-height: 40px;
  color: #11101d;
  font-size: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sidebar .nav-links li.active i,
.sidebar .nav-links li:hover i{
  color: #93181a;  
}
.sidebar .nav-links li.showMenu i.arrow{
  transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow{
  display: none;
}
.sidebar .nav-links li a{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.sidebar .nav-links li a .link_name{
  font-size: 16px;
  font-weight: 400;
  color: #11101d;
  transition: all 0.4s ease;
}
.sidebar .nav-links li.active a .link_name,
.sidebar .nav-links li:hover a .link_name{  
  color: #93181a;
}
.sidebar.close .nav-links li a .link_name{
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li .sub-menu{
  padding: 6px 6px 14px 80px;
  margin-top: -10px;
  background: #fff;
  display: none;
}
.sidebar .nav-links li.showMenu .sub-menu{
  display: block;
}
.sidebar .nav-links li .sub-menu a{
  color: #1d1b31;
  font-size: 12px;
  padding: 5px 0;
  white-space: nowrap;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover{
  opacity: 1;
}
.sidebar.close .nav-links li .sub-menu{
  position: absolute;
  left: 100%;
  top: -10px;
  margin-top: 0;
  padding: 10px 20px;
  border-radius: 0 6px 6px 0;
  opacity: 0;
  display: block;
  pointer-events: none;
  transition: 0s;
}
.sidebar.close .nav-links li:hover>.sub-menu{
  top: 0;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.sidebar .nav-links li .sub-menu .link_name{
  display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name{
  font-size: 14px;
  opacity: 1;
  display: block;
  font-weight: 600;
}
.sidebar .nav-links li .sub-menu.blank{
  opacity: 1;
  pointer-events: auto;
  padding: 3px 20px 6px 16px;
  opacity: 0;
  pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank{
  top: 50%;
  transform: translateY(-50%);
}
.sidebar .profile-details{
  position: fixed;
  bottom: 0;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1d1b31;
  padding: 12px 0;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details{
  background: none;
}
.sidebar.close .profile-details{
  width: 78px;
}
.sidebar .profile-details .profile-content{
  display: flex;
  align-items: center;
}
.sidebar .profile-details img{
  height: 52px;
  width: 52px;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 14px 0 12px;
  background: #1d1b31;
  transition: all 0.5s ease;
}
.sidebar.close .profile-details img{
  padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
}
.sidebar .profile-details .job{
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  opacity:.5;
  white-space: nowrap;
}
.sidebar .profile-details i.bx{  
    min-width: 50px;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
  display: none;
}
.sidebar .profile-details .job{
  font-size: 12px;
}
.home-section{
  position: relative;
  background: #E4E9F7;
  height: 100vh;
  left: 260px;
  width: calc(100% - 260px);
  transition: all 0.5s ease;
}
.sidebar.close ~ .home-section{
  left: 78px;
  width: calc(100% - 78px);
}
.home-section .home-content{
  height: 60px;
  display: flex;
  align-items: center;
}
.home-section .home-content .bx-menu,
.home-section .home-content .text{
  color: #11101d;
  font-size: 35px;
}
.home-section .home-content .bx-menu{
  margin: 0 15px;
  cursor: pointer;
}
.home-section .home-content .text{
  font-size: 26px;
  font-weight: 600;
}
@media (max-width: 420px) {
  .sidebar.close .nav-links li .sub-menu{
    display: none;
  }
}


/*Side bar Menu End*/


label {
   margin-bottom: 5px;
   opacity: .8;
   font-size: 14px;
}

#svgWrapper_2{
   position: absolute;
   right: 0;
   width: 1024px;
   height: calc(100vh - 200px);
   top: 0;
   bottom: 0;
   left: 0;
   margin: auto;
}

#svgWrapper_2.active{
   z-index: 1;
}

#svgWrapper_2 svg{
   width: 100%;
   height: calc(100vh - 200px);
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
}

.svgWrapper_parent:before{
   content: '';
   width: 100vw;
   height: 100vh;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background: rgba(0,0,0, .5);
   backdrop-filter: blur(5px);
}

.haveDropdown{
   position: relative;
}

.hideOnDisable{
   opacity: 1;
   transition: opacity .5s;
}

.hideOnDisable.active{
   opacity: .2;
   pointer-events: none;
}

.pageLoader{
   inset: 0;
}

.featuredBackgroundContainer svg{
   color: rgb(3, 105, 161);
   height: 5rem;
}

.puffLoader_1{
   position: absolute; 
   height: 60px; 
   width: 60px; 
   border: thick solid rgb(2 132 199); 
   border-radius: 50%; 
   opacity: 1; 
   top: 0px; 
   left: 0px; 
   animation-duration : 2s;
   animation-name: react-spinners-PuffLoader-puff-1, react-spinners-PuffLoader-puff-2;
   animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1);
   animation-fill-mode: both;
   animation-delay: -1s;
   animation-iteration-count: infinite;
   animation-play-state: running;
}

.puffLoader_2{
   position: absolute; 
   height: 60px; 
   width: 60px; 
   border: thick solid rgb(2 132 199); 
   border-radius: 50%; 
   opacity: 1; 
   top: 0px; 
   left: 0px; 
   animation-duration : 2s;
   animation-name: react-spinners-PuffLoader-puff-1, react-spinners-PuffLoader-puff-2;
   animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1);
   animation-fill-mode: both;
   animation-delay: 0s;
   animation-iteration-count: infinite;
   animation-play-state: running;
}

@keyframes react-spinners-PuffLoader-puff-1{
   0% {
      transform: scale(0)
      
   } 

   100% {
      transform: scale(1.0)
   }
}

@keyframes react-spinners-PuffLoader-puff-2{
   0% {
      opacity: 1
   }
   
   100%{
      opacity: 0;
   }
   
}

.tippy-content, .tippy-box{
   padding: 0 !important;
   border-radius: 10px !important;
}

.tippyPopoverContent{
   background: #000;
   width: 150px;
   border-radius: 10px;
   overflow: hidden;
}

.tippyPopoverContent .tippyHeader{
   background: #7735EA;
}

.tippyPopoverContent .tippyHeader h5{
   margin-bottom: 0;
   color: #fff;
}

.tippyPopoverContent .tippyHeader p{
   margin-bottom: 0;
   color: #fff;
}

.venueInfoOnDOM{
   max-width:calc(100vw - 250px);
   width: 100%;
   position: relative;
}

.screenInfo{
   position: absolute;
   left: 100px;
   font-size: 20px !important;
   top:15px;
   background: rgba(0, 0, 0, 0.7); 
   color: #fff; 
   padding: 7px 15px; 
   border-radius: 5px;
}

.hamBurger{
   cursor: pointer;
}

.closeIconFixedCol{
   display: none;
}

.svgSeat.not_visible{
   visibility: hidden;
}

.orDiv{
   text-align: center;
    margin: 12px 0px;
    position: relative;
}

.orDiv span{
   width: 30px;
    display: block;
    text-align: center;
    margin: auto;
    background-color: #fff;
    position: relative;
}

.orDiv:before{
   content: '';
   color: #000;
   position: absolute;
   height: 1px;
   background: #000;
   left: 0;
   right: 0;
   margin: auto;
   top: 13px;
   z-index: 0;
}
@media only screen and (max-width: 576px){
   .sidebar{
      display: none;
   }

   .fixedCol{
      position: fixed;
      right: -200px;
      height: calc(100vh - 100px);
      top: 0;
   }

   #seats.editor{
      width: 100vw;
   }

   #seats.editor .zoomer{
      right: 15px;
   }

   #seats.editor #svgWrapper{
      max-width: 100vw;
   }

   .venueInfoOnDOM{
      display: none;
   }

   .screenInfo{
      position: unset;
      font-size: 10px !important;
   }

   .zoomer{
      display: none;
   }

   .closeIconFixedCol{
      display: block;
      margin-top: 15px;
      margin-left: 15px;
      font-size: 22px;
   }

   .HPcai{
      left: 40px;
   }
}

@media only screen and (min-width: 576px){
   .hamBurgerParent{
      display: unset !important;
      position: absolute;
   }

   .screenInfo{
      width: 180px;
      text-align: center;
   }
}

.polygons[data-transparent]{

}

.polygons[data-transparent] .clickAblePath, .polygons[data-transparent] .clickAblePath:hover{
   fill: transparent !important;
}

.is_selected{
   font-size: 14px !important;
   padding: 15px 15px 0;
}

.savingOptions{
   background: #fff;
}

.childMenu{
   height: calc(100vh - 250px);
   overflow-y: auto;
   padding-left: 200px;
   margin-left: -200px;
}