.clear {
    clear: both;
}


/* Message --------------------------------- */
#vsdkMessage {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    border: 1px solid #222222;
    max-width: 300px;
    max-height: 400px;
}

#vsdkMessage .infoM {
    padding: 10px;
    color: #ffffff;
    background-color: #333366;
    font-size: 12px;
    text-align: left;
}

#vsdkMessage .error {
    padding: 10px;
    color: #ffffff;
    background-color: #663333;
    font-size: 12px;
    text-align: left;
}


/* The enable device popup to give permission ------------ */
#vsdkPermitDevice {
    position: absolute;
    z-index: 2000;
    top: 50%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -50%);
    display: none;
    background-color: #ffffff;
    border-radius: 20px;
    border-bottom: 1px solid #ffffff;
    min-height: fit-content;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#vsdkPermitDevice>.message {
    /* height: 60px; */
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    /* line-height: 60px; */
    padding-top: 10px;

}

#vsdkPermitDevice>.buttons {
    /* height: 200px; */
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
}

#vsdkPermitDeviceYesBt,
#vsdkPermitDeviceNoBt {
    /* width: 100px;
    height: 28px; */
    cursor: pointer;
    border: none;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}


/* Session blocked panel. Only for attendees and team leaders ------------ */
#vsdkSessionBlocked {
    /*display: none;*/
    position: absolute;
    z-index: 3000;
    top: 50%;
    left: 50%;
    width: 100dvw;
    height: 100dvh;
    transform: translate(-50%,-50%);
    background: url("../../img/_IMG_1.0_/dside/backgrounds/bg_red.png");
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

#vsdkSessionBlocked > .container{
    display: none;
    width: 50%;
    padding: 20px;
    background-color: rgba(255,255,255,0.4);    
    border-radius: 20px;
    text-align: center;
}

#vsdkSessionBlocked>.container>.message {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

#vsdkSessionBlocked>.container>.buttons {
}

#vsdkSessionBlocked>.buttons button {
    margin: auto;
    width: 160px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}


/* Devices selection panel --------------------------------- */
#vsdkDevicesSelection {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 35vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#vsdkDevicesSelection>.title {
    width: 100%;
    padding-bottom: 10px;
    color: 000000;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

#vsdkDevicesSelection>.content {
    display: grid;
    grid: auto / 40% 40% auto;
    grid-gap: 5px;
}

#vsdkDevicesEnterBt {
}


/* Remove constraints --------------------------------- */
#vsdkRemoveConstraints {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: none;
    cursor: pointer;
    background-color: #dddddd;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    line-height: 100px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}


/* Menu --------------------------------- */
#vsdkMenuContainer {
    display: none;
    margin-block: 10px;
    text-align: left;
}

#vsdkMenuContainer .rooms{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

#vsdkMenuContainer .rooms .button{
    padding-block: 5px;
}

#streaming{
    display: none;
}

/* .vsdk_toggle-webcam-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/webcam_on.svg");
    background-repeat: no-repeat;
    width: 18.07%;
    height: 32.12%;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.vsdk_toggle-webcam-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/webcam_off.svg");
    background-repeat: no-repeat;
    width: 18.07%;
    height: 32.12%;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
}

.vsdk_toggle-mic-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/mic_on.svg");
    background-repeat: no-repeat;
    width: 18.07%;
    height: 32.12%;
    cursor: pointer;
    position: absolute;
    top: 32.3%;
    right: 0;
}

.vsdk_toggle-mic-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/mic_off.svg");
    background-repeat: no-repeat;
    width: 18.07%;
    height: 32.12%;
    cursor: pointer;
    position: absolute;
    top: 32.3%;
    right: 0;
}

#vsdkOptionsBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/options.svg");
    background-repeat: no-repeat;
    width: 18.07%;
    height: 32.12%;
    cursor: pointer;
    position: absolute;
    top: 65%;
    right: 0;
} */

#vsdkRoomsBt {
    display: none;
    background-image: url("../../img/_IMG_1.0_/videosdk/rooms.svg");
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

#vsdkOpenAIBt {
    display: none;
    background-image: url("../../img/_IMG_1.0_/videosdk/openai.svg");
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

#vsdkExitBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/exit.svg");
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

#btSendToRooms, #btBackToMain{
    display: none !important;
}


/* Menu Exit --------------------------------- */
#vsdkExitPanel {
    display: none;
    padding: 5px;
    background-color: #dddddd;
    width: 290px;
}

#vsdkExitPanel>.header {
    width: 100%;
    text-align: right;
}

#vsdkExitPanel>.row {
    width: 100%;
    padding-bottom: 10px;
}

#vsdkExitCloseBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/roll-back.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 20px;
    cursor: pointer;
    border: none;
}

#vsdkExitLeaveMeetingBt,
#vsdkExitTerminateMeetingBt {
    width: 100%;
    height: 24px;
    cursor: pointer;
    border: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}


/* Menu options --------------------------------- */
#vsdkOptionsPanel {
    display: none;
    width: 35vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#vsdkOptionsPanel>.title {
    width: 100%;
    padding-bottom: 10px;
    color: 000000;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

#vsdkOptionsPanel>.header {
    width: 100%;
    text-align: right;
}

#vsdkOptionsPanel>.row {
    width: 100%;
    padding-bottom: 10px;
}

#vsdkCloseOptionsBt {
}


/* Menu rooms --------------------------------- */
#vsdkRoomsPanel {
    display: none;
    padding: 5px;
    background-color: #dddddd;
    width: 290px;
}

#vsdkCloseRoomsBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/roll-back.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 20px;
    cursor: pointer;
    border: none;
}

#vsdkRoomsPanel>.header {
    width: 100%;
    text-align: right;
}

#vsdkRoomsPanel>.row {
    width: 100%;
    padding-bottom: 10px;
}

#vsdkRoomsPanel>.footer {
    width: 100%;
    padding-top: 5px;
    text-align: right;
}

#vsdkRoomsPartPanel {
    border-bottom: 1px solid #222222;
}

#vsdkRoomsPartPanel>.line-grid {
    display: grid;
    grid: auto / 18px auto 24px 24px 24px 24px;
    grid-gap: 5px;
}

.vsdk_rooms_checkbox {
    width: 18px;
    height: 18px;
}

.vsdk_rooms_grid_name {
    height: 24px;
    line-height: 24px;
    color: #000000;
    font-size: 12px;
    text-align: left;
    padding-left: 5px;
}

.vsdk_rooms_stats-bt {
    background-image: url("../../img/_IMG_1.0_/videosdk/stats.svg");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
}

.vsdk_rooms_join-bt {
    background-image: url("../../img/_IMG_1.0_/videosdk/join.svg");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
}

.vsdk_toggle-webcam-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/camera.svg");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.vsdk_toggle-webcam-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/cam-off.svg");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.vsdk_toggle-mic-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/micro.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.vsdk_toggle-mic-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-off.svg");
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

#vdkRefreshRoomsBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/refresh.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
}

#vdkJoinAllBt {
    display: none;
    background-image: url("../../img/_IMG_1.0_/videosdk/join.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
}

#vsdkRoomsPopup {
    display: none;
    position: absolute;
    top: 0;
    left: 20px;
    width: 260px;
    border: 1px solid #000000;
    background-color: #dddddd;
    padding: 5px;
    z-index: 3;
}

#vsdkRoomsPopup>.header {
    width: 100%;
    text-align: right;
}

#vsdkRoomsPopup>.row {
    width: 100%;
    padding-top: 5px;
}

#vsdkRoomsPopup>.footer {
    width: 100%;
    padding-top: 5px;
    text-align: right;
}

#vsdkCloseRoomsPopupBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/roll-back.svg");
    background-repeat: no-repeat;
    width: 20px;
    height: 14px;
    cursor: pointer;
    border: none;
}

#vsdkJoinRoomSelId {
    height: 100px;
}

#vsdkSwitchRoomBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/ok.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border: none;
}

#vsdkStatsPopup {
    display: none;
    position: absolute;
    top: 0;
    left: 20px;
    width: 260px;
    border: 1px solid #000000;
    background-color: #dddddd;
    padding: 5px;
    z-index: 3;
}

#vsdkStatsPopup>.header {
    width: 100%;
    text-align: right;
}

#vsdkStatsPopup>.body {
    width: 100%;
    text-align: left;
    overflow: scroll;
    max-height: 300px;
    border-bottom: 1px solid #222222;
}

#vsdkStatsPopup>.footer {
    width: 100%;
    padding-top: 5px;
    text-align: right;
}

#videoStats,
#audioStats,
#shareStats {
    font-size: 12px;
    color: #000000;
    padding-bottom: 5px;
}

#vsdkCloseStatsPopupBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/roll-back.svg");
    background-repeat: no-repeat;
    width: 20px;
    height: 14px;
    cursor: pointer;
    border: none;
}

#vsdkRefreshStatsBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/refresh.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    border: none;
    cursor: pointer;
}


/* Menu OpenAI --------------------------------- */
#vsdkOpenAIPanel {
    display: none;
    padding: 5px;
    background-color: #dddddd;
    width: 290px;
}

#vsdkOpenAIPanel>.header {
    width: 100%;
    text-align: right;
}

#vsdkOpenAIPanel>.row {
    width: 100%;
    padding-bottom: 10px;
}

#vsdkOpenAICloseBt {
    background-image: url("../../img/_IMG_1.0_/videosdk/roll-back.svg");
    background-repeat: no-repeat;
    width: 28px;
    height: 20px;
    cursor: pointer;
    border: none;
}

#vsdkOpenAIRecordBt,
#vsdkOpenAIStopBt,
#vsdkOpenAIProcessBt,
#vsdkOpenAICancelBt,
#vsdkOpenAIReportBt,
#vsdkOpenAIClearBt {
    width: 100%;
    height: 24px;
    cursor: pointer;
    border: none;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;

}

#recordingCounterLb {
    width: 100%;
    padding-bottom: 5px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}

#vsdkOpenAIPanel .progress-nok {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 5px;
    text-align: left;
    font-size: 12px;
    color: #666666;
}

#vsdkOpenAIPanel .progress-ok {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 5px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #007700;
}


/* Attendee container --------------------------------- */
.vsdk_attendee-frame {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    background: #000000 url("../../img/_IMG_1.0_/videosdk/new/cam-off.svg");
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: 30%;
    border-radius: 20px;
}

.vsdk_attendee-frame>.frame-header {
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    background-color: var(--color1);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.vsdk_attendee-frame .mic-icon {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-off.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 5px;
}


.vsdk_attendee-frame .display-name {
    font-size: 12px;
    color: #ffffff;
    text-align: left !important;
    display: inline-flex;
}

.vsdk_attendee-frame .participantDiv {
    display: inline-flex;
    gap: 5px;
}

.vsdk_attendee-frame>.webcam-icon {
    display: none;
    /*margin: auto;
    background-image: url("../../img/_IMG_1.0_/videosdk/webcam_no-video.svg");
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;*/
    /* display: inline-block; */
}

.vsdk_attendee-frame>div>.video-element {
    display: block;
    width: 100%;
    min-width: 10px;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    aspect-ratio: 16/9;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    background-color: #000000;
}

.vsdk_audio-element {
    display: none;
}


/* Templates selection -------------------------------- */
#vsdkTemplates {
    position: fixed;
    top: 5px;
    right: 5px;
    width: 120px;
    height: 35px;
    padding: 5px;
}

#vsdkAttendeeContainer {
    max-width: 100%;
    padding-right: 5px;
    overflow-y: auto;
    max-height: 78dvh;
}


.video-settings {
    z-index: 1001;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    /*left: 50%;
    transform: translateX(-50%);
    bottom: 2%;*/
}

.vsdkSelectList {
    display: flex;
    gap: 10px;
    margin-top: .5rem;
    align-items: center;
    justify-content: center;
}

.vsdkSelectList > * {
    flex: 1;
}

.video-settings > *{
    display: inline-block;
}

.vsdkPopupButtons{
    margin-top: .5rem;
    text-align: center;
}

.self-buttons{
    background-color: var(--color1);;
    border-radius: 40px;
    z-index: 2;
    padding: 5px 15px 0 15px;
    display: inline-block;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.self-buttons > *{
    display: inline-block;
    padding-inline: 5px;
}

@media only screen and (max-width: 1367px) {
}

@media only screen and (min-width: 1367px) {
    
}

@media only screen and (max-width: 1367px) {
    
}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 1024px) {
}

/*iPad 1 & 2 in portrait*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
}


/*iPad 1 & 2 in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {

}

.vsdk-title-popup{
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

.pointer:hover {
    cursor: pointer !important;
}

.vsdk_device_toggle-mic-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/micro-on-off.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    width: 70px;
    height: 70px;
}

.vsdk_device_toggle-webcam-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/camera-on-off.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    width: 70px;
    height: 70px;
}

.vsdk_device_toggle-mic-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-off.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    width: 70px;
    height: 70px;
}

.vsdk_device_toggle-webcam-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/cam-off.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    width: 70px;
    height: 70px;
}

#vsdkDevicesVideoEl {
    position: absolute;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    background-color: #000000;
}

.vsdk_settings {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/definicoes.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

.vsdk_toggle-participant-webcam-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/cam-white-on.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 30px;
    height: 30px;
}

.vsdk_toggle-participant-webcam-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/cam-off.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    width: 30px;
    height: 30px;
}

.vsdk_toggle-participant-mic-bt_on {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-white-on.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
}

.vsdk_toggle-participant-mic-bt_off {
    background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-off.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 30px;
    height: 30px;
}

.vsdk_participant-highlight-bt {
    /*background-image: url("../../img/_IMG_1.0_/videosdk/new/mic-white-on.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;*/
    width: 30px;
    height: 30px;
    background-color: #00ff00;
}