.ratingstar {
            float: left;
            height: 46px;
            /*padding: 0 10px;*/
            margin-bottom: 20px;
        }
        .ratingstar:not(:checked) > input {
            display: none;
            position:absolute;
            top:-999px;
        }
        .ratingstar:not(:checked) > label {
            float:right;
            width:1em;
            overflow:hidden;
            white-space:nowrap;
            cursor:pointer;
            font-size:30px;
            color:#ccc;
        }
        .ratingstar:not(:checked) > label:before {
            content: '★ ';
        }
        .ratingstar > input:checked ~ label {
            color: #ff5e00;    
        }
        .ratingstar:not(:checked) > label:hover,
        .ratingstar:not(:checked) > label:hover ~ label {
            color: #ff8c00;  
        }
        .ratingstar > input:checked + label:hover,
        .ratingstar > input:checked + label:hover ~ label,
        .ratingstar > input:checked ~ label:hover,
        .ratingstar > input:checked ~ label:hover ~ label,
        .ratingstar > label:hover ~ input:checked ~ label {
            color: #ff8c00;
        }

        hr.dashed {
            border-top: 1px dashed #999;
        }

        hr.dotted {
            border-top: 1px dotted #999;
        }

        hr.solid {
            border-top: 1px solid #999;
        }


        hr.hr-text {
        position: relative;
            border: none;
            height: 1px;
            background: #999;
        }

        hr.hr-text::before {
            content: attr(data-content);
            display: inline-block;
            background: #fff;
            font-weight: bold;
            font-size: 0.85rem;
            color: #999;
            border-radius: 30rem;
            padding: 0.2rem 2rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .col-container {
            display: flex; 
        }

        .col-height {
            height: 100%;
        }
        .popover-header {
            text-align: center !important;
        }
        .popover-body {
            text-align: center !important;
        }
        .popover {
            max-width: 100px !important;
        }