/* Webメール用 */

/* メール一覧用 */
.form-list {
  max-width: 100%;
  padding: 15px;
  margin: 0 auto;
}
.not-read {
  /* 未読 */
  font-weight: bold;
}
.table a:visited {
  /* color: -webkit-link;*/
  color: #551b8c;
}
.table a:hover {
  color: #ff0000;
}
.progress {
  height: 20px;
  width: 200px;
  margin-bottom: 10px;
}
.progress > .bg-warning {
  color: black;
}
.progress > .bg-danger {
  color: white;
}

/* メール詳細用 */
.form-detail {
  max-width: 100%;
  padding: 15px;
  margin: 0 auto;
}
.table-mail-detail {
  margin-bottom: 0;
}

.mail-body {
  border: 1px solid #dee2e6;
  padding: 10px;
}

/* メール作成用 */
.table-mail-new th{
  width: 150px;
/*
  min-width: 80px;
  max-width: 150px;
  */
  background-color: #b8daff;
}

/* 一覧画面 */
th.mail-subject {
  /*width: 600px;*/
  min-width: 200px;
}
th.mail-receipt {
  /*width: 200px;*/
  min-width: 200px;
}
th.mail-receive-date {
  /*width: 150px;*/
}
.mail-list-button,
#DropDownMenuTop {
  margin-bottom: 0.5rem;
}
.progress-box {
  display: flex;
  /*margin-top: 1rem;*/
}
.progress-update {
  margin-left: 10px;
  display: flex;
}
.page-num-box {
  display: flex;
  /*margin-top: 1rem;*/
}
.page-num {
  margin:0 0 0 auto;
}

/* add 2021.04.01 ikeda */
#form-list input[type="checkbox"] {
  margin: 5px;
}

/* 詳細画面 */
.mail-html-link {
  cursor: pointer;
  font-weight: bold;
  color: #f1554d;
}
.table-mail-detail th{
  background-color: #b8daff;
}

#mail-detail-button-top {
  margin-bottom: 0.5rem;
}
#mail-detail-button-bottom {
  margin-top: 0.5rem;
}
.mail-detail-menu {
  display: none;
}

/**********
 * アイコン
 *********/
/* アイコン 新着メールの確認 */
.ico-mail-receive::before {
  font-family: "Font Awesome 5 Free";
  content: '\f019';
  font-weight: 900;
  color: #fff;
}
/* アイコン 新規作成 */
.ico-mail-new::before {
  font-family: "Font Awesome 5 Free";
  content: '\f044';
  font-weight: 900;
  color: #fff;
}
/* アイコン 削除 */
.ico-mail-delete::before {
  font-family: "Font Awesome 5 Free";
  content: '\f2ed';
  font-weight: 900;
  /*color: #fff;*/
}
/* アイコン 添付ファイル */
.ico-mail-temp::before {
  font-family: "Font Awesome 5 Free";
  content: '\f0c6';
  font-weight: 900;
}
/* アイコン 返信 */
.ico-mail-reply::before {
  font-family: "Font Awesome 5 Free";
  content: '\f3e5';
  font-weight: 900;
}
/* アイコン 全員に返信 */
.ico-mail-allreply::before {
  font-family: "Font Awesome 5 Free";
  content: '\f122';
  font-weight: 900;
}
/* アイコン 転送 */
.ico-mail-transfer::before {
  font-family: "Font Awesome 5 Free";
  content: '\f064';
  font-weight: 900;
}
/* アイコン 前 */
.ico-mail-prev::before {
  font-family: "Font Awesome 5 Free";
  content: '\f060';
  font-weight: 900;
}
/* アイコン 次 */
.ico-mail-next::before {
  font-family: "Font Awesome 5 Free";
  content: '\f061';
  font-weight: 900;
}
/* アイコン 送信 */
.ico-mail-send::before {
  font-family: "Font Awesome 5 Free";
  content: '\f1d8';
  font-weight: 900;
}

/* 共通 */
.sp-only {
  display: none;
}

/**********
 * レスポンシブ対応
 **********/
@media screen and (max-width: 991px) {
  .table-mail-new th {
    width: initial;
  }
  
  .mail-detail-button {
    display: none;
  }
  .mail-detail-menu {
    /*display: initial;*/
    display: block;
  }
  
  .progress-box {
    display: initial;
  }
  .progress {
    /*margin-top: 10px;*/
  }
  .progress-update {
    margin: 0;
  }
  .progress-update {
    display: initial;
  }
  
  /* メール一覧 */
  .table-mail-list {
    width: 100%;
  }
  .table-mail-list .thead {
    display: none;
  }
  .table-mail-list tr {
    width: 100%;
  }
  .table-mail-list td {
    display: block;
    text-align: left;
    width: 100%;
    background-color: #fff;
  }
  .table-mail-list td:first-child {
    background-color: #b8daff;
    /*color: #fff;*/
    font-weight: bold;
    text-align: left;
  }
  .table-mail-list td:not(:first-child):before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
  
  .table-mail-list td:first-child:after {
    content: attr(data-label);
    font-weight: bold;
    margin-left: 10px;
  }
  .sp-only {
    display: block;
  }
}

/**********
 * メール転送画面
 **********/
/* アイコン 登録 */
.ico-edit::before {
  font-family: "Font Awesome 5 Free";
  content: '\f044';
  font-weight: 900;
}
/* アイコン 削除 */
.ico-delete::before {
  font-family: "Font Awesome 5 Free";
  content: '\f2ed';
  font-weight: 900;
  /*color: #fff;*/
}

.table-mail-transfer a:visited {
  color: white;
}
.table-mail-transfer-list a:visited {
  color: white;
}

/* メール転送用 */
.table-mail-transfer th{
  width: 150px;
  background-color: #feffb8;
}



.table-mail-transfer-list td:first-child {
  /*background-color: #fbf5f5;*/
}
@media screen and (max-width: 640px) {
  .table-mail-transfer-list {
    width: 80%;
  }
  .table-mail-transfer-list .thead {
    display: none;
  }
  .table-mail-transfer-list tr {
    width: 100%;
  }
  .table-mail-transfer-list td {
    display: block;
    text-align: right;
    width: 100%;
    background-color: #fff;
  }
  .table-mail-transfer-list td:first-child {
    background-color: #b8daff;
    /*color: #fff;*/
    font-weight: bold;
    text-align: center;
  }
  .table-mail-transfer-list td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
}



@media screen and (max-width: 640px) {
  .table-mail-list {
    width: 80%;
  }
  .table-mail-list .thead {
    display: none;
  }
  .table-mail-list tr {
    width: 100%;
  }
  .table-mail-list td {
    display: block;
    text-align: left;
    width: 100%;
    background-color: #fff;
  }
  .table-mail-list td:first-child {
    background-color: #b8daff;
    /*color: #fff;*/
    font-weight: bold;
    text-align: left;
  }
  .table-mail-list td:not(:first-child):before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
  }
  
  .table-mail-list td:first-child:after {
    content: attr(data-label);
    font-weight: bold;
    margin-left: 10px;
  }
}


/* メール転送新規成用 */
.table-transfer-new th{
  width: 250px;
  background-color: #b8daff;
}
.transfer-address {
  width: 600px;
}

@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .table-transfer-new {
    width: 100%;
  }
  .table-transfer-new th,
  .table-transfer-new td {
    border-bottom: none;
    display: block;
    width: 100%;
  }
  .transfer-address {
    width: 100%;
  }
}