/*--mobile css start here--*/
@media screen and (max-width: 767px) {
    /*-- create session css start here --*/
    .join-user-video {
        height: auto;
    }
    .join-user-video {
        height: auto;
        display: inline-block;
    }
    .header .logo svg,
    .header .logo .logo-image {
        height: 30px;
        width: auto;
    }
    .header {
        margin: 20px 0 0px;
    }

    .sessionid-join {
        position: absolute;
        right: 0;
        width: 50%;
        top: 20px;
        margin: 0;
        left: auto;
        display: inline-block;
    }
    .sessionid-join h4 {
        margin-bottom: 15px;
    }
    .join-user-video h4 span {
        font-size: 16px;
    }
    .join-user-video h4 {
        font-size: 18px;
        line-height: 25px;
    }
    .user-video-box {
        height: auto;
        margin-top: 20px;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .custom-toast {
        position: static;
        padding: 10px;
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .join-user-video .user-video-box img {
        height: auto;
        border-radius: 10px;
    }
    video.join-vid {
        border-radius: 10px;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
    }
    .plans .plan .plan-content {
        display: inline-block;
        width: 100%;
        padding: 0;
    }
    .plans .plan .plan-content .plan-details {
        width: 60%;
        display: flex;
    }
    .join-screen-button {
        width: auto;
        background: #fff;
        padding: 0 0 15px;
    }
    .session-screen-action-btn {
        position: sticky;
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
    }

    .join-screen-button .btn.btn-primary {
        width: auto;
        margin-right: 10px;
    }
    .present-note {
        padding: 10px 0;
    }
    .plans .plan .plan-details span {
        height: 40px;
        width: 40px;
        font-size: 16px;
        padding: 9px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
    }
    .plan-details.join-user-box h4 {
        font-size: 14px;
    }
    .join-user-details h5 {
        font-size: 16px;
        margin: 15px 0 10px;
    }
    .join-user-video {
        height: 100%;
        display: inline-block;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
        height: auto;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .plans .plan .plan-content::before {
        height: 15px;
        width: 15px;
        top: 12px;
    }
    .plans .plan input[type="radio"]:checked + .plan-content:after {
        top: 12px;
        right: -6px;
        width: 15px;
        height: 15px;
        border-width: 3px;
    }
    /*-- create session end start here --*/
    /*-- Session css start here --*/
    /* section.session-start {
        position: relative;
        width: 100%;
    }
    .session-screen {
        left: 0;
        right: 0;
    }
    .left-bar {
        position: absolute;
        left: 0px;
        width: 100vw;
        z-index: 9999;
        overflow-y: visible;
        height: auto;
        overflow-x: auto;
        padding: 10px;
    }
    .left-bar a.logo {
        display: none;
    }
    .user-details-session .video-box {
        height: 100px;
        width: 100px;
    }
    .left-bar a.btn.btn-primary.invite-btn {
        display: none;
    }
    .session-id {
        display: none;
    }
    .right-bar {
        height: auto;
        width: auto;
        position: absolute;
        z-index: 9999;
        bottom: 30px;
        right: 10px;
        top: auto;
    }
    .right-bar .nav-pills {
        width: auto;
        height: auto;
        padding: 10px;
    }
    .side-icons {
        height: auto;
        width: auto;
        background: transparent;
    }
    .right-bar .nav-link {
        height: 40px;
        width: 40px;
        margin: 0 0 15px;
        text-align: center;
        padding: 0;
    }
    .right-bar .nav-link {
        height: 40px;
        width: 40px;
        margin: 0 0 15px;
        text-align: center;
        padding: 0;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 55px;
    }
    a.end-call-btn svg {
        height: 40px;
        width: 40px;
    }
    .remove-icons {
        position: absolute;
        top: 150px;
        left: 10px;
        bottom: auto;
    }
    .remove-icons ul li {
        display: block;
        margin: 0 0 15px;
    }
    .remove-icons ul li a {
        height: 40px;
        width: 40px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }
    .remove-icons ul li a svg {
        height: 20px;
        width: 20px;
    } */
    /*-- Session css end here --*/
}
/*--ipad css start here--*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    /*-- create session css start here --*/
    .join-user-video {
        height: auto;
    }
    .join-user-video {
        height: auto;
        display: inline-block;
    }
    .header .logo svg,
    .header .logo .logo-image {
        height: 30px;
        width: auto;
    }
    .header {
        margin: 20px 0 0px;
    }
    .dropdown-toggle span svg {
        width: 13px;
        height: 13px;
    }
    .dropdown-toggle span {
        height: 30px;
        width: 30px;
        padding: 7px 0px;
    }
    .header .dropdown button label {
        margin: 1px;
        font-size: 13px;
        vertical-align: baseline;
    }
    .sessionid-join {
        margin: 20px 0 15px;
    }
    .join-user-video h4 span {
        font-size: 16px;
    }
    .sessionid-join h4 {
        margin-bottom: 15px;
    }
    .join-user-video h4 {
        font-size: 18px;
        line-height: 25px;
    }
    .user-video-box {
        height: auto;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .custom-toast {
        position: static;
        padding: 10px;
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .join-user-video .user-video-box img {
        height: auto;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
    }
    .plans .plan .plan-content {
        display: inline-block;
        width: 100%;
        padding: 0;
    }
    .plans .plan .plan-content .plan-details {
        width: 60%;
        display: flex;
    }
    .join-screen-button {
        width: auto;
        background: #fff;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 0 15px;
    }
    .session-screen-action-btn {
        position: sticky;
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
    }
    .btn.btn-primary {
        min-width: auto;
        height: 40px;
        display: inline-flex;
        padding: 0 30px;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }
    .join-screen-button {
        width: auto;
        background: #fff;
        padding: 0 0 15px;
    }
    .present-note {
        padding: 10px 0;
    }
    .plans .plan .plan-details span {
        height: 40px;
        width: 40px;
        font-size: 16px;
        padding: 9px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
    }
    .plan-details.join-user-box h4 {
        font-size: 14px;
    }
    .join-user-details h5 {
        font-size: 16px;
        margin: 15px 0 10px;
    }
    .user-video-box {
        height: auto;
    }
    .join-user-video {
        height: 100%;
        display: inline-block;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
        height: auto;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .plans .plan .plan-content::before {
        height: 15px;
        width: 15px;
        top: 12px;
    }
    .plans .plan input[type="radio"]:checked + .plan-content:after {
        top: 12px;
        right: -6px;
        width: 15px;
        height: 15px;
        border-width: 3px;
    }
    /*-- create session css start here --*/
    .sessionid-join {
        position: absolute;
        right: 0;
        width: 50%;
        top: 20px;
        margin: 0;
        left: auto;
        display: inline-block;
    }
    .user-video-box {
        height: auto;
        margin-top: 40px;
    }
    /*-- call screen css start here --*/
    .left-bar {
        padding: 15px;
    }
    .left-bar a.logo {
        margin: 15px 0;
    }
    .user-details-session .video-box {
        width: 140px;
        height: 100px;
    }
    .user-details-session h5 {
        margin-bottom: 15px;
    }
    a.btn.btn-primary.invite-btn {
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        height: auto;
    }
    a.btn.btn-primary.invite-btn svg {
        width: 25px;
    }
    .session-screen .video img {
        height: 100vh;
        width: 100%;
    }
    .side-icons {
        height: 100vh;
        width: 60px;
    }
    .right-bar .nav-pills {
        margin: 0;
        width: 60px;
    }
    a.end-call-btn svg {
        width: 40px;
        height: 40px;
    }
    a.end-call-btn {
        margin: 0 0 20px;
    }
    .remove-icons {
        left: 150px;
    }
    .remove-icons ul li {
        display: flex;
        margin-top: 15px;
    }
    .remove-icons ul li a {
        height: 40px;
        width: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }
    .remove-icons ul li a svg {
        width: 22px;
    }
    .waiting-presenter .presenter-details .presenter-thumb .presenter-thumb-bg {
        height: 100px;
        width: 100px;
        font-size: 30px;
    }
    .waiting-presenter .presenter-details .presenter-thumb {
        height: 140px;
        width: 140px;
    }
    .waiting-presenter .presenter-details h5 {
        font-size: 16px;
    }
    .waiting-presenter .presenter-details p {
        font-size: 14px;
    }
    .session-screen {
        left: 190px;
        right: 60px;
    }
    /*-- call screen css end here --*/
}
/*--ipad css start here--*/
@media only screen and (min-width: 960px) and (max-width: 1112px) {
    /*-- create session css start here --*/
    .join-user-video {
        height: auto;
        display: inline-block;
    }
    .header .logo svg,
    .header .logo .logo-image {
        height: 30px;
        width: auto;
    }
    .header {
        margin: 20px 0 0px;
    }
    .header .dropdown button label {
        margin: 1px;
        font-size: 13px;
        vertical-align: baseline;
    }
    .sessionid-join {
        margin: 20px 0 15px;
    }
    .join-user-video h4 span {
        font-size: 16px;
    }
    .join-user-video h4 {
        font-size: 18px;
        line-height: 25px;
    }
    .user-video-box {
        height: auto;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .custom-toast {
        position: static;
        padding: 10px;
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .join-user-video .user-video-box img {
        height: auto;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
    }
    .plans .plan .plan-content {
        display: inline-block;
        width: 100%;
        padding: 0;
    }
    .plans .plan .plan-content .plan-details {
        width: 60%;
        display: flex;
    }
    .join-screen-button {
        width: auto;
        background: #fff;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 0 15px;
    }
    .session-screen-action-btn {
        position: sticky;
        width: 100%;
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
    }
    .join-screen-button .btn.btn-primary {
        width: 49%;
    }
    .plans .plan .plan-details span {
        height: 40px;
        width: 40px;
        font-size: 16px;
        padding: 9px 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-width: 40px;
    }
    .plan-details.join-user-box h4 {
        font-size: 14px;
    }
    .join-user-details h5 {
        font-size: 16px;
        margin: 15px 0 10px;
    }
    .user-video-box {
        height: auto;
    }
    .join-user-video {
        height: 100%;
        display: inline-block;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .join-user-details {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .plans {
        margin: 0;
        padding: 0;
        overflow: unset;
        height: auto;
    }
    .user-video-box .user-video-action ul li a {
        height: 40px;
        width: 40px;
        padding: 8px 0;
    }
    .user-video-box .user-video-action ul li a svg {
        height: 29px;
        width: 20px;
        left: 9px;
    }
    .plans .plan .plan-content::before {
        height: 15px;
        width: 15px;
        top: 12px;
    }
    .plans .plan input[type="radio"]:checked + .plan-content:after {
        top: 12px;
        right: -2px;
        width: 15px;
        height: 15px;
        border-width: 3px;
    }
    /*-- create session css end here --*/
    /*-- call screen css start here --*/
    .left-bar {
        padding: 15px;
    }
    .left-bar a.logo {
        margin: 15px 0;
    }
    .user-details-session .video-box {
        width: 140px;
        height: 100px;
    }
    .user-details-session h5 {
        margin-bottom: 15px;
    }
    a.btn.btn-primary.invite-btn {
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        height: auto;
    }
    a.btn.btn-primary.invite-btn svg {
        width: 25px;
    }
    .session-screen .video img {
        height: 100vh;
        width: 100%;
    }
    .side-icons {
        height: 100vh;
        width: 60px;
    }
    .right-bar .nav-pills {
        margin: 0;
        width: 60px;
    }
    a.end-call-btn svg {
        width: 40px;
        height: 40px;
    }
    a.end-call-btn {
        margin: 0 0 20px;
    }
    .remove-icons {
        left: 150px;
    }
    .remove-icons ul li {
        display: flex;
        margin-top: 15px;
    }
    .remove-icons ul li a {
        height: 40px;
        width: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }
    .remove-icons ul li a svg {
        width: 22px;
    }
    .waiting-presenter .presenter-details .presenter-thumb .presenter-thumb-bg {
        height: 100px;
        width: 100px;
        font-size: 30px;
    }
    .waiting-presenter .presenter-details .presenter-thumb {
        height: 140px;
        width: 140px;
    }
    .waiting-presenter .presenter-details h5 {
        font-size: 16px;
    }
    .waiting-presenter .presenter-details p {
        font-size: 14px;
    }
    .session-screen {
        left: 190px;
        right: 60px;
    }
    /*-- call screen css end here --*/
}
/*--laptop css start here--*/
@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
    /*-- create session css start here --*/
    .join-user-video {
        height: 100vh;
    }
    /*-- create session css end here --*/
}