/* Copyright (C) Omnivor, Inc - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * 
 * BY USING OR ACCESSING THIS SOFTWARE YOU AGREE AS FOLLOWS: 
 * 
 * THIS SOFTWARE IS PROVIDED BY OMNIVOR, INC. (“OMNIVOR”) ”AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL OMNIVOR BE LIABLE FOR ANY DIRECT, INDIRECT INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION: HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 * 
 * YOU MAY NOT COPY THIS FILE OR THE CONTENTS THEREOF, EXCEPT AS REASONABLY NECESSARY TO VIEW CONTENT PRESENTED TO YOU BY AN AUTHORIZED LICENSEE OF OMNIVOR FOR YOUR OWN PERSONAL AND NON-COMMERCIAL USE.
 * 
 * THIS SOFTWARE INCLUDES PROPRIETARY, TRADE SECRET-INFORMATION OF OMNIVOR. YOU AGREE NOT TO USE THIS SOFTWARE FOR THE PURPOSE OF DEVELOPING ANY PRODUCT OR SERVICE THAT COMPETES WITH THE SOFTWARE OR OMNIVOR PRODUCTS OR TECHNOLOGY.
 * 
 * 
 */
 
body {
    background: black;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: -1px 0px 0px 0px;
}

#labelWrapper {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.mdc-button {
    --mdc-shape-small: 10px;
}

.mdc-button .mdc-button__ripple {
    -webkit-mask-image: radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.mdc-button .mdc-button__label {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#startLabel {
    display: none;
    height: 78px;
    width: 328px;
    max-width: 90%;
    background: white;
    border-radius: 10px;
    padding: 17px 27px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
}

#roomSettingsBackground {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

#roomSettingsDiv {
    position: absolute;
    display: none;
    flex-direction: column;
    bottom: 48px;
    width: 294px;
    max-width: 80%;
}

.roomSettingsInputWrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 48px;
    width: 100%;
}

.roomSettingsInputWrapper img {
    position: absolute;
    height: 48px;
    object-fit: contain;
}

.roomSettingsInput {
    background: white;
    opacity: 0.9;
    height: 100%;
    margin: 0;
    border-radius: 10px;
    border: none;
    pointer-events: auto;
    padding: 0 12px 0 40px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.87);
}

.roomSettingsInput::placeholder {
    color: rgba(0, 0, 0, 0.87);
}

#joinRoomInputWrapper {
    margin-bottom: 24px;
}

#displayNameInputWrapper {
    margin-bottom: 40px;
}

#joinRoomInputIcon {
    width: 16px;
    margin-left: 15px;
}

#displayNameInputIcon {
    width: 12px;
    margin-left: 17px;
}

#joinRoomButton {
    opacity: 0.9;
    height: 50px;
    margin: 0;
    --mdc-theme-primary: #10141A;
    --mdc-theme-on-primary: rgba(255, 255, 255, 0.87);
}

#joinRoomButtonLabelContainer {
    display: flex;
    gap: 9px;
}

#joinRoomButtonIcon {
    filter: invert(1);
    width: 15px;
    object-fit: contain;
}

#roomSettingsLogo {
    width: 100%;
    height: 48px;
    margin-bottom: 94px;
}

.logoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.formaLogo {
    height: 100%;
    object-fit: contain;
}

#inCallBottomBar {
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 64px;
    background: linear-gradient(#00000000, #00000020);
}

#inCallLogo {
    width: 100%;
    height: 24px;
    margin-bottom: 19px;
}

.liveIcon {
    position: absolute;
    left: 0;
    top: 0;
    margin-left: 24px;
    margin-top: 16px;
}

#liveIconWhite {
    display: none;
}

#liveIconRed {
    display: none;
}

#inCallControls {
    position: absolute;
    display: none;
    flex-direction: column;
    right: 0;
    top: 0;
    margin-top: 24px;
    margin-right: 15px;
    width: 48px;
    background-color: rgba(128, 128, 128, .25);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(128, 128, 128, 0.1);
    border-radius: 10px;
}

.inCallButton {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    --mdc-shape-small: 48px;
    --mdc-theme-primary: white;
    pointer-events: auto;
}

.inCallButton .mdc-button__icon {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    object-fit: contain;
}

#hangupButtonIcon {
    width: 30px;
    height: 30px;
}

#freContainer {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: white;
    width: 328px;
    max-width: 90%;
    height: 270px;
    margin-top: -33px;
    padding: 0;
    --mdc-theme-primary: black;
}

#freInfoButton {
    display: flex;
    top: 0;
    right: 0;
    --mdc-theme-primary: black;
}

#freInfoButton img {
    filter: invert(1);
}

.freCornerButton {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    height: 50px;
    pointer-events: auto;
}

.freCornerButton .mdc-button__label {
    font-weight: normal;
}

#freCloseButton {
    right: unset;
    left: 0;
}

#freInfoMenuAnchor {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    margin-top: 2px;
    margin-right: 2px;
    pointer-events: auto;
}

#freInfoMenu .mdc-list-item {
    height: 54px;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    align-items: center;
}

.frePage {
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.freContent {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0px 30px 50px 30px;
}

.freTitle {
    font-size: 26px;
    font-weight: bold;
    font-stretch: condensed;
    color: black;
    line-height: 100px;
    vertical-align: middle;
}

.freBody {
    font-size: 16px;
    color: black;
}

#fre0 {
    text-align: center;
}

#fre1 {
    text-align: left;
}

#fre1 .freBody {
    padding-left: 10px;
    margin: 0px;
}

.unselectable {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
}

#cookie-message-view {
    position: absolute;
    display: none;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
}

#cookie-message-wrapper {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    bottom: 0;
    max-width: calc(100% - 32px);
    margin-bottom: 16px;
    border-radius: 10px;
    background: rgb(42, 157, 143);
}

#cookie-message-label {
    font-size: 14pt;
    color: white;
    margin: 16px;
    text-align: center;
}

#cookie-message-label a {
    color: white;
}

#cookie-message-button {
    margin-bottom: 16px;
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: black;
}

#cookie-message-view button > * {
    /* Disable clicks on children of our buttons to ensure
       clicks get attributed to the correct element */
    pointer-events: none;
}