@charset "UTF-8";

/*===========================================================================*/
/* 01: Base Style                                                            */
/*===========================================================================*/
body, div, p, pre, blockquote, th, td,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
iframe, object, embed, form {
    margin: 0px;
    padding: 0px;
    border: none;
    text-align: left;
    /*line-height: 1.4;*/
    font-weight: normal;
}
html, body { overflow: hidden; }
ul, ol {
    list-style-position: outside;
    list-style-type: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    margin: 0;
    font-size: 1em;
}
table, th, td {
    font-size: 100%;
}
ul, li, ol {
    font-size: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid #fc2e8b;
}
input[type="text"] {
    height: 18px;
}
select {
    font-size: 100%;
    min-height: 24px;
}
select.danger {
    border-width: 2px;
    border-color: #ff4d4f;
}
select.danger:focus {
    outline: 2px solid #ff4d4f;
}
button, input[type="button"], input[type="reset"] {
    cursor: pointer;
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
}
* {
    word-break: break-all;
}

.wid100 { width: 100%; }

.word-break { white-space: nowrap; }
.nowrap { white-space: nowrap; }

.cal { cursor: pointer; }

/*===========================================================================*/
/* 02: Font Style                                                            */
/*===========================================================================*/
* {
  font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo UI, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  font-size: 13px;
}
select, button, textarea { font-size: 100%; }
textarea {
  border: thin solid;
}
.required { font-size: x-small; font-weight: bold; }
.strong { font-weight: bold; }

/*===========================================================================*/
/* 03: Layout Style                                                          */
/*===========================================================================*/
#wrap-conteiner {
}

#header-container {
    height: 31px;
    top: 0;
    left: 0;
    overflow: none;
}

#header-contents {
    height: 30px;
    border-bottom: 1px solid;
}

#sidemenu-container {
    position: absolute;
    width: 170px;
    left: 0;
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid;
}

#sidemenu-contents {
    position: absolute;
    width: 100%;
}

#main-container {
    overflow: auto;
    overflow-x: auto;
    overflow-y: scroll;
}

#main-contents {
}

#contents {
    padding: 0 5px 5px 10px;
}

#contents p {
    font-size: 93%;
}

#contents-submit {
    height: 65px;
    background-color: #ffffff;
    vertical-align: middle;
    overflow-y: scroll;
    overflow-x: none;
}

#contents-submit div {
    font-size: 85%;
}

#contents-submit div input {
    margin: 3px 5px 2px 5px;
    height: 28px;
}

#footer-container {
    height: 15px;
    bottom: 0;
    left: 0;

}

#footer-contents {
    height: 14px;
    border-top: 1px solid;
}

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.clear { clear: both; }

/*===========================================================================*/
/* 04: Headline Style                                                        */
/*===========================================================================*/
h1 {
    font-size: 102%;
    font-weight: bold;
    margin: 1px 0 0 305px;
    padding: 1px 0 0 10px;
}
h2 {
    font-size: 105%;
    font-weight: bold;
    margin: 5px 5px 5px 10px;
    border-bottom: 1px solid;
    border-left: 6px solid;
    padding: 5px 0px 2px 8px;
}
h3 {
    margin:5px 0px 0 0px;
    font-size: 90%;
    font-weight: bold;
    border: 1px solid;
    text-decoration: none;
    padding: 3px 5px 1px 8px;
}
h4 {
    margin: 5px 5px 2px 5px;
    font-size: 101%;
    font-weight: bold;
    border-bottom: 1px solid;
}


/*===========================================================================*/
/* 05: Table Style                                                           */
/*===========================================================================*/

/* 一覧テーブルスタイル
-----------------------------------------------------------------------------*/
.listLayout {
    border: 0px none;
    margin: 3px 0 15px 0;
    padding: 0 1px;
    line-height: 1.4;
}
.listLayout table {
    border: 1px solid;
}
.listLayout th {
    height: 24px;
    padding: 2px 4px;
    border: 1px solid;
    font-weight: bold;
    text-align: center;
}
.listLayout td {
    height: 26px;
    padding: 1.5px 2px 1.5px 3px;
    border: 1px solid;
}

.listLayout th img,
.listLayout td img {
    vertical-align: middle;
}

/* 詳細テーブルスタイル
-----------------------------------------------------------------------------*/
.detailLayout {
    border-top: 2px solid;
    border-bottom: 1px solid;
    margin: 3px 0 15px 0;
    padding: 2px 0 1px 0;
    line-height: 1.4;
}
.detailLayout tr {
    height: 24px;
}
.detailLayout th, .detailLayout td {
    padding: 1px 2px 1px 3px;
    border: 1px solid;
    line-height: 27px;
}
.detailLayout th {
    font-weight: bold;
}
.detailLayout td {
}
.detailLayout td img {
    vertical-align: middle;
    margin-top: -1px;
}

/* 共通
-----------------------------------------------------------------------------*/
th.partsHeading, td.partsHeading {
    padding: 0 0 0 15px;
    border: 1px solid;
    font-size: 100%;
    font-weight: bold;
    height: 25px;
}

.paging span, .paging a {
    margin: 2px;
    padding: 0.2em;
}

.row3 { border-top: 2px solid; }
.row4 { border-bottom: 2px solid; }
/*===========================================================================*/
/* 06: List Style                                                            */
/*===========================================================================*/
ul {
    margin: 5px 0px 10px 5px;
    padding: 0;
    text-indent: 0em;
}
ul li {
    margin: 5px 0 0 5px;
    padding: 0 10px 0 0;
}


/*===========================================================================*/
/* 07: Form Component Style                                                  */
/*===========================================================================*/
/*.focus { color: #333333; border: 2px solid #fc2e8b; background-color: #ffffff; }*/
/*.focus_button { border: 2px solid #fc2e8b; }*/
.submit { text-align: center; }
.button { min-width: 70px; }
.button1 { min-width: 50px; }
.button2 { min-width: 115px; }
.button3 { min-width: 130px; }

/* ime-mode */
.ime_kana { ime-mode: active; }

/*===========================================================================*/
/* 18: No Frame Layout Style                                                 */
/*===========================================================================*/
#no_frame_layout {
}
#no_frame_layout h2 {
    font-size: 95%;
    font-weight: bold;
    margin: 5px 5px 5px 0px;
    _margin-left: 5px;
    border-bottom: 1px solid;
    border-left: 6px solid;
    padding: 5px 0px 2px 10px;
}
#no_frame_layout #contents {
    padding: 0 5px 5px;
}


/*===========================================================================*/
/* 19: Login Form Style                                                      */
/*===========================================================================*/
#login-form { margin: 20px auto; }
#login-form table { margin: 10px auto; }
#login-form table td.lm { background-image: url('../img/login_04.gif'); }
#login-form table td.rm { background-image: url('../img/login_06.gif'); }
#login-form #login-form-message { width: 290px; margin: 0 auto; line-height: 1.8; }
#login-form #login-form-error { margin: 0 auto; }
#login-form .lLabel { width: 90px; height: 30px; }
#login-form .lInput { width: 160px; height: 30px; }
#login-form #user_id, #login-form #password { width: 150px; }
#login-form .submit { height: 35px; }


/*===========================================================================*/
/* 20: Etc Style                                                             */
/*===========================================================================*/
#logo-area { float: left; width: 300px; height: 28px; border: 0px none; }
#logo-area a img { display: block; border: 0 none; }
#toggle-menu-area { float: left; }
#toggle-menu { width: 120px; margin-top: 2px; height: 26px; }
#user-info-area { float: right; text-align: right; margin-right: 20px; font-weight: bold; height: 30px; line-height: 30px; }
#logoff-area { float: right; text-align: right; }
#logout { width: 100px; margin-top: 2px; margin-right: 10px; height: 26px; }
#information { font-size: 97% !important; }
#copyright { text-align: right; font-size: x-small; font-weight: bold; padding: 0 5px; }

/* カレンダー
-----------------------------------------------------------------------------*/
.calendar {
    border: 0px none;
    margin: 5px 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.calendar table {
    border: 0px none;
    margin-left:auto;
    margin-right:auto;
}
.calendar th {
    padding: 2px 2px 1px 2px;
    border: 0px none;
    height: 20px;
    text-align: center;
}
.calendar td {
    border: 1px solid;
    height: 28px;
    width:25px;
    text-align: center;
}
.calendar td.today {
    border: 1px solid;
    height: 20px;
    text-align: center;
    width:21px
}

/* Print Style
-----------------------------------------------------------------------------*/
#print {
    
}
#print h2 {
    font-size: 80%;
    font-weight: bold;
    margin: 5px 0 5px 0;
    border-bottom: 1px solid;
    border-left: 6px solid;
    padding: 5px 0px 2px 10px;
}
#print #contents {
    margin: 0;
    padding: 0;
    font-size: 65%;
}
#print #contents .listLayout {
    padding-left: 0;
    padding-right: 0;
}

/* BKタンク
-----------------------------------------------------------------------------*/
.schedule {
  border-color: #cccccc #d4d6e2 #d4d6e2;
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  background: #fff;
}
.schedule {
    border-top: 2px solid;
    border-bottom: 1px solid;
    margin: 3px 0 3px 0;
    padding: 2px 0 1px 0;
    table-layout: fixed;
}
.schedule tr {
    height: 24px;
}
.schedule th, .schedule td {
    padding: 3px;
    border-style: solid;
    border-width: 1px;
}

.schedule thead th, .schedule thead th div { font-weight: bold; text-align: center; }
.schedule td { vertical-align: top; }
.schedule td img {
    vertical-align: bottom;
}
.schedule { border-color: #4A7A2A; }
.schedule th, .schedule td { border-color: #888888; }
.schedule th { background: #f2ffea; }

.schedule th.weekday { background: #f2ffea; }
.schedule th.today { background: #ffffcc; }
.schedule th.saturday { color: #5577b4; background: #e9eef8; }
.schedule th.sunday, .schedule th.holiday { color: #c35f67; background: #f3e9ed; }

.schedule td.today { background: #ffffee; }
.schedule td.saturday { background: #f4f8ff; }
.schedule td.sunday, .schedule td.holiday { background: #fff3f4; }
.schedule td.disabled { background: #EDEDED; }
.schedule td.disabled .button { display: none; }
.schedule td.locked { background: #EDEDED; }

.schedule .button .lock_button { display: block; }
.schedule .button .unlock_button { display: none; }

.schedule .locked .button .lock_button { display: none; }
.schedule .locked .button .unlock_button { display: block; }


/*===========================================================================*/
/* 99: Color Style                                                           */
/*===========================================================================*/

/* Base Color Style
-----------------------------------------------------------------------------*/
body { background-color: #ffffff; color: #333333; }

/* Font Color Style
-----------------------------------------------------------------------------*/
#copyright { color: #ffffff; }

/* Link Style
-----------------------------------------------------------------------------*/
a:link    { color: #0b48c3; }
a:visited { color: #0b48c3; }
a:hover   { color: #f24646; }
a:active  { color: #f24646; }
.listLayout th a:link    { color: #ffffff; }
.listLayout th a:visited { color: #ffffff; }
.listLayout th a:hover   { color: #ffffff; }
.listLayout th a:active  { color: #ffffff; }

/* Layout Color Style
-----------------------------------------------------------------------------*/
#header-contents { border-bottom-color: #558855; background-color: #558855; /*#ffffff;*/  }
#user-info-area { color: #ffffff; }
#sidemenu-container { border-right-color: #558855; }
#footer-contents { border-top-color: #558855; background-color: #558855; }
.required{ color: #ff0000; }
.sred{ color: #ff0000; }
#err01 ul li{ color: #FF0000;}

/* Headline Color Style
-----------------------------------------------------------------------------*/
h1 { background-color: #558855; color: #ffffff; }
h2 { background-color: #558855; border-bottom-color:#539b08; border-left-color:#558855; color: #ffffff; }
h3 { background-color: #558855; border-color: #efefef #787878 #787878 #efefef; color: #ffffff; }
h4 { border-color: #888888; }

/* Table Color Style
-----------------------------------------------------------------------------*/
.listLayout { border-color: #4A7A2A; background-color: #FFFFFF; }
.listLayout table { border-color: #888888; }
.listLayout th, .listLayout td { border-color: #888888; }
.listLayout th { background-color: #558855; border-color: #FFFFFF; color: #ffffff; }
.listLayout th.partsHeading { background-color: #558855; color: #ffffff; border-color: #888888; }
.listLayout td.partsHeading { background-color: #558855; color: #ffffff; border-color: #888888 #888888 #FFFFFF #888888; }
.listLayout tr.row1 { background-color: #FFFFFF; }
.listLayout tr.row2 { background-color: #EEFFEE; }
.listLayout tr.row3 { background-color: #e3ece3; }
.listLayout tr.row4 { background-color: #e3ece3; }
.listLayout tr.gray { background-color: #cccccc; }
.listLayout tr.alerm { color: red; }
.listLayout td.alerm { color: red; }
.listLayout tr.caution { background-color: #ffffcc; }
.listLayout tr.caution td { font-weight: bold; }

.detailLayout { border-color: #4A7A2A; }
.detailLayout th, .detailLayout td { border-color: #888888; }
.detailLayout th { background-color: #f2ffea; }
.detailLayout .partsHeading { background-color: #558855; color: #ffffff; border-color: #888888; }

.detailLayout .listLayout { border-color: #4A7A2A; background-color: #FFFFFF; }
.detailLayout .listLayout th { background-color: #558855; color: #ffffff; }

th.data1, td.data1 { border-color: #888888 #ffffff #888888 #888888; }
th.data2, td.data2 { border-color: #888888 #ffffff #888888 #ffffff; }
th.data3, td.data3 { border-color: #888888 #888888 #888888 #ffffff; }
th.data4, td.data4 { border-color: #888888 #ffffff #888888 #888888; }
th.data5, td.data5 { border-color: #888888 #ffffff #888888 #ffffff; }
th.data6, td.data6 { border-color: #888888 #888888 #888888 #ffffff; }
th.data7, td.data7 { border-color: #ffffff #ffffff #888888 #888888; }
th.data8, td.data8 { border-color: #ffffff #ffffff #888888 #ffffff; }
th.data9, td.data9 { border-color: #ffffff #888888 #888888 #ffffff; }
th.data10, td.data10 { border-color: #888888 #ffffff #ffffff #ffffff; }
th.data11, td.data11 { border-color: #888888 #888888 #ffffff #ffffff; }

.calendar { border-color: #BBBBBB; }
.calendar table { border-color: #888888; background: #fff; }
.calendar th, .calendar td { border-color: #BBBBBB; }
.calendar th { border-color: #FFFFFF; color: #000000; }
.calendar td.sunday { background-color: #F8E0FF; }
.calendar td.normal { background-color: #FFFFAA; }
.calendar td.saturday { background-color: #BAFDCC; }
.calendar td.gray { color: #CCCCCC; }
.calendar td.ship { background-color: #FFBB88; }
.calendar td.today { border-color: #000000; background-color: #FFFFAA; }

/* Input Component Color Style
-----------------------------------------------------------------------------*/
textarea { border-color: #888888; }


/* ------------------------------------------------------------------------- */
/*   回転タンクカスタマイズ
/*   Date: 2023.12.25
/* ------------------------------------------------------------------------- */
.rotating_tank_list {
    margin: 3px 0 3px 0;
    padding: 2px 0 1px 0;
    table-layout: fixed;
    border-color: #4A7A2A;
    border-style: solid;
    border-width: 1px;
    border-top-width: 2px;
    border-collapse: collapse;
    background: #fff;
    min-height: calc(100vh - 230px);
}

.rotating_tank_list th,
.rotating_tank_list td {
    padding: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #888888;
    line-height: 27px;
}

.rotating_tank_list th {
    padding: 0;
    background: #f2ffea;
    font-weight: bold;
}

.rotating_tank_list td {
    height: inherit;
    vertical-align: top;
}

.rotating_tank_list .additives {}

.rotating_tank_list .additives .additives_title > div,
.rotating_tank_list .additives_free .additives_title > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    min-height: 250px;
    border: 0 none;
}

.rotating_tank_list .additives .additives_title {
    background-color: #ffe4c4;
}

.rotating_tank_list .additives_free th.additives_title {
    background-color: #e9eef8;
}

.rotating_tank_list tbody table tbody {
    /*display: none;*/
}

.rotating_tank_list .product_group {
    padding: 0 4px;
}

.rotating_tank_list .product_group_header {
    display: flex;
}

.rotating_tank_list .product_group_header .product_group_name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    padding: 0 4px 0 0;
}

.rotating_tank_list .product_group_header:not(.sred) .product_group_name.product_feed_type1 {
    color: blue;
}

.rotating_tank_list .product_group_header:not(.sred) .product_group_name.product_feed_type2 {
    
}

.rotating_tank_list .product_group_header .product_group_total {
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

.rotating_tank_list ul.order_list {
    margin: 2px 0 8px 0.5rem;
}

.rotating_tank_list ul.order_list li {
    display: flex;
    margin: 0;
    padding: 0 0 0.5rem 0.5rem;
    line-height: 1.4;
}

.rotating_tank_list ul.order_list li .order_id {
    flex: 1 1 auto;
    white-space: nowrap;
}

.rotating_tank_list ul.order_list li .child_brand_name {
    white-space: normal;
    word-break: break-all;
}

.rotating_tank_list ul.order_list li .order_amount {
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

.rotating_tank_list .product_list_disabled {
    background-color: #eee;
}

table.order_detail {
    width: 100%;
}

table.order_detail th {
    font-size: 14px;
    font-weight: bold;
    border: 0 none;
    background-color: initial;
    padding: 0 4px;
}

table.order_detail th.folder {
    cursor: pointer;
}

table.order_detail td {
    border: 0 none;
    padding: 0 4px;
}

table.order_detail td.order_id {
    padding-left: 0.5rem;
}


#shipment_pickup_timing_list .pickup_date_first,
#rotating_tank_pickup_timing_list .pickup_date_first {
    background-color: #FFEBD8;
}
#shipment_pickup_timing_list .pickup_date_second,
#rotating_tank_pickup_timing_list .pickup_date_second {
    background-color: #C6DCE4;
}
#shipment_pickup_timing_list .pickup_date_third,
#rotating_tank_pickup_timing_list .pickup_date_third {
    background-color: #F2D1D1;
}
#shipment_pickup_timing_list .pickup_date_fourth,
#rotating_tank_pickup_timing_list .pickup_date_fourth {
    background-color: #DAEAF1;
}
#shipment_pickup_timing_list .pickup_date_fifth,
#rotating_tank_pickup_timing_list .pickup_date_fifth {
    background-color: #FFE6E6;
}


.tooltip-wrap { 
    position:relative;
    display: inline;
}

.tooltip {
    width: 130px;
    padding: 10px;
    margin: -30px 0 0;
    background-color: rgb(219, 56, 105);
    font-weight: bold;
    color: #fff;
    position: absolute;
    right: 0;
    top: -56px;
    border-radius: 6px;
}

.tooltip:before {
    right: 43%;
    bottom: -16px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(219, 56, 105, 0);
    border-top-color: rgb(219, 56, 105);
    border-width: 8px;
    margin-top: -8px;
}