@media (min-width: 300px) {
    .modal-dialog {
        max-width: 100%;
    }
    
    #pcView{
        display: none;
    }
    #mobileView{
        display: block;
    }
    #pcul{
        display: none;
    }
    #mobileul{
        display: block;
    }

    .meeting-histories-title{
        font-family: "Open Sans";
        font-size: 15px;
        color: #3762A9;
        font-weight: 900;
        padding-top: 20px;
    }
    .histories-portlet{
        padding: 10px 0;
    }
    .modal-body-participant{
        padding: 0 5px;
    }
    .table th{
        font-family: "Open Sans";
        font-size: 9px;
        font-weight: 700;
    } 
    .table td {
        border-top:none;
        font-family: "Open Sans";
        font-size: 9px;
        font-weight: 500;
    }

    .padding-histories{
        padding: 1.7rem .3rem !important;
    }
    #startOrJoin{
        font-size: 15px;
        font-weight: 900;
    }
    .accessCode-label{
        font-size: 9px;
        padding: 4px;
    }
    .roomTitle{
        font-family: "Open Sans";
        color: #3762A9;
        margin-top: 20px;
        font-weight: 700 !important;
        font-size: 1.2rem;
    }
    .welcomeText {
        font-size: 1rem
    }
    .med-thin-btn{
        font-size: 9px;
        font-weight: 400;
        padding: 5px;
    }
    .med-thin-btn span{
        font-size: 9px;
    }
    .header-room{
        padding: 10px 30px;
    }
    .lg-btn{
        font-size: 14px;
    }
    .lg-btn i{
        font-size: 14px;
        margin-bottom: 1px;
    }
    .modal-header-login .modal-title {
        font-family: "Open Sans" !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
    .room-name-login{
        font-family: "Open Sans" !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    .modal-title-result, .modal-title-participant{
        font-family: "Open Sans" !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    .normal-link, .private-link, .disable-link{
        font-size: 11px;
    }
    .btn-login{
        font-size: 9px;
        margin-top: 13px;
    }
    .btn-login i{
        margin-bottom: 1px;
        font-size: 14px;
    }
    .guide-margin{
        margin-left: -127px;
        margin-top: 7px;
    }
    .guide-margin-login{
        margin-left: -103px;
        margin-top: 11px;
    }
    .btn-guide{
        font-size: 9px;
        float: right;
        /*position: absolute;*/
        width: 37px;
        height: 37px;
        padding: 10px;
    }
    .btn-guide i{
        margin-bottom: 1px;
        font-size: 14px;
    }
    .btn-faq{
        font-size: 9px;
        /*margin-left: -170px;*/
        margin-top: 55px;
    }
    .btn-faq i{
        margin-bottom: 1px;
        font-size: 14px;
    }
    .selectRoomLable {
        font-size: 20px;
    }
    .search-field {
        font-size: 9px;
        width: 95%;
        margin-top: 5px;
    }
    .rooms-portlet {
        margin-top: 35px;
    }
    .title-category-portlet .m-portlet__body .title-category-image {
        padding-right: 0;
    }
    .categoryPhoto {
        position: unset;
    }
    .nav-item-full a {
        font-size: 13px;
    }
    .m-portlet.main-portlet .m-portlet__body .row{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .search-button {
        font-size: 9px;
        margin-left: 24%;
        margin-top: -30px;
    }
    .tagLine {
        font-size: 13px;
    }
    .nopadding{
        padding: 0px 10px 5px 10px !important;
    }
    .new-search-box {
        border-radius: 35px;
        margin-top: -25px;
    }
    .separator-icon {
        border: none;
        width: 0px;
        height: 0px;
        float: unset;
    }
    .yellow-box {
        margin-left: -5px;
    }
    .nav-dark {
        padding-top: 0px;
        /*padding-top: 30px;*/
    }
    .icon {
        width: 13%;
        margin-bottom: -15px;
        margin-left: 0;
    }
    .tagName {
        width: 53px;
        margin-left: 0px;
        border-radius: 0 0 10px 0px !important;
    }
    .col-dark {
        padding-left: 0;
    }
    .clientName {
        padding: 10px !important;
        font-size: 9px;
    }
    .modal-lg.modal-login {
        max-width: 100%;
    }
    .m-grid__item.m-footer {
        position: fixed;
        top: 94vh;
        width: 100%;
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .midle-body, .left-body, .right-body{
        padding: 30px !important;
        width: 100%;
        margin-left: 0px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info.m-portlet--collapse,.m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info, .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--collapse.m-portlet--metal{
        border-radius: 20px;
    }
    .m-body .m-content {
        padding: 5px 0px;
        margin-left: auto;
        width: 100%;
        margin-right: auto;
    }
    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }
    .m-brand .m-brand__logo .m-brand__logo-wrapper img {
        max-width: unset !important;
    }

}
@media (min-width: 500px) {

    .btn-guide{
        font-size: 9px;
    }
    .btn-guide i{
        margin-bottom: 1px;
        font-size: 14px;
    }
    .meeting-histories-title{
        font-family: "Open Sans";
        font-size: 15px;
        color: #3762A9;
        font-weight: 900;
        padding-top: 20px;
    }
    .search-field {
        font-size: 12px;
        width: 75%;
        margin-top: 11px;
    }
    .selectRoomLable{
        font-size: 30px;
    }
    .rooms-portlet {
        margin-top: 35px;
    }
    .title-category-portlet .m-portlet__body .title-category-image {
        padding-right: 0;
    }
    .categoryPhoto {
        position: unset;
    }
    .nav-item-full a {
        font-size: 13px;
    }
    .m-portlet.main-portlet .m-portlet__body .row{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .search-button {
        font-size: 12px;
        margin-left: 24%;
        margin-top: -30px;
    }
    .tagLine {
        font-size: 17px;
    }
    .new-search-box {
        border-radius: 35px;
        margin-top: -80px;
    }
    .separator-icon {
        border: none;
        width: 0px;
        height: 0px;
        float: unset;
    }
    .yellow-box {
        margin-left: -5px;
    }
    .nav-dark {
        padding-top: 0px;
        /*padding-top: 30px;*/
    }
    .icon {
        width: 10%;
        margin-bottom: -15px;
        margin-left: 0;
    }
    .tagName {
        margin-left: 35px;
        width: 149px;
    }
    .col-dark {
        padding-left: 0;
    }
    .clientName {
        font-size: 12px;
    }
    .modal-lg.modal-login {
        max-width: 100%;
    }
    .m-grid__item.m-footer {
        position: fixed;
        top: 94vh;
        width: 100%;
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .midle-body, .left-body, .right-body{
        padding: 30px !important;
        width: 100%;
        margin-left: 0px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info.m-portlet--collapse,.m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info, .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--collapse.m-portlet--metal{
        border-radius: 20px;
    }
    .m-body .m-content {
        padding: 5px 0px;
        margin-left: auto;
        width: 100%;
        margin-right: auto;
    }
    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }
    .m-brand .m-brand__logo .m-brand__logo-wrapper img {
        max-width: unset !important;
    }

}
@media (min-width: 576px) {
    .icon {
        width: 45%;
        margin-bottom: -70px;
        margin-left: 0;
    }
}
@media (min-width: 700px) {
    .guide-margin{
        margin-left: -143px;
        margin-top: 12px;
    }
    .guide-margin-login{
        margin-left: -103px;
        margin-top: 11px;
    }
    .meeting-histories-title{
        font-family: "Open Sans";
        font-size: 19px;
        color: #3762A9;
        font-weight: 900;
        padding-top: 20px;
    }
    .accessCode-label{
        font-size: 11px;
        padding: 4px;
        margin-left: -15px; 
    }
    .table th{
        font-family: "Open Sans";
        font-size: 11px;
        font-weight: 700;
    } 
    .table td {
        border-top:none;
        font-family: "Open Sans";
        font-size: 11px;
        font-weight: 500;
    }
    .lg-btn{
        font-size: 17px;
    }
    .lg-btn i{
        font-size: 18px;
        margin-bottom: 1px;
    }
    .modal-header-login .modal-title {
        font-family: "Open Sans" !important;
        font-size: 17px !important;
        font-weight: 500 !important;
    }
    .room-name-login{
        font-family: "Open Sans" !important;
        font-size: 17px !important;
        font-weight: 700 !important;
    }
    .modal-title-result, .modal-title-participant{
        font-family: "Open Sans" !important;
        font-size: 19px !important;
        font-weight: 700 !important;
    }
    .normal-link, .private-link, .disable-link{
        font-size: 13px;
    }
    .btn-login{
        font-size: 11px;
        /*margin-left: -100px;*/
        margin-top: 13px;
    }
    .btn-login i{
        margin-bottom: 1px;
        font-size: 16px;
    }
    .categoryPhoto{
        position: absolute;
    }
    .rooms-portlet{
        margin-top: 80px;
    }
    .nav-item-full a {
        font-size: 16px;
    }
    .tagLine {
        font-size: 21px;
    }
    .new-search-box{
        border-radius: 35px;
        margin-top: -170px;
    }
    .separator-icon{
        border: solid;
        width: 2px;
        height: 100%;
        float: left;
    }
    .icon {
        width: 68%;
        margin-bottom: 15px;
        margin-left: 25px;
    }
    .tagName {
        padding: 10px;
        width: 150px;
        margin-left: 70px;
        border-radius: 0 0 20px 20px !important;
    }
    .clientName {
        font-size: 13px;
    }
    .yellow-box {
        margin-left: -14px;
    }
    .nav-dark {
        padding-top: 0px;
        /*padding-top: 50px;*/
    }
    .nav-item-full a {
        border-radius: 0 !important;
    }
    .col-dark {
        padding-left: 0;
    }
    .search-button {
        margin-left: 24%;
        margin-top: -30px;
    }
    .modal-lg.modal-login {
        max-width: 100%;
    }
    .m-grid__item.m-footer {
        position: fixed;
        top: 94vh;
        width: 100%;
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .midle-body{
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 606px;
        margin-left: -214px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .left-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 606px;
        margin-left: 0px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .right-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 606px;
        margin-left: -420px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info.m-portlet--collapse,.m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info, .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--collapse.m-portlet--metal{
        border-radius: 20px;
    }
    .m-body .m-content {
        padding: 5px 0px;
        margin-left: auto;
        width: 660px;
        margin-right: auto;
    }
    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }
    .m-brand .m-brand__logo .m-brand__logo-wrapper img {
        max-width: unset !important;
    }

}
@media (min-width: 765px) {
    .btn-guide{
        font-size: 11px;
        /*margin-left: -295px;*/
        margin-top: 13px;
        width: unset;
        height: unset;
        padding: .85rem 1.15rem;
    }
    .btn-guide i{
        margin-bottom: 1px;
        font-size: 16px;
    }

    .btn-faq{
        font-size: 11px;
        /*margin-left: -377px;*/
        margin-top: 13px;
    }
    .btn-faq i{
        margin-bottom: 1px;
        font-size: 16px;
    }
    .modal-dialog {
        max-width: 500px;
    }

    #pcView{
        display: block;
    }
    #mobileView{
        display: none;
    }
    #pcul{
        display: block;
    }
    #mobileul{
        display: none;
    }
}
@media (min-width: 900px) {
    .meeting-histories-title{
        font-family: "Open Sans";
        font-size: 19px;
        color: #3762A9;
        font-weight: 900;
        padding-top: 20px;
    }
    .med-thin-btn{
        font-size: 11px;
        font-weight: 400;
        padding: 5px;
    }
    .accessCode-label{
        font-size: 13px;
        padding: 5px;
        margin-left: -15px; 
    }
    .roomTitle{
        font-family: "Open Sans";
        color: #3762A9;
        margin-top: 20px;
        font-weight: 700 !important;
        font-size: 1.5rem;
    }
    .welcomeText {
        font-size: 1.2rem
    }
    .yellow-box {
        margin-left: -60px;
    }
    .nav-dark {
        padding-top: 0px;
        /*padding-top: 20px;*/
    }
    .nav-item-full a {
        border-radius: 20px 0 0 20px !important;
    }
    .col-dark {
        padding-left: 40px;
    }
    .search-button {
        margin-left: 26%;
        margin-top: -32px;
    }
    .modal-lg.modal-result, .modal-lg.modal-participant {
        max-width: 900px;
    }
    .modal-lg.modal-login {
        max-width: 750px;
    }
    .m-grid__item.m-footer {
        position: fixed;
        top: 94vh;
        width: 100%;
    }
    .midle-body{
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 806px;
        margin-left: -280px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .left-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 806px;
        margin-left: 0px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .right-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 806px;
        margin-left: -556px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info.m-portlet--collapse,.m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--info, .m-portlet.m-portlet--head-solid-bg.m-portlet--head-sm.m-portlet--collapse.m-portlet--metal{
        border-radius: 20px;
    }
    .m-body .m-content {
        padding: 5px 0px;
        margin-left: auto;
        width: 860px;
        margin-right: auto;
    }
    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }

    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }
    .m-brand .m-brand__logo .m-brand__logo-wrapper img {
        max-width: unset !important;
    }

}

@media (min-width: 1025px) {
    .icon {
        width: 68%;
        margin-bottom: 0px;
        margin-top: 17px;
        margin-left: 25px;
    }
    .meeting-histories-title{
        font-family: "Open Sans";
        font-size: 21px;
        color: #3762A9;
        font-weight: 900;
        padding-top: 20px;
    }
    .modal-body-participant{
        padding: 0 30px;
    }
    .table th{
        font-family: "Open Sans";
        font-size: 15px;
        font-weight: 700;
    } 
    .table td {
        border-top:none;
        font-family: "Open Sans";
        font-size: 15px;
        font-weight: 500;
    }

    .padding-histories{
        padding: 1.7rem 6rem !important;
    }
    .accessCode-label{
        font-size: 13px;
        padding: 8px;
    }
    .roomTitle{
        font-family: "Open Sans";
        color: #3762A9;
        margin-top: 20px;
        font-weight: 700 !important;
        font-size: 1.8rem;
    }
    .welcomeText {
        font-size: 1.2rem
    }
    .med-thin-btn{
        font-size: 12px;
        font-weight: 400;
        padding: 7px;
    }
    .med-thin-btn span{
        font-size: 15px;
    }
    .header-room{
        padding: 20px 70px;
    }
    .lg-btn{
        font-size: 17px;
    }
    .lg-btn i{
        font-size: 18px;
        margin-bottom: 4px;
    }
    .modal-header-login .modal-title{
        font-family: "Open Sans" !important;
        font-size: 20px !important;
        font-weight: 500 !important;
    }
    .room-name-login{
        font-family: "Open Sans" !important;
        font-size: 23px !important;
        font-weight: 700 !important;
    }
    .modal-title-result, .modal-title-participant{
        font-family: "Open Sans" !important;
        font-size: 25px !important;
        font-weight: 700 !important;
    }
    .btn-login i{
        margin-bottom: 4px;
        font-size: 18px;
    }
    .btn-guide{
        /*margin-left: -300px;*/
    }
    .btn-guide i{
        margin-bottom: 4px;
        font-size: 18px;
    }

    .btn-faq{
        /*margin-left: -385px;*/
    }
    .btn-faq i{
        margin-bottom: 4px;
        font-size: 18px;
    }
    .search-button {
        margin-left: 27%;
    }
    .modal-lg.modal-result, .modal-lg.modal-participant {
        max-width: 1000px;
    }
    .modal-lg.modal-login {
        max-width: 750px;
    }
    .m-grid__item.m-footer {
        position: fixed;
        top: 100vh;
        width: 100%;
    }

    .new-search-box{
        margin-top: -268px;
    }
    .m-topbar__nav.m-nav.m-nav--inline{
        /*display: none;*/
    }
    .login-link{
        padding-top: 28px !important;
        font-size: 17px;
        font-weight: 400;
    }
    .m-stack__item.m-stack__item--fluid.m-header-head{
        box-shadow: none;
    }
    .m-container.m-container--fluid.m-container--full-height{
        box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.1);
    }
    .m-body .m-content {
        padding: 5px 0px;
        margin-left: auto;
        width: 90%;
        margin-right: auto;
    }
    .m-widget24 .m-widget24__item .m-widget24__title {
        margin-left: 4px;
        margin-top: 0px;
        font-size: 10px;
    }
    .m-widget24 .m-widget24__item .m-widget24__title {
        color: #9c9c9c;
    }
    .m-widget24 .m-widget24__item .m-widget24__stats {
        float: unset;
        margin-right: 0;
        margin-top: -5px;
        margin-left: .5rem;
        font-size: 1.4rem;
        font-weight: 900;
        color: #000;
    }
    .m-header--fixed .m-body {
        padding-top: 50px !important;
    }
    .m-aside-left--minimize .m-aside-left {
        width: 60px;
    }
    #m_ver_menu, #m_aside_left{
    	display: none;
    }

    .m-brand .m-brand__logo,
    .m-brand .m-brand__tools {
        height: 50px !important;
    }
    .m-brand--minimize .m-brand {
        width: 150px;
    }
    .m-aside-left--fixed.m-aside-left--minimize-hover .m-aside-left {
        width: 200px;
    }

    .m-aside-left--fixed.m-aside-left--minimize-hover .m-body {
        padding-left: 60px;
    }
    .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed).m-aside-left--minimize .m-footer {
        -webkit-transition: width 0.2s ease;
        transition: width 0.2s ease;
        margin-left: 60px;
    }
    .m-dropdown.m-dropdown--align-center.m-dropdown--large .m-dropdown__wrapper {
        width: 370px;
        margin-left: -250px;
    }
    .m-brand {
        background: #fff;
    }
    .midle-body{
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 960px;
        margin-left: -340px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .left-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 960px;
        margin-left: -30px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .right-body {
        margin-bottom: 15px;
        margin-top:9px;
        padding: 30px !important;
        width: 960px;
        margin-left: -650px !important;
        background: #f4f5f8 !important;
        border-radius: 20px;
        box-shadow: 0px 15px 12px #ddd;
    }
    .m-portlet.m-portlet--metal.m-portlet--head-solid-bg{
        background: #fff;
    }

    .hide-body{
        display: none; overflow: hidden; padding-top: 0px; padding-bottom: 0px;
    }
    .header-logo{
        height: 45px;
        width: auto;
        margin-left: 10px;
    }
}
@media (min-width: 1400px){
    .m-grid__item.m-footer {
        position: fixed;
        top: 100vh;
        width: 1340px;
    }
}
.m-grid__item.m-footer {
    z-index: 100;
}
.m-container.m-container--responsive.m-container--xxl {
    width: 100%;
}
.m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-aside-right, .m-footer--push.m-aside-left--enabled:not(.m-footer--fixed) .m-wrapper {
     margin-bottom: 0px; 
}

.m-footer--push.m-aside-left--enabled:not(.m-footer--fixed).m-aside-left--minimize .m-footer {
    -webkit-transition: width 0.2s ease;
    transition: width 0.2s ease;
    padding: 0px !important;
    margin-left: 0px;
}
.m-stack.m-stack--flex-tablet-and-mobile.m-stack--ver.m-stack--desktop{
    padding: 0px 20px;
}
.m-portlet.m-portlet--metal.m-portlet--head-solid-bg.m-portlet--head-sm{
    background: #fff;
}
.m-portlet.m-portlet--info.m-portlet--head-solid-bg.m-portlet--head-sm{
    background: #d2d2d26e;
}
.m-portlet{
    box-shadow: none;
}
.m-aside-left--fixed.m-aside-left--minimize .m-body {
    padding-left: 0px;
    background:#fff;
}
.m-portlet.m-portlet--info.m-portlet--head-solid-bg .m-portlet__head, .m-portlet.m-portlet--metal.m-portlet--head-solid-bg .m-portlet__head{
    border-radius: 20px;
}
.arrow-up {
    width: 0;
    position: absolute;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f4f5f8;
    margin-left: 0%;
    margin-right: auto;
    margin-top: 20px;
}
.m-accordion .m-accordion__items .m-accordion__item-head.collapsed .arrow-up{
    display: none;
}
.m-accordion .m-accordion__items .m-accordion__item-head .m-accordion__item-mode{
    display: block;
}

.m-accordion__items{
    margin: 5px;
}

.search-rooms{
    border: none;
    border-bottom: solid 1px #d0d0d0;
    border-radius: 0;
    margin-bottom: 40px;
}
.m-portlet.m-portlet--info.m-portlet--head-solid-bg.m-portlet--head-sm{
    box-shadow: 0px 5px 15px 6px rgba(0,0,0,0.1);
}
.emptyRooms{
    padding-top: 150px;
    color: #999;
}
a:hover{
    text-decoration: none;
}

.btn {
    white-space: normal;
}
.form-control-feedback{
    color: red;
    font-size: 11px;
}

.m-accordion.m-accordion--bordered .m-accordion__items .m-accordion__item-head .m-accordion__item-mode, .m-accordion.m-accordion--default .m-accordion__items .m-accordion__item-head .m-accordion__item-mode {
    color: #fff;
}

.m-accordion .m-accordion__items .m-accordion__item-head.collapsed .m-accordion__item-mode {
    float: right;
    font-family: "FontAwesome";
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-size: 1rem;
}

.m-accordion .m-accordion__items .m-accordion__item-head .m-accordion__item-mode {
    float: right;
    font-family: "FontAwesome";
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-size: 1rem;
}

.m-accordion .m-accordion__items .m-accordion__item-head.collapsed .m-accordion__item-mode:before {
    content: "\f078";
}
.m-accordion .m-accordion__items .m-accordion__item-head .m-accordion__item-mode:before {
    content: "\f077";
}

.m-accordion__items .m-accordion__item-head{
    border-radius: 20px;
    padding:20px;
    font-size: 15px;
    color: white;
    cursor: pointer;
    font-weight: 500;
}
.m-accordion.m-accordion--bordered .m-accordion__items .m-accordion__item-head.collapsed, .m-accordion.m-accordion--default .m-accordion__items .m-accordion__item-head.collapsed {
    background-color: #176a9d;
}

.m-accordion.m-accordion--bordered .m-accordion__items .m-accordion__item-head, .m-accordion.m-accordion--bordered .m-accordion__items .m-accordion__item-head:hover, .m-accordion.m-accordion--default .m-accordion__items .m-accordion__item-head, .m-accordion.m-accordion--default .m-accordion__items .m-accordion__item-head:hover {
    background-color: #36a3f7;
}
.m-brand__icon.m-brand__toggler.m-brand__toggler--left.m--visible-tablet-and-mobile-inline-block{
    display: none !important;
}
.m-dropdown.m-dropdown--arrow .m-dropdown__arrow {
    color: #22b9ff;
}

/*4-5-2020*/
.new-search-box{
    box-shadow: 0px 1px 15px 1px rgba(5, 5, 5, 0.1);
}
.new-search-box .m-portlet__body{
    padding: .5rem 2rem;
}
.tagLine{
    font-family:"Open Sans";
    font-weight: 500;
}
.search-field {
    font-family: "Open Sans";
    background: #f7f7f7;
    border: none;
    border-radius: 30px;
    padding: 5px 20px;
}
.search-field:focus{
    font-family: "Open Sans";
    background: #f7f7f7;
    border: none !important;
    border-radius: 30px;
    padding: 5px 20px;
}
.search-button{
    font-family: "Open Sans";
    float: left;
    position: absolute;
    background-color: #3762A9 !important;
    color: #fff !important;
    padding: 3px 11px;
    border-radius: 34px;
}
.search-button:hover{
    background-color: #385d8c !important;
    color: #fff !important;
}
.tagName{
    position: absolute;
    height: auto;
    background: #fff;
}
.clientName{
    color: #fff;
    padding: 15px;
    width: 100%;
    font-weight: 500;
}
.yellowLine{
    background: #244170;
    width: 100%;
    height: 25px;
}
.main-portlet{
    box-shadow: 0px 1px 15px 1px rgba(5, 5, 5, 0.1);
    border-radius: 50px;
}
.main-portlet .m-portlet__body{
    padding: 0;
}
.nav-dark{
    background-color: #3762A9;
    border-radius: 0 30px 30px 0;
    padding-left: 20px;
}
.left-dark-border {
    height: auto;
    border-left: solid #244170 3px;
    margin-top: 35px;
    margin-bottom: 35px;
}
.col-dark{
    border-radius: 30px;
    background-color: #3762A9;
    padding-right: 0;
}
.yellow-box{
    position: absolute;
    height: 50px;
    width: 50px;
    background: #244170;
    margin-top: -25px;
}
.nav-item-full{
    width: 100%;
}
.nav-item-full a {
    font-family: "Open Sans";
    padding: .5rem 1.5rem !important;
}
.nav.nav-pills .nav-item.dropdown.show>.nav-link, .nav.nav-pills .nav-link.active {
    color: #000;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #fff;
}
.nav.nav-pills .nav-link, .nav.nav-tabs .nav-link {
    color: #fff;
}
.nav.nav-pills .nav-item, .nav.nav-tabs .nav-item {
    margin-left: 0;
}
.nav.nav-pills .nav-link, .nav.nav-tabs .nav-link {
    font-weight: 600;
}
.selectRoomLable{
    font-family: "Open Sans";
    font-weight: 700;
    color: #5e6b7a;
    margin-top: 100px;
}
.loadTabImg{
    width: 50%;
    margin-top: 50px;
}
.min-height{
    min-height: 600px;
}
.tab-pane-padding{
    padding: 30px;
}
.categoryPhoto{
    max-width: 370px;
    width: 100%;
    border-radius: 30px;
    margin-top: -90px;
}

.title-category-portlet{
    box-shadow: 0px 1px 15px 1px rgba(5, 5, 5, 0.1);
    border-radius: 50px;
    margin-top: 50px;
}
.title-category-portlet .m-portlet__body{
    min-height: 120px;
}

.title-category-portlet .m-portlet__body .title-category-image{
    padding-left: 0;
}
.title-category-text{
    padding: 20px 20px 20px 30px;
}
.category-name{
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: 700;
}
.number-class{
    font-family: "Open Sans";
    font-size: 15px;
    margin-top: 10px;
}

.private-link{
    font-family: "Open Sans";
    font-weight: 700;
    color:#3862a9;
}
.private-link:hover{
    color: #558ae6;
}

.private-div {
    padding: 10px;
    border: solid 1px #3862a9;
    border-radius: 10px;
}

.door-div{
    position: absolute;
    right: 30px;
    margin-top: 3px;
}

.classImg{
    width: 35%;
    position: absolute;
    right: 10px;
    margin-top: -25px !important;
}

.normal-link{
    font-family: "Open Sans";
    font-weight: 700;
    color:#3762A9;
}
.normal-link:hover{
    color: #3d6395;
}

.disable-link{
    font-family: "Open Sans";
    font-weight: 700;
    color:#b0b0b0;
    cursor: default;
}
.disable-link:hover{
    color: #000;
}
.modal-body-result{
    padding: 20px 35px 35px 35px !important;
}
.modal-header-result, .modal-header-participant{
    padding: 20px 35px !important;
}

.modal .modal-content .modal-header.modal-header-result .close:before {
    font-size: 1.7rem;
    font-weight: 900;
}

.login_form{
    width: 100%;
}

.content-login {
    border-radius: 55px !important;
}

.modal .modal-login .modal-content .modal-header {
    padding: 50px 50px 0px 50px;
    border: none;
}
.in-title{
    font-family: "Open Sans" !important;
    font-size: 15px;
    font-weight: 600;
}

.def-btn{
    font-family: "Open Sans";
    border-radius: 34px;
}
.dark-btn{
    background-color: #3762A9 !important;
    color: #fff !important;
}
.lime-btn{
    background-color: #244170 !important;
    color: #fff !important;
}
.dark-btn:hover{
    background-color: #385d8c !important;
    color: #fff !important;
}

.lime-btn:hover{
    background-color: #3762A9 !important;
}
.red-btn{
    background-color: #e68787 !important;
    color: #fff !important;
}

.red-btn:hover{
    background-color: #f59090 !important;
    color: #fff !important;
}

.blue-btn{
    background-color: #506899 !important;
    color: #fff !important;
}

.blue-btn:hover{
    background-color: #6a87c3 !important;
    color: #fff !important;
}

.yellow-btn{
    background-color: #ffb822 !important;
    color: #000 !important;
}

.yellow-btn:hover{
    background-color: #ffc446 !important;
    color: #506899 !important;
}


.blue-btn-outline{
    border-color: #506899 !important;
    color: #506899 !important;
}

.blue-btn-outline:hover{
    border-color: #506899 !important;
    background-color: #506899 !important;
    color: #fff !important;
}

.btn-dark-blue{
    background-color: #176a9d !important;
    border-color: #176a9d !important;
    color: #fff;
}
.btn-dark-blue:hover{
    background-color: #36a3f7 !important;
    border-color: #36a3f7 !important;   
    color: #fff;
}

.btn-login{
    font-family: "Open Sans" !important;
    /*position: absolute;*/
}
.btn-guide{
    font-family: "Open Sans" !important;
    /*position: absolute;*/
    z-index: 2;
}

.btn-faq{
    font-family: "Open Sans" !important;
    /*position: absolute;*/
    z-index: 2;
}

.med-btn{
    font-size: 15px;
    font-weight: 600;
}
.alert-btn{
    border-color: red;
}
.lg-btn{
    font-weight: 600;
    padding-left: 30px;
    padding-right: 30px;
}
.lg-btn i{
    font-weight: 600;
}

.btn-choose{
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.btn-choose-meeting{
    width: 200px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
.modal-backdrop {
    background-color: #fff;
}

.modal-body-login{
    padding: 10px 50px 50px 50px !important;
}
.mini-search-field{
    font-family: "Open Sans";
    width: 100%;
    border-radius: 30px;
    padding: 5px 20px;
}
.logins-field {
    font-family: "Open Sans";
    width: 100%;
    background: #efefef;
    border: none;
    border-radius: 30px;
    padding: 5px 20px;
}

.logins-field:focus {
    background: #f7f7f7;
}
.logins-field:read-only {
    background: #efefef;
}
.modal .modal-content .modal-header.modal-header-login .close:before {
    font-size: 2rem;
    font-weight: 900;
}
.blockUI.blockMsg.blockPage{
    z-index: 10110 !important;
}

.welcomeText {
    font-family: "Open Sans";
    color: #3762A9;
    font-weight: 600;
}

.meeting-histories{
    margin-top: 30px;
}
.share-border{
    padding: 5px;
    background: #fff;
    color: #506899;
    border-radius: 50%;
}
.share-border-negative{
    padding: 5px;
    background: #000;
    color: #fff;
    border-radius: 50%;
}
.meeting-histories-body{
    border-radius: 50px !important;
}

.dataTables_scrollHead{
    border-radius: 30px;
    box-shadow: 0px 3px 7px #9c9c9c;
    padding: 0px 20px;
}
.dataTables_scrollBody{
    padding: 0px 20px;
}
.dataTables_wrapper .pagination .page-item.active>.page-link {
    background: #3762A9;
    color: #fff;
}

.hiden-page{
    display: none;
}