/*---
Theme BlueBean operator
Version: 1.0 : 2019.11.21 
---*/


/*--------------------------------------------------------------
>>> CONTENTS:
----------------------------------------------------------------
1.0 - Basics
2.0 - login
3.0 - toppage
4.0 - pop on plugin
5.0 - relogin

10.0 - Media Queries
10.1 - Desktop( < 1300px )

--------------------------------------------------------------*/

*:not(th):not(td):not(tr):not(tbody):not(table):not(a) {
    line-height: 1.5em;
}

*:not(a):not(button):not(input):not(textarea):not(select) {
    -webkit-tap-highlight-color: transparent;
}

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: initial;
}

#nav-drawer a {
    -webkit-tap-highlight-color: transparent;
}

:not([id^="CustomerContactExt"]):focus,
:not([id^="CustomerContactExt"]):hover {
    /*outline: none;*/
}


/*--------------------------------------------------------------
1.0 - Basics
---------------------------------------------------------------*/

html {
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Yu Gothic', YuGothic, Verdana, Helvetica, 'ＭＳ Ｐゴシック', sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* sweetalert2用、popup時背景位置Fix */

html.swal2-height-auto {
    height: auto;
    overflow: hidden;
}


/* @font-face {
    font-family: opFont-r;
    src: local('opFont-r'),url('../../fonts/ShinGoPro-Regular.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;s
} */

body {
    font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "Mplus 1p", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 100%;
    width: 100%;
    word-break: break-all;
    min-height: 100%;
    color: #3a3737;
    font-size: 14px;
    overflow: hidden;
}

::-webkit-input-placeholder {
    /* Edge */
    font-family: "Mplus 1p", sans-serif;
    color: #999999;
    padding: 0 0 0 5px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-family: "Mplus 1p", sans-serif;
    color: #999999;
    padding: 0 0 0 5px;
}

::placeholder {
    font-family: "Mplus 1p", sans-serif;
    color: #999999;
    padding: 0 0 0 5px;
}

input[type="text"],
input[type="textarea"] {
    padding: 0px 5px;
}

input[type="text"]:disabled,
.btn.disabled,
.btn:disabled {
    background: #e8e8e8;
    opacity: .65;
    inset: revert;
    cursor: not-allowed;
    box-shadow: inset 0 0 4px #cecece;
    -webkit-box-shadow: inset 0 0 4px #cecece;
    -moz-box-shadow: inset 0 0 4px #cecece;
}

input[type="checkbox"] {
    /* -webkit-appearance: none; */
    margin: 0 10px 0 0;
    background: #fff;
    border: #45454c solid 1px;
    border-radius: 3px;
    min-height: 18px;
    min-width: 18px;
    position: relative;
    cursor: pointer;
}

input[type="checkbox"]:checked:after:not(.customer-note-checkbox) {
    font-family: 'opIcon' !important;
    content: "\ea10";
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 14px;
    position: absolute;
    background-color: #5c5a9c;
    border-radius: 3px;
    padding-top: 2px;
}

button,
input,
optgroup,
select,
textarea {
    border-radius: 3px;
    border: 1px solid #989898;
}

button:focus {
    /*outline: none;*/
}

textarea {
    resize: auto;
}

.custInfoCont input.bg-pink:-internal-autofill-selected {
    background-color: #f49696 !important;
    -webkit-box-shadow: 0 0 0px 1000px #f49696 inset;
}

input[readonly], textarea[readonly] {
	background-color: #ccc;
}

/*---------   loading spinner ----------------*/

.spinnerWrap {
    transition: opacity .15s linear;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.spinnerDiv {
    display: none;
}

.spinnerWrap .loader {
    z-index: 9999;
}

.spinnerWrap::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    position: absolute;
}

.loader {
    color: #ffffff;
    font-size: 45px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/*---------   loding spinner ----------------*/


/*---------   scrolling bar ----------------*/


/* width */

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}


/* Track */

 ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(252, 252, 252);
    border-radius: 5px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
    background: rgb(185, 185, 185);
    border-radius: 8px;
    width: 12px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: rgb(168, 168, 168);
}


/*---------   scrolling bar ----------------*/

table.table-primary {
    border: 1px solid #a8a8d0;
}

table.table-primary th,
table.table-light th {
    background-color: #343453;
    color: #fff;
    font-weight: 500;
}

table th a,
table th a:hover {
    color: #fff;
}

table.table-primary tr td {
    background: #fff;
}

table.table-primary tr:nth-child(odd) td {
    background: #fff;
}

table.table-primary tr:nth-child(even) td {
    background: #e2def3;
}

table.table-primary tr:nth-child(odd):hover td {
    background: #f3f3f3;
}

table.table-light td {
    border: 1px solid #a8a8d0;
    background: #fff;
    background-clip: padding-box;
}

table.table-light tr:hover {
    background: #f3f3f3;
}

table .button {
    padding: 2px 12px;
    width: fit-content;
    font-size: 12px;
    line-height: 1.8em;
    vertical-align: middle;
    height: 25px;
    min-width: 50px;
    display: inline-block;
}

table .s-button {
    padding: 2px 4px;
    width: fit-content;
    font-size: 12px;
    line-height: 1em;
    vertical-align: middle;
    height: auto;
}

.tableWrap {
    width: 100%;
    padding: 1.5% 2% 1% 2%;
    background-color: #dfe5ec;
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 5px;
}

.modal-body .tableWrap table {
    margin: 5px 0 10px 0;
}

.tableWrap .tableWarpTitle {
    padding: 0 5px;
    border-radius: 5px 5px 0 0;
    color: #343453;
    text-align: left;
    font-size: 16px;
}

table caption {
    caption-side: top;
}

.table td,
.table th {
    vertical-align: middle;
    padding: .6rem;
    border: 1px solid #a8a8d0;
}

.table td {
    padding: .35rem;
}

table.table-2line th {
    width: 25%;
    color: #4a47a9;
    border: none;
}

table.table-2line td {
    color: #717171;
    border: none;
}

.scrollable-container {
    overflow: scroll;
    position: relative;
    width: 100%;
    max-height: 100%;
    margin: 0.5em 0 5px 0;
}
#searchBody{
    height: 75%;
}

.campaignModal table th:last-child {
    width: 25%;
}

.campaignModal table td {
    white-space: initial;
}

.table-scrollable thead th {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    top: 0;
}

.table-scrollable th,
.table-scrollable td {
    white-space: nowrap;
}

.table-scrollable thead th:last-child {
    right: 0;
    z-index: 1;
}

.table-scrollable tbody td:last-child {
    position: -webkit-sticky;
    /* for Safari */
    position: sticky;
    right: 0;
}

.table-header-tooltip {
    margin: 5px;
    border: 1px solid gray;
    border-radius: 20px;
    font-size: 9px;
    padding: 2px 4px;
    cursor: context-menu;
}

.table-header-tooltip:hover {
    background: #7775b9;
}

.overtime td:last-child,
.overtime:hover td:last-child {
    background-color: #fbd9dd !important;
}

a,
a:hover {
    color: #2e61b7;
}

a.clicked {
    color: #3a3737;
    text-decoration: none !important;
    cursor: auto;
}

.button {
    color: #fff;
    background-color: #5c5a9c;
    border-radius: 5px;
    border: 0;
    padding: 10px;
    transition: 0.3s;
    cursor: pointer;
    width: fit-content;
}

.button:hover {
    background-color: #3f4286;
}

.button-ring {
    color: #fff;
    background-color: #00b894;
    border-radius: 50px;
    border: 0;
    padding: 0px 10px;
    transition: 0.3s;
    cursor: pointer;
    font-size: 35px;
    margin: 5px 0;
}

.button-ring:hover {
    background-color: #08967a;
}

.button-hangout {
    background-color: #ff4a4a;
}

.button-hangout:hover {
    background-color: #e22727;
}

.button-transfer {
    background-color: #009fe3;
}

.button-transfer:hover {
    background-color: #0490cc;
}

.button i {
    margin-right: 8px;
    line-height: inherit;
}

.s-button {
    width: 66px;
    height: 25px;
    padding: 6px 0;
    text-align: center;
    cursor: pointer;
    line-height: 1em;
}

.button-green {
    color: #fff;
    background-color: #168b6f;
}

.button-green:hover {
    background-color: #0f6954;
}

.button-lightgreen {
    color: #fff;
    background-color: #27b794;
}

.button-lightgreen:hover {
    background-color: #1e9276;
}

.button-gray {
    color: #fff;
    background-color: #666666;
}

.button-gray:hover {
    background-color: #525252;
}

.button-black {
    background-color: #4c4b4b;
}

.button-black:hover {
    background-color: #3f3f3f;
}

.button.bg-green:hover {
    background-color: #039e80;
}

.button.bg-orange:hover {
    background-color: #ef7f3e;
}

.button.bg-yellow:hover {
    background-color: #c1aa02;
}

.button.bg-blue:hover {
    background-color: #0490cc;
}

.button.bg-red:hover {
    background-color: #e63b3c;
}

.button.bg-pink:hover {
    background-color: #ea8282;
}

.button.bg-purple:hover {
    background-color: #3f4286;
}

.bg-green,
.bg-green.clicked:hover {
    background-color: #00b894;
}

.bg-orange,
.bg-orange.clicked:hover {
    background-color: #ff8943;
}

.bg-yellow,
.bg-yellow.clicked:hover {
    background-color: #dbc001;
}

.bg-blue,
.bg-blue.clicked:hover {
    background-color: #009fe3;
}

.bg-red,
.bg-red.clicked:hover {
    background-color: #ff494b;
}

.bg-pink,
.bg-pink.clicked:hover {
    background-color: #f49696;
}

.bg-purple,
.bg-purple.clicked:hover {
    background-color: #5c5a9c;
}

.bg-gray,
.bg-gray.clicked:hover {
    background-color: #525252;
}

.bg-lightgray,
.bg-lightgray.clicked:hover {
    background-color: #ccc;
}

.overtime td,
.overtime td:hover {
    background-color: #fbd9dd !important;
}

.clicked,
.clicked:hover {
    cursor: context-menu !important;
    opacity: 0.4;
}

.clicked i,
.clicked div {
    cursor: default;
}

.color-green {
    color: #00b894;
}

.color-orange {
    color: #ffa200;
}

.color-yellow {
    color: #dbc001;
}

.color-blue {
    color: #009fe3;
}

.color-red {
    color: #ff494b;
}

.color-pink {
    color: #f49696;
}

.color-darkpink {
    color: #ea7979;
}

.color-purple {
    color: #5c5a9c;
}

.memo {
    font-size: 12px;
    color: gray;
}


/*---------   tooltip ----------*/

.tooltiptext {
    color: #fff;
    text-align: left;
    border-radius: 2px;
    z-index: 1;
    font-size: 12px;
    cursor: auto;
}

.tooltiptext .lineTitle {
    border-bottom: 1px solid #FFF;
    padding-bottom: 6px;
}

.tooltiptext ul.listText {
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tooltiptext ul.listText li {
    margin: 2px 0;
    line-height: 1.7em;
}

.popover-bod {
    padding: .5rem;
}

.tooltip {
    font-size: 12px;
}

.tooltip.show {
    opacity: 0.85 !important;
}

ul.tooltipWrap-lg {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 400px;
    overflow: auto;
    font-size: 12px;
}

ul.tooltipWrap-lg li {
    border-bottom: 1px solid #d2cdcd;
    padding: 2px 0;
    color: #fff;
}

ul.tooltipWrap-lg li:last-child {
    border: none;
}

ul.tooltipWrap-lg li div {
    display: inline-block;
    margin: 0 1.5em 0 0;
}

ul.tooltipWrap-lg li>div:nth-of-type(1) {
    min-width: 150px;
}

ul.tooltip-li-s li>div:nth-of-type(1) {
    min-width: 80px;
}

.popover {
    background-color: black;
    opacity: 0.9;
    color: #fff;
}

#popoverContainer .popover {
    min-width: 350px;
}

.bs-popover-top .arrow:after {
    border-top-color: black;
}

.bs-popover-bottom .arrow:after {
    border-bottom-color: black;
}

.bs-popover-left .arrow:after {
    border-left-color: black;
}

.bs-popover-right .arrow:after {
    border-right-color: black;
}


/*--------- end of tooltip ----------*/


/*--------------------------------------------------------------
2.0 - login
---------------------------------------------------------------*/

.loginWarp {
    overflow: scroll;
    display: flex;
}

.loginWarp>div {
    float: left;
    height: 100vh;
}

.loginWarp>div:nth-of-type(1) {
    width: 56%;
    background: url(../../img/operator_v.2/login.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center bottom;
}

.loginWarp>div:nth-of-type(2) {
    width: 44%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.webName {
    border-bottom-style: solid;
    border-bottom-color: #a2a2a2;
    border-bottom-width: 1px;
    width: 400px;
    position: absolute;
    top: 10%;
    padding: 0 0 20px 30px;
    text-align: left;
    color: #383768;
    text-align: right;
}

.webName>div:nth-of-type(1) {
    font-size: 40px;
}

.webName>div:nth-of-type(2) {
    font-size: 14px;
    color: #7d7cb0;
    margin-top: 5px;
    text-align: left;
    padding-left: 52px;
}

.loginTitle {
    padding: 18% 10% 3% 10%;
    margin: 0 auto;
    text-align: center;
}

.loginTitle>div {
    margin: 10px 0;
}

.mainTitle {
    font-size: 2.2em;
    color: #5c5a9c;
}

.loginType {
    margin: 0 auto;
    padding: 2% 0 0 0%;
    text-align: left;
    width: 55%;
}

.loginTypePsw {
    width: 70%;
    text-align: center;
    margin: 5% auto;
    padding: 1% 10%;
}

.loginTypePsw .mainTitle {
    margin: 1% 0 15% 0;
}

.loginTypePsw .form-group {
    text-align: left;
}

.loginTypePsw .button {
    margin: 3% auto;
    width: 100%;
    padding: 15px 0;
}

.loginType>div.lang {
    padding: 5px 0;
}

.loginType>div.lang a {
    text-decoration: underline;
}

.loginInput {
    padding: 5px 15px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 0 12px 0;
}

.loginInput i {
    width: 10%;
    margin: 0 5px 0 0;
    font-size: 30px;
    height: 3.5em;
    vertical-align: middle;
    line-height: 1em;
    color: #545454;
}

.loginInput input[type=text],
.loginInput input[type=password] {
    width: 85%;
    line-height: 2.5em;
    border: none;
    height: 2.5em;
}

.loginType .button {
    width: 100%;
    margin: 5% 0;
    padding: 15px 0;
    font-size: 18px;
}

footer {
    color: #666666;
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    right: 0;
    left: 0;
}

.loginType .acdPanel .button {
    width: auto;
    padding: 8px;
    margin: 0 0 5px 0;
    font-size: 13px;
}

.login-remember-me {
    margin: 0 0 8px 0;
    font-size: 0.8em;
}

.login-remember-me input[type="checkbox"] {
    margin: 0 5px;
    vertical-align: middle;
    min-width: 13px;min-height: 13px;
}

.login-remember-me input[type="checkbox"]:after {
    padding-top: 0px;
}

.login-remember-me label {
    text-align: center;
    margin-bottom: 0px;
    vertical-align: bottom;
    color: #6a667a;
    cursor: pointer;
}

.acdPanel {
    border: 5px solid #cccccc;
    margin: 0 0 12px 0;
}

.acdPanel>div {
    margin: -1px 0 0 0;
    background-color: #cccccc;
    padding: 5px 10px;
}

.acdPanel ul.acdList {
    list-style: none;
    margin: 0;
    padding: 0px;
    height: 200px;
    overflow-y: auto;
    width: 100%;
}

.acdPanel ul.acdList li {
    margin: 0px 0 4px 0;
    padding: 0;
    line-height: 18px;
}

.acdPanel ul.acdList li label {
    cursor: pointer;
    vertical-align: middle;
    width: 100%;
    line-height: 18px;
    padding: 5px 15px 5px 15px;
    position: relative;
    margin: 0;
}

.acdPanel ul.acdList li div {
    display: inline-block;
}

.acdPanel ul.acdList li label input[type="checkbox"] {
    vertical-align: bottom;
}

.acdPanel ul.acdList>li:hover {
    background-color: #f1effa;
}

.logout {
    padding: 30% 10%;
}

.logout .mainTitle {
    line-height: 2em;
}

.selectCampaignConfirm .button,
.logout .button {
    width: 55%;
    margin: 5%;
    padding: 15px 0;
    font-size: 18px;
}


/*--------------------------------------------------------------
3.0 - Toppage
---------------------------------------------------------------*/

.logo {
    text-align: center;
    margin: 15px auto 10px auto;
    border-bottom: 1px solid white;
    padding: 0 0 15px 0;
}

.menuPanel,
.menuFoldPanel {
    width: 160px;
    display: inline-block;
    background-color: #343453;
    height: 100vh;
    color: #fff;
    padding: 5px 8px;
    box-sizing: border-box;
    position: fixed;
}

.switch {
    width: 18px;
    height: 35px;
    background-color: #343453;
    border-radius: 0px 5px 5px 0px;
    position: absolute;
    left: 160px;
    text-align: center;
    line-height: 37px;
    vertical-align: middle;
    cursor: pointer;
    top: 0;
    opacity: 0.8;
}

.switch:hover {
    opacity: 0.9;
}

.opName {
    width: 140px;
    display: flex;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 0 7px 0;
    margin: 0 auto;
}

.opName:hover {
    color: #c4c2e6;
}

.opName div:nth-of-type(1) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 160px;
    font-size: 14px;
    font-weight: 600;
}

.opName .icon-arrow-down {
    flex: 1;
    font-size: 18px;
    margin: -4px;
    width: 23px;
    height: 23px;
}

.opName:hover .opName div:nth-of-type(1),
.opName:hover .opName .icon-arrow-down {
    border-bottom: 1px solid gray;
    /* background: rgba(255, 255, 255, 0.2); */
}

@keyframes animation-ring {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #f49696;
    }
    100% {
        background-color: #bf1212;
    }
}

@-o-keyframes animation-ring {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #f49696;
    }
    100% {
        background-color: #bf1212;
    }
}

@-moz-keyframes animation-ring {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #f49696;
    }
    100% {
        background-color: #bf1212;
    }
}

@-webkit-keyframes animation-ring {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #f49696;
    }
    100% {
        background-color: #bf1212;
    }
}

@keyframes animation-ring-yellow {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #dbc001;
    }
    100% {
        background-color: #bf1212;
    }
}

@-o-keyframes animation-ring-yellow {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #dbc001;
    }
    100% {
        background-color: #bf1212;
    }
}

@-moz-keyframes animation-ring-yellow {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #dbc001;
    }
    100% {
        background-color: #bf1212;
    }
}

@-webkit-keyframes animation-ring-yellow {
    0% {
        background-color: #bf1212;
    }
    50% {
        background-color: #dbc001;
    }
    100% {
        background-color: #bf1212;
    }
}

.animation-ring {
    -webkit-animation: animation-ring 2s infinite;
    -moz-animation: animation-ring 2s infinite;
    -o-animation: animation-ring 2s infinite;
    animation: animation-ring 2s infinite;
}

.animation-ring-yellow {
    -webkit-animation: animation-ring-yellow 1.3s infinite;
    -moz-animation: animation-ring-yellow 1.3s infinite;
    -o-animation: animation-ring-yellow 1.3s infinite;
    animation: animation-ring-yellow 1.3s infinite;
}

.dropdown-menu {
    padding: 5px;
}

.dropdown-menu a i {
    font-size: 17px;
    vertical-align: text-bottom;
}

.dropdown-item {
    padding: 5px;
    border-bottom: 0.5px solid #b7b7b7;
    font-size: 14px;
    font-weight: lighter;
}

.dropdown-item i:before {
    padding-right: 5px;
}

.dropdown-item:last-of-type {
    border-bottom: none;
}

.opImg {
    position: relative;
}

.opImg img {
    width: 38px;
    height: 38px;
    border-radius: 50px;
    background-color: #fff;
    display: inline-block;
    float: left;
    margin: 0px 7px 0 0;
    border: 2px solid #fff;
}

.op {
    min-height: 45px;
    padding: 0 2px;
    display: flex;
}

.opStatus .dropdown-menu {
    top: -3px !important;
    box-shadow: -1px 1px 4px #212121;
}

.dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    left: -2px;
    top: 26px;
    border: 2px solid #fff;
}

.op>div:nth-of-type(2) {
    min-height: 45px;
}

.op>div:nth-of-type(2) .badge {
    font-size: 13px;
    margin: 3px 0 1px 0;
    vertical-align: middle;
    padding: 5px 8px 2px 8px;
    min-height: 20px;
    max-width: 94px;
    white-space: pre-wrap;
}

.op>div:nth-of-type(2)>div:nth-of-type(2) {
    font-size: 12px;
}

.direction {
    display: block;
    width: 100%;
    padding-left: 50px;
    font-size: 18px;
    margin: -2px 0 0 0;
    transform: scale(1.3, 0.9);
    height: 22px;
    box-sizing: border-box;
}

.client {
    font-size: 12px;
}

.client i {
    font-size: 26px;
    padding: 0 5px;
    display: inline-block;
    float: left;
}

.client>div {
    min-height: 40px;
}

.client>div>div:nth-of-type(1) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 105px;
    min-height: 1.5em;
}

.phonefn {
    margin: 0 auto;
    text-align: center;
}

.phonefn .button,
.callbtn button.button {
    width: 66px;
    height: 55px;
    margin: 3px;
    display: inline-block;
    float: left;
    text-align: center;
    font-size: 12px;
    padding: 6px 0;
    line-height: 1em;
}

.phonefn .button i,
.callbtn button.button i {
    font-size: 28px;
    margin: -10px 0 0 0;
    padding: 0;
    line-height: 28px;
}

.phonefn .button div,
.callbtn button.button div {
    margin: 2px 0;
    font-size: 12px;
    font-weight: bold;
}

.phonefn .button i:before {
    color: #fff;
}

.dropdown-divider {
    margin: .3rem 0;
}

.calloutPanel {
    font-size: 12px;
}

.calloutPanel select {
    width: 100%;
    border-radius: 5px;
    height: 27px;
    border: none;
    margin: 3px 0 0 0;
    font-size: 12px;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    padding: 0 22px 0 0;
}

.calloutPanel select option {
    background-color: #f1effa;
}

select::-ms-expand {
    display: none;
}

.callbtn {
    margin: 4px 0 0 0;
}

.callbtn>button.button {
    display: inline-block;
    float: left;
}

.callbtn>div .next-call-campaign {
    width: 138px;
    height: 100% !important;
}

.callbtn>div .button {
    height: 25px;
    font-size: 11px;
}

.waittingCallPanel {
    font-size: 12px;
}

.waittingCallPanel .s-button {
    position: relative;
    display: inline-block;
    float: left;
    margin-top: 5px;
}

.s-button .dot {
    width: auto;
    height: auto;
    left: 55px;
    top: -5px;
    font-size: 10px !important;
    border: none;
    padding: 1px 3px;
    display: inline-block;
    white-space: nowrap;
    border-radius: 50px;
    z-index: 1;
    line-height: inherit;
}

.time {
    margin: 3px 0 0 12px;
    display: inline-block;
}

.time div {
    line-height: 1.3em;
    font-size: 11px;
}

.buttonPanel {
    font-size: 13px;
}

.buttonPanel button:first-child {
    margin-right: 10px;
}

.logoutPanel {
    position: absolute;
    bottom: 8px;
}

.logoutPanel .button {
    height: 50px;
}

.logoutPanel .button div {
    font-size: 11px;
}

.logoutPanel .button i {
    font-size: 26px;
    line-height: 25px;
}

.subPanel {
    width: 100%;
    background-color: #ededed;
    background-image: -webkit-linear-gradient(top, #fff, #ededed);
    background-image: -moz-linear-gradient(top, #fff, #ededed);
    background-image: -ms-linear-gradient(top, #fff, #ededed);
    background-image: -o-linear-gradient(top, #fff, #ededed);
    background-image: linear-gradient(to bottom, #fff, #ededed);
    height: 100vh;
    padding: 0 0 10px 160px;
    box-sizing: border-box;
}

.topBar {
    padding: 0 0 0 26px;
    box-sizing: content-box;
    background: #f1effa;
    border-bottom: 0.5px solid #dcdcdc;
    height: 37px;
    font-size: 12px;
}

.noPDMessage {
    font-size: medium;
    color: white;
    background: #ff9800;
    padding: 11px;
    text-align: center;
}

/* for select tag in検索ボックス  (H=29px) selectで囲られた */

.topBar .search {
    padding: 1px 2px 1px 0;
    text-align: right;
    margin: 0;
}

.search select {
    height: 33px;
    padding: 0 28px 0 10px;
    margin: 2px -4px 2px 0;
    background-color: #fff;
    border: 1px solid #978ec0;
    width: 11%;
    color: #494676;
    font-size: 14px;
    vertical-align: middle;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    max-width: 250px;
    border-right: none;
    line-height: 33px;
}

.topBar .search label:nth-of-type(1) select {
    border-radius: 5px 0 0 5px;
}

.topBar .search label:nth-of-type(2) select {
    border-radius: 0;
}

.search select option {
    background-color: #fff;
    border-bottom: 1px solid #5c5a9c;
}

label.selectorLabel,
label.inputLabel {
    display: inline;
    position: relative;
}

label.selectorLabel::after {
    font-family: 'opIcon' !important;
    content: "\e91d";
    position: absolute;
    color: #5c5a9c;
    padding-left: 8px;
    pointer-events: none;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
    top: 0;
}

.search label.selectorLabel,
label.inputLabel {
    height: 33px;
    line-height: 33px;
    font-weight: bold;
}

.search .selectorLabel::after {
    right: 5px;
    top: 0px;
    position: absolute;
}

.topBar .search .selectorLabel::after {
    top: -5px;
}

.search input {
    height: 33px;
    padding: 0 8px;
    margin: 0;
    vertical-align: middle;
    width: 16%;
    max-width: 280px;
    position: relative;
    border: 1px solid #978ec0;
    border-radius: 0;
    font-size: 14px;
}


/*
.search .inputLabel::after{
    font-family: 'opIcon' !important;
    content: "\e91b";
    position: absolute;
    color: #897eb7;
    padding-left: 8px;
    pointer-events: none;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    top: -1px;
    right: 15px;
}
*/

.search .button {
    width: 50px;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    position: relative;
    font-weight: bold;
    height: 33px;
    border-radius: 0 5px 5px 0;
    margin: 0 0 0 -5px;
    font-size: 14px;
}

.search .searchMore {
    vertical-align: middle;
    display: inline-block;
    margin: 0 8px 0 4px;
    cursor: pointer;
    text-decoration: underline;
    color: #736a99;
    font-weight: bold;
}

.search .div::before {
    content: " ";
    position: absolute;
    width: 2px;
    border-left: 1px solid #8482ca;
    top: 0;
    left: -8px;
    height: 25px;
}

.search .button.feedback {
    width: auto;
    height: 22px;
    font-size: 12px;
    line-height: 14px;
    margin: 0 2px;
    color: #52518a;
    background-color: #dbd9f1;
    padding: 4px 9px;
    font-weight: lighter;
    border: 1px solid #9b9abd;
    z-index: 3;
    transition: 0.3s;
}

.search .button.feedback:hover {
    color: #ffffff;
    background-color: #5c5a9c;
}

.calloutPanel .selectorLabel,
.recordPanel .infoPanel .selectorLabel {
    display: inline-block;
}

.recordPanel .infoPanel .selectorLabel {
    width: 25%;
    margin-right: 5px;
}

.recordPanel .infoPanel .selectorLabel select {
    width: 100%;
    line-height: 27px;
    height: 27px;
}

.recordPanel .infoPanel label.selectorLabel::after {
    height: 27px;
    line-height: 27px;
}

.recordPanel .header {
    display: flex;
    justify-content: space-between;
}

.recordPanel .header .sms-button-wrapper {
    margin-right: 0;
    float: none;
    display: flex;
    align-items: center;
}

.recordPanel .header button {
    margin-top: 0;
}

.calloutPanel .selectorLabel::after {
    right: 0px;
    top: 4px;
    padding: 0 3px 0 0;
}

.custInfoPanel {
    position: relative;
    margin: 10px 1%;
    width: 98%;
    height: 60%;
    background-color: #fdfdfd;
    box-shadow: 0px 1px 4px grey;
}

.custInfoPanel .infoPanel {
    background-color: #ebf1ef;
    font-family: "MS PGothic","Arial","Hiragino Kaku Gothic ProN","Osaka","sans-serif";
}

.header i,
.header div {
    display: inline-block;
    float: left;
    line-height: 30px;
    vertical-align: middle;
    margin-right: 4px;
}

.header .floatRightDiv {
    float: right;
    margin: 0;
}

.header i.icon-cross {
    font-size: 8px;
    margin: 0;
    float: right;
    line-height: 28px;
    cursor: pointer;
    padding: 0 7px;
}


/*
.tabPanel .header li.active i:hover{
    background: #e6e6e6;
    border-radius: 1000px;
    width: 15px;
    height: 15px;
    margin: 0;
    position: relative;
}
 .tabPanel .header li.active i:hover:before{
    margin: -8px 0px 0 -4px;
    position: absolute;
} */

.header button {
    color: #fff;
    vertical-align: middle;
    padding: 0px 9px;
    height: 25px;
    margin-top: 3.5px;
}

.header button i {
    line-height: inherit;
}

.recordPanel {
    margin: 0px 1% 0px 1%;
    height: 37%;
    width: calc(97%/3*2);
    background-color: #fff9f3;
    display: inline-block;
    float: left;
    box-shadow: 0px 1px 4px grey;
}

.historyPanel {
    margin: 0px 1% 0px 0;
    height: 37%;
    width: calc(97%/3);
    background-color: #f1effa;
    display: inline-block;
    box-shadow: 0px 1px 4px grey;
}

.historyPanel .loadNextDiv {
    margin: 3%;
    width: 94%;
    padding: 8px 0;
    border-radius: 5px;
}

.historyPanel .loadNextDiv:hover {
    background-color: #7671b9;
}

.header {
    height: 30px;
    background-color: #168b6f;
    color: #fff;
    padding: 0 11px;
    vertical-align: middle;
    line-height: initial;
}

.header>i {
    margin-right: 10px;
    font-size: 20px;
}

ul.nav-tabs li {
    height: 32px;
}

ul.nav-tabs li:not(:last-child) a {
    display: flex;
    padding: 0 10px;
    margin: 0;
    line-height: 30px;
    border: 1px solid #fff;
    border-radius: 10px 10px 0 0;
}

ul.nav-tabs li:hover:not(:last-child) a {
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    background-color: #514879;
    border-radius: 10px 10px 0 0;
}

ul.nav-tabs li:not(:last-child) a.next-customer-contact-tab {
    background-color: #2faede;
}

ul.nav-tabs li:hover a.next-customer-contact-tab {
    background-color: #3ea0c5;
}

ul.nav-tabs li a {
    display: flex;
    color: #fff
}

ul.nav-tabs li a:hover {
    text-decoration: none;
}

ul.nav-tabs li:not(:last-child) a.tab-active,
ul.nav-tabs li a.tab-active:hover {
    background-color: #fff;
    cursor: context-menu;
    color: #515179;
    opacity: 1;
    text-decoration: none;
}

ul.nav-tabs li:first-child {
    margin: 0 0 0 -11px;
}

.tabPanel {
    padding: 5px 0 0 1%;
    background: #736a99;
}

.tabPanel .header {
    background-color: #736a99;
    height: 32px;
    padding: 0 0 0 11px;
    margin: 0;
    border: none;
}

.tab-content {
    width: inherit;
    height: inherit;
    display: contents;
}

.custom-arrow {
    display: inline-block;
    color: #fff;
    height: 32px;
    margin: 0;
    float: left;
    border-radius: 3px 3px 0 0;
}

.custom-arrow i {
    line-height: 32px;
}

.tabPanel .header div,
.tabPanel .header i {
    line-height: 32px;
}

.header li.iconBtn i,
.custom-arrow i {
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    padding: 0 10px;
}

.tabPanel .header li.iconBtn {
    display: block;
}

.tabPanel .header>i {
    cursor: pointer;
    padding: 0 10px;
}

.tabPanel .header>li.iconBtn i:hover,
.custom-arrow:hover {
    background-color: #514879;
}

.nameLength {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 230px;
}

.scroll-tab-container {
    height: 32px;
    position: relative;
}

.scroll-tab-control {
    position: absolute;
    top: 0;
    right: 0;
}

.scroll-tab-nav {
    height: 36px;
    flex-wrap: nowrap;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 80px;
}

.header>i.icon-arrow-right1,
.header>i.icon-arrow-left1,
.header>i.icon-reload {
    float: right;
    margin: 0;
}

.tabPanel .header>i.icon-arrow-down:nth-of-type(2) {
    transform: rotate(90deg);
}

.optionHeader {
    margin: 10px 1% 0px 1%;
    width: 98%;
    position: relative;
    height: 27px;
}

.campaignName {
    color: #fff;
    font-weight: bold;
    margin: 0;
    font-size: 15px;
    float: left;
    height: 27px;
    vertical-align: middle;
    line-height: 27px;
    display: inline-block;
    background-color: #d8494a;
    padding: 2px 10px;
    border-radius: 2px;
}

.campaignName span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 550px;
    display: inline-block;
    vertical-align: middle;
}

.campaignName i {
    font-size: 20px;
    line-height: 22px;
    vertical-align: middle;
    display: inline-block;
    -ms-transform: rotate(90deg);
    /* IE 9 */
    transform: rotate(90deg);
}

.optionHeader button {
    padding: 3px 10px;
    font-size: 13px;
    height: 27px;
}

.campaignSetting button {
    background-color: #736a99;
    margin: 0 0 0 5px;
}

.floatRightDiv button {
    margin-right: 5px;
}

.optionHeader>div {
    display: inline-block;
}

.optionHeader .floatRightDiv {
    line-height: 25px;
}

.optionHeader .floatRightDiv>a i,
.optionHeader .floatRightDiv>span i {
    line-height: 25px;
}

.contentPanel {
    width: 100%;
    height: calc(100% - 112px);
    margin: 0;
    padding: 0;
}

.custInfoPanel .icon-add {
    line-height: initial;
    padding: 0;
    margin: 0;
}

.custInfoPanel .icon-reload {
    float: right;
    margin: 0;
    cursor: pointer;
}

.recordPanel .header {
    background-color: #ff8943;
}

.historyPanel .header {
    background-color: #009fe3;
}

.optionHeader .selectBox select {
    height: 25px;
    font-size: 12px;
    line-height: 25px;
    border-radius: 4px;
}

.optionHeader label.selectorLabel::after {
    height: 21px;
    line-height: 21px;
}

.optionHeader .outline-empty {
    padding: 4px 8px;
    background: #d8494a;
    color: #ffffff;
    border-radius: 4px;
    margin: 0;
}

.infoPanel {
    overflow: auto;
    width: 100%;
    height: calc(100% - 32px);
    padding: 10px;
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
}

.custInfoCont {
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.custInfoLabel {
    display: inline-block;
    line-height: 19px;
    /* vertical-align: middle; */
    padding: 0;
    height: 19px;
}

.custInfoCont>div input[type=text],
.custInfoCont>div input[type=password] {
    margin: 0;
    min-height: 19px;
}

.custInfoCont>div input[type="checkbox"] {
    min-height: 15px;
    min-width: 15px;
    /* vertical-align: middle; */
}

.custInfoCont>div select {
    line-height: 19px;
    font-family: initial;
}

/* .custInfoCont>div input[type="button"],
.custInfoCont>div input[type="radio"],
.custInfoCont>div input[type="checkbox"],
.custInfoCont>div input[type=text],
.custInfoCont>div input[type=password],
.custInfoCont>div select,
.custInfoCont>div textarea {
    vertical-align: middle;
} */

.custInfoCont .daterangepicker .drp-calendar.left {
    padding: 8px 8px 8px 8px;
}


/* for select tag in 新規対応記録 & popup in 担当リスト、待ち呼、放棄呼、再架電 (H=29px) selectBoxで囲られた */

.selectBox select {
    border-radius: 5px;
    border: 1px solid #989898;
    font-size: 14px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 25px 0 10px;
    vertical-align: middle;
    line-height: 33px;
    color: #4c4c4c;
    margin: 0 2px 0 0;
    height: 33px;
}

.selectBox label.selectorLabel::after {
    color: #989898;
    right: 7px;
    position: absolute;
}

.recordPanel textarea {
    margin: 0 0 5px 0;
    width: 100%;
    height: 100%;
    resize: none;
    border-radius: 5px;
}

.recordPanel .selectBox:nth-of-type(2)>label,
.recordPanel .selectBox:nth-of-type(2)>div {
    display: inline-block;
    float: left;
    margin: 2px 10px 2px 0;
}

.timePicker {
    display: inline-block;
    color: #494676;
}

.timePicker i {
    font-size: 20px;
    line-height: 1em;
    vertical-align: text-bottom;
}

.timePicker input {
    height: 27px;
    color: #4c4c4c;
}

.recordPanel .selectBox:nth-of-type(2) .button {
    padding: 3px 10px;
    height: 33px;
    display: inline-block;
    line-height: 28px;
    vertical-align: middle;
    text-align: center;
    min-width: 10%;
    margin: 0 10px 0 0;
}

.historyPanel .infoPanel {
    padding: 0 0px 10px 0px;
}

.historyPanel .search {
    height: 33px;
    width: 100%;
    display: inline-flex;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0px 1px 5px #b3adc4;
}

.historyPanel .search .selectorLabel {
    width: 50%;
    width: calc((100% - 50px)/2);
    height: 34px;
}

.historyPanel .search .buttonLabel .button {
    border-radius: 0;
}

.historyPanel .search select {
    background-color: #e8e7fa;
    width: 100%;
    height: 100%;
    border: 1px solid #d9d2f9;
    border-top: 0;
    border-radius: 0;
    margin: 0;
    max-width: inherit;
}

.historyPanel .search .selectorLabel:nth-of-type(2) select {
    background-color: #fff;
}

.historyPanel .search .selectorLabel::after {
    right: 11px;
}


/* .historyPanel .search .inputLabel{
    width: 65%;
    height: 30px;
    border: 1px solid #d1cce8;
} 
.historyPanel .search .inputLabel::after{
    top: 2px;
    right: 10px;
}
.historyPanel .search input{
    width: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #d1cce8;
    margin: 0;
}
*/

.opCards {
    margin: 3%;
    width: 94%;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 1px 5px grey;
}

.cardsHeader .opImg i {
    font-size: 37px;
    color: #d8494a;
    width: 42px;
    height: 39px;
    display: inline-block;
    float: left;
    margin: 0px 8px 0 0;
    line-height: 37px;
}

.cardsHeader .opImg img {
    border: 2px solid #b2b2b2;
}

.cardsHeader .opImg {
    position: relative;
    height: 42px;
    vertical-align: middle;
    line-height: 42px;
}

.cardsHeader .opImg .nameLength {
    position: relative;
    line-height: 42px;
    vertical-align: middle;
    width: auto;
    max-width: 300px;
    left: 0;
    top: 0;
}

.cardsHeader>div {
    display: inline-block;
    float: left;
}

.cardsHeader>div.cardsTime {
    float: right;
    font-size: 11px;
    color: #2e61b7;
    cursor: pointer;
}

.cardsTime {
    display: block;
    text-align: right;
    margin-right: 5px;
    color: #b8b8b8;
}

.cardsTime i {
    font-size: 20px;
}

.cardsTime i,
.cardsTime div:nth-of-type(2) {
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
}

.cardsTime div:nth-of-type(2) {
    text-decoration: underline;
    font-size: 12px;
}

.cardsTime .recordTime {
    color: #a5a5a5;
    cursor: context-menu;
}

.status {
    color: #fff;
    margin: 7px 0 2px 4px;
    display: inline-block;
}

.status div {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    float: left;
    margin: 2px;
    font-weight: bold;
}

.cardsHeader .status .forNote {
    background-color: #f5eda5;
    color: #9b6936;
}

.histyContent {
    overflow: hidden;
    width: 100%;
    white-space: normal;
    margin: 2px 0 8px 0;
}

.overflowDot {
    font-size: 13px;
    cursor: pointer;
}

.op:after,
.phonefn:after,
.callbtn:after,
.calloutPanel:after,
.waittingCallPanel:after,
.cardsHeader:after,
.modal-body a i.icon-reload:after,
.searchDiv:after {
    content: "";
    clear: both;
    display: block;
}


/*--------------------------------------------------------------
3.0 - 折り畳んだメニュー
---------------------------------------------------------------*/

.menuFoldPanel {
    width: 60px;
    max-width: 60px;
    font-size: 12px;
    padding: 5px 10px;
}

#openMenu {
    left: 60px;
}

.menuFoldPanel .opImg img {
    width: 40px;
    height: 40px;
}

.menuFoldPanel .badge {
    padding: 5px 2px 2px 2px;
    margin: 5px auto;
    font-size: 12px;
    font-weight: lighter;
    white-space: pre-wrap;
    line-height: 1.3em;
}

.menuFoldPanel .dropdown-divider {
    border-top: 1px solid #b2bfd4;
}

.menuFoldPanel .phonefn .button,
.menuFoldPanel .callbtn button.button {
    width: 40px;
    height: 40px;
    margin: 3px 0;
}

.menuFoldPanel .waittingCallPanel .s-button {
    width: 100%;
    margin-top: 7px;
}

.menuFoldPanel .waittingCallPanel .s-button .dot {
    left: 28px;
}

.menuFoldPanel .logoutPanel {
    left: 4px;
}

.menuFoldPanel .logoutPanel .button {
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 3px;
}

.menuFoldPanel .logoutPanel .button i {
    font-size: 14px;
    line-height: 9px;
}


/*--------------------------------------------------------------
4.0 - pop on plugin
---------------------------------------------------------------*/

.modal-fitContent {
    /* display: flex !important;  for another table formate*/
    justify-content: center;
    align-items: baseline;
    overflow-y: hidden !important;
}

body .modal-fitContent .modal-dialog {
    max-width: 90%;
    width: auto !important;
    height: 80%;
    max-height: 80%;
    /* display: inline-block; */
}

.modal-fitContent .modal-content {
    max-height: 80%;
    height: 80%;
}

.modal-fitContent .modal-content .modal-body {
    max-height: 65%;
}


/*
#searchModal .modal-content{
    height: 90vh;
    max-height: 90vh;
}
#searchModal .scrollable-container{
    max-height: 35%; 
}
*/

.modal-fitContent table td {
    white-space: nowrap;
}

.modal-content {
    border-radius: 15px;
}

.modal-content i.icon-cross {
    text-align: right;
    padding: 10px 15px 0px 15px;
    color: #666666;
    cursor: pointer;
}

.modal-content i.icon-arrow-up,
.modal-content i.icon-arrow-down {
    text-align: right;
    font-size: 30px;
    padding: 10px 10px 0px 15px;
    color: #666666;
}

.modal-content table th i.icon-arrow-up,
.modal-content table th i.icon-arrow-down {
    color: #fff;
    font-size: 20px;
    padding: 0;
    line-height: inherit;
    vertical-align: sub;
    padding: 0 5px;
}

.modal-header,
.modal-icon-header {
    text-align: center;
    font-size: 25px;
    padding: 0 0 5px 0;
    margin: 0.5em auto 0.5em auto;
    border: 0;
    display: block;
}

.modal-icon-header i {
    font-size: 50px;
    line-height: 1em;
}

.modal-body {
    padding: 1rem 2.8rem 1rem 3rem;
}

.modal-body table {
    margin: 0.5em 0 5px 0;
    width: 99.9%;
}

.modal-body .memo {
    margin: 8px 0 0 0;
}

.modal-body i.icon-reload,
.optionHeader .floatRightDiv i.icon-reload {
    font-size: 24px;
    color: green;
    float: right;
    vertical-align: middle;
}

.modal-body .floatRightDiv i.icon-reload {
    line-height: 32px;
    cursor: pointer;
}

.modal-body .selectBox a i {
    line-height: 27px;
}

.modal-body .pagination {
    margin: 3% 0;
    font-size: 12px;
}

.modal-body .pagination li {
    margin: 0 4px;
}

.modal-body .pagination li a {
    line-height: inherit;
}

.modal-body .page-link {
    color: #343453;
    background-color: #dfe5ec;
}

.modal-body .page-link:hover {
    background-color: #cbd5e0;
}

.modal-body .selectBox label.selectorLabel {
    display: inline-table;
    margin-bottom: 0;
}

.modal-body .selectBox select {
    padding: 0 30px 0 10px;
}

.modal-body .selectBox label.selectorLabel::after {
    right: 9px;
}

.modal-content .icon-cross:before,
.modal-content i.icon-arrow-up:before,
.modal-content i.icon-arrow-down:before {
    cursor: pointer;
}

.modal-footer {
    border: 0;
    margin: 0 auto;
    padding: 0.8rem 0.8rem 2rem 0.8rem;
    justify-content: center;
}

.modal-footer .button {
    padding: 10px 20px;
}

.modal-footer>:not(:last-child) {
    margin-right: 1rem;
}

.desc {
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.8em;
}

.callforHelpDiv,
.cancelforHelpDiv {
    display: grid;
}

.modal-msg-header {
    margin: 10px 15px 0px 15px;
    border-bottom: 1px solid gray;
    padding: 0 0 10px 0;
}

.modal-msg-header div {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
}

.modal-msg-header i.icon-cross {
    float: right;
    padding: 0;
}

.modal-body .modal-icon-header i {
    font-size: 70px;
}

.modal-inbound {
    top: -42px;
    cursor: move;
    width: 800px;
    height: auto;
    max-height: 650px;
    left: 50%;
    margin-left: -400px;
}

.modal-inbound .scrollable-container {
    max-height: 250px;
}

.modal-primary {
    border: 8px solid #5c5a9c;
}

.modal-success {
    border: 8px solid #27b794;
}

.modal-warning {
    border: 8px solid #ffa200;
}

.modal-remind {
    border: 8px solid #ea7979;
}

.modal-info {
    border: 8px solid #1f9ee0;
}

.modal-error {
    border: 8px solid #ea4b4b;
}

.modal .modal-success .modal-msg-header {
    border-bottom: 1px solid #27b794;
}

.modal .modal-warning .modal-msg-header {
    border-bottom: 1px solid #ffa200;
}

.modal .modal-remind .modal-msg-header {
    border-bottom: 1px solid #ea7979;
}

.modal .modal-info .modal-msg-header {
    border-bottom: 1px solid #1f9ee0;
}

.modal .modal-primary .modal-msg-header {
    border-bottom: 1px solid #5c5a9c;
}

.modal .modal-error .modal-msg-header {
    border-bottom: 1px solid #ea4b4b;
}

.table-nav {
    font-size: 14px;
    margin: 1% 0 0 0;
}

.table-nav>div {
    display: inline-block;
}

.table-nav .dateWrap {
    float: right;
    line-height: 1.5em;
    vertical-align: middle;
    text-align: right;
    margin: 0 5px;
}

.table-nav .icon-reload {
    line-height: 27px;
}

.perPage .selectBox select {
    font-size: 12px;
}

.dateWrap input {
    padding: 5px 8px;
    font-size: 14px;
    min-width: 240px;
    line-height: 1.5em;
    vertical-align: middle;
}

.dateWrap button {
    vertical-align: middle;
}

.dateWrap .btn-light {
    background-color: #dfe5ec;
}

.btn-normal,
.btn-normal.disabled,
.btn-normal:disabled {
    background-color: #f5f5ff;
    border-color: #9594c1;
    background-image: -webkit-linear-gradient(top, #fff, #f5f5ff);
    background-image: -moz-linear-gradient(top, #fff, #e7e7f3);
    background-image: -ms-linear-gradient(top, #fff, #e7e7f3);
    background-image: -o-linear-gradient(top, #fff, #e7e7f3);
    background-image: linear-gradient(to bottom, #fff, #e7e7f3);
    color: #5c5b7f;
}

.btn-normal:hover {
    color: #565084;
    background-color: #dedeea;
    background-image: -webkit-linear-gradient(top, #fbfbff, #dedeea);
    background-image: -moz-linear-gradient(top, #fbfbff, #dedeea);
    background-image: -ms-linear-gradient(top, #fbfbff, #dedeea);
    background-image: -o-linear-gradient(top, #fbfbff, #dedeea);
    background-image: linear-gradient(to bottom, #fefeff, #dedeea);
    box-shadow: 0 0 0 0.2rem rgb(204 207 249 / 50%);
}

.dateWrap .btn-light.disabled,
.btn-light:disabled {
    background-color: #90a1b5;
    cursor: context-menu;
    color: #000000;
}

.floatRightDiv {
    text-align: right;
    line-height: 35px;
    font-size: 12px;
    float: right;
}

.floatRightDiv div {
    margin-right: 5px;
    display: inline-block;
}


/*-------------------
4.0 - pop on パスワードの変更
---------------------*/

.pswPanel {
    margin: 5px 0;
    line-height: 3.5em;
    vertical-align: middle;
}

.pswPanel>div:not(.new-password-container) {
    display: inline-block;
    margin-right: 10px;
    width: 40%;
    vertical-align: middle;
    line-height: 1.4em;
}

.pswPanel>div span {
    color: #e00709;
    font-size: 12px;
    display: block;
    padding: 0;
    margin: 0;
}

.pswPanel>input {
    width: 55%;
    height: 40px;
}

.new-password-container {
    width: 55%;
    height: 40px;
}

/*-------------------
4.0 - pop on 画像の変更
---------------------*/

.changeImgPanel {
    display: flex;
    width: 100%;
    padding: 20px 0px 10px 0px;
    height: 210px;
}

.opIcon {
    width: 10%;
    display: inline-block;
}

.opIcon .opImg {
    width: 70px;
    height: 70px;
    margin: 5px auto;
    text-align: center;
}

.opIcon .opImg img {
    width: 100%;
    height: 100%;
    border: 3px solid #ffa200;
}

.opIcon .button {
    display: block;
    font-size: 12px;
    padding: 5px;
    text-align: center;
}

.opIcon .custom-file-input {
    position: absolute;
    height: 28px;
    cursor: pointer;
}

.iconPanel {
    display: inline-block;
    width: 90%;
    margin: 0 0 0 3%;
    background: #f4f4f8;
    border: 1px solid #5c5a9c;
    border-radius: 5px;
    padding: 10px 14px 10px 10px;
    overflow: auto;
}


/*.iconPanel div{
    width: 42px;
    display: inline-block;
    margin:2px;
    cursor: pointer;
}*/

.iconPanel div {
    width: 45px;
    display: block;
    margin: 4px 4px 4px 6px;
    cursor: pointer;
    float: left;
}

.iconPanel .opImg img {
    width: 45px;
    height: 45px;
    border: 2px solid #9b9ac9;
}

.iconPanel .opImg.chosen img {
    border: 2px solid #ffa200;
}


/*-------------------
4.0 - pop on 対応履歴
---------------------*/
#drag {
    position: fixed;
    height: 8px;
    width: 100%;
    cursor: n-resize;
}

.modal-body .cardsHeader .opImg {
    height: 55px;
    line-height: 55px;
    width: 70%;
    font-size: 15px;
}

.modal-body .cardsHeader .opImg img {
    width: 55px;
    height: 55px;
    border: 2px solid #5c5a9c;
}

.modal-body .cardsHeader .opImg i {
    font-size: 45px;
    width: 55px;
    height: 55px;
    margin: 0 auto;
    line-height: 55px;
    text-align: center;
}


/* .opImg div{
    position: absolute;
    left: 60px;
    width: 250px;
    line-height: 1.25em;
    top: 12px;
} */

.opCallInfo>div {
    font-size: 14px;
    vertical-align: middle;
}

.modal-body .cardsHeader .opImg .opCallInfo i {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    line-height: 16px;
    text-align: center;
    float: none;
    display: inline-block;
    vertical-align: middle;
}

.opCallInfo .badge {
    color: #fff;
    margin: 0 5px;
    padding: 5px;
    font-size: 12px;
}

.modal-body .status div {
    font-size: 12px;
}

.modal-body hr {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    border-top: 1px solid rgba(148, 139, 139, 0.5);
}

.modal-sm .modal-body {
    padding: 1.4rem 2rem 1.4rem 2rem;
}

.table-borderless .opImg img {
    border: 2px solid #b9b9b9;
}

.table-borderless .opImg div {
    left: 50px;
}

.table-borderless .opImg .nextActionOpName {
    position: absolute;
    top: 9px;
}

.progressWrap {
    font-size: 12px;
}


/* .progressWrap > div:nth-of-type(1){
    float: left;
    padding: 0 4px 0 0;
    font-size: 14px;
} */

.progressWrap>div {
    line-height: 1em;
}

.table-2line .selectBox {
    display: inline-block;
}

.table-2line .selectBox select {
    line-height: 25px;
}

.table-2line textarea {
    width: 100%;
    min-height: 150px;
    border-radius: 5px;
    padding: 7px 10px;
    color: #4c4c4c;
}


/*-------------------
4.0 - pop on 詳細検索
---------------------*/

@media (min-width: 1200px) {
    .searchModal .modal-xl {
        max-width: 1340px;
    }
}

.searchWrap {
    width: 100%;
    border: 1px solid #5c5a9c;
    border-radius: 10px;
    background-color: #f6f6fb;
    position: relative;
    margin: 0 0 15px 0;
}

.searchWrap .selectBox {
    padding: 2px 20px 8px 20px;
}

.collapseBar {
    border-radius: 10px 10px 0 0;
    padding: 0px 20px;
    font-size: 15px;
    font-weight: bold;
    color: #5c5a9c;
    min-height: 40px;
    margin: 0 0 5px 0;
    vertical-align: middle;
    line-height: 40px;
    cursor: pointer;
    border-bottom: 1px dashed #d3cee8;
}

.collapseBar:hover {
    background-color: #e2def3;
}

.collapseBar div {
    display: inline-block;
    line-height: 25px;
    vertical-align: middle;
}

.collapseIcon {
    padding: 10px;
    background-color: #5c5a9c;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    text-align: center;
    border-radius: 25px;
    position: relative;
}

.modal-content .collapseIcon i {
    color: #fff;
    font-size: 25px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s;
}

.modal-content .collapsed .collapseIcon i {
    transition: transform 0.5s;
    -ms-transform: rotate(180deg);
    /* IE 9 */
    transform: rotate(180deg);
}

.searchWrap .searchWrapScroll {
    width: 98%;
    /* overflow-y: auto;
    overflow-y: overlay;
    max-height: 230px; */
    margin: 0% 1% 5px 1%;
    background: #eaeaf6;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #9595b8;
}

.searchDiv {
    padding: 0px 0 10px 0;
}

.searchDiv .color-purple {
    padding: 1px 0;
    font-weight: bold;
}

.searchDiv .inputDiv,
.searchDiv .selectBox {
    width: 32%;
    display: inline-block;
    vertical-align: middle;
    padding: 3px 0;
    font-size: 12px;
    float: left;
}

.searchDiv .inputDiv div:nth-of-type(1) {
    display: inline-block;
    float: left;
    margin: 0 5px 0 0;
    line-height: 25px;
}

.searchDiv .inputDiv label.inputLabel,
.searchDiv .selectBox label.selectorLabel,
.searchDiv .selectBox label.selectorText {
    display: inline-block;
    margin-bottom: 0;
}

.selectBox label.selectorText {
    vertical-align: middle;
}

.searchDiv .inputDiv .inputLabel {
    width: 60%;
}

.searchDiv .inputDiv .inputLabel input,
.searchDiv .selectBox .inputLabel input {
    width: 100%;
    line-height: 30px;
    border: 0;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    height: 29px;
}

.searchDiv .selectBox select {
    line-height: 25px;
    width: 95%;
    font-size: 12px;
}

.searchDiv .selectBox label.selectorLabel select {
    border: 1px solid #8783aa;
    background-color: #fff;
    height: 30px;
    line-height: 30px;
}

.searchDiv .selectBox label.selectorLabel::after {
    right: 13px;
    height: 30px;
    line-height: 30px;
    color: #5c5a9c;
}

.searchDiv .selectBox label.selectorLabel {
    width: 45%;
    float: left;
}

.searchDiv .selectBox label.selectorLabel:nth-of-type(2) {
    width: 53%;
}

.searchDiv .selectBox .inputLabel {
    width: 50%;
    display: inline-block;
    margin-bottom: 0;
    height: 30px;
    line-height: 30px;
}

.selectBox-btn {
    width: 4%;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

.selectBox-btn .button {
    width: 30px;
    height: 28px;
    line-height: 28px;
    padding: 1px 5px;
    margin: 4px 0;
    text-align: center;
    background-color: #7776a2;
}

.selectBox-btn .button i {
    margin-right: 0;
}

.selectBox-btn .button:hover {
    background-color: #5c5a9c;
}

.searchWrap::after {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 13px 0 13px;
    border-color: #5c5a9c transparent transparent transparent;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -20px;
}

.searchBtn {
    text-align: center;
    margin: 10px auto 15px 5px;
}

.searchBtn>button {
    width: 30%;
    display: inline-block;
    padding: 5px 0;
}

.loadNextDiv {
    background-color: #8986bd;
    color: #ffffff;
    padding: 10px 0;
    cursor: pointer;
    transition: 0.3s;
    margin: 5px 0;
    width: 100%;
    border: none;
    font-weight: bold;
    border-radius: 10px;
}

.loadNextDiv:hover {
    background-color: #62609e;
}

#searchModal .alert {
    margin: 5% 0;
}


/* for select tag in 対応履歴編集 popup */

#editHistoryModal select:disabled {
    background: #e8e8e8;
    opacity: .65;
    cursor: not-allowed;
}


/*-------------------
4.0 - pop on 着信
---------------------*/

.modal-inbound .icon-arrow-up,
#callExtensionModal .icon-arrow-up {
    position: absolute;
    right: 5px;
    z-index: 2;
}

.modal-inbound .modal-body {
    padding: 1rem 2.8rem 1.8rem 3rem;
}

.modal-inbound .inbound-nav .icon-callout {
    font-size: 31px;
    color: #5c5a9c;
    line-height: 38px;
    margin-right: 12px;
    vertical-align: middle;
}

.modal-inbound .inbound-nav {
    display: flex;
    padding: 0;
    border-bottom: 1px solid #5c5a9c;
    margin: 0 auto 7px auto;
}


/*-------------------
4.0 - pop on 着信(開いてあるパネル)
---------------------*/

.inboundInfo {
    font-weight: bold;
    line-height: 33px;
    height: 33px;
    vertical-align: middle;
}

.inboundInfo .transfer {
    color: #ffffff;
    font-size: 15px;
    padding: 4px;
    border-radius: 5px;
}

.inbound-open .inboundInfo div:nth-of-type(1) {
    font-size: 16px;
    color: #5c5a9c;
    line-height: 40px;
}

.inbound-open .inboundInfo div:nth-of-type(2) {
    font-size: 18px;
    color: #d00808;
    line-height: 1.2em;
}

.modal-inbound .inbound-title {
    padding: 8px 0px;
    font-size: 18px;
    background-color: #d8494a;
    width: 100%;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0 0 5px 0;
}

.inbound-open .inbound-subnav {
    color: #d00808;
    font-size: 14px;
}

.table-scroll {
    width: 100%;
    position: relative;
    display: flex;
    max-height: 100%;
    margin: 0.5em 0 5px 0;
}

.table-scroll table {
    margin: 0;
}

.table-scroll table td {
    height: 38px;
}

.table-scroll table.table-primary tr:nth-child(odd):hover {
    background: #fff;
}

.table-div-scroll {
    display: flex;
    overflow: auto;
    width: 100%;
    /* overflow-x: hidden; 
    overflow-y: auto;*/
}

.table-div-scroll>div {
    display: inline-block;
}

.table-div-scroll>div:nth-of-type(1) {
    width: calc(100% - 100px);
    /* margin: 0 6% 0 0; */
    /* overflow-x: auto;
    overflow-y: hidden;
    height: fit-content; */
}


/* .table-scroll > div:nth-of-type(1){
    width: 100%;
    overflow:auto;
    display: inline-block;
    padding: 0 1px 0 0;
} */

.table-scroll .first-scroll>table th:last-of-type,
.table-scroll .first-scroll>table td:last-of-type {
    padding-right: 110px;
}

.table-div-scroll>div:nth-of-type(2) {
    width: 99px;
    /* for some less contents of wrappers which have x scrllbar */
}

.second-scroll::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #fff;
    top: 0;
    right: -1px;
}

.inbound-open h6 {
    padding: 1.2em 0 0 0;
    color: black;
    margin: 0;
}

.inbound-open .badge {
    margin: 5px;
    border-radius: 50px;
    cursor: context-menu;
}

.inbound-open table .button {
    height: auto;
    display: inline-block;
}

.ringBtn>div:nth-of-type(2) {
    font-size: 12px;
    color: gray;
}

.inbound-open .modal-footer {
    padding: 0.4rem 0 0 0;
    justify-content: center;
}

table i.icon-eye {
    font-size: 20px;
    vertical-align: middle;
    line-height: inherit;
}


/*-------------------
4.0 - pop on 着信(折り畳みのパネル)
---------------------*/

.inboundModal-folded {
    max-width: 500px;
    position: absolute;
    top: -12px;
    background-color: #fff;
    border-radius: 8px;
    left: 50%;
    border: 4px solid #9393d2;
    box-shadow: 2px 1px 2px #5e6361;
    padding: 5px 10px;
    font-size: 18px;
    text-align: center;
    display: none;
    cursor: move;
}

.inboundModal-folded>div {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.inboundModal-folded .button-ring {
    font-size: 25px;
    padding: 0px 7px;
}

.inboundModal-folded .badge {
    color: #fff;
    line-height: 16px;
    margin: 0 2px;
}

.inboundModal-folded .icon-arrow-down {
    font-size: 28px;
    vertical-align: middle;
    cursor: pointer;
}


/*-------------------
4.0 - pop on 内線着信
---------------------*/

#exInboundModal.modal {
    pointer-events: none;
    cursor: move;
}


/*-------------------
4.0 - pop on 転送画面（プレゼンス）
---------------------*/

#presentModal .modal-header {
    margin: 0em auto 0 auto;
}

#presentModal .modal-body {
    padding: 0rem 1.5rem 0.2rem 1.5rem;
    /* padding: 0rem 2.8rem 0.2rem 3rem; */
}

#presentModal .blockWrap {
    margin: 0;
    height: 65vh;
}

#presentModal .modal-footer {
    padding: 0.8em 0;
}

#presentModal .modal-xl {
    max-width: 85%;
}

.transferNav {
    line-height: 40px;
    height: 40px;
    vertical-align: middle;
    border-bottom: 1px solid #b5b5b5;
    font-size: 12px;
}

.transferNav>div:nth-of-type(1) {
    width: 50%;
    line-height: 29px;
    height: 29px;
    vertical-align: middle;
    float: left;
}

.transferNav>div:nth-of-type(1) .selectBox {
    float: left;
    margin: 0 5px 0 0;
}

.transferNav>div:nth-of-type(1) .button {
    display: inline-block;
    padding: 7px 12px;
    font-size: 12px;
}

.transferNav .floatRightDiv {
    line-height: 25px;
    font-size: 25px;
}

.transferNav .floatRightDiv a {
    padding: 0 6px;
}

.transferNav .floatRightDiv i {
    cursor: pointer;
}

.transferNav .bootstrap-select .dropdown-menu li a span.text {
    line-height: 25px;
    vertical-align: middle;
}

.transferNav .selectSearchBox .dropdown-menu div.opImg img {
    width: 25px;
    height: 25px;
    margin-left: 8px;
}

.transferNav .selectSearchBox .dropdown-menu div.opImg .dot {
    top: 13px;
}

.transferNav .icon-menu-list:before,
.transferNav .icon-menu-block:before {
    color: #5c5a9c;
}

.bootstrap-select .no-results {
    color: #343453;
    font-size: 14px;
    margin: 0;
    font-weight: bold;
}

.bootstrap-select .no-results i {
    margin: 0 5px 0 8px;
    font-size: 18px;
    line-height: 30px;
    vertical-align: middle;
}

.floatRightDiv .badge {
    border-radius: 0;
    border: 1px solid #adadad;
    font-size: 14px;
    margin: 5px 0;
    padding: 5px 10px;
    font-weight: 400;
    line-height: 1em;
}

#presentModal .modal-body>.floatRightDiv {
    position: absolute;
    right: 3.8em;
    line-height: 30px;
}

#presentModal .modal-body>.floatRightDiv .badge {
    font-size: 12px;
    padding: 5px;
}

.blockWrap {
    background-color: #ffffff;
    position: relative;
    width: 100%;
    height: 60vh;
}

.opElem,
.otherElem {
    position: absolute;
    font-size: 12px;
    transition: transform 0.5s;
}

.opElemGrayout {
    opacity: 0.6;
}

.otherElem>table {
    margin: 0;
}


/* .opElem:hover > .opImgWrap{
    transform: scale(1.2);
} 
.opElem:first-of-type:hover {
    transform: scale(1.5);
}*/

.opElem .opImgWrap {
    width: 100%;
    position: relative;
    margin: 3px auto 4px auto;
    text-align: center;
}

.opElem .opImgWrap img {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: #fff;
    display: inline-block;
    border: 0px;
}

.opElem .opImgWrap .dot {
    left: calc((60% - 35px)/2);
    bottom: 0;
    width: 10px;
    height: 10px;
    top: 15px;
    border: 1px solid #fff;
}

.opElem .opImgWrap .opextWrap {
    display: inline-block;
    width: 40%;
    line-height: 30px;
    vertical-align: middle;
    font-size: 9px;
}

.opextWrap>div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
    font-size: 8px;
    width: 125%;
}

.opextWrap>div:nth-of-type(1) {
    font-size: 9px;
}

.opextWrap>div:nth-of-type(2) {
    color: #656565;
}

.opElem>.button {
    padding: 0px;
    margin: 0px 5px;
    font-size: 9px;
    width: auto;
    height: 14px;
    line-height: 13px;
}


/*-------------------
4.0 - pop on 転送前の転送方法（プレゼンス）
---------------------*/

.dialTitle {
    font-size: 18px;
    text-align: center;
    margin: 5px 0 15px 0;
    font-weight: bold;
}

.dialImg {
    margin: 0 auto;
    width: 100px;
}

.dialImg img {
    width: 100px;
    height: 100px;
    border: 5px solid #c7c7c7;
    border-radius: 100px;
}

.dialBtn {
    padding: 1.2em 0em;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
}

.dialBtn .button-green {
    width: 45%;
    display: inline-block;
    margin: 2.5% auto;
    text-align: center;
}

.dialBtn .button-green:nth-of-type(2) {
    float: none;
    margin-left: 2%;
}

.dialBtn .button-gray {
    margin: 0 auto;
    width: 94%;
}

.modal-dail .modal-body {
    padding: 1.4rem 1rem;
}

.dialStatus {
    margin: 0 0 11px 0;
    color: #484ba6;
    font-size: 14px;
}

.dialBtn .ringBtn {
    width: 30%;
    margin: 0 5px;
    display: inline-block;
}

.dialBtn .ringBtn .button-ring {
    margin: 5px auto;
    width: 70%;
}

.transferAfterTalking_ifHardphone i.icon-warning {
    font-size: 40px;
}

.transferAfterTalking_ifHardphone .modal-icon-header {
    font-size: 18px;
    font-weight: bold;
    color: #525096;
}

.transferAfterTalking_ifHardphone .desc {
    font-size: 14px;
    text-align: center;
    padding: 10px;
}

.transferAfterTalking_ifHardphone>.desc:nth-of-type(3) {
    padding: 10px 10px 0 10px;
}

.transferAfterTalking_ifHardphone>.desc:nth-of-type(3)>span {
    color: #b81a2b;
    font-weight: bold;
}

.transferAfterTalking_ifHardphone .memo {
    padding: 0 20px;
}

/*-------------------
4.0 - pop on SMS送信
---------------------*/
#send-sms.disabled {
    opacity: .6;
}
#smsModal.modal-fitContent .modal-content .modal-body {
    max-height: 100%;
}
#smsModal .formWrapper {
    max-height: 70%;
    overflow: scroll;
}
#smsModal .formWrapper table th {
    font-size: .9em;
}
.formWrapper table th,
.formWrapper table td{
    padding: 1em;
}
.formWrapper table tr{
    border-bottom: 2px solid #5c5a9c;
}
.formWrapper table tr:last-child{
    border-bottom: none;
}
.formWrapper table th{
    width: 20%;
    color: #5c5a9c;
    border-right: 2px solid #5c5a9c;
}
.formWrapper label.selectorLabel {
    width: 30%;
    display: inline-block;
}
.formWrapper label.selectorLabel::after {
    font-family: 'opIcon' !important;
    content: "\e91d";
    position: absolute;
    color: #5c5a9c;
    pointer-events: none;
    font-size: 20px;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%);
}
.formWrapper select{
    display: inline-block;
    width: 100%!important;
    padding: 0.25rem 1.7rem 0.25rem 0.7rem;
    font-size: .825rem;
    font-weight: 400;
    line-height: 1.625;
    color: #495057;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
#smsModal .content-wrapper {
    display: flex;
}
#smsModal .content-left {
    width: auto;
}
#smsModal .content-right {
    width: 38%;
    margin-left: 4em;
}
#smsModal .content-right .fields-wrapper {
    min-height: 10em;
    border: 1px solid #ced4da;
    background: #fff;
    padding: .75em;
    position: relative;
    max-width: 500px;
    width: 100%;
    border-radius: 5px;
    max-height: 100px;
    overflow-y: scroll;
    margin-top: calc(31px + 1em);
    white-space: normal;
}
#smsModal .content-right .fields-wrapper .field {
    display: inline-block;
    color: #fff;
    padding: .25em .5em;
    background: #5C5A9A;
    margin-bottom: .25em;
    margin-right: .25em;
    border-radius: 5px;
    cursor: pointer;
    transition: all .7s;
}

#smsModal .fields-wrapper .no-campaign-selected,
#smsModal .fields-wrapper .loading-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#smsModal .template {
    margin-bottom: 1em;
}
.form-text {
    margin-top: .25rem;
    font-size: 80%;
    color: #737d85
}
#ContentCount, #SmsCount {
    font-weight: bold;
    font-size: 1rem;
    margin-right: 5px;
}
.content-warning {
    display: none;
    color: #d9534f!important;
    margin: 1em 0;
}
.content-warning.show {
    display: block;
}
.formButton {
    margin-top: 20px;
    margin-left: 20%;
}
.formButton button {
    padding: 7px 15px;
}
.warning {
    color: #d9534f!important;
}
.z-index {
    z-index: 99999;
}
.smsHistoryLabel {
    width: calc(100% - 50px)!important;
}
.smsHistoryLabel select {
    background-color: #fff!important;
}
.opCards .sms-content {
    position: relative;
    max-height: 4.7em;
    overflow: hidden;
    text-align: justify;
    line-height: 1.5;
    text-justify: inter-ideograph;
    white-space: pre-line;
    background-color: #fff;
}
.opCards .sms-content::after {
    content: "\2026";
    position: absolute;
    top: 3.1em;
    right: 0;
    width: 1em;
    height: 1.4em;
    background: #fff;
    text-align: center;
}
.sms-content {
    white-space: pre-line;
}
.statusIcon {
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: auto;
    height: 23px;
    line-height: 23px;
    margin-left: 10px;
    padding: 0 0.4em;
}
.statusIcon.status0 {
    background-color: #f7b52c;
}
.statusIcon.status1 {
    background-color: #6363de;
}
.statusIcon.status2 {
    background-color: #52c689;
}
.statusIcon.status3 {
    background-color: #ff0000;
}
.statusIcon.status4 {
    background-color: #ff4848;
}
.statusIcon.status5 {
    background-color: #3a8dd6;
}
.statusIcon.status6 {
    background-color: #693ad6;
}
.statusIcon.status7 {
    background-color: #d63ac9;
}

#smsHistory .cardsHeader>div {
    float: none;
}
#smsHistory .cardsHeader::after {
    display: none;
}
#smsHistory .cardsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#smsHistory .opImg {
    display: flex;
    align-items: center;
}

#smsHistoryModal .cardsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;    
}
#smsHistoryModal .cardsHeader .opImg {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#smsHistoryModal .statusIcon {
    margin-left: 0;
}
.status-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*-------------------
SMS履歴
---------------------*/
.tab-header {
    padding-left: 0;
    padding-right: 0;
}
.tab-header .tab{
    padding: 0 0.5em;
    border-width: 1px 1px 0 1px;
    border-color: #fff #fff transparent #fff;
    border-style: solid;
    border-radius: 7px 7px 0 0;
    cursor: pointer;
    margin-right: 0;
}
.tab-header .tab.active{
    color: #009fe3;
    background-color: #fff;
}

/*-------------------------------
bootstrap-toast 再架電通知パネル
---------------------------------*/

.toastWrap {
    position: absolute;
    min-width: 300px;
    right: 30px;
    z-index: 99;
    top: 90px;
}

.toastWrap .toast {
    background-color: rgba(53, 53, 53, 0.3);
    backdrop-filter: none;
    min-width: 230px;
    border-radius: 6px;
    cursor: pointer;
}

.toastWrap .toast:hover {
    background-color: rgba(53, 53, 53, 0.95);
}

.toastWrap .toast-header {
    color: #fff;
    font-weight: 300;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(53, 53, 53, 0.8);
}

.toastWrap .text-muted {
    color: #bbb !important;
}

.toastWrap button {
    color: #fff;
    font-size: 12px;
    opacity: 1;
}

.toastWrap .close:hover {
    color: #fff;
}

.toastWrap .toast-body {
    color: #fff;
    font-size: 12px;
    background-color: rgba(53, 53, 53, 0.8);
    padding: 0.25rem 0.75rem 0.5rem 0.75rem;
    line-height: 1.7em;
}


/*-------------------------------
bootstrap-selector
---------------------------------*/

.selectSearchBox .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.transferNav>div:nth-of-type(1) .selectSearchBox .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 365px;
}

.selectSearchBox .bootstrap-select>.dropdown-toggle {
    color: #4c4c4c;
    font-size: 14px;
    background: #fff;
    border: 1px solid #989898;
    padding: .188rem .75rem;
    border-radius: 5px;
    height: 27px;
}

.transferNav .selectSearchBox .bootstrap-select>.dropdown-toggle {
    height: 33px;
}

.transferNav .selectSearchBox .bootstrap-select>.dropdown-toggle:focus,
.selectSearchBox .filter-option-inner-inner:hover {
    color: #787979;
}

.selectSearchBox .bootstrap-select .dropdown-menu {
    border: 1px solid #989898;
    box-shadow: 0px 1px 3px #b3adc4;
}

.selectSearchBox .bootstrap-select .dropdown-menu .disabled:nth-of-type(1) {
    font-size: 12px;
}

.bootstrap-select .dropdown-menu li.disabled:not(:first-child) {
    background-color: #dcdcdc;
    color: black;
    cursor: not-allowed;
}

.selectSearchBox .dropdown-item:hover {
    background-color: #1e90ff;
    color: #fff;
}

.selectSearchBox .dropdown-item.active {
    background-color: #606096;
    color: #fff;
}

.selectSearchBox .dropdown-item.active:hover {
    color: #fff;
}

.selectSearchBox .bootstrap-select>.dropdown-toggle:after {
    border: none;
    width: 15px;
}

.selectSearchBox .bs-searchbox {
    padding: 3px 3px 5px 3px;
}

.selectSearchBox .bs-searchbox .form-control,
.bs-searchbox .form-control {
    padding: .188rem .75rem;
    height: 30px;
    font-size: 14px;
}

.selectSearchBox .filter-option-inner-inner div.opImg img,
.selectSearchBox .dropdown-menu div.opImg img {
    width: 22px;
    height: 22px;
    border: 1px solid #989898;
}

.bootstrap-select .filter-option-inner-inner div.opImg img,
.bootstrap-select .dropdown-menu div.opImg img {
    width: 21px;
    height: 21px;
    border: 1px solid #989898;
}

.presentModal .selectSearchBox .filter-option-inner-inner {
    line-height: 28px;
    vertical-align: middle;
    height: 25px;
}

.bootstrap-select.disabled,
.bootstrap-select>.disabled {
    background: #d8d8d8;
}


/*-------------------------------
bootstrap-ui-overwirte css
---------------------------------*/

.dropdown-menu {
    border: 1px solid rgb(97, 93, 157);
}

.dropdown-item {
    border-bottom: 0.5px solid #cfcfe0;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #eaeaf6;
    color: #3f4073;
}


/*-------------------------------
daterangepicker 
---------------------------------*/

.daterangepicker {
    border: 1px solid #a8a8d0;
    font-family: inherit;
    box-shadow: 0px 1px 3px #b3adc4;
}

.daterangepicker:before {
    border-bottom: 7px solid #5c5a9c;
}

.daterangepicker:after {
    border-bottom: 6px solid #5c5a9c;
}

.daterangepicker td.in-range,
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover {
    background-color: #e4e3fb;
}

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #5c5a9c;
}

.drp-buttons .btn:hover {
    color: #fff;
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background: #f1effa;
}


/*--------------------------------------------------------------
2.0 - 1300
---------------------------------------------------------------*/

@media (max-width:1380px) {
    #smsModal .content-wrapper {
        display: block;
    }
    #smsModal .content-left {
        width: auto;
    }
    #smsModal .content-right {
        width: auto;
        margin-top: 1.5em;
        margin-left: 0;
    }
}

@media screen and (max-width: 1550px) {
    .webName {
        width: 330px;
    }
    .webName>div:nth-of-type(1) {
        font-size: 35px;
    }
    .loginWarp>div:nth-of-type(1),
    .loginWarp>div:nth-of-type(2) {
        width: 50%;
    }
    .mainTitle {
        font-size: 1.8em;
    }
    .loginInput input[type=text],
    .loginInput input[type=password] {
        width: 80%;
    }
    .loginTitle {
        padding: 15% 10% 2% 10%;
    }
    .loginType {
        width: 48%;
    }
    .logout {
        padding: 30% 10%;
    }
    .search select {
        max-width: 200px;
        width: 30%;
    }
    .selectCampaignConfirm {
        padding: 30% 10%;
    }
}

@media screen and (max-width: 1200px) {
    .searchDiv .inputDiv,
    .searchDiv .selectBox {
        width: 50%;
    }
    .recordPanel,
    .historyPanel {
        width: calc(97%/2);
    }
    .recordPanel .selectBox:nth-of-type(2) .button {
        float: left;
        margin: 10px 5px;
    }
    .loginType {
        width: 70%;
    }
    .transferNav>div:nth-of-type(1) {
        width: auto;
    }
}

@media screen and (max-width: 1000px) {
    .table-nav .dateWrap {
        float: none;
        margin: 5px;
    }
}

@media screen and (max-width: 900px) {
    .topBar .campaign {
        width: 30%;
    }
    .search select {
        width: 20%;
    }
    .modal-fitContent .modal-content {
        max-height: 90%;
        height: 90%;
    }
    .optionHeader>div {
        /* display: block; */
    }
    .optionHeader .floatRightDiv {
        float: inherit;
        margin: 5px 0;
    }
    .optionHeader {
        height: initial;
    }
    .cardsHeader .opImg .nameLength {
        max-width: 200px;
    }
    .modal-body .cardsHeader .opImg {
        width: 100%;
        height: auto;
        margin: 0 0 8px 0;
    }
}

@media screen and (max-width: 650px) {
    /* login out */
    .loginWarp {
        overflow: auto;
        display: block;
    }
    .loginWarp>div:nth-of-type(1),
    .loginWarp>div:nth-of-type(2) {
        width: 100%;
    }
    .loginWarp>div:nth-of-type(1) {
        height: 150px;
        background-position: center 48%;
    }
    .webName {
        top: 34px;
        width: 229px;
        padding: 0 0 10px 30px;
    }
    .webName>div:nth-of-type(1) {
        font-size: 20px;
        text-align: left;
    }
    .webName>div:nth-of-type(2) {
        padding-left: 4px;
        font-size: 12px;
    }
    .loginTitle {
        padding: 10% 10% 2% 10%;
    }
    .loginInput {
        padding: 5px 10px;
    }
    .mainTitle {
        margin: 25px 0 10px 0;
    }
    .transferNav {
        height: auto;
        display: inline-block;
        position: relative;
    }
    .transferNav>div:nth-of-type(1) {
        width: auto;
        float: left;
        display: inline-table;
    }
    .transferNav>div:nth-of-type(1) .button {
        margin: 5px 0;
    }
}

@media screen and (max-width: 580px) {
    .transferNav .floatRightDiv {
        float: left;
        position: absolute;
        left: 13%;
        top: 50%;
    }
}

@media screen and (max-width: 350px) {
    .loginWarp {
        height: 100%;
        G
    }
    .loginWarp>div:nth-of-type(1) {
        display: none;
    }
}


/*----------------  max-height   --------------------*/

@media screen and (max-height: 800px) {
    .modal-fitContent .modal-content {
        max-height: 95%;
        height: 95%;
    }
}

@media screen and (max-height: 730px) {
    .logoutPanel .button {
        width: 30px;
        height: 30px;
    }
    .logoutPanel .button i {
        font-size: 19px;
        line-height: 20px;
    }
    .logoutPanel .button div {
        display: none;
    }

    /* .calloutPanel-unfold .button {
        height: 30px !important;
    }

    .calloutPanel-unfold .button i {
        display: none;
    }

    .menuUnFoldPanel .action-btn .button i {
        display: none !important;
    }

    .menuUnFoldPanel .phonefn .button {
        height: 30px !important;
    } */
}

@media screen and (max-height: 700px) {
    .loginWarp>div:nth-of-type(2) {
        overflow: auto;
    }
    footer {
        position: relative;
    }
}

@media screen and (max-height: 650px) {
    .modal-fitContent .modal-content .modal-body {
        max-height: 60%;
    }
}

@media screen and (max-height: 700px) {
    .menuPanel {
        overflow: auto;
        padding: 5px 3px;
        overflow-x: hidden;
        width: 168px;
        z-index: 5;
    }
    .switch {
        position: fixed;
        height: 40px;
        left: 168px;
        line-height: 42px;
        opacity: 1;
        box-shadow: 2px 2px 3px #757ba2;
    }
    .callAnalyticsPanel {
        margin: 0 0 60% 0;
    }
    .logoutPanel {
        position: relative;
        bottom: 0;
    }
    .phonefn .button,
    .callbtn button.button {
        width: 65px;
        margin: 2px;
    }
}

@media screen and (max-height: 500px) {
    .subPanel {
        overflow: auto;
    }
    .custInfoPanel {
        height: 100%;
        height: inherit;
        height: -webkit-fill-available;
        /* Mozilla-based browsers will ignore this. */
        height: fill-available;
    }
    .recordPanel,
    .historyPanel {
        height: auto;
    }
}

@media screen and (max-height: 900px) {
    .call-analytics-title {
        height: 50px !important;
    }
    
    .call-analytics-count {
        height: 90px !important;
    }
}


/* タブ閉じるCSSアニメーション */

.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to {
    transform: translateX(-10px);
    opacity: 0;
}


/* プレゼンス 状態ドット */

div.dot-information {
    margin-top: 5px;
}

span.dot-info {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-left: 5px;
}


/*--------------------------------------------------------------
5.0 - relogin
---------------------------------------------------------------*/

#relogin_screen {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: white;
}
/* OP画面ソート */
.sort {
    cursor: pointer;
}

.sortAsc::after {
    content: "▲";
}
.sortDesc::after {
    content: "▼";
}

.sso-auths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.outbound {
    width: 100%;
    border: 1px solid #ada9c9;
    border-radius: 4px;
    position: relative;
    margin: 0px 0 3px 0;
}

.outbound-title {
    padding: 0px 35px;
    font-size: 12px;
    font-weight: bold;
    color: #dcdaef;
    line-height: 25px;
    border-bottom: 1px dashed #d3cee8;
    max-height: 25px;
    text-align: center;
}

.outbound-info {
    font-size: 12px;
    padding: 5px;
}

.outbound-info div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #dfdef2;
    cursor: pointer;
}


.select2-container--default .select2-results__option--selected:after {
    display: flex;
    float: right;
    font-family: "Font Awesome 5 Free";
    content: "\2713";
    vertical-align: middle;
    font-size: 20px;
}

.phonePanel {
    border: 5px solid #cccccc;
    margin: 0 0 12px 0;
}

.phonePanel>div {
    margin: -1px 0 0 0;
    background-color: #cccccc;
    padding: 5px 10px;
}

.phonePanel ul.phoneList {
    list-style: none;
    margin: 0;
    padding: 0px;
    height: 100px;
    overflow-y: auto;
    width: 100%;
}

.phonePanel ul.phoneList li {
    margin: 0px 0 4px 0;
    padding: 0;
    line-height: 18px;
}

.phonePanel ul.phoneList li label {
    cursor: pointer;
    vertical-align: middle;
    width: 100%;
    line-height: 18px;
    padding: 5px 15px 5px 15px;
    position: relative;
    margin: 0;
}

.phonePanel ul.phoneList li div {
    display: inline-block;
}

.phonePanel ul.phoneList li label input[type="checkbox"] {
    vertical-align: bottom;
}

.phonePanel ul.phoneList>li:hover {
    background-color: #f1effa;
}

.callAnalyticsPanel {
    margin-top: 15px;
}

.call-analytics-btn {
    width: 140px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    line-height: 1em;
}

.call-analytics-title {
    height: 60px;
    border: black 1px solid;
    background-color: #343453;
    border-radius: 15px 15px 0px 0px;
    color: white;
    text-align: center;
    font-size: 16px;
    align-content: center;
    padding: 5px;
}

.call-analytics-count {
    height: 100px;
    border: black 1px solid;
    border-radius: 0px 0px 15px 15px;
    font-size: 25px;
    text-align: center;
    align-content: center;
}

.call-analytics-bg-color {
    background-color: #007bff !important;
}