:root {
    --bg-color-black: rgba(0,0,0,1);
    --bg-color-gray: rgba(51,51,51,1);
    --bg-color-gray2: rgba(31,31,31,1);
    --bg-color-gray3: #2b2b2b;
    --p-color-gray: rgba(141,141,141,1);
    --box-color-gray: #525252;
    --table-separator-line-color: #464646;
    --btn-color-yellow: #00ff84;
    --btn-color: rgba(51,51,51,1);
    --a-bg-color: #1063ff;
    --a-bg-color-adv: #5b339d;
    --a-bg-color-basic: #575757;
    --a-bg-color-pro: #3747b0;
    --rem-pad-2: 2rem;
    font-size: 12px;


    --badge-neutral-bg: #929292;
    --badge-neutral-border-color: #CCC;
    --badge-error-bg: #FF5630;
    --badge-error-border-color: #B53D22;
    --badge-success-bg: #339F7B;
    --badge-success-border-color: #006040;
    --toggler-bg:#636363;
    --toggler-inner-bg:#EFEFEF;
    --border-radius-black:4px;
    --bg-color-general:#414141;
    --darkgrey-50:#EFEFEF;
    --darkgrey-100:#b4b4b4;
    --darkgrey-200:#B4B4B4;
    --darkgrey-300:#929292;
    --darkgrey-700:#414141;
    --darkgrery-900:#272727;

}

/*Normalize*/
#dialog h1,
#dialog h2,
#dialog h3,
#dialog h4,
#dialog h5,
#dialog h6,
#dialogSuggestion h1,
#dialogSuggestion h2,
#dialogSuggestion h3,
#dialogSuggestion h4,
#dialogSuggestion h5,
#dialogSuggestion h6,
.black_dialog h1,
.black_dialog h2,
.black_dialog h3,
.black_dialog h4,
.black_dialog h5,
.black_dialog h6,
#dialogLicencia h1,
#dialogLicencia h2,
#dialogLicencia h3,
#dialogLicencia h4,
#dialogLicencia h5,
#dialogLicencia h6,
#dialogCotizacion h1,
#dialogCotizacion h2,
#dialogCotizacion h3,
#dialogCotizacion h4,
#dialogCotizacion h5,
#dialogCotizacion h6
{
    margin: 0;
}

/* Dialog */
#dialog,
#dialogSuggestion,
#dialogCotizacion,
#dialogLicencia,
#modal-e,
#modal-controlador,
#modal-temperatura,
.black_dialog {
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    border: 0px solid transparent;
    border-radius: var(--border-radius-black);
    background-color: var(--bg-color-general);
}

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
    #dialog,
    #dialogSuggestion,
    #dialogCotizacion,
    #dialogLicencia,
    #modal-e,
    #modal-controlador,
    #modal-temperatura,
    .black_dialog {
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-40%);
        -moz-transform: translateX(-50%) translateY(-40%);
        -ms-transform: translateX(-50%) translateY(-40%);
        transform: translateX(-50%) translateY(-40%);
        border: 0px solid transparent;
        border-radius: var(--border-radius-black);
        background-color: var(--bg-color-general);
    }
}



    #dialog::backdrop,
    #dialogSuggestion::backdrop,
    #dialogCotizacion::backdrop,
    #dialogLicencia::backdrop,
    #modal-e::backdrop,
    #modal-controlador::backdrop,
    #modal-temperatura::backdrop,
    .black_dialog::backdrop{
        background-color: rgba(4, 4, 16, .5);
        /*backdrop-filter: blur(1px);*/
    }

.dialog_black_container {
    background-color: transparent;
    padding: 24px;
    color: var(--darkgrey-50);
    /*max-width: 500px;*/
    width: auto;
    min-width: 300px;
}

    .dialog_black_container .header {
        background-color: transparent;
        padding-bottom: 24px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        /* CloudDark/H1 Light 24 px */
        font-size: 24px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

footer.button_container{
    padding-top:12px;
    /*border-top:1px solid var(--darkgrey-50);*/
}

.button_container{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    justify-content:flex-end;
}

.black_dialog .header .icon_container {
    height: fit-content;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
    .button_container {
        flex-direction: column;
        justify-content: center;
    }
}

.configTab {
    /*border: 1px solid var(--darkgrey-50);
    border-radius: var(--border-radius-black);*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.tabs_container {
    border-bottom: 1px solid var(--darkgrey-50);
}

.config_container {
    padding: 8px;
}

    .config_container .info_list{
        margin-left:15px;
    }

#info .formula{
    padding:8px 0;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    grid-gap:4px;
}

#info .formula  > img{
    border-radius:var(--border-radius-black);
}
/* Tabs */
.inner_tab_container {
    padding-top: 4px;
    border-bottom: 1px solid var(--darkgrey-50);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {
    .inner_tab_container {
        overflow-y:auto
    }
}

.generalConfig, .tablink {
    background-color: transparent;
    border-top: 1px solid var(--darkgrey-50);
    border-left: 1px solid var(--darkgrey-50);
    border-right: 1px solid var(--darkgrey-50);
    border-bottom: 1px solid var(--darkgrey-50);
    border-top-left-radius: var(--border-radius-black);
    border-top-right-radius: var(--border-radius-black);
    padding: 4px 6px 4px 6px;
    bottom: -1px;
    position: relative;
}

    .generalConfig.active, .tablink.active {
        font-weight: 700;
        background-color: var(--darkgrery-900);
    }
    /* Label buttons */
    .label_button {
        border-radius: var(--border-radius-black);
        background-color: var(--darkgrery-900);
        border: 1px solid transparent;
        display: flex;
        padding: 8px 16px 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

        .label_button:hover {
            border-color:var(--darkgrey-300);
            cursor:pointer;
        }

        .label_button:active {
            color:var(--darkgrey-200);
            border-color: var(--darkgrey-300);
        }

        .label_button:disabled, .label_button.disabled{
            pointer-events:none;
            color:var(--darkgrey-300);
            background-color:var(--darkgrey-700);
        }

        .label_button.not_allowed {
            cursor:not-allowed;
            pointer-events: none;
        }



.label_button.form_button {
    gap: 8px;
}

/* Forms */

.black_form{

}

.black_form_group, .configContent {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}

.black_form_group, .configContent .black_form_group:not(:first-of-type) {
    padding-top:8px;
}

    .black_form_group input,
    .black_form_group textarea {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 6px;
        border: var(--border-radius-black);
        background-color: var(--darkgrery-900);
        color: var(--darkgrey-50);

    }

        .black_form_group textarea{
            min-width:300px;
            min-height:150px;
        }

        .black_form_group input.error,
        .black_form_group textarea.error {
            border: 1px solid var(--badge-error-border-color);
        }

    .sub_text {
        color: var(--darkgrey-300);
        max-width: 80%;
        font-size: 0.9rem;
    }

.black_form_group .sub_text {
    padding-top: 4px; 

}

/* Icon button*/

.icon_container, .icon_container .searchbutton {
    padding: 6px;
    border-radius: var(--border-radius-black);
    /* background-color: var(--bg-color-gray); */
    background-color: transparent !important;
    border: 1px solid transparent;
    width: min-content;
    z-index: 100;
    display: flex;

}

#dialogCotizacion .icon_container, #dialogLicencia .icon_container {
    position: relative;
    top: -10px;
    left: 10px;
}

    .icon_container > i, .searchbutton > i {
        color: rgb(255, 255, 255);
        font-size:18px;
    }

    .icon_container:hover, .searchbutton:hover {
        cursor: pointer;
        animation: showIconHover .4s ease-in forwards;
    }

@keyframes showIconHover {
    from {
        border-color: transparent;
    }

    to {
        border-color: rgb(255, 255, 255);
    }
}

.reset_sensors_container, .reset_sensors_container_inner {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

    .reset_sensors_container_inner{
        display:none;
    }

    .reset_sensors_container {
        margin-right: auto;
    }

        .reset_sensors_container.active {
            background-color: var(--darkgrery-900);
            border-radius: var(--border-radius-black);
                /*animation: showButtonRestablecer .4s ease-in forwards;*/
        }

            .reset_sensors_container.active .reset_sensors_container_inner {
                display: flex;
                /*border-left: 1px solid var(--darkgrey-50);*/
            }

                .reset_sensors_container.active .reset_sensors_container_inner > .label_button {
                    animation: showButtonRestablecer .4s ease-in forwards;
                }

@keyframes showButtonRestablecer {
    from {
        opacity:0
    }

    to {
    opacity:1    }
}