/* Customizable styles */

/* Colors: Default (blue) */
.SoDRadioToggle > input + label {
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-width: 1px 1px 0 1px;
}

.SoDRadioToggle > input:last-of-type + label {
    border-bottom-width: 1px;
}

.SoDRadioToggle > input:checked + label {
    background: lightblue;
}

/* Rounded corners */
.SoDRadioToggle input:first-of-type + label {
    border-radius: 4px 4px 0 0;
}

.SoDRadioToggle input:last-of-type + label {
    border-radius: 0 0 4px 4px;
}

/* Indicators for smaller devices (stacked) */
.SoDRadioToggle > input + label:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.50rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23000;' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.SoDRadioToggle > input:checked + label:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23000;' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
}

/* //////////////////////////
CORE STYLES BELOW - NO TOUCHY
////////////////////////// */
.SoDRadioToggle {
    display: inline-block;
    vertical-align: middle;
}

    .SoDRadioToggle > input[type='radio'] {
        display: none;
    }

    .SoDRadioToggle > input[disabled] + label {
        opacity: 0.50;
    }

        .SoDRadioToggle > input[disabled] + label:hover {
            cursor: not-allowed;
        }

    .SoDRadioToggle > input + label {
        display: flex;
        margin-bottom: 0;
        padding: 5px 10px;
        cursor: pointer;
        align-items: center;
    }

    /* Transitions */
    .SoDRadioToggle > input:checked + label {
        transition: background 300ms linear;
    }

    /* //////////////////////////
CORE STYLES ABOVE - NO TOUCHY
////////////////////////// */

    /* Style: Rounded */
    .SoDRadioToggle[data-style='rounded'] > input:first-of-type + label {
        border-radius: 20px 20px 0 0;
    }

    .SoDRadioToggle[data-style='rounded'] > input:last-of-type + label {
        border-radius: 0 0 20px 20px;
    }

    /* Style: Square */
    .SoDRadioToggle[data-style='square'] > input + label {
        border-radius: 0;
    }

    /* Color */
    .SoDRadioToggle[data-color] > input + label {
        color: #fff;
    }

        .SoDRadioToggle[data-color] > input + label:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23fff;' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'/%3E%3C/svg%3E");
        }

    .SoDRadioToggle[data-color] > input:checked + label:before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23fff;' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
    }

    /* Color: Red */
    .SoDRadioToggle[data-color='red'] > input + label {
        background: #e74c3c;
    }

    .SoDRadioToggle[data-color='red'] > input:checked + label {
        background: #9a0000;
    }

    /* Color: Orange */
    .SoDRadioToggle[data-color='orange'] > input + label {
        background: #e67e22;
    }

    .SoDRadioToggle[data-color='orange'] > input:checked + label {
        background: #993100;
    }

    /* Color: Yellow */
    .SoDRadioToggle[data-color='yellow'] > input + label {
        background: #f1c30f;
    }

    .SoDRadioToggle[data-color='yellow'] > input:checked + label {
        background: #a47600;
    }

    /* Color: Green */
    .SoDRadioToggle[data-color='green'] > input + label {
        background: #2ecc71;
    }

    .SoDRadioToggle[data-color='green'] > input:checked + label {
        background: #007f24;
    }

    /* Color: Blue */
    .SoDRadioToggle[data-color='blue'] > input + label {
        background: #3498db;
    }

    .SoDRadioToggle[data-color='blue'] > input:checked + label {
        background: #004b8e;
    }

    /* Color: Purple */
    .SoDRadioToggle[data-color='purple'] > input + label {
        background: #aa66cc;
    }

    .SoDRadioToggle[data-color='purple'] > input:checked + label {
        background: #5d197f;
    }

    /* Color: Gray */
    .SoDRadioToggle[data-color='gray'] > input + label {
        background: #555555;
    }

    .SoDRadioToggle[data-color='gray'] > input:checked + label {
        background: #080808;
    }


/* ------------------------------ */

/* Bootstrap Breakpoints */

/* Small (sm) and up */
@media (min-width:576px) {
}


/* Medium (md) and up */
@media (min-width:768px) {
}


/* Large (lg) and up */
@media (min-width:992px) {
    .SoDRadioToggle > input + label {
        display: inline-block;
        float: left;
        border-width: 1px 0 1px 1px;
    }

    .SoDRadioToggle > input:last-of-type + label {
        border-right-width: 1px;
    }

    .SoDRadioToggle > input + label:before {
        display: none;
    }

    /* Border Radius */
    .SoDRadioToggle input:first-of-type + label {
        border-radius: 4px 0 0 4px;
    }

    .SoDRadioToggle input:last-of-type + label {
        border-radius: 0 4px 4px 0;
    }

    /* Rounded */
    .SoDRadioToggle[data-style='rounded'] > input:first-of-type + label {
        border-radius: 500px 0 0 500px;
    }

    .SoDRadioToggle[data-style='rounded'] > input:last-of-type + label {
        border-radius: 0 500px 500px 0;
    }
}

/* Extra Large (xl) and up */
@media (min-width:1200px) {
}