.app-main {
    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%;
}
.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;
    flex-grow:1;
    list-style:none;
    margin-left: 32%;
    position: absolute;
    top: 29%;
}
#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: 10px;
    -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;
}
.p-2 {
    padding:2%;
}
.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.1rem auto;
}
.input-field:hover, .input-field.active-label {
    background:rgba(0,136,255,0.08);
}
.input-field:hover::before, .input-field.active-label::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;*/
}
.col-form-label {
    font-size: 0.9rem;
    font-weight: 550;
}
.tab-form-label {
    font-size: 12px !important;
    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: 1px;
    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: 2px;
    padding: 7px 10px;
    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;
}
.dropped-clone {
    width: 100%;
    height: fit-content;
}
.hidden-draggable {
    display: none;
}
.image-option img {
    width: 10rem;
    height: auto;
}
.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;
}
.add-section {
    background-color: rgb(124, 229, 190); 
    box-shadow: 1px 1px 5px 0px rgb(90, 90, 90);
}
.add-section:hover {
    background-color: rgb(172, 238, 214); 
    box-shadow: 1px 1px 5px 0px rgb(101, 101, 101);
}
.saveBtn {
    background-color: rgb(181, 202, 240); 
    box-shadow: 1px 1px 5px 0px rgb(90, 90, 90);
}
.saveBtn:hover {
    background-color: rgb(207, 220, 244); 
    box-shadow: 1px 1px 5px 0px rgb(101, 101, 101);
}
.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;
    /* width: 48%;
    display: inline-block; */
}
.icons-holder {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    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;
}
.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;
}

.centermenu .card-body {
    padding: 1rem 2rem;
}


.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;
}