/*{
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
}*/

html {
    background-color: #f4f4f7;
    font-size: 15px;
    color: black;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", sans-serif;
}


button {
    font-size: 15px;

}

a {
    color: black;
    text-decoration: none;
    display: block;
}

a:hover, label:hover {
    background-color: lightgray;
}


@media (min-width: 1030px) {
    h1 {
        text-align: center;
        font-size: 22px;
        line-height: 45px;
    }

    #select_app {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 75%;
        text-align: center;
        padding: 10px;
        margin: 10px auto;
    }

    .app_container {
        margin: 15px;
    }

    .app_name {
        background-color: white;
        height: 125px;
        width: 125px;
        /*border: 1px solid lightgray;*/
        line-height: 125px;
        border-radius: 50px;
    }

    .app_name:hover {
        box-shadow: 2px 2px 5px dimgray;
    }

    .app_name a {
        border-radius: 48px;
    }

    #menu-container {
        position: absolute;
        z-index: 2;
        width: 250px;
        height: 100%;
        background-color: white;
        padding: 5px 0;
        display: none;
    }


    #menu-cover {
        position: absolute;
        width: 100%;
        background-color: lightgrey;
        opacity: 0.5;

    }

    .active {
        z-index: 1;
        height: 100%;
    }

    .menu {
        height: 55px;
        width: 250px;
        border-bottom: solid gray 1px;
        box-sizing: border-box;
    }

    .menu a {
        height: 100%;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    #live-header {
        display: flex;
        justify-content: space-between;
        margin: 0;
    }

    .menu-icon {
        position: relative;
        width: 125px;
        margin: 13px 10px;
        height: 19px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .menu-icon div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 25px;
        background-color: #444444;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .menu-icon div:nth-of-type(1) {
        top: 0;
    }

    .menu-icon div:nth-of-type(2) {
        top: 8px;
    }

    .menu-icon div:nth-of-type(3) {
        bottom: 0;
    }

    .menu-close-icon {
        font-size: 44px;
        height: 29px;
        padding: 0 0 0 9px;
        margin: 0;
        width: 50px;
        line-height: 20px;
        color: #444444;
    }

    .profile-container {
        display: flex;
        flex-direction: row;
        width: 150px;
        justify-content: flex-end;
    }

    .member-icon {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .login-link {
        color: black;
        cursor: pointer;
        text-decoration: underline;
        font-size: 16px;
        font-weight: normal;
        height: 45px;
    }

    .login-link:hover {
        background-color: #f4f4f7;
        color: gray;
    }

    .mypage-link {
        color: black;
        font-size: 15px;
        font-weight: normal;
        height: 45px;
    }

    #contents-container {
        width: 1200px;
        margin: 0 auto;
        display: flex;
    }

    #contents-container-right {
        width: 400px;
        margin: 0 7px;
    }

    #space {
        height: 55px;
    }

    #file-list-container {
        width: 600px;
        margin: 0 auto;
    }


    #live-title {
        font-size: 19px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        margin: 0 5px;
    }

    #live-title p {
        margin: 5px 10px;
        width: 250px;
        line-height: 35px;
    }

    #live-title p:nth-child(2) {
        text-align: center;
    }

    #live-title p:nth-child(3) {
        text-align: right;
    }

    #live-action {
        height: 39px;
    }

    #leave-live, #end-screen-share, #ans-off, #unmute, #video-on {
        display: none;
    }

    #message-content {
        width: 680px;
        height: 28px;
        font-size: 15px;
        border-radius: 20px;
        border-width: thin;
        padding-left: 8px;
    }

    #send-message {
        display: none;
        justify-content: space-between;
        margin: 10px;
    }

    #message-submit {
        width: 76px;
        color: black;
        border-radius: 10px;
        border-width: 0;
        height: 32px;
    }

    #message-submit:hover {
        background-color: lightgray;
    }

    #channel-message {
        margin: 10px 15px;
        color: dimgray;
    }

    #channel-message-sp {
        display: none;
    }

    .channel-message-link {
        display: inline;
        text-decoration: underline;
    }

    #message-container {
        font-size: 14px;
        overflow: scroll;
        width: 100%;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #message-container::-webkit-scrollbar {
        display: none;
    }

    #member-container {
        font-size: 14px;
        display: none;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;

    }

    #member-container::-webkit-scrollbar {
        display: none;
    }

    #member-list p {
        margin: 5px
    }

    #message-list p {
        display: flex;
        justify-content: space-between;
        margin: 5px 0
    }

    #message-list p div:nth-of-type(1) {
        width: 75px;
        margin: 0 0 0 5px;
        word-break: break-all;
    }

    #message-list p div:nth-of-type(2) {
        width: calc(100% - 140px);
        margin: 0 0 0 5px;

    }

    #message-list p div:nth-of-type(3) {
        width: 55px;
        text-align: right;
        margin: 0 5px 0 0;
        color: dimgrey;
        font-size: 12px;
        line-height: 21px;
    }

    #message-member-title {
        width: 400px;
        display: flex;
        justify-content: space-between;
    }

    #message-member-title div {
        width: 50%;
        text-align: center;
        height: 30px;
        line-height: 31px;
        border-bottom: 0;
        border-radius: 5px 5px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #message-title {
        background-color: white;
    }

    #live-menu-container {
        margin: 0 10px 10px 10px;
        height: 60px;
    }

    #live-menu {
        justify-content: space-between;
        display: none;
        align-items: center;
    }

    #live-menu-audience {
        display: none;
    }

    #live-menu button {
        width: 100px;
        height: 35px;
    }

    #start-live {
        background-color: #3da6ff;
        border-radius: 8px;
        border: #3da6ff 2px solid;
        color: black;
        cursor: pointer;
    }

    #start-live:hover {
        background-color: #2196f3;
        border: #2196f3 2px solid;
    }

    #leave-live {
        background-color: #cc0100;
        border-radius: 8px;
        border: #cc0100 2px solid;
        color: white;
        cursor: pointer;
    }

    #leave-live:hover {
        background-color: #ff0100;
        border: #ff0100 2px solid;
    }

    .video-player {
        margin: 10px auto;
        width: 800px;
        height: 450px;
        border-radius: 5px;
        background-color: white;
        position: relative;
    }

    video {
        border-radius: 5px;
    }

    div[id^="agora-video-player"] {
        border-radius: 5px;
    }

    #start-menu-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 400px;
        height: 195px;
        margin: auto;
    }

    .start-menu {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .start-menu input, .config-container input {
        display: none;
    }

    .start-menu label {
        display: inline-block;
        padding: 2px 5px;
        border-radius: 3px;
        width: 90px;
        height: 25px;
        text-align: center;
        margin: 5px;
        line-height: 25px;
        background-color: #f4f4f7;
    }

    #select-camera label {
        width: 145px;
        overflow: hidden;
    }

    .start-menu label:hover {
        background-color: lightgray;
    }

    .config-container label {
        display: block;
        padding: 2px 5px;
        width: 95px;
        height: 29px;
        line-height: 25px;
        text-align: center;
        box-sizing: border-box;
    }

    .config-container {
        position: absolute;
        z-index: 1;
        font-size: 14px;
        display: none;
        border-radius: 10px;
        background-color: #ebebeb;
    }

    .config-container label.hovered {
        background-color: lightgray;
    }


    .start-menu input:checked + label {
        background-color: lightgray;
    }

    .config-container input:checked + label {
        background-color: lightgray;
    }

    #prepare-live {
        display: block;
        margin: 10px auto;
        height: 30px;
        background-color: #3da6ff;
        border: #3da6ff 1px solid;
        border-radius: 5px;
        color: black;
        line-height: 27px;
        cursor: pointer;
    }

    #prepare-live:hover {
        background-color: #2196f3;
        border: #2196f3 1px solid;
    }

    #start-view {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 50px;
        margin: auto;
        border-radius: 30px;
        color: black;
        background-color: #3da6ff;
        border: #3da6ff 1px solid;
        cursor: pointer;
    }

    #start-view:hover {
        background-color: #2196f3;
        border: #2196f3 1px solid;
    }

    #live-end-message, #live-wait-message {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: auto;
        border-radius: 30px;
    }


    #message-member-container {
        display: flex;
        justify-content: space-between;
        background-color: white;
        width: 400px;
        height: 619px;
        margin: 0 auto;
        border-radius: 0 0 5px 5px;
    }

    .file-container {
        height: 153px;
        background-color: white;
        margin: 15px auto;
        border-radius: 20px;
        position: relative;
    }

    .thumbnail {
        width: 272px;
        height: 153px;
    }

    .file-container a {
        display: flex;
        border-radius: 20px;
    }

    .live-info p {
        margin: 21px 30px;
    }

    .thumbnail img {
        border-radius: 20px 0 0 20px;
    }

    .archive-menu-container {
        position: absolute;
        top: 20px;
        right: 16px;
    }

    .archive-menu {
        display: none;
        width: 80px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid dimgrey;
        border-radius: 2px;
        margin: 5px 0 0 0;
        background-color: white;
    }

    .archive-menu:hover {
        background-color: lightgrey;
    }

    .menu-button {
        cursor: pointer;
        width: 30px;
        margin: 0 0 0 auto;
    }

    .menu-button:hover {
        color: lightgrey;
    }

    .menu-button div {
        height: 8px;
        line-height: 8px;
        padding: 0 0 0 7px;
    }

    .user-info {
        display: flex;
        border-bottom: lightgray 1px solid;
    }

    .user-info div {
        height: 60px;
        line-height: 30px;
        background-color: white;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    #user-info-container {
        width: 800px;
        margin: 20px auto;
        box-shadow: 0 0 8px 5px lightgray;
    }

    .user-info div:nth-of-type(1) {
        width: 250px
    }

    .user-info div:nth-of-type(2) {
        width: 450px
    }

    .user-info div:nth-of-type(3) {
        width: 100px;
    }

    .user-info a:hover {
        color: dimgrey;
        background-color: white;
    }

    #signup-form {
        width: 640px;
        border: 1px solid #444444;
        padding: 21px;
        margin: 0 auto;
    }

    #signup-form span {
        font-size: 13px;
        color: gray;
        display: block;
        padding: 7px 20px;
    }

    #signup-form ul {
        font-size: 13px;
        color: gray;
        display: block;
        padding: 0 20px 7px 20px;
        margin: -17px 10px 0 10px;
        list-style: none;
    }

    #signup-form label {
        display: inline-block;
        width: 200px;
    }

    #signup-form label:hover {
        background-color: #ebebeb;
    }

    #signup-form p {
        margin: 10px;
    }

    #signup-form input {
        height: 20px;
        font-size: 15px;
    }

    #button-container {
        text-align: center;
        padding: 10px 0 0 0;
    }

    #id_email {
        width: 325px;
    }

    #ch-list {
        width: 600px;
        margin: 0 auto;
    }

    #ch-select-message {
        text-align: center;
        margin: 15px 0;
        display: flex;
        justify-content: space-around;
        height: 30px;
        line-height: 30px;
    }

    #add-ch, #register-ch {
        background-color: white;
        border-radius: 15px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .ch-container {
        width: 100%;
        height: 80px;
        margin: 3px 0;
        border-radius: 10px;
        background-color: white;
    }

    .ch-container a {
        display: flex;
        height: 100%;
        border-radius: 10px;
    }

    .ch-info-left, .ch-info-right {
        width: 50%;
    }

    .ch-info-elem {
        height: 50%;
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        box-sizing: border-box;
    }


    .ch-name {
        font-size: 16px;
    }

    .ch-host {
        color: gray;
        font-size: 13px;
        margin: 0 15px;
    }

    #make-ch-container {
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    #ch-ctrl {
        width: 800px;
        margin: 10px auto;
    }

    #ch-title {
        border-bottom: black 1px solid;
        font-size: 17px;
        height: 30px;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    #ch-menu-container {
        display: flex;
        justify-content: space-between;
    }

    .ch-contents {
        padding: 15px 5px;
    }

    .ch-menu {
        width: 25%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        box-sizing: border-box;
        margin: 0 15px;
    }

    .ch-menu.selected-menu, .ch-menu:hover {
        border-bottom: dimgray 2px solid;
    }

    .invite-ways, .member-container, .settings-container {
        padding: 5px 20px;
        margin: 10px 0;
        background-color: white;
        border-radius: 10px;
    }

    .invite-ways div {
        margin: 10px 0;
        height: 25px;
        line-height: 25px;
    }

    .invite-ways-info {
        font-size: 16px;
    }

    .invite-ways-messsage {
        font-size: 14px;
        color: dimgray;
    }

    .copy-button {
        box-sizing: border-box;
        display: inline-block;
        border: black 1px solid;
        font-size: 14px;
        border-radius: 3px;
        height: 25px;
        margin: 0 10px;
        padding: 0 5px;
        cursor: pointer;
    }

    .copy-button:hover {
        background-color: lightgray;
    }

    .copy-success {
        display: none;
        color: dimgray;
    }

    #invite-mail {
        height: 25px;
        box-sizing: border-box;
        width: 550px;
        font-size: 14px;
    }

    #invite-message {
        resize: none;
        box-sizing: border-box;
        width: 550px;
        height: 100%;
        font-size: 14px;
    }

    .invite-form-title {
        display: inline-block;
    }

    .invite-form {
        display: flex;
        justify-content: space-between;
    }

    #invite-message-form {
        height: 100px;
    }

    #send-button {
        box-sizing: border-box;
        display: inline-block;
        border: black 1px solid;
        font-size: 14px;
        border-radius: 3px;
        width: 50px;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        cursor: pointer;
    }

    #send-button:hover, #register-submit:hover, #add-submit:hover {
        background-color: lightgray;
    }

    #invite-submit {
        display: flex;
        justify-content: center;
    }

    #register-ch-form, #add-ch-form {
        display: none;
        border: dimgray 1px solid;
        border-radius: 5px;
        padding: 10px 15px;
        margin: 10px 0;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
    }

    #ch-id {
        box-sizing: border-box;
        height: 25px;
        font-size: 14px;
        width: 250px;

    }

    #registered-message {
        padding: 5px 15px;
        margin: 10px 0;
        text-align: center;
    }

    #register-submit, #add-submit {
        border-radius: 2px;
        border: dimgray 1px solid;
        padding: 0 10px;
        cursor: pointer;
        display: inline-block;
        height: 25px;
        box-sizing: border-box;
    }

    #ch-ctrl-link:hover {
        text-decoration: underline;

    }

    .ch-form-elem {
        margin: 10px;
        display: flex;
        justify-content: space-between;
    }

    .ch-form-elem label:hover {
        background-color: #f4f4f7;
    }

    #ch-description, #id_description {
        box-sizing: border-box;
        resize: none;
        width: 400px;
        height: 50px;
    }

    #ch-name, #id_name {
        box-sizing: border-box;
        width: 400px;
        height: 25px;
    }

    #video-controler {
        background-color: white;
        height: 190px;
        border-radius: 5px;
    }

    #contents-container-left {
        width: 800px;
    }

    #ch-type-form {
        width: 400px;
        display: flex;
        justify-content: space-around;
    }

    #live-info {
        margin: 10px;
        height: 30px;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    .networkcondition-container {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }

    .network-condition {
        position: relative;
        width: 15px;
        margin: auto 5px;
        height: 22px;
        box-sizing: border-box;
    }

    .network-condition div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 15px;
        background-color: #ebebeb;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .network-condition div:nth-of-type(1), .remote-network-condition div:nth-of-type(1) {
        top: 0;
    }

    .network-condition div:nth-of-type(2), .remote-network-condition div:nth-of-type(2) {
        top: 4px;
    }

    .network-condition div:nth-of-type(3), .remote-network-condition div:nth-of-type(3) {
        top: 8px;
    }

    .network-condition div:nth-of-type(4), .remote-network-condition div:nth-of-type(4) {
        bottom: 8px;
    }

    .network-condition div:nth-of-type(5), .remote-network-condition div:nth-of-type(5) {
        bottom: 4px;
    }

    .network-condition div:nth-of-type(6), .remote-network-condition div:nth-of-type(6) {
        bottom: 0;
    }

    .remote-network-condition {
        position: relative;
        width: 10px;
        margin: auto 0;
        height: 22px;
        box-sizing: border-box;
    }

    .remote-network-condition div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 10px;
        background-color: #ebebeb;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .audiolevel-container {
        display: flex;
        margin: 0 15px;
    }

    .audio-level-indicator {
        position: relative;
        width: 57px;
        margin: auto 5px;
        height: 20px;
        box-sizing: border-box;
        display: flex;
    }

    .audio-level-indicator div {
        position: absolute;
        height: 20px;
        width: 3px;
        background-color: #ebebeb;
        border-radius: 3px;
        display: inline-block;
        box-sizing: border-box;
    }

    .audio-level-indicator div:nth-of-type(1) {
        left: 0;
    }

    .audio-level-indicator div:nth-of-type(2) {
        left: 6px;
    }

    .audio-level-indicator div:nth-of-type(3) {
        left: 12px;
    }

    .audio-level-indicator div:nth-of-type(4) {
        left: 18px;
    }

    .audio-level-indicator div:nth-of-type(5) {
        left: 24px;
    }

    .audio-level-indicator div:nth-of-type(6) {
        right: 24px;
    }

    .audio-level-indicator div:nth-of-type(7) {
        right: 18px;
    }

    .audio-level-indicator div:nth-of-type(8) {
        right: 12px;
    }

    .audio-level-indicator div:nth-of-type(9) {
        right: 6px;
    }

    .audio-level-indicator div:nth-of-type(10) {
        right: 0;
    }

    .remote-audiolevel-container {
        display: flex;
        margin: 0 5px;
        line-height: 29px;
    }

    .remote-audio-level-indicator {
        position: relative;
        width: 38px;
        margin: auto 2px;
        height: 18px;
        box-sizing: border-box;
        display: flex;
    }

    .remote-audio-level-indicator div {
        position: absolute;
        height: 18px;
        margin: auto 0;
        width: 2px;
        background-color: #ebebeb;
        border-radius: 3px;
        display: inline-block;
        box-sizing: border-box;
    }

    .remote-audio-level-indicator div:nth-of-type(1) {
        left: 0;
    }

    .remote-audio-level-indicator div:nth-of-type(2) {
        left: 4px;
    }

    .remote-audio-level-indicator div:nth-of-type(3) {
        left: 8px;
    }

    .remote-audio-level-indicator div:nth-of-type(4) {
        left: 12px;
    }

    .remote-audio-level-indicator div:nth-of-type(5) {
        left: 16px;
    }

    .remote-audio-level-indicator div:nth-of-type(6) {
        right: 16px;
    }

    .remote-audio-level-indicator div:nth-of-type(7) {
        right: 12px;
    }

    .remote-audio-level-indicator div:nth-of-type(8) {
        right: 8px;
    }

    .remote-audio-level-indicator div:nth-of-type(9) {
        right: 4px;
    }

    .remote-audio-level-indicator div:nth-of-type(10) {
        right: 0;
    }


    .video-resolution-container {
        display: flex;
    }

    .remote-video-resolution-container {
        display: flex;
        line-height: 29px;
    }

    .member {
        display: none;
        justify-content: space-between;
        height: 30px;
        width: 380px;
        margin: 10px;
        line-height: 30px;
    }

    .member-name {
        margin: auto 10px;
    }

    div img {
        vertical-align: middle;
    }

    .video-resolution {
        line-height: 28px;
        font-size: 14px;
        margin: auto 7px;
        color: #4b4b4b;
    }

    .remote-video-resolution {
        font-size: 12px;
        margin: auto 4px;
        color: #4b4b4b;
    }


    .live-menu-button {
        width: 95px;
        height: 60px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
        background-color: rgb(239, 239, 239);
    }

    #change-facing {
        display: none;
    }


    .live-menu-icon {
        height: 30px;
        line-height: 30px;
    }

    .live-menu-string {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
    }

    .select-config {
        height: 30px;
    }

    .delay-container {
        display: flex;
        line-height: 29px;
    }

    .delay {
        font-size: 12px;
        color: #4b4b4b;
        margin: auto 2px;
    }

    .member-info {
        display: flex;
    }

    .member-liveinfo {
        display: flex;
    }

    .chMember {
        display: flex;
        justify-content: left;
        font-size: 15px;
        height: 30px;
        width: 380px;
        margin: 10px 0;
        line-height: 30px;
    }

    .ch-member-name {
        margin: auto 15px;
        font-size: 16px;
    }

    #start-end-live {
        width: 100px;
    }

    .ch-member {
        display: flex;
        align-items: center;
        line-height: 24px;
        width: 50px;
        font-size: 14px;
        justify-content: space-between;
    }

    #message-member-title span {
        margin: auto 8px;
    }

    .ch-info-string {
        height: 20px;
    }

    .ch-info-icon {
        height: 23px;
    }

    .ch-type {
        height: 20px;
        line-height: 21px;
    }

    .settings-container form {
        width: 700px;
        margin: 0px auto;
    }

    .settings-container {
        display: flex;
        justify-content: left;
    }

    .edit-ch-form-elem {
        margin: 20px;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    .edit-ch-form-elem label {
        width: 145px;
    }

    .edit-ch-form-elem label:hover {
        background-color: white;
    }

    .submit-button {
        margin: 10px;
        text-align: center;
    }

    #id_type {
        height: 25px;
    }

    #id_record, #id_notice {
        width: 15px;
        height: 15px;
        margin-left: 0px;
    }

    .ch-link {
        font-size: 14px;
        width: 100px;
        line-height: 30px;
    }

    .ch-link a:hover {
        background-color: initial;
        color: dimgray;
    }

    #select-ch {
        display: flex;
        margin: 10px 5px;
        width: calc(100% - 10px);
        height: 31px;
        overflow-x: scroll;
        white-space: nowrap;
    }

    #select-ch::-webkit-scrollbar {
        display: none;
    }

    .ch-name-button {
        border-radius: 20px;
        border: lightgray 1px solid;
        margin: 0 3px;
        padding: 3px 12px;
        background-color: white;
    }

    .ch-name-button.selected-ch, .ch-name-button:hover {
        background-color: lightgray;
    }

    .app-menu {
        margin: 10px auto;
    }


}


@media (max-width: 1030px) {
    body {
        margin: 0;
    }

    h1 {
        text-align: center;
        font-size: 19px;
        margin: 5px auto;
        line-height: 30px;
    }

    ::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
    }

    #select_app {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        text-align: center;
        margin: 20px auto;
    }

    .app_container {
        margin: 15px;
        width: 120px;
    }

    .app_name {
        background-color: white;
        box-shadow: 2px 2px 4px lightgray;
        height: 110px;
        width: 110px;
        /*border: 1px solid lightgray;*/
        line-height: 110px;
        border-radius: 35px;
        margin: 0 auto;
    }

    .app_name a {
        border-radius: 35px;
    }

    #menu-container {
        position: absolute;
        z-index: 2;
        width: 56%;
        height: 100%;
        background-color: white;
        padding: 5px 0;
        display: none;
    }


    #menu-cover {
        position: absolute;
        width: 100%;
        background-color: lightgrey;
        opacity: 0.5;

    }

    .active {
        z-index: 1;
        height: 100%;
    }

    .menu {
        height: 55px;
        width: 55vw;
        border-bottom: solid gray 1px;
        box-sizing: border-box;
    }

    .menu a {
        height: 100%;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    #live-header {
        display: flex;
        justify-content: space-between;
    }

    .menu-icon {
        position: relative;
        width: 115px;
        margin: 5px 10px;
        height: 19px;
        box-sizing: border-box;
    }

    .menu-icon div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 25px;
        background-color: #444444;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .menu-icon div:nth-of-type(1) {
        top: 0;
    }

    .menu-icon div:nth-of-type(2) {
        top: 8px;
    }

    .menu-icon div:nth-of-type(3) {
        bottom: 0;
    }

    .menu-close-icon {
        font-size: 44px;
        height: 29px;
        padding: 0 0 0 9px;
        margin: 0;
        width: 50px;
        line-height: 20px;
        color: #444444;
    }

    .profile-container {
        display: flex;
        flex-direction: row;
        width: 130px;
        margin-right: 10px;
        justify-content: flex-end;
    }

    .member-icon {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .login-link {
        color: black;
        cursor: pointer;
        text-decoration: underline;
        font-size: 15px;
        font-weight: normal;
        height: 30px;
    }

    .login-link:hover {
        background-color: #f4f4f7;
        color: gray;
    }

    .mypage-link {
        color: black;
        font-size: 15px;
        font-weight: normal;
        height: 30px;
        overflow: hidden;
    }

    #contents-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background-color: #f4f4f7;
    }


    #file-list-container {
        width: 100%;
    }


    #live-title {
        height: 30px;
        display: flex;
        justify-content: space-between;
        margin: 5px 15px;
    }

    #live-title p {
        margin: 0;
        line-height: 40px;
        height: 30px;
        overflow: hidden;
    }


    #leave-live, #end-screen-share, #ans-off, #unmute, #video-on {
        display: none;
    }

    #message-content {
        width: calc(100% - 90px);
        height: 26px;
        font-size: 15px;
        border-radius: 20px;
        border-width: thin;
        padding-left: 8px;
    }

    #send-message {
        display: none;
        justify-content: space-between;
        margin: 5px 10px;
    }

    #message-submit {
        width: 70px;
        color: black;
        border-radius: 10px;
        border-width: 0;
        height: 30px;
    }

    #message-submit:hover {
        background-color: lightgray;
    }

    #channel-message {
        display: none;
    }

    #channel-message-sp {
        margin: 10px 15px;
        font-size: 13px;
        color: dimgray;
    }

    .channel-message-link {
        display: inline;
        text-decoration: underline;
    }

    #message-container {
        font-size: 13px;
        overflow: scroll;
        width: 100%;
    }

    #member-container {
        font-size: 13px;
        display: none;
        overflow: scroll;
        width: 100%;
    }

    #member-list p {
        margin: 5px 0
    }

    #message-list p {
        display: flex;
        justify-content: space-between;
        margin: 5px 0
    }

    #message-list p div:nth-of-type(1) {
        width: 70px;
        margin: 0 0 0 5px;
        font-size: 13px;
        word-break: break-all;
    }

    #message-list p div:nth-of-type(2) {
        width: calc(100% - 140px);
        margin: 0 0 0 5px;
        font-size: 13px;
    }

    #message-list p div:nth-of-type(3) {
        width: 55px;
        text-align: right;
        margin: 0 5px 0 0;
        color: dimgrey;
        font-size: 12px;
        line-height: 21px;
    }

    #message-member-title {
        display: flex;
        justify-content: space-around;
        margin: 5px 5px 0 5px;
    }

    #message-member-title div {
        width: 50%;
        text-align: center;
        height: 28px;
        line-height: 29px;
        border-radius: 5px 5px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #message-title {
        background-color: white;
    }

    #live-menu-container {
        margin: 5px 5px;
        height: 50px;
    }

    #live-menu {
        justify-content: space-between;
        margin: 5px 5px;
        display: none;
        align-items: center;
        height: 50px;
    }

    #live-menu-audience {
        display: none;
    }

    #live-menu button {
        width: 75px;
        height: 30px;
        -webkit-appearance: none;
        padding: 1px;
        border-radius: 5px;
        font-size: 14px;
        line-height: 25px;
    }

    #start-live {
        background-color: #3da6ff;
        color: black;
        border: #3da6ff 2px solid;
    }

    #start-live:hover {
        background-color: #2196f3;
        border: #2196f3 2px solid;
    }

    .sp-none {
        display: none;
    }

    .video-player {
        margin: 5px auto;
        height: calc(900vw / 16);
        position: relative;
        border-radius: 5px;
        background-color: white;
    }

    #video {
        width: 100%;
        height: 100%;
    }

    #start-menu-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 400px;
        height: 200px;
        margin: auto;
    }

    .start-menu {
        text-align: center;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .start-menu input, .config-container input {
        display: none;
    }

    .start-menu label {
        display: inline-block;
        padding: 2px 5px;
        border-radius: 3px;
        width: 75px;
        height: 25px;
        text-align: center;
        margin: 5px;
        line-height: 25px;
        background-color: #f4f4f7;
    }

    #select-camera {
        display: none;
    }

    #select-camera label {
        width: 125px;
        overflow: hidden;
    }

    .config-container label {
        display: block;
        padding: 2px 5px;
        width: 90px;
        height: 30px;
        line-height: 25px;
        text-align: center;
        box-sizing: border-box;

    }

    .config-container {
        position: absolute;
        z-index: 1;
        font-size: 14px;
        display: none;
        border-radius: 10px;
        background-color: #ebebeb;
    }

    .start-menu input:checked + label {
        background-color: lightgray;
    }

    .config-container input:checked + label {
        background-color: lightgray;
    }

    #prepare-live {
        display: block;
        margin: 10px auto;
        height: 30px;
        background-color: #3da6ff;
        border: #3da6ff 1px solid;
        border-radius: 5px;
        color: black;
    }


    #start-view {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 50px;
        margin: auto;
        border-radius: 30px;
        color: black;
        background-color: #3da6ff;
        border: #3da6ff 1px solid;
    }

    #start-view:hover {
        background-color: #2196f3;
        border: #2196f3 1px solid;
    }


    #live-end-message, #live-wait-message {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: auto;
        border-radius: 30px;
    }

    #message-member-container {
        display: flex;
        justify-content: space-between;
        margin: 0 5px;
        background-color: white;
        height: calc(100vh - (900vw / 16) - 110px);
    }

    .file-container {
        height: calc(405vw / 16);
        background-color: white;
        margin: 7px auto;
        position: relative;
        border-radius: 15px;
    }

    .thumbnail {
        width: 45%;
        height: calc(405vw / 16);
    }

    .thumbnail img {
        width: 100%;
        height: 100%;
        border-radius: 15px 0 0 15px;
    }

    .archive-menu-container {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .archive-menu {
        display: none;
        width: 80px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        border: 1px solid dimgrey;
        border-radius: 2px;
        margin: 5px 0 0 0;
        background-color: white;
    }

    .archive-menu:hover {
        background-color: lightgrey;
    }

    .menu-button {
        cursor: pointer;
        width: 30px;
        margin: 0 0 0 auto;
    }

    .menu-button:hover {
        color: lightgrey;
    }

    .menu-button div {
        height: 7px;
        line-height: 7px;
        padding: 0 0 0 7px;
    }


    .file-container a {
        display: flex;
        border-radius: 15px;
    }


    .live-info {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        width: 55%;
    }

    .live-info p {
        padding: 0 25px;
        margin: 0;
        overflow: hidden;
        height: 23px;
        font-size: 13px;
        line-height: 23px;
    }

    #start-screen-share {
        display: none;
    }

    .user-info {
        display: flex;
        border-bottom: lightgray 1px solid;
    }

    .user-info div {
        height: 50px;
        line-height: 30px;
        background-color: white;
        padding: 10px 0 10px 15px;
        box-sizing: border-box;
    }

    #user-info-container {
        width: 100%;
        margin: 20px auto;
        box-shadow: 0 0 8px 5px lightgray;
        font-size: 14px;
    }

    .user-info div:nth-of-type(1) {
        width: 40%;
    }

    .user-info div:nth-of-type(2) {
        width: 60%;
    }

    .user-info div:nth-of-type(3) {
        width: 25%;
        display: none;
    }

    #signup-form {
        border: 1px solid #444444;
        padding: 10px;
        margin: 0 auto;
    }

    #signup-form span {
        font-size: 13px;
        color: gray;
        display: block;
        padding: 7px 20px;
    }

    #signup-form ul {
        font-size: 13px;
        color: gray;
        display: block;
        padding: 0 20px 7px 20px;
        margin: -17px 10px 0 10px;
        list-style: none;
    }

    #signup-form label {
        display: inline-block;
        width: 150px;
    }

    #signup-form p {
        margin: 10px;
    }

    #signup-form input {
        height: 22px;
        font-size: 15px;
    }

    #button-container {
        text-align: center;
        padding: 10px 0 0 0;
    }

    #id_email {
        width: 325px;
    }

    #ch-list {
        width: 100%;
        margin: 0 auto;
    }

    #ch-select-message {
        text-align: center;
        margin: 10px 0;
        height: 60px;
        line-height: 30px;
    }

    #add-ch, #register-ch {
        background-color: white;
        border-radius: 15px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        width: 150px;
    }


    .ch-container {
        width: 100%;
        height: 80px;
        margin: 3px 0;
        border-radius: 10px;
        background-color: white;
    }

    .ch-container a {
        display: flex;
        height: 100%;
        border-radius: 10px;
    }

    .ch-info-left {
        width: 50%;
    }

    .ch-info-right {
        width: 50%;
        font-size: 14px;
    }

    .ch-info-elem {
        height: 50%;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        line-height: 20px;
    }


    .ch-name {
        font-size: 16px;
        margin: 0 0 0 10px;
    }

    .ch-host {
        color: gray;
        font-size: 13px;
        margin: 0 0 0 25px;
    }

    #make-ch-container {
        width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    #ch-ctrl-container {
        width: 100%;
    }

    #ch-ctrl {
        width: 100%;
        margin: 10px auto;
    }

    #ch-title {
        border-bottom: black 1px solid;
        font-size: 17px;
        height: 30px;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    #ch-menu-container {
        display: flex;
        justify-content: space-between;
    }

    .ch-contents {
        padding: 10px 5px;
        font-size: 14px;
    }

    .ch-menu {
        width: 25%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        box-sizing: border-box;
        margin: 0 5px;
    }

    .ch-menu.selected-menu, .ch-menu:hover {
        border-bottom: dimgray 2px solid;
    }

    .invite-ways, .member-container, .settings-container {
        padding: 5px 10px;
        margin: 10px 0;
        background-color: white;
        border-radius: 10px;
    }

    .invite-ways div {
        margin: 10px 0;

        line-height: 25px;
    }

    .invite-ways-info {
        font-size: 15px;
    }

    .invite-ways-messsage {
        font-size: 14px;
        color: dimgray;
    }

    .copy-button {
        box-sizing: border-box;
        display: inline-block;
        border: black 1px solid;
        font-size: 14px;
        border-radius: 3px;
        height: 25px;
        margin: 0 10px;
        padding: 0 5px;
        cursor: pointer;
    }

    .copy-button:hover {
        background-color: lightgray;
    }

    .copy-success {
        display: none;
        color: dimgray;
    }

    #invite-mail {
        height: 25px;
        box-sizing: border-box;
        width: 550px;
        font-size: 14px;
    }

    #invite-message {
        resize: none;
        box-sizing: border-box;
        width: 550px;
        height: 100px;
        font-size: 14px;
    }

    .invite-form-title {
        display: inline-block;
    }

    .invite-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }


    #send-button {
        box-sizing: border-box;
        display: inline-block;
        border: black 1px solid;
        font-size: 14px;
        border-radius: 3px;
        width: 50px;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        cursor: pointer;
    }

    #send-button:hover {
        background-color: lightgray;
    }

    #invite-submit {
        display: flex;
        justify-content: center;
    }

    #register-ch-form, #add-ch-form {
        display: none;
        border: dimgray 1px solid;
        border-radius: 5px;
        padding: 10px 15px;
        margin: 10px 0;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
    }

    #ch-id {
        box-sizing: border-box;
        height: 25px;
        font-size: 14px;
        width: 250px;
    }

    #registered-message {
        padding: 5px 15px;
        margin: 10px 0;
        text-align: center;
    }

    #register-submit {
        border-radius: 2px;
        border: dimgray 1px solid;
        padding: 0 10px;
        cursor: pointer;
    }

    #ch-ctrl-link:hover {
        text-decoration: underline;
    }

    .ch-form-elem {
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ch-form-elem label:hover {
        background-color: #f4f4f7;
    }

    #ch-description {
        box-sizing: border-box;
        resize: none;
        width: 400px;
        height: 50px;
    }

    #ch-name {
        box-sizing: border-box;
        width: 400px;
        height: 25px;
    }

    #ch-type-form {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    #live-info {
        margin: 10px;
        height: 30px;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    .live-audience-video-controler {
        height: 120px;
    }

    .live-host-video-controler {
        height: 175px;
    }

    .networkcondition-container {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }

    .network-condition {
        position: relative;
        width: 15px;
        margin: auto 5px;
        height: 22px;
        box-sizing: border-box;
    }

    .network-condition div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 15px;
        background-color: #ebebeb;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .network-condition div:nth-of-type(1), .remote-network-condition div:nth-of-type(1) {
        top: 0;
    }

    .network-condition div:nth-of-type(2), .remote-network-condition div:nth-of-type(2) {
        top: 4px;
    }

    .network-condition div:nth-of-type(3), .remote-network-condition div:nth-of-type(3) {
        top: 8px;
    }

    .network-condition div:nth-of-type(4), .remote-network-condition div:nth-of-type(4) {
        bottom: 8px;
    }

    .network-condition div:nth-of-type(5), .remote-network-condition div:nth-of-type(5) {
        bottom: 4px;
    }

    .network-condition div:nth-of-type(6), .remote-network-condition div:nth-of-type(6) {
        bottom: 0;
    }

    .remote-network-condition {
        position: relative;
        width: 10px;
        margin: auto 0;
        height: 22px;
        box-sizing: border-box;
    }

    .remote-network-condition div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 10px;
        background-color: #ebebeb;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .audiolevel-container {
        display: flex;
        margin: 0 15px;
    }

    .audio-level-indicator {
        position: relative;
        width: 57px;
        margin: auto 5px;
        height: 20px;
        box-sizing: border-box;
        display: flex;
    }

    .audio-level-indicator div {
        position: absolute;
        height: 20px;
        width: 3px;
        background-color: #ebebeb;
        border-radius: 3px;
        display: inline-block;
        box-sizing: border-box;
    }

    .audio-level-indicator div:nth-of-type(1) {
        left: 0;
    }

    .audio-level-indicator div:nth-of-type(2) {
        left: 6px;
    }

    .audio-level-indicator div:nth-of-type(3) {
        left: 12px;
    }

    .audio-level-indicator div:nth-of-type(4) {
        left: 18px;
    }

    .audio-level-indicator div:nth-of-type(5) {
        left: 24px;
    }

    .audio-level-indicator div:nth-of-type(6) {
        right: 24px;
    }

    .audio-level-indicator div:nth-of-type(7) {
        right: 18px;
    }

    .audio-level-indicator div:nth-of-type(8) {
        right: 12px;
    }

    .audio-level-indicator div:nth-of-type(9) {
        right: 6px;
    }

    .audio-level-indicator div:nth-of-type(10) {
        right: 0;
    }

    .remote-audiolevel-container {
        display: flex;
        margin: 0 5px;
        line-height: 29px;
    }

    .remote-audio-level-indicator {
        position: relative;
        width: 38px;
        margin: auto 2px;
        height: 18px;
        box-sizing: border-box;
        display: flex;
    }

    .remote-audio-level-indicator div {
        position: absolute;
        height: 18px;
        margin: auto 0;
        width: 2px;
        background-color: #ebebeb;
        border-radius: 3px;
        display: inline-block;
        box-sizing: border-box;
    }

    .remote-audio-level-indicator div:nth-of-type(1) {
        left: 0;
    }

    .remote-audio-level-indicator div:nth-of-type(2) {
        left: 4px;
    }

    .remote-audio-level-indicator div:nth-of-type(3) {
        left: 8px;
    }

    .remote-audio-level-indicator div:nth-of-type(4) {
        left: 12px;
    }

    .remote-audio-level-indicator div:nth-of-type(5) {
        left: 16px;
    }

    .remote-audio-level-indicator div:nth-of-type(6) {
        right: 16px;
    }

    .remote-audio-level-indicator div:nth-of-type(7) {
        right: 12px;
    }

    .remote-audio-level-indicator div:nth-of-type(8) {
        right: 8px;
    }

    .remote-audio-level-indicator div:nth-of-type(9) {
        right: 4px;
    }

    .remote-audio-level-indicator div:nth-of-type(10) {
        right: 0;
    }


    .video-resolution-container {
        display: flex;
    }

    .remote-video-resolution-container {
        display: flex;
        line-height: 29px;
    }

    .member {
        display: none;
        justify-content: space-between;
        height: 30px;
        margin: 10px;
        line-height: 30px;
    }

    .member-name {
        margin: auto 10px;
    }

    div img {
        vertical-align: middle;
    }

    .video-resolution {
        line-height: 27px;
        font-size: 12px;
        margin: auto 7px;
        color: #4b4b4b;
    }

    .remote-video-resolution {
        font-size: 12px;
        margin: auto 4px;
        color: #4b4b4b;
    }


    .live-menu-button {
        width: 90px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
        background-color: rgb(239, 239, 239);
    }


    .live-menu-icon {
        height: 30px;
        line-height: 30px;
    }

    .live-menu-string {
        font-size: 13px;
        overflow: hidden;
        height: 20px;
    }

    .select-config {
        height: 30px;
    }

    .delay-container {
        display: flex;
        line-height: 29px;
    }

    .delay {
        font-size: 12px;
        color: #4b4b4b;
        margin: auto 2px;
    }

    .member-info {
        display: flex;
    }

    .member-liveinfo {
        display: flex;
    }

    #video-controler {
        background-color: white;
        border-radius: 5px;
    }

    #leave-live {
        background-color: #cc0100;
        border-radius: 8px;
        border: #cc0100 2px solid;
        color: white;
    }

    .chMember {
        display: flex;
        justify-content: left;
        font-size: 15px;
        height: 30px;
        margin: 10px 0;
        line-height: 30px;
    }

    .ch-member-name {
        margin: auto 15px;
        font-size: 14px;
    }

    #start-end-live {
        width: 75px;
    }

    .ch-member {
        display: flex;
        align-items: center;
        line-height: 20px;
        width: 50px;
        font-size: 14px;
        justify-content: space-between;
    }

    #message-member-title span {
        margin: auto 8px;
    }

    .ch-info-string {
        height: 20px;
    }

    .ch-info-icon {
        height: 23px;
    }

    .ch-type {
        height: 20px;
        line-height: 21px;
    }

    .settings-container form {
        width: 100%;
        margin: 0 auto;
    }

    .settings-container {
        display: flex;
        justify-content: left;
    }

    .edit-ch-form-elem {
        margin: 20px 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }

    .edit-ch-form-elem label {
        width: 135px;
    }

    .edit-ch-form-elem label:hover {
        background-color: white;
    }

    .submit-button {
        margin: 10px;
        text-align: center;
    }

    #id_type {
        height: 25px;
    }

    #id_record, #id_notice {
        width: 15px;
        height: 15px;
        margin-left: 0px;
    }

    .ch-link {
        font-size: 14px;
        width: 100px;
        line-height: 30px;
    }

    #id_description {
        box-sizing: border-box;
        resize: none;
        width: calc(100% - 135px);
        height: 50px;
    }

    #id_name {
        box-sizing: border-box;
        width: calc(100% - 135px);
        height: 25px;
    }

    .ch-link a:hover {
        background-color: initial;
        color: dimgray;
    }

    #select-ch {
        display: flex;
        margin: 10px 5px;
        width: calc(100% - 10px);
        height: 31px;
        overflow-x: scroll;
        white-space: nowrap;
    }

    #select-ch::-webkit-scrollbar {
        display: none;
    }

    .ch-name-button {
        border-radius: 20px;
        border: lightgray 1px solid;
        margin: 0 3px;
        padding: 3px 12px;
        background-color: white;
    }

    .ch-name-button.selected-ch, .ch-name-button:hover {
        background-color: lightgray;
    }

    .app-menu {
        margin: 10px auto;
    }
}