@font-face {
    font-family: 'redMeetings';
    src: url('~/Fonts/Museo300-Regular-webfont.eot');
    src: url('~/Fonts/Museo300-Regular-webfont?#iefix') format('embedded-opentype'), url('~/Fonts/Museo300-Regular-webfont.svg#Museo300-Regular-webfont') format('svg'), url('../fonts/Museo300-Regular-webfont.woff') format('woff'), url('../fonts/Museo300-Regular-webfont.ttf') format('truetype');
}


@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

* {
    margin: 0px;
    padding: 0px;
}


body {
    font-family: redMeetings;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    font-family: redMeetings;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-size: 100% 100%;
    -webkit-text-size-adjust: none;
    width: 100%;
    height: 100%;
}




@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.wave {
}

    .wave:nth-of-type(2) {
        bottom: -1.25em;
        animation: wave 18s linear reverse infinite;
        opacity: 0.8;
    }

    .wave:nth-of-type(3) {
        bottom: -2.5em;
        animation: wave 20s -1s reverse infinite;
        opacity: 0.9;
    }

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}



/* Responsive: Portrait tablets and up */
@media screen {
    .jumbotron-rm {
        margin-top: 10px;
    }

    .body-content {
        padding: 0;
    }
}

@media (max-width: 600px) {
    #navbarSupportedContent {
        margin-left: 10px;
        margin-top: 20px;
    }
}

.k-textarea, .k-textbox {
    font-family: Consolas, monospace;
}

.jumbotron-rm {
    /*display: flex;*/
    min-height: 100px;
    background-color: #A02B3D;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
    margin-left: 3px;
    margin-right: 5px;
}

    .jumbotron-rm h1 {
        line-height: 1;
        color: inherit;
    }

    .jumbotron-rm p {
        line-height: 1.4;
        column-gap: 40px;
    }

.container .jumbotron-rm {
    border-radius: 6px;
}

.bg-color {
    background-color: #A02B3D !important;
}


.box-4 {
    height: 300px;
    position: relative;
    border-radius: 10px;
    /* box-shadow: 0px 1px 6px rgba(0,0,0,0.5);
    background: #FFFFFF;*/
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    margin: 5px;
    border: 1px solid;
    border-color: white;
    box-shadow: 4px 2px 6px -2px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    background: rgba(255, 255, 255, 0.30)
}



.login-box {
    height: 350px;
    /*position: relative;*/
    border-radius: 5px;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.5);
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
    margin: 5px;
}

.login-box2 {
    height: 170px;
    /*position: relative;*/
    border-radius: 5px;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.5);
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
    margin: 5px;
}

.link-button {
    height: 34px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #A02B3D;
    box-shadow: 0px 2px 4px gray;
    border: 1px solid #C1D72F;
    margin: 0 auto;
}

    .link-button:hover {
        background-color: #A02B3D;
        text-emphasis-color: #C1D72F;
        color: #C1D72F;
        opacity: 0.8;
    }

    .link-button > a {
        display: inline-table;
        cursor: pointer;
        text-decoration: none;
        height: 100%;
        width: 100%;
    }

        .link-button > a > span {
            margin: 0 auto;
            display: table-cell;
            vertical-align: middle;
            color: #f7f8f8;
            font-size: 15px;
            text-align: center;
        }



.header-green {
    color: #C1D72F;
}

.body-table {
    color: white;
}

.text-table-td {
    height: 10px;
    font-size: xx-small;
}

#div-homepage-info {
    display: flex;
    width: 100%;
    align-items: flex-end;
    margin-top: 20px;
    margin-bottom: 20px;
}

/*.div-homepage-info-left {
    position: relative;
    float: left;
}

.div-homepage-info-right {
    text-align: right;*/
/*width: 222px;*/
/*float: left;
    margin-left: 10px;
}*/

.button-calendar {
    color: #A02B3D;
    padding: 5px;
    margin-bottom: 30px;
}

.button-create {
    color: #A02B3D;
    /*padding: 5px;
    margin-bottom: 30px;*/
}

.button-photo {
    /*background-color: #EEEEEE;*/
    color: #A02B3D;
    /*padding: 5px;*/
    width: 136px;
}

.button-telerik-link {
    background-color: #A02B3D;
    color: white;
    padding: 5px;
}

.small-box-button {
    height: 40px;
    border-radius: 8px;
    /*box-shadow: 0px 1px 6px rgba(0,0,0,0.5);*/
    /*background: #FFFFFF;*/
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    touch-action: manipulation;
    border: 1px solid;
    border-color: white;
    box-shadow: 4px 2px 6px -2px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    background: rgba(255, 255, 255, 0.30)
}

    .small-box-button > span {
        font-size: 16px;
        font-weight: normal;
    }

    .small-box-button > a:link {
        text-decoration: none;
        font-size: 16px;
        font-weight: normal;
        color: #333333;
    }

    .small-box-button:hover {
        background: #EEEEEE;
    }

.small-box-info {
    height: 40px;
    border-radius: 8px;
    /*box-shadow: 0px 1px 6px rgba(0,0,0,0.5);
    color: #0D76FD;
    background: #FFFFFF;*/
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: manipulation;
    border: 1px solid;
    border-color: white;
    box-shadow: 4px 2px 6px -2px rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    background: rgba(255, 255, 255, 0.30)
}

    .small-box-info > span {
        font-size: 13px;
        font-weight: normal;
    }

.title-A {
    margin-top: 0px;
    font-size: 30px;
}

.telerik-grid-header {
    background-color: #A02B3D;
    color: #F5F5F5;
    cursor: pointer;
}

.telerik-modal {
    font-weight: bold;
}

.photo-participant-box {
    /*box-shadow: 0px 1px 6px rgba(0,0,0,0.5);*/
    height: 136px;
    width: 136px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
}

.photo-meetingroom-box {
    border: 1px solid #CCCCCC;
    width: 300px;
    height: 200px;
}

.photo-logo-box {
    border: 1px solid #CCCCCC;
    width: 300px;
    height: 80px;
}

.div-disabled {
    pointer-events: none;
    opacity: 0.6;
}

#link-login {
    color: #A02B3D;
    font-weight: bold;
    text-decoration: none;
}

.image-logo {
    position: fixed;
    top: 5px;
    margin-left: -20px;
    display: inline;
    width: 120px;
    height: 120px;
}

.send-invitations-button {
    width: 100%;
    height: 60px;
    border: 1px solid #CCCCCC;
}



/* LIQUID GLASS STYLES */

.liquidGlass-wrapper {
    position: relative;
    display: flex;
    font-weight: 600;
    overflow: hidden;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    overflow: hidden;
}

.liquidGlass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.50);
}

.liquidGlass-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-text {
    z-index: 3;
    font-size: 2rem;
    color: black;
}

/* OTHER STYLES */

body {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/
    background-size: 500px;
    font-family: sans-serif;
    font-weight: 300;
    animation: moveBackground 60s linear infinite;
}



a {
    text-decoration: none;
}

.wrapper {
    display: flex;
    gap: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}


.dock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 2rem;
    padding: 0.6rem;
}

    /* NOTE: You need to duplicate styles onto the child `div`s (`> div`) so that the glass wrapper and all the layers are affected in the same way.  */
    .dock,
    .dock > div {
        border-radius: 2rem;
    }

        .dock:hover {
            padding: 0.8rem;
            border-radius: 2.5rem;
        }

            .dock:hover > div {
                border-radius: 2.5rem;
            }

        .dock img {
            width: 75px;
            padding: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
            cursor: pointer;
        }

            .dock img:hover {
                transform: scale(0.95);
                transform-origin: center center;
            }

@keyframes moveBackground {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 0% -1500%;
    }

}


html[data-env="app"] #topMenu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0px;
}

html[data-env="web"] #topMenu {
    display: block;
}

html[data-env="web"] #bottomBar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0px;
    min-width: 100vw;
}

.navbarB {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    filter: none !important;
}

html[data-env="app"] #bottomBar {
    display: block;
}

html[data-env="app"] body {
    display: block !important;
    margin-bottom: 0 !important;
    /*height: 100vh !important;*/
}

html[data-env="app"] main {
    margin: 0 !important;
    padding: 0 !important;
    /*min-height: 100vh;*/
    padding-bottom: 0 !important;
    
    min-height: auto !important
}



html[data-env="app"] #containerM {
    margin-top: 0 !important;
}

html[data-env="app"] .content2 {
    margin-top: -20px !important;
}

html[data-env="app"] #containerM {
    margin-top: 0 !important;
    min-height: calc(var(--app-height) - 66px); /* bottom bar */
}


/* Espaço visual entre topMenu e conteúdo (só na web) */
html[data-env="web"] #topMenu {
    margin-bottom: 16px; /* ajusta ao teu gosto */
}


html[data-env="web"] main {
    padding-top: 16px;
}


html[data-env="web"] main,
html[data-env="web"] body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
}

html[data-env="web"] #containerM {
    margin-top: 10px !important;
    min-height: calc(100vh - 76px); /* altura da top bar */
    max-height: calc(100vh - 76px); /* altura da top bar */
    margin-bottom: 10px;
}


/* Navbar fixa até ao fundo REAL do ecrã */
html[data-env="app"] .navbarB {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
}


html[data-env="app"] #bottomBar a {
    height: 60px;
    width: 33.333%
}



.small-box-button,
.small-box-info {
    width: 100%;
    box-sizing: border-box;
}

/* MOBILE: nada de padding extra */
.footer-info {
    padding-left: 0;
    padding-right: 0;
}

/* DESKTOP */
/*@media (min-width: 768px) {*/

    /* espaço entre os blocos */
    /*.small-box-button,
    .small-box-info {
        padding-left: 10px;
        padding-right: 10px;
    }*/

    /* compensação controlada da row */
    /*.footer-info {
        padding-left: 8px;
        padding-right: 8px;
    }*/

    /* limpa extremos */
    /*.col-md-4:first-child .small-box-button,
    .col-md-4:first-child .small-box-info {
        padding-left: 0;
    }

    .col-md-4:last-child .small-box-button,
    .col-md-4:last-child .small-box-info {
        padding-right: 0;
    }
}*/

.small-box-button,
.small-box-info {
    margin: 4px;
    width: calc(100% - 8px);
    box-sizing: border-box;
}