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

.container {
    display: flex;
    position: relative;
    /*! padding-left: 2rem; */
    margin-right: 1.25rem;
    /*! 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; */
    /*! width: 100%; */
    /*! padding: 0.25rem; */
    /*! margin: 0.5rem; */
    /*! justify-content: center; */
    /*! padding: 0.5rem 0; */
    /*! margin: 0.5rem 0; */
}

/* 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: white;
    border: solid 2px var(--grey_05);
    border-radius: 0.25rem;
    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(--grey_03);
}

/* 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: var(--secondary); */
    /*! height: 2rem; */
    /*! width: calc(3.5rem + 2px); */
    /*! margin-right: 1.75rem; */
    width: auto;
    justify-content: center;
    /*! padding-right: 1.25rem; */
    margin: 0.5rem;
    /*! width: 100%; */
}

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

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

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

/* ****** switch **** */

.switch {
    position: relative;
    /*! display: inline-flex; */
    width: 2rem;
    height: 1rem;
    /*! margin-right: 1rem; */
    display: flex;
    /*! align-items: center; */
    /*! float: left; */
    margin: auto;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*! background-color: #ccc; */
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 0.5rem;
    width: 0.5rem;
    left: 0.05rem;
    bottom: calc(50% - 4px);
    background-color: var(--grey_05);
    transition: .4s;
}

input:checked+.slider {
    border: solid 2px var(--primary);
}

input:checked+.slider:before {
    background: var(--primary);
}

input:checked+.slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(14px);
}


/* Rounded sliders */

.slider.round {
    border-radius: 1rem;
    border: solid 2px var(--grey_05);
}

.slider.round:before {
    border-radius: 50%;
}