/* CSS Document */
/* 共通レイアウトの設定
基本　全部共通　re.css*/
html,
body {
  font-family: "メイリオ", Meiryo, verdana, "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
  height: 100%;
  width: 100%;
}

body {
  background-color: #ffffff;
  background: #ffffff;
  margin: 0px;
  padding: 0px;
  text-align: left;
  font-size: 12px;
  color: #666666;
  width: 100%;
}

body input {
  font-family: inherit;
  font-size: 12px;
}

/* ラッパーの設定*/
#wrap {
  position: relative;
  width: 100%;
  min-width: 1024px;
  background-color: #ffffff;
  margin: 0px auto;
  text-align: left;
  color: #666666;
}

/* フォントの設定*/
.gray_10px {
  font:
    12px "ＭＳ Ｐゴシック",
    Osaka,
    "ヒラギノ角ゴ Pro W3";
  color: #333333;
}

.red_10px {
  font:
    12px "ＭＳ Ｐゴシック",
    Osaka,
    "ヒラギノ角ゴ Pro W3";
  color: #660000;
}

/* 警告_白地 */
span.warn {
  color: red;
}

/* 警告_緑地 */
span.warn_yellow {
  color: #fffb00;
}

/* お知らせ */
span.info {
  color: blue;
}

div.clear {
  clear: both;
  height: 0px;
  width: 100%;
}

/* ヘッダーの設定*/
#head {
  width: 100%;
  height: 65px;
  border-top: none;
  border-bottom: #999 1px solid;
  background-color: #fff;
  /*background: url("../images/ams.png") top right no-repeat;*/
  background-position: 98% 50%;
  background-size: auto 100%;
}

#head_2 {
  width: 100%;
  height: 32px;
  display: table;
  background-color: #ffffff;
  border: none;
  border-width: 1px 0px;
}

#blead-links {
  margin: 5px auto 3px auto;

  float: left;
}

#blead-links a,
#blead-links .current {
  display: block;
  height: 20px;
  line-height: 20px;
  float: left;
  padding: 0px 10px 0px 0px;
  text-align: center;
  text-decoration: none;
}

#blead-links a {
  background: url(../images/blead-green.png) no-repeat right center;
  color: #ffffff;
}

#blead-links a:hover {
  /*パンクズhobver*/
  color: #111;
  text-decoration: underline;
}

#blead-links a span {
  /*パンクズTOP画面*/
  display: block;
  margin: auto;
  padding: 0px 10px;
  color: #111;
}

#blead-links .current {
  background: url(../images/blead-gray.png) no-repeat right center;
  color: #111;
}

#blead-links .current span {
  background: none;
  display: block;
  margin: auto;
  padding: 0px 10px;
}

#head_2 #s_menu {
  float: right;
  height: 26px;
  margin-top: auto;
  margin-bottom: auto;
  padding: 4.5px 0;
}

#head_2 #s_menu li {
  height: 20px;
  list-style: none;
  float: left;
  background-repeat: repeat-x;
  border: none;
  text-align: right;
  margin: auto 5px auto 0;
}

#head_2 #s_menu a {
  /*マニュアルのボタンの文字色*/
  width: 130px;
  height: 23px;

  background: none;
  text-align: right;
  text-decoration: none;
  color: #4ba751;
}

#head_2 #s_menu #manual {
  /*マニュアルのボタン枠*/
  border-top: 1.5px solid #ddd;
  border-left: 1.5px solid #ddd;
  border-right: 1.5px solid #bbb;
  border-bottom: 1.5px solid #bbb;
  border-color: #4ba751;
  color: #4ba751;
  width: 90px;
  height: 19px;
  vertical-align: middle;
  background: #ffffff;
  text-align: center;
  border-radius: 15px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}

#head_2 #s_menu #manual:hover {
  background-position: bottom left;
}

#head_2 #s_menu #home {
  width: 90px;
  background: url(../images/zero001.gif);
  background-position: top left;
}

#head_2 #s_menu #home:hover {
  background-position: bottom left;
}

#head_2 #s_menu input.close {
  width: 92px;
  height: 25px;
  border: none;
  background-color: #999;
  background-position: top center;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  color: #fff;
  align-items: center;
  justify-content: center;
}

#login_info {
  width: 100%;
  height: 35px;
  background: #f5f5f5;
  margin: 0px 0px 0px;
}

#login_info table {
  font-family:
    メイリオ,
    Meiryo,
    verdana,
    游ゴシック,
    “Yu Gothic”,
    “ＭＳ Ｐゴシック“,
    sans-serif;
  width: auto;
  height: 100%;
  float: right;
  border: none;
  text-align: center;
  vertical-align: middle;
  padding: 1px;
  border-collapse: collapse;
  border-spacing: 0px;
}

#login_info table td {
  vertical-align: middle;
  padding: 0 5px 0 5px;
}

#login_info #switch-button input {
  /*閉じる・ログアウトのボタン枠*/
  width: 92px;
  height: 25px;
  border: none;
  background-color: #999;
  background-position: top center;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  color: #fff;
  align-items: center;
  justify-content: center;
}

/* メニューエリア */
#menu-list {
  clear: both;
  width: 100%;
  height: 50px;
  position: relative;
  z-index: 11;
}

#menu-list a {
  text-decoration: none;
  color: #111;
  display: block;
}

#menu-list ul#m_menu {
  height: 50px;
  width: 100%;
  text-align: center;
  margin: 0px auto 0px;
  position: absolute;
}

#menu-list ul li {
  width: 10.8%;
  height: 40px;
  float: left;
  list-style: none;
  margin: 10px 1px 0px 0px;
  overflow: visible;
  cursor: pointer;
}

#menu-list #m_menu li > div,
#menu-list #m_menu li > a > div {
  height: 100%;
  background-position: top center;
  background-repeat: none;
  display: flex;
  align-items: center;
}

#menu-list #m_menu li > a,
#menu-list ul li .menu_ng_link > div {
  height: 100%;
  display: flex;
  align-items: center;
}

/*normal*/
#menu-list #m_menu #site {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #site:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #site span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #data {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #data:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #data span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #user {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #user:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #user span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #mail {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #mail:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #mail span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #template {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #template:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #template span {
  white-space: pre;
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #reserve {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #reserve:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #reserve span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #history {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #history:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #history span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #user-history {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #user-history:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #user-history span {
  white-space: pre;
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #click-count {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #click-count:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #click-count span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

#menu-list #m_menu #admin {
  background-color: #83d295;
  position: relative;
}

#menu-list #m_menu #admin:hover {
  background-color: #5abc60;
}

#menu-list #m_menu #admin span {
  color: #ddf5df;
  position: absolute;
  right: 0;
  left: 0;
}

/*active*/
#menu-list #m_menu #site.active {
  background-color: #4ba751;
}

#menu-list #m_menu #site.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #data.active {
  background-color: #4ba751;
}

#menu-list #m_menu #data.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #user.active {
  background-color: #4ba751;
}

#menu-list #m_menu #user.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #mail.active {
  background-color: #4ba751;
}

#menu-list #m_menu #mail.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #template.active {
  background-color: #4ba751;
}

#menu-list #m_menu #template.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #reserve.active {
  background-color: #4ba751;
}

#menu-list #m_menu #reserve.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #history.active {
  background-color: #4ba751;
}

#menu-list #m_menu #history.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #user-history.active {
  background-color: #4ba751;
}

#menu-list #m_menu #user-history.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #click-count.active {
  background-color: #4ba751;
}

#menu-list #m_menu #click-count.active span {
  color: #fff;
  font-weight: bold;
}

#menu-list #m_menu #admin.active {
  background-color: #4ba751;
}

#menu-list #m_menu #admin.active span {
  color: #fff;
  font-weight: bold;
}

/*nglink*/
#menu-list #m_menu #site .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #site .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #data .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #data .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #user .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #user .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #mail .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #mail .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #template .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #template .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #reserve .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #reserve .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #history .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #history .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #user-history .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #user-history .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #click-count .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #click-count .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list #m_menu #admin .menu_ng_link {
  background-color: #dcdcdc;
}

#menu-list #m_menu #admin .menu_ng_link span {
  color: #f8f8f8;
}

#menu-list ul li ul.child {
  display: none;
  background-color: #fff;
  border: 1px outset #999999;
  position: relative;
  top: -1px;
  z-index: 15;
  width: 176px;
  text-align: left;
  padding: 0 1em;
}

#menu-list ul li ul.child li {
  height: 100%;
  width: 170px;
  line-height: 30px;
  clear: both;
  float: none;
  border-bottom: 1px solid #999999;
  margin-left: 2px;
  margin-top: 0px;
  color: #000;
  padding: 5px 0;
}

#menu-list ul li ul.child li:last-child {
  border-bottom: none;
}

#menu-list ul li ul.child li:hover {
  background-color: #dcdcdc;
  color: #ffffff;
}

#menu-list ul li ul.child li div {
  height: auto;
}

#menu-list ul li ul.child li div.menu_ng_link {
  background-image: none !important;
  background-color: inherit;
  color: #666666;
  cursor: not-allowed;
}

#menu-list #m_menu #data ul.child li div.menu_ng_link,
#menu-list #m_menu #user ul.child li div.menu_ng_link,
#menu-list #m_menu #mail ul.child li div.menu_ng_link,
#menu-list #m_menu #admin ul.child li div.menu_ng_link,
#menu-list #m_menu #history ul.child li div.menu_ng_link {
  background-image: none !important;
  background-color: inherit;
  color: #111;
  cursor: not-allowed;
}

/* メッセ-ジエリア */
#message {
  width: auto;
  min-height: 50px;
  margin: 1px 0 0;
  padding: 10px;
  height: auto;
  background-color: #4ba751;
  clear: both;
  position: relative;
  top: -1px;
  z-index: 10;
}

#message img {
  margin: 0px 0px 5px;
}

#message p {
  padding: 0px 30px;
  line-height: 18px;
  color: #ffffff;
}

#message p font {
  color: #fffb00;
}

.alert-text{
  color: #fffb00;
}

.info-text {
  color: #fff;
}

#message font.gray {
  color: #333333;
}

/* メインエリア の設定*/
#main {
  width: 100%;
  min-height: 250px;
  height: auto;
  text-align: center;
  background-color: #ffffff;
}

/* 左側の設定*/
#left {
  width: 280px;
  min-height: 460px;
  text-align: center;
  float: left;
  background-color: #ebebeb;
  border: #ffffff solid;
  border-width: 3px 1px 3px 0px;
}

/* 右側の設定*/
#right {
  width: 72%;
  height: auto;
  float: left;
  text-align: center;
  background-color: #ffffff;
}

/* フッターの設定*/
#foot {
  position: relative;
  width: 100%;
  height: 20px;

  border-width: 1px 0px;
  clear: both;
  background-color: #4ba751;

  text-align: right;
  line-height: 23px;
}

#foot:after {
  content: "";
  color: #fff;
}

/* テーブルの共通設定 */
/*必須項目*/
table th.must {
  background-image: url(../images/icon_must.png);
  background-position: 85% 50%;
  background-repeat: no-repeat;
  background-size: 40px;
}

table th.must-en {
  background-image: url(../images/icon_must_en.png);
  background-position: 85% 50%;
  background-repeat: no-repeat;
  background-size: 40px;
}

.wrap-label {
  display: block;
  white-space: normal;
  word-break: break-word;
  padding-right: 50px;
}

#main iframe {
  width: 100%;
}

/* ナンバーリンクボタン */
a.no_link {
  display: block;
  width: 24px;
  color: #ffffff;
  background-color: #6381d8;
  border: 2px outset #5474d4;
  margin: 0px;
  padding: 2px 1px 1px 0px;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  text-decoration: none;
}

a.no_link:visited {
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
}

a.no_link:hover {
  color: #eeeeee;
  font-size: 12px;
  text-decoration: none;
  background-color: #7a84a2;
  border: inset 2px #6d7999;
  margin: 0px;
  padding: 3px 0px 0px 1px;
}

/* サイトトップボタン */
a.sitetop_link {
  display: block;

  width: 10em;
  color: #ffffff;
  background-color: #6381d8;
  border: 2px outset #5474d4;
  margin: 0px;
  padding: 2px 1px 1px 0px;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  text-decoration: none;
}

a.sitetop_link:visited {
  color: #ffffff;
  font-size: 10px;
  text-decoration: none;
}

a.sitetop_link:hover {
  color: #eeeeee;
  font-size: 10px;
  text-decoration: none;
  background-color: #7a84a2;
  border: inset 2px #6d7999;
  margin: 0px;
  padding: 3px 0px 0px 1px;
}

ul.normal li {
  list-style: disc inside;
  height: 120%;
  width: auto;
  position: static;
  display: list-item;
}

#TableHeaderDomain {
  width: 30%;
}

#TableHeaderDNS {
  width: 10%;
}

#TableHeaderSPF {
  width: 35%;
}

#TableHeaderDKIM {
  width: 10%;
}

#TableHeaderDelete {
  width: 15%;
}

.loading {
  background: url(./loading.gif) no-repeat center center;
}

.loading-gray {
  background: url(./loading-gray.gif) no-repeat center center;
}

input[type="button"] {
  margin: 3px 0 0;
  padding: 0px 5px;
  height: 24px;
  background-color: #dcdcdc;
  color: #222;
  border-radius: 2px;
  border: none;
  cursor: pointer;
}

input[type="button"]:hover {
  background-color: #c6c6c6;
}

input[type="submit"] {
  margin: 3px 2px 0;
  padding: 0px 5px;
  height: 24px;
  background-color: #dcdcdc;
  color: #222;
  border-radius: 2px;
  border: none;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #c6c6c6;
}

/*メール作成_リストボタンのstyle*/
#select_list_button input[type="button"] {
  background-color: #fff;
  color: #666;
}

#select_list_button input[type="button"]:hover {
  background-color: #c6c6c6;
}

/*管理者機能>サービス設定‗限定のボタン設定*/
#select_list_button2 input[type="button"] {
  background-color: #fff;
  color: #666;
}

#select_list_button2 input[type="button"]:hover {
  background-color: #c6c6c6;
}

#list_button {
  background-color: #dcdcdc;
  color: #222;
}

#list_button:hover {
  background-color: #c6c6c6;
}

#list_button:disabled {
  background-color: #eeeeee;
  color: #aaa;
}

.enable#listUnsubscribeReflection {
  display: block;
}

#listUnsubscribeReflection {
  display: none;
}

/*配信履歴確認＞配信名_表示履歴ボタンのstyle*/
button#reloadbutton {
  margin: 3px 0 0;
  padding: 0px 10px;
  height: 24px;
  background-color: #dcdcdc;
  color: #222;
  border-radius: 2px;
  border: none;
  cursor: pointer;
}

button#reloadbutton:hover {
  background-color: #c6c6c6;
}

/*押下不可のstyle*/
input[type="button"]:disabled {
  margin: 3px 0 0;
  padding: 0px 5px;
  height: 24px;
  background-color: #eeeeee;
  color: #aaa;
  border-radius: 2px;
  border: none;
  cursor: not-allowed;
}

input[type="submit"]:disabled {
  margin: 3px 2px 0;
  padding: 0px 5px;
  height: 24px;
  background-color: #eeeeee;
  color: #aaa;
  border-radius: 2px;
  border: none;
  cursor: not-allowed;
}

/***
  * サイト選択画面
  */
* {
  margin: 0;
  padding: 0;
}

.modtitle {
  background-color: #e64b79;
  border-color: #ef819f;
  font-size: 12px;
  border-style: solid;
  border-width: 1px;
  line-height: 20px;
  padding: 1px 8px 0;
  color: #ffffff;
}

.modboxin {
  border-color: #333333;
  border-style: none solid solid;
  border: 1px solid #c5d7ef;
  clear: both;
  overflow: hidden;
  padding: 5px 5px 10px;
  margin: 0;
  font-size: 100%;
  text-align: left;
}

.fb {
  border: medium none;
  border-color: -moz-use-text-color #d1d3d4;
}

.fpad {
  overflow: auto;
  padding: 5px 2px 2px 3px;
  width: 95%;
}

#info_container {
  width: 95%;
  padding: 0;
  margin: 0 auto;
}

#info_header {
  background-color: #999999;
  margin: 0;
  padding: 10px;
}

#info_body {
  border: 1px solid #999999;
  margin: 0;
  min-height: 290px;
  padding: 10px;
}

span.left {
  margin-right: auto;
  color: white;
  min-height: 20px;
}

span.right {
  display: block;
  float: right;
}

/* 各種タイトル系 */
table .edit-title {
  font-family:
    メイリオ,
    Meiryo,
    verdana,
    游ゴシック,
    “Yu Gothic”,
    “ＭＳ Ｐゴシック“,
    sans-serif;
  background: #ffffff no-repeat left 67% !important;
  border-right-width: 0px !important;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 21px !important;
  padding: 25px 0px 10px !important;
  text-align: left !important;
}

table .list-title {
  background: #ffffff no-repeat left 67% !important;
  border-right-width: 0px !important;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 21px !important;
  padding: 25px 0px 10px !important;
  text-align: left !important;
}

table .search-title {
  background: #ffffff no-repeat left 67% !important;
  border-right-width: 0px !important;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 20px !important;
  padding: 25px 0px 10px !important;
  text-align: left !important;
}

table .sub-title {
  border-right-width: 0px !important;
  border-left-width: 0px !important;
  border-top-width: 0px !important;

  font-size: 12px !important;

  line-height: 21px !important;
  padding: 25px 0px 10px !important;
  text-align: left !important;
}

/* ボタン系 */
table#buttons {
  font-family:
    メイリオ,
    Meiryo,
    verdana,
    游ゴシック,
    “Yu Gothic”,
    “ＭＳ Ｐゴシック“,
    sans-serif;
  margin: 15px auto;
  text-align: center;
  background-color: #fff;
  min-width: 135px;
}

table#buttons input {
  font-size: 13px;
  height: 40px;
}

table#buttons input[type="checkbox"] {
  width: 13px;
  height: 13px;
}

table#buttons span.check-label {
}

table#buttons #action {
  /* 元・実行する,*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #return,
/*元・戻る*/
table#buttons #prev {
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #regist {
  /* 元・登録する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #reset,
table#buttons #_reset {
  /* 元・リセット*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #continuity {
  /* 元・連続登録*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #toplink {
  /* 元・TOPへ➡*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #search {
  /* 元・検索する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #research {
  /* 元・再検索*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #ex-segment {
  /* 元・セグメントを抽出*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #reex-segment {
  /* 元・セグメント再抽出➡*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #create-mail {
  /*元・メール作成➡*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #create-template {
  /* 元・テンプレート作成➡*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #csv-download {
  /* 元・CSVダウンロード*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #new-regist {
  /* 元・新規登録*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #add-regist {
  /*元：追加登録*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #close-window {
  /*元：ウィンドウを閉じる*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 160px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #verify {
  /*元：確認する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #fix {
  /*元：変更する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #delete {
  /*元：削除する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #set {
  /*元：設定する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #disabled_set {
  /*テスト配信確認 非活性ボタン*/
  background-color: #bcbcbc;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: not-allowed;
  color: #f8f8f8;
}

table#buttons #test_mail {
  /*元：テスト配信実行*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #test_mail.verify {
  /*元：テスト配信確認*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #disabled_test_mail {
  /*テスト配信確認 非活性ボタン*/
  background-color: #bcbcbc;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: not-allowed;
  color: #f8f8f8;
}

table#buttons #mail-rewrite {
  /*元：メール再編集*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #make_tsv {
  /*元：仮設定*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #disabledbutton_mailverify {
  /*メール内容確認画面 非活性ボタン*/
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: not-allowed;
  background-color: #bcbcbc;
  color: #f8f8f8;
}

table#buttons #derivery-recept {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/derivery_recept.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #mail-cancel {
  /*元・承認の取り消し*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #tsv-download {
  /*元・配信データダウンロード*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 170px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #add-field {
  /*元・フィールド追加*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #create-table {
  /*元・テーブル作成*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #update-field {
  /*元・フィールド更新*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #delete-all-setting {
  /*元・設定データ全消去*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #create-new-key {
  /*元・新規鍵ペア作成*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #dkim_selectors {
  /*元・dkimセレクタ一覧へ*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 155px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #smime_list {
  /*元・fromアドレス一覧へ*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 155px;
  padding: 0 15px;
  height: 40px;
  border: none;

  cursor: pointer;
  color: #fff;
}

table#buttons #url-compress {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/url_compress.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #menu,
table#buttons #menulink {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/menu.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #download {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/download.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #addup {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/addup.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #show {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/show.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #update {
  /*元・更新する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #issue {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/issue.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #reserve-verify {
  /*元・配信予約確認*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #se.stop {
  width: 212px;
  height: 80px;
  border: none;
  background: url(../images/buttons/repica_stop.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #se.start {
  width: 212px;
  height: 80px;
  border: none;
  background: url(../images/buttons/repica_start.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #table-set-up {
  /*元・テーブルセットアップ*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 160px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #table-setting {
  /*元・テーブル設定*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 160px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #db-setting {
  /*元・データベース設定*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 160px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #ButtonName.connect-verify {
  /*元・接続確認*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #ButtonName.ok {
  background: url(../images/buttons/connect_ok.png) no-repeat center center;
}

table#buttons #change-order {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/change_order.png) no-repeat center center;
  cursor: pointer;
}

table#buttons #data-export-button {
  /*元・データエクスポート*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 160px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #request {
  /*元・申請する*/
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #accept {
  /* 元・承認する */
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #reject {
  /* 元・却下する */
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

table#buttons #drop {
  /* 元・取下げる */
  background-color: #4ba751;
  border-radius: 5px;
  width: auto;
  min-width: 135px;
  padding: 0 15px;
  height: 40px;
  border: none;
  cursor: pointer;
  color: #fff;
}

/* 非活性ボタン共通 */
table#buttons input[disabled] {
  opacity: 0.5 !important;
  cursor: inherit;
}

/************************************
  * テーブル類　共通
  ************************************/
/*::::入力用・項目確認用:::*/
.edit-table,
.verify-table {
  width: 85%;
  border-collapse: collapse;
  border-spacing: 0px;
  margin: auto;
}

.edit-table th,
.edit-table td,
.verify-table th,
.verify-table td {
  padding: 8px 7px;
  text-align: left;
  border: solid #e5e5e5;
  border-width: 0px 0px 1px;
  font-weight: normal;
}

.edit-table th,
.verify-table th {
  background-color: #d6d6d6;
  width: 30%;
}

.edit-table table,
.verify-table table {
  border-collapse: collapse;
  border-spacing: 0px;
}

.edit-table table td,
.edit-table table th,
.verify-table table td,
.verify-table table th {
  border: 0px;
}

.edit-table input[type="text"]#deliver_date {
  width: 76px;
}

.verify-table .select_service {
  float: left;
}

/*:::一覧表示用テーブル::::*/
.list-table {
  width: 95%;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0px;
}

.list-table > thead th,
.list-table > thead td {
  background-color: #d6d6d6;
  /*表の一行目*/
  font-size: 9px;
}

.list-table th,
.list-table td {
  border: solid #e5e5e5;
  border-width: 1px 1px;
  padding: 5px;
  text-align: center;
  background-color: #ffffff;
  vertical-align: middle;
}

.list-table > tfoot th,
.list-table > tfoot td {
  border-width: 3px 1px 1px !important;
}

.list-table tr.odd th,
.list-table tr.odd td {
  background-color: #ffffff;
}

.list-table tr.even th,
.list-table tr.even td {
  background-color: #f8f8f8;
}

.list-table td img {
  display: inline-block;
  vertical-align: middle;
}

/*管理者機能＞迷惑メール対策の×btn*/
.list-table tr td.btn button {
  border: none;
}

.list-table .empty {
  background-color: #e5e5e5;
  padding: 10px;
  position: relative;
}

.dkim-table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0px;
}

.dkim-table > thead th,
.dkim-table > thead td {
  background-color: #d6d6d6;
  font-size: 9px;
}
html body .dkim-table td,
html body .dkim-table th{
  border: 1px solid #e5e5e5 !important;
}


.edit-table .separater,
.verify-table .separater,
.list-table .separater {
  padding: 0px !important;
  height: 1px;
}

.edit-table .separater hr,
.verify-table .separater hr,
.list-table .separater hr {
  height: 1px;
  border: solid #888888;
  border-width: 1px 0px 0px;
}

.setting-title-table {
  width: 85%;
  margin: auto;
  margin-top: 25px;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

.setting-title-table td{
  text-align: left;
  font-weight: normal;
  padding: 0;
  
}

.list-table .urlcomp-paging {
  width: 100%;
}

.list-table .urlcomp-paging td {
  background-color: #ffffff;
  border: 0;
  font-size: 12px;
}

.list-table .urlcomp-sum td {
  background-color: #ffffff;
  border: 0;
  font-size: 12px;
}

.list-table .urlcomp-line {
  width: 80px;
}

.pager {
  float: right;
  font-size: 9px;
}

.pager input[type="button"] {
  width: 30px;
}

/*:::検索条件表示用テーブル:::*/
#search-condition-table {
  width: 500px;
  margin: auto;
  border-collapse: collapse;
}

#search-condition-table th,
#search-condition-table td {
  border: solid #e5e5e5;
  border-width: 0px 0px 1px;
  padding: 5px;
  font-weight: normal;
}

#search-condition-table th {
  text-align: right;
  width: 35%;
}

#search-condition-table td {
  text-align: left;
}

/*****************/
.child {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
}

.child th,
.child td {
  border: 1px solid #e5e5e5 !important;
}

.child th {
  background-color: #f8f8f8;
  max-width: 40%;
}

table.child tbody td.left {
  text-align: left;
}

.child table td {
  border: 0px !important;
}

/* メール内容確認系画面でHTML本文のレイアウトに影響を与えない為 */
.verify-table2 {
  font-family:
    メイリオ,
    Meiryo,
    verdana,
    游ゴシック,
    “Yu Gothic”,
    “ＭＳ Ｐゴシック“,
    sans-serif;
  width: 85%;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0px;
}

.verify-table2 .th2,
.verify-table2 .td2,
.verify-table2 .child th,
.verify-table2 .child td {
  padding: 8px 7px;
  text-align: left;
  border: solid #e5e5e5;
  border-width: 0px 0px 1px;
  font-weight: normal;
  background-color: #fff;
}

.verify-table2 .th2,
.verify-table2 .child th {
  background-color: #d6d6d6;
  width: 30%;
}

.htmlbody {
  font-family: san-serif;
  font-size: medium;
  color: #111;
  border-collapse: separate;
}

.htmlbody h1 {
  margin: 0.6em 0;
}

.htmlbody h2 {
  margin: 0.8em 0;
}

.htmlbody h3,
.htmlbody p {
  margin: 1em 0;
}

.htmlbody h4 {
  margin: 1.4em 0;
}

.htmlbody h5 {
  margin: 1.8em 0;
}

.htmlbody h6 {
  margin: 2.2em 0;
}

table .right-box {
  padding: 10px 0px 5px;
  vertical-align: bottom;
  text-align: right;
  border: 0px !important;
  background-color: #ffffff !important;
}

table .right-box table {
  float: right;
  height: 100%;
}

table .table-announcement {
  text-align: left;
  width: 70%;
  border: none;
}

table .right-box table td {
  padding: 0px;
  border: 0px !important;
  background-color: #ffffff !important;
  font-size: 9px;
}

table .right-box table td img{
  width: 17px;
  height: 11px;
}

table .table-page {
  text-align: right;
  width: 30%;
}

table .table-page input[type="submit"] {
  width: 30px;
}

table .paging {
  border: 0px none !important;
  background-color: #ffffff !important;
  font-size: 12px !important;
}

table .title {
  font-size: 110%;
  font-weight: bold;
}

table .notice {
  text-align: left;
}

table .caution p {
  background-color: #ffff00;
}

table .number {
  ime-mode: disabled;
}

table input[type="text"][disabled] {
  background-color: #f8f8f0;
}

table .solid td {
  background-color: #f6f6f6;
}

/*****************/
.list-child {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-spacing: 0px;
}

.list-child th,
.list-child td {
  border: 1px solid #eeeeee !important;
}

.list-child th {
  width: 40%;
  background-color: #e9e9e9;
  /*元・#efffef*/
}

/****************/
.no-border th,
.no-border td {
  border: 0px;
}

.body pre {
  white-space: normal;
  word-wrap: normal;
}

/* ボタン系 */
table#buttons2 {
  margin: 15px auto auto 30px;
  text-align: left;
}

table#buttons2 input {
  font-size: 13px;
  width: 120px;
  height: 40px;
}

table#buttons2 input[type="checkbox"] {
  width: 13px;
  height: 13px;
}

table#buttons2 span.check-label {
}

table#buttons2 #issue {
  width: 120px;
  height: 40px;
  border: none;
  background: url(../images/buttons/issue.png) no-repeat center center;
  cursor: pointer;
}

/* MM、テンプレート適応後に、確認画面の背景＆文字

の色が引っ張られる問題 */
.message-color {
  background-color: #f5f5f5;
  color: #111;
  font-family: "メイリオ", Meiryo, verdana, "游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 12px;
  min-width: 85%;
}

.message-color2 {
  margin-left: 1px;
}
iframe.iframe.htmlbody {
  border: 0px none;
  border-bottom-width: 1px;
  width: 100%;
}



input:required:invalid {
  background-color: #fce4e4;
}


.loading-spinner {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
  margin: 10px auto 20px;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.cancel-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: white; 
  color: #25b09b;
  border: 2px solid #25b09b;
  border-radius: 5px;
  cursor: pointer;
}

.cancel-button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

.odd.btn.loading-gray {
  position: absolute;
  inset: 0;
}

.flex-loading-gray-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.dkim.odd.btn.loading-gray {
  /* dkimは元の位置指定に戻す */
  position: static;
  inset: auto;
}
.dkim.odd.btn {
  /* loading-gray.gifの大きさを入れる*/
  width: 32px;
  height: 32px;
}
.more-btn {
  color: #001dfa;
  border-bottom: 1px solid #001dfa;
  white-space: nowrap;
}

.eye-icon {
  width: 22px;
  height: 22px;
  background-image: url(../images/eyeicon.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
}

.eye-icon.closed {
  background-image: url(../images/eyeicon_close.png);
}

.right-align {
  float: right;
  display: flex;
  align-items: center;
  gap: 3px;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-text {
  width: 40px;
  text-align: left;
}

#auto-delivery-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.input_window[readonly], .input_window_long[readonly] {
  background-color: #f8f9fa;
}

.input_window[readonly], .input_window_long[readonly] {
  background-color: #f8f9fa;
}

/* トグルボタンのスタイル */

.toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 25px;
  margin: auto;
  margin-top: -3px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 25px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider:before {
  transform: translateX(24px);
}

.word-wrap {
  word-break: break-all;
  white-space: pre-wrap;
  width: 80%;
}

.copy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 4em;
  cursor: pointer;
}

.copy-container {
  position: relative;
  gap: 1px;
  margin: 0; 
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: #ffffff;
  color: #333333;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #4CAF50;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 1000;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

.public_key_ta,
.hostname_key {
  display: block;
  width: 80%;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: auto;
}
.public_key_ta {
  text-align: left;
}

.dkim-value {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-hidden-message {
  display: flex !important;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  flex-wrap: nowrap;
  border: none;
}