/* ----- 共通設定 ----- */
table {
    border-collapse: collapse;
}

tr,
td {
    padding: 0;
}

*,
::after,
::before {
    box-sizing: border-box
}

/* ----- ログイン画面 関係 ----- */
.login-box {
    width: 60vh;
    height: 70vh;
    margin: 15vh auto;

    color: black;
    background-color: white;
    border: 2px solid black;
}

.login-flex-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    width: 100%;
    height: 100%;
}

.login-title {
    width: 100%;
    height: 20%;
    margin-top: 8%;
    padding: 2% 2% 0;

    background-color: inherit;
}

.sub-title {
    text-align: left;
    margin-left: 10%;
}

.title {
    text-align: center;
}

.login-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 15%;
    margin-top: 5%;
    padding: auto 0;
    background-color: inherit;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 60%;

    background-color: inherit;
}

/* ログイン情報入力フィールドのサイズ設定用 */
.login-fields-container {
    width: 80%;
    height: 17%;
    margin: 2% 0;

    background-color: inherit;
}

/* ログイン情報入力フィールドの設定用 */
.login-fields-content {
    /* ここは変更しない */
    width: 100%;
    height: 100%;

    /* ここから変更OK */
    border: 2px solid #CFD5DB;
    background-color: inherit;
    border-radius: 10px;
    font-size: 1em;
}

.login-button {
    display: block;
    width: 150px;
    height: 50px;
    margin-bottom: 10%;
}

/* ----- アカウント設定画面 関係 ----- */

/* 全カラム共通の設定 */
.accset-table {
    height: 70px;
}

/* 有効、削除ボタンカラム用の設定 */
.accset-col1 {
    width: 10%;
    min-width: 105px;
}

/* アカウント名カラム用の設定 */
.accset-col2 {
    width: 30%;
    min-width: 185px;
}

/* パスワードカラム用の設定画面 */
.accset-col3 {
    width: 50%;
    min-width: 265px;
}

.non-border {
    border: 0 none;
    background-color: transparent;
}

.accset-chckbox{
    width: 20px;
    height: 20px;
    box-sizing: border-box;
}

/* ----- 監視設定画面 ----- */

/* 全カラム共通の設定 */
.moniset-table {
    padding: 10px 0;
}

/* 監視対象カラムの設定 */
.moniset-col1 {
    width: 5%;
    min-width: 45px;
}

/* 名称、MACアドレス、グローバルIPアドレスの設定 */
.moniset-col2 {
    width: 20%;
    min-width: 155px;
}

.moniset-col3 {
    width: 12%;
    min-width: 50px;
}

/* ----- レポート画面 関係 ----- */
.report-content {
    margin-top: 35px;
    padding: 10px 20px;
    border: 2px solid black;
    height: 100%;
}

/* ----- サイドメニュー関係 ----- */
.sidemenu {
    /* サイドメニューの色と枠線を変更 */
    background-color: #D9D9D9;
    border: 2px solid black;

    /* サイドメニューを画面下まで伸ばす */
    height: 100vh;
}

/* ----- ページ関係 ----- */

/* ページの背景色を設定 */
body {
    background-color: #f2f2f2;
}

/* ヘッダの設定 */
header {
    background-color: #D9D9D9;
    color: black;
    border: 2px solid black;
    padding: 20px;
    text-align: left;
}

/* ----- ダイアログ関係 ----- */

/* ダイアログ自体 */
dialog {
    background-color: white;
    width: 500px;
    height: 700px;
    padding: 0;
    border: 2px solid black;
    text-align: center;
}

/* ダイアログの背景 */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

/* フレックスボックス(横並び) */
.flex-content-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

/* フレックスボックス(縦並び) */
.flex-content-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    width: 100%;
    height: 100%;
    padding: 20px 30px;
}

/* コンテンツのレイアウト(ダイアログ1) */
.flex-content-vertical.flex-content-vertical input {
    margin: 20px;
    padding: 10px 15px;
    border: 2px solid black;
}

/* コンテンツの配置(縦に上寄せ、横に中央寄せ) */
.dialog-contents-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin-top: 35px;
}

/* キャンセルボタン用の見た目設定 */
.cancel-button {
    background-color: #BFBFBF;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 5px 30px;
}

/* ----- table関係 ----- */

/* 隣り合った枠線を繋げて1本の線にする */
table {
    border-collapse: collapse;
}

/* ヘッダー/セルの共通設定 */
th,
td {
    border: 2px solid black;
    padding: 8px 30px;
    text-align: center;
}

/* ヘッダーの個別設定 */
th {
    background-color: #FF7C80;
    color: white;
    text-align: center;
}

/* セルの個別設定 */
td {
    background-color: white;
}

/* テーブル内に表示するアイテムを、同じ行で表示するためのクラス */
.sameLine-in-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ----- 見た目関係 ----- */

/* ボタンの見た目設定 */
.button01 {
    background-color: #FF7C80;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 5px 30px;
}

/* ボタンの見た目設定(カーソルが合ったとき) */
.button01:hover {
    background-color: #ff999c;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 5px 30px;
}

/* +,-ボタンの見た目設定 */
.button02 {
    background-color: #FF7C80;
    border: 2px solid black;
    border-radius: 30px;
    color: white;
    padding: 10px 15px;
}

/* +,-ボタンの見た目設定(カーソルが合ったとき) */
.button02:hover {
    background-color: #ff999c;
    border: 2px solid black;
    border-radius: 30px;
    color: white;
    padding: 10px 15px;
}

/* 入力フィールドの見た目設定 */
input[type="text"] {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

/* セル内いっぱいに入力フィールドを表示する設定 */
.full-cell-input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    font-size: 20px;
    padding: 0;
    margin: 0;
}

/* セル内いっぱいにチェックボックスを表示する設定 */
.full-cell-check {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}