body {
    background: linear-gradient(63.08deg, #2E3599 2.68%, #5E307D 38.13%, #5E2E7C 98.56%, #5E2E7C 113.61%, #56BEB8 119.84%);
    font-family: "Montserrat";
}

    body > * {
        font-family: "Montserrat";
    }

.layout-navbar.navbar-detached.container-xxl {
    max-width: unset !important;
}

.container-sm {
    background: white;
    width: 80%;
}

/* === MENU COLLAPSE STYLES (UPDATED) === 
.menu-collapsed #layout-menu {
    width: 60px !important;
}*/

/* Smooth transition */
#layout-menu, .layout-page {
    transition: width .25s ease, margin-left .25s ease;
}

    #layout-menu .menu-inner > .menu-item > .menu-link img {
        transition: margin .25s ease;
    }

/* Keyframes for submenu hover animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-6px);
    }
}

.welcome-text {
    font-family: "Montserrat-ExtraBold";
    font-weight: 900;
    color: #2B2C2E;
    letter-spacing: 2px;
    font-size: 24px;
    line-height: 24px;
}

input::placeholder {
    font-style: italic;
    color: #76787C;
}

.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
}

.btn-primary {
    background: #394190;
    border-radius: 4px;
}

#layout-menu {
    background: #394190 !important;
    max-height: 100vh;
    position: sticky;
    top: 0;
    transition: width .25s ease; /* ensure width animation */
}

/* ==== AJUSTES PARA MENU COLAPSABLE VISIBILE ==== */

/* Estructura vertical flexible */
#layout-menu {
    display: flex;
    flex-direction: column;
}

    /* El ul ocupa el alto disponible y permite sticky del botón */
    #layout-menu > .menu-inner {
        flex: 1;
        overflow-y: auto;
    }

/* Anchos por defecto (estado expandido) */
.menu-item {
    min-width: 250px;
}

/* Modo colapsado: NO forzar 300px (se anula la regla existente) */
.menu-item-collapssed-custom .menu-item {
    min-width: 0 !important;
    width: 100% !important;
}

.menu-item-collapssed-custom .menu-item img {
    margin-left:20px;
}

/* Ocultar textos y centrar iconos en colapsado */
.menu-item-collapssed-custom .menu-link div {
    display: none !important;
}

.menu-item-collapssed-custom .menu-link {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

    /* Ajustar margen del icono */
    .menu-item-collapssed-custom .menu-link img {
        margin-right: 0 !important;
    }

/* Botón siempre visible al fondo (sticky dentro del scroll) */
#btnCollapseMenuNew {
    position: static;
}

    /* Asegurar que el li contenedor no mete ancho extra */
    #btnCollapseMenuNew.closest && .menu-item.text-center {
        min-width: 0;
        width: 100%;
    }

/* (Opcional) Reducir padding vertical inferior para que el botón no salte */
.menu-item-collapssed-custom .menu-item.text-center.pb-3 {
    padding-bottom: 0.5rem !important;
}

/* Ocultar logo grande y dejar isotipo centrado */
.menu-item-collapssed-custom #logobiglbrand {
    opacity: 0;
    pointer-events: none;
}

.menu-item-collapssed-custom #logosmallbrand {
    opacity: 1;
}

/* Suavizar transiciones */
.menu-item,
.menu-link,
#btnCollapseMenuNew,
#logobiglbrand,
#logosmallbrand {
    transition: all .25s ease;
}

.layout-page {
    position: relative;
    background: #ffffff !important;
}

#layout-navbar {
    position: sticky !important;
    top: 0;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    background-color: #F9FAFA !important;
}

.menu-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
    transition: width .25s ease, margin-left .25s ease;
}

.menu-item {
    min-width: 250px;
    white-space: nowrap;
}

    .menu-item img {
        width: 20px;
        height: 20px;
        margin-right: 0.85rem;
    }

.menu-vertical .menu-bottom > .menu-item .menu-link {
    margin: 0rem 1rem;
}
#layout-menu {
    justify-content: space-between;
}
.bottom .menu-inner {
    height:auto;
}
.layout-menu, .menu-item, .menu-item .menu-link, .menu-item .menu-link a, .menu-item .menu-link a div, .menu-item ul, .menu-link img {
    transition: width .25s ease, margin-left .25s ease;
}

/*
.menu-item-collapssed-custom .menu-item {
    min-width: 300px;
    width: 300px;
    transition: width .25s ease, margin-left .25s ease;
}*/

.menu-item-collapssed-custom ul li img {
    margin-right: 24px;
    transition: width .25s ease, margin-left .25s ease;
}

.layout-menu .menu-inner.d-flex {
    display: flex;
    flex-direction: column;
}

    .layout-menu .menu-inner.d-flex > .flex-grow-1 {
        min-height: 0;
    }

.menu-item-collapssed-custom ul li {
    margin-left: -12px !important;
    transition: width .25s ease, margin-left .25s ease;
}

.menu-item-collapssed-custom .app-brand {
    padding-left: 13px;
    transition: width .25s ease, margin-left .25s ease;
}

.logo-hidden {
    width: 0px !important;
    height: auto;
}

#logosmallbrand {
    position: absolute;
}

.d-block {
    color: #000;
}

.e-grid .e-icon-descending::before, .e-grid .e-icon-ascending::before {
    display: none;
}

.e-grid .e-sortfilterdiv {
    float: left !important;
    /* height: 10px; */
    margin: -15px 10px;
    padding: 0px !important;
}

.e-columnheader > th:first-child {
    border-right: 1px solid #F0F2F4 !important;
}

.e-columnheader > th:last-child {
    border-left: 1px solid #F0F2F4 !important;
}

tbody > tr > td:first-child {
    border-right: 1px solid #F0F2F4 !important;
}

tbody > tr > td:last-child {
    border-left: 1px solid #F0F2F4 !important;
}

td .budget-badge {
    background-color: #5E2E7C;
    width: 24px;
    height: 24px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 9px;
    font-weight: 400;
    line-height: 20px;
}

td .more-badge {
    background-color: #C0E2E4;
    border: 1px solid #58B8B3;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #40928D;
    font-size: 9px;
    font-weight: 400;
    line-height: 20px;
}

.e-columnheader, .e-grid .e-headercell {
    background-color: #F9FAFA !important;
}

#back-button {
    color: #394190;
    height: 44px;
    border-right: 1px solid #BFBFBF;
    border-radius: 0;
    margin-right: 16px;
    margin-left: -16px;
    display: flex;
    align-items: center;
}

.e-dialog .e-footer-content {
    text-align: center !important;
}

/* Change background color of primary button */
.e-control.e-dialog .e-footer-content .e-primary {
    background-color: #394190 !important;
    color: #fff !important;
}

/* Change background color of secondary button */
.e-control.e-dialog .e-footer-content .e-flat {
    background-color: white;
    border: 1px solid #394190;
    text-transform: none;
    color: #394190;
    border-radius: 4px;
    padding: 8px 27px;
}

.e-control.e-dialog .e-footer-content .e-btn .e-btn-icon {
    font-size: 17px !important;
}

.card.border-left {
    border-left: 8px solid #A1A2A4;
    filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.122924));
}

.btn.btn-remove {
    background-color: #FFD9BD;
    border: 1px solid #F56700;
    border-radius: 4px;
    height: 18px;
    font-size: 11px;
    padding: 2px 8px;
    color: #F56700;
}

.btn.btn-noadd {
    background-color: #E2E2E2;
    border: 1px solid #76787C;
    border-radius: 4px;
    height: 18px;
    font-size: 11px;
    padding: 2px 8px;
    color: #5A5C61;
    line-height: 11px;
}

.btn.btn-add {
    background-color: #C0E2E4;
    border: 1px solid #58B8B3;
    border-radius: 4px;
    height: 18px;
    font-size: 11px;
    padding: 2px 8px;
    color: #40928D;
    line-height: 11px;
}

.btn.btn-check-connection {
    background-color: #FFD9BD;
    border: 1px solid #F56700;
    border-radius: 4px;
    height: 18px;
    font-size: 11px;
    padding: 2px 8px;
    color: #7B3400;
    line-height: 11px;
}

#platform_dialog_dialog-content {
    padding: 0px !important;
}

#platformInformation .e-footer-content, #platform_disconnect .e-footer-content {
    background-color: #F9FAFA;
    border-top: 1px solid #E8E8E8;
}

#clientImages .card {
    border: 1px solid #E2E2E2;
    border-radius: 4px;
}

.section-header {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #333842;
}

.section {
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #E8E8E8;
}

.center {
    text-align: center;
}

.bold {
    font-weight: 700;
}

.card {
    filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.122924));
}

    .card.active {
        border: 1px solid #394190;
        cursor: pointer;
    }

    .card.disabled {
        border: none;
        opacity: .6;
        background-color: #F9FAFA;
        filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.122924));
        cursor: pointer;
    }

.card-body .bold.black {
    color: #3E4045;
}

.e-dlg-container {
    z-index: 10000 !important;
}

    .e-dlg-container .card {
        filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.122924));
    }

        .e-dlg-container .card.border-left {
            border-left: 8px solid #58B8B3;
        }

            .e-dlg-container .card.border-left.added {
                border-left: 8px solid #F59E19;
            }

.platform-card-image {
    border-radius: 32px;
    width: 32px;
    height: 32px;
    background: #E8EAED;
    margin-right: 10px;
}

    .platform-card-image > img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

.platform_title {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 40px;
    color: #333842;
}

.connector {
    width: 12px;
    border-bottom: 1px solid #d7dbe1;
    height: 23px;
}

.checkbox-group {
    border-radius: 4px;
    border: 1px solid #E8E8E8;
}

    .checkbox-group .checkbox-group-item {
        padding-left: 0px;
        padding-right: 0px;
        border-right: 1px solid #E8E8E8;
    }

        .checkbox-group .checkbox-group-item:last-child {
            border-right: none;
        }

    .checkbox-group .header {
        background: #F0F2F4;
        height: 77px;
        padding: 16px;
    }

    .checkbox-group .search {
        border-bottom: 1px solid #E8E8E8;
    }

        .checkbox-group .search .form-control, .checkbox-group .search .input-group-text {
            border: none !important;
            border-radius: 0 !important;
        }

    .checkbox-group .list .list-group {
        border: none !important;
        border-radius: 0 !important;
        height: 240px;
        overflow-y: auto;
    }

        .checkbox-group .list .list-group .list-group-item {
            border: none !important;
        }

            .checkbox-group .list .list-group .list-group-item:hover {
                background-color: #D5D9F7;
            }

td .progress {
    height: 4px !important;
}

.contact-alert {
    position: sticky;
    bottom: 0;
    background-color: #FFFFFF;
    border-top: 1px solid #E2E2E2;
    padding: 20px;
    padding-bottom: 40px;
}

    .contact-alert > h4 {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 34px;
        color: #333842;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    .contact-alert > p {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        color: #3E4045;
        flex: none;
        order: 0;
        flex-grow: 0;
    }

.loading-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.btnGoogleLogin {
    background: #fff;
    color: #888;
    border: 1px solid #dadce0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    font-family: Rubik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    box-shadow: none;
    width: 100%;
    border-radius: 5px;
    white-space: nowrap;
    justify-content: center;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 4px;
    margin-bottom: 10px;
}

    .btnGoogleLogin div {
        line-height: 1.5715;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        width: 20px;
        height: 20px;
        position: relative;
        display: inline-block;
    }

    .btnGoogleLogin span {
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        font-family: Rubik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        margin-left: 10px
    }

    .btnGoogleLogin img {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
    }

    .btnGoogleLogin:hover {
        transform: none;
        transition: none;
        border: 1px solid #dadce0;
    }



.btnFacebookLogin {
    background-color: #1877F2;
    color: white;
    border: 1px solid #dadce0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    font-family: Rubik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    box-shadow: none;
    width: 100%;
    border-radius: 5px;
    white-space: nowrap;
    justify-content: center;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 4px;
    margin-bottom: 10px;
}

    .btnFacebookLogin div {
        line-height: 1.5715;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        width: 20px;
        height: 20px;
        position: relative;
        display: inline-block;
    }

    .btnFaceBookLogin span {
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        font-family: Rubik, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
        margin-left: 10px
    }

    .btnFacebookLogin img {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        top: -4px; /* Ajusta este valor seg?n sea necesario */
        left: -10px; /* Ajusta este valor seg?n sea necesario */
    }

    .btnFacebookLogin:hover {
        transform: none;
        transition: none;
        border: 1px solid #dadce0;
    }




.specialBtnPopUp {
    height: 31px;
    padding-top: 7px;
}

@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css') .funkyradio div

{
    clear: both;
    overflow: hidden;
}

.funkyradio label {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #D1D3D4;
    font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
    display: none;
}

    .funkyradio input[type="radio"]:empty ~ label,
    .funkyradio input[type="checkbox"]:empty ~ label {
        position: relative;
        line-height: 2.5em;
        text-indent: 3.25em;
        margin-top: 2em;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .funkyradio input[type="radio"]:empty ~ label:before,
        .funkyradio input[type="checkbox"]:empty ~ label:before {
            position: absolute;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            content: '';
            width: 2.5em;
            background: #D1D3D4;
            border-radius: 3px 0 0 3px;
        }

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
    color: #888;
}

    .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
    .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #C2C2C2;
    }

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
    color: #777;
}

    .funkyradio input[type="radio"]:checked ~ label:before,
    .funkyradio input[type="checkbox"]:checked ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #333;
        background-color: #ccc;
    }

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
    color: #333;
    background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #337ab7;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #f0ad4e;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
    color: #fff;
    background-color: #5bc0de;
}


/* === Menu colapsado: ocultar textos y centrar iconos === */
.menu-item-collapssed-custom #layout-menu .menu-inner {
    overflow-y: auto;
}

.menu-item-collapssed-custom .menu-link {
    justify-content: center !important;
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
}

    .menu-item-collapssed-custom .menu-link > div,
    .menu-item-collapssed-custom .menu-link .policy-terms-text,
    .menu-item-collapssed-custom .policy-terms-text a,
    .menu-item-collapssed-custom .policy-terms-text span {
        display: none !important;
    }

    /* Iconos sin margen lateral al colapsar */
    .menu-item-collapssed-custom .menu-link img {
        margin-right: 0 !important;
    }

/* === Tooltips CSS puros en modo colapsado === */
.menu-item-collapssed-custom .menu-link,
.menu-item-collapssed-custom .policy-terms {
    position: relative;
}

    .menu-item-collapssed-custom .menu-link::after,
    .menu-item-collapssed-custom .policy-terms::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(8px);
        background: rgba(20,20,30,.95);
        color: #fff;
        font-size: 12px;
        line-height: 1.2;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease, transform .15s ease;
        z-index: 1000;
    }

    .menu-item-collapssed-custom .menu-link:hover::after,
    .menu-item-collapssed-custom .policy-terms:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(10px);
    }

    /* Flecha del tooltip (opcional) */
    .menu-item-collapssed-custom .menu-link::before,
    .menu-item-collapssed-custom .policy-terms::before {
        content: "";
        position: absolute;
        left: calc(100% + 2px);
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 5px solid rgba(20,20,30,.95);
        opacity: 0;
        transition: opacity .15s ease;
        z-index: 1001;
    }

    .menu-item-collapssed-custom .menu-link:hover::before,
    .menu-item-collapssed-custom .policy-terms:hover::before {
        opacity: 1;
    }

/* Policy & Terms icon alineado */
.policy-terms {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Asegurar que el botón de colapso no quede tapado */
#btnCollapseMenuNew {
    z-index: 1200;
}

/* === ToolTip flotante fuera del aside === */
#menu-tooltip-float {
    position: fixed;
    background: rgba(20,20,30,.95);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 4000;
    font-family: "Montserrat", sans-serif;
}

    #menu-tooltip-float.show {
        opacity: 1;
        transform: translateY(0);
    }

/* === Modo colapsado: sólo iconos centrados === */
.menu-item-collapssed-custom #layout-menu .menu-inner .menu-link {
    justify-content: center !important;
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
}

.menu-item-collapssed-custom #layout-menu .menu-link > div,
.menu-item-collapssed-custom #layout-menu .policy-terms-text {
    display: none !important;
}

.menu-item-collapssed-custom #layout-menu .menu-link img {
    margin-right: 0 !important;
}

/* Alinear Policy & Terms icono */
.policy-terms {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Evitar “rebote” visual en transiciones */
#layout-menu .menu-item.menu-item-animating {
    overflow: hidden;
}

/* SCSS STYLES */
/*
.funkyradio {

    div {
        clear: both;
        overflow: hidden;
    }

    label {
        width: 100%;
        border-radius: 3px;
        border: 1px solid #D1D3D4;
        font-weight: normal;
    }

    input[type="radio"],
    input[type="checkbox"] {

        &:empty {
            display: none;

            ~ label {
                position: relative;
                line-height: 2.5em;
                text-indent: 3.25em;
                margin-top: 2em;
                cursor: pointer;
                user-select: none;

                &:before {
                    position: absolute;
                    display: block;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    content: '';
                    width: 2.5em;
                    background: #D1D3D4;
                    border-radius: 3px 0 0 3px;
                }
            }
        }

        &:hover:not(:checked) ~ label {
            color: #888;

            &:before {
                content: '\2714';
                text-indent: .9em;
                color: #C2C2C2;
            }
        }

        &:checked ~ label {
            color: #777;

            &:before {
                content: '\2714';
                text-indent: .9em;
                color: #333;
                background-color: #ccc;
            }
        }

        &:focus ~ label:before {
            box-shadow: 0 0 0 3px #999;
        }
    }

    &-default {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #333;
                background-color: #ccc;
            }
        }
    }

    &-primary {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #fff;
                background-color: #337ab7;
            }
        }
    }

    &-success {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #fff;
                background-color: #5cb85c;
            }
        }
    }

    &-danger {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #fff;
                background-color: #d9534f;
            }
        }
    }

    &-warning {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #fff;
                background-color: #f0ad4e;
            }
        }
    }

    &-info {
        input[type="radio"],
        input[type="checkbox"] {
            &:checked ~ label:before {
                color: #fff;
                background-color: #5bc0de;
            }
        }
    }
}
*/