﻿/* feedback section */
.container-Feedback-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-bottom: 20px;
    border-top: 1px solid #D5E4DB;
    border-bottom: 1px solid #D5E4DB;
    color: #000;
    background-color: #fff !important;
    border-radius: 5px;
}

.feedback-qu-pe {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-comments-container {
    display: flex;
    justify-content: center;
    flex: 0 0 45%;
}

.feedback-question {
    flex: 0 0 50%;
    text-align: center;
}

.feedback-percentage {
    flex: 0 0 50%;
    text-align: center;
    display: flex;
}

.feedback-question .btn {
    outline: none;
}

#feedback_accknowledge {
    flex: 0 0 50%;
    text-align: center;
}

#feedback_accknowledge1 {
    flex: 0 0 50%;
    text-align: center;
}

@media (max-width:768px) {
    .feedback-qu-pe {
        display: block;
    }

    .feedback-comments-container {
        flex: 0 0 100%;
    }

    .feedback-question {
        flex: 0 0 100%;
    }

    .feedback-percentage {
        flex: 0 0 100%;
    }

    .feedback-accknowledge-show {
        display: block;
    }
}

#Feedback_main .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

#Feedback_main .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#Feedback_main .btn {
    min-width: auto !important;
}

#Feedback_main .text-left {
    text-align: right !important;
}

#Feedback_main .custom-control-inline {
    margin-top: 4px;
}

#Feedback_main .custom-control-inline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 1rem;
}

#Feedback_main .custom-control-label {
    margin-bottom: 0;
}

#Feedback_main .custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-right: 1.5rem;
}

#Feedback_main .custom-control-label::before {
    position: absolute;
    top: .25rem;
    right: -25px !important;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #efeeee;
}

#Feedback_main .custom-control-label::after {
    position: absolute;
    top: .25rem;
    right: -25px;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#Feedback_main .btn:not([disabled]):not(.disabled):active, #Feedback_main .btn:not([disabled]):not(.disabled).active {
    box-shadow: 0 5px 11px 0 rgb(0 0 0 / 18%), 0 4px 15px 0 rgb(0 0 0 / 15%);
}

#Feedback_main .btn:not(:disabled):not(.disabled).active, #Feedback_main .btn:not(:disabled):not(.disabled):active {
    background-image: none;
}

#Feedback_main .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

#Feedback_main .btn-grd {
    background: #2fab99 none repeat scroll 0 0;
    font-size: 16px !important;
    padding: 3px 14px;
}

    #Feedback_main .btn-grd:hover {
        --x: -100%;
    }

    #Feedback_main .btn-grd:hover, #Feedback_main .btn-grd.active {
        background-color: #009688;
        background-image: none; 
        background-repeat: no-repeat;
        color: #fff;
    }
/* feedback section ends */
.feedback-question button#feedback_yes {
    background: #2fab99;
    color: #fff;
    padding: 3px 12px !important;
    font-weight: normal !important;
    min-width: 60px !important
}

.feedback-question button#feedback_no, button#feedback_yes_cancel, button#feedback_no_cancel {
    color: #fff !important;
    background-color: #615768;
    padding: 3px 12px !important;
    font-weight: normal !important;
    min-width: 60px !important;
}

span#feedbackPercentage, span#feedbackCount {
    color: #31ab99;
}

div#feedback_counter {
    border: 1px #d8d8d8 solid;
    border-radius: 6px;
    padding: 4px 22px !important;
    background: #efeeee;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2fab99 !important;
}
