@charset "UTF-8";
:root{
    --zeta-font-size:1rem;
    --sidenav:300px;
}

h1,h2,h3{
    font-weight:300;
    color:var(--dark-color);
}

h4,h5{
    font-weight:400;
    color:var(--dark-color);
}

p{
    font-weight:350;

    &.min{
        font-size:.9rem;
    }

    &:last-child{
        margin-bottom:0;
    }

    & > a{
        font-weight:450;
        color:#495057;
        text-decoration:none;
    }
}

b{
    font-weight:400;
}

ul{
    --type:square;
    --marker-color:var(--primary-color);
    --marker-size:1.5rem;

    list-style-type:var(--type);

    & li{
        margin:.5rem 0;
        font-weight:350;
        color:var(--zeta-theme-color-text);

        &::marker{
            color:var(--marker-color);
            font-size:var(--marker-size);
        }
    }
}

figure{
    margin:0;
}

form{
    --border-color:var(--light-color);
    --border-radius:8px;

    & fieldset{
        padding:1rem 0;

        &.form-control{
            margin:0;
            padding:1rem;
            border:1px solid var(--border-color);
            border-bottom:0;

            &:first-child{
                border-top-left-radius:var(--border-radius);
                border-top-right-radius:var(--border-radius);
            }

            &.last-child{
                border-bottom-left-radius:var(--border-radius);
                border-bottom-right-radius:var(--border-radius);
                border-bottom:1px solid var(--border-color);
            }

            & > label{
                margin:0;
                display:block;
                font-size:.8rem;
                font-weight:400;
                color:var(--zeta-theme-color-text);
                text-transform:capitalize;
            }

            & > input,
            & > textarea,
            & > select{
                padding:0;
                height:calc(1.5em + 0.75rem + 2px);
                background-color:#fff;
                border-radius:0;
                border:0;
                font-size:1.25rem;
                font-weight:400;
                color:#495057;

                &::placeholder{
                    color:#6c757d;
                }
            }

            & > select{
                -webkit-appearance:none;
                -moz-appearance:none;
                appearance:none;
            }

            & > textarea{
                padding:.75rem 0;
                height:150px;
                resize:none;
            }

            &:has(select){
                position:relative;

                &::before{
                    content:"\f2f3";
                    height:100%;
                    align-content:center;
                    font-family:"uicons-regular-rounded" !important;
                    font-size:1.5rem;
                    text-align:center;
                    color:#495057;
                    position:absolute;
                    top:0;
                    right:1rem;
                }
            }

            &.error{
                & > label{
                    color:darkred;
                }
            }
        }
    }

    & .form-group{
        & fieldset{
            &.form-control{
                border-radius:0;
                border-right:0;

                &:last-child{
                    border-right:1px solid var(--border-color);
                }
            }
        }

        &:first-of-type{
            & fieldset{
                &.form-control{
                    &:first-child{
                        border-top-left-radius:var(--border-radius);
                    }

                    &:last-child{
                        border-top-right-radius:var(--border-radius);
                    }
                }
            }
        }
    }
}

dialog{
    padding:2rem;
    width:60vw;
    max-height:100vh;
    border:0;
    background-color:var(--background-color);
    outline:0;

    &[open]{
        animation:fadeIn 1s ease normal;
    }
}

.button{
    --alpha:0.85;

    padding:0.375rem 0.75rem;
    height:60px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:400;
    border-radius:5px;
    text-decoration:none;
    transition:all 0.3s ease-in-out;

    & > span{
        margin-left:.25rem;
        line-height:0;
        font-size:.8rem;
    }

    &.icon{
        width:50px;
        height:50px;

        & > span{
            font-size:1.25rem;
        }
    }

    &.primary{
        background-color:rgba(var(--primary-color-rgb),var(--alpha));
        color:#fff;
    }

    &:hover,
    &:focus,
    &:active{
        --alpha:1;
    }
}

.row,
.nav-wrapper
.container{
    margin-left:auto;
    margin-right:auto;
    max-width:1400px;
}

.background{
    &.image{
        height:100%;
        overflow:hidden;
        position:relative;

        & > img{
            object-fit:cover;
            object-position:center;
            width:100%;
            height:100%;
        }
    }
}

.text-align{
    &.right{
        text-align:right;
    }

    &.center{
        text-align:center;
    }
}

.tooltip{
    position:relative;

    &::before,
    &::after{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        pointer-events:none;
        visibility:hidden;
        opacity:0;
        transition:0.3s ease-in-out;
    }

    &::before{
        content:attr(data-title);
        width:max-content;
        max-width:250px;
        padding:.5rem 1rem;
        display:block;
        border-radius:5px;
        background-color:rgba(var(--dark-color-rgb),0.85);
        color:#fff;
        text-transform:capitalize;
        bottom:calc(100% + .5rem);
        box-shadow:0 0 10px rgba(0,0,0,0.1);
        z-index:var(--zeta-index-2);
    }

    &::after{
        content:"";
        width:0;
        height:0;
        border-left:.5rem solid transparent;
        border-right:.5rem solid transparent;
        border-top:.5rem solid rgba(var(--dark-color-rgb),0.85);
        bottom:100%;
        z-index:var(--zeta-index-2);
    }

    &:hover,
    &:focus,
    &:active{
        &::before,
        &::after{
            visibility:visible;
            opacity:1;
        }
    }
}

@media(max-width:991px){
    dialog{
        width:80vw;
    }
}

@media(max-width:767px){
    form{
        & .form-group{
            & fieldset{
                &.form-control{
                    border-right:1px solid var(--border-color);
                }
            }

            &:first-of-type{
                & fieldset{
                    &.form-control{
                        &:first-child{
                            border-top-left-radius:var(--border-radius);
                            border-top-right-radius:var(--border-radius);
                        }

                        &:last-child{
                            border-top-right-radius:0;
                        }
                    }
                }
            }
        }
    }
}

@media(max-width:575px){
    dialog{
        width:90vw;
    }
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}