@charset "utf-8";
/* Customize the label (the container) */

.container {
    display: flex;
    position: relative;
    padding-left: 1.75rem;
    /*! margin-right: 1rem; */
    cursor: pointer;
    font-size: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    align-items: center;
    /*! background: antiquewhite; */
    height: 1.25rem;
    /*! padding-top: 0.125rem; */
}

/* Hide the browser's default checkbox */

.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    top: 0;
    left: 0;
}

/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25rem;
    width: 1.25rem;
    /*! background-color: #eee; */
    border: solid 2px var(--grey_05);
    border-radius: var(--radius-small);
    transition: ease-in-out 0.3s;
    cursor: pointer;
}

.checkmark.radio {
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
    /*! background-color: #ccc; */
    background-color: var(--color_01);
}

/* When the checkbox is checked, add a blue background */

.container input:checked~.checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */

.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */

.container .checkmark:after {
    left: 4px;
    top: 0;
    width: 6px;
    height: 10px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container input:checked~.checkmark:after {
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid 2px white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container input:checked~.checkmark.radio:after {
    left: 0;
    top: 0;
    width: 8px;
    height: 8px;
    border: solid 4px white;
    /*! border-width: 0 2px 2px 0; */
    /*! -webkit-transform: rotate(45deg); */
    /*! -ms-transform: rotate(45deg); */
    /*! transform: rotate(45deg); */
    /*! background: var(--primary); */
}

.container .checkmark.radio:after {
    top: 3px;
    left: 3px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--color_04);
    border-width: 4px;
}

.custom_checkbox {
    /*! margin: 0.25rem; */
    /*! display: flex; */
    /*! align-items: center; */
    /*! background: #9b6525; */
    /*! height: 2rem; */
    /*! width: 1.5rem; */
    /*! margin-right: 1.75rem; */
    width: 100%;
}

input:disabled+.checkmark {
    /*! opacity: 0.5; */
    border-color: var(--grey_05);
}

input:disabled+.checkmark:hover {
    background: none;
    cursor: default;
}

.wrap_week input:disabled+.checkmark:hover {
    background: var(--primary);
    cursor: auto;
}

.wrap_check {
    padding: calc(0.75rem - 1px) calc(0.75rem - 1px);
    /*! background: aqua; */
    text-align: left;
}

/* icons indicator check lock*/

.custom_checkbox.lock {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.25rem;
}

.lock .checkmark {
    border: none;

}

.lock .checkmark .material-icons {
    color: var(--grey_04);
    /*! transition: ease-in-out 0.3s; */
}

.lock .container {
    height: 1.5rem;
    /*! background: antiquewhite; */
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock .container input:checked~.checkmark:after {
    content: 'lock_open';
    font-family: 'Material Icons';
    transform: none;
    font-size: 1.5rem;
    left: 0;
    border: none;
    color: var(--primary);
    height: 1.5rem;
    width: 1.5rem;
    /*! background: white; */
    display: flex;
    align-items: center;
}

.lock .container input:checked~.checkmark {
    background: none;
}

.lock .container input:checked~.checkmark .material-icons {
    opacity: 0;
}

/* icons indicator check star*/

.custom_checkbox.stars {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.25rem;
}

.stars .checkmark {
    border: none;

}

.stars .checkmark .material-icons {
    color: var(--grey_04);
    /*! transition: ease-in-out 0.3s; */
}

.stars .container {
    height: 1.5rem;

    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars .container input:checked~.checkmark:after {
    content: 'stars';
    font-family: 'Material Icons';
    transform: none;
    font-size: 1.5rem;
    left: 0;
    border: none;
    color: var(--primary);
    height: 1.5rem;
    width: 1.5rem;
    /*! background: white; */
    display: flex;
    align-items: center;
}

.stars .container input:checked~.checkmark {
    background: none;
}

/* icons indicator check groups*/

.custom_checkbox.groups {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.25rem;
}

.groups .checkmark {
    border: none;

}

.groups .checkmark .material-icons {
    color: var(--grey_04);
    /*! transition: ease-in-out 0.3s; */
}

.groups .container {
    height: 1.5rem;

    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.groups .container input:checked~.checkmark:after {
    content: 'groups';
    font-family: 'Material Icons';
    transform: none;
    font-size: 1.5rem;
    left: 0;
    border: none;
    color: var(--primary);
    height: 1.5rem;
    width: 1.5rem;
    /*! background: white; */
    display: flex;
    align-items: center;
}

.groups .container input:checked~.checkmark {
    background: none;
}

/* icons indicator check bar_chart*/

.custom_checkbox.bar_chart {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.25rem;
}

.bar_chart .checkmark {
    border: none;

}

.bar_chart .checkmark .material-icons {
    color: var(--grey_04);
    /*! transition: ease-in-out 0.3s; */
}

.bar_chart .container {
    height: 1.5rem;

    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bar_chart .container input:checked~.checkmark:after {
    content: 'bar_chart';
    font-family: 'Material Icons';
    transform: none;
    font-size: 1.5rem;
    left: 0;
    border: none;
    color: var(--primary);
    height: 1.5rem;
    width: 1.5rem;
    /*! background: white; */
    display: flex;
    align-items: center;
}

.bar_chart .container input:checked~.checkmark {
    background: none;
}

/* icons indicator check diff*/

.rating .wrap_check {
    /*! background: #7DB45F; */
    padding: 0.75rem 0.25rem;
    /*! margin: 0; */
}

.rating .custom_checkbox .checkmark.radio {
    border: none;

}

.rating .checkmark.radio .material-icons {
    color: var(--grey_05);
    /*! transition: ease-in-out 0.3s; */
    padding: 0.25rem;
    border: solid 1px var(--grey_04);
    border-radius: var(--radius-big);
}

.rating .container {
    height: 2rem;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /*! background: aqua; */
    padding: 0.5rem;
    /*! border: solid 1px var(--grey_04); */
    /*! padding: 0.25rem; */
}

.rating .container input:checked~.checkmark.radio:after {
    /*content: 'sentiment_very_dissatisfied';*/
    font-family: 'Material Icons';
    transform: none;
    font-size: 1.5rem;
    /*! left: 0; */
    border: solid 1px var(--grey_04);
    /*color: var(--red);*/
    height: 1.5rem;
    width: 1.5rem;
    background: white;
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: var(--radius-big);
}


.rating .container input:checked~.checkmark.radio {
    background: none;
}

.diff4 .container input:checked~.checkmark.radio:after {
    content: 'sentiment_very_dissatisfied';
    color: var(--red);
}

.diff3 .container input:checked~.checkmark.radio:after {
    content: 'sentiment_dissatisfied';
    color: #CF7783;
    /*! opacity: 0.5; */
}

.diff2 .container input:checked~.checkmark.radio:after {
    content: 'sentiment_satisfied';
    color: #7DB45F;
    /*! opacity: 0.5; */
}

.diff1 .container input:checked~.checkmark.radio:after {
    content: 'sentiment_satisfied_alt';
    color: var(--green);
}