/***********************************************************************
全ページ共通
 ***********************************************************************/
input[type=text].form-control.readonly[readonly] {
    cursor: text;
}
textarea.form-control.readonly[readonly] {
    resize: none;
    cursor: text;
}
.page-content {
    background: #f1f1f1;
}
.x-navigation.x-navigation-horizontal .xn_user_name {
    padding: 12px 5px;
    font-size: 1.2rem;
}
.x-navigation.x-navigation-horizontal .xn_user_name .user_name {
    font-size: 1.5rem;
}
u,
ol {
    padding-left: 1rem;
}
table tbody tr {
    cursor: default;
}
table thead th {
    white-space: nowrap;
}
table .uri_count,
table .order_by,
table .entry_count,
table .view_count,
table .sms_count {
    text-align: right;
}
table .detail,
table .chart {
    text-align: center;
    cursor: pointer;
}
table .detail span.fa,
table .chart span.fa {
    opacity: 0.7;
    transition: opacity 0.2s;
}
table .detail:hover span.fa,
table .chart:hover span.fa {
    opacity: 1.0;
}
table thead tr th.login,
table tbody tr td.login,
table tbody tr td div.login,
table thead tr th.edit,
table tbody tr td.edit,
table tbody tr td div.edit,
table thead tr th.delete,
table tbody tr td.delete,
table tbody tr td div.delete,
table thead tr th.copy,
table tbody tr td.copy,
table tbody tr td div.copy {
    text-align: center;
}
table tbody tr td.login>.fa,
table tbody tr td div.login>.fa,
table tbody tr td.edit>.fa,
table tbody tr td div.edit>.fa,
table tbody tr td.delete>.fa,
table tbody tr td div.delete>.fa,
table tbody tr td.copy>.fa,
table tbody tr td div.copy>.fa {
    opacity: 0.6;
    transition: opacity 0.2s;
}
table tbody tr td.login:hover>.fa,
table tbody tr td:hover div.login>.fa,
table tbody tr td.edit:hover>.fa,
table tbody tr td:hover div.edit>.fa,
table tbody tr td.delete:hover>.fa,
table tbody tr td:hover div.delete>.fa,
table tbody tr td.copy:hover>.fa,
table tbody tr td:hover div.copy>.fa {
    cursor: pointer;
    opacity: 1.0;
}
table.simple_table {
    margin: 0 0 0 0;
    width: 100%;
    border-collapse: collapse;
}
table.simple_table thead th,
table.simple_table tbody td {
    padding: 4px 8px 4px 8px;
}
table.simple_table thead th {
    background: #666666;
    border-top: none;
    border-bottom: none;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    color: white;
}
table.simple_table thead>tr>th:nth-child(1) {
    border-left: solid 1px #666666;
}
table.simple_table thead>tr>th:last-child {
    border-right: solid 1px #666666;
}
table.simple_table tbody td {
/*
    border-top: none;                   こういうことをすると、一番上の tr>td だけ上の border が無くなり、inline_input の top の計算が狂う
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
*/
    border: solid 1px #ccc;
    background: #f9f9f9;
}
table.simple_table tbody tr td .edit {
    display: inline-block;
    float: right;
    padding: 2px 2px 2px 2px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0.0;
    transition: opacity 0.2s;
}
table.simple_table tbody tr td:hover .edit {
    opacity: 1.0;
}
.panel_child {          /* 入れ子になった内側の panel */
    box-shadow: none;
    margin-bottom: 8px;
}
.margin-0 {
    margin: 0 0 0 0;
}
.font_bold {
    font-weight: bold;
}
.success {
    background: #89ad4d;
}
.danger {
    background: #e04b4a;
}
input[type=number] {
    text-align: right;
}
.form_block.left {
    padding-right: 8px !important;
}
.form_block.right {
    padding-left: 8px !important;
}
.form_block.center {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.form_block:not(.bottom) {
    margin-bottom: 8px;
}
/*
.form_block は失敗だったが今さら変えられないので似たようなものを作った。
.form_tile を使えばカラム数がいくつでも上下左右の間隔が適正になる .left とか .center とか要らない。
*/
.form_tile_container {
    padding: 8px 8px 8px 8px !important;
    /*border: solid 1px red;*/
}
.form_tile_container .form_tile {
    margin: 0;
    padding: 8px;
    /*border: solid 1px blue;*/
}
.form_tile_container .form_tile .input-group .input-group-addon {
    vertical-align: middle;
}
.form_tile_container .form_tile textarea.form-control {
    min-height: 30px;
}
.connect_right {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.connect_left {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.character_counter {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: bold;
    padding: 0px 4px 0px 4px;
}
.notice_inline {
    position: absolute;
    height: auto;
    color: white;
    font-weight: bold;
    padding: 8px 16px 8px 8px;
    border-radius: 4px;
    cursor: default;
    z-index: 1000;
}
.notice_inline:before {
    content: "";
    display: inline-block;
    position: relative;
    top: -20px;
    left: -4px;
    width: 0px;
    height: 0px;
    border-top: none;
    border-left: solid 4px transparent;
    border-right: solid 4px transparent;
    background: transparent;
}
.notice_inline:after {
    content: "";
    clear: both;
}
.notice_inline.danger {
    background: #b64645;    /* noty の error タイプと同じ色 */
}
.notice_inline.danger:before {
    border-bottom: solid 8px #b64645;
    color: #b64645;
}
.notice_inline.info {
    background: #3FBAE4;    /* noty の information タイプと同じ色 */
}
.notice_inline.info:before {
    border-bottom: solid 8px #3FBAE4;
    color: #3FBAE4;
}
.error_found,
.phone.black,
.body.too_long,
.banned,
.unresendable {
    font-weight: bold;
    background: #b64645;    /* noty の error タイプと同じ色 */
    color: white;
    padding: 0 4px 0 4px;
}
.phone {
    padding: 0 4px 0 4px;
}
.panel_transparent {
    border: none;
    background: transparent;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
table>tbody>tr>td>.body>span.html {
    display: block;
    float: left;
}
table>tbody>tr>td>.body>span.edit {
    display: block;
    float: right;
    /*border: solid 1px red;*/
    font-size: 14px;
    padding: 2px 2px 2px 2px;
    opacity: 0.0;
}
table>tbody>tr>td>.body>span.edit:hover {
    cursor: pointer;
}
table>tbody>tr:hover>td>.body>span.edit {
    opacity: 1.0;
}
table>tbody>tr>td>.body:after {
    clear: both;
}
.uri {
    font-weight: bold;
    color: blue;
    cursor: pointer;
}
.inline_editor {
    z-index: 2000;
}
.inline_editor .header {
    text-align: right;
    padding: 5px 5px 5px 0;
    background: #1caf9a;
}
.inline_editor .header .tiny_button {
    font-size: 10px;
    font-weight: bold;
    border: solid 1px;
    border-color: #ccc;
    color: #ccc;
    border-radius: 4px;
    transition: color 0.2s, border-color 0.2s;
}
.inline_editor .header .tiny_button.ok {
    padding: 1px 3px 1px 3px;
}
.inline_editor .header .tiny_button.cancel {
    padding: 1px 4px 1px 4px;
}
.inline_editor .header .tiny_button+.tiny_button {
    margin-left: 2px;
}
.inline_editor .header .tiny_button:hover {
    border-color: white;
    color: white;
    cursor: pointer;
}
.inline_editor textarea {
    border-top: none;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 100%;
    padding: 8px 8px 8px 8px;
    resize: none !important;
}
.inline_editor input[type=text] {
    border-top: none;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 2px 8px 2px 8px;
    width: 100%;
}
input[type=text].inline_input {
    position: absolute;
    border: none;
    padding: 6px 8px 5px 8px;   /* border が無いので、その分だけ simple_table の td の上下の padding より大きくしてある */
    z-index: 2000;
}
button.current_ip_button {
    position: absolute;
    background: white;
    border: solid 1px #888;
    border-radius: 4px;
    outline: 0;
    padding: 0 4px 0 4px;
    /*font-size: 12px;*/
    cursor: pointer;
    z-index: 2001;
}
.accordion_box {
    overflow: hidden;
}
.accordion_box.closed {
    display: none;
}
.form_control_container {
    height: 30px;
    font-size: 12px;
    line-height: 18px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    border: none;
    padding: 0 0 0 4px;
}
.form_control_container>.fit_button {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: hidden;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border-radius: 2px;
}
.form_control_frame {
    border: 1px solid #D5D5D5;
    background: #F9F9F9;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
}
.form_control_frame span {
    color: #555555;
}
.form_control_frame input[type=number] {
    border: 1px solid #D5D5D5;
    background: #F9F9F9;
}
.form_control_frame input[type=number]:focus {
    border-color: #C1C1C1;
    background: #FFF;
}
.form_control_frame.checkbox_container {
    border: 1px solid #D5D5D5;
    background: #F9F9F9;
    border-radius: 4px;
    padding: 4px 0 0 8px;
    margin-left: 4px;
    width: calc(100% - 6px) !important;
    height: 30px !important;
}
.input-group .form_control_frame.radio_container {
    border: 1px solid #D5D5D5;
    background: #F9F9F9;
    padding: 6px 0 0 8px;
    width: calc(100% - 6px) !important;
    height: 30px !important;
}
.input-group-addon+.form_control_frame {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}
.form_control_frame.checkbox_container input[type=checkbox].checkbox {
    top: 0px;
}
.form_control_frame.checkbox_container .checkbox_label {
    font-size: 13px;
    font-weight: bold;
    color: #888;
}
.form_control_frame table {
    margin: 0 0 0 0;
}
.full_height_frame {
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
iframe.document {
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}
.bootstrap-select .icon {
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    width: 1.6rem;
}
.margin-0 {
    margin: 0 0 0 0;
}
.icon_button {
    dispaly: inline-block;
    font-size: 16px;
    padding: 2px 6px 2px 6px;
    border: solid 1px #888;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.2s
}
.hover .icon_button,
.icon_button:hover {
    opacity: 1.0;
}
/*
他のコントロールの「（隣とかではなく）上（というか内部）」に滞空するボタン
例：textarea の内部（右上隅）に表示される「コピー」コマンドのアイコン・ボタン（../dialogs/customer.php 参照）
例：IP アドレスのテキストボックス内に表示される「現在の IP」ボタン
*/
.hover_button {
    display: inline-block;
    position: absolute;
    cursor: pointer;
}
.hover_button.icon_button {
    border: none;
}
/***********************************************************************
ドラッガブルリスト（カラムがあるから「テーブル」と呼ぶべきか）
 ***********************************************************************/
.draggable_list {
    visibility: hidden;
}
.draggable_list.visible {
    position: absolute;
    visibility: visible;
}
.draggable_list>.item {
    border-top: solid 1px transparent;
    border-bottom: solid 1px #dddddd;
    border-left: solid 1px #dddddd;
    border-right: solid 1px #dddddd;
    /*border-radius: 4px;*/
    transition: background 0.2s;
}
.draggable_list>.item.even {
    background: #f0f0ff;
}
.draggable_list>.item.odd {
    background: white;
}
.draggable_list>.item.even.top {
    border-top: solid 1px #dddddd;
}
.draggable_list>.item:hover {
    background: #f5f5f5;
}
.draggable_list>.item.draggable {
    cursor: move;
}
.draggable_list>.item.dragged {
    z-index: 1000;
}
.draggable_list>.item>.column {
    display: inline-block;
    padding: 3px 8px 1px 8px;
    border-top: none;
    border-bottom: none;
    border-right: none;
    border-left: solid 1px transparent;
    white-space: nowrap;
/*  ellipsis を使う場合、ここで幅を指定しないと描画が狂う
    overflow: hidden;
    text-overflow: ellipsis;
*/
    overflow: hidden;
    text-overflow: hidden;
}
.draggable_list.visible>.item>.column {
    position: absolute;
    top: 0px;
}
.draggable_list>.item>.column {
    border-right: solid 1px #dddddd;
}
.draggable_list_headers {
    visibility: hidden;
    background: #666666;
    color: white;
}
.draggable_list_headers.visible {
    visibility: visible;
}
.draggable_list_headers>.header {
    /*display: inline-block;*/
    display: block;
    float: left;
    font-weight: bold;
    border-top: none;
    border-bottom: none;
    border-left: solid 1px transparent;
    border-right: solid 1px transparent;
    padding: 5px 8px 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: hidden;
}
.draggable_list_headers>.header {
    border-right: solid 1px #dddddd;
}
/***********************************************************************
チェックボックス
 ***********************************************************************/
.checkbox_box { /* クリックに反応してチェックボックスの checked を切り替える箱 */
    cursor: pointer;
    transition: background 0.2s;
}
.checkbox_box:hover {
    background: #f5f5f5;
}
input[type=checkbox].checkbox {
    width: 0;
    z-index: 2;
    position: relative;
    top: -1px;
/* IE, Edge, Firefox 対策 */
    display: none;
}
/* IE, Edge, Firefox 対策 */
input[type=checkbox].checkbox+.checkbox_label:before {
/*  input[type=checkbox].checkbox:before { */
    content: "";                        /* ボックス挿入 */
/* IE, Edge, Firefox 対策 */
    padding: 1px;
/*    padding: 0; */
    display: inline-block;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-width: 1px;
    /*border-color: transparent;    これ結構ウザい*/
    border-color: #888;
    border-radius: 4px;
    position: relative;
    top: 0px;
/* IE, Edge, Firefox 対策 */
    margin-left: 8px;
}
input[type=checkbox].checkbox.hover:before,
input[type=checkbox].checkbox:hover:before,
input[type=checkbox].checkbox:checked:before {
    border-color: #888;
}
.checkbox_wrap {
    display: inline-block;
    margin-right: 10px;
}
/* ページ幅を狭くした時（左側に来ると）インデントされたようになってしまうので、右側にマージンを付けるように変更
.checkbox_wrap+.checkbox_wrap {
    margin-left: 24px;
}
*/
/***********************************************************************
チェックボックスの直後のラベル
 ***********************************************************************/
input[type=checkbox].checkbox+.checkbox_label {
    position: relative;
    left: 8px;
    cursor: default;
}
input[type=checkbox].checkbox+.checkbox_label:before {
    position: relative;
    top: 1px;
    left: -6px;
    content: "";                      /* チェックマーク挿入 */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: transparent;
    z-index: 1;
/* IE, Edge, Firefox 対策 */
    line-height: 13px;
}
input[type=checkbox].checkbox.hover+.checkbox_label:before,
input[type=checkbox].checkbox:hover+.checkbox_label:before {
    /*color: #faa;*/
}
input[type=checkbox].checkbox:checked+.checkbox_label:before {
    color: red;
}
/***********************************************************************
ラジオボタン
 ***********************************************************************/
input[type=radio].radio {
    width: 0;
    z-index: 2;
    position: relative;
    top: -2px;
    margin-left: 0;
/* IE, Edge, Firefox 対策 */
    display: none;
}
/* IE, Edge, Firefox 対策 */
input[type=radio].radio+.radio_label:before {
/*  input[type=radio].radio:before { */
    content: "";                        /* ボックス挿入 */
/* IE, Edge, Firefox 対策 */
    padding: 3px;
/*    padding: 0; */
    display: inline-block;
/* IE, Edge, Firefox 対策 */
    width: 17px;
/*    width: 17px; */
    height: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: #888;
    border-radius: 8px;
/* IE, Edge, Firefox 対策 */
    margin-left: 8px;
}
input[type=radio].radio.hover:before,
input[type=radio].radio:hover:before,
input[type=radio].radio:checked:before {
    border-color: #888;
}
.radio_container {
    display: block;
    float: left;
}
.radio_container+.radio_container {
    margin-left: 26px;
}
/***********************************************************************
ラジオボタンの直後のラベル
 ***********************************************************************/
input[type=radio].radio+.radio_label {
    position: relative;
    left: 8px;
    padding-left: 4px;
    cursor: default;
}
input[type=radio].radio+.radio_label:before {
    position: relative;
    top: -1px;
    left: -9px;
/*    content: "\f192"; */
    content: "\f111";
    font-family: "Font Awesome 5 Free";
/* IE, Edge, Firefox 対策 */
    font-size: 10px;
/*    font-size: 11px; */
/*    font-weight: 300; */
    font-weight: 900;
    color: transparent;
    z-index: 1;
/* IE, Edge, Firefox 対策 */
    line-height: 8px;
}
input[type=radio].radio.hover+.radio_label:before,
input[type=radio].radio:hover+.radio_label:before {
}
input[type=radio].radio:checked+.radio_label:before {
    color: red;
}
/***********************************************************************
タグ入力
<div id="tags1529914034638_tagsinput" class="tagsinput" style="width: 100%; height: auto;">
    <span class="tag">
        <span class="tag_label">First</span>
        <span class="fa fa-times tag_remove"></span>
        <a href="#" title="Removing tag"></a>
    </span>
 ***********************************************************************/
div.tagsinput span.tag {
    display: inline-block;
    background: #666;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s, background 0.3s;
}
div.tagsinput span.tag:hover {
    opacity: 1.0;
}
div.tagsinput span.tag.selected {
    background: #383;
}
div.tagsinput span.tag .tag_label {
    display: inline-block;
    position: relative;
    left: -7px;
    padding-left: 0;
    padding-right: 0;
}
div.tagsinput span.tag .tag_remove {
    display: inline-block;
    position: relative;
    left: -12px;
    float: left;
    color: #ccc;
    font-size: 12px;
    line-height: 20px;
    transition: color 0.2s;
    cursor: pointer;
    padding-left: 0;
    padding-right: 0;
}
div.tagsinput span.tag .tag_remove:hover {
    color: #fff;
}
/***********************************************************************
ダイアログ
 ***********************************************************************/
.dialog {
    display: none;
    position: absolute;
    -moz-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.dialog textarea {
    resize: vertical;
}
/***********************************************************************
メッセージボックス（確認ダイアログ）
 ***********************************************************************/
.confirm_dialog {
    width: 512px;
}
/***********************************************************************
テンプレートダイアログ（ユーザードロップダウンリスト付き）
 ***********************************************************************/
.templates_dialog {
    width: 50%;
}
.templates_dialog table tbody tr {
    cursor: default;
}
/***********************************************************************
メッセージダイアログ（番号と本文とエラーのテーブルを表示するダイアログ）
 ***********************************************************************/
.message_dialog {
/*    width: 80%;*/
}
/***********************************************************************
URI 短縮ダイアログ
 ***********************************************************************/
.shorten_dialog {
    width: 80%;
}
.shorten_dialog .panel-footer button.btn+button.btn {
    margin-right: 4px;
}
/***********************************************************************
開封確認ダイアログ
 ***********************************************************************/
.uniqueify_dialog {
    width: 80%;
}
.uniqueify_dialog .panel-footer button.btn+button.btn {
    margin-right: 4px;
}
/***********************************************************************
メッセージダイアログ（送信済みのメッセージ。delivery_sms_infos のこと）
 ***********************************************************************/
.sent_message_dialog {
    width: 96%;
}
/***********************************************************************
開封確認 URI ダイアログ（個人別転送ログ）
 ***********************************************************************/
.uniqueify_uri_dialog {
    width: 80%;
}
/***********************************************************************
開封確認 URI ダイアログ（日別転送ログ）
 ***********************************************************************/
.uniqueify_chart_dialog {
    width: 90%;
}
/***********************************************************************
短縮 URI ダイアログ（日別転送ログ）
 ***********************************************************************/
.shorten_chart_dialog {
    width: 90%;
}
/***********************************************************************
ドロップゾーン（一括送信のメイン画面、アップロードダイアログ等）
 ***********************************************************************/
.drop_zone {
/*.send_batch_panel .drop_zone {*/
    width: 100%;
    /*height: 100px;*/
    border: dashed 1px #888;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    background: #f9f9f9;
    text-align: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.drop_zone:hover,
.drop_zone.dragging {
/*
.send_batch_panel .drop_zone:hover,
.send_batch_panel .drop_zone.dragging {
*/
    opacity: 1.0;
    background: white;
}
.file_info {
    text-align: center;
    opacity: 0.0;
    height: 0px;
}
/***********************************************************************
ジョブのページ log_jobs
 ***********************************************************************/
#job_table_container table {
    font-size: 11px;
}
#job_table_container table .checkbox {
    top: -2px;
}
#job_table_container table .body {
    width: 256px;
}
#job_table_container table .message_total_count {
    text-align: right;
    padding-right: 16px;
}
#job_table_container table .send_status {
    /*font-size: 10px;*/
}
.sent_message_table_container table  {
    font-size: 11px;
}
.sent_message_table_container table tbody td div.view_count {
    text-align: right;
    padding-right: 16px;
}
.sent_message_table_container table thead tr th.body {
    width: 128px;   /* あえて小さくして */
}
.sent_message_table_container table tbody tr td div.body {
    width: 256px;   /* こっちの幅を内包するために th.body がパッツンパッツンになって広がることを期待する */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/***********************************************************************
利用状況
 ***********************************************************************/
#log_table th,
#log_table td {
    text-align: right;
    padding-top: 2px;
    padding-bottom: 2px;
}
#log_table th.big_header {
    text-align: center;
    background: #aaa;
    color: white;
    border-left: solid 1px white;
}
#log_table td.no_logged {
    color: #aaa;
}
#log_table th.delivered {
    color: #99f;
}
#log_table th.undelivered {
    color: #f99;
}
.log_all_widget .widget-data table tr>td:nth-child(2),
.log_all_widget .widget-data table tr>td:nth-child(3),
.log_all_widget .widget-data table tr>td:nth-child(4) {
    padding-left: 8px;
    text-align: right;
}
.log_all_widget th.delivered,
.log_all_widget td.delivered {
    color: #99f;
}
.log_all_widget th.undelivered,
.log_all_widget td.undelivered {
    color: #f99;
}
.log_all_widget th.call_time,
.log_all_widget td.call_time {
    border-top: 1px solid #ccc;
    font-weight: bold;
}
/***********************************************************************
除外宛先
 ***********************************************************************/
.black_editor_dialog {
    width: 30%;
}
/***********************************************************************
電話番号
 ***********************************************************************/
.phone_number_editor_dialog {
    width: 30%;
}
.phone_number_upload_dialog {
    width: 30%;
}
/***********************************************************************
アップロードダイアログ
 ***********************************************************************/
.upload_dialog {
    width: 30%;
}
/***********************************************************************
電話帳一覧
 ***********************************************************************/
.draggable_list.phone_book>.item>.column.name {
    cursor: default;
    width: 256px;
}
.draggable_list.phone_book>.item>.column.name>.checkbox_label {
    display: block;
    float: left;
    /*width: 228px; */
    white-space: pre-wrap;
}
.draggable_list.phone_book>.item>.column.tags {
    width: 40%;
    white-space: pre-wrap;
}

.draggable_list_headers.phone_book>.header.order_by,
.draggable_list_headers.phone_book>.header.entry_count,
.draggable_list.phone_book>.item>.column.order_by,
.draggable_list.phone_book>.item>.column.entry_count {
    text-align: right;
}
.draggable_list_headers.phone_book>.header.edit,
.draggable_list_headers.phone_book>.header.delete {
    text-align: center;
}
.draggable_list.phone_book>.item>.column.edit,
.draggable_list.phone_book>.item>.column.delete {
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.draggable_list.phone_book>.item>.column.edit:hover,
.draggable_list.phone_book>.item>.column.delete:hover {
    opacity: 1.0;
}
/***********************************************************************
電話帳ダイアログ
 ***********************************************************************/
.phone_book_dialog {
    width: 90%;
}
.phone_book_dialog div.tagsinput span.tag {
    cursor: default;
}
.phone_book_dialog table thead tr th,
.phone_book_dialog table tbody tr td {
    padding-top: 2px;
    padding-bottom: 2px;
}
.phone_book_dialog table tbody tr td .edit {
    display: inline-block;
    float: right;
    padding: 2px 2px 2px 2px;
    cursor: pointer;
    opacity: 0.0;
    transition: opacity 0.2s;
}
.phone_book_dialog.no_edit table tbody tr td .edit {
    cursor: pointer;
}
.phone_book_dialog table tbody tr td:hover .edit {
    opacity: 1.0;
}
.phone_book_dialog.no_edit table tbody tr td:hover .edit {
    opacity: 0.0;
}
.phone_book_entry_renumber_dialog {
    width: 30%;
}
/***********************************************************************
テンプレート一覧
 ***********************************************************************/
.draggable_list.template>.item>.column.name {
    cursor: default;
    /*padding-right: 2rem;*/
    width: 256px;
    /*border: solid 1px red;*/
}
.draggable_list.template>.item>.column.name>.checkbox_label {
    display: block;
    float: left;
    width: 228px;
    white-space: pre-wrap;
}
.draggable_list.template>.item>.column.body {
    width: 40%;
    white-space: pre-wrap;
}
.draggable_list_headers.template>.header.order_by,
.draggable_list.template>.item>.column.order_by {
    text-align: right;
}
.draggable_list_headers.template>.header.edit,
.draggable_list_headers.template>.header.delete {
    text-align: center;
}
.draggable_list.template>.item>.column.edit,
.draggable_list.template>.item>.column.delete {
    text-align: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.draggable_list.template>.item>.column.edit:hover,
.draggable_list.template>.item>.column.delete:hover {
    opacity: 1.0;
}
/***********************************************************************
テンプレートダイアログ
 ***********************************************************************/
.template_dialog {
    width: 50%;
}
/***********************************************************************
プロパティ（顧客企業用）
 ***********************************************************************/
.parent_property_panel table.simple_table>thead>tr>th:nth-child(1),
.parent_property_panel table.simple_table>tbody>tr>td:nth-child(1) {
    width: 50%;
}
.parent_property_panel .draggable_list_headers,
.parent_property_panel .draggable_list_headers>.header {
/*
    background: #666666;
    color: white;
*/
}
.parent_property_panel .draggable_list_headers>.header {
}
.parent_property_panel .draggable_list_headers>.header.name {
    width: 60%;
}
.parent_property_panel .draggable_list>.item>.column.name {
    cursor: default;
}
.parent_property_panel .draggable_list>.item>.column.name>.edit {
    display: inline-block;
    float: right;
    margin-top: 2px;
    padding: 1px 1px 1px 1px;
    cursor: pointer;
    opacity: 0.0;
    transition: opacity 0.2s;
}
.parent_property_panel .draggable_list>.item>.column.name:hover>.edit {
    opacity: 1.0;
}
.parent_property_panel .draggable_list_headers>.header.order_by,
.parent_property_panel .draggable_list_headers>.header.member_count,
.parent_property_panel .draggable_list>.item>.column.order_by,
.parent_property_panel .draggable_list>.item>.column.member_count {
    text-align: right;
}
.parent_property_panel .draggable_list_headers>.header.edit,
.parent_property_panel .draggable_list_headers>.header.delete,
.parent_property_panel .draggable_list>.item>.column.edit,
.parent_property_panel .draggable_list>.item>.column.delete {
    text-align: center;
    cursor: pointer;
}

/***********************************************************************
ダウンロードダイアログ
 ***********************************************************************/
.download_dialog,
.detail_download_dialog,
.download_log_all_dialog {
    width: 384px;
}

/***********************************************************************
お知らせ
 ***********************************************************************/
.timeline-item-content>.timeline-body {
    float: left;
    font-size: 12px;
    width: calc(100% - 54px) !important;
}
.timeline-item-content>label.new_badge {
    display: inline-block;
    float: right;
    font-size: 12px;
    padding: 0px 4px 2px 4px;
    margin-top: 8px;
    margin-right: 8px;
    color: white !important;
    background-color: #E04B4A !important;
    border: solid 1px #E04B4A !important;
    border-radius: 2px;
    opacity: 0.0;
    transition: opacity 0.2s;
}
.timeline-item-content.new>label.new_badge {
    opacity: 1.0;
}
/***********************************************************************
サポートセンター
 ***********************************************************************/
#support_center_wrap #cases a {
    background: #e0e0e0;
    transition: all 0.2s;
}
#support_center_wrap #cases a:hover {
    background: #f9f9f9;
}
#support_center_wrap #cases a.selected {
    background: #f9f9f9;
}
#support_center_wrap #cases a span.fa {
    display: inline-block;
    width: 24px;
    padding: 8px 0 0 0;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}
.support_case_dialog {
    width: 60%;
}
/*.support_case_dialog .attached_file_table tbody tr td.type {*/
.attached_file_table tbody tr td.type {
    width: 200px;
    padding-left: 8px;
    padding-right: 8px;
}
/*.support_case_dialog .attached_file_table tbody tr td.type div.type {*/
.attached_file_table tbody tr td.type div.type {
    width: 216px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*.support_case_dialog .attached_file_table tr .size {*/
.attached_file_table tr .size {
    text-align: right;
}
/*.support_case_dialog .attached_file_table tr .button_delete {*/
.attached_file_table tr .button_delete {
    width: 2rem;
    text-align: center;
}
/*.support_case_dialog .attached_file_table tr td.button_delete {*/
.attached_file_table tr td.button_delete {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s;
}
/*.support_case_dialog .attached_file_table tr td.button_delete:hover {*/
.attached_file_table tr td.button_delete:hover {
    opacity: 1.0;
}
#cases.list-group {
    width: 280px;
}
#cases.list-group>.list-group-item {
    display: inline-block;
    width: 258px;
}
#cases.list-group>.list-group-item>.list-group-status {
    width: 20px;
    /*border: solid 1px blue;*/
    padding-left: 0;
    padding-right: 0;
    margin: 0 0 0 0 !important;
}
#cases.list-group>.list-group-item>.icon {
    width: 32px;
    /*border: solid 1px red;*/
    padding-left: 0;
    padding-right: 0;
    margin: 0 0 0 0 !important;
}
#cases.list-group>.list-group-item>.body {
    width: 184px;
    /*border: solid 1px green;*/
    padding-left: 0;
    padding-right: 0;
    margin: 0 0 0 0 !important;
}
#cases.list-group>.list-group-item>.body>.created_at {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}
#cases.list-group>.list-group-item>.body>.case_title {
    margin: 0 0 0 0 !important;
    padding-left: 0;
    padding-right: 0;
    width: 184px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#messages .item {
    position: relative;
    width: auto !important;
    float: left;
}
#messages .item .text .heading {
    display: block;
    float: right;
    width: auto !important;
    margin-left: 16px;
}
#messages .item .text .heading .reply_button {
    display: inline-block;
    float: right;
    padding: 2px 4px 2px 4px;
    border: solid 1px #ccc;
    opacity: 0.6;
    transition: opacity 0.2s;
}
#messages .item .text .heading .reply_button:hover {
    opacity: 1.0;
    cursor: pointer;
}
#messages .item .text .heading .date {
    float: right;
    margin-right: 8px;
    color: #888;
}
#messages .item .text .content {
    display: block;
    float: left;
}
#messages .item .text .content .body {
    white-space: pre-wrap;
}
.question_editor_dialog {
    width: 96%;
}
/***********************************************************************
サポートセンター（システム管理者用）
 ***********************************************************************/
table.customer_table thead tr th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: hidden;
}
table.customer_table tbody tr td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: hidden;
}
table.customer_table thead tr th.customer_name,
table.customer_table tbody tr td.customer_name {
    width: 256px;
}
table.customer_table tbody tr td div.customer_name {
    float: left;
    width: 236px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.customer_table tbody tr td div.customer_name+.case_count {
    float: right;
    border-radius: 2px;
}
.support_cases_dialog {
    width: 96%;
}
.support_cases_dialog table thead th.unread,
.support_cases_dialog table tbody td .unread {
    text-align: right;
}
.support_cases_dialog table tbody td .fa.menu_icon {
    display: inline-block;
    width: 1.2rem;
    text-align: center;
}
.support_case_messages_dialog {
    width: auto !important;
}
.support_case_messages_dialog .support_case_messages_container.messages .item {
    position: relative;
    width: auto !important;
    float: left;
}
.support_case_messages_dialog .support_case_messages_container .item .text .heading {
    display: block;
    float: right;
    width: auto !important;
}
.support_case_messages_dialog .support_case_messages_container .item .text .heading .reply_button {
    display: inline-block;
    float: right;
    padding: 2px 4px 2px 4px;
    border: solid 1px #ccc;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.support_case_messages_dialog .support_case_messages_container .item .text .heading .reply_button:hover {
    opacity: 1.0;
    cursor: pointer;
}
.support_case_messages_dialog .support_case_messages_container .item .text .heading .date {
    float: right;
    margin-right: 8px;
    color: #888;
}
.support_case_messages_dialog .support_case_messages_container .item .text .content {
    display: block;
    float: left;
}
.support_case_messages_dialog .support_case_messages_container .item .text .content .body {
    white-space: pre-wrap;
}
.answer_editor_dialog {
    width: 60%;
}
/***********************************************************************
QA（システム管理者用）
************************************************************************/
.qa_editor_dialog {
    width: 40%;
}
/***********************************************************************
子ユーザー
************************************************************************/
.child_user_dialog {
    width: 60%;
}

.dataTables_wrapper {
    margin-bottom: 40px;
}