/* -------------------------------------------------------------
 * メッセージ
 * ---------------------------------------------------------- */
.o-msg {
    border: 1px solid var(--colorBorder2);
    padding: var(--sSizeS);
    position: relative;
}
.o-msg-dashed {
    border-style: dashed;
    border-width: 2px;
}
.o-msg-dotted {
    border-style: dotted;
    border-width: 3px;
}

/* -------------------------------------------------------------
 * メッセージ通知
 * ---------------------------------------------------------- */
.o-alert {
    border: 1px solid var(--colorBase1);
    border-radius: 4px;
    padding: var(--sSizeS);
    padding-left: var(--sSizeXXL);
    position: relative;
}
.o-alert::before {
    position: absolute;
    top: 8px;
    left: var(--sSizeM);
    font-size: var(--fSizeXL);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
.o-alert-top-info::before {
    top: 17px;
}
.o-alert-top-info {
    padding: var(--sSizeM);
    padding-left: var(--sSizeXXL);
}
.o-alert-info {
    border-color: var(--colorBlue4);
    background-color: var(--colorBlue1);
    color: var(--colorBlue5);
}
.o-alert-info::before {
    content: "\f05a";
}
.o-alert-warning {
    border-color: var(--colorYellow5);
    background-color: var(--colorYellow1);
    color: var(--colorYellow5);
}
.o-alerting-yellow1{
    border-color: var(--colorYellow4);
    background-color: var(--colorYellow1);
    color: var(--colorYellow5);
}
.o-alert-warning::before,
.o-alerting-yellow1::before {
    content: "\f071";
}
.o-alert-error {
    border-color: var(--colorRed3);
    background-color: var(--colorRed1);
    color: var(--colorRed5);
}
.o-alert-error::before {
    content: "\f05e";
}
.o-alert-success {
    border-color: var(--colorGreen4);
    background-color: var(--colorGreen1);
    color: var(--colorGreen5);
}
.o-alert-success::before {
    content: "\f00c";
}

/* -------------------------------------------------------------
 * タグ
 * ---------------------------------------------------------- */
.o-tag {
    background-color: var(--colorBase2);
    border-radius: 4px;
    font-size: var(--fSizeXS);
    font-weight: bold;
    padding: var(--sSizeXS);
    position: relative;
    display: inline-block;
    text-align: center;
    min-width: 50px;
    white-space: nowrap;
}
.o-tag:first-child {
    margin-left: var(--sSizeS);
}
.o-tag + .o-tag {
    margin-left: var(--sSizeXXS);
}
.o-tag::before {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: var(--sSizeXS);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
/* 青色タグ */
.o-tag-blue,
.o-tag-active,
.o-tag-information,
.o-tag-ticket-open,
.o-tag-online-device {
    background-color: var(--colorBlue1);
    color: var(--colorBlue5);
}
/* 黄色タグ */
.o-tag-yellow,
.o-tag-offline-device,
.o-tag-alerting-device {
    background-color: var(--colorYellow3);
    color: var(--colorBlack4);
}
/* 赤色タグ */
.o-tag-red,
.o-tag-error {
    background-color: var(--colorRed4);
    color: var(--colorWhite);
}
.o-tag-service-warning  {
    border-color: var(--colorRed3);
    background-color: var(--colorRed1);
    color: var(--colorRed5);
}
/* 灰色タグ */
.o-tag-gray,
.o-tag-inactive,
.o-tag-ticket-closed,
.o-tag-service-unkown {
    background-color: var(--colorGray2);
    color: var(--colorBlack4);
}

/* icon付き */
.o-tag-information,
.o-tag-online-device,
.o-tag-alerting-device,
.o-tag-offline-device,
.o-tag-service-warning {
    padding-left: var(--sSizeXL);
    min-width: 60px;
}
.o-tag-information::before {
    content: "\f0f3";
}
.o-tag-online-device::before {
    content: "\f00c";
}
.o-tag-alerting-device::before {
    content: "\f071";
}
.o-tag-offline-device::before {
    content: "\f056";
}
.o-tag-service-warning::before {
    content: "\f071";
}
.o-tag-service-unkown::before {
    content: "\003f";
}
/* -------------------------------------------------------------
 * ボタン
 * ---------------------------------------------------------- */
.o-btn {
    border-radius: 4px;
    font-size: var(--fSizeM);
    padding: var(--sSizeXS);
    position: relative;
    text-align: center;
    display: inline-block;
    width: fit-content;
    min-width: 100px;
    background-color: var(--colorBase1);
    border: 1px solid var(--colorBorder2);
    cursor: pointer;
}
.o-btn:disabled {
    opacity: 0.5;
}
.o-btn::before {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: var(--sSizeXS);
    font-size: var(--fSizeM);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
.o-btn::after {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: var(--sSizeXS);
    font-size: var(--fSizeM);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
.o-btn-primary, a.o-btn-primary:visited {
    background-color: var(--colorMain1);
    border: 1px solid var(--colorMain1);
    color: var(--colorMainFont);
}
.o-btn-secondary,.o-btn-secondary:visited {
    background-color: var(--colorBase1);
    border: 1px solid var(--colorMain1);
    color: var(--colorMain1);
}
.o-btn-accent, .o-btn-accent:visited {
    background-color: var(--colorYellow4);
    color: var(--colorBlack5);
    font-weight: bold;
}
.o-btn-del-primary, .o-btn-del-primary:visited {
    background-color: var(--colorRed5);
    border: 1px solid var(--colorRed5);
    color: var(--colorWhite);
}
.o-btn-del-secondary, .o-btn-del-secondary:visited {
    background-color: var(--colorBase1);
    border: 1px solid var(--colorRed5);
    color: var(--colorRed5);
}
.o-btn-target-blank {
    padding-right: var(--sSizeXL);
    padding-left: var(--sSizeM);
}
.o-btn-target-blank::after {
    content: "\f0c5";
}
.o-btn-info {
    padding-right: var(--sSizeM);
    padding-left: var(--sSizeXL);
}
.o-btn-info::before {
    content: "\f0f3";
}
/* アイコン付きボタン */
.o-btn-download,
.o-btn-upload,
.o-btn-send,
.o-btn-save,
.o-btn-add,
.o-btn-edit,
.o-btn-check,
.o-btn-delete,
.o-btn-mdm,
.o-btn-link,
.o-btn-refresh {
    padding-left: var(--sSizeXL);
    padding-right: var(--sSizeXS);
}
.o-btn-download::before {
    content: "\f019";
}
.o-btn-upload::before {
    content: "\f093";
}
.o-btn-send::before {
    content: "\f1d8";
}
.o-btn-save::before {
    content: "\f0c7";
}
.o-btn-add::before {
    content: "\2b";
}
.o-btn-edit::before {
    content: "\f044";
}
.o-btn-check::before {
    content: "\f00c";
}
.o-btn-delete::before {
    content: "\f2ed";
}
.o-btn-mdm::before {
    content: "\f1c0";
}
.o-btn-link::before {
    content: "\f0c1";
}
.o-btn-refresh::before {
    content: "\f021";
}
/* -------------------------------------------------------------
 * ボタンエリア
 * ---------------------------------------------------------- */
.o-btn-area,
.o-btn-area > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sSizeS);
    justify-content: center;
    align-items: center;
}
.o-btn-upload-file {
    border-radius: 15px;
    border: 1px solid var(--colorMain1);
    position: relative;
    padding-right: var(--sSizeL);
}
.o-btn-upload-file::after {
    content: "\f00d";
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: var(--sSizeXS);
    font-size: var(--fSizeM);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
.c-modal-footer .o-btn-area {
    justify-content: flex-end;
}
/* -------------------------------------------------------------
 * メッセージエリア
 * ---------------------------------------------------------- */
.c-modal-footer .o-message-area {
    display: flex;
    justify-content: flex-end;
}
/* -------------------------------------------------------------
 * note
 * ---------------------------------------------------------- */
.o-note {
    display: block;
    color: var(--colorBaseFont);
    font-size: var(--fSizeS);
    margin-top: var(--sSizeXXS);
    line-height: var(--fSizeXL);
}
.o-note > a {
    text-decoration: underline;
}
/* -------------------------------------------------------------
 * checkbox
 * ---------------------------------------------------------- */
.no-label-checkbox {
    margin-right: 0;
}
/* -------------------------------------------------------------
 * セレクトボックス
 * ---------------------------------------------------------- */
/* セレクトボックスのレスポンシブは個別に設定する必要あり (よりよい方法あれば置き換え)
 * max-width、width を設定する。
 * max-with: 選択値の最大長、width: 100%、min-widthは設定不要
 */
.o-select-menu-code {
    max-width: 272px;
    width: 100%;
}
.o-select-plan-code {
    max-width: 320px;
    width: 100%;
}
/* -------------------------------------------------------------
 * graph toggle
 * ---------------------------------------------------------- */
.toggle-container {
    width: 80px;
    margin-left: auto;
}
.toggle-container .onoffswitch {
    width: 79px;
}
.toggle-container .onoffswitch-label .onoffswitch-switch {
    right: 65px;
}
.toggle-container .onoffswitch-inner:after{
    padding-right: 2px;
}
/* -------------------------------------------------------------
 * toggle
 * ---------------------------------------------------------- */
.onoffswitch-container {
    margin-top: 4px;
    margin-left: 7px;
    display: inline-block
}
.onoffswitch {
    position: relative;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle
}
.onoffswitch-checkbox {
    display: none
}
.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #626262;
    border-radius: 50px;
    border-color: #adadad #b3b3b3 #9e9e9e;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}
.onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    display: block
}
.onoffswitch-inner:after,.onoffswitch-inner:before {
    float: left;
    width: 50%;
    height: 15px;
    padding: 0;
    line-height: 15px;
    font-size: 10px;
    font-family: Trebuchet,Arial,sans-serif;
    font-weight: 700;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
.onoffswitch-inner:before {
    content: attr(data-swchon-text);
    text-shadow: 0 -1px 0 #333;
    padding-left: 7px;
    background-color: #3276b1;
    color: #fff;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.05);
    text-align: left
}
.onoffswitch-inner:after {
    content: attr(data-swchoff-text);
    padding-right: 7px;
    text-shadow: 0 -1px 0 #fff;
    background-color: #fff;
    color: #555;
    text-align: right;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)
}
.onoffswitch-switch {
    width: 19px;
    height: 19px;
    margin: -2px;
    background: #f4f4f4;
    border: 1px solid #9a9a9a;
    border-radius: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 32px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background-image: -moz-linear-gradient(top,#fff,#eee);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#eee));
    background-image: -webkit-linear-gradient(top,#fff,#eee);
    background-image: -o-linear-gradient(top,#fff,#eee);
    background-image: linear-gradient(to bottom,#fff,#eee);
    background-repeat: repeat-x;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3);
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3)
}
.onoffswitch-checkbox+.onoffswitch-label .onoffswitch-switch:before,.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch:before {
    content: "\f00d";
    color: #a90329;
    display: block;
    text-align: center;
    line-height: 19px;
    font-size: 10px;
    text-shadow: 0 -1px 0 #fff;
    font-weight: 700;
    font-family: "Font Awesome 6 Free",sans-serif;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch:before {
    content: "\f00c";
    color: #57889c
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    display: block
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
    right: 0
}
.onoffswitch-switch:hover {
    background-color: #eee
}
.onoffswitch-switch:active {
    background-color: #eee;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-inner:before,.onoffswitch-checkbox:disabled+.onoffswitch-label .onoffswitch-inner:after {
    text-shadow: 0 1px 0 #fff;
    background: #bfbfbf;
    color: #333
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-switch,.onoffswitch-checkbox:disabled+.onoffswitch-label .onoffswitch-switch {
    background-color: #f4f4f4;
    background-image: -moz-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#bfbfbf),to(#f4f4f4));
    background-image: -webkit-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image: -o-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image: linear-gradient(to bottom,#bfbfbf,#f4f4f4);
    box-shadow: none!important
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-label,.onoffswitch-checkbox:disabled+.onoffswitch-label {
    border-color: #ababab #999 #878787!important
}
.onoffswitch-checkbox:checked+.onoffswitch-label {
    border-color: #3276b1 #2a6395 #255681
}
.onoffswitch+span,.onoffswitch-title {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px
}
/* -------------------------------------------------------------
 * required
 * ---------------------------------------------------------- */
.is-required {
    position: relative;
}
.is-required::after {
    content: "\5FC5\9808";
    border-radius: 4px;
    background-color: var(--colorRed4);
    font-size: var(--fSizeXS);
    color: var(--colorWhite);
    padding: var(--sSizeXXS) var(--sSizeXS);
    position: absolute;
    top: var(--sSizeXS);
    right: var(--sSizeXS);
}
.is-required {
    position: relative;
}
.is-required.is-disabled::after {
    background-color: var(--colorDisabled2);
}
/* -------------------------------------------------------------
 * icon
 * ---------------------------------------------------------- */
.o-icon {
    font-size: var(--fSizeXL);
}
/* -------------------------------------------------------------
 * attachment file
 * ---------------------------------------------------------- */
.o-attachment-file {
    border: 1px solid var(--colorBorder2);
    padding: var(--sSizeXS) var(--sSizeXXL) var(--sSizeXS) var(--sSizeXS);
    border-radius: 15px;
    background-color: var(--colorMain1);
    color: var(--colorMainFont);
    position: relative;
}
.o-attachment-file i {
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translate(0%, -50%);
    right: var(--sSizeS);
    font-size: var(--fSizeM);
    font-weight: 900;
    font-family: "Font Awesome 6 Free",sans-serif;
}
/* -------------------------------------------------------------
 * 下線付きリンク
 * ---------------------------------------------------------- */
.blue-link {
    background-color: transparent;
    text-decoration: underline;
    color: var(--colorMain1);
}
/* -------------------------------------------------------------
 * 契約詳細-設定情報詳細表示ボタン
 * ---------------------------------------------------------- */
.collapse-btn {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-weight: bold;
}
/* -------------------------------------------------------------
 * 契約詳細-設定情報詳細表示枠
 * ---------------------------------------------------------- */
.c-grid-table .small-grid {
    display: grid;
    grid-template-columns: 1fr 4fr;
    gap: 8px;
}
.c-grid-table .small-grid dt {
    font-weight: 600;
    border-bottom: none;
    border-right: 1px solid var(--colorBorder1);
}
.c-grid-table .small-grid dd {
    margin: 0;
}
#c-setting-vlan-table th,
#c-setting-vlan-table td,
#c-setting-auth-user-table th,
#c-setting-auth-user-table td,
#c-setting-l3-firewall-table th,
#c-setting-l3-firewall-table td {
    word-break: break-all;
    white-space: normal;
}
#c-setting-yno-table td button {
    margin-block: var(--sSizeXS);
    padding: var(--sSizeXS);
    min-width: 80px !important;
}