@charset "UTF-8";

.modal-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    margin: auto;
}

header {
    position: sticky;
    top: 0;
    height: 74px;
    z-index: 300;
    margin-bottom: 0;
    border-bottom:1px solid lightgray;
    padding-bottom: 1;
}

.header {
    z-index: 400;
}

.sticky {
    position: sticky;
    background-color: white;
    z-index: 299;
}

.sticky_y0_height1 {
    height: 5ex;
}

#monitor_panel .machine-id,
.line2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#monitor_filter {
    padding-top: 4px;
}
#monitor_filter > .cond > select {
    display: inline;
    width: auto;
}

.monitor {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.machine-body {
    padding:16pt;
}
.machine-title {
    font-weight:800;
    font-size:32pt;
}
.monitor > .machine {
    width: 212px;
    height: 195px;
    margin:0;
    padding-left:4pt;
    padding-right:4pt;
    padding-top:4pt;
    padding-bottom:4pt;
    font-size:16pt;
    border-style:none;
}

.machine > .container {
    /*background-color: #ffc660;*/
    border: 1px solid #888;
    width:100%;
    height:100%;
    padding:0px;
    background-repeat: no-repeat;
    background-size: cover;
    /*box-shadow: -4px 4px 6px rgba(100, 100, 100, 0.5);*/
}


.machine > .container > .line1 {
    position: relative;
    padding:0pt 4pt;
    color:white;
    display:block;
    width:100%;
    font-size:20pt;
    height:40px;
    font-weight:800;
    margin-bottom:2pt;
}

.machine > .container > .line1 > .comment {
    display: none;
}
.machine.ym-status-newERRSTOP > .container > .line1 > .comment, 
.machine.ym-status-ERRSTOP > .container > .line1 > .comment {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
}
.machine.ym-status-ERRSTOP_Y > .container > .line1 > .comment {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 1;
}

.machine > .container> .line2 {
    position: relative;
    display:block;
    width:100%;
    height:28px;
    padding:0 4px 0 4px;
    cursor: pointer;
}
.right > a, .left > a {
    text-decoration: underline;
    color: black;
    font-weight: bold;
}
.product_name > span {
    font-weight: bold;
}

.machine > .container > .line > .machine-id{
    color:blue;
    font-size:18pt;
}
.machine > .container > .line2 > .left {
    font-size:14pt;
    position: absolute;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 210px;
}
.machine > .container > .line2 > .right {
    text-align: right;
    font-size:16pt;
    font-weight:800;
    position: absolute;
    right: 0;
    z-index: 1;
}

.machine > .container > .line2 > .time {
    margin-top:30pt;
    color:white;
    font-size:12pt;
    text-shadow: 2px 2px 2px rgba(30,30,30,0.2);
}



.ym-status-ERRSTOP .line1 {
    background-color:#f00
}

.ym-status-newERRSTOP .line1 {
    background-color: #f00;
    -webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
.ym-status-CONFOK0 .line1 {
    background-color:#888;
}
.ym-status-CONFOK1 .line1 {
    background-color:#880;
}
.ym-status-ERRSTOP_Y .line1 {
    background-color:#880;
}
.ym-status-NOERR .line1 {
    background-color:#080;
}

.ym-status-PLANSTOP .line1 {
    background-color:#888;
}

.ym-status-ERRSTOP .container {
    background-color:#fcc;
}

.ym-status-newERRSTOP .container {
    background-color:#fcc;
}

.ym-status-CONFOK0 .container {
    background-color:#ccc;
}
.ym-status-ERRSTOP_Y .container {
    background-color:#cc0;
}
.ym-status-CONFOK1 .container {
    background-color:#cc0;
}
.ym-status-NOERR .container {
    background-color:#cfc;
}

.ym-status-PLANSTOP .container {
    background-color:#ccc;
}



@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.table > thead > tr > th {
    vertical-align: middle;
}

#dialog-factor .modal-footer > #operation_datetime {
    flex-grow: 2;
}
#dialog-factor .modal-footer > #operation_datetime + div {
    flex-grow: 3;
}

#dialog-factor .factor_box {
    display:flex; flex-wrap: wrap; justify-content: flex-start;
}
#dialog-factor .btn_factor {
    width:160px; margin:8px; display: flex; padding: 0; overflow: hidden; border: none; min-height: 80px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#dialog-factor .btn_factor .left_color {
    width: 16px; /* 10% */ 
}
#dialog-factor .btn_factor .right_content {
    width: 90%; display: flex; align-items: center; justify-content: flex-start; padding: 10px 14px; text-align: left; font-weight: 400; font-size: 1.25rem;
    word-break: keep-all;
}

#dialog-factor .modal-body p {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#dialog-factor .modal-body button {
	width: 160px;
}

.chart_time {
    position: relative;
    width: 894px;
    height: 1rem;
    font-size: 0.8rem;
}
.chart_time > div {
    position: absolute;
    width: 30px;
    text-align: center;
    display: inline-block;
}
.open_close_time {
    position: absolute;
    top: 0px;
    width: 100px;
}
.open_close_time .open_time {
    z-index: 1;
}
.chart_time .open_close_line {
    margin-left: 15px;
    top: 16px;
    width: 0px;
    height: 80px;
    z-index: 250;
    border: 1px dashed #000;
}

.chart {
    height: 65px;
    width: 864px;
    margin-left: 15px;
    background-color: #808080;
}
.chart_border {
    position: relative;
}
.chart_bar .color_OK {
    position: absolute;
    height: 65px;
    background-color: #008000;
    z-index: 200;
}
.chart_bar .color_CONFOK {
    position: absolute;
    height: 65px;
    z-index: 202;
}
.chart_bar .color_ERRSTOP {
    position: absolute;
    height: 65px;
    background-color: #ff0000;
    z-index: 202;
    cursor:pointer;
}

.chart_percent .color_OK {
    height: 65px;
    background-color: #008000;
    z-index: 201;
    float:left;
}
.chart_percent .color_ERRSTOP {
    height: 65px;
    background-color: #ff0000;
    z-index: 200;
    float:left;
}

.deco_off::-webkit-search-cancel-button,
.deco_off::-webkit-search-decoration,
.deco_off::-webkit-clear-button{
    -webkit-appearance: none;
}

.selection {
    background: rgba(0, 0, 255, 0.1);
    border-radius: 0.1em;
    border: 0.05em solid rgba(0, 0, 255, 0.2);
    z-index: 1000;
}
.selected {
    animation: flash 1s linear infinite;
}

@keyframes flash {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.toast-group {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: none;
}

.total_percent {
    width:100%;
    height:100%;
}
.total_percent .color_OK {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background-color: #008000;
    color: #FFF;
    overflow: hidden;
}
.total_percent .color_ERRSTOP {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    background-color: #FF0000;
    color: #FFF;
    overflow: hidden;
}
#ruler {
  display: flex;
  justify-content:space-between;
  flex-direction: column;
  height: 50vh;
  border-right: 1px solid #888;
}
#ruler > div {
  text-align: right;
}
.ruler.min_val_area {
  border-right: 1px solid #888;
}
.min_val_area {
  height: 1.3rem;
  text-align: center;
}
.part {
  width: 32px;
  height: 50vh;
}
.part_ruler {
  border-top: 1px solid #888;
  text-align: center;
}
.totaltable td {
  text-align: right;
}
.stop_factor_1, .stop_factor_0 {
  display: none;
}
.stop_factor_view{
  cursor: pointer;
}
.stop_factor {
  color: #495057;
  text-shadow:1px 1px 0 #e9ecef, -1px -1px 0 #e9ecef,
        -1px 1px 0 #e9ecef, 1px -1px 0 #e9ecef,
        0px 1px 0 #e9ecef,  0-1px 0 #e9ecef,
        -1px 0 0 #e9ecef, 1px 0 0 #e9ecef;
}
.left_border {
  border-left: 1px solid #000;
}
.totaltable tr th:first-child,
.totaltable tr td:first-child {
  position: sticky;
  left: 0;
  z-index:10;
}
.totaltable tr th:first-child {
  background-color: #e9ecef;
}
.totaltable tr td:first-child {
  background-clip: padding-box;
  background-color: #fff;
}

.chart_bar > .product_chart {
    width: 75px;
    font-size: 0.8em;
    padding-left: 6px;
    color: white;
    line-height: 25px;
}

.product_chart .left {
    text-wrap: nowrap;
}

.product_select {
    position: absolute;
    top: 94px;
    width: 0px;
}

.product_select_line {
    margin-left: 15px;
    top: 16px;
    width: 0px;
    height: 30px;
    z-index: 250;
    border: 1px solid black;
}
.product_chart {
    position: absolute;
    background-color: #5b7099;
    height: 25px;
    border-left: 2px solid white;
}
.no_product {
    border-left: none;
    background-color: gray;
}
.product_chart i {
    color: red;
    position: absolute;
    left: -10px;
    top: -10px;
    border: thin solid red;
    padding: 5px;
    border-radius: 50%;
    font-size: 0.8em;
    background-color: white;
    cursor: pointer;
    display: none;
    z-index: 500;
}
.product_chart .right {
    position: absolute;
    right: 5px;
    font-weight: bold;
}
.product_chart:hover i {
    display: block;
}
.product_chart:hover .product_select {
    display: none;
}
.chart_container {
    overflow-x: clip;
}
.chart_label {
    margin-left: 5px; margin-top: 1px;
    min-width: 132px;
}
.neighbor_product {
    margin-left: 10px;
    margin-top: 8px;
}
#neighbor_select {
    margin-bottom: 15px;
    border-bottom: 0.5px solid lightgray;
    padding-bottom: 15px;
}
.has_worker {
    padding-left: 0 !important;
}

.insight_table {
    width: 100%;
    border-collapse: separate;
    border: none;
    border-spacing: 25px;
}
.insight_table > tr > td, .insight_table > tbody > tr > td {
    border: thin solid lightgray;
}

#heat_chart {
    border: 1px dashed lightgray;
    margin-top: 12px;
}

.form-check {
    margin-left: 10px;
    margin-right: 5px;
}
.form-check-label {
    padding-right: 18px;
}
#detail_work_rate tr th:last-child {
    background-color: aliceblue;
}


#conversation_box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    height: 480px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}
#chat_header {
    background-color: cornflowerblue;
    color: white;
    padding: 10px 16px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#close_chatbox {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
#chat_messages {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
    border-bottom: 1px solid #ccc;
    font-size: 0.80rem;
}
#chat_input_area {
    display: flex;
    padding: 10px;
} 
#chat_input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
#send_button {
    background-color: cornflowerblue;
    color: white;
    border: none;
    padding: 8px 12px;
    margin-left: 8px;
    border-radius: 4px;
    cursor: pointer;
}
#send_button i {
    font-size: 16px;
}
#send_button:hover {
    background-color: cornflowerblue;
}
#chat_input:focus {
    outline: none;
    border-color: cornflowerblue;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
#chat_messages .message {
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 4px;
    max-width: 85%;
    word-wrap: break-word;
}
#chat_messages .user_message {
    background-color: cornflowerblue;
    color: white;
    align-self: flex-end;
    margin-left: 55px;
}
#chat_messages .bot_message {
    background-color: #e4e8fb;
    color: black;
    align-self: flex-start;
}
#chat_messages .bot_message span {
    color: gray;
}
#chat_messages .thinking::after {
    content: ' 。。。';
    color: black;;
    animation: blink 1s steps(4, start) infinite;
}
#chat_messages .timestamp {
    font-size: 10px;
    color: gray;
    margin-top: 4px;
    text-align: right;
}
#chat_messages .user_message .timestamp {
    text-align: left;
}
#chat_messages .bot_message .timestamp {
    text-align: right;
}
#chat_messages .message .message-content {
    white-space: pre-wrap;
}

#open_chatbox {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: cornflowerblue;
    color: white;
    border: none;
    padding: 5px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    border-radius: 8px;
    font-size: 0.8rem;
}
#open_chatbox i {
    font-size: 18px;
}