@charset "utf-8";

/* body
---------------------------------- */
body * {
	font-family: 'Kosugi Maru', sans-serif !important;;
	font-family: 'M PLUS 1p', sans-serif !important;;
	font-family: 'Zen Kaku Gothic New', sans-serif !important;
}
body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgb(53, 58, 64);
    text-align: left;
    margin: 0px;
}

/* button
---------------------------------- */
.btn {
    border-radius: 2px !important;
    height: 36px;
    padding: 6px 12px;
}
.btn_w {
    border-radius: 2px !important;
    height: 36px;
    padding: 6px 24px;
}
.btn-default {
    background-color: #fff;
    color: #444;
}
.btn-default:focus,
.btn-default:active,
.btn-default:hover {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}
.btn-success,
.btn-primary {
    color: #fff !important;
    background-color: #ffa722;
    border-color: #ffa722 !important;
}
.btn-success:focus, .btn-success:active, .btn-success:hover,
.btn-primary:focus,.btn-primary:active, .btn-primary:hover {
    color: #fff;
    background-color: #ffb725 !important;
    border-color: #ffb725;
}

.btn-secondary {
    color: #353a40;
    background-color: #efefef;
    border-color: #efefef;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover {
    color: #353a40;
    background-color: #cfd4da;
    border-color: #cfd4da;
}

.btn_div {
    border-radius: 2px;
    height: 36px;
    padding: 6px 12px;
}

.btn-toggle {
    margin: 5px 0;
    padding: 0;
    position: relative;
    border: none;
    height: 2rem;
    width: 3.5rem;
    border-radius: 1.5rem !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    background: #eee;
}

.btn-toggle.active {
    background-color: #ffa722;
}

.btn-toggle .handle {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.64rem;
    height: 1.64rem;
    border-radius: 1.125rem;
    background: #fff;
    transition: left 0.25s;
}

.btn-toggle.active > .handle {
    left: 1.6875rem;
    transition: left 0.25s;
}

/* 共通部品のスタイル
---------------------------------- */
input {
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.5;
    height: 36.5px;
    vertical-align: middle;
    border: 1px solid #cfd4da;
    border-radius: 2px;
    position: relative;
}

textarea {
    padding: 6px 12px;
    border: 1px solid #cfd4da;
    border-radius: 2px;
}

textarea:focus {
    outline: 1px solid #cfd4da;
}

select {
    display: inline-block;
    padding: 6px 12px;
    line-height: 1.5;
    height: 36.5px;
    vertical-align: middle;
    border: 1px solid #cfd4da;
    border-radius: 2px;
}

label {
    font-weight: 400 !important;
}

.dropdown-menu {
    padding: 0;
}

/* datatablesのページネーション
---------------------------------- */

/* --- tableの外側に <div class="table_area_wrap"></div> を追加して、使用する--- */
.table_area_wrap .dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
}
.table_area_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.first,
.table_area_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.last {
    padding: 9px 14px;
}
.table_area_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.table_area_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    padding: 9px 15px;
}
.table_area_wrap .dataTables_wrapper .dataTables_paginate .paginate_button i:before {
    font-size: 18px;
}

/* header
---------------------------------- */
.main-header {
    display:flex;
}

.main-header .logo {
    padding: 0 0 0 18px;
    height: 60px;
    display: flex;
    align-items: center;
}

.main-header .navbar {
    display: flex;
    position: relative;
    width: 100%;
    margin-left: 65px;
    margin-right: 18px;
    height: 60px;
}

.main-header .navbar-custom-menu {
    float: none;
    position: absolute;
    right: 0;
    bottom: 0;
}

/* ユーザーエリア、アイコン */
.user_icon {
    width: 25px;
    height: 25px;
    margin-right: 16px;
}

/* ユーザーエリア、ボット */
.head_user {
    height: 60px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-width: 410px;
}

.head_user .nav {
    padding: 5px;
}

.head_user .nav:focus,
.head_user .nav:active,
.head_user .nav:hover {
    background-color: rgba(207,212,218,0.1);
}

.head_user .nav li {
    letter-spacing: 2px;
}

.head_user .nav li a:focus,
.head_user .nav li a:active,
.head_user .nav li a:hover {
    background-color: rgba(207,212,218,0.1);
}

.header_bot_list .modal {
    padding-right: 0px !important;
}

.header_bot_list .dropdown-menu {
    min-width: 360px;
    top: 155%;
    left: -42px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), -1px 0 2px rgba(0, 0, 0, 0.2);
}

.header_bot_list .dropdown-menu li {
    display: flex;
    justify-content: space-between;
    padding: 4px 15px;
}

.header_bot_list .dropdown-menu li.dropdown-header{
    justify-content: center;
}

.dropdown-menu li .bot_name{
    width: 255px;
}

.dropdown-menu li .bot_name a{
    padding: 0;
}

.dropdown-menu li .bot_name a:focus,
.dropdown-menu li .bot_name a:active,
.dropdown-menu li .bot_name a:hover {
    background-color: #f8f9fa;
    color: #16181b;
}

.header_bot_list .dropdown-menu li button {
    color: #353a40;
    border: 1px solid#adb5bd;
    border-radius: 2px;
    background: #fff;
    margin-left: 10px;
    padding: 3px 6px;
}

.header_bot_list .dropdown-menu li button:focus,
.header_bot_list .dropdown-menu li button:active,
.header_bot_list .dropdown-menu li button:hover {
    color: #353a40;
    background-color: rgba(207,212,218,0.1);
    border-color: #adb5bd;
}

.header_bot_list .dropdown-menu button a {
    padding: 0;
    font-size: 10px;
}

.header_bot_list .dropdown-menu li button a:focus,
.header_bot_list .dropdown-menu li button a:active,
.header_bot_list .dropdown-menu li button a:hover {
    color: #353a40;
    background-color: rgba(207,212,218,0.1);
    border-color: #adb5bd;
}

.header_bot_list .modal .modal-dialog{
    width: 960px;
}

.header_bot_list .modal .modal-content {
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.2);
}

.navbar .nav>li .account_toggle {
    padding: 0;
    margin-right: 16px;
}

/* ボット追加モーダル */
.bot_form .form-group {
    display: flex;
    padding: 0 15px;
}

.bot_form .has-feedback label {
    position: relative;
    width: 20%;
    margin-right: 20px;
    font-size: 14px;
}

.bot_form .has-feedback label span {
    position: absolute;
    top: 20%;
    left: 100%;
}

.bot_form .has-feedback label span i:before {
    color: #dd4b39;
    font-size: 10px;
}

.bot_form .has-feedback .bot_input {
    width: 80%;
}

.bot_form .has-feedback .bot_input input {
    width: 700px;
}

.bot_form .has-feedback .description_area {
    font-size: 12px;
    width: 100%;
}

/* ユーザーエリア、プラン */
.user_plan {
    display: inline-flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.user_plan li {
    padding: 0;
    padding-right: 6.8px;
    padding-left: 6.8px;
    margin-right: 8px;
    font-size: 11px;
    border: 1px solid #adb5bd;
    color: #adb5bd;
    border-radius: 50px;
    line-height: 1.8;
}

.user_plan li.active{
    color: #fff;
    background-color: #495057;
    border: 1px solid#495057;
}

/* カスタムメニュー */
.navbar-custom-menu>.navbar-nav>.header_menu {
    height: 60px;
    display: flex;
    align-items: center;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
    right: 0;
    top: 85%;
    padding: 8px 0;
}

/* カスタムメニュー、オペレーター */
.navbar-custom-menu>.navbar-nav>.operator {
    position: relative;
}

.operator ul li{
    padding: 4px 24px;
    white-space: nowrap;
}

.operator ul li:focus,
.operator ul li:hover {
    background-color: #f8f9fa;
}

.operator ul li a {
    padding: 0;
}

.operator ul li a:focus,
.operator ul li a:hover {
    background-color: #f8f9fa;
}

.navbar-nav>.header_menu .header_image {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}

.nav .header_menu .triggerIcon{
    padding: 0;
    margin-left: 8px;
}

/* オペレーター設定モーダル */
.modal-backdrop.in {
    display: none;
}

/* モーダルヘッダー */
.op_form .op_form_header{
    position: relative;
    margin-bottom: 15px;
}

.op_form .op_form_header .h_img {
    margin: 0 auto;
    height: 70px;
    width: 70px;
    background: #ccc;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 70px;
}

.op_form .op_form_header .up_txt {
    margin-bottom: 20px;
}

.op_form .op_form_header .up_txt button {
    position: absolute;
    top: 65%;
    left: 39%;
    padding: 2px 5px 3px;
    height: auto;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid transparent;
    font-size: 14px;
}

.form_header_mdl .modal {
    background: transparent;
}

.form_header_mdl .modal-dialog {
    margin: 0 auto;
    position: fixed;
    height: 120px;
    width: 330px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%) !important;
}

.form_header_mdl .modal-content {
    margin: 0;
    padding: 10px;
    height: 150px;
    background-color: #fff;
    color: #353a40;
    border-radius: 0;
    box-shadow: 0 0 5px 0px rgba(0,0,0,0.2);
    overflow: auto;
}

.modal-content .photo_file {
    font-size: 14px;
    width: 310px;
}

.modal-content .photo_file dl{
    margin: 10px 5px 21px;
}

.modal-content .photo_file input[type=file]{
    border: none;
    box-shadow: none;
    margin-bottom: 5px;
    padding: 0;
    background: transparent;
    height: auto;
}

.file_button {
    margin: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0 40px;
}

.file_button button {
    margin: 0 5px;
}


/* モーダルコンテンツ */
.op_form .op_form_item{
    margin-bottom: 2px;
    display: flex;
}

.op_form .op_form_item label {
    position: relative;
    width: 164px;
    margin-right: 8px;
	margin-top:3px;
}

.op_form_item .ope_hint {
    margin-left:-40px;
	width:40px;
}

.op_form_item #lineplantooltip {
    margin-top:6px;
}



.op_form_item label span {
    position: absolute;
    top: 20%;
    left: 66%;
}

.op_form_item label span i:before {
    color: #dd4b39;
    font-size: 10px;
}

.asterlisk {
    color: #dd4b39;
    font-size: 10px;
}

.op_form .op_form_item input {
    width: 465px;
}

.op_form .op_form_item select {
    width: 465px;
}

.op_form_item .available_bot {
    padding: 0;
    list-style: none;
}

.op_form_item .available_bot li {
    padding: 4px 0;
}

/* モーダルコンテンツ（パスワード変更用） */
.op_form_pass .op_form_item{
    margin-bottom: 10px;
    display: flex;
}

.op_form_pass .op_form_item label {
    position: relative;
    width: 200px;
    margin-right: 8px;
}

.op_form_item label span {
    position: absolute;
    top: 20%;
    left: 66%;
}

.op_form_item label span i:before {
    color: #dd4b39;
    font-size: 10px;
}

.op_form_pass .op_form_item input {
    width: 400px;
}

.op_form_pass .op_form_item select {
    width: 40px;
}

.op_form_item .available_bot {
    padding: 0;
    list-style: none;
}

.op_form_item .available_bot li {
    padding: 4px 0;
}
/* オペレーター一覧モーダル */
@media (min-width: 768px) {
    .operator_list .modal-dialog {
        min-width: 900px;
    }
}

.operator_list .modal-header {
    border-bottom: none;
}

.operator_list .modal-body {
    padding: 0 15px 15px;
}


table.dataTable thead {
    border-top: none !important;
}

table.dataTable thead tr th {
    border-bottom: none !important;
    font-weight: 400;
    text-align: center;
}

table.dataTable.no-footer {
    border-bottom: 2px solid #ddd !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 2px solid #ddd !important;
}

table.dataTable tbody td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    /*text-align: center;*/
}

table.dataTable tbody td .op_icon {
    font-size: 26px;
    color: #efefef;
    width: 30px;
    height: 30px;
}

.user ul li {
    padding: 4px 24px;
    white-space: nowrap;
}

.user ul li:focus,
.user ul li:hover {
    background-color: #f8f9fa;
}

.user ul li a {
    padding: 0;
}

.user ul li a:focus,
.user ul li a:active,
.user ul li a:hover {
    background-color: #f8f9fa;
}

/* header user部分 hover */
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background: #fff;
}
/* header account部分 hover */
.nav>li>a:hover, .nav>li>a:active, .nav>li>a:focus {
    background: #fff;
}

/* footer
---------------------------------- */
.main-footer {
    font-size: 15px;
    color: #adb5bd;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    margin-left: 0;
}

.main-footer span a {
    font-size: 12px;
    margin-left: 24px;
    color: #666f86;
}

.wrapper .main-footer {
    margin-left: 0 !important;
    z-index: 900;
}

/* サイドバー
---------------------------------- */
.main-sidebar .sidebar a {
    color: #495057;
}

.main-sidebar .sidebar a:focus {
    color: #495057 !important;
}

.main-sidebar .sidebar a:hover {
    background-color: #f8f9fa;
    color: #00B900 !important;
}

.main-sidebar .sidebar .menu-top {
    color: #495057;
}

.menu-top span:hover {
    color: #00B900;
}

.sidebar-menu .treeview-menu>li>a>span {
    font-size: 14px;
}

/* メインコンテンツ
---------------------------------- */
.main {
    min-width: 1000px;
    width: 100%;
    margin: 60px 0 60px 300px;
}

.content-wrapper {
    min-width: 900px;
    margin-left: 300px;
    padding-bottom: 60px;
}

.self_page_title_name{
	padding:0px;
	margin:0px;
	font-size:20px;
}