:root{
    --theme--background-color: #169418;
    --theme--text-color: #000000;
    --theme--font: Arial, Helvetica, sans-serif;
}
html,body{
    padding: 0;
    margin: 0;
    font-family: var(--theme--font);
}

#template-container{
    width: 100%;
    height: minmax(100vh,auto);
    display: grid;
    grid-template-rows: 58px minmax(1080px,auto);
    grid-template-areas:
    'header'
    'main';
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;

}

#template-container #header {
    grid-area: header;
    grid-row: 1/1;

    #head{
        width: 100%;
        height: 58px;
        position: fixed;
        top: 0;
        z-index: 5;
        /* background-color: #169418; */
        display:grid;
        grid-template-columns: auto 200px;
        /* background: rgb(35,111,47); */
        /* background: linear-gradient(0deg, rgba(35,111,47,0.5234886190804446) 0%, rgba(15,191,20,1) 45%, rgba(25,145,10,0.764384977623862) 97%); */

        .menu,  .userbox{
            border: 1px solid #db6d0b;
        }

        .menu{
            padding: 0px 0px 0px 0px;
        }

        .menu nav #navbarSupportedContent .navbar-nav li.active a{
            color:#db6d0b;
        }

        .menu nav #navbarSupportedContent .navbar-nav li.active .dropdown-menu a{
            color:#000000;
        }
        .logon{
            width: 100%;
            height: 100%;
            align-items: center;
            justify-items: center;
            text-align: center;
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 40px 40px 40px 40px 40px;
            background-color: #169418;

            svg{
                fill:  #d0d3d4;
            }
            svg:hover{
                fill: #FFFFFF;
            }

            .mail{
                grid-column: 2/2;
            }

            .register{
                grid-column: 2/3;
            }

            .profile{
                grid-column: 3/3;
            }
            .settings{
                grid-column: 4/4;
            }
            .notifications{
                grid-column: 5/5;
            }
            .login{
                grid-column: 4/5;
            }
            .mail.active svg, .register.active svg, .profile.active svg, .settings.active svg, .notifications.active svg,.login.active svg{
                fill: #FFFFFF;
            }
            .mail.none, .register.none, .profile.none, .settings.none, .notifications.none,.login.none{
                display: none;
            }
        }

        .mail:hover, .register:hover, .profile:hover, .settings:hover, .notifications:hover,.login:hover{
            color: #FFFFFF;
        }
        .badge{
            margin: 0px;
            position: fixed;
            display: fixed;
            top: 2px;
        }
        .badge.none{
            display: none;
        }
        .register button, .login button{
            width: 70px;
            font-size: small;
        }
    }
}
#template-container #main {
    grid-area: main;
    grid-row: 2/2;
    background-color: #fffeee;

    #content{
        width: 100%;
        height: auto;
        background-color: #fffeee;
        position: relative;
    }

    #content .pageContent{
        padding: 2em 1em 6px 1em;
    }
}
#template-container #main #content .background, #template-container #main #content .worker, #template-container #main #content .bienetwork, #template-container #main #content .biehives-wrapper{
    position: absolute;
    margin-top: 0px;
}
#template-container #main #content .background, #template-container #main #content .bienetwork, #template-container #main #content .biehives-wrapper{
    min-height: 1080px;
    max-height: auto;
    width: 100%;
}
#template-container #main #content .background{
    z-index: 1;
    background-color: #000000;

    video{
        border: none;
        box-decoration-break: clone;
    }
}
#template-container #main #content .worker{
    z-index: 2;
    min-height: 1080px;
    width: 100%;
    overflow: hidden;

    .homie{
        width: 800px;
        height: 700px;
        border-radius: 50%;
        opacity: 0.5;
    }
}
#template-container #main #content .bienetwork{
    z-index: 3;
    opacity: 0.5;
    min-height: 1080px;
    width: 100%;
    border: 2px solid red;
    overflow: hidden !important;

    .bienetwork-nest{
        min-height: 1080px;
    }
}
#template-container #main #content .biehives-wrapper{
    z-index: 4;
}

div#foot.foot {
    width:100%;
    height: minmax(60px,auto);
    background-color: #169418;
    display: fixed;
    bottom: 0;
    padding: 2em;
    align-self: center;
    border: 1px solid red;
    text-align: center;
}

.biehives{
    width: 101%;
    height: 1080px;
    overflow: hidden;
    top:0px;
    left: 0px;
    position: absolute;
    /*z-index: 4;*/
}
.biehive-0,
.biehive-1,
.biehive-2,
.biehive-3,
.biehive-4,
.biehive-5,
.biehive-6,
.biehive-7,
.biehive-8,
.biehive-9,
.biehive-10,
.biehive-11,
.biehive-12,
.biehive-13{
    position: absolute;
    width: 190px;
}
.biehive-0{
    left: -120px;
}
.biehive-1{
    left: 26px;
    top:-80.5px;
}
.biehive-2{
    left: 172px;
}
.biehive-3{
    left: 318px;
    top:-81px;
}
.biehive-4{
    left: 464px;
}
.biehive-5{
    left: 610px;
    top:-80.5px;
}
.biehive-6{
    left: 756px;
}
.biehive-7{
    left: 902px;
    top:-80.5px;
}
.biehive-8{
    left: 1049px;
}
.biehive-9{
    left: 1196px;
    top:-81px;
}
.biehive-10{
    left: 1342px;
}
.biehive-11{
    left: 1488px;
    top:-80.5px;
}
.biehive-12{
    left: 1635px;
}
.biehive-13{
    left: 1780px;
    top:-80.5px;
}
.honeycomb{
    display:block;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 161px;
    top: 300px;
    left: 300px;
    margin:0;
    padding: 0;
    overflow: visible;
    background-color: transparent;
}
.honeycomb:hover > .pulse{
    opacity: 1;
    transition: 1s ease-in-out;
}
.honeycomb:hover > .pulse span{
    scale: .8;
    animation: heartbeatAnimate 4s ease-in-out infinite;
    animation-delay: calc(1s * var(--i));
}

.pod,.honey,.bie{
    position: absolute;
}
.bie{
    position: relative;
    left: 48px;
    width: 100px;
    height: 100px;
    top: -120px;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bie img{
    width: inherit;
    height: inherit;
}
.bie p{
    overflow-wrap: break-word;
    margin-top: 30px;
}

/*
.honeycomb:hover > .pulse + .pod + .honey + .bie{
    transition: 1s ease-in-out;
    width: 140px;
    height: 140px;
    top: -147px;
    left: 25px;
    background: #db6d0b;
}
*/
.honey{
    position: relative;
    height: 0px;
    width: 158px;
    border-bottom: 70px solid rgb(197, 182, 141);
    border-left:  40px solid transparent;
    border-right: 40px solid transparent;
    top: -71px;
    left: 17px;
}
/*
.honeycomb:hover > .pulse + .pod + .honey{
    width: 93px;
    border-bottom: 79px solid #db6d0b;
    border-left:  45px solid transparent;
    border-right: 45px solid transparent;
    top: -77px;
    left: 5px;
    transition: 1s ease-in-out;
    opacity: 1;
}
*/
.honey::before{
    content: '';
    height: 0px;
    width: 158px;
    border-top: 70px solid rgb(197, 182, 141);
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:69px;
    left: -40px;
}
/*
.honeycomb:hover > .pulse + .pod + .honey::before{
    width: 93px;
    border-top: 79px solid #db6d0b;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    top:77px;
    left: -45px;
    transition: 1s ease-in-out;
    opacity: 1;
}
*/
.pod{
    position: relative;
    height: 0px;
    width: 191px;
    border-bottom: 80px solid #fff988;
    border-left:  45px solid transparent;
    border-right: 45px solid transparent;
    top:1px;
    left: 2px;
    opacity: 0.5;
}

.honeycomb:hover > .pulse + .pod {
    opacity: 1;
}

.pod::before{
    content: '';
    height: 0px;
    width: 190px;
    border-top: 80px solid #fff988;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    position: absolute;
    top:80px;
    left: -45px;
}
.signinwith{
    border: 2px solid #FFFFFF;
    transition: 200ms ease-in-out;
    height: 44px;
}
.signinwith:hover{
    border: 2px solid #db6d0b;
}

main .content .pagecontent{
    padding: 1em 4em 1em 4em;
    align-items: center;
}
main .content .pagecontent #formsignup{
    margin: 1em 4em 1em 4em;
}


.withverifyfield .inputfield{
    width: 95%;
}

.withverifyfield .verifyfield{
    display: flexbox;
}

.withverifyfield .verifyfield .verifyinfo{
    width: 100%;
    padding: 6px;
    margin: 88% 0px 0px 0px;
    border: 0.1px dotted #cbd0d0;
    background: none;
    text-align: center;

    .unverify{
        fill: #db6d0b;
    }
    .verified{
        fill: #169418;
    }
}
.withverifyfield .verifyfield .verifyinfo.unverify{
    .unverify{
        display: block;
    }
    .verified{
        display: none;
    }
}
.withverifyfield .verifyfield .verifyinfo.verified{
    .unverify{
        display: none;
    }
    .verified{
        display: block;
    }
}

.otpmodal .resend:hover{
    font-weight: bolder;
}