#customshapedivdr {
    background-color: #fff;
    padding: 30px;
    font-family: roboto;
}
#customshapedivdr h1 {
    font-size: 56px;
    font-weight: bold;
    color: #fff;
}
#customshapedivdr .container,#customshapedivdr .container-fluid{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
#customshapedivdr .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
#customshapedivdr .row>* {
    
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    /* flex-shrink: 0; */
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}
@media (min-width: 768px){
    #customshapedivdr .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
}
#customshapedivdr .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
}
#customshapedivdr .md\:sticky {
    position: -webkit-sticky;
    position: sticky;
}
#customshapedivdr .md\:w-1\/5 {
    width: 20%;
}

}


@media (min-width: 1400px){
    #customshapedivdr .container{
    max-width: 1320px;
}
}
#customshapedivdr .img-fluid {
    max-width: 100%;
    height: auto;
}
#customshapedivdr .firstsection-mkdivr{
            background-image: -webkit-gradient(linear,left top,right top,from(#fc4a1a),to(#f7b733));
    background-image: linear-gradient(
90deg,#fc4a1a,#f7b733);
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    height: 315px;
    color:#fff;
        }
        .hidden {
    display: none;
}
#customshapedivdr .custom-shape-divider {
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
    line-height: 0;
}
#customshapedivdr .custom-shape-divider svg{
    display: block;
    position: relative;
}

#customshapedivdr .w-full {
    width: 100%;
}
#customshapedivdr .relative {
    position: relative;
}
#customshapedivdr .preview-container{
    margin-top: 50px;
}
#customshapedivdr .z-40 {
    z-index: 40;
}
#customshapedivdr .top-0 {
    top: 34px;
}
#customshapedivdr .options-box{
    max-width: 70rem;
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
    margin-left: auto;
    margin-right: auto;
    padding: 20px 10px;
    position: relative;
    border-radius: 0.5rem;
    margin-top: -80px;
    -webkit-box-shadow: 11px 0 38px 0 rgb(0 0 0 / 10%);
    box-shadow: 11px 0 38px 0 rgb(0 0 0 / 10%);   
    height: 213px;
    margin-bottom: 87px;
}

#customshapedivdr .col-five {
    width:17%;
    float: left;
    height: 75px;
    padding: 10px;
}
#customshapedivdr .col-five label,#customshapedivdr .col-fifty label{
    font-size: 18px;
    font-weight: bold;
    line-height: 10px;
    color: #1b1b1b;
    display:block;
}
#customshapedivdr .col-five span{
    font-size: 12px;
    color: #a2a2a2;
    margin-bottom: 10px;
    display: block;
}

#customshapedivdr .col-fifty{
    width: 47%;
    float: left;
    margin-top:60px;
    padding: 10px;
}
#middleshapebuilder select, #middleshapebuilder input{
    width: 100%;
}
/* checkbox */

#customshapedivdr .onoff {
    margin: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  position: relative;
  cursor: pointer;
  width: 70%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#customshapedivdr .onoff label {
    line-height: 32px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #f7ae31;
  border-radius: 5px;
  font-weight: bold;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}
#customshapedivdr .onoff label:after {
  content: 'NO';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  font-size: 12px;
  color: #fff;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35);
  z-index: 1;
}
#customshapedivdr .onoff label:before {
  content: '';
  width: 15px;
  height: 24px;
  border-radius: 3px;
  background: #FFF;
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
#customshapedivdr .onoff input:checked + label {
  background: #fc501b;
  text-indent: 8px;
}
#customshapedivdr .onoff input:checked + label:after {
  content: 'YES';
  color: #fff;
}
#customshapedivdr .onoff input:checked + label:before {
  left: 37px;
}

#customshapedivdr .onoff2 input:checked + label:after {
  content: 'TOP';
}
#customshapedivdr .onoff2 label:after {
  content: 'BOTTOM';
}
/* checkbox */

/* input range */
#customshapedivdr .range{
    margin-top: 23px;
    height: 45px;
  background: #fff;
  border-radius: 10px;
  padding: 0 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
#customshapedivdr .sliderValue{
  position: relative;
  width: 100%;
}
#customshapedivdr .sliderValue span{
  position: absolute;
    padding: 7px;
  height: 45px;
  width: 45px;
  transform: translateX(-70%) scale(0);
  font-weight: 500;
  top: -59px;
  line-height: 55px;
  z-index: 2;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
}
#customshapedivdr .sliderValue span.show{
  transform: translateX(-70%) scale(1);
}
#customshapedivdr .sliderValue span:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #fc501b;
  border: 3px solid #fff;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-left-radius: 50%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
#customshapedivdr .field{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
#customshapedivdr .field .value{
  position: absolute;
  font-size: 14px;
  color: #fc501b;
  font-weight: 600;
}
#customshapedivdr .field .value.left{
  left: -22px;
}
#customshapedivdr .field .value.right{
  right: -43px;
}
#customshapedivdr .range input{
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  border: none;
  z-index: 2222;
}
#customshapedivdr .range input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  background: #fc501b;
  border: 1px solid #fc501b;
  cursor: pointer;
}
#customshapedivdr .range input::-moz-range-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  background: #fc501b;
  border: 1px solid #fc501b;
  cursor: pointer;
}
#customshapedivdr .range input::-moz-range-progress{
  background: #fc501b; 
}
#makemyrange2{
margin-left: 34px;
}
/* input range */

#middleshapebuilder input[type="color"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    width:29px;
    height: 29px;
    border: none;
    background: transparent;
    display: inline-block;
}

#middleshapebuilder select {
    background: #e2e8f0;
    border: none;
    padding-left: 10px;
    border-radius: 40px;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 15%);
    height: 40px;
}
#customshapedivdr .makebothcolor {
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 15%);
    border-radius: 21px;
    padding: 6px 10px;
}
#customshapedivdr .download-button{

    position: absolute;
    margin-left: auto;
    margin-right: auto;
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
    outline: 0;
    width: 48px;
    height: 65px;
    padding-left: 10px;
    padding-right: 10px;
    left: 49%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    -webkit-box-shadow: 0 3px 3px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 3px 3px 0 rgb(0 0 0 / 15%);
    cursor: pointer;
    bottom: -74px;
}
#customshapedivdr .download-button svg{
    margin-top: 10px;
    fill: #fb4b1a;
    -webkit-transition: .3s;
    transition: .3s;
}

#middleshapebuilder select:focus-visible, #middleshapebuilder input:focus-visible  {
    outline: none!important;
}
input#mycustomvalopacity {
    width: 66%;
}


/* modal popup */

#customshapedivdr .download-popup-modal{
    
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#customshapedivdr .v--modal-background-click{
    
    width: 100%;
    min-height: 100%;
    height: auto;
}
#customshapedivdr .v--modal-box{
    
    background-color: white;
    text-align: left;
    border-radius: 10px;
    box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
    padding: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    top: 64px;
    left: 468px;
    width: 600px;
    height: auto;

}
#customshapedivdr .v--modal-box svg{
 cursor: pointer;
    width: 15px;
    float: right;
    color: red;
}
#svg-content{
    font-size: 16px;
    color: #fff;
    /* white-space: pre; */
    background-color: #000000;
    /* overflow-x: scroll; */

    word-wrap: break-word;
        padding: 10px;
}

#customshapedivdr .v--modal-box p {
    font-size: 14px;
    color: #fb4b1a;
}

/* modal popup */


.mycustomvariationbk span {
    display: inline-block;
    background: #f7ac30;
    margin-top: 33%;
    border-radius: 66%;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    padding: 5px 10px;
}
.mycustomvariationbk span:hover, .mycustomvariationbk span.active {
    background:#fc501b;
}
.mycustomvariationbk {
    -webkit-box-shadow: 11px 0 38px 0 rgb(0 0 0 / 10%);
    box-shadow: -6px 20px 38px 0 rgb(0 0 0 / 16%);
    position: fixed;
    right: 0px;
    width: 20px;
    height: 108px;
    background: #fff;
    top: 50%;
    z-index: 99999999;
    padding: 5px;
}


#customshapedivdr .options-box-pages{
margin:auto!important;
}
.onoffpostpage {
    width: 100px;
    margin: auto;
}
.wantoshowonpage {
    padding: 20px;
}
.wantoshowonpage center {
    font-size: 15px;
    margin-bottom: 20px;
}


.col-showcaseplugins {
    -webkit-box-shadow: 11px 0 38px 0 rgb(0 0 0 / 10%);
    box-shadow: 11px 0 38px 0 rgb(0 0 0 / 10%);
    padding: 20px;
    width: 30%!important;
    display: inline-block;
    margin: 35px 9%;
}

@media screen and (max-width:500px){
    #customshapedivdr h1 {
        font-size: 20px;
    }
    
    #customshapedivdr .firstsection-mkdivr {        
        padding-bottom: 4rem;
        height: auto;
    }
    #customshapedivdr {
        padding: 5px;
    }
    .mycustomvariationbk {
        position: relative;
        right: 0px;
        width: 95%;
        height: 32px;
        top: 0px;
        padding: 5px;
        margin: auto;
        justify-content: center;
        display: flex;
        z-index: 9;
    }
    .mycustomvariationbk span {
        display: inline-block;
        margin-top: 0;
        padding: 8px 10px;
        margin-right: 10px;
    }
    .wantoshowonpage {
        width: 95%!important;
    }
    .col-showcaseplugins {
        width: 75%!important;
    }
    
    #customshapedivdr .options-box {
        height: 536px;
        padding: 10px 0;
    }
    #customshapedivdr .col-five {
        width: 42%;
    }
    #customshapedivdr .col-fifty {
        width: 91%;
    }
    
    #customshapedivdr .v--modal-box {
        top: 233px;
        left: 0px;
        width: 100%;
    }
    #customshapedivdr .sliderValue span {
        height: 30px;
        width: 30px;
    }


}