fieldset {
    border: none;
    padding: 0;
}

/* ----------------------------------- FIELD CHECKBOX ----------------------------------- */

.quiz-form-field-checkbox > label {
    display: flex;
    position: relative;
    cursor: pointer;
    padding-left: 30px;
    border: 1px solid #D7A84F;
    align-items: center;
    border-radius: 8px;
    padding: 8px 18px;
}

.quiz-form-field-checkbox > label:hover {
    border-color: #ffffff;
}

.quiz-form-field-radio > label:hover > input ~ .checkbox-check {
    border: 1px solid #ffffff;
}

.quiz-form-field-checkbox > label > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    left: -20px;
    top: 6px;
}

.quiz-form-field-checkbox {
    position: relative;
}

.quiz-form-field-checkbox > label > input ~ .checkbox-check {
    position: relative;
    top: 0px;
    left: 0;
    height: 20px;
    width: 20px;
    min-width: 20px;
    background: none;
    border: 1px solid #D7A84F;
    border-radius: 4px;
    margin-right: 11px;
}

.quiz-form-field-checkbox > label .checkbox-check:after {
    content: '';
    position: absolute;
    display: none;
}

.quiz-form-field-checkbox > label .checkbox-check:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #D7A84F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.quiz-form-field-checkbox > label > input:checked ~ .checkbox-check {
    background: none;
}

.quiz-form-field-checkbox > label input:checked ~ .checkbox-check:after {
    display: block;
}

.quiz-form-field-checkbox.checked label {
    border-color: #D7A84F;
    background: #D7A84F;
    color: #FFFFFF;
}

.quiz-form-field-checkbox.checked > label > input:checked ~ .checkbox-check {
    background:#FFFFFF;
}

/* ----------------------------------- FIELD RADIO ----------------------------------- */


.quiz-form-field-radio > label {
    display: flex;
    position: relative;
    align-items: center;
    cursor: pointer;
    padding-left: 30px;
    border: 1px solid #D7A84F;
    border-radius: 8px;
    padding: 8px 18px;
}

.quiz-form-field-radio > label:hover {
    border-color: #ffffff;
}

.quiz-form-field-radio > label:hover > input ~ .radio-check {
    border: 1px solid #ffffff;
}

.quiz-form-field-radio > label > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    left: -20px;
    top: 6px;
}

.quiz-form-field-radio {
    position: relative;
}

.quiz-form-field-radio > label > input ~ .radio-check {
    position: relative;
    top: 0px;
    left: 0;
    height: 20px;
    min-width: 20px;
    width: 20px;
    background: none;
    border: 1px solid #D7A84F;
    border-radius: 4px;
    margin-right: 11px;
    border-radius: 100%;
}

.quiz-form-field-radio > label .radio-check:after {
    content: '';
    position: absolute;
    display: none;
}

.quiz-form-field-radio > label .radio-check:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #D7A84F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.quiz-form-field-radio > label > input:checked ~ .radio-check {
    background: none;
}

.quiz-form-field-radio > label input:checked ~ .radio-check:after {
    display: block;
}

.quiz-form-field-radio.checked label {
    border-color: #D7A84F;
    background: #D7A84F;
    color: #FFFFFF;
}

.quiz-form-field-radio.checked > label > input:checked ~ .radio-check {
    background:#FFFFFF;
}


/* ----------------------------------- FIELD SELECT ----------------------------------- */


.quiz-form-field-select-dropdown {
    height: fit-content;
    background: #2b2b2b;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 60px;
    border-radius: 8px;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    /* border: 1px solid #D7A84F00; */
    right: 0;
}

.quiz-form-field-select-container {
    height: 209px;
}

.quiz-form-field-select {
    /* border-top: 1px solid #d1d1d1; */
    padding: 5px 15px;
    cursor: pointer;
}

.quiz-form-field-select:first-child {
    padding-top:10px;
}

.quiz-form-field-select:last-child {
    padding-bottom:10px;
}

.quiz-form-field-select:hover {
    background: #ffffff12;
}

.quiz-form-field-select.selected {
    background: #d8a94f;
    color: #FFFFFF;
}

.quiz-form-field .quiz-form-field-select-choosed {
    margin: 0;
    padding: 10px 30px 10px 15px;
    background: #2b2b2b;
    border: 1px solid #D7A84F;
    z-index: 2;
    border-radius: 8px;
    color: #ffffff42;
    position: relative;
    cursor: pointer;
}

.quiz-form-field .quiz-form-field-select-choosed svg {
    position: absolute;
    right: 10px;
    top: calc(50% - 4px);
    transform:rotateX(0deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.quiz-form-field-select-container.edited .quiz-form-field-select-choosed svg {
    transform:rotateX(180deg);
}

.quiz-form-field-select-container.value-picked .quiz-form-field-select-choosed {
    color: inherit;
}

.quiz-form-fields.field-type-select {
    position: relative;
}

.quiz-form-field-select-container.edited .quiz-form-field-select-dropdown {
    border: 1px solid #D7A84F;
}

.quiz-form-field-select-dropdown-inner {
    max-height: 0px;
    overflow-y: auto;
}

.quiz-form-field-select-container.edited .quiz-form-field-select-dropdown-inner {
    max-height: 146px;
    overflow-y: auto;
    padding: 0;
}


/* ----------------------------------- FIELD CHECKBOX IMAGE ----------------------------------- */


.field-type-checkbox-image .quiz-form-field {
    display: flex;
}

.quiz-form-field-checkbox-img {
    width: 50%;
}

.field-type-checkbox-image .quiz-form-field {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.quiz-form-field-checkbox-img {
    width: 190px;
}

.quiz-form-field-checkbox-img.display-title {
    height:auto;
}

.quiz-form-field-checkbox-img > label {
    display: flex;
    position: relative;
    cursor: pointer;
    border: 4px solid #ededed;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    width: 190px;
    height: 190px;
}

.quiz-form-field-checkbox-img > label {
    height:auto;
}

.quiz-form-field-checkbox-img > label:hover {
    border-color: #bb95f1;
    opacity:1;
}

.quiz-form-field-checkbox-img > label > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    left: -20px;
    top: 6px;
}

.quiz-form-field-checkbox-img {
    position: relative;
}

.quiz-form-field-checkbox-img > label > input ~ .checkbox-check {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 20px;
    width: 20px;
    background: #FFFFFF;
    border: 1px solid #ededed;
    border-radius: 4px;
    margin-right: 11px;
}

.quiz-form-field-checkbox-img > label .checkbox-check:after {
    content: '';
    position: absolute;
    display: none;
}

.quiz-form-field-checkbox-img > label .checkbox-check:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #D7A84F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.quiz-form-field-checkbox-img > label > input:checked ~ .checkbox-check {
    background: none;
}

.quiz-form-field-checkbox-img > label input:checked ~ .checkbox-check:after {
    display: block;
}

.quiz-form-field-checkbox-img.checked label {
    border-color: #D7A84F;
    background: #D7A84F;
    color: #FFFFFF;
}

.quiz-form-field-checkbox-img.checked > label > input:checked ~ .checkbox-check {
    background:#FFFFFF;
}

.quiz-form-field-checkbox-img > label > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.quiz-form-field-checkbox-img .input-label{
    display:none;
}

.quiz-form-field-checkbox-img.display-title .input-label {
    display:inherit;
    margin-top: 5px;
    font-size:15px;
}

/* ----------------------------------- FIELD RADIO IMAGE ----------------------------------- */


.field-type-radio-image .quiz-form-field {
    display: flex;
}

.quiz-form-field-radio-img {
    width: 50%;
}

.field-type-radio-image .quiz-form-field {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.quiz-form-field-radio-img {
    width: 190px;
    height: 190px;
}

.quiz-form-field-radio-img.display-title {
    height: fit-content;
}


.quiz-form-field-radio-img > label {
    display: flex;
    position: relative;
    cursor: pointer;
    border: 4px solid #ededed;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    width: 190px;
    height: 190px;
}

.quiz-form-field-radio-img > label:hover {
    border-color: #bb95f1;
    opacity:1;
}

.quiz-form-field-radio-img > label > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    left: -20px;
    top: 6px;
}

.quiz-form-field-radio-img {
    position: relative;
}

.quiz-form-field-radio-img > label > input ~ .radio-check {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 20px;
    width: 20px;
    background: #FFFFFF;
    border: 1px solid #ededed;
    border-radius: 100%;
    margin-right: 11px;
    z-index: 2;
}

.quiz-form-field-radio-img > label .radio-check:after {
    content: '';
    position: absolute;
    display: none;
}

.quiz-form-field-radio-img > label .radio-check:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #D7A84F;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.quiz-form-field-radio-img > label > input:checked ~ .radio-check {
    background: none;
}

.quiz-form-field-radio-img > label input:checked ~ .radio-check:after {
    display: block;
}

.quiz-form-field-radio-img.checked label {
    border-color: #D7A84F;
    background: #D7A84F;
    color: #FFFFFF;
}

.quiz-form-field-radio-img.checked > label > input:checked ~ .radio-check {
    background:#FFFFFF;
}

.quiz-form-field-radio-img > label > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.quiz-form-field-radio-img .input-label {
    display:none;
}


.quiz-form-field-radio-img.display-title .input-label {
    display:inherit;
    font-size: 15px;
    margin-top: 5px;
}


@media (max-width:1200px)
{
    .quiz-form-field-radio-img {

        height:150px;
    }

    .quiz-form-field-radio-img > label {
        width:100%;
        /* height:100%; */
    }
}

@media (max-width:600px)
{
    .quiz-form-field-radio-img {

        height:150px;
    }

    .quiz-form-field-radio-img > label {
        width:100%;
        /* height:100%; */
    }
}

@media (max-width:450px)
{
    .quiz-form-field-checkbox-img {
        justify-self: center;
    }
    .quiz-form-field-radiobox-img {
        justify-self: center;
    }
}

@media (max-width:300px)
{
    .field-type-radio-image .quiz-form-field {
        flex-wrap:wrap;
    }

    .quiz-form-fields.field-type-radio-image {
        /* max-height: 150px; */
    }

    .quiz-form-field-radio-img {
        width:100%;
        height:auto;
    }

    .quiz-form-field-radio-img > label {
        width:100%;
        height:100%;
        display: block;
    }

    .quiz-form-field-checkbox-img {
        width:100%;
        height: auto;
    }

    .quiz-form-field-checkbox-img > label {
        width:100%;
        height:100%;
    }
}