.app-main {
    font-family: "Montserrat", sans-serif !important;
    background:#f5f3f3;
}
.config-cls span {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top: 6%;
}
.config-cls p {
    font-size: 14px;
}
.heading-cls {
    font-weight: bold;
}
.config-cls {
    padding: 2%;
    border-radius:5px;
    cursor:pointer;
}
.config-cls:hover {
    background-color:#f0f1f2;
}
.config-cls a {
    color: var(--bs-body-color);
    text-decoration: none;
    padding: 26%;
    background: white;
    display: block;
    text-align: center;
    border: 1px solid var(--crdbrdrclr);
    border-radius:5px;
}
.config-cls i {
    font-size: 28px;
}
.leftsidemenu {
    height: 67vh;
    overflow-y: auto;
}
.leftsidemenu li {
    padding: 4%;
    background: white;
    list-style: none;
    margin-bottom: 3%;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.01);
    cursor:pointer;
}
.leftsidemenu li i {
    margin-right:5%;
    color: cornflowerblue;
}
.leftsidemenu li:hover {
    color:crimson;
    border:1px solid crimson;
}
.centermenu .card {
    height: 67vh;
    overflow-y: auto;
}
.rightsidemenu .card {
    height: 67vh;
    overflow-y: auto;
    position: relative;
}
.leftsidemenu::-webkit-scrollbar, .centermenu .card::-webkit-scrollbar, .rightsidemenu .card::-webkit-scrollbar {
    width: 8px; 
    height: 8px; 
}
.leftsidemenu::-webkit-scrollbar-thumb, .centermenu .card::-webkit-scrollbar-thumb, .rightsidemenu .card::-webkit-scrollbar-thumb {
    background-color: #cfcdcd; 
    border-radius: 5px; 
}
.leftsidemenu::-webkit-scrollbar-thumb:hover, .centermenu .card::-webkit-scrollbar-thumb:hover, .rightsidemenu .card::-webkit-scrollbar-thumb:hover {
    background-color: #a5a4a4; 
}
.leftsidemenu::-webkit-scrollbar-track, .centermenu .card::-webkit-scrollbar-track, .rightsidemenu .card::-webkit-scrollbar-track {
    background-color: #edebeb; 
    border-radius: 5px; 
}
.leftsidemenu::-webkit-scrollbar-corner, .centermenu .card::-webkit-scrollbar-corner, .rightsidemenu .card::-webkit-scrollbar-corner {
    background-color: #edebeb; 
}
#tabLeftUl {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 10px; /* reduce gap for small screens */
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    flex-wrap: nowrap; /* prevent wrapping */
    flex-shrink: 1; /* allow shrinking */
}
#tabLeftUl li {
    flex-direction: column;
    min-inline-size: 150px;
    margin-block-end:0;
    position: relative;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    gap: 5px;
    -webkit-margin-after: 35px;
    margin-block-end: 35px;
    -webkit-padding-after: 5px;
    padding-block-end: 5px;
    line-height: 1.3;
}
#tabLeftUl li b {
    background-color: white;
    color: black;
    --step-circle-size: 40px;
    inline-size: var(--step-circle-size);
    cursor: pointer;
    block-size: var(--step-circle-size);
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    line-height: var(--step-circle-size);
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    border-radius: 100%;
    box-shadow: 0px 2px 4px #0000001a;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
    -webkit-flex: 0 0 var(--step-circle-size);
    -moz-box-flex: 0;
    flex: 0 0 var(--step-circle-size);
}
#tabLeftUl li b.active {
    background-color: #0088ff;
    color: white;
}
#tabLeftUl li a {
    color: var(--txt2clr);
    position: relative;
}
#tabLeftUl li::after {
    content: '';
    inline-size: 1px;
    block-size: 60px;
    background: var(--frmbrdrclr);
    position: absolute;
    inset-inline-start: 15px;
    inset-block-start: 20px;
}
.circle-action::before {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inline-size: 100%;
    block-size: 60px;
    background: var(--mdlbg, var(--thmbg2));
}
.main-heading {
    float:left;
    font-size:20px;
}
.bi-x-square {
    float: right;
    font-size: 20px;
    color: red;
    font-weight: 900;
}
.mb-7 {
    margin-bottom:5%;
}
.leftsidemenu h5 {
    font-size: 18px;
    color: blueviolet;
}
.requiredclass {
    color:red;
}
.input-field {
    position:relative;
    margin: 0 0;
}
.input-field.row {
    margin: 0 0;
}
.input-field:hover {
    background:rgba(0,136,255,0.08);
}
.input-field:hover::before {
    content:'::';
    position:absolute;
    inset-block-start:-1px;
    inset-block-end:-1px;
    inset-inline-start:0;
    background:rgba(0,136,255,0.12);
    border-start-start-radius:var(--bdrrd4);
    border-end-start-radius:var(--bdrrd4);
    color:#08f;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-left:3px;
    padding-right:3px;
    /*margin:auto;
    height:auto;*/
}
.input-field.active-label {
    background:rgba(199, 245, 189, 0.3);
}
.input-field.active-label::before {
    content:'::';
    position:absolute;
    inset-block-start:-1px;
    inset-block-end:-1px;
    inset-inline-start:0;
    background:rgba(199, 245, 189, 0.7);
    border-start-start-radius:var(--bdrrd4);
    border-end-start-radius:var(--bdrrd4);
    color:rgb(37, 211, 34);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-left:3px;
    padding-right:3px;
}
.col-form-label {
    font-size: 14px;
    font-weight: 550;
    color: rgb(54, 54, 54);
}
.tab-form-label {
    font-size: 16px;
    background-color: rgb(232, 232, 232);
    padding: 0.5rem 0.75rem;
    margin: 0.75rem;
    width: 92.5%;
    border-radius: 7px;
}
.tab-form-optionlabel {
    cursor: pointer;
    font-size: 16px;
    padding: 0.5rem;
    color: gray;
    width: 75%;
}
.tab-form-optionlabel img {
    margin-left: 1rem;
    width: 2rem;
    height: auto;
}
.zpl_tabgrp.tab-pane {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    padding: 5px;
    background: var(--thmbg);
    block-size: auto;
}
.zpl_tabgrp > div {
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    inline-size: 100%;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 0 0 1px lightgray;
}
.zpl_tabgrp > div > a.zpl_sel {
    background-color: var(--thmbg1);
}
.zpl_tabgrp > div > a {
    color: var(--txt2clr);
    margin: 0px;
    padding: 8px;
    border-radius: 4px;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    text-decoration:none;
    flex-grow: 1;
    cursor:pointer;
}
.zpl_tabgrp > div > a.zpl_sel {
    background-color:#e5e5f0;
}
.card-header {
    padding:2px;
}

.leftsidemenu h5 {
    margin-top: 0;
    margin-bottom: 0;
}
.leftsidemenu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0.5rem 0 2rem 0;
}

.leftsidemenu ul li {
    font-family: "Montserrat", sans-serif;
    list-style: none;
    text-align: center;
    border-radius: 6px;
    padding: 6px 4px 8px 4px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    font-weight: 600;
    margin: 0;
}

.leftsidemenu ul li i {
    margin-bottom: 4px;
    color: cornflowerblue;
    opacity: 0.7;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.rightsidemenu {
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100vh !important;
    background: #fff;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 1050;
    overflow-y: auto;
}
.rightsidemenu .card {
    margin-top: 2rem;
    height: 92vh;
}
.rightsidemenu.active {
    right: 0;
}
.rightsidemenu .close-menu {
    display: block;
    text-align: right;
}
.rightsidemenu .close-menu i {
    font-size: 22px;
    color: crimson;
    cursor: pointer;
}
#tabLeftUl li b {
    font-size: 14px;
}
#tabLeftUl li a {
    font-size: 14px; 
    font-weight: 550;
}

#menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1049;
}
#menu-backdrop.active {
    display: block;
}

@media (min-width: 1321px) {
    .leftsidemenu ul li {
        width: calc(33.33% - 0.5rem); 
        font-size: 10px; 
    }
    .leftsidemenu ul li i {
        font-size: 18px; 
    }
    .col-md-2.leftsidemenu {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .col-md-7.centermenu {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .rightsidemenu {
        width: 30%;
    }
}
@media (max-width: 1320px) {
    .leftsidemenu ul li {
        width: calc(50% - 0.5rem); 
        font-size: 10px; 
    }
    .leftsidemenu ul li i {
        font-size: 20px; 
    }
    .col-md-2.leftsidemenu {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .col-md-7.centermenu {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .rightsidemenu {
        width: 40%;
    }
}
@media (max-width: 1200px) {
    .col-md-2.leftsidemenu {
        flex: 0 0 30%; 
        max-width: 30%;
    }
    .col-md-7.centermenu {
        flex: 0 0 70%; 
        max-width: 70%;
        transition: all 0.3s ease;
    }
}
@media (max-width: 768px) { 
    #tabLeftUl {
        top: 75%; 
        font-family: "Montserrat", sans-serif;
    }
    #tabLeftUl li {
        gap: 3px; 
        margin-block-end: 15px; 
        min-inline-size: 100px; 
    }
    #tabLeftUl li b {
        --step-circle-size: 30px; 
        font-size: 14px;
        inline-size: var(--step-circle-size);
        block-size: var(--step-circle-size);
        line-height: var(--step-circle-size);
    }
    #tabLeftUl li a {
        font-size: 14px; 
        font-weight: 550;
    }
    #tabLeftUl li::after {
        block-size: 40px; /* adjust vertical line size if needed */
        inset-block-start: 15px;
    }

    .leftsidemenu {
        order: 1;
        height: 23vh !important;
        max-height: 23vh !important;
        margin-bottom: 1rem !important;
    }
    .leftsidemenu ul li {
        width: calc(20% - 0.5rem); 
        font-size: 10px; 
    }
    .leftsidemenu ul li i {
        font-size: 18px; 
    }

    .leftsidemenu h5 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .centermenu {
        order: 2;
        height: auto !important;
    }
    .centermenu .card {
        overflow-y: auto;
        height: 48vh;
    }

    .col-md-2.leftsidemenu,
    .col-md-7.centermenu {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .rightsidemenu {
        width: 70%;
    }

    .leftsidemenu::-webkit-scrollbar {
        width: 16px; 
        height: 16px; 
    }
    .centermenu .card::-webkit-scrollbar {
        width: 16px; 
        height: 10px; 
    }
}
@media (max-width: 535px) { 
    #tabLeftUl {
        top: 90%; 
        font-family: "Montserrat", sans-serif;
    }
    #tabLeftUl li {
        gap: 3px; 
        margin-block-end: 15px; 
        min-inline-size: 100px; 
    }
    #tabLeftUl li b {
        --step-circle-size: 30px; 
        font-size: 12px;
        inline-size: var(--step-circle-size);
        block-size: var(--step-circle-size);
        line-height: var(--step-circle-size);
    }
    #tabLeftUl li a {
        font-size: 12px; 
        font-weight: 550;
    }

    .leftsidemenu ul li {
        width: calc(25% - 0.5rem); 
        font-size: 10px; 
    }
    .leftsidemenu ul li i {
        font-size: 18px; 
    }
    .rightsidemenu {
        width: 90%;
    }
}

.dropped-clone {
    width: 100%;
    height: fit-content;
}
.hidden-draggable {
    display: none;
}
.image-option img {
    width: 10rem;
    height: auto;
}

.form-divisions .form-check-label, .form-divisions .form-control {
    font-size: 0.8rem;
}

.each-rank {
    margin-top: 0.5rem;
    cursor: pointer;
}
.ratings {
    padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
} 
.ratings .rating-item {
    display: inline-block;
    width: 19%;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 500;
}
.ratings .rating-item i {
    font-size: 1.25rem;
}
.score {
    width: 90%;
    padding: 0;
    margin: 2rem auto 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
} 
.score .score-item {
    display: inline-block;
    width: 9%;
    margin: 0;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: rgb(239, 243, 249);
    border-color: gainsboro;
    color: gray;
} 
.score .score-item:hover { 
    background-color: rgba(28, 80, 135, 0.5);
    color: white;
} 
.score-text {
    padding: 0;
    margin: 0 auto;
    width: 88%;
} 
.score-text-left, .score-text-right {
    display: inline-block;
    background-color: transparent;
    color: rgb(132, 168, 239);
    width: 45%;
    text-wrap: wrap;
    border: none;
    outline: none;
}
.score-text-right {
    float: right;
    text-align: right;
}
.linear-scale {
    width: 40%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
} 
.linear-scale .linear-item {
    display: inline-block;
    width: 19%;
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.linear-options-get {
    position: relative;
}
.linear-text-left, .linear-text-right {
    position: absolute;
    top: 50%;
    width: fit-content;
    color: rgb(132, 168, 239);
    background-color: transparent;
    border: none;
    outline: none;
}
.linear-text-left {
    left: 2rem;
}
.linear-text-right {
    right: 2rem;
    text-align: right;
}
.linear-radio {
    border: 1px solid rgb(132, 168, 239);
    transform: scale(1.2);
}
.choice-grid-table {
    margin: 0 auto;
}
.choice-grid-table th, .choice-grid-table td {
    padding: 1rem 2rem;
    font-size: 0.9rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.centerCell {
    text-align: center;
}
.centerCell input[type="radio"], .centerCell input[type="checkbox"] {
    transform: scale(1.4);
}
.choice-grid-table .grid-row-label {
    color: gray;
    font-size: 0.9rem;
    font-weight: 450;
}
.choice-grid-table th {
    color: rgb(152, 181, 240);
}
.grid-radio, .grid-checkbox {
    border: 1px solid rgb(132, 168, 239);
    transform: scale(1.4);
}


.signature-container {
    position: relative;
}
.signaturebox {
    border: 2px solid transparent;
    height: 15rem;
    border-radius: 7px;
    margin-top: 0.5rem;
    display: inline-block;
    color: black;
    border-color: #f0f0f0;
    box-shadow: 0px 0px 3px 0px #f0f0f0 inset;
    width: 100%;
} 
.signaturebox .signature-pad {
    background-color: white;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    cursor: crosshair;
}
.signaturebox .saved-signature {
    width: 100%;
    height: 100%;
}


.field-properties {
    display: none;
}
.tab-optionsDiv .form-control {
    display: inline-block;
    width: 75%;
}
.option-row {
    padding: 0;
    margin: 0.5rem 0;
}
.option-row .bi-plus {
    cursor: pointer;
    color: green; 
    border: 1px solid green; 
    border-radius: 50px; 
    padding: 0 0.15rem;
    margin-left: 0.5rem;
}
.option-row .bi-dash {
    cursor: pointer;
    color: red; 
    border: 1px solid red; 
    border-radius: 50px; 
    padding: 0 0.15rem;
    margin-left: 0.5rem;
}


.alloptions-container {
    display: none;
}


.custom-btn {
    float: right; 
    margin: 1rem; 
    margin-left: auto; 
    font-size: 0.9rem; 
    display: inline-block;
    width: fit-content;
    font-weight: 550;
    border-radius: 3px;
}
.add-section {
    background-color: rgb(168, 228, 206); 
    box-shadow: 3px 2px 5px 0px rgb(169, 169, 169);
}
.add-section:hover {
    background-color: rgb(66, 166, 129); 
    color: white;
    box-shadow: 3px 2px 5px 0px rgb(131, 131, 131);
}
.saveBtn {
    background-color: rgb(204, 217, 241); 
    box-shadow: 3px 2px 5px 0px rgb(169, 169, 169);
}
.saveBtn:hover {
    background-color: rgb(91, 118, 166); 
    color: white;
    box-shadow: 3px 2px 5px 0px rgb(131, 131, 131);
}
.section-divisions {
    margin: 1rem auto 0.5rem auto;
    position: relative;
    width: 100%;
}
.section-divisions .section-title {
    font-weight: 600; 
    font-size: 1.25rem; 
    border: none; 
    outline: none; 
    width: 100%;
}
.section-divisions .section-desc {
    color: gray; 
    font-size: 1rem; 
    border: none; 
    outline: none; 
    width: 100%;
}

.question-image-container {
    display: none;
    width: 100%;
    height: 10rem;
    margin: 0.5rem 0;
}
.question-image-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.slider-value {
    padding: 0.15rem 0.35rem;
    border-radius: 5px;
    text-align: center;
    background-color: cornflowerblue;
    color: white;
}


.files-uploaded-display .bi-file-earmark {
    font-size: 1.2rem;
    color: orangered;
}
.files-uploaded-display .bi-file-earmark-image {
    font-size: 1.2rem;
    color: darkcyan;
}
.files-uploaded-display .bi-file-earmark-play {
    font-size: 1.2rem;
    color: rgb(205, 205, 64);
}
.files-uploaded-display .bi-file-earmark-pdf {
    font-size: 1.2rem;
    color: red;
}
.files-uploaded-display .bi-file-earmark-excel {
    font-size: 1.2rem;
    color: green;
}
.files-uploaded-display .bi-file-earmark-word {
    font-size: 1.2rem;
    color: cornflowerblue;
}
.files-uploaded-display .bi-file-earmark-slides {
    font-size: 1.2rem;
    color: orange;
}
.files-uploaded-display {
    color: gray;
    padding: 0.1rem; 
    font-size: 0.75rem; 
    font-weight: 450;
    position: relative;
}
.files-uploaded-display a {
    text-decoration: none; 
    font-weight: 400;
}
.files-uploaded-display .del-file {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.25rem;
}
.files-uploaded-display a {
    color: gray;
}
.files-uploaded-display a:hover {
    color: black;
}
.files-uploaded-display .del-file:hover {
    color: red;
}


/* #droppable {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
} */

.form-divisions {
    position: relative;
    display: inline-block;
}
.form-divisions.one-column {
    width: 100%;
}
.form-divisions.two-column {
    width: 49.5%;
}
.form-divisions.three-column {
    width: 32.9%;
}

@media (max-width: 768px) {
    .form-divisions.one-column {
        width: 100%;
    }
    .form-divisions.two-column {
        width: 100%;
    }
    .form-divisions.three-column {
        width: 100%;
    }
}
.form-columns {
    position: relative;
}
.icons-holder {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    background-color: rgb(239, 242, 211);
    box-shadow: 0px 0px 5px 0px gainsboro;
    padding: 0.1rem 0.35rem;
    border: 1px solid gainsboro;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
    font-size: 1rem;
    display: none;
}
.form-divisions .icons-holder, .section-divisions .icons-holder {
    top: 0.5rem;
    right: 0.5rem;
}
.form-columns .icons-holder {
    top: -0.5rem;
    right: -0.5rem;
}
.icons-holder i {
    color: gray;
}
.icons-holder:hover {
    box-shadow: 0px 0px 8px 0px gainsboro;
    font-size: 1.25rem;
}
.form-divisions:hover .icons-holder, .section-divisions:hover .icons-holder  {
    display: block;
}
@media (max-width: 768px) {
    .icons-holder {
        display: block !important;
    }
}

.centermenu .card-body {
    padding: 1rem 2rem;
}
.droppable-column {
    border: 1px dotted gray; 
    min-height: 200px;
    max-height: auto;
}

.req-error {
    font-size: 0.8rem; 
    font-weight: 450; 
    margin: 0 0.5rem;
    color: orangered;
    display: none;
}
.req-error i {
    font-size: 1rem;
}
.note {
    color: gray;
    font-size: 0.9rem;
    font-style: italic;
    padding: 0.5rem 1rem;
}

.division-preview-container {
    width: fit-content;
    max-width: 100%;
    height: fit-content;
    max-height: 20rem;
    overflow: auto;
    margin-top: 1rem;
}
.division-preview-container .divisionImagePreview {
    width: fit-content;
    max-width: 100%;
    display: none;
}
.division-preview-container iframe {
    display: none;
}