@import url('https://fonts.googleapis.com/css2?family=Anton&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Anton&display=swap');

*{
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

:root{
    --primary: #14563E;
    --secondary: #49B638;
    --tertiary: #a09e9e;
    --background: #ededed;
    --green: #29bf12;
    --yellow: #f39c11;
    --red: #dd1c1a;
    --orange: #F50;
    --blue: #0075d6;
    --cyan: #158cb5;
    --hover: #e5f3ff;
    --selection: #cce8ff;
    --border: #a1a1a1;
    --borderHover: #c5e2fb;
    --borderSelection: #89caff;
    --fonts: #000;
    --failure: rgb(106, 4, 15);
}

html{
    height: 100%;
    scroll-behavior: smooth;

    body {
        font-family: 'Helvetica', sans-serif;
        color: var(--fonts);
        height: 100%;
        background: var(--background);
    }

    /*BUTTON*/

    .button,
    .buttonMini,
    .buttonBackgroundless{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        padding: 0 25px;
        background-color: var(--primary);
        border: 1px solid transparent;
        border-radius: 15px;
        column-gap: 5px;


        &.secondary {
            background-color: var(--secondary) !important;
            border-color : var(--secondary) !important;
        }

        &.success {
            background-color: var(--green) !important;
            border-color : var(--green) !important;
        }

        &.danger {
            background-color: var(--red) !important;
            border-color : var(--red) !important;
        }

        &.warning {
            background-color: var(--yellow) !important;
            border-color : var(--yellow) !important;
        }

        &.buttonOutline{
            background-color: transparent !important;
            border-color: white !important;

            &:hover{
                background-color: var(--hover) !important;
                border-color: var(--borderHover)!important;
                outline: none;
                cursor: pointer;

                .buttonIcon,
                .buttonLabel{
                    color: black;
                }
            }
        }

        &.active{
            background-color: var(--cyan) !important;
            border-color: var(--cyan) !important;
            .buttonIcon,
            .buttonLabel{
                color: white;
            }
        }

        .label{
            color: white;
            font-size: 1.5rem;
            white-space: nowrap;
        }

        .icon{
            font-weight: 200;
            font-size: 3.5rem;
            font-family: "Material Symbols Outlined";
            color: white;

            &:before{
                content: attr(data-icon);
            }
        }

        &:focus {
            outline: none;
        }

        &.buttonCancel{
            background-color: var(--tertiary);
            border-color: var(--tertiary);
        }

        &:hover{
            background: var(--hover) !important;
            border-color: var(--borderHover) !important;
            outline: none;
            cursor: pointer;

            .icon,
            .label{
                color: black;
            }
        }
    }

    .buttonMini{
        background-color: #fff;

        height: 40px;

        .buttonIcon{
            width: 20px;
            color: #aaa;
        }

        .buttonLabel{
            color: #aaa;
        }

        &.active{
            background-color: #F1F1F3;

            .buttonIcon {
                color: var(--secondary);
            }


            .buttonLabel{
                color: var(--primary);
                font-weight: 700;
            }
        }

        &:hover {
            cursor: pointer;
            background-color: var(--secondary);

            .buttonIcon {
                color: #fff!important;
            }
        }
    }

    .buttonBackgroundless {
        .buttonLabel {
            color: var(--fonts);
        }
        &:hover {
            cursor: pointer;
            background-color: var(--hover);
            color: black;
        }
    }

    .buttonsGroup{
        display: flex;
        border-radius: 25px;
        overflow: hidden;
        border: 1px solid var(--border);

        .button{
            border-radius: 0;
            background: none;
            opacity: .5;

            &.active{
                background: var(--primary);

                opacity: 1;
                .buttonIcon{
                    color: var(--secondary);
                }
                .buttonLabel{
                    color: white;
                }
            }

            .buttonIcon{
                color: var(--fonts);
            }

            .buttonLabel{
                color: var(--fonts);
            }

            &:hover{
                cursor: pointer;
                background-color: var(--secondary);
                opacity: 1;

                .buttonIcon {
                    color: white;
                }
                .buttonLabel {
                    color: white;
                }
            }
        }
    }

    /*BUTTON END*/


    /*BUTTON FLOAT*/

    .buttonFloat{
        position: fixed;
        bottom: 285px;
        right: 25px;
        background: white;
        width: 600px;
        height: 120px;
        border-radius: 10px;
        border: 1px solid var(--border);
        overflow: hidden;
        z-index: 3;
        display: flex;
        overflow: hidden;



        .content{
            width:479px;
            display: flex;
            height: 120px;


            .icon {
                width: 120px;
                height: 120px;
                line-height: 120px;
                font-family: "Material Symbols Outlined";
                font-size: 4.5rem;
                font-weight: 200;
                text-align: center;
                color: var(--yellow);

                &:before{
                    content: attr(data-icon);
                }
            }

            .text{
                display: flex;
                flex-direction: column;
                justify-content: center;
                row-gap: 10px;

                .topic{
                    font-size: 2rem;
                }
                .value {
                    font-size: 1.25rem;
                }
            }
        }

        .button{
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border-left: 1px solid var(--border);
            font-size: 1.25rem;
            text-transform: uppercase;
            border-radius: 0;
            background: #eee;

            .label{
                color: var(--secondary)
            }

            .icon{
                color: var(--primary);
            }

            &:hover{
                cursor: pointer;
                background: var(--hover);
                border-left-color: var(--border) !important;

                .label{
                    color: black;
                }
            }
        }

        &.soundAlarm{
            bottom: 150px;
           /* .button{
                display: none;
            }*/
        }
    }
    /*BUTTON FLOAT END*/


    .notification{
        position: fixed;
        bottom: 285px;
        right: -600px;
        background: white;
        width: 600px;
        height: 120px;
        border-radius: 10px;
        border: 1px solid var(--border);
        overflow: hidden;
        z-index: 99999;
        display: flex;
        align-items: center;

        &.visible {
            animation: notificationIn .5s forwards;
        }
        &.hidden{
            animation: notificationOut .5s forwards;
        }

        .icon {
            width: 120px;
            height: 120px;
            line-height: 120px;
            font-family: "Material Symbols Outlined";
            font-size: 4.5rem;
            font-weight: 200;
            text-align: center;
            color: var(--yellow);

            &:before{
                content: attr(data-icon);
            }
        }

        .content{
            width: calc(100% - 240px);
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            height: 120px;
            padding: 0;
            justify-content: center;

            .topic{
                font-size: 2rem;
            }
            .value {
                font-size: 1.25rem;
            }
        }

        .button{
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            border-left: 1px solid var(--border);
            font-size: 1.25rem;
            text-transform: uppercase;
            border-radius: 0;
            background: #eee;

            .label{
                color: var(--secondary)
            }

            .icon{
                color: black;
            }

            &:hover{
                cursor: pointer;
                background: var(--hover);

                .label{
                    color: black;
                }
            }
        }

        &.disabled{
            .icon{
                color: #495057;
            }
            .content{
                color: #495057;
            }
            .button{
                .label{
                    color: #495057 !important;
                }
            }
        }

        &.danger{
            .icon{
                color: var(--red);
            }
            .content{
                color: var(--red);
            }
            .button{
                .label{
                    color: var(--red) !important;
                }
            }
        }

        &.warning{
            .icon{
                color: var(--yellow);
            }
            .content{
                color: var(--yellow);
            }
            .button{
                .label{
                    color: var(--yellow) !important;
                }
            }
        }

        &.success{
            .icon{
                color: var(--green);
            }
            .content{
                color: var(--green);
            }
            .button{
                .label{
                    color: var(--green) !important;
                }
            }
        }
    }



    .gatewayStatus{
        position: fixed;
        bottom: 130px;
        left: 0;
        width: 100%;
        height: 80px;
        border-top: 1px solid var(--border);
        overflow: hidden;
        z-index: 99999;
        padding: 0 80px 0 100px;



        &.disconnected{
            background: #fff5f5;
            color: var(--red);

            .icon{
                background: var(--red);
            }
        }

        &.connected{
            background: #f7fffc;
            color: var(--primary);

            .icon{
                background: var(--primary);
            }
        }

        .icon {
            position: absolute;
            top:0;
            left: 0;
            width: 80px;
            height: 80px;
            line-height: 80px;
            font-family: "Material Symbols Outlined";
            font-size: 4.5rem;
            font-weight: 200;
            text-align: center;
            color: white;

            &:before{
                content: attr(data-icon);
            }
        }

        .content{
            display: flex;
            justify-content: space-between;
            line-height: 80px;

            .message{
                font-size: 1.5rem;

            }
            .time {
                color: var(--fonts);
                font-size: 1.25rem;
                display: flex;
                column-gap: 5px;
                padding-right: 25px;

                .timeIcon{
                    font-family: "Material Symbols Outlined";
                    font-size: 2rem;
                    font-weight: 200;

                    &:before{
                        content: attr(data-icon);
                    }

                }
            }
        }

        .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background: white;
            border-left: 1px solid var(--border);
            font-family: "Material Symbols Outlined";
            font-size: 4rem;
            font-weight: 100;

            &:before{
                content: '\e5cd';
            }

            &:hover {
                cursor: pointer;
                background: var(--hover);
                color: black;
                border-color: var(--borderHover);
            }
        }
    }


    /*PANELS*/
    .panels{
        display: flex;
        column-gap: 15px;


        &.vertical{
            flex-direction: column;
            row-gap: 15px;
            height: 100%;
        }

        .panel{
            background: white;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid var(--border);
            height: 50%;

            .head{
                height: 100px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid var(--border);
                background: white;


                .title{
                    display: flex;
                    align-items: center;

                    .icon{
                        width: 99px;
                        height: 99px;
                        line-height: 100px;
                        font-family: "Material Symbols Outlined";
                        font-size: 3rem;
                        font-weight: 200;
                        text-align: center;
                        color: var(--secondary);
                        background: white;

                        &:before{
                            content: attr(data-icon);
                        }
                    }

                    .label{
                        font-size: 2rem;
                    }
                }
            }
            .body{
                height: 100%;
            }
        }
    }

    /*PANELS END*/


    .alert {
        min-height: 100px;
        border-radius: 15px;
        display: flex;

        color: white;
        border: 1px solid var(--border);
        overflow: hidden;
        align-items: center;
        column-gap: 10px;

        &.mini{
            min-height: 60px;
            padding-left: 70px;
            border-radius: 15px;

            .alertIcon {
                width: 60px;
                min-height: auto;
                height: 60px!important;
                font-size: 3rem;
                line-height: 60px;
            }
            .alertMessage {
                font-size: 1.5rem;
            }
        }



        .alertIconContainer{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            min-height: 100px;

            .icon{
                font-family: "Material Symbols Outlined";
                font-size: 4.5rem;
                font-weight: 200;
                text-align: center;

                &:before{
                    content: attr(data-icon);
                }
            }
        }

        .alertMessage{
            font-size: 1.5rem;
            padding-left: 15px;
        }

        &.warning{
            background: var(--yellow);

            .alertIcon{
                background: #b6750d;
                &:before{
                    content: '\f22f';
                }
            }
        }

        &.succes{
            background: var(--green);
            .alertIcon{
                background: #219830;
                &:before{
                    content: '\e876';
                }
            }
        }

        &.danger{
            background: var(--red);
            .alertIcon{
                background: #bf3028;
                &:before{
                    content: '\e5cd';
                }
            }
        }

        &.info{
            background: var(--blue);
            .alertIcon{
                background: #0057a4;
                &:before{
                    content: '\e88e';
                }
            }
        }

        &.noSensor{
            background: white;
            color: black;

            .alertIconContainer{
                background: var(--primary);
                color: white;
                border-color: var(--primary);
                .icon {
                    &:before{
                        content: '\e51f';
                    }
                }

            }
        }
    }


    /*LOADING*/
    .loading {
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon{
            font-family: "Material Symbols Outlined";
            font-size: 5rem;
            font-weight: 100;
            animation: rotation 2s linear infinite;
            color: var(--secondary);

            &:before{
                content: attr(data-icon);
            }
        }

        .label{
            font-weight: bold;
        }
    }
    /*LOADING END*/
}


@keyframes notificationIn {
    from {
        right: -600px;
        opacity: 0;
    }
    to {
        right: 25px;
        opacity: 1;
    }
}


@keyframes notificationOut {
    from {
        right: 25px;
        opacity: 1;
    }
    to {
        right: -600px;
        opacity: 0;
    }
}


@keyframes rotation {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}