@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* === Rooms in-Hub modernise — slice 1 (2026-07-22): Lato + type/spacing/cards. Button COLOURS unchanged. === */
.fregaZoomCallMenu, .zoomtitle, .zoomtitlesmall, .dropbtn, .dropbtn2, .dropdown-content a,
#zocmImpFaq, #zocmImp, #zocmFaq, .zReadFAQ, .zResultHead, .zcHead, .zResultMsg,
.zResultItem, .zmTopic, .zmTime, .zmDelete, .zmEdit, .zmInvite, .zmView,
.zProcess, .zProcess2, .zCallNow, .zCallNow2, .zCreateMeeting, .hubSubmit, .zcoLabel {
    font-family: Lato, "Segoe UI", system-ui, sans-serif;
}

object body {
    padding-top: 0px;
}

.fregaZoomCallMenu {
    background: #052f4f;
    padding: 6px 10px;
    width: 90%;
    left: 0px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    z-index: 999;
    font-family: Lato, sans-serif;
    width: 100%;
    position:relative;
}

#zmmtg-root {
    top: 42px !important;
}

.meeting-client {
    top: 42px !important;
}

.meeting-client-inner {
    top: 42px !important;
}

/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 5px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top:3px;
    display:inline-block;
}

    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

.dropbtn2 {
    background-color: #808080;
    color: white;
    padding: 5px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-top: 3px;
    display: inline-block;
}

    /* Dropdown button on hover & focus */
    .dropbtn2:hover, .dropbtn2:focus {
        background-color: #656565;
    }

/* The container <div> - needed to position the dropdown content */
.zoomDropdown {
    position: relative;
    display: inline-block;
    margin-left: auto;
    right: 3px;
}

.zoomtitle {
    position: relative;
    display: inline-block;
    margin-left: 20px;
    font-weight: bold;
    font-size: 18px;
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
    white-space: nowrap;
    letter-spacing:.2px;
    color:#fff;
    
}

.zoomlogodiv {
    position: relative;
    display: inline-block;
    float: none;
    flex: 0 0 auto;
    line-height: 0;
}

/* Header lockup fits one row on phones: the FregaRooms wordmark is ~212px wide
   and pushed the float:right Menu button onto a 2nd row. The parent is now flex
   (child floats are ignored), and the oversized logo shrinks on narrow screens
   so logo + title + Menu stay on one line. Verified live 360px + 900px. (ROOMS-01, slice c.) */
@media (max-width: 480px) {
    .zoomLogo { height: 30px !important; }
    /* Menu / User Guide collapse to compact icon buttons on phones so the title
       is never truncated (owner 2026-07-22). Button colours unchanged. */
    .dropbtn, .dropbtn2 {
        font-size: 0;
        padding: 7px 11px;
        line-height: 1;
        border-radius: 6px;
    }
        .dropbtn::before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            content: "\f0c9";
            font-size: 17px;
        }
        .dropbtn2::before {
            font-family: "Font Awesome 5 Pro";
            font-weight: 300;
            content: "\f02d";
            font-size: 17px;
        }
}

.hubSubmit {
    display: inline-block;
    padding: 4px 7px;
    color: #fff;
    background: #80c1f7;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #80c1f7;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    border: 1px solid #e3e9ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(5,47,79,0.16);
    overflow: hidden;
    margin-top: 6px;
    padding: 6px;
    z-index: 1;
    right: 3px;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        font-family: Lato, sans-serif;
        color: #033257;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 12px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 7px;
        cursor:pointer;
    }
        .dropdown-content a i {
            color: #052f4f;
            font-style:normal;
            width: 18px;
            text-align: center;
            margin-right:0;
            font-size: 15px;
        }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #f2f7fb;
            color: #033257;
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

#zocmImpFaq {
    display:inline-block;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #dbe7f1;
    border-radius: 8px;
    width: 100%;
    margin-top: 10px;
}

#zocmImp {
    display: inline-block;
    padding: 7px 10px;
}

#zocmFaq {
    display: inline-block;
    color: #fff;
    background: #575858;
    text-align: center;
    padding: 5px 20px;
    border-radius: 2px;
    margin: 0px 10px;
    cursor: pointer;
    font-weight:normal;
    font-size:16px;
}

    #zocmFaq:hover {
        background: #808080;
    }
#zocmYt {
    display: inline-block;
    margin: 0px 7px;
}

    #zocmYt img {
        height: 34px;
        cursor:pointer;
    }

.zResultHead {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    padding: 20px 0px 5px 10px;
    width: 100%;
    background: #fff;
    font-family: Lato, sans-serif;
    position:relative;
    margin-bottom:10px;
/*    border: 1px solid #b5c6d4;*/
}
    .zResultHead::before {
        bottom: 0;
        content: "";
        height: 3px;
        left: 20px;
        position: absolute;
        width: 48px;
        background: #052f4f;
        border-radius: 2px;
    }
.zResultContain {
    margin-top: 4px;
    min-height: 380px;
    max-height: 500px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /*white-space: nowrap;*/
   /* border-top: 1px solid #b5c6d4;
    border-bottom: 1px solid #b5c6d4;
    border-left: 1px solid rgba(181, 198, 212, 0.47);
    border-right: 1px solid rgba(181, 198, 212, 0.47);*/
    padding-right: 5px;
}

/* history + manage meeting-list wrapper is a naked Bootstrap .row (margin: 0 -15px)
   with no padded .container parent to absorb its negative gutters, so it overflows
   the panel by 15px -> a horizontal scrollbar on the in-Hub History/Manage panels.
   Neutralise the stray row gutters. Verified live on real data (20 cards): body
   scrollWidth 415 -> 400 at a 400px panel width. (ROOMS-01, slice b.) */
#meetinglist.row {
    margin-left: 0;
    margin-right: 0;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.zResultItem {
    
    display: inline-block;
    width: 100%;
    border: 1px solid #e3e9ef;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 1px 3px rgba(5,47,79,0.06);
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
    .zResultItem:hover {
        background: #f2f7fb;
        border-color: #cdd9e5;
        box-shadow: 0 3px 8px rgba(5,47,79,0.12);
    }

.zFootContain {
    padding: 10px 0px;
    width: 100%;
}

.zReadFAQ {
    width: 100%;
    font-style: italic;
    font-size: 16px;
    color: #444444;
}

.zCreateMeeting {
    margin: 10px 10px 0px 10px;
    color: #fff;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    background: #e75524;
    border-radius: 3px;
    cursor: pointer;
}

    .zCreateMeeting:hover {
        background: #c74114;
    }

.zResultMsg {
    text-align: center;
    font-weight: bold;
    color: #1a3c58;
}

.zSpace {
    margin-top: 10px;    
    width: 100%;
    height: 5px;
}
    .zSpace hr {
        border-top: 3px solid #1a3c58;
    }
.zmTopic{
    width:100%;
    font-size:15px;
    font-weight:bold;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin-bottom:2px;
    text-align:left;
}
.zmTime {
    text-align: left;
    font-size: 13px;
    font-style: italic;
    color: #5a6b7a;
}
.zmDelete {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    background: #9f9f9f;
    border-radius: 2px;
    cursor: pointer;
    min-width:62px;
    display:inline-block;
}
    .zmDelete:hover {
        background: #808080;
    }

.zmEdit {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    background: #69ace1;
    border-radius: 2px;
    cursor: pointer;
    min-width: 62px;
}
        .zmEdit:hover {
            background: #5a90bb;
        }
.zmInvite {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    background: #5089b7;
    border-radius: 2px;
    cursor: pointer;
    min-width: 62px;
}
    .zmInvite:hover {
        background: #3b6181;
    }

.zmView {
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-size: 16px;
    background: #80afb6;
    border-radius: 2px;
    cursor: pointer;
    min-width: 62px;
}

    .zmView:hover {
        background: #5e7e83;
    }

.zSearchFrm .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.zSearchFrm .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #ccc;
    border-radius: 0px;
    background: #ebf4f7;
}
.zSearchFrm .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #3496db;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor:pointer;
}
.zMenuRight{
    float:right;
    display:inline-block;
}


.zcOptionCont {
    display: inline-block;
    width: 100%;
}

.zcoTitle {
    display: inline-block;
    width: 76%;
}

.zcoChk {
    display: inline-block;
    width: 20%;
}

.zcoLabel {
    font-size: 16px;
    font-family: Lato, sans-serif;
}

#formZoomMeeting .form-group {
    margin-left: -10px;
    margin-right: -10px;
}

.fgGrey {
    background: #ebebeb;
    padding: 5px;
    border:1px solid #95aec3;
    cursor:pointer;
}
.fgGrey:hover {
    background: #d9e9f8;
    border: 1px solid #759bbb;
}
.fgBlue {
    background: #dff1fa;
    padding: 5px;
    border: 1px solid #95aec3;
}

.zcHead {
    font-size: 20px;
    color: #04406f;
    padding: 10px 5px 20px 5px;
}

#zoomMeetingTime {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 20px 5px 5px 20px;
}

.zProcess {
    margin-top: 5px;
    padding: 8px;
    background: #e75524;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

    .zProcess:hover {
        background: #fa763d;
    }
.zProcess2 {
    margin-top: 5px;
    padding: 8px;
    background: #052f4f;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

    .zProcess2:hover {
        background: #084370;
    }

.zCallNow {
    margin-top: 5px;
    padding: 8px;
    background: #3ac718;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

    .zCallNow:hover {
        background: #76e123;
    }
.zCallNow2 {
    margin-top: 5px;
    padding: 8px;
    background: #3498DB;
    color: #fff;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

    .zCallNow2:hover {
        background: #3da9f1;
    }

.zInviteResend {
    color: #fff;
    font-style: italic;
    cursor: pointer;
    font-size: 12px;
    display: inline-block;
    margin: 0px 3px;
    background: #5089b7;
    padding:5px;
    text-align: center;
    border-radius: 2px;    
}
    .zInviteResend i {
        font-size: 18px;
    }
    .zInviteResend:hover {
        background: #3b6181;
    }
.zInviteDelete {
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    margin: 0px 3px;
    background: #e10404;
    padding: 5px;
    text-align: center;
    border-radius: 2px;
    min-width:34px;
    display:inline-block;
}
    .zInviteDelete:hover {
        background: #980101;
    }
.ziActionContain{
    text-align: right;
    padding:5px;
}
.ziMsg{
    padding-top:3px;
    font-size:12px;
    text-align:left;
    font-style:italic;
}

#zoom_InviteeTitle{
    font-size:16px;
    font-weight:bold;
}
.zmChange{
    text-decoration:underline;
    font-style:italic;
    color:#125471;
    cursor:pointer;
}
.zmChange:hover {
    color: #1d7faa;
}

#zeSearchResult {
    display: none;
}

#zesrTitle {
    font-size: 18px;
    font-weight: bold;
}

#zesrList {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #b5c6d4;
}

    #zesrList ul {
        display: inline-block;
        list-style: outside none none;
        margin-bottom: 0;
        width: 100%;
        background: #fff;
        padding: 0px;
    }

    #zesrList li {
        display: block;
        position: relative;
        width: 100%;
        cursor: pointer;
        margin-top: 5px;
    }

        #zesrList li:hover {
            background: #e4edf7;
        }

.zeTime {
    display: inline-block;
    width: 10%;
    min-width: 52px;
    overflow: hidden;
    white-space: nowrap;
}

.zeTitle {
    display: inline-block;
    width: 35%;
    min-width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: underline;
    color: #0132a2;
    font-weight: bold;
}

.zeDescrip {
    display: inline-block;
    width: 52%;
    min-width: 251px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


#zoomEventPopup {
    display: none;
    background: #fff;
    padding: 10px;
    max-width: 292px;
    position: fixed;
    top: 10%;
    left: calc(50% - (292px / 2));
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.39);
    z-index: 3;
}
.zoomtitlesmall {
    position: relative;
    display: inline-block;
    margin-left: 20px;
    font-weight: bold;
    font-size: 16px;
    float: left;
    margin-top: 5px;
    color: #fff;
}
#zepDate {
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    color: #444444;
}

#zepTitle {
    display:inline-block;
    width:100%;
    padding:10px 0px;
    font-weight:bold;
    font-size:18px;
    font-style:italic;
    text-align:left;
}
#zepDescrip{
    height:111px;
    display:inline-block;
    width:100%;
    text-overflow:ellipsis;
    overflow:hidden;
}
#zepRegCallFoll {
    display: inline-block;
    width: 100%;
    background: #1d7faa;
    color: #fff;
    min-height: 30px;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}
    #zepRegCallFoll:hover {
        background: #2d97c6;
        color: #ace1f8;
    }

#zepClose {
    color: #fff;
    position: absolute;
    right: 12px;
    top: 9px;
    cursor: pointer;
}
.zeSearchBtn{
    cursor:pointer;
}
    .zeSearchBtn:hover {
        background-color: #abdaf2;
        border: 1px solid #80afc7;
    }
.flipText {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#scStartNow {
    margin-top: 5px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 23px;
    height: 12px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 1px;
        bottom: 1px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #108708;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 12px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.time_in_past {
    display: none;
}

.hubSubmit:hover {
    color: #fff;
    background: #3b9ff3;
    border: 1px solid #1f83d7;
}

object {
    height: 100% !important;
}

#newmeeting1 .datepicker {
    width: 100%;
}

    #newmeeting1 .datepicker > .datepicker_inner_container > .datepicker_calendar {
        width: 80%;
    }

        #newmeeting1 .datepicker > .datepicker_inner_container > .datepicker_calendar > .datepicker_table > tbody > tr > th {
            width: 14%;
        }

#newmeeting1 .datepicker_table {
    width: 100%;
}

#newmeeting1 .datepicker_timelist {
    width: 20%;
}

#newmeeting1 .datepicker > .datepicker_header {
    font-size: 11pt;
}

/* === Rooms Schedule calendar restyle - slice 2 (2026-07-22): scoped override of simple-dtpicker under #newmeeting1 (Rooms-only). Lato + navy selection; Confirm/Create buttons (.zProcess orange) untouched. === */
#newmeeting1 .datepicker {
    font-family: Lato, "Segoe UI", system-ui, sans-serif;
    border: 1px solid #dbe3ea;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(5,47,79,0.08);
    overflow: hidden;
}
#newmeeting1 .datepicker > .datepicker_inner_container {
    background-color: #fff;
    border-color: #dbe3ea;
    box-shadow: none;
}
#newmeeting1 .datepicker > .datepicker_header {
    background-color: #052f4f;
    color: #fff;
    padding: 9px 5px;
    min-height: 38px;
}
#newmeeting1 .datepicker > .datepicker_header > a {
    color: #cfe0ee;
}
#newmeeting1 .datepicker > .datepicker_header > a:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.16);
}
#newmeeting1 .datepicker > .datepicker_header > a:active {
    color: #fff;
    background-color: rgba(255,255,255,0.30);
}
#newmeeting1 .datepicker .datepicker_table > tbody > tr > th {
    color: #5a6b7a;
    font-weight: 600;
}
#newmeeting1 .datepicker .datepicker_table > tbody > tr > td {
    padding: 6px 5px;
    font-size: 13px;
}
#newmeeting1 .datepicker .datepicker_table > tbody > tr > td.today {
    border-bottom: 2px solid #052f4f;
}
#newmeeting1 .datepicker .datepicker_table > tbody > tr > td.active,
#newmeeting1 .datepicker .datepicker_timelist > div.timelist_item.active {
    color: #fff;
    background-color: #052f4f;
    border-radius: 4px;
}
#newmeeting1 .datepicker .datepicker_table > tbody > tr > td.hover,
#newmeeting1 .datepicker .datepicker_timelist > div.timelist_item.hover {
    color: #052f4f;
    background-color: #e4eef6;
    border-radius: 4px;
}
#newmeeting1 .datepicker .datepicker_timelist > div.timelist_item {
    font-size: 13px;
    border-radius: 4px;
    margin-right: 3px;
}
.roomDelete{
    color:#e00000;
}
.fzFormContain{
    min-height:560px;
}
.zObjectEmb .mini-layout-body {
    margin: 25px auto auto !important;
}

.zObjectEmb .media-preview-container h1 {
    text-align: center;
    position: relative;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    font-size: 20px;
}