@charset "UTF-8";

/* ローカルナビの設定 */
#local_navi{
    display: flex;
    flex-direction: column;
    width: 50px;
    height: calc(100vh - 80px);
    margin: 50px 0 30px 0;
    position: fixed;
    background-color: rgb(80, 80, 85);
}
#local_navi ul{
    padding: 0;
}
#local_navi button{
    display: block;
    width: 50px;
    height: 50px;
    padding: 0;
    background-color: rgb(80, 80, 85);
    border: none;
}
#local_navi button:hover{
    background-color: rgb(16, 16, 26);
}
#local_navi button img{
    width: 50px;
    height: 50px;
    opacity: 0.5;
}
#local_navi button img:hover{
    opacity: 1;
}
#local_navi .side_panel{
    margin: 0;
}
#local_navi .side_panel:last-child{
    /* 準備中 */
    display: none;
    margin-top: auto;
}

/* サイドウィンドウの設定 */
.side_window{
    display: none;
    width: 130px;
    height: calc(100vh - 80px);
    margin: 50px 0 30px 50px;
    position: fixed;
    background-color: rgb(37, 37, 53);
}
.side_window .button_container{
    display: flex;
    flex-wrap: wrap;
}
.side_window p{
    line-height: 3rem;
    text-indent: 10px;
    margin: 0;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 35);
}
.side_window button{
    width: 50px;
    height: 50px;
    margin: 5px 0 5px 10px;
    padding: 0;
    background-color: rgb(37, 37, 53);
    border: none;
}
.side_window button img{
    width: 50px;
    height: 50px;
}
.side_window button img:hover{
    opacity: 0.5;
}
.side_window button img:active{
    background-color: rgb(16, 16, 26);
}

/* ファイラーの設定 */
#filer input{
    display: none;
}

/* メインウィンドウの設定 */
#main_window{
    width: calc(100vw - 50px);
    height: calc(100vh - 80px);
    margin: 50px 0 30px 50px;
    position: fixed;
    background-color: rgb(16, 16, 26);
    color: rgb(255, 255, 255);
}
#main_window iframe{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

/* チャットウィンドウの設定 */
#chat_window{
    display: none;
    width: 20%;
    height: calc(100vh - 80px);
    margin: 50px 0 30px 50px;
    position: fixed;
    right: 0;
    background-color: rgb(51, 51, 75);
    color: rgb(255, 255, 255);
}
#chat_window iframe{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

/* footerの設定 */
#footer{
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    background-color: rgb(64, 64, 72);
}
#footer span{
    line-height: 30px;
    font-size: 0.75rem;
    color: rgb(255, 255, 255);
}
#footer span:first-child{
    margin-left: 15px;
}
#message{
    margin-left: 15px;
}

/* 新規作成ダイアログの設定 */
#file_create_dialog{
    background-color: rgb(80, 80, 85);
    color:rgb(255, 255, 255);
}
#file_create_dialog dl{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#file_create_dialog dt{
    width: 25%;
    margin: 15px 0;
    padding-right: 15px;
    box-sizing: border-box;
    text-align: right;
}
#file_create_dialog dd{
    width: 75%;
    margin: 15px 0;
    padding-right: 10%;
    box-sizing: border-box;
}
#file_create_dialog input{
    width: 100%;
    padding: 0.5rem;
}
#file_create_dialog div{
    text-align: right;
}
#file_create_dialog button{
    width: 8rem;
    padding: 10px;
}