.value-title {
    @apply text-black text-lg pb-1;
}

.value-subtitle {
    @apply text-gray-500 text-sm pb-2;
}

.value-input {
    @apply pt-1 pl-4 h-12 w-full text-sm;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(255, 255, 255);
    border-radius: 26px;
    background-color: rgb(249, 247, 247);
    box-shadow: inset 0px 6px 4px 0px rgba(0, 0, 0, 0.14),inset 0px -7px 5px 0px rgba(255, 255, 255, 0.98);
}

button:focus {
    outline: none !important;
}

.collapsible-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.collapsible {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.font-yellowtail {
    font-family: Yellowtail;
}

.value-background {
    background: url('/images/bg-image.png') no-repeat center center fixed;
    background-size: cover;
}

.value-button {
    border-style: solid;
    border-width: 7px;
    border-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0px -7px 13px 0px rgba(255, 255, 255, 1),0px 15px 40px 0px rgba(0, 0, 0, 0.27),inset 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
}

.value-input-button {
    border-style: solid;
    border-width: 3px;
    border-color: rgb(255, 255, 255);
    display: inline-block;
    border-radius: 0px 26px 26px 0px;
    box-shadow: inset 0px 6px 4px 0px rgba(0, 0, 0, 0.14),inset 0px -2px 5px 0px rgba(255, 255, 255, 0.98);
}

.value-gradient {
    background: rgb(142,87,157);
    background: linear-gradient(90deg, rgba(142,87,157,1) 0%, rgba(45,149,191,1) 17%, rgba(79,188,112,1) 38%, rgba(252,205,26,1) 61%, rgba(255,131,39,1) 81%, rgba(219,65,35,1) 100%);
    -moz-box-shadow: inset 0 0 45px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 45px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 45px rgba(0,0,0,0.3);
}

.value-radio-button {
    appearance: none;
    width: 16px;
    height: 16px;
    color: #888888;
    border: 3px solid #ffffff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0px -4px 5px 1px rgb(255 255 255), 0px 15px 40px 0px rgb(0 0 0 / 27%), inset 0px 8px 16px 0px rgb(0 0 0 / 14%);
    transition: 50ms;
}

.value-radio-button:checked {
    background-color: #8e579d;
}

.value-radio-button:checked:hover {
    background-color: #7c4d88;
}

.value-radio-button:not(:checked):hover {
    background-color: #e6b2f5;
}