.ays-survey-thank-you-summary-submission-main-container, .ays-survey-submission-summary-question-content{ margin:0!important; } .ays-survey-submission-summary-container .ays-survey-submission-summary-question-container{ border:0!important; } .ays-survey-submission-summary-question-container .ays-survey-submission-summary-question-container-header, .ays-survey-submission-summary-question-header .ays-survey-submission-summary-question-header-content-title{ font-size: inherit!important; } .ays-survey-submission-summary-question-header .ays-survey-submission-summary-question-header-content-title{ font-weight: bold!important; padding-top: 1rem!important; margin-top: 1rem!important; border-top: 1px solid #ccc; } /* linear */ .progress-table{ width: 100%; } .legend-table{ text-align: left; line-height: 1; } .legend-table td, .progress-table td, .progress-table th{ border:0!important; } .progress-table-row{ --color:#ccc; background-image: linear-gradient(to right, var(--color) 0%, var(--color) var(--progress, 0%), transparent var(--progress, 0%), transparent 100%); white-space: nowrap; display:flex; width: 100%; line-height: 1.667; } .progress-table-label{ text-overflow: ellipsis; max-width: 100%; overflow: hidden; padding-left: 0.5em; } .progress-table-value{ margin-right: auto; } .progress-table-votes{ color: #999; } /* radial */ #info_tip{ display: none; position: absolute; z-index:2; transform: translate(10px, calc(-100% - 30px)); pointer-events: none; background: #333; color: #fff; padding: 5px; border-radius: 5px; font-family: sans-serif; font-size: 1rem; transition: left .2s ease, top .2s ease; } .radial-chart{ display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; } .radial-chart svg{ width: 100%; height: 100%; max-width: 300px; max-height: 300px; aspect-ratio: 1/1; pointer-events: fill; } .piece{ pointer-events: fill; position: absolute; width: 200px; height: 200px; } .label-text{ font-size: .15px; fill: #fff; font-family: sans-serif; pointer-events: none; } .legend-item-color{ width: 1.8rem; } @media(min-width: 921px){ .radial-chart{ flex-direction: row; } .chart_div svg, .chart_div .legend-table{ display: inline-block; } .chart_div svg{ width: calc(100% - 10rem); max-width: 250px; } #info_tip{ font-size: 1.5rem; transition: none; } }