/******************************************************
	SHARP BUTTONS
******************************************************/
.btn.sharp {
    border-radius: 0;
}

/******************************************************
	OUTLINE BUTTONS
******************************************************/
.btn.outline {
    background: none;
    padding: 12px 22px;
}

.btn-primary.outline {
    border: 2px solid #0099cc;
    color: #0099cc;
}

    .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
        color: #33a6cc;
        border-color: #33a6cc;
    }

    .btn-primary.outline:active, .btn-primary.outline.active {
        border-color: #007299;
        color: #007299;
        box-shadow: none;
    }

.btn-success.outline {
    border: 2px solid #00bf6f;
    color: #00bf6f;
}

    .btn-success.outline:hover, .btn-success.outline:focus, .btn-success.outline:active, .btn-success.outline.active, .open > .dropdown-toggle.btn-success {
        border-color: #39bf87;
        color: #39bf87;
    }

    .btn-success.outline:active, .btn-success.outline.active {
        border-color: #008c52;
        color: #008c52;
        box-shadow: none;
    }

.btn-info.outline {
    border: 2px solid #31cde8;
    color: #31cde8;
}

    .btn-info.outline:hover, .btn-info.outline:focus, .btn-info.outline:active, .btn-info.outline.active, .open > .dropdown-toggle.btn-info {
        border-color: #5fd4e8;
        color: #5fd4e8;
    }

    .btn-info.outline:active, .btn-info.outline.active {
        border-color: #35a2b5;
        color: #35a2b5;
        box-shadow: none;
    }

.btn-warning.outline {
    border: 2px solid #eb8f34;
    color: #eb8f34;
}

    .btn-warning.outline:hover, .btn-warning.outline:focus, .btn-warning.outline:active, .btn-warning.outline.active, .open > .dropdown-toggle.btn-warning {
        border-color: #eba259;
        color: #eba259;
    }

    .btn-warning.outline:active, .btn-warning.outline.active {
        border-color: #b87430;
        color: #b87430;
        box-shadow: none;
    }

.btn-danger.outline {
    border: 2px solid #f25454;
    color: #f25454;
}

    .btn-danger.outline:hover, .btn-danger.outline:focus, .btn-danger.outline:active, .btn-danger.outline.active, .open > .dropdown-toggle.btn-danger {
        border-color: #f26d6d;
        color: #f26d6d;
    }

    .btn-danger.outline:active, .btn-danger.outline.active {
        border-color: #bf4343;
        color: #bf4343;
        box-shadow: none;
    }

/******************************************************
	ROUNDED BUTTONS
******************************************************/

.btn.round {
    border-radius: 24px;
}

.btn-lg.round {
    border-radius: 32px;
}

.btn-sm.round {
    border-radius: 14px;
}

.btn-xs.round {
    border-radius: 10px;
}

/******************************************************
	RAISED BUTTONS
******************************************************/

.btn-primary.raised {
    box-shadow: 0 3px 0 0 #007299;
}

    .btn-primary.raised:active, .btn-primary.raised.active {
        background: #33a6cc;
        box-shadow: none;
        margin-bottom: -3px;
        margin-top: 3px;
    }

.btn-success.raised {
    box-shadow: 0 3px 0 0 #008c52;
}

    .btn-success.raised:active, .btn-success.raised.active {
        background: #39bf87;
        box-shadow: none;
        margin-bottom: -3px;
        margin-top: 3px;
    }

.btn-info.raised {
    box-shadow: 0 3px 0 0 #35a2b5;
}

    .btn-info.raised:active, .btn-info.raised.active {
        background: #5fd4e8;
        box-shadow: none;
        margin-bottom: -3px;
        margin-top: 3px;
    }

.btn-warning.raised {
    box-shadow: 0 3px 0 0 #b87430;
}

    .btn-warning.raised:active, .btn-warning.raised.active {
        background: #eba259;
        box-shadow: none;
        margin-bottom: -3px;
        margin-top: 3px;
    }

.btn-danger.raised {
    box-shadow: 0 3px 0 0 #bf4343;
}

    .btn-danger.raised:active, .btn-danger.raised.active {
        background: #f26d6d;
        box-shadow: none;
        margin-bottom: -3px;
        margin-top: 3px;
    }

/******************************************************
	BUTTON SIZING
******************************************************/

.btn-xs, .btn-group-xs > .btn {
    padding: 2px 6px;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 8px 12px;
}

.btn-lg {
    padding: 20px 40px;
    border-radius: 4px;
}

.btn-xs.btn-default, .btn-xs.outline {
    padding: 0px 4px;
}

.btn-sm.btn-default, .btn-sm.outline {
    padding: 6px 10px;
}

.btn-lg.btn-default, .btn-lg.outline {
    padding: 18px 38px;
}



/****************************************
    CORRECCIONES BOTONES
****************************/
.home__container > .btn-solid {
    margin: 20px auto;
}

.home__container .btn {
    margin-top: 30px;
    background-color: var(--bg-button-clear, transparent);
    color: var(--color-button-clear, rgb(42 39 38));
    border-color: var(--border-button-clear, rgb(42 39 38));
    border-radius: var(--radius-big, 20px);
}

    .home__container .btn:hover {
        background-color: var(--bg-button-clear-hover, rgb(42 39 38 / 50%));
        color: var(--color-button-clear-hover, rgb(255 255 255));
        border-color: var(--border-button-clear-hover, rgb(42 39 38 / 50%));
        text-decoration: none;
    }

/******************************************************
	BUTTON NEW
******************************************************/
.btn-clear {
    display: inline-block;
    font-size: var(--tipo-small, 16px);
    line-height: var(--tipo-big, 22px);
    /*font-weight: bold;*/
    padding: 6px 20px;
    height: fit-content;
    width: fit-content;
    border: solid var(--border-button-clear, rgb(42 39 38)) 1px;
    background-color: var(--bg-button-clear, transparent);
    color: var(--color-button-clear, rgb(42 39 38));
    border-color: var(--border-button-clear, rgb(42 39 38));
    border-radius: var(--radius-big, 20px);
}

    .btn-clear:hover {
        background-color: var(--bg-button-clear-hover, rgb(42 39 38 / 50%));
        color: var(--color-button-clear-hover, rgb(255 255 255));
        border-color: var(--border-button-clear-hover, rgb(42 39 38 / 50%));
        text-decoration: none;
    }

    .btn-clear.available {
        border: solid var(--border-button-available, rgb(4, 180, 95)) 1px;
        background-color: var(--bg-button-available, rgba(4, 180, 95, 0.1));
        color: var(--color-button-available, rgb(4, 180, 95));
    }

        .btn-clear.available:hover {
            border-color: var(--border-button-available-hover, rgb(4, 180, 95));
            background-color: var(--bg-button-available-hover, rgb(4, 180, 95));
            color: var(--color-button-available-hover, rgb(255 255 255));
        }

    .btn-clear.help {
        border: solid var(--border-button-help, rgb(0 106 175)) 1px;
        background-color: var(--bg-button-help, rgb(0 106 175 / 10%));
        color: var(--color-button-help, rgb(0 106 175));
    }

        .btn-clear.help:hover {
            border-color: var(--border-button-help-hover, rgb(0 106 175));
            background-color: var(--bg-button-help-hover, rgb(0 106 175));
            color: var(--color-button-help-hover, rgb(255 255 255));
        }

    .btn-clear.change {
        border: solid var(--border-button-change, rgb(136 19 139)) 1px;
        background-color: var(--bg-button-change, rgba(126, 19, 139, 0.1));
        color: var(--color-button-change, rgb(136 19 139));
    }

        .btn-clear.change:hover {
            border-color: var(--border-button-change-hover, rgb(136 19 139));
            background-color: var(--bg-button-change-hover, rgb(195 76 210));
            color: var(--color-button-change-hover, rgb(255 255 255));
        }

        .btn-clear.change.active {
            border-color: var(--border-button-change-hover, rgb(136 19 139));
            background-color: var(--bg-button-change-hover, rgb(195 76 210));
            color: var(--color-button-change-hover, rgb(255 255 255));
        }

    .btn-clear.danger {
        border: solid var(--border-button-danger, rgb(217 83 79)) 1px;
        background-color: var(--bg-button-danger, rgb(217 83 79 / 15%));
        color: var(--color-button-danger, rgb(217 83 79));
    }

        .btn-clear.danger:hover {
            border-color: var(--border-button-danger-hover, rgb(217 83 79));
            background-color: var(--bg-button-danger-hover, rgb(217 83 79));
            color: var(--color-button-danger-hover, rgb(255 255 255));
        }

.btn-solid {
    display: inline-block;
    font-size: var(--tipo-small, 16px);
    line-height: var(--tipo-big, 22px);
    /*font-weight: bold;*/
    padding: 6px 20px;
    height: fit-content;
    width: fit-content;
    border: solid var(--border-button-solid, rgb(42 39 38)) 1px;
    background-color: var(--bg-button-solid, rgb(42 39 38));
    color: var(--color-button-solid, rgb(255 255 255));
    border-radius: var(--radius-big, 20px);
}

    .btn-solid:hover {
        background-color: var(--bg-button-solid-hover, rgb(248 248 248));
        color: var(--color-button-solid-hover, rgb(42 39 38));
        border-color: var(--border-button-solid-hover, rgb(42 39 38));
        text-decoration: none;
    }

    .btn-solid.color {
        background-color: var(--bg-button-color, rgb(217 0 0));
        color: var(--color-button-color, rgb(255 255 255));
        border-color: var(--border-button-color, rgb(217 0 0));
    }

    .btn-solid:hover {
        background-color: var(--bg-button-color-hover, rgb(248 248 248));
        color: var(--color-button-color-hover, rgb(42 39 38));
        border-color: var(--border-button-color-hover, rgb(42 39 38));
        text-decoration: none;
    }

    .btn-solid.danger, .btn-clear.danger.active {
        border: solid var(--border-button-danger-hover, rgb(217 83 79)) 1px;
        background-color: var(--bg-button-danger-hover, rgb(217 83 79));
        color: var(--color-button-danger-hover, rgb(255 255 255));
    }

        .btn-solid.danger:hover {
            border-color: var(--border-button-danger, rgb(217 83 79));
            background-color: var(--bg-button-danger, rgb(217 83 79 / 15%));
            color: var(--color-button-danger, rgb(217 83 79));
        }

    .btn-solid.available, .btn-clear.available.active {
        border: solid var(--border-button-available-hover, rgb(4, 180, 95)) 1px;
        background-color: var(--bg-button-available-hover, rgb(4, 180, 95));
        color: var(--color-button-available-hover, rgb(255 255 255));
    }

        .btn-solid.available:hover {
            border-color: var(--border-button-available, rgb(4, 180, 95));
            background-color: var(--bg-button-available, rgba(4, 180, 95, 0.1));
            color: var(--color-button-available, rgb(4, 180, 95));
        }


    .btn-solid.help, .btn-clear.help.active {
        border: solid var(--border-button-help-hover, rgb(0 106 175)) 1px;
        background-color: var(--bg-button-help-hover, rgb(0 106 175));
        color: var(--color-button-help-hover, rgb(255 255 255));
    }

        .btn-solid.help:hover {
            border-color: var(--border-button-help, rgb(0 106 175));
            background-color: var(--bg-button-help, rgb(0 106 175 / 10%));
            color: var(--color-button-help, rgb(0 106 175));
        }

/*******************************/
/*BUTTON SQUARE*/

.btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 26px !important;
    padding: 0;
    color: white;
    min-width: 26px;
    font-size: 18px;
    border-radius: 3px;
    line-height: 1.5;
    /*importante el min-width para que no se altere al redimensionarse la pantalla*/
}

    .btn-square.css-info {
        background-color: var(--color-info, rgb(0 106 175));
        border-color: var(--border-info, rgb(0 71 117));
    }

        .btn-square.css-info:hover {
            background-color: var(--border-info, rgb(0 71 117));
            color: white;
        }

    .btn-square.css-approved {
        background-color: var(--color-available, rgb(4, 180, 95));
        border-color: var(--border-available, rgb(11 136 72));
    }

        .btn-square.css-approved:hover {
            background-color: var(--border-available, rgb(11 136 72));
            color: white;
        }

    .btn-square.css-waiting {
        background-color: var(--color-pendant, rgb(219, 169, 1));
        border-color: var(--border-pendant, rgb(196 144 0));
    }

        .btn-square.css-waiting:hover {
            background-color: var(--border-pendant, rgb(196 144 0));
            color: white;
        }

    .btn-square.css-change-suggestion {
        background-color: var(--color-change, rgb(195 76 210));
        border-color: var(--border-change, rgb(136 19 139));
    }

        .btn-square.css-change-suggestion:hover {
            background-color: var(--border-change, rgb(136 19 139));
            color: white;
        }

    .btn-square.css-cancelled {
        background-color: var(--color-danger, rgb(217 83 79));
        border-color: var(--border-color-danger, rgb(173 66 63));
    }

        .btn-square.css-cancelled:hover {
            background-color: var(--border-color-danger, rgb(173 66 63));
            color: white;
        }

    .btn-square.css-ignored {
        background-color: var(--bg-ignored, rgba(142, 142, 142, 0.6));
        border-color: var(--border-ignored, rgb(142 142 142));
    }

        .btn-square.css-ignored:hover {
            background-color: var(--border-ignored, rgb(142 142 142));
            color: white;
        }
/*******************************/
/*BUTTON RECTANGLE*/

.btn-rectangle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: fit-content !important;
    min-width: fit-content;
    padding: 0 8px;
    color: white;
}

    .btn-rectangle.css-cancelled {
        background-color: var(--color-danger, rgb(217 83 79));
        border-color: var(--border-color-danger, rgb(173 66 63));
    }

        .btn-rectangle.css-cancelled:hover {
            background-color: var(--border-color-danger, rgb(173 66 63));
            color: white;
        }

    .btn-rectangle.css-approved {
        background-color: var(--color-available, rgb(4, 180, 95));
        border-color: var(--border-available, rgb(11 136 72));
    }

    .btn-rectangle.css-keep-time {
        background-color: var(--color-ignored, rgb(142 142 142));
        border-color: var(--border-available, rgb(11 136 72));
    }

    .btn-rectangle.css-approved:hover {
        background-color: var(--border-available, rgb(11 136 72));
        color: white;
    }

    .btn-rectangle.css-keep-time:hover {
        background-color: var(--color-ignored, rgb(142 142 142));
        color: white;
    }

    .btn-rectangle.css-info {
        background-color: var(--color-info, rgb(0 106 175));
        border-color: var(--border-info);
    }

        .btn-rectangle.css-info:hover, .btn-rectangle.css-info:hover * {
            background-color: var(--border-info, rgb(0 71 117));
            color: white !important;
        }



/**********************************************************
                    TABS
    *************************************/

.tab-clear {
    font-size: var(--tipo-small, 16px);
    line-height: var(--tipo-big, 22px);
    border: solid 1px var(--border-tab-clear, rgb(142 142 142));
    background-color: var(--bg-tab-clear, rgb(142 142 142));
    color: var(--color-tab-clear, rgb(255 255 255));
    border-radius: var(--radius-small, 4px) var(--radius-small, 4px) 0 0;
    padding: 6px 10px;
    width: fit-content;
    border-bottom: 0;
    position: relative;
    margin-bottom: -1px;
    z-index: 2;
}

    .tab-clear:hover {
        opacity: 70%;
    }

    .tab-clear.active {
        background-color: var(--bg-tab-clear-active, rgb(255 255 255));
        color: var(--color-tab-clear-active, rgb(142 142 142));
        border-color: var(--border-tab-clear-active, rgb(142 142 142));
        box-shadow: none;
    }

        .tab-clear.active:hover {
            opacity: 100%;
            cursor: default;
        }