
body{
    overflow: hidden;
}

.accordion-body:not(.layout-editor .accordion-body, #accordionMenu .accordion-body),.accordion-button:not(.layout-editor .accordion-button) {
    margin: 0;
    /* font-family: Arial, sans-serif; */
    /* background-color: var(--bgcolor1) !important;  */
    color: #fff;
    /* background: linear-gradient(to bottom, var(--bgcolor1), var(--bgcolor2));  */
    
    /* background: linear-gradient(to bottom, #002366, #002366);  */
}

.accordion:not(#mdlLayoutDesigner .accordion,#accordionMenu .accordion, .show-section .accordion),.pagecontent,
.accordion-body:not(#mdlLayoutDesigner .accordion-body,#accordionMenu .accordion-body, .show-section .accordion-body),
.accordion-button:not(#mdlLayoutDesigner .accordion-button, #accordionMenu .accordion-button, .show-section .accordion-button) {
    margin: 0;
    /* font-family: Arial, sans-serif; */
    background-color: var(--bgcolor1) !important; 
    color: #fff !important;
    box-shadow: none !important;
}
.accordion,.accordion-body{
    padding: 0;
}

#accordMenuCollapse .accordion-body{
    background-color: var(--bgcolor1);
}

.card-section,.testimonial-section,.about-section,.team-section,.login-section,.signup-section,.footer-section,.topnav-section,.services-section,
.accordion-section {
    margin-bottom: 50px;
    background-color: #fff;
    color: white;
    padding: 10px;
}


.accordion-button{
    height: 32px;
    /* background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%); */
    border: 1px solid transparent;
}

.accordion-button:focus,.accordion-button.active,.accordion-button:hover{
    height: 32px;
    /* background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%); */
    border: 1px solid #007FD4;
}

.accordion-button::after {
    content: none ;
}

.accordion-button.custom-icon::after {
    content: url('data:image/svg+xml,%3Csvg%20data-wf-icon%3D%22ChevronSmallDownIcon%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.00002%209.29293L10.6465%206.64648L11.3536%207.35359L8.00002%2010.7071L4.64647%207.35359L5.35358%206.64648L8.00002%209.29293Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}



.offcanvas{
    background-color: var(--bgcolor1) !important; 
    /* margin-left:34px;width: 300px; */
    height: calc(-36px + 100vh); 
    margin-top: 35px;  
    width: 250px !important;      
    opacity: 1;     
}
.offcanvas-backdrop{
    opacity: 0 !important;
}
.topbar, .bottombar {
    height: 35px;
    /* background-color: #333; */
    color: #fff;
    /* text-align: center; */
    line-height: 35px;
    /* border-bottom: 1px solid var(--bordercolor2); */
}
.qa-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 30px); /* Total height minus top and bottom bars */
}
.contents {
    display: flex;
    flex: 1;            
}
.leftbar1 {
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    /* border-right: 1px solid var(--bordercolor2); */
    row-gap: 10px;
    /* justify-content: center; */
    /* box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8); */
    /* margin-right: 2px; */
}

.toolitem-24:not(.tm-misc),.btn-btm {
    position: relative;
    background-color: transparent;
    width: 34px;
}

.toolitem-24.tm-misc {
    /* position: relative; */
    background-color: transparent;
    width: 34px;
}

.toolitem-24.active{
    background-color: #000000;
    width: 34px;
}

.leftbar2{
    width: 263px;
    /* background-color: #777; */
    transition: width 0.3s;
    border-right: 3px solid var(--bgcolor1);
    /* border-bottom: 1px solid var(--bordercolor2); */
    /* border: 1px solid var(--bordercolor2); */
    box-shadow: inset 0px 0px 2px 1px #000000;
    padding: 3px;
    /* overflow: auto; */
    /* box-shadow: -2px -2px 6px rgba(255,255,255,.2), 2px 2px 6px rgba(0,0,0,.8); */
}

.leftbar2 .accordion-body{
    /* height: calc(100vh - 90px); */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* margin-bottom: 5px; */
}

.leftbar2 #headingTitle:not(.leftbar2 .accordion-body){
    padding: 5px;
    background-color: var(--bgcolor1);
    color: var(--color1);
    /* width: 255px; */
}

.leftbar2.hidden {
    width: 0;
    overflow: hidden;
}
.rightbar {
    width: 250px;
    box-shadow: inset 0px 0px 2px 2px #000000;
    /* margin: 3px; */
    padding: 2px;
    /* background-color: #999; */
}
.qa-main,.layout-editor,.layout-preview,#ofcPageLayout,#ofcControls {
    /* flex: 1; */
    /* background-color: #fff; */
    padding: 5px;
    overflow: auto;
    /* margin: 3px; */
    box-shadow: inset 0px 0px 1px 2px #000000;
}
.qa-main{
    margin-right: 3px;
    height: calc(100vh - 35px);
    overflow: hidden !important;
}
.toggle-button {
    background-color: #444;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.qa-row {
    display: flex;
}

.sub-div {
    width: 82px;
    height: 92px;
    margin: 1px;
    /* border: 1px solid #fff; */
}



.toolitem-24,.sub-div,.btn-btm {
    display: flex;
    color: white;
    /* transition: opacity 0.3s ease; */
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.toolitem-24{
    /* opacity: 0.7; */
}

.toolitem-24:not(.active):hover, .sub-div:hover,.btn-btm:hover,.topbar button:hover,#accordionMenu button:hover,.nav-link:hover {
    opacity: 1;
    background-color: var(--bgcolor1hov);
    /* background: linear-gradient(to bottom left, var(--bgcolor2), var(--bgcolor1) 100%); */
    /* background: var(--gradient4); */
    /* background: linear-gradient(to right, rgb(10, 32, 74) 0%, rgb(30, 104, 179) 100%); */
    border: 1px solid var(--linecolor1);
    /* padding-left: 3px; */
}

/* .top-svg{
    display: flex;
    color: white;
    transition: opacity 0.3s ease;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.top-svg:hover {
    opacity: 1;
    background: linear-gradient(to bottom left, var(--bgcolor2), var(--bgcolor1) 100%);
} */

#logo{
    margin: 5px;
    cursor: pointer;
    opacity: 0.8;
    /* padding-left: 9px; */
    /* padding-right: 8px; */
    /* border-right: 1px solid var(--bordercolor2); */
    /* padding-top: 6px; */
    /* padding-bottom: 5px; */
    /* height: 100%; */
}

#logo:hover{
    opacity: 1;
}

.ti-sm:hover{
    /* background-color: #2A2D2E; */
    background: linear-gradient(to bottom left, var(--bgcolor1), var(--bgcolor2) 100%);
    background: var(--gradient4);
    /* background: linear-gradient(to top left, #353434 0%, #606160 100%); */
    /* border: 1px solid var(--linecolor1); */
    padding-left: 3px;
}

.col1{
    column-gap: 4px;
    padding: 5px;
}

/* .modal-header,.bkgc1, .offcanvas-header{
    background-image: linear-gradient(rgb(64, 64, 64), rgb(37, 37, 38), rgb(64, 64, 64)) !important;
    background-repeat: repeat-x !important;
    border-bottom: 1px solid #101010;
    color: #fff !important;
} */


.sc-sz.active {
    background-color: var(--bordercolor2);
    /* border: 1px solid var(--color1); */
}

.topbar button,#accordionMenu button{
    background-color: var(--bgcolor1);
    border: 1px solid transparent;
}

/* .topbar button:hover{
    background: linear-gradient(to bottom left, var(--bgcolor2), var(--bgcolor1) 100%);
    background: linear-gradient(to right, rgb(254, 141, 35) 0%, rgb(255, 167, 89) 100%);
} */

.btm-tool{
    display: flex;
    flex-direction: column; /* Align SVGs vertically */
    justify-content: flex-end;
    height: 65%;
}

#toggleProperties.open{
    background-color: var(--bgcolor1);
    color: var(--color1);
    position: absolute;
    right: 250px;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

#toggleProperties.close{
    background-color: var(--bgcolor1);
    color: var(--color1);
    position: absolute;
    right: 1px ;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
}

/* For Section Templates */

.sections-templates{
    transform: scale(0.2);
    transform-origin: top left; 
    width: 1270px;
    height: 450vh !important;   
    /* height: calc(100% * 0.2); */
}

#accordMenuCollapse{
    height: 85vh;
}


.sections-templates *{
    color: initial;
}

.show-section{
    position: absolute;
    width: auto;
    height: auto;
    top: 40px;
    left: 300px;
    z-index: 99999;
    transform: scale(0.6);
    transform-origin: top left;
    padding: 10px;
    /* border: 1px solid var(--linecolor1); */
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    /* background-color: #fff; */
}

/* Added on 22-02-2025 */

#ifrEditor{
    height: calc(100vh - 45px);
}

ol, ul {
    padding-left: 10px !important;
    word-wrap: none;
}

ul li {
    white-space: nowrap;
}

#accordionMenu * {
    color: var(--color1) !important;
}

.sc-sz{
    /* padding: 3px; */
}
.sc-sz .top-svg2{
    margin-top: 3px;
}

/* 
#accordionMenu li div:hover {
    background-color: red;
} */


:root {
	--gradient-shadow: linear-gradient(
		45deg,
		#fb0094,
		#0000ff,
		#00ff00,
		#ffff00,
		#ff0000,
		#fb0094,
		#0000ff,
		#00ff00,
		#ffff00,
		#ff0000
	);
}

.selected {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #fff;
	text-align: center;
	font-size: 50px;
	font-weight: bold;
	width: 400px;
	height: 250px;
	background: linear-gradient(0deg, #000, #262626);
}
.selected:before,
.selected:after {
	content: "";
	position: absolute;
	top: -2px;
	left: -2px;
	background: var(--gradient-shadow);
	background-size: 400%;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	z-index: -1;
	animation: animate 20s linear infinite;
}

.selected:after {
	filter: blur(1px);
}

@keyframes animate {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 300% 0;
	}
	100% {
		background-position: 0 0;
	}
}

#ifrEditor {
    overflow: auto; /* Ensure iframe is scrollable */
}

#ifrEditor::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

#ifrEditor::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

#ifrEditor::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#ifrEditor::-webkit-scrollbar-track {
    background: #f1f1f1;
}



.class-dropdown {
    position: absolute;
    background: grey;
    border: 1px solid #999;
    border-radius: 5px;
    max-height: 200px;
    overflow: auto;
    width: -webkit-fill-available;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding: 5px;
    display: none;
}
/* .class-dropdown { */


.class-option {
    /* display: flex;
    align-items: start; */
    padding: 2px;
    margin-left: 15px;
    width: max-content;
    /* cursor: pointer;
    white-space: nowrap; 
    width: 100%;
    justify-content: flex-start; */
}

.class-option:hover {
    background: #181e29;
}

.class-option input {
    margin-right: 8px;
}

/* Added on 10-03-2025 */
/* For Background's Gradients */
.list_gradients {
    position: relative;
    display: inline-block;
}
.list_gradients-content {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    width: 120px;
    padding: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    max-height: 300px;
    overflow-y: auto;
}
.gradient-list-box {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 4px;
}

.inputgroup:hover .list_gradients-content {
    display: grid;
    z-index: 999999;
    top: 21 px;
    margin-left: -91px;
    background-color: #ffffff !important;
    .stylesheet{
        overflow-y: hidden;
    }
}

    /* For Background's pattern */
    .inputgroup .pattern-list-box {
        width: 40px;
        height: 40px;
        display: inline-block;
        cursor: pointer;
        margin: 3px;
        border-radius: 3px;
        background-size: 40px 40px; /* Ensures proper pattern scaling */
        border: 1px solid #ccc; /* Optional for better visibility */
        background-color: #ffffff;
    }
    
    .pattern-box {
        width: 40px;
        cursor: pointer;
        background: white;
    }
    .dropdown-pattern {
        display: none;
        position: absolute;
        background: white;
        padding: 5px;
        border: 1px solid #ccc;
        z-index: 1000;
    }
    .inputgroup .pattern-container {
        display: grid;
        grid-template-columns: repeat(3, 40px);
        gap: 5px;
        width: auto !important;
        background-color: #ffffff !important;
        padding-right: 10px;
    }
    .pattern-item {
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        cursor: pointer;
        transition: transform 0.2s;
    }
    
    .pattern-item:hover {
        transform: scale(1.1);
    }
    
    .inputgroup:hover #dropdown-pattern {
        display: grid;
        z-index: 999999;
        top: 21 px;
        margin-left: -127px;
        background-color: #ffffff !important;
        width: auto !important;
        height: 210px;
        overflow-y: auto;
    }
    
    .inputgroup:hover #dropdown-container {
        background-color: #ffffff !important;
    }
    #dropdown-pattern{
        padding: 0 !important;
    }

/* For shapes */
.inputgroup .list_shapes {
    position: relative;
    display: inline-block;
}
.inputgroup .list_shapes-content {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    max-height: 500px;
    overflow-y: auto;
}
.shape-list-box {
    width: 40px !important;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
}
.inputgroup:hover .list_shapes-content {
    display: grid;
    z-index: 999999;
    top: 21 px;
    margin-left: -127px;
    background-color: #ffffff !important;
    width: auto !important;
    height: 210px;
    overflow-y: auto;
}

/* For Box-Shadow */
#boxshadowDropdown {
    position: relative;
    display: inline-block;
}
#dropdownBoxShadow {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}
.inputgroup .shadow-list-box {
    width: 50px !important;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255) !important;
}
.inputgroup:hover #dropdownBoxShadow {
    display: grid;
    z-index: 999999;
    top: 21 px;
    margin-left: -127px;
    background-color: #ffffff !important;
    width: auto !important;
    height: 210px;
    overflow-y: auto;
}

/* For Text-Shadow */
#textshadowDropdown {
    position: relative;
    display: inline-block;
}
#dropdownTextShadow {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}
.inputgroup .shadow-list-text {
    width: 50px !important;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid grey;
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    font-family: "Times New Roman", Times, serif;
}
.inputgroup:hover #dropdownTextShadow {
    display: grid;
    z-index: 999999;
    top: 21 px;
    margin-left: -127px;
    background-color: #ffffff !important;
    width: auto !important;
    height: 210px;
    overflow-y: auto;
}

.shadow-list-text:hover {
    border: 1px solid #007FD4;
}

/* For Animations */
#animationDropdown {
    position: relative;
    display: inline-block;
}
#dropdownAnimation {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}
.inputgroup .animation-list-text {
    width: 50px !important;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255) !important;
    border: 1px solid grey;
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    font-family: "Times New Roman", Times, serif;
}
.inputgroup:hover #dropdownAnimation {
    display: grid;
    z-index: 999999;
    top: 21 px;
    margin-left: -127px;
    background-color: #ffffff !important;
    width: auto !important;
    height: 210px;
    overflow-y: auto;
}

.animation-list-text:hover {
    border: 1px solid #007FD4;
}



/* For Gradients */
.gradient-control {
    position: relative;
    width: 97%;
    height: 16px;
    background: #f0f0f0;
    border: 1px solid var(--linecolor1);
    border-radius: 3px;
    cursor: pointer;
 }

 #btnUnsetGradient{
    background-color: #131720;
 }

.color-stoper {
    position: absolute;
    top: -3px;
    cursor: pointer;
    width: 8px;
    height: 20px;
    background: black;
    border: 1px solid var(--color1);
    box-shadow: 0px 0px 3px var(--linecolor1);
    cursor: pointer;
    border-radius: 4px;
 }
 
 .color-stoper input[type="color"] {
    display: none;
 }

#clrPicker{
    width: -webkit-fill-available;
    cursor: pointer;
 }