html,
* {
    font-family: 'Lato' ,sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    line-height: 1.6;
}
.canvas-container canvas {
    display: block;
    width: 100% !important;
    border: 2px solid black;
    margin: 0 auto;
    height: 600px;
    object-fit: cover !important;
}

.file-upload-label {
    display: block;
}

.file-upload-label img {
    /* width: 100px; */
    height: auto;
    top: 35%;

}
.Drag_or_drop_image
{
    font-family: Inter;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.from_your_system
{
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    line-height: 31px;
    text-align: center;

}
.OuterBodyBlock{
    display: flex;
    height: 92%;
    justify-content: center;
    align-items: center;
}
.OuterBodyBlock
{
    padding: 15px;
}
.innerBodyBlock
{
    background-color: #F5F5F5;
    width: 100%;
    min-height: 670px;
    border-radius: 5px;
    /* border: 1px saddlebrown solid; */
}

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

.DesginBody .card {
    max-width: 100%;
    margin: 0 auto;

}

.DesginBody .card-h {
    max-width: 100%;
}

@media (min-width: 300px) {
    .file-upload-label img {
        margin-top: 30%;
    }
}

.msg {
    border-color: #99BD3D;
}

.DesginMainBlock {
    width: 100%;
    /* border:1px solid #99bd3d; */
    margin-bottom: 5%;
}

.MeasurementToolBlock {
    width: 9%;
    float: left;
    /* border:1px solid #99bd3d; */
    text-align: center;
    background: #F5F5F5;
    border-radius: 10px;
    margin-top: 4%;
    padding-top: 1%;
}

.canvasBlock {
    width: 90%;
    float: right;
    /* border:1px solid #99bd3d; */

}

.small-images-container .small-image img {
    cursor: pointer;
    /* width: 35%; */
}

.small-images-container .small-image {
    margin-bottom: 30%;
}

.DesginHeader {
    width: 100%;
    background: #132615;
    padding: 5px 3px 7px 6px;
    /* border-radius: 5px; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #ffffff !important;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
}


.DesginHeader .design_btn_bg {
    background-color: #FFFFFF;
    color: #2F2F2F;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    /* padding: 10px 10px; */
    padding-left: 70px !important;
    padding-right: 70px !important;
    /* Adjust padding as needed */
}
.DesginHeader .design_btn_bg_active {
    background-color:#99BD3D;
    color:#FFFFFF;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    /* padding: 10px 10px; */
}

.DesginBody {
    width: 100%;
    position: relative;
}

.file-upload-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* .row {
    margin-right: calc(var(--bs-gutter-x)* -0.0);
} */

/* Custom CSS for styling the modal card */
#fourthmodal .card , #notDesignSave .card {
    /* border: 2px solid #99BD3D; */
    /* Set border color to #99BD3D */
    border-radius: 8px;
    /* Optional: Add border radius for rounded corners */
}

/* Custom CSS for styling the modal card body */
#fourthmodal .card-body  , #notDesignSave .card-body {
    padding: 25px;
    /* Adjust padding as needed */
}

#MaterialBlock .accordion-collapse , #MaterialBorderBlock .accordion-collapse
{
    max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
}



/* width */
#MaterialBlock  ::-webkit-scrollbar , #MaterialBorderBlock ::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  #MaterialBlock  ::-webkit-scrollbar-track , #MaterialBorderBlock ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #ffffff; 
    border-radius: 10px;
  }
   
  /* Handle */
  #MaterialBlock  ::-webkit-scrollbar-thumb , #MaterialBorderBlock ::-webkit-scrollbar-thumb  {
    background: #99BD3D; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  #MaterialBlock  ::-webkit-scrollbar-thumb:hover  , #MaterialBorderBlock ::-webkit-scrollbar-thumb:hover {
    background: #99BD3D; 
  }

#accordionFlushExampled .accordion-item  {
    border-radius: 10px !important;
    margin-bottom: 2%;
    margin-top: 1%;
}
.thumbnail_card
{
    border-radius: 5px;
    margin-bottom: 5%;
}
.thumbnail_card .card-body .card-title
{
    font-family: 'Lato',sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 16.8px;
    text-align: center;
    color: #2F2F2F;
}

#accordionFlushExampled .accordion-body .card-body  {
    text-align:center;
    /* background-color:#99BD3D; */
    border:none;
    color:#fff;
}
.accordion-button
{
    background-color: #99BD3D;
    color: #ffffff;
    font-family: 'Lato',sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #99BD3D;
    box-shadow: inset 0 0px 0 rgba(0, 0, 0, 0);
}
.accordion-button:focus {
    z-index: 3;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .0rem rgba(0, 0, 0, 0);
}

/* Custom CSS for styling the modal card text */
#fourthmodal .card-text.msg , #notDesignSave .card-text.msg {
    color: black;
    font-size: 16px;
    font-weight: bold;
}

#enteredPavingArea , #AienteredPavingArea {
    /* border: 2px solid #99BD3D; */
    /* Set border color to #99BD3D */
    font-family: 'Lato',sans-serif;
    border-radius: 8px;
    background: #99BD3D;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    padding: 10px;
    margin-bottom: 5px;
}

#aisqfeet{
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    padding: 10px;
    margin-bottom: 5px;
}

#enteredPavingArea  .sqfeetText , #AienteredPavingArea .sqfeetText {
    font-family: 'Lato',sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;

}
/* 132615 */

#accordionContainer {
    display: flex;
    align-items: center;
    gap: 10px;
}

#accordion {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
}

#accordionFlushExample {
    /* position: absolute; */
    width: 200px;
    top: 0;
    color:#F5F5F5;
    /* z-index: 999999; */
}

.selectmaterial {
    position: relative;
}

.lead {
    font-size: 1.5rem;
    font-weight: 300;
}


.beforeAfter {
    height: 650px;
}

/* new css */
.save_bg{
    background-color: #99BD3D;
}

.save_bg a{
    font-family: 'Lato',sans-serif !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;

}
.canvas_bg{
    background-color: #F5F5F5;
    /* min-height: 660px; */
    /* width: ; */

}
.accordion-button::after
{
    background-image: url('../project_images/Polygon-without-hover.svg')  !important;
    line-height: 20px;
    margin-top: 20px;
}

.accordion-button:not(.collapsed)::after {
    /* background-image: url('../project_images/Polygon-open.svg'); */
    transform: rotate(-180deg);
    line-height: 20px;
    margin-top: -9px;
}

.info-image {
   margin-top: 1%;
   margin-left: 2%;
}

.tool_sidebar_bg{
    background-color: #F5F5F5;
    border-radius: 10px;
    margin-top: 15%;
    padding-top: 28px;
    padding-left: 5%;
    /* padding-bottom: 5%; */
}
#enteredPavingArea
{
    background-color: #99BD3D ;
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #ffffff;
    
}

#enteredPavingArea span
{
    background-color: #99BD3D;
    font-family: 'Lato',sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #ffffff;
    
}

.mide_measurement_block

{
    width: 80%;
}
.edit_button
{
/* height: 45px; */
    border-radius: 5px;
    background: #F1F1F1;
    padding: 1%;
    line-height: 18px;
    border: none;
}

.edit_button .card-body
{
padding: 0px !important;
border: none !important;
margin: auto;
}

.edit_button .card-body span
{
    font-family: 'Lato',sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #000000;    
}

.edit_button .card-body a
{
    font-family: 'Lato',sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: #99BD3D;

}

#canvasImageBlock
{
    min-height: 754px !important;
    border: 2px solid #132615;
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 13px;
}
.tool_txt{
    font-family: 'Lato',sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #2F2F2F;
    cursor: pointer;
}
.fs_20{
    font-family: 'Lato',sans-serif;
    font-weight: 700 !important;
    font-size:  16px !important;
    color: #5C5C5C !important;
}

.DesginTabBlock
{   
    padding-top: 5%;
    /* padding-left: 10%; */
    /* padding-right:0%; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;         
}

.DesginTabBlockBgImage
{   
    background-image: url('../project_images/bg-line.svg');
    background-repeat: repeat-x;   
    background-position: center center;  
    position: absolute;     
    width: 70%;  
    height: 8px;
    left: 17%;
    top:76%
}


.DesginTabBlock .Desgin_tabs
{   
    width: 20%;
    font-family: 'Lato',sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    background: #F1F1F1;
    padding: 1.2% 0%;
    text-align: center;
    border-radius: 15px;
    z-index: 99;
}
#inputmeasurements , #userreferencetool
{
    border: 2PX solid #99BD3D;
    font-family: 'Lato',sans-serif;
    font-size: 16px;
    font-weight: 700;
}
.modal  .fw-bold
{
    font-family: 'Lato',sans-serif;
    font-weight: 800 !important;
    font-size: 22px;
}
.modal p .fw-bold
{
    font-family: 'Lato',sans-serif;
    font-weight: 600 !important;
    font-size: 12px;
}

#myModal .note_text
{
    font-family: 'Lato',sans-serif;
    font-weight:400 !important;
    font-size: 12px;
}
.DesginTabBlock .Desgin_tabs_active
{   
    background: #99BD3D;
    color: #FFFFFF;
}

#secondModalForm #inp
{
    border: 2px solid #99BD3D;
    font-family: 'Lato',sans-serif;
    font-weight: 700;
    font-size:  18px;
    border-radius: 5px;
}

#secondModalForm #length
{
    border: 2px solid #2F2F2F;
    font-family: 'Lato',sans-serif;
    font-weight: 700;
    font-size:  16px;
    border-radius: 5px;
}
#secondModalForm .fs_20
{
    font-family: 'Lato',sans-serif;
    font-weight: 700 !important;
    font-size:  16px !important;
    color: #5C5C5C !important;
}
 
.Instructions
{   
    margin-top: 5%;
    /* padding-left: 10%; */
    padding-right:0%;
    margin-bottom: 5%;
}
.mainSideToolbar_innerBlock
{
    padding: 8%;
    /* padding-left: 4%; */
}
#MaterialBlock  .mainSideToolbar_innerBlock .card , #MaterialBorderBlock .mainSideToolbar_innerBlock .card {
   
    border: 0px solid rgba(0, 0, 0, .125) !important;
    /* background: #F5F5F5; */
    border-radius: 15px;
}
.materialtxt
{
    font-family: 'Lato',sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 14.4px;
    text-align: justify;
    margin-top: 5%;
    color: #2F2F2F;
    width: 90%;
    margin: auto;
    margin-bottom: 5px;

}
.area_of_sqft {
    width: 45%;
}
#MaterialBlock .accordion-item .accordion-button , #MaterialBorderBlock .accordion-item .accordion-button 
{
    background-color: #FFFFFF ;
    font-family: 'Lato',sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    /* text-align: center; */
    color: #2F2F2F;
    border-radius: 5px !important;
    padding: .4rem 1.25rem !important;
}

#MaterialBlock .accordion-item .accordion-button a , #MaterialBorderBlock .accordion-item .accordion-button a 
{
   margin-left: 2%;
}

.instruction_heading
{
    font-family: 'Lato',sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    color:#5B5B5B;
}
.instruction_des
{
    font-family: "LatoWebMedium"; 
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    color:#5B5B5B;
}
.Acitm
{
    width:170px;
    padding-left: 0px;
    padding-right: 2px;

}
.LeftRightPanel
{
    margin-top: 3%;
}
.leftArro
{
    padding-left: 1.2%;
}
.selectbtn {
    margin-right: -12px;
}


.nextPrevious {
    display: flex;
    justify-content: space-between;
    margin-top:2%;
}

#back, #next {
    width: 50px; /* Adjust width as needed */
    height: 50px; /* Adjust height as needed */
    margin: 5px;
    margin-left:280px; /* Adjust margin as needed */
}
.bg-color{
    background: #FFFFFF;
    color: #2F2F2F;
    border: 2px solid #99BD3D !important;
}

.bg-color:hover{
    background: #99BD3D;
    color: #FFFFFF;
}

.projectFrame{
justify-content: center !important;
display:flex;
margin-top: 5%;;
}
.projectframetext
{
    margin-top: 3%;
}
.inline-buttons button {
    display: inline-block;
    margin-right: 10px; /* Adjust spacing between buttons */
    background-color:#fafafa; /* Button background color */
    color: #fff; /* Button text color */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    ;
}

.inline-buttons button:hover {
    background-color: #99BD3D; /* Hover background color */
}
.instructionText{
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;

}

/* css add mam.. */
.line_hight{
    line-height: 0.9;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background: #ffffff !important ;
    color: #2f2f2f !important;
    border: 2px solid #99BD3D !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
    background: #99BD3D !important ;
    color: #ffffff !important;
}

@media (min-width: 320px) and (max-width: 400px)
{
    .DesginTabBlock .Desgin_tabs{
        font-size: 10px;
        line-height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .col-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .OuterBodyBlock{
        height: 87%;
    }
    #videoContainer{
        height: 100%;
    }
    .thumbnail_card{
        width: 50px;
    } 
    
}
@media (min-width: 401px) and (max-width: 567px){

    .DesginTabBlock .Desgin_tabs{
        font-size: 10px;
        line-height: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .OuterBodyBlock{
        height: 87%;
    }
    .thumbnail_card{
        width: 55px;
    } 
}

@media (min-width: 568px) and (max-width: 750px){

    .DesginTabBlock .Desgin_tabs{
        font-size: 11px;
    }
}

@media (min-width: 751px) and (max-width: 900px){

    .DesginTabBlock .Desgin_tabs{
        font-size: 14px;
    }
}

@media (min-width: 320px) and (max-width: 385px) {
    .thumbnail_card .card-body .card-title{
        font-size: 8px !important;
    }
}

@media (min-width: 320px) and (max-width: 575px) {
    .mide_measurement_block{
        width: 65%;
        
    }
    .card-img-top{
        width: 27px;
        height: 27px;
    }
    .fontsize{
        font-size: 18px !important;
    }

    .beforeAfter{
        min-height: 300px;
        height: 300px;
    }
    .DesginTabBlockBgImage {
        top: 46%;
      }
    .thumbnail-container{
        width: 77px !important;
        height: 50px !important;
    }
    .pdding10{
        padding-right: 12px !important;
    }
    .margin23{
        margin-left: 23.5px;
    }

    .dblock{
        display: block !important;
    }
    
.accordion-button::after {
    display: block;
    position: absolute;
    /* bottom: 124px; */
    right: 17px;
    top: 0px
  }

  .accordion-button::after {
    margin-top: 18px;
}
  .accordion-button:not(.collapsed)::after {
    margin-top: 0px !important;
  }
  .accordion-button::after {
      /* margin-top: 30px; */
  }
  .info-image{
    position: absolute;
    right: 50px;

  }
  .info-image {
    margin-top: 2%;
    margin-left: 2%;
}
    .ps3{
        padding: 0px;
        padding-right: 0px;
    }
    #accordionFlushExampled .accordion-body .card-body{
        background: none;
    }
    .accordion-collapse .collapse .show{
        background: #F5F5F5 !important;
    }
    .collapsed{
        background: #99BD3D;
    }
   
    #editpavingAreaDisplay .updatebutton{
        font-size: 16px;
    }
    .thumbnail_card .card-body .card-title{
        font-size: 9px;
    }
    .width88{
        width: 88px !important;
    }
    .file-upload-label img{
        margin-top: 50%;
    }
    .width34{
        width: 55px;
        border-radius: 5px;
        height: 65px;
    }
    .MyProfileSection {
        padding: 20px;
    }
    .LeftRightPanel {
        margin-top: 6%;
    }
    .LeftRightPanel{
        padding-left: 20px;
    }
    .rightArro{
        padding-right: 10px;
        display: flex;
        align-items: center;
    }
    .rounded-circle1{
        border-radius: 50%;
    }
    #accordionFlushExample {
        width: 410px;
       
    }
    .leftArro{
        padding-left: 0px;
        display: flex;
        align-items: center;
    }
    .iconsmargin{
        /* margin-left: 112px; */
    }
    .editAreaButtonbox{
        width: 42% ;
    }
    .editAreaBox{
        width: 52%;
    }
    .width27{
        width: 27px;
    }
    .DesginHeader .design_btn_bg {
        font-size: 10px;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .save_bg a{
        font-size: 10px;
        padding-top: 8px;

    }
    .instruction_des{
        font-size: 12px;
    }
    .mainSideToolbar_innerBlock{
        padding: 0px !important;
        margin-left: 4%;
        /* margin-right: -2.5%; */
    }
    .tool_txt {
        font-size: 10px;
        font-weight: bold;
    }
    .line_hight{
        line-height: 0.5;
    }
    .tool_sidebar_bg{
        padding: 5% 0%;
        padding-bottom: 2px;
        /* padding-left: 0px; */
    }
   
    #enteredPavingArea {
        font-size: 14px;
    }
    #enteredPavingArea span{
        font-size: 14px;
   
    }
    .MyProfileSection{
        /* margin-bottom: 35%; */
    }
    .area_of_sqft{
        width: 100%;
    }
    .DesginTabBlock{
        padding-top: 0%;
        margin-top: 28%;
    }
}
@media(min-width:600px) and (max-width:650px){
    .DesginTabBlock{
        padding-top: 10%;
    }
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel{
    background: #f0f0f0 !important ;
    color: #2F2F2F !important;
    border: 2px solid #c7c7c7 !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel:hover{
    background: #c7c7c7 !important ;
    color: #2F2F2F !important;
}
@media(min-width:320px) and (max-width: 991px){
    .tool_sidebar_bg{
        margin-top: 0px !important;
        /* padding-top: 0px !important; */
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
           border-bottom-left-radius: 0px !important;
           border-bottom-right-radius: 0px !important;
    }
    
    .dblock{
        padding-top: 0px !important;
    }
    .mainSideToolbar_innerBlock .card{
        border-radius: 5px !important;
    }
    .mainSideToolbar_innerBlock .card .size{
        padding: 0px !important;
        padding-top: 4px !important;
    }
    .rounded-circle1{
        border-radius: 50%;
    }
    .accordion-button::after {
        display: block;
        position: absolute;
        /* bottom: 124px; */
        right: 17px;
        top: 0px
      }
    
      .accordion-button::after {
        margin-top: 18px;
    }
    .bg-color, #addref,  #inp{
        background: #99BD3D;
        color: #FFFFFF;
    }
    div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm{
        background: #99BD3D !important ;
        color: #ffffff !important;
    }
    div:where(.swal2-container) button:where(.swal2-styled).swal2-cancel{
        background: #e5e5e5 !important ;
        color: #2f2f2f !important;
    }
}


@media(min-width:576px) and (max-width: 700px){
    .area_of_sqft{
        width: 61%;
    }
    .card-img-top{
        width: 34px;
        height: 34px;
    }
    
    .dblock{
        display: block !important;
    }
}
@media(min-width:700px) and (max-width: 750px){
    #editpavingAreaDisplay .updatebutton{
        font-size: 11px;
    }
    .card-img-top{
        width: 34px;
        height: 34px;
    }
    
    .dblock{
        display: block !important;
    }
 
}


@media (min-width: 320px) and (max-width: 450px) {
    .small-images-container .small-image img{
        width: 50%;
    }
    .rightArro{
        padding-right: 5px;
        display: flex;
        align-items: center;
    }
    .thumbnail_card .card-body .card-title {
        font-size: 8px !important;
    }
    
}
@media(min-width:768px) and (max-width: 991px){
    #accordionFlushExample{
        width: 500px;
    }
    .rightArro{
        padding-right: 10px;
        display: flex;
        align-items: center;
    }
    .card-img-top{
        width: 34px;
        height: 34px;
    }
    .thumbnail_card .card-body .card-title{
        font-size: 14px;
    }
    .width34{
        padding-left: 6px;
        padding-right: 6px;
    }
}


@media (min-width: 566px) and (max-width: 799px){
    .DesginHeader .design_btn_bg {
        font-size: 12px;
        /* padding: 10px 10px; */
        padding-left: 0px !important;
        padding-right: 12px !important;
        text-align: center;
    }
    .DesginHeader .design_btn_bg {
        font-size: 12px;
        /* padding: 10px 10px; */
        padding-left: 30px !important;
        padding-right: 30px !important;
        text-align: center;
    }
    .leftArro{
        padding-left: 0px;
    }
    .rightArro{
        padding-right: 10px;
        display: flex;
        align-items: center;
    }
    
    .dblock{
        display: block !important;
    }
}
@media (min-width: 768px) and (max-width: 778px) {
    .mainSideToolbar_innerBlock{
        padding-bottom: 0px !important;
    }
    .mainSideToolbar_innerBlock{
        padding-top: 0px !important;
    }
}


@media (min-width: 800px) and (max-width: 991px) {
    .mainSideToolbar_innerBlock{
        padding: 0px;
        padding-left: 0%;
    }
    #accordionFlushExample{
        width: 500px;
    }
    .DesginHeader .design_btn_bg {
        font-size: 16px;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
    .leftArro{
        padding-left: 0px;
    }
    .accordion-button:not(.collapsed)::after {
        margin-top: 0px;
      }
      #MaterialBlock .accordion-item .accordion-button a , #MaterialBorderBlock .accordion-item .accordion-button a {
        float: right;
        margin-right: 30px;
      }
    
    .dblock{
        display: block !important;
    }
}


@media (min-width: 650px) and (max-width: 799px){
    #MaterialBlock .accordion-item .accordion-button a , #MaterialBorderBlock .accordion-item .accordion-button a{
        float: right;
        margin-right: 30px;
      }
}

@media (min-width: 992px) and (max-width: 1100px){
    .DesginHeader .design_btn_bg {
        font-size: 16px;
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}

@media (min-width: 320px) and (max-width: 325px) and (orientation: portrait)
{
    .DesginTabBlock .Desgin_tabs{
        font-size: 10px;
        line-height: inherit;

    }
    .ps3{
        padding-left: 3%;
    }
}

@media (min-width: 810px) and (max-width: 820px) and (orientation: portrait) {
    .DesginTabBlockBgImage{
        top:72%;
    }
   
}

@media (min-width: 568px) and (max-width: 578px) and (orientation: landscape) {
   
    .DesginTabBlockBgImage{
        top: 70% !important;
    }
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 5%;
    }
 
 
}
@media (min-width: 568px) and (max-width: 578px) {
 
    .ps3{
        padding-left: 2%;
    }
 
 
}
@media (min-width: 667px) and (max-width: 700px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 5%;
    }
}



@media (min-width: 736px) and (max-width: 414px) and (orientation: landscape) {
    .scroll-content .item {
        min-width: 85px ;
        padding: 12px 0px 0px 5px;
        background: #F5F5F5;
        text-align: center;
      }
   
}

@media (min-width: 736px) and (max-width: 745px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 2%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;
        padding-bottom: 0% ;
        padding: 0%;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
 
 
}


@media (min-width: 760px) and (max-width: 991px){
    .tool_sidebar_bg{
        padding-left: 0px;
    }
}

@media (min-width: 760px) and (max-width: 765px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;
        padding: 0%;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}


@media (min-width: 834px) and (max-width: 845px) and (orientation: portrait) {

    .DesginTabBlockBgImage{
        top: 70%;
    }
    
   
}
@media (min-width: 768px) and (max-width: 775px) and (orientation: portrait) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .DesginTabBlockBgImage{
        top: 70%;
    }
    
   
}
@media (min-width: 780px) and (max-width: 790px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;
        padding: 0%;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}
@media (min-width: 800px) and (max-width: 805px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}


@media (min-width: 883px) and (max-width: 890px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .DesginTabBlockBgImage{
        top: 70% !important;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
 
 
}

@media (min-width: 812px) and (max-width: 820px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .DesginTabBlockBgImage{
        top: 70% !important;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
 
 
}

@media (min-width: 844px) and (max-width: 855px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .DesginTabBlockBgImage{
        top: 70% !important;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
 
 
}
@media (min-width: 880px) and (max-width: 890px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .DesginTabBlockBgImage{
        top: 70% !important;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
 
 
}

@media (min-width: 896px) and (max-width: 900px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}
@media (min-width: 882px) and (max-width: 890px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}
@media (min-width: 914px) and (max-width: 920px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
        margin-left: -12.6px;
        margin-right: -11px;

    }
    .pdding10{
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
    }
    
}

@media (min-width: 926px) and (max-width: 950px) and (orientation: landscape) {
    .DesginTabBlock .Desgin_tabs{
        font-size: 16px;
    }
    .ps3{
        padding-left: 1.5%;
    }
    .mainSideToolbar_innerBlock{
        padding-left: 0%;
    }
    
}

@media (min-width: 1080px) and (max-width: 1090px) and (orientation: landscape) {
    .px-lg-3 {
        padding-right: 0px !important;
        padding-left: 0px !important;
      }
    
}


@media (min-width: 320px) and (max-width: 375px) {
    .innerBodyBlock {
        min-width: 265px;
        min-height: 265px;
    }
    .OuterBodyBlock{
        min-height: 265px;
    }
    #canvasImageBlock{
        min-height: 265px !important;
    }
    }

@media (min-width: 375px) and (max-width: 481px){
   
    #canvasImageBlock{
        min-height: 300px !important;
    }
    .innerBodyBlock{
        min-height: 300px !important;
        min-width: 300px;

    }
    .OuterBodyBlock{
        min-height: 300px;
    }
    #MaterialBlock .accordion-item .accordion-button , #MaterialBorderBlock .accordion-item .accordion-button{
        font-size: 14px;
    }
    #accordionFlushExampled .card-body{
        border-top-left-radius: 10px;
        border-top-right-radius : 10px;
    }
}

@media (min-width: 482px) and (max-width: 576px){
   
    #canvasImageBlock{
        min-height: 400px !important;
    }
    .innerBodyBlock{
        min-height: 300px !important;
        min-width: 400px;
    }
    .OuterBodyBlock{
        min-height: 300px;
    }
    .material_des_block{
        margin-right: 30px;
    }
    #MaterialBlock .accordion-item .accordion-button , #MaterialBorderBlock .accordion-item .accordion-button{
        font-size: 14px;
    }
    #accordionFlushExampled .card-body{
        border-top-left-radius: 10px;
        border-top-right-radius : 10px;
    }
}
@media (min-width: 482px) and (max-width: 490px){
    .material_des_block{
        margin-right: 30px;
    }
}
@media (min-width: 490px) and (max-width: 520px){
    .material_des_block{
        margin-right: 30px;
    }
}
@media (min-width: 520px) and (max-width: 576px){
    .material_des_block{
        margin-right: 30px;
    }
}
@media (min-width: 576px) and (max-width: 600px){
    .material_des_block{
        margin-right: 38px;
    }
}
@media (min-width: 577px) and (max-width: 768px){
   
    #canvasImageBlock{
        min-height: 500px !important;
    }
    .innerBodyBlock{
        min-height: 412px !important;
        min-width: 500px !important;
    }
    .OuterBodyBlock{
        min-height: 300px;
    }
    .material_des_block{
        margin-right: 32px;
    }
}



@media (min-width: 769px) and (max-width: 992px) {
   
    #canvasImageBlock{
        min-height: 600px !important;
    }
    .innerBodyBlock{
        min-height: 512px !important;
        min-width: 600px !important;
    }
    .OuterBodyBlock{
        min-height: 300px;
    }
}
@media (min-width: 992px)  {
   
    #canvasImageBlock{
        min-height: 600px !important;
    }
    .innerBodyBlock{
        min-height: 512px !important;
        min-width: 600px !important;
    }
    .OuterBodyBlock{
        min-height: 300px;
    }
}

@media (max-width: 430px) {
    .thumbnail_card {
        padding: 5px !important;
    }
    .width34 {
        padding: 0px;
        margin-left: 5px;
    }
    /* .thumbnail_card .card-body .card-title {
        font-size: 10px !important;
    } */
    .padding0{
        padding: 0px;
    }
}

.active-button {
    background-color: #99BD3D !important;
    color: #ffffff;
}
.collapsed {
    background-color: #ffffff !important; /* Color when collapsed */
}

.accordion-body p,
.accordion-body a {
    color: white;
}

.accordion-body span{
    color: #fff;
}
.active-image {
    filter: brightness(0) invert(1);
}
.activeimg::after{
    filter: brightness(0) invert(1);
}

.positionright{
    position: absolute;
    right: 48px;
}


.highlight{
    background: #99BD3D !important;
    border-radius: 15px;
    color:#ffffff !important
}
.highlight .card-body .card-title{
  
    color:#ffffff !important
}

.white-text {
    color: #ffffff !important;
}

.material_des_block{
    overflow: auto;
}

.rightArro{
    /* padding-right: 6px; */
    display: flex;
    align-items: center;
}
.leftArro{
    /* padding-right: 6px; */
    display: flex;
    align-items: center;
}
.selectbtn:focus{
    box-shadow: none !important;
}
.innerBodyBlock{
    display: flex;
}
@media (min-width:320px) and (max-width: 489px){
    .area_of_sqft {
        width: 100% !important;
    }
    .selectbtn{
        margin-right: -9px !important;
    }
    .material_des_block{
        margin-right: 10px;
    }
}

@media (min-width:489px) and (max-width: 600px){
    .area_of_sqft {
        width: 70% !important;
    }
}
@media (min-width:1100px){
    .area_of_sqft {
        width: 35% !important;
    }
}
@media (min-width:1386px){
    .area_of_sqft {
        width: 25% !important;
    }
}

@media (min-width:1100px){
  
    .material_des_block{
        margin-right: 44px;
    }
}
.designAddIcon {
    border: none !important;
}


div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus{
    box-shadow: none !important;
}
.file-upload-label{
    cursor: pointer;
}
.swal2-title{
    font-size: 1.55rem;
}
.mainSideToolbar_innerBlock {
    padding: 4%;
    /* padding-left: 4%; */
}
.swal2-html-container{
    color: #2f2f2f !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.modal#statusSuccessModal .modal-content, 
.modal#statusErrorsModal .modal-content {
	border-radius: 30px;
}
.modal#statusSuccessModal .modal-content svg, 
.modal#statusErrorsModal .modal-content svg {
	/* width: 100px;  */
	/* display: block;  */
	margin: 0 auto;
}
.modal#statusSuccessModal .modal-content .path, 
.modal#statusErrorsModal .modal-content .path {
	stroke-dasharray: 1000; 
	stroke-dashoffset: 0;
}
.modal#statusSuccessModal .modal-content .path.circle, 
.modal#statusErrorsModal .modal-content .path.circle {
	-webkit-animation: dash 0.9s ease-in-out; 
	animation: dash 0.9s ease-in-out;
}
.modal#statusSuccessModal .modal-content .path.line, 
.modal#statusErrorsModal .modal-content .path.line {
	stroke-dashoffset: 1000; 
	-webkit-animation: dash 0.95s 0.35s ease-in-out forwards; 
	animation: dash 0.95s 0.35s ease-in-out forwards;
}
.modal#statusSuccessModal .modal-content .path.check, 
.modal#statusErrorsModal .modal-content .path.check {
	stroke-dashoffset: -100; 
	-webkit-animation: dash-check 0.95s 0.35s ease-in-out forwards; 
	animation: dash-check 0.95s 0.35s ease-in-out forwards;
}

@-webkit-keyframes dash { 
	0% {
		stroke-dashoffset: 1000;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes dash { 
	0% {
		stroke-dashoffset: 1000;
	}
	100%{
		stroke-dashoffset: 0;
	}
}
@-webkit-keyframes dash { 
	0% {
		stroke-dashoffset: 1000;
	}
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes dash { 
	0% {
		stroke-dashoffset: 1000;}
	100% {
		stroke-dashoffset: 0;
	}
}
@-webkit-keyframes dash-check { 
	0% {
		stroke-dashoffset: -100;
	}
	100% {
		stroke-dashoffset: 900;
	}
}
@keyframes dash-check {
	0% {
		stroke-dashoffset: -100;
	}
	100% {
		stroke-dashoffset: 900;
	}
}
.box00{
	width: 100px;
	height: 100px;
	border-radius: 50%;
}
.modal-content{
    border-radius: 10px !important;
}

.bghovecolorchange:hover{
    background: #99BD3D;
    color: #F5F5F5 !important;
}
.gapPadding{
    padding: 24px 20px;
}

.designBtn{
    border: none !important;
}
/* ens css add mam.. */


/* Css add by sir */
.desginBlockBG
{
    width: 100%;
    background-color: #FFFFFF;
    cursor: pointer;
    display: block;
    line-height: 40px;
}
/* css code end by sir */

  /* Button background color */
.designBtn {
    position: relative;
    height: 40px;
  }
  
  /* Close icon styles */
  .design-close-icon {
    position: absolute;
    top: -4px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #99BD3D;
    color: #000;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    font-size: 18px;
  }
  
  /* Container to position the close icon relative to the button */
  .design-btn-group {
    position: relative;
    display: inline-block;
  }
/* new menu on mobile */




/* design configurate page */
.customizetooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    /* min-width: 200px; */
    width: 100%;
  }
 

  .customizetooltip .hovertooltiptext {
    visibility: hidden;
    width: auto;
    min-width: 200px; /* Adjust as needed */
    background-color: #99BD3D;
    color: #fff;
    text-align: center;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 104%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;

  }

  .customizetooltip .hovertooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #99BD3D transparent transparent;
  }

  .customizetooltip:hover .hovertooltiptext ,  .customizetooltip .hovertooltiptext::after  {
    visibility: visible;
    opacity: 1;
  }

  .tool_txt
  {
    line-height:normal;
  }

  .opacity_none
  {
    pointer-events: none; 
    opacity: .5;
  }

  .opacity_active
  {
    pointer-events: auto; 
    opacity: 1;
  }
    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
   appearance: textfield; 
}