/* assets/css/builder.css */

 /* --- Survey Form Builder Layout --- */
 #survey-form-builder {
     display: flex;
     justify-content: space-between;
     margin: 20px 0px;
 }

 /* --- Available Fields Styling --- */
 #available-fields {
     width: 30%;
     border: 1px solid #ddd;
     padding: 10px;
     background: #f9f9f9;
 }

 #available-fields h2 {
     margin-bottom: 10px;
 }

 .w-100 {
     width: 100%;
 }

 #save-form {
     color: #fff;
 }

 /* --- Form Fields Area --- */
 .software_pack input{
     margin:15px 0px;
 }
 #form-fields {
     width: 70%;
     min-height: 300px;
     border: 1px dashed #ccc;
     padding: 20px;
     background: #fff;
 }

 #sortable-fields {
     list-style-type: none;
     padding: 15px;
     border: 2px solid #f0f0f0;
     min-height: 184px;
     border-radius: 8px;
     padding-top: 20px;
     padding-bottom: 5px;
     background: #e6e6e6;
 }

 /* --- Typography --- */
 /* h2 {
     font-size: 1.5rem;
     margin-bottom: 10px;
 } */

 /* --- Draggable Items Styling --- */
 .draggable_list {
     padding: 8px;
     margin-bottom: 10px;
     background-color: #f0f0f0;
     cursor: grab;
     border-radius: 5px;
     font-size: 14px;
 }

 .draggable_list:active {
     cursor: grabbing;
 }

 .sortable-item {
     padding: 10px;
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     margin-bottom: 20px;
     border-radius: 4px;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .remove-field {
     color: red;
     cursor: pointer;
     font-size: 12px;
 }

 .error-highlight {
    border: 2px solid red !important;
    border-radius: 4px !important;
}

 /* --- Form Input Styling --- */
 .form_division input,
 .form_division textarea {
     width: 100%;
     padding: 8px;
     margin-top: 5px;
     font-size: 14px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
 .form-check-input {
    margin-top: 5px!important;
 }
 /* Apply styles to the entire question li */

  
  /* Style the list number (marker) when the li has .question-type class */
  .question .question-li.question-type::marker {
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    color: #000;
    line-height: 28px;
    margin: 0; /* Optional: Adjust margin for h5 */
  }
  
  /* Optional: additional h5 specific styles */
  .question .question-li.question-type h5, .question .question-li h5,.question .question-li::marker{
    font-size: 22px;
    font-weight: bold;
    font-style: italic;
    color: #000;
    line-height: 28px;
    margin: 0; /* Optional: Adjust margin for h5 */
  }
  
 /* --- Button Styling --- */
 button,
 .form_division input[type="submit"] {
     background-color: #4CAF50;
     color: white;
     border: none;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
     border-radius: 5px;
 }

 button:hover,
 .form_division input[type="submit"]:hover {
     background-color: #45a049;
 }

 /* General styling for form items */
 .sortable-item {
     display: flex;
     flex-direction: column;
     padding: 10px;
     border: 1px solid #ccc;
     margin-bottom: 20px;
     border-radius: 5px;
     background-color: #f9f9f9;
 }

 /* Styling for the label */
 .sortable-item span {
     font-weight: bold;
     margin-bottom: 5px;
 }

 /* Input and option container styling */
 .field-label,
 .option-input,
 .additional-input {
     margin-top: 5px;
     padding: 8px;
     width: 100%;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 14px;
 }

 /* Options container for select, radio, and checkbox fields */
 .options-container {
     margin-top: 10px;
     display: flex;
     flex-direction: column;
 }

 /* Styling for add/remove buttons */
 .add-option-btn,
 .remove-option {
     margin-top: 5px;
     padding: 5px 10px;
     font-size: 12px;
     cursor: pointer;
 }

 .add-option-btn {
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 3px;
 }

 .remove-option {
     background-color: #ff4c4c;
     color: white;
     border: none;
     border-radius: 3px;
 }

 .remove-field {
     color: red;
     cursor: pointer;
     font-size: 12px;
     margin-top: 10px;
 }

 .sortable-item {
     list-style: none;
     margin-bottom: 20px;
     padding: 10px;
     border: 1px solid #ccc;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .field-label {
     padding: 5px;
     font-size: 1rem;
 }

 .options-container {
     margin-top: 10px;
     padding-left: 10px;
 }

 .add-option-btn,
 .remove-option,
 .remove-field {
     background-color: transparent;
     border: none;
     color: #007bff;
     cursor: pointer;
 }

 .add-option-btn:hover,
 .remove-option:hover,
 .remove-field:hover {
     text-decoration: underline;
 }

 body {
     background-color: #f8f9fa;
     font-family: Arial, sans-serif;
 }

 .survey-container {
     margin: 0px auto;
     padding-top: 0;
     padding: 20px;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgb(0 0 0 / 0%);
     width: 100%;
     max-width: 95%;
     padding-top: 0;
     margin-bottom: 30px;
 }

 .survey-title {
     text-align: center;
     margin-bottom: 20px;
 }

 .question {
     margin-bottom: 20px;
     list-style-type: decimal;
     padding: 0;
 }
.question-li{
    margin: 15px 0;
}


 .question .form-check-input {
     /* margin: 10px 0; */
     padding: 10px;
     height: 18px;
     width: 18px;
     cursor: pointer;
 }

 .comments-box {
     margin-top: 10px;
 }

 .rating-scale {
     margin-top: 10px;
 }

 .input_text {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: 100px; /* Set the height to 100px */
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    resize: none; /* Optional: Disable resizing of the textarea */
    overflow-y: auto; /* Optional: Add vertical scrolling if text overflows */
}

.input_text::placeholder {
    /* Ensure placeholder stays at the top */
    text-align: left;
    vertical-align: top;
}

 .form_division{
    margin: 10px 0 !important;
    padding-left: 3rem !important;
 }

 .submit-btn {
     color: #143e00;
     border-color: #72BD4F;
     background-color: #72BD4F;
     padding: 15px 35px 15px;
     border-radius: 5px 5px 50px 5px;
     font-size: 22px;
     line-height: 26px;
     display: inline-block;
     text-decoration: none;
     font-family: 'TT-Commons-Regular';
     width: auto;
     cursor: pointer;
 }

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

 .radio-main-container, .check-main-container, .range-main-container, .number-main-container {
     width: 100%;
 }

 .radio-main-container div, .radio-main-container div , .range-main-container div, .number-main-container div{
     margin: 5px 0;
 }


 /* Hide the default checkbox */
 .my_checkbox {
     display: none;
 }

 /* Style the label to look like a checkbox */
 .custom-checkbox {
     display: inline-block;
     position: relative;
     cursor: pointer;
     width: 25px;
     height: 25px;
 }

 .custom-checkbox span {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 1px solid #3582c4;
     background-color: #fff;
     border-radius: 3px;
 }

 /* Display custom checkmark when checked */
 .my_checkbox:checked+span::before {
     content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%233582c4%27%2F%3E%3C%2Fsvg%3E");
     position: absolute;
     top: 2px;
     left: 2px;
     width: 20px;
     height: 20px;
 }

 .form_division input[type=checkbox]:checked::before {
     display: none !important;
 }

 .radio-container {
     display: flex;
     align-items: center;
 }

 .zifo_sf_heading {
     font-family: 'TT-Commons-Bold';
     font-size: 23px;
     line-height: 36px;
     font-weight: bold;
     margin-bottom: 35px;
     color: #1B1E48 !important;
 }

 .required {
     color: red;
 }

 .form-check-label {
     margin: 0 10px;
     font-family: 'TT-Commons-Regular';
     font-size: 19px;
     font-weight: 500;
     cursor: pointer;
 }

 .align-items-center {
     display: flex;
     align-items: center;
 }

 #question1PieChart {
     width: 100%;
     /* Makes the chart responsive */
     height: 100px;
     /* Set the height */
 }

 .pos-relative {
     position: relative;
 }

 .remove_icon {
     width: 12px;
     position: absolute;
     top: -4px;
     right: -4px;
     cursor: pointer;
 }

 .add_icon {
     width: 30px;
 }

 .my_add_section {
     margin: 0;
     vertical-align: middle;
     display: inline-block;
     padding: 0;
     text-align: left;
     margin: 0 !important;
     padding: 0 !important;
     cursor: pointer;
 }

 .info-icon {
     display: inline-block;
     width: 20px;
     height: 20px;
     background-color: #007bff;
     /* Info blue color */
     color: white;
     border-radius: 50%;
     text-align: center;
     font-weight: bold;
     cursor: pointer;
     position: relative;
 }

 .info-icon:hover::after {
     content: "Additional information about this field.";
     position: absolute;
     left: 25px;
     top: -5px;
     background-color: #333;
     color: #fff;
     padding: 5px;
     border-radius: 5px;
     white-space: nowrap;
 }

 /* Tooltip container */
 .tooltip {
     position: relative;
     display: inline-block;
     border-bottom: 1px dotted black;
     /* If you want dots under the hoverable text */
 }

 /* Tooltip text */
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: #555;
     color: #fff;
     text-align: center;
     padding: 5px 0;
     border-radius: 6px;

     /* Position the tooltip text */
     position: absolute;
     z-index: 1;
     bottom: 125%;
     left: 50%;
     margin-left: -60px;

     /* Fade in tooltip */
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Tooltip arrow */
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #555 transparent transparent transparent;
 }

 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }

 .submit-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .tab { overflow: hidden; border-bottom: 1px solid #ccc; }
.tab button { background-color: #f1f1f1; border: none; outline: none; padding: 10px 20px; cursor: pointer; }
.tab button:hover { background-color: #ddd; }
.tab button.active { background-color: #ccc; }
.tabcontent { display: none; padding: 20px 0; border-top: none; }


.user-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.user-info-table th, 
.user-info-table td {
    padding: 10px;
    text-align: left;
}

.user-info-table th {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
}

.user-info-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.user-info-table tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Optional: Add a border to make it more structured */
.user-info-table th, 
.user-info-table td {
    border: 1px solid #ddd;
}
.copyUserInfo{
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
}
.copyUserInfo:hover{
    background: transparent;
}

/* Pagination container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Pagination links */
.pagination a {
    color: #0073aa;
    padding: 8px 12px;
    margin: 0 4px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for pagination links */
.pagination a:hover {
    background-color: #0073aa;
    color: #fff;
}

/* Active page styling */
.pagination a.current-page {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
    pointer-events: none; /* Disable click on active page */
    cursor: default;
}

/* Style for next/previous buttons */
.pagination a.next-prev {
    font-weight: bold;
}
.wp-list-table .no-border td {
    border-top: none;
}
.txt_captial{
    text-transform: capitalize;
}


/* form range style */

.form-range-slider{
    background: linear-gradient(to right, red, yellow, green);
    transition: background 0.3s;
    -webkit-appearance: none;
    padding: 0px;
    margin: 0px;
    height: 5px;
}

.form-range-label, .form-number-label{
    width: 25%;font-size: 19px;
}

.form-number-input{
    width: auto;
}
.margin-bottom-100 {
    margin-bottom: 60px!important;
}
.text-success {
    font-size: 41px!important;
    line-height: 50px!important;
    margin-bottom: 30px;
}
.text-success p{
    font-size: 20px!important;
    line-height: 24px!important;
}

.range_value{font-size: 20px;margin-left: 15px;}

/* Webkit Browsers (Chrome, Safari) */
input[type="range"]::-webkit-slider-thumb {
    width: 20px;  /* Increase width */
    height: 20px; /* Increase height */
    background: #72BD4F; /* Custom background color */
    border-radius: 50%; /* Rounded shape */
    cursor: pointer; /* Ensure it's clickable */
    -webkit-appearance: none; /* Remove default styles */
}

/* Firefox */
#survey_form input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #72BD4F;
    border-radius: 50%;
    cursor: pointer;
}

/* Internet Explorer */
#survey_form input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #72BD4F;
    border-radius: 50%;
    cursor: pointer;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;  /* Space between labels and the slider */
    padding: 10px 0px 0px;
}

/* Style for the 'Least' label */
.label-least {
    text-align: end;
    font-size: 19px;
    line-height: 25px;
    width: 21%;
    margin: 0 auto;
    font-family: 'TT-Commons-Bold';
    color: #1B1E48 !important;
}

/* Style for the 'Most' label */
.label-most {
    text-align: end;
    font-size: 19px;
    line-height: 25px;
    width: 74%;
    margin: 0 auto;
    font-family: 'TT-Commons-Bold';
    color: #1B1E48 !important;
}

/* Optional: style the range input */
.form-range-input {
    width: 100%;
    margin-top: 5px;
}

/* Style for the value display */
.range_value {
    display: block;
    margin-top: 5px;
    font-size: 21px;
    color: #333;
}
.btn {
    padding: 10px 20px!important;
    font-size: 18px!important;
    line-height: 25px!important;
}

#export_responses{
    margin-left: 20px;
}


@media only screen and (max-width:2000px) {
    .label-most {
        width: 70%;
    }
    .label-least {
        width: 21%;
    }
}
@media only screen and (max-width:1700px) {
    .label-least {
        width: 22%;
    }
}
@media only screen and (max-width:1400px) {
    .label-least {
        width: 23%;
    }
}
@media only screen and (max-width:1300px) {
    .label-least {width: 23%;}
    .label-most {width: 68%;}
}
@media only screen and (max-width:991px) {
    .text-success {font-size: 35px !important;line-height: 47px !important;}
}
@media only screen and (max-width:991px) {
    .form-range-label, .form-number-label {
        width: 30%;
    }
    .label-least {
        width: 26%;
    }
    .label-most {
        width: 60%;
    }
}
@media only screen and (max-width:767px) {
    .form-range-label, .form-number-label {
        width: 45%;
    }
    .software_pack .align-items-center,.range_value .align-items-center{
        flex-direction: column;
    }
    .form-range-label, .form-number-label {
        width: 100%;
    }
    .range_value input{margin:10px 0px;}
    .software_pack input {
        margin: 10px 0px;
    }
    .label-least {
        width: 37%;
        text-align: left;
    }
    .label-most {
        text-align: right;
    }
}
@media only screen and (max-width:576px) {
    .text-success {
        font-size: 25px !important;
        line-height: 35px !important;
        margin-bottom: 20px;
    }
    .zifo_sf_heading {    font-size: 18px;
        line-height: 30px;}
    .survey-container {max-width: 100%;}
    .form_division {
        padding-left: 1rem !important;
    }
   
}