/*!
 * Streamed webclient CSS
 * key color: #56a6e5
 *
 * @author yamada@startup-plus.com
 * @licence Copyright Streamed
 */

html {
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
}
body {
    color: #434a54;
    background-color: #FCFCFC;
    padding: 0;
    margin: 0;

}
button, input, optgroup, select, textarea {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
body.noscroll {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

*[tabindex="0"] {
    cursor:pointer;
}
*:focus {
    outline: 0!important;
    /*box-shadow: 0px 0px 0 1px #459fff;*/
}
body:focus {
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
}
*:active, *:hover {
    outline: 0!important;
}

a {
    color: #428bca;
    text-decoration: none;
}
a:hover {
    color: #2a6496;
    text-decoration: underline;
}

table {
    border-collapse: collapse;
    border-width: 0;
}

input.number {
    text-align: right;
    text-indent: 20px;
}

.badge {
    position: relative;
    float: right;
    top: 0px;
    left: 0px;
    display: block;
    height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 13px;
    background-color: red;
    color: #fff;
    font-size: 0.7em;
    line-height: 17px;
    font-weight: bold;
    border: 2px solid #fff;
    box-shadow: 1px 1px 2px 0 rgba(0,0,0,.5);
}


.onlinebadge-warning {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #f0ad4e;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 10px;
}

.onlinebadge-danger {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #a94442;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 10px;
}

.onlinebadge-green {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #8fc31f;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 10px;
}

#page-title {
    margin-top: 50px;
    /*padding: 10px 0 15px 18px;*/
    font-size: 2em;
    font-weight: normal;
}


#page_wrapper, .page { min-width: 1024px; }

#page-header { position: fixed;top: 0;left: 0; width: 100%; background-color: #ffffff; border-bottom: 1px solid #e3e3e3; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; z-index: 10; font-size: 14px; }
#page-header #document-title { width: 145px; height: 40px; margin: 0; padding: 0; cursor: pointer; margin-left: 10px; }
#page-header h2 { position: absolute; top: 10px; left: 170px; font-size: 17px; margin: 0; line-height: 1.2em; display: inline-block; color: #348fe2; }
#page-header .header-menu { font-size: 2em; }

.header-menu.right a { margin-right: 15px;  }
.header-menu.right { float:right; position: absolute; right: 0; top: 0px; color: #348fe2;  }
.header-menu.left  { float: left; padding-left: 17px; width: 100%; background-color: #469fe5; line-height: 35px;  }
.header-menu a.active { background-color: #216AA4;  }
.header-menu a { font-size: 0.5em; font-weight: normal; display: inline-block; }
.header-menu a i { margin-right: 7px; }
.header-menu .submenu { display: none; position: absolute; background-color: #469fe5; top: 75px; color: white; }
.header-menu .submenu a{ color: white;padding: 0 15px; display: block;}


#btn-plan-name {
    margin-right: 12px;
}
#btn-logout {
    margin-right: 30px;
}
#username {
    font-weight: normal;
}

#username .company:hover{
    color: #61A8F0;
}

/*.page {
    padding-top: 10px;
    !*top: 70px;*!
    position: relative;
    z-index: 1;
    height: 100%;
}*/

.expense-filter {
    border: 1px solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    display: inline-block;
    height: 40px;
    margin: 5px 5px 5px -5px;
    padding: 0 5px;
}
.expense-filter:hover {
    border-color: #e3e3e3;
}

#report-edit-add-expense-modal .amount {
    display: inline-block;
    height: 24px;
    padding: 0px 8px;
    margin-right: 5px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #459fff;
    border-radius: 15px;
    background-color: #ffffff;
}
.separator {
    border-right: 1px solid #ccc;
    width: 1px;
    margin-left: 8px;
    margin-right: 12px;
    height: 28px;
}
#action-expense-default {
    display: block;
}
#action-expense-selected {
    position: absolute;
    right: 0;
    top: 50px;
    left: 480px;
}
#action-expense-edit {
    display: none;
}
#action-expense-edit-save  .delete-expense{
    display: none;
}
#action-expense-upload-pictures {
    display: none;
}
#action-expense-transport .delete-expense{
    display: none;
}
#action-expense-edit-common {
    display: none;
    position: absolute;
    margin-left: 123px;
    width: 830px;
}

#action-bankbook .btn {
    display: none;
}

#action-expense-selected button[class*="selected-"]{
    display: none;
}

#action-expense-selected .icon {
    height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 16px;
    display: inline-block;
}

.page-control {
    padding: 0px 16px 0 16px;
    position: relative;
}
.page-control::after {
    content: '';
    display: block;
    clear: both;
}

ul.action {
    margin: 0;
    padding: 0;
}
ul.action li {
    list-style: none;
    float: left;
    margin-right: 10px;
}
.page-contents {
    padding: 8px 16px;
    clear:both;
}

.card, .receiptcard {
    width: 270px;
    background-color: #fff;
    box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1);
    float: left;
    margin: 0 14px 14px 0;
    border-radius: 4px;
    position: relative;
}
.receiptcard {
 height: 325px;
}


.card.highlight,
#tblClient tr.highlight {
    border-left: 3px solid #459fff;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#tblClient .btn{ padding: 2px 12px; }



.clickable tr { cursor: pointer; }
.scrollable, .border-table { width:100%; border: 1px solid #CCCCCC; background-color: white; font-size: 14px; }
.scrollable-content { display: block; overflow: auto; }
.scrollable-content td { overflow: hidden; }
.tbl_data_list { width:100%; border-color: #CCCCCC; }
.tbl_data_list tr:hover,
.tbl_data_list tr.selected  { background-color: #EFF7FF; }


.tbl_data_list tr:not(.selected) .checkbox .checked { display:none; }
.tbl_data_list tr.selected .checkbox .unchecked { display:none; }

.tbl_data_list th { background-color: #E2EFFA; }
.tbl_data_list th:hover { cursor:pointer; background-color: #F5F9FC; }
.tbl_data_list th i:not(.checkbox_ui) { float:right; }
.tbl_data_list th i:not(.checkbox_ui).fa-exclamation { float:right; margin-right: 16px; }
.tbl_data_list th i.warningicon { margin-right: 5px; }
.tbl_data_list th,
.tbl_data_list td { height: 30px; padding: 2px 10px; max-width: 200px; }

.tbl_data_list .checkbox { width:30px; }
.tbl_data_list .checkbox_ui { width: 20px; font-size: 1.2em; padding: 0; }
.tbl_data_list .selected .checkbox_ui { background-position: -22px 0; }
.tbl_data_list .checkbox input { width:17px; height:17px; cursor: pointer; }

.tbl_data_list .data {  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl_data_list .data-status { position: relative; line-height: inherit; }
.tbl_data_list .unread-row { background-color: #feffbe; }
.tbl_data_list .exported-row { background-color: #f7f7f7; }

.btn.disabled, .btn[disabled],
.btn.disabled:hover, .btn[disabled]:hover,
.btn.disabled:active, .btn[disabled]:active {
    color: #ccc !important;
    background-color: white !important;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.btn .icon {
    position: relative;
    top: 1px;
}
.btn:active {
    box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,.3);
}

.btn.active:focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

.btn-icon, .btn.btn-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
}

.btn-circle, .btn.btn-circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.btn-icon.btn-xs {
    width: 16px;
    height: 16px;
    font-size: 8px;
    line-height: 16px;
}

.btn-icon.btn-sm {
    width: 22px;
    height: 22px;
    font-size: 11px;
    line-height: 22px;
}

.btn-icon.btn-lg {
    width: 34px;
    height: 34px;
    font-size: 17px;
    line-height: 34px;
}

.btn-scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 25px;
}

.btn > .pull-left, .btn > .pull-right {
    line-height: 1.428571429;
}

.btn-block {
    padding-left: 12px;
    padding-right: 12px;
}

.btn.active, .btn:active, .btn-open-search.opening {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
}
.btn-open-search.opening {
    background-color: #e3e3e3;
    border: 1px solid #bbb;
}

.btn.btn-default {
    color: #555;
    background-color: #fff;
    border: 1px solid #e3e3e3;
}
.btn.btn-default:hover,
.btn.btn-default:active {
    background-color: #e3e3e3;
    color: #333;
    border: 1px solid #bbb;
}
.btn.btn-default:focus {
    border: 1px solid #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}


.btn.btn-white {
    font-weight: 400;
    color: #333;
    background: #fff;
    border-color: #e2e7eb;
}

.btn.btn-white.btn-white-without-border {
    border-color: #fff;
}

.btn.btn-white.btn-white-without-border.active, .btn.btn-white.btn-white-without-border.active:focus, .btn.btn-white.btn-white-without-border.active:hover {
    border-color: #ddd;
}

.btn.btn-white.btn-white-without-border:focus, .btn.btn-white.btn-white-without-border:hover {
    border-color: #eee;
}

.btn-white.active, .btn-white:active, .btn-white:focus, .btn-white:hover, .open .dropdown-toggle.btn-white {
    background: #e2e7eb;
    border-color: #d8dde1;
}

.btn-group .btn.btn-white:not(.active) + .btn.btn-white, .input-group-btn .btn.btn-white:not(.active) + .btn.btn-white {
    border-left-color: #eee;
}

.btn.btn-inverse {
    color: #fff;
    background: #2d353c;
    border-color: #2d353c;
}

.btn-inverse.active, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .open .dropdown-toggle.btn-inverse {
    background: #242a30;
    border-color: #242a30;
}

.btn-group .btn.btn-inverse:not(.active) + .btn.btn-inverse, .input-group-btn .btn.btn-inverse:not(.active) + .btn.btn-inverse {
    border-left-color: #242a30;
}

.btn.btn-primary {
    color: #fff;
    /*background: #348fe2;
    border-color: #348fe2;*/
    background: #469fe5;
    border-color: #469fe5;

}

.btn.btn-green {
    color: #fff;
    background: #8fc31f;
    border-color: #8fc31f;

}

.btn.btn-gray {
    color: #fff;
    background: #b6b6b6;
    border-color: #b6b6b6;

}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
    /*background: #2a72b5;
    border-color: #2a72b5;*/
    background: #469fe5;
    border-color: #469fe5;

}

.btn-group .btn.btn-primary:not(.active) + .btn.btn-primary, .input-group-btn .btn.btn-primary:not(.active) + .btn.btn-primary {
    border-left-color: #2a72b5;
}

.btn.btn-success {
    color: #fff;
    background: #00acac;
    border-color: #00acac;
}

.btn.btn-success.active, .btn.btn-success:active, .btn.btn-success:focus, .btn.btn-success:hover, .open .dropdown-toggle.btn-success {
    background: #008a8a;
    border-color: #008a8a;
}

.btn-group .btn.btn-success:not(.active) + .btn.btn-success, .input-group-btn .btn.btn-success:not(.active) + .btn.btn-success {
    border-left-color: #008a8a;
}

.btn.btn-warning {
    color: #fff;
    background: #f59c1a;
    border-color: #f59c1a;
}

.btn-warning.active, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open .dropdown-toggle.btn-warning {
    background: #c47d15;
    border-color: #c47d15;
}

.btn-group .btn.btn-warning:not(.active) + .btn.btn-warning, .input-group-btn .btn.btn-warning:not(.active) + .btn.btn-warning {
    border-left-color: #c47d15;
}

.btn.btn-danger {
    color: #fff;
    background: #C75050;
    border-color: #C75050;
}

.btn-danger.active, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open .dropdown-toggle.btn-danger {
    background: #C75050;
    border-color: #C75050;
}

.btn-group .btn.btn-danger:not(.active) + .btn.btn-danger, .input-group-btn .btn.btn-danger:not(.active) + .btn.btn-danger {
    border-left-color: #C75050;
}

.btn.btn-info {
    color: #fff;
    background: #49b6d6;
    border-color: #49b6d6;
}

.btn-info.active, .btn-info:active, .btn-info:focus, .btn-info:hover, .open .dropdown-toggle.btn-info {
    background: #3a92ab;
    border-color: #3a92ab;
}

.btn-group .btn.btn-info:not(.active) + .btn.btn-info, .input-group-btn .btn.btn-info:not(.active) + .btn.btn-info {
    border-left-color: #3a92ab;
}
.label {
    display: inline-block;
    padding: 4px 8px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 2px;
}
.label-info {
    color: #fff;
    background: #49b6d6;
}
.label-info-inset {
    color: #49b6d6;
    background: #fff;
    border-color: #49b6d6;
}

.label-primary {
    color: #fff;
    background: #348ee3;
}
.label-primary-inset {
    color: #348fe2;
    background: #fff;
    border-color: #348fe2;
}
.label-success {
    color: #fff;
    background: #00acac;
}
.label-success-inset {
    color: #00acac;
    background: #fff;
    border-color: #00acac;
}
.label-warning {
    color: #fff;
    background: #f59c1a;
}
.label-warning-inset {
    color: #f59e1c;
    background: #fff;
    border-color: #f59c1a;
}
.label-gray {
    color: #999;
    background: #999;
}
.label-gray-inset {
    color: #999;
    background: #fff;
    border-color: #999;
}
.label-danger {
    color: #fff;
    background: #ff5a57;
}

.edit-table tr { height: 43px; line-height: 43px; }
.edit-table th { font-weight: normal; text-align: left; padding: 0 32px 0 20px; }
.edit-table tr.textarea { height: none; line-height: 1.2em; }
.edit-table .row-space { height: 20px; line-height: 20px; }
.edit-table .lbl { vertical-align: top; padding-top: 10px; }
.edit-table .lbl-require::after { content: "*"; color:red; }
.edit-table tr.def-line-height { line-height: normal; }

.category { padding: 0; margin: 0; }

select.category,
select.sub-cat {
    max-width: 160px;
    min-width: 160px;
}

td.data select.category,
td.data select.sub-cat,
td.controlpanel select {
    width:100%;
    height: 27px;
    min-width: inherit;
    max-width: inherit;
}


.setting-category .block-input .btn { min-width: 75px;}
.setting-category .block-sort { width: 640px; }
.setting-category .block-input { width: 640px; }
.setting-category .block-input table { background-color: white; }
.setting-category .block-input table tr { border-bottom: solid 1px #ccc; }
.setting-category .block-input table tr.select input { color: black; }
.setting-category .block-input table th { border-right: solid 1px #ccc; height: 20px; text-align: center; }
.setting-category .block-input table td { border-right: solid 1px #ccc; height: 20px; }
.setting-category .block-input table td.last button { margin-right: 5px;}
.setting-category .action { width: 100%; margin: 10px 0 20px 0; }
.setting-category .action .btn { margin-right: 20px; }
.setting-category .header, .setting-industry .header { background-color: #fff; margin-bottom: 2px; height: 30px; padding-top: 15px; text-align: center; }

.category .row-cat { list-style-type: none; background-color: #fff; margin-bottom: 2px; height: 30px; position: relative; padding: 15px 0 0 10px; }
.category .cat-sys { padding-left: 40px; }
.category .fa { float: right; font-size: 2.4rem; color: #CCC; padding: 12px; }
.category .btn-del { width: 40px; position: absolute; top: 0; left: 0; }
.category .handle { position: absolute; top: 0; right: 0; cursor: move; }
.category .btn-edit { position: absolute; top: 0; right: 40px; }
.category .ico-del { background: #ccc url('../../img/ui-icons_ffffff_256x240.png') -94px -126px; width: 21px; height: 21px; border-radius: 50%; margin: 0 auto; display: block; margin-top: 14px; }

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
}
.alert-success {
    background-color: #00acac;
    border-color: #00acac;
    color: #fff;
}
.alert-primary {
    background-color: #348ee3;
    border-color: #348ee3;
    color: #fff;
}
.alert-info {
    background-color: #49b6d6;
    border-color: #49b6d6;
    color: #fff;
}
.alert-warning {
    background-color: #f59c1a;
    border-color: #f59c1a;
    color: #fff;
}
.alert-danger {
    background-color: #ff5b57;
    border-color: #ff5b57;
    color: #fff;
}

.readonly { background-color: #E3E3E3; }

.setting-category-error {
  max-height: 140px;
  overflow: auto;
  background-color: #ff5b57;
  color: #FCFCFC;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
}

.setting-category-error p {
  margin-top: 2px;
  margin-bottom: 0px;
}

.setting-category-error ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3px;
  margin-bottom: 3px;
}

.setting-category-error li {
  list-style: none;
  margin-left: 3px;
  margin-right: 3px;
}

.setting-category-error span {
  display: inline-block;
  background-color: #FCfCfC;
  color: red;
  border-radius: 3px;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 3px;
  margin-right: 3px;
}

.setting-category-error a {
    color: white;
    text-decoration: underline;
}

@media screen and (max-width: 979px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 479px) {
}


/* -------------------------------------------- *
 *   pages
 * -------------------------------------------- */

#login {
    height: 100%;
    font-size: 14px;
    background-color: white;
}
#login #login-header {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    background: rgba(248,248,248,0.76);
    border-bottom: 1px solid rgba(238,238,238,0.56);
    color: #666;
    font-size: 12px;
    text-align: center;
}
#login .background {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
    background-color: #56a6e5;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
#login .login-form {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    width: 400px;
    height: 380px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    background-color: rgba(255,255,255,0.8);
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
#login .login-form h2 {
    margin: 40px 75px;
    width: 250px;
    height: 62.5px;
    overflow: hidden;
    text-indent: 250px;
    /* background: url(../img/logo_streamed_w.png) no-repeat; */
    background-size: 250px 62.5px;
}
#login .login-form .control {
    display: block;
    width: 300px;
    margin: 0 auto;
}
#login .login-form #login_id {
    margin-bottom: 10px;
}

#login .login-form #password {
    margin-bottom: 20px;
}
#login .forget-password,
#login  .show-login-form {
    width: 300px;
    margin: 20px auto;
    text-align: right;
}

.control {
    padding: 0px 8px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    background: #fff;
    height: 34px;
}
select.control {
    padding: 0px 4px;
}
.control[disabled] {
    color: #999;
    background: #eee;
}
.selectize-control .selectize-input.disabled {
    color: #999 !important;
    background: #eee !important;
}

.control-static {
    display: inline-block;
    padding: 8px 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    height: 40px;
}
.control.error {
    border: 1px solid #cc4946;
}
.error-message {
    color: #ff5b5b;
}
.error-message.email-activation {
    line-height: 20px;
    margin-bottom: 8px;
}
.edit-group {
    border-bottom: 1px solid #cccccc;
}
.edit-group:last-child {
    border-bottom-width: 0;
}
.edit-group th {
    padding-top: 24px;
    padding-bottom: 24px;
}
.edit-group td {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

#login .login-footer {
    position: absolute;
    bottom: 0;
    display: block;
    background-color: rgba(0,0,0,.3);
    padding: 10px 0;
    width: 100%;
    color: #eee;
    text-align: center;
}
#login .login-footer address {
    font-size: 0.9em;
    font-style: normal;
}
#login .login-footer address a {
    color: #fff;
    font-size: 12px;
    text-shadow: 1px 1px 2px black;
}
#login .login-validate-message {
    margin: -5px 30px 10px 30px;
}


/* -------------------- Expsense -------------------- */


.edit-expense-note {
    line-height: 28px;
}
#expense-edit {
    display: none;
}
#expense-upload-pictures {
    display:none;
}
#expense-transport {
    display:none;
}

#expense-transport .checkbox-inline { width: 100px; display: inline-block; }
#expense-transport .icon { display: block; float: left; width: 20px; padding-top: 3px; font-size: 2rem; }
#expense-transport .icheckbox_flat-green { float: left; top: 15px; }

#expense-edit-table { width: 100%; }
#expense-edit-table .receipt-time     { width: 160px; }
#expense-edit-table .account-amount   {
    width: 160px;
}
#expense-edit-table .expense-category { width: 160px; }
#expense-edit-table textarea {width: 100%; height: 70px; line-height: 28px; }
#expense-edit-table td {position:relative;}



.amount-wrapper{
    position: relative;
    line-height: 0;
}
.flaticon-money672 { display: inline-block; height: 32px; padding: 0 8px; line-height: 32px; border-radius: 4px 0 0 4px; background: #e0f3ff; position: absolute; left: 1px; top: 1px; font-size: 11px;}
.fa.warning_flag, .warningicon.warning_flag, .fa-comment-o { font-size: 1.3em ;}
.fa.warning_flag.yellow { color: #F8B62D ;}
.fa.warning_flag.red { color: #E83828 ;}
.fa.warning_flag.black { color: black ;}
.fa.warning_flag.black.ic-filter {visibility: hidden;}
.fa.fa-graduation-cap { font-size: 1.5em ;}
.fa.fa-graduation-cap.clickable { cursor: pointer ;}
.fa.fa-graduation-cap.clickable:hover { font-size: 1.7em ;}

#expense-edit-table .transport         { width: 222px; }
.expense-edit-table-wrapper { float:left; width: 496px; margin-right: 30px; margin-bottom: 20px; }
#expense-edit-image { float:left; padding-top: 35px; }
#expense-edit-message .title {
    margin-top: 0;
    padding: 40px 0;
    border-radius: 4px;
    text-align: center;
    color: #fff;
}
#expense-edit-message .title.processing {
    font-size: 30px;
    background-color: #56a6e5;
}
#expense-edit-message .title.error {
    font-size: 20px;
    background-color: #ff5b5b;
}
#expense-edit-message .about-processing,
#expense-edit-message .cancel-processing {
    padding: 8px;
}
#expense-edit-message .about-processing strong,
#expense-edit-message .cancel-processing strong {
    display: block;
    margin-bottom: 0.5em;
}
#expense-edit-message .cancel-processing #cancel-engine {
    margin-top: 0.5em;
}

#js-preview-photo .no-picture {
    max-width: 400px;
    margin: 0 0 1em 0;
    padding: 16px 8px;
    text-align: center;
    border: 1px solid #ccc;
}
.expense-edit-warning {
    border: 1px solid #ff5b57;
    border-radius: 4px;
    background: #ff5b57;
    text-align: center;
    padding: 16px 0;
    margin-bottom: 16px;
    color: #fff;
}

.preview-photo-multi img {
    max-width: 200px;
    max-height: 200px;
    margin: 16px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    overflow: hidden;
}

.overlay#overlay_process_api {
    background: none;
}

.uploading {
    background: #56a6e5;
    text-align: center;
    padding: 0;
    margin: 100px auto 0 auto;
    width: 300px;
    height: 300px;
    line-height: 300px;
    border: 1px solid #00acac;
    border-radius: 150px;
    color: #fff;
    font-size: 2em;
}

.uploading-text {
    text-align: center;
    padding: 0;
    margin: 100px auto 0 auto;
    width: 300px;
    height: 300px;
    color: #fff;
    font-size: 1.9em;
}

.loading {
    padding: 16px;
    font-size: 1.3em;
    color: #666;
}
#expense-none,
#expense-beginner {
    display: none;
}
#expense-none {
    position: relative;
    top: -20px;
    left: 12px;
}
#expense-beginner {
    padding: 20px;
}

#expenselist .filterbox {
    float: left;
    padding: 1px 0px;
}
#tabs-account .block-input input,
#tabs-account .block-input select,
#expenselist .filterbox button,
#expenselist .filterbox select,
#expenselist .filterbox input {
    border: 1px solid #e3e3e3;
    min-width: 100px;
    margin: 0 0 !important;
    height: 30px;
    padding: 0px 6px;
}
#expenselist .filterbox button {
    margin-left: 25px !important;
}

.filterbox #search-startdate,
.filterbox #search-enddate { width: 60px; }

.filterbox .fa-filter.active { color: #469fe5; font-size: 1.3em; }

#expenselist .check-outputed .checkbox_ui { cursor: pointer;}

#expenselist .search-date-box {
    display: inline-block;
}
#expenselist .search-date-box input,
#expenselist .search-date-box select {
    width: 70px !important;
    min-width: initial;
}

#expenselist .filterbox .switcher {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px !important;
}
#expenselist .filterbox .switcher div {
    background-color: #459fff;
    float: left;
    padding: 3px 10px;
    color: white;
    border: 1px solid #459fff;
    cursor: pointer;
}

#expenselist .filterbox .switcher div.active,
#expenselist .filterbox .switcher div:hover {
    background-color: white;
    color: #459fff;
}
#expenselist .filterbox .switcher div:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#expenselist .filterbox .switcher div:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#expenselist .filterbox .switcher,
#expenselist #search-category {
    margin: 0 10px;
}

#expenselist #search-category {
    max-width:200px;
}



.search_item input {
    height: 39px;
    padding: 0 10px;
    border-radius: 4px;
    border: none;
    border: 1px solid #ccc;
    width: 200px;
    margin-left: 20px;
}

#expenselist #search-text-btn {
    border-radius: 5px;
    height: 30px;
    margin-left: 5px;
}
.search_item {
    margin-left: 10px;
    float: left;
}
.search_item:first-child {
    /*margin-left: 0px;*/
    line-height: 2em;
}

/* -------------------- Assort -------------------- */
.expense-edit-table-assort-wrapper {
    float:left;
    margin-bottom: 20px;
}
.assort-total-input {
    width: 90%;
    border: none;
    text-align: right;
}
.assort-total-text {
    color: red;
    font-weight: bold;
}
.assort-summary {
    min-width: 94px !important;
    vertical-align: middle;
    word-wrap: normal;
    text-align: justify
}
.expense-edit-table-assort-wrapper table {
    border-collapse: collapse;
}
.expense-edit-table-assort-wrapper .assort_title td {
    padding-left: 5px;
    background-color: #E2EFFA;
    border: 1px solid #CCCCCC;
    font-weight: bold;
}
.expense-edit-table-assort-wrapper .assort-body td {
    text-align: center;
    border: 1px solid #CCCCCC;
}
.expense-edit-table-assort-wrapper .assort-body td:last-child {
    width: 0px;
    border-top: none;
    border-bottom: none;
}
.expense-edit-table-assort-wrapper .assort-body tr:first-child td:last-child {
    border-top: 1px solid #CCCCCC;
}
.expense-edit-table-assort-wrapper .assort-body tr:last-child td:last-child {
    border-bottom: 1px solid #CCCCCC !important;
}
.expense-edit-table-assort-wrapper input.ng-invalid,
.warning-cat input,
select.ng-invalid-unselect_taxtype,
.warning-cat .selectize-input,
form.ng-invalid-empty_row .assort_empty .account-amount {
    border: 1px dashed red;
}
.expense-edit-table-assort-wrapper .mrg-l-40 {
    margin-left: -40px;
}
.expense-edit-table-assort-wrapper .ss-wrapper {
    width: 100%;
}

/* -------------------- Report -------------------- */
#report-edit {
    display: none;
}

#report-edit {
    display: none;
}

#report-edit #report-edit-receipts-menu {
    display: none;
}
#report-edit.editable #report-edit-receipts-menu {
    display: block;
    margin: 16px 0;
    height: 40px;
}
#report-edit.editable #report-edit-receipts-menu ul {
    margin: 0;
    padding: 0;
}
#report-edit-receipts-filter-notice {
    float: left;
    width: 100%;
    margin: 10px 0;
    color: #348fe2;
    font-weight: bold;
}
#report-edit.editable #report-edit-receipts-menu li {
    list-style: none;
    float: left;
    margin-right: 10px;
}

#report-edit-receipts-menu-always {
    float: left;
}
#report-edit-receipts-menu-selected {
    float: left;
    padding-left: 10px;
    display: none;
}


#report-edit .last-update-date { font-size: 82%; }
#report-edit .report-title { width: 300px; }
#report-edit .mailto { width: 300px; }
#report-edit .username {}
#report-edit .comment { width: 300px; height: 100px; line-height: 1.2em; }

#report-edit-add-expense-modal {
    margin: 64px 70px 0 70px;
    padding: 20px 8px 20px 20px;
    background-color: rgb(250,250,250);
    border-radius: 4px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
#report-edit-add-expense-modal .modal_header {
    margin: -20px -10px 10px -20px;
    padding: 10px 24px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    color: #333;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    position: relative;
}
#report-edit-add-expense-modal .modal_control {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 8px;
}

#report-edit-add-expense-modal .modal_scrollarea {
    padding: 4px 8px;
    overflow: auto;
    margin-bottom: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
#report-edit-add-expense-exec {
    display: none;
    margin-left: 12px;
}
#close-report-edit-add-expense-modal, .close-overlay {
    position: absolute;
    top: 12px;
    right: 20px;
    cursor: pointer;
}

#report-export #tblExport { line-height: 2em; }
#report-export .control { margin: 5px 0; }
#report-export .from,
#report-export .end,
#report-export .filter { width: 120px; }
#report-export .title { width: 300px; }
#report-export-receipts { margin: 20px 0; }

hr {
    height: 1px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 0;
}


#card_grid .data-status {
    background-color: white;
}

.data-status.processing,
.bankbook .processing,
.bankbook-edit .processing {
    color: #fff;
}
.data-status.error,
.bankbook .error,
.bankbook-edit .error {
    color: #ff5b5b;
}

.bankbook-info {
    height: 81px !important;
}

#settings-contact {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 10
}
#settings-contact:hover {
    text-decoration: none;
}
#reportlist-tutorial {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tutorial-wrapper {
    border: 4px solid #56a6e5;
    border-radius: 8px;
    -moz-border-radius: 8px;
    background-color: #ffffff;
}
.tutorial-content {
    text-align: left;
    padding: 16px;
}
#create-can-report,
#create-cannot-report {
    display: none;
}

/* ------------------ Import CSV -------------- */
table.import_csv_table td {
    height: 10px !important;
}
table.import_csv_table .disabled-text {
    color: #CCCCCC;
}
.import-csv-error {
    margin-top: 25px;
    text-align: left !important;
}
.import-csv-warning {
    width: 600px;
    padding: 10px 40px;
    text-align: left !important;
}

/* -------------------------------------------- *
 *   Plan list
 * -------------------------------------------- */

#settings-contents table ul { padding-left: 20px; margin: 0; }
#settings-contents table { text-align: left; line-height: 1.5em; }
#settings-contents .package_middle { float: left; width: 500px; padding: 10px; }
#settings-contents .package_bottom { display: inline-block; }
#settings-contents .package_options { width: 675px; padding: 10px; border: 1px solid grey; margin-left: 20px; margin-bottom: 10px; background: #fff; }
#settings-contents .package_options .btn-plan-blue { width: 125px; float: right; }
#settings-contents .package_options:hover,
#settings-contents .package_options.active { background-color: #fdfeef;}

#settings-contents .package_shortname { font-weight: bold; font-size: 1.5em; }
#settings-contents .package_price { float: right; }
#settings-contents .small { font-size: 0.8em; }
#settings-contents .confirmation,
#settings-contents .payment { margin-left: 150px; border-radius: 5px; -moz-border-radius: 5px; padding: 0 20px; }
#settings-contents .payment { margin-left: 0; padding: 0 30px; }
#settings-contents .blue { color: #459fff; }
#settings-contents .iradio_flat-green { width:20px !important; padding: 0; float: left; margin: 6px 10px; }
#settings-contents .iradio_flat-green ~ label { float:left; }
#settings-contents .promotion-box { display: none; margin-left: 20px; float: left; width: 100%; }
#settings-contents .btn-open-promotion { color: #428bca; margin: 0 0 10px 20px; float: left; }
#settings-contents .btn-open-promotion:hover { text-decoration: underline; cursor: pointer }
#settings-contents .promotion-box input { width: 320px; margin: 0 10px 0 0px; }
#settings-contents .promotion-box .btn { width: 100px; }
#settings-contents .attention {
  color: magenta;
  font-weight: bold;
}

table.plan { width: 100%; }
table.plan td { padding: 5px; }
table.plan th { padding: 13px; text-align: left; }
table.plan .red-mark::after { content: "*"; color:red; }

table.plan td.bank-type .ss-wrapper { width: 245px; }

table.plan td.default {padding:0;}
table.plan td.default td.header{ padding-left: 20px; }
table.plan td.default td.title{ padding: 10px 0 0 0; vertical-align: top }
table.plan td.default .row1{ margin-top: 15px; }
table.plan td.default .row2{ margin-top: 5px; }

form#form-CC-input tr { vertical-align: top;}
form#form-CC-input label.error,
table label.error {
    display: block;
    margin: 5px 0;
    color: red;
}
form#form-CC-input #card_security_number {
    width: 104px;
}
form#form-CC-input .security_code_note {
    margin-left: 10px;
    position: absolute;
}

.toggleBtn .btn {
    margin:0;
}
.toggleBtn .btn:hover {
    background-color: #348fe2;
    color: white;
    border-color: #348fe2;
    cursor: default;
}
.toggleBtn .btn.off {
    border-radius: 0 10px 10px 0;
    margin-left: -5px;
}
.toggleBtn .btn.on {
    border-radius: 10px 0px 0px 10px;
}
.toggleBtn .btn.unactive,
.toggleBtn .btn.unactive:hover {
    background-color: #ccc;
    border-color: #ccc;
    color: #ACACAC;
}
.toggleBtn .btn.unactive:hover {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.inbuton.ui-autocomplete-loading {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: transparent;
}
#tbl-csv-format tr:nth-child(even),
#tbl-current-credit-card tr:nth-child(even) {
    background-color: rgb(234, 252, 255)
}

/* ---------------- Setting Usage ------------------ */
#tabs-usage .usage_table {
    margin: 10px 5px;
}
#tabs-usage .usage_table tr td {
    padding-right: 15px;
}

/* -------------------------------------------- *
 *   javascript
 * -------------------------------------------- */

.ui-datepicker {font-size: 16px;z-index:10000 !important;}
.ll-skin-nigran .ui-datepicker-header { font-size: 13px; }
.ll-skin-nigran .ui-datepicker .ui-datepicker-title { margin-top: 10px; margin-bottom: 8px; }
.ll-skin-nigran .ui-datepicker .ui-datepicker-prev-hover, .ll-skin-nigran .ui-datepicker .ui-datepicker-next-hover, .ll-skin-nigran .ui-datepicker .ui-datepicker-next, .ll-skin-nigran .ui-datepicker .ui-datepicker-prev { top: 14px; }
.ll-skin-nigran .ui-datepicker th { padding: .5em 0; }
.ui-datepicker-trigger {
    height: 35px;
    width: 35px;
    color: #555;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
}
.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:active
{
    background-color: #e3e3e3;
    border-color: #bbb;
}

.ui-datepicker-header .ui-icon
{
    width: 16px;
    height: 16px;
}

.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
    border: 1px solid #eee !important;
}

#noticeMessage {
    display: block;
    position: fixed;
    z-index: 9999;
    top: 61px;
    right: 10px;
    margin: 5px;
    padding: 15px;
    background-color: #333;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    font-size: 1.5em;
    color: #fff;
}

#tooltip {
    display: none;
    position: absolute;
    z-index: 9999;
    overflow: hidden;
    padding: 8px;
    border-radius: 3px;
    color: #FFF;
    font-size: 1.5em;
    background: #333;
    background: rgba(0,0,0,0.8);
}

#modal-edit-category {
    text-align: center;
}
#modal-edit-category input {
    width: 100%;
}

/**
 * jquery-ui autocomplete
**/
.ui-autocomplete-loading { background: url("../../img/ui-anim_basic_16x16.gif") white right center no-repeat; }
.ui-autocomplete, .selectize-dropdown-content { background: #fff !important; font-size: 1.4rem; border: 1px solid #459FFF !important; box-shadow: 0 1px 3px #459FFF !important;}

/**
 * jquery-ui sortable
**/
.category .ui-state-highlight { list-style-type: none; height: 48px; line-height: 48px; background: #459FFF !important; border: 1px solid #459FFF !important; box-shadow: 0 1px 3px #459FFF !important; }

/**
 * jquery-ui dialog
**/
.ui-dialog {
    background: #fff !important;
    font-size: 1.4rem;
    margin: 0;
}
.ui-dialog .ui-dialog-titlebar {
    margin-bottom: 5px;
}
.ui-dialog-titlebar {
    padding: 10px 0 0 10px;
    background: #eee;
    height: 30px;
    line-height: 30px;
    color: #252525;
    /*border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;*/
    border-radius: 0;
    border: none;
}
.ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.ui-dialog-titlebar-close span{
    display:none !important;
}
.ui-dialog-titlebar-close::after {
    content:"X" !important;
}
.ui-dialog .ui-dialog-buttonset {
    float: none !important;
    text-align: center;
}
.ui-dialog .ui-dialog-buttonset button {
    background: #dadada !important;
    border: solid 1px #999;
    padding: .4em 1em;
    margin-left: 20px;
    color: #252525;
    box-shadow: 0 0 1px #252525;
    font-weight: normal;
}
.ui-dialog .ui-dialog-buttonset button:hover {
    box-shadow: inset 0px 0px 6px grey;
}
.ui-dialog .ui-dialog-buttonset button.right {
    float:right;
}
.ui-dialog .ui-dialog-buttonset button.blue {
    background: #29a2d9 !important;
    border: solid 1px #29a2d9;
    color: #fff;
}
.ui-dialog .ui-dialog-buttonset button.red {
    background: #c75050 !important;
    border: solid 1px #c75050;
    color: #fff;
}
.ui-dialog .ui-dialog-buttonset button.green {
    background: #8fc31f !important;
    color: #fff;
}
.ui-dialog .ui-dialog-buttonset button.green:hover {
    background: #22ac38 !important;
}
.ui-dialog .ui-dialog-buttonset button.black {
    background: #595757 !important;
    color: #fff;
}
.ui-dialog .ui-dialog-buttonset button.black:hover {
    background: #898989 !important;
}

.alert-dialog .ui-dialog-titlebar {
    background-color: rgb(255, 42, 42);
    color: white;
    font-weight: bold;
}
.alert-dialog.blue .ui-dialog-titlebar {
    background-color: #2a72b5;
}

.confirm-dialog .ui-dialog-titlebar {
    background-color: #2a72b5;
    color: white;
    font-weight: bold;
}

.iviewer-container { width: 450px; position: relative; float: left; }
.viewer { width: 100%; height: 550px; position: relative; border: 1px solid #ccc; margin-top: 50px; }
.iviewer_common { top: 0px; z-index: 0; }
.iviewer_button {width:30px !important; height:30px !important; }
/* jquery.iviewer.cssを上書き */
.iviewer_zoom_in { left: 17px; }
.iviewer_zoom_out { left: 77px; }
.iviewer_zoom_zero { left: 137px; }
.iviewer_zoom_fit { left: 197px; }
.iviewer_zoom_status { left: 257px; }
.iviewer_rotate_left { left: 337px; }
.iviewer_rotate_right { left: 397px; }



/* -------------------------------------------- *
 *   javascript off
 * -------------------------------------------- */

#noscript, #unsupported-browsers {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
}

/* -------------------------------------------- *
 *   New version is available
 * -------------------------------------------- */

#new-version-released-message {
    display: none;
}
.new-version-released #new-version-released-message {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    background-color: #ff5b5b;
    color: #ffffff;
    font-size: 14px;
    z-index: 999;
}
.new-version-released #menu {
    top: 30px;
}
.new-version-released #page-header {
    top: 30px;
}
.new-version-released .page {
    margin-top: 80px;
}

/* -------------------------------------------- *
 *   Expense List Paginator
 * -------------------------------------------- */

.card_list_pager { margin-bottom: 10px; float: left; width: auto; margin-top: 10px}
.card_list_pager .number {
    float:left;
}
.card_list_pager .number span,
.card_list_pager .number select,
.card_list_pager .previous,
.card_list_pager .next {
    display: inline-block;
    padding: 4px 10px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor:pointer;
    float:left;
}
.card_list_pager .number select { height: 30px; border-radius: 0 !important; }
.card_list_pager .number span.cycle-pager-active,
.card_list_pager .number span:hover,
.card_list_pager .previous:hover,
.card_list_pager .next:hover {
    color: #fff;
    background-color: #ccd1d9;
    border-color: #ccd1d9;
}
.card_list_pager .select_page { color: black !important; }
.card_list_pager .number span.cycle-pager-active,
.card_list_pager .number select.cycle-pager-active {
    background-color: #469fe5;
    border-color: #469fe5;
}
.card_list_pager .number select.cycle-pager-active { color:white; }
.card_list_pager .previous.disabled,
.card_list_pager .next.disabled {
    color: grey;
    cursor: default;
}
.card_list_pager .select_page select {
    border: 0;
    padding: 7px;
    background-color: white;
    cursor: pointer;
}
/* -------------------------------------------- *
 *   Jquery UI Tas
 * -------------------------------------------- */
#settings #tabs {
    background-color:transparent
}
.ui-tabs .ui-tabs-nav li.ui-state-hover {
    background-color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    border:1px solid #ccc;
    border-bottom-color: transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #fcfcfc;
    margin-bottom: -1px;
}
.ui-tabs .ui-tabs-nav li a:focus,
.ll-skin-nigran .ui-widget {
    box-shadow: none;
}
.ll-skin-nigran .ui-dialog.ui-front {
    box-shadow: 0 0px 15px 0px #469fe5;
}
.ui-tabs .ui-tabs-panel {
    border-top: 1px solid #ccc;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #CCC;
    background: none;
    background-color: #fcfcfc !important;
}
/* -------------------------------------------- *
 *   Promotion
 * -------------------------------------------- */
.fa-gift.big {
    font-size: 1.5em;
}
.fa-gift.blue {
    color: #56a6e5;
}

/* -------------------------------------------- *
*   Effects
* -------------------------------------------- */
#tblClient .effect_client_row {
    background-color: #56a6e5;
}

/* Login page --------------------------------------------------------------- */
#login {
    background-color: white;
    height: 100%;
    width: 100%;
    position: absolute;
}
#login * {
    border-color: #dddddd;
}

#login #content { width: 90%; padding: 0; margin:auto; }
#login #content-left {float:left; width: 43%; margin-top: 70px; margin-left: 10%;}
#login #content-right {float:right; width: 45%; margin-top: 141px;}
#login #content p { text-align: center; line-height: 1.5; }
#login #content ul { width: 400px; margin: 30px auto; }
#login #content li { margin: 15px 0; }
#login #content li .promo { display: inline-block; margin: 0 8px; cursor: pointer; }
#login #content li #referrer_code { width: 50%; display: none; }
#login form { width: 90%; max-width: 500px; max-width: 400px; margin: auto; }
#login form input { width: 100%; margin: 7px 0; padding: 0px 6px; border-radius: 5px; box-sizing: border-box; font-size: 14px; }
#login #content input[type="text"] { color: #333333; border: solid 1px; }
#login #content button { color: #ffffff; cursor: pointer; letter-spacing: 1px; background-color: #2b96e3; border: none; margin: 15px auto; width: 100%; }
#login #btn-password-reminder,
#login .show-login-form { display: none; }

/* footer --------------------------------------------------------------- */
#login #footer {
    margin-top: 90px;
}
#login #footer #fnav {
    padding-bottom: 30px;
}
#login #footer #ptop {
    cursor: pointer;
    text-align: center;
    border-bottom: solid 1px;
    margin-bottom: 50px;
}
#login #footer #fnav {
    width: 960px;
    margin: 0px auto;
    padding-bottom: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#login #footer #fnav ul li {
    display: inline-block;
    margin: 10px;
}
#login #footer #fnav ul li a {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: black;
}
#login #footer #fnav .Funpage a {
    width: 150px;
    padding: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: #3d58a3;
    border-radius: 3px;
}
#login #footer #fnav ol li {
    display: inline-block;
    margin: 0px 10px 0px 10px;
}
#login #footer #fnav p {
    font-size: 10px;
    color: #aaaaaa;
    text-align: center;
    padding-top: 45px;
    background-image: url(../img/streamed.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}
#login #footer #fnav div.Twitter,
#login #footer #fnav div.Facebook,
#login #footer #fnav div.Funpage {
    width: 72px;
    height: 25px;
    display: inline-block;
}
#login #footer #fnav div.Twitter {width: 72px;}
#login #footer #fnav div.Facebook {width: 55px;}
#login #footer #fnav div.Funpage {width: 125px;}

#login #footer #fnav div.Twitter,
#login #footer #fnav div.Facebook{
    padding-top: 5px;
}
#login #footer .socialbox {
    margin: auto;
}
#login #footer #fnav ol {
    margin-bottom: 50px;
}
#login #footer #fnav {
    width: 90%;
    margin: 0px auto;
    padding-bottom: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#login #footer #ptop {
    text-align: center;
    border-bottom: solid 1px;
    margin: 50px 0;
}

#progress_bar {
    width: 0%;
    border: 0;
    border-top: 2px solid #0085FF;
    position: absolute;
    height: 0px;
    z-index: 100000;
    box-shadow: 0 0 3px 0px white;
    border-radius: 0 5px 5px 0;
}

#companies #pushobj {
    position: absolute;
    top: 0px;
    color: #fff;
    /*background: #243342;*/
    z-index: 1;
    color: black;
}

#companies #company-menu {
    font-family: inherit;
}

#companies .multilevelpushmenu_wrapper a {
    font-size: inherit;
}

#companies .multilevelpushmenu_wrapper h2 {
    font-size: 1.3em;
}

#companies .multilevelpushmenu_wrapper li.active {
    background-color: #295685;
}

#companies .multilevelpushmenu_wrapper .levelHolderClass {
    background-color: #348fe2;
}

/* CLIENT VIEW --------------------------------------------------------------- */
#client-homepage {
    max-width: 1415px;
}

#client-homepage .box {
    width: 310px;
    height: 276px;
    float:left;
    margin: 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 10px;
    line-height: 1.5em;
    background-color: white;
}
#client-homepage .box b { display: block; font-size: 1.5em; margin-bottom: 10px; font-weight: normal;}
#client-homepage .box .flaticon { font-size: 105px; line-height: 110px; color: #00a0e9; padding: 10px;}
#client-homepage .btn,
#client-homepage select {
    width: 150px;
}
#client-homepage select { background-color: #469fe5; color: white; }

#client-homepage a.box {
    color: #434a54;
    text-decoration: none;
    background-color: white;
}

#client-homepage a.box:hover {
    background-color: #d1e8ff;
}


/*END CLIENT VIEW*/



#body-content, .agl-body-content{display: block; top: 75px; position: relative; font-size: 1.4rem;}
#ui_temp_display {display: block; top: 0px; position: absolute; font-size: 1.4rem;}
#main-top-content { padding-top: 10px; top: 75px; width: 100%; z-index: 9; background-color: #FCFCFC; }

.learning-space { width: 285px; }
.receiptcard .transport .data .data-title
{ position: absolute; left: 5px; top: 0px; color: white; font-size: 11px; font-weight: bold; }
.grid .card-view .transport .data .data-body { margin-left: 80px; }

.grid.card-list { float: left; width: 100% }

.popup_control button { margin-left: 5px; }

.tutorial-wrapper { border: 4px solid #56a6e5; border-radius: 8px; padding: 30px; }
.tbl_data_list button { padding: 2px 12px; }
.tbl_data_list th { text-align: left; }
.tbl_data_list th.checkbox { text-align: center; }
.tbl_data_list td.data.number { text-align: right; }
.tbl_data_list td.data.warning, td.data.memo, td.data.image, td.data.report-name { text-align: center; }

.agl-body-content #action-expense-edit-common {
    display: block;
    position: relative;
    margin-left: 13px;
    width: 830px;
}

.agl-body-content .edit-expense-note-summary {
    line-height: 35px;
}

.agl-body-content .page-control {
    padding: 0px 16px 0px 16px;
    position: relative;
}

.agl-body-content .expense-edit-message {
    padding: 10px 0px 0px 28px;
}

.agl-body-content .expense-edit-table-wrapper,
.agl-body-content .expense-edit-table-assort-wrapper {
    padding: 16px 10px 0px 16px;
}

.agl-body-content #action-expense-edit-common {
    margin-left: 0px;
}

.agl-body-content #grid-modal-advance-filter #search-startdate{
    color: red;
}

.agl-body-content .grid-filterbox { float: left; margin-left: -30px; }
.agl-body-content .grid-filterbox .fa-filter.active {
    color: #469fe5;
    font-size: 1.3em;
}

.agl-body-content .grid-filterbox button,
.agl-body-content .grid-filterbox select,
.agl-body-content .grid-filterbox input {
    border: 1px solid #e3e3e3;
    min-width: 100px;
    height: 28px;
    padding: 0px 6px;
}
.agl-body-content .grid-filterbox button { margin: 0 0 0 10px; }

.agl-body-content #expense-edit-table .sub-cat-container{
    display: table-row;
}

#expense-edit-table .delete-expense { margin-top: 9px; }

#expense-transport-type .checkbox-inline { width: 100px; display: inline-block; }
#expense-transport-type .icon { display: block; float: left; width: 20px; padding-top: 3px; font-size: 2rem; }
#expense-transport-type .icheckbox_flat-green { float: left; top: 15px; }

#report-edit-menu { display: block; margin: 16px 0; height: 40px; }
#report-edit-menu li { list-style: none; float: left; margin-right: 10px; }

#grid-modal-advance-filter .amount-wrap { float: left; position: relative; }
#grid-modal-advance-filter .amount-wrap input { width: 110px; }
#grid-modal-advance-filter .sep-word { float:left; padding:10px; }

#btn-all-client.active { color: #fff; background: #469fe5; border-color: #469fe5; }
#client-homepage .upload-menu { background: #469fe5; border-color: #469fe5; color: #fff; }

/* SETTING CSV OUTPUT*/
.oitem { margin-top: 9px; margin-left: -10px; position: absolute; top: -12px; left: 10px;}
.oitem ul {
    list-style-type:none; style-type:none;
    position: absolute;
    z-index: 3000;
    width: 300px;
    padding: 0 !important;
    margin-top: 7px !important;
}
.oitem ul li { border: 1px solid #8DBBE6;border-bottom: none; padding: 5px; background-color: #fff; }
.oitem ul li:last-child { border-bottom: 1px solid #8DBBE6; }
.oitem ul li i { float: right;}
.oitem ul li:hover { background-color:#007ee9;}
.oitem ul li:hover > ul {
    left: 300px;
    width: 150px;
    display: block;
    margin-top: -27px !important;
    background-color: transparent;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
}
.oitem ul li > ul {
    position: absolute;
    display: none;
    min-width: 200px;
    z-index: -1;
    height: 100%;
    -webkit-transition: left 200ms ease-in;
    -moz-transition: left 200ms ease-in;
    -ms-transition: left 200ms ease-in;
    transition: left 200ms ease-in;
}
.oitem ul li > ul li { display: block !important; }
.oitem li.active { background-color:#007ee9;}

.has-error input { border-color: red; }
.has-error .selectize-input { border-color: red !important; }
.has-error::after { content: "!"; color: red; }
.has-error select {
    border-color: red;
    width: 95%;
}
select.ng-invalid-single_unselect_taxtype { border-color: red; }

.has-online-error input { border-color: red; }

.table-setting {padding: 0px;}
#output .block-input { width: 100%}
#output .block-input-order { width: 52% !important;}



.popover img {
    max-width: 100%;
    max-height: 100%;
}

.highlightOption {
    color: red;
}

.highlightOption option {
    color: black;
}

/********* BANKBOOK *************/

#bankbook-edit .page-contents { padding: 16px 0; float: left; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; }

.bankbook-create .bank_id,
.bankbook-create .cat,
.bankbook-create .subcat,
.bankbook-create .default_cat,
.bankbook-create .select-layout { width: 194px; max-width: 194px; }
.bankbook-create > table tr td:nth-child(2) { width: 200px; }

.bank_id .ss-item { margin-right: 0px !important; width: 180px !important; }
.bank_id .ss-item-romaji { display: none !important; }

.bankbook_preview { margin: 15px 0; }
.bankbook_preview i { font-size: 4em; float: left; margin-right: 10px; }

.bankbook-upload .bankbook { width: 250px; height: 337px; text-align: center; box-sizing: border-box; float: left; margin: 10px; background-color: white; box-shadow: 3px 3px 10px -1px #ccc; }

#js-preview-page-multi-bankbook.active { float: left; width: 100%; border-bottom: 1px dashed #ccc; padding-bottom: 20px; margin-bottom: 20px; }


.popup_control { float: left;border-left: 1px solid #ccc; padding-left: 8px; margin-left: 8px; margin-top: 10px}

.list .last_balance { float: right; padding: 0 9px; margin-right: 16px; display: none; }

.cant_verify_container { font-weight: bold; color: red; padding: 11px 16px; min-height: 30px;}
.cant_verify_container button {     height: 35px; padding: 2px 10px; margin-left: 10px}

.bankbook-edit-table .transaction {margin-top: 5px; }

.cashbook-user-list { width:450px; display:inline-block;}

.setting-industry .block-input .btn { min-width: 75px;}
.setting-industry .block-sort { width: 640px; }
.setting-industry .block-input { width: 640px; }
.setting-industry .block-input table { background-color: white; }
.setting-industry .block-input table tr { border-bottom: solid 1px #ccc; }
.setting-industry .block-input table tr.last,
.setting-industry .block-input table tr:last-child { border-bottom: none !important;}
.setting-industry .block-input table tr.select input { color: black; }
.setting-industry .block-input table th { border-right: solid 1px #ccc; padding: 10px; height: 20px; text-align: center; border-bottom: solid 1px #ccc;}
.setting-industry .block-input table td { border-right: solid 1px #ccc; height: 20px; vertical-align: middle !important;}
.setting-industry .block-input table td.group-name { font-weight: bold; }
.setting-industry .block-input table td .industry-code { padding-left: 30px !important;}
.setting-industry .block-input table th.last,
.setting-industry .block-input table td.last { border-right: none !important; padding: 5px; text-align: center; width: 150px;}
.setting-industry .block-input table td.last button { margin-right: 5px;}
.setting-industry .block-input table td.editing { padding: 13px 0 0 0px; width: 130px; }
.setting-industry .action { width: 640px; margin: 10px 0 20px 0; }
.setting-industry .action .btn { margin-right: 20px; }

.btn.btn-danger2 {
    color: #fff;
    background: #C75050;
    border-color: #C75050;
}

.preview-photo-multi .div-img-preview > button {visibility: hidden; position: absolute; top: 15px; left: 50%; margin-left: -35px; transition: top 0.1s ease;}
.preview-photo-multi .div-img-preview {display: inline-block; position: relative; overflow: overlay; }
.preview-photo-multi .div-img-preview:hover > img {opacity: 0.5; filter: alpha(opacity=40);}
.preview-photo-multi .div-img-preview:hover > button {visibility: visible; top: 23px;}
.preview-photo-multi .div-img-preview.upload_mode > img {opacity: 0.4; filter: alpha(opacity=40);}
.preview-photo-multi .div-img-preview.upload_mode:hover > button {visibility: hidden;}
.preview-photo-multi .div-img-preview.uploaded:hover > button {visibility: hidden;}
.preview-photo-multi .div-img-preview.uploaded:hover > img {opacity: 1; filter: alpha(opacity=100);}
.preview-photo-multi .div-img-preview.uploaded:hover > img.upload_error {opacity: 0.2; filter: alpha(opacity=20);}

.zoom-bar { width: 100%; height: 50px; background-color: #ccc; opacity: 0.6; position: absolute; z-index: 100;}
.zoom-viewer { float: left; width: 1200px; height: 100px; overflow: hidden; margin-top: 20px; margin-left: 20px; position: relative;}
.zoom-viewer-wrapper { width: 100%; position: absolute; left: 0px; top: 0;}
.zoom-viewer img { width: 100%; height: 200%; }

#action-invoice-grid-selected { margin-top: 25px; }

#storage_usage .page-contents { width: 800px; }
.percentage-bar { width: 500px; border: 1px solid #469fe5; }
.action input.control[type="text"] { height: 34px; }
.table-setting.aclist {width: 700px}
#table_ac_list {margin-left: 5px; width: 700px}
.highlight-text { color: blue}

.table_permission {clear: both; padding-top: 30px}
.table_permission table {margin-top: 10px;}
.table_permission table th {text-align: center;}
.table_permission table td {text-align: center; padding-top: 4px;}

table.clickable .scrolltbody { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; }

.image-popup { width: 26%; position: fixed; top: 50%; left: 50%; z-index: 11; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: white; padding: 10px; border-radius: 3px; border: 1px solid #CCCCCC; -webkit-box-shadow: 4px 3px 17px 1px rgba(0,0,0,0.36); -moz-box-shadow: 4px 3px 17px 1px rgba(0,0,0,0.36); box-shadow: 4px 3px 17px 1px rgba(0,0,0,0.36); }
.image-popup img { width: 100%; max-height: 690px; max-width: 800px; }
img.bankbook_upload_popover_image { width: auto !important; height: auto !important; max-height: 690px !important; max-width: 800px !important; }

.concur .title h2 { margin: 0; }
.concur .title img { top: 0; left: -20px; position: relative; }

#grid-top-menu .btn { padding: 3px 12px;}

.select-icon-circle {padding-top: 3px;}
.icon-cirle:before {cursor: pointer; content:'\3007';font-size: 2rem;}
.ui-grid-cell.row-selected  .icon-cirle:before {content:'\25C9';}

/************
 ** RECEIPT CARD LIST
 ************/

.receiptcard {
    background: #666;
}

.receiptcardlist {
    float: left;
    width: 100%;
}

.receiptcard.selected {
    box-shadow: 0 0 2px 2px #2678b7;
}
.receiptcard.selected:focus {
    box-shadow: 0 0 2px 2px #47b0ff;
}
.receiptcard:focus {
    box-shadow: 0px 0px 0 1px #459fff;
}

.receiptcard.highlight {
    border-left: 3px solid #459fff;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


.receiptcard .thumbnail {
    width: 100%;
    height: 274px;
    overflow: hidden;
    text-align: center;
    background: #EEE;
}
.receiptcard .thumbnail img {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.receiptcard .data-list {
    padding: 2px;
    position: relative;
    height: 35px;
}

.receiptcard .data-list .data {
    position: relative;
    font-size: 12px;
    display: inline-block;
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.receiptcard .data-list .data:last-child { border-bottom: none; }


.receiptcard a {text-decoration: none;}
.receiptcard:hover .card-control { display: block; }

.receiptcard .card-control { display: none; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; top: 0px; left: 0px; width: 100%; padding: 10px; text-align: center; }
.receiptcard:hover .card-control { display: block; }

.receiptcard .card-control .edit { background-color: #56a6e5; width: 92px; float: left; }
.receiptcard .card-control .copy { width: 92px; float: left; margin-top: 10px; }
.receiptcard .card-control .delete { width: 80px; float: right; }
.receiptcard.transport .data-list { height: 200px; }
.receiptcard.transport .data-list .data { display:block; height: 25px; }
.receiptcard.transport .space { height: 74px; border-top: 1px dotted #ccc; }
.receiptcard.transport .footer { border: none; }
.receiptcard .transport-type .icon { font-size: 2rem; padding-top: 3px; display: inline-block; }

.receiptcard .space { height: 74px; border-top: 1px dotted #ccc;}


.receiptcard .expense { color: #FFF; padding: 4px 2px; }
.receiptcard .expense .data.company-name { width: 170px; }
.receiptcard .expense .data.price { text-align: right;width: 88px; }
.receiptcard .expense .data.date { width: 80px; }
.receiptcard .expense .data.category { width: 80px; }
.receiptcard .expense .data.credit_category { width: 80px; }
.receiptcard .expense .data.memo { font-size: 10px; }

.receiptcard .transport { height: 200px; }
.receiptcard .transport .data { display: block; height: 25px; }
.receiptcard .transport .data .data-body { margin-left: 80px; color: white }

.receiptcard .card-control .delete {
    background-color: #c75050 !important;
    color: white !important;
    border: 1px solid #c75050 !important;
}

.exported-row > div {
    background-color: #f7f7f7 !important;
}

.unread-row > div {
    background-color: #feffde !important;
}

.btn:hover {
    text-decoration: none;
}


.ui-grid-cell input[type='text'], .ui-grid-cell select , .ui-grid-cell input[type='number'] {
    padding: 0px 8px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    background: #fff;
    height: 28px;
    width: 100%;
}
.ui-grid-cell input[type='text'][disabled], .ui-grid-cell select[disabled] , .ui-grid-cell input[type='number'][disabled] {
    color: #999;
    background: #eee;
}

.ui-grid-row-full {
    width: 100%;
    font-weight: bold;
    margin-top: 8px;
}
.ui-grid-cell-red {
    color: red;
}
.ui-grid-cell-contents .unexported-item-margin-left {
    margin-left: 3px;
}

/* Main menu */
.header-menu.left ul { margin: 0; padding: 0; }
.horizontal-menu li { list-style: none; }
.horizontal-menu li > a { padding: 0px 15px; text-decoration: none; display: list-item; }
.horizontal-menu .dropdown > ul { display: none; position: absolute; background-color: #469fe5; }
.horizontal-menu .dropdown.open > ul { display: block; }
.horizontal-menu .dropdown ul.hide {display: none !important; }
.horizontal-menu .dropdown-sub {position: relative;}
.horizontal-menu .dropdown-sub > ul { display: none; position: absolute; background-color: #469fe5; top: 0; left:100%; width: 100% }
.horizontal-menu .dropdown-sub.open > ul { display: block; }
.horizontal-menu .dropdown-sub ul.hide {display: none !important; }
.horizontal-menu li:hover { background-color: #61A8F0; }
.horizontal-menu li.active { background-color: #216AA4; }
.header-menu a i:before { font-style:normal; }
/* End main menu */

.learning-space { width: 285px; }
.learning-space-assort { width: 210px; }

.grid .grid{ float: left; width: 100% }

.grid.card-list { float: left; width: 100% }

.grid #action-invoice-grid-selected button.selected-delete,
.card .card-control .delete,
button.delete-expense,
button.selected-cancel {
    background-color: #c75050 !important;
    color: white !important;
    border: 1px solid #c75050 !important;
}


.popup_control button { margin-left: 5px; }

.btn.btn-danger2 { color: #fff; background: #C75050; border-color: #C75050; }

.tbl_data_list th { text-align: left; }
.tbl_data_list th.checkbox { text-align: center; }
.tbl_data_list td.data.warning, td.data.memo, td.data.report-name, td.data.image { text-align: center; }

#body-content .edit-expense-note-summary {
    line-height: 35px;
}

#body-content .expense-edit-message {
    padding: 10px 0px 0px 28px;
}

#body-content .expense-edit-table-wrapper {
    padding: 16px 10px 0px 16px;
}

#body-content #action-expense-edit-common {
    margin-left: 0px;
}

#body-content #grid-modal-advance-filter #search-startdate{
    color: red;
}

#body-content .grid-filterbox { float: left; margin-left: -30px; }
#body-content .grid-filterbox .fa-filter.active {
    color: #469fe5;
    font-size: 1.3em;
}

#body-content .grid-filterbox button,
#body-content .grid-filterbox select,
#body-content .grid-filterbox input {
    border: 1px solid #e3e3e3;
    min-width: 100px;
    height: 28px;
    padding: 0px 6px;
}
#body-content .grid-filterbox button { margin: 0 0 0 10px; }

#body-content #expense-edit-table .sub-cat-container{
    display: table-row;
}

#expense-edit-table .delete-expense { margin-top: 9px; }
#delete-transport { float: right; margin-top: 9px; margin-right: 115px; background-color: #c75050; color: white; border: 1px solid #c75050; }

#expense-transport-type .checkbox-inline { width: 100px; display: inline-block; }
#expense-transport-type .icon { display: block; float: left; width: 20px; padding-top: 3px; font-size: 2rem; }
#expense-transport-type .icheckbox_flat-green { float: left; top: 10px; }

#report-edit-menu { display: block; margin: 16px 0; height: 40px; }
#report-edit-menu li { list-style: none; float: left; margin-right: 10px; }

#grid-modal-advance-filter .amount-wrap { float: left; position: relative; }
#grid-modal-advance-filter .amount-wrap input { width: 110px; }
#grid-modal-advance-filter .sep-word { float:left; padding:10px; }
#grid-modal-advance-filter .fa.fa-yen {
    position:absolute;
    display: inline-block;
    height: 26px;
    padding: 0 8px;
    line-height: 26px;
    border-radius: 4px 0 0 4px;
    background: #e0f3ff;
    left: 1px;
    top: 1px;
}
.has-error input { border-color: red; }
.has-error::after { content: "!"; color: red; }

.table-setting {padding: 0px;}
#output .block-input { width: 100%}

/*BANKBOOK POPVER*/
.popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:1px;text-align:left;white-space:normal;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);background-clip:padding-box}
.popover.top{margin-top:-10px}
.popover.right{margin-left:10px}
.popover.bottom{margin-top:10px}
.popover.left{margin-left:-10px}
.popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}
.popover-content{padding:9px 14px}
.popover .arrow,
.popover .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}
.popover .arrow{border-width:11px}
.popover .arrow:after{border-width:10px;content:""}
.popover.top .arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);border-bottom-width:0}
.popover.top .arrow:after{bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0;content:" "}
.popover.right .arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,0.25);border-left-width:0}
.popover.right .arrow:after{bottom:-10px;left:1px;border-right-color:#fff;border-left-width:0;content:" "}
.popover.bottom .arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,0.25);border-top-width:0}
.popover.bottom .arrow:after{top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0;content:" "}
.popover.left .arrow{top:50%;right:-11px;margin-top:-11px;border-left-color:#999;border-left-color:rgba(0,0,0,0.25);border-right-width:0}
.popover.left .arrow:after{right:1px;bottom:-10px;border-left-color:#fff;border-right-width:0;content:" "}
.bankbook-upload .popover {
    /*max-width: none !important; */
    background-color:#fff;
    border-color: #ccc;
    box-shadow: 0px 0px 1px grey;
    /*  width: 600px;
      height: 400px;  */
}

.popover img {
    max-width: 100%;
    max-height: 100%;
}

.highlightOption {
    color: red;
}

.highlightOption option {
    color: black;
}

/********* BANKBOOK *************/
#main-body-content>#bankbook { width: 100%; padding: 0 16px; box-sizing: border-box; }

#reportlist-table .tbl_data_list td:last-child, #reportlist-table .tbl_data_list th:last-child { padding-right: 25px; }
#bankbook-table .tbl_data_list td:last-child, #bankbook-table .tbl_data_list th:last-child { padding-right: 25px; }
#bankbook-table td.hidden,
#bankbook-table th.hidden { display:none;}
#bankbook-table .no-wrap, #uploadlist_page .no-wrap { white-space: nowrap; }
#bankbook-table.image-on .hide-when-image-on { display: none }
#bankbook-table.image-off .hide-when-image-off { display: none }
#bankbook-table tr[data-is_income="0"] .income_outgo { color: orange }
#bankbook-table tr[data-is_income="0"] .amount { color: orange }
#bankbook-table tr[data-is_income="1"] .income_outgo { color: blue }
#bankbook-table tr[data-is_income="1"] .amount { color: blue }


.bankbook-upload .bankbook .lefttop { float:left; margin-bottom: 5px; }
.bankbook-upload .bankbook .righttop { float:right; margin-bottom: 5px; }
.bankbook-upload .bankbook img { max-width: 100%; max-height: 100%; }

.bankbook-upload .bankbook.bb_sample { background-color: transparent; box-shadow: none; }

.bankbook-edit { min-width: 1200px; }
.bankbook-edit .picture,
.bankbook-edit .detail { float: left; }

.bankbook-edit .picture { width: 60%; margin-top: 54px;}
.bankbook-edit .detail { width: 40%; max-width: 522px;  padding: 0px 35px 0 16px;   box-sizing: border-box;   -moz-box-sizing: border-box; }

.bankbook-paginator { padding-top: 35px;}

.bankbook .imagebox { height: 76%; border-bottom: 1px solid #ccc; line-height: 18em; }
.bankbook .infobox { height: 80px; }
.bankbook .infobox .text { line-height: 1.2em; height: 33px; padding: 4px 0; }

.bankbook.upload .list { padding-left:10px; }

.income, .outgo {width: 100%;}

.bankbook-bankbooklist .userbank_name { font-weight: bold; clear: both; padding-top: 15px; margin: 0; text-indent: 18px; height: 10px}
.bankbook-bankbooklist .card_list_pager { padding: 0px; width: auto; }
.bankbook-bankbooklist-pageview>div { float:left; margin-top: 18px; }
.bankbook-bankbooklist-listview>div { float:left; }
.bankbook-bankbooklist-pageview>.list { width: 864px; }
.bankbook-bankbooklist-listview>.list { width: 100%; margin-top: 10px;}

.cant_verify_container button {     height: 35px; padding: 2px 10px; margin-left: 10px}

#banklist-table .scrollable-content tbody tr { height: 70px; }
#banklist-table.notUploadlist tbody tr[data-status='1'] { cursor: default; }
#banklist-table .banklist_img , #uploadlist_page .banklist_img, #uploadlist_page-table .banklist_img { height: 50px; border: 1px solid #ccc; border-radius: 10px; padding: 2px; }
#bankbook-edit-table textarea,
#bankbook-multi-edit-table textarea { width:240px; height: 70px; }


.bankbook-edit-table { width: 100%; }
.bankbook-edit-table .amount-wrapper { float: left;margin-right: 10px;margin-top: 5px; }
.bankbook-edit-table .box { float: left;width:47%; text-align: center}
.bankbook-edit-table .box select { display: block; margin: auto; width: 90%;}
.bankbook-edit-table .income_outgo_category { vertical-align: bottom;}
.bankbook-edit-table #comment, .bankbook-edit-table #company, .bankbook-edit-table #note { width: 100% }

.bankbook-detail-top { float: left; }
.bankbook-detail-top p { float: left; }

#uploadlist_page { max-width: 1030px; width: 100%}


.warning-section { margin-bottom: 10px; }
.warning-section tr { height: 0px; line-height: 0px; }
.warning-text { line-height: 21px; padding-left: 10px; width: 82%;padding-bottom: 3px;padding-top: 3px;}
#expense-edit-table tr { height: 36px; line-height: 36px}
#expense-edit-table td.header {
    width: 155px;
}
#expense-edit-table td.amount {
    width: 110px;
}
#expense-edit-table tbody { width: 100%; }
#expense-edit-table th { padding: 0; width: 110px; }
#expense-edit-table td.debit-row,
#expense-edit-table td.credit-row
{
    padding: 0;
    margin: 0;
}
#expense-edit-table .delete-icon {
    width: 18px;
    padding-top: 50px;
}
#expense-edit-table div.debit-element,
#expense-edit-table div.credit-element
{
    width: 155px;
    max-width: 155px;
    display: inline-block;
    flex: 1 1 auto;
    padding: 2px;
}
#expense-edit-table div.debit-element.amount,
#expense-edit-table div.credit-element.amount {
    width: 115px;
    max-width: 115px;
}
#expense-edit-table div.debit-element.division,
#expense-edit-table div.credit-element.division
{
    max-width: 100%;
}
#expense-edit-table td.debit-credit-row div.debit-element,
#expense-edit-table td.debit-credit-row div.credit-element
{
    width: 100%;
    max-width: 100%;
    padding: 1px;
    text-align: center;
}
#expense-edit-table td.debit-credit-row div.debit-element:not(.has-error) select,
#expense-edit-table td.debit-credit-row div.credit-element:not(.has-error) select {
    width: 100%;
}
#expense-edit-table td.debit-credit-row {
    display: flex;
    width: 410px;

}
#expense-edit-table .debit-column,
#expense-edit-table .credit-column
{
    width: 50%;
    padding: 0;
    margin: 0;
}
#expense-edit-table .credit-column { margin-left: 10px; }
#expense-edit-table p {
    height: 38px;
    padding: 0;
    margin: 0;
}
#expense-edit-table div.debit-element.tax-type select,
#expense-edit-table div.credit-element.tax-type select {
    width: 155px;
}
#expense-edit-table div.debit-element.border-right,
#expense-edit-table div.credit-element.border-right
{
    border-right: 1px solid #cccccc;
}
.expense-edit-table-assort-wrapper #expense-edit-table .account-amount {
    width: 115px;
    padding-right: 4px;
}

.expense-edit-table-assort-wrapper .amount-wrapper {
    width: 115px;
    position: relative;
    line-height: 0;
}
.expense-edit-table-assort-wrapper .flaticon-money672 {
    padding: 0 4px;
}
.expense-edit-table-assort-wrapper input.number {
    text-indent: 6px;
}
#expense-edit-table tr.horizontal-focus td {padding: 5px;}
#expense-edit-table div.row1, div.row2 {
    width: 100%;
    height:50%;
    display: flex;
}
.expense-edit-table-assort-wrapper #expense-edit-table div.row1 { border-bottom: 1px solid #cccccc; }
.expense-edit-table-assort-wrapper #expense-edit-table .has-error select {
    border: 1px dashed red;
    width: 100%;
}
.expense-edit-table-assort-wrapper #expense-edit-table .has-error:after {
    content: none;
}
.expense-edit-table-assort-wrapper .keep-width {
    max-width: 115px;
    overflow-wrap: break-word;
}
#expense-edit-table .memo { width: 76%;}
#expense-edit-table .supplier { width: 100%;}
#expense-edit-table .has-error .supplier {width: 97%}
#expense-edit-table .has-error .amount-wrapper {display: inline-block;}
#expense-edit-table .has-error .ss-wrapper {border-color: red; width: 95% !important;}
#expense-edit-table .tr-liner {height: 0px}
#expense-edit-table #button_mode .fa.fa-graduation-cap { color: #469fe5; }

#modal-edit-multi .supplier { width: 100%;}
#modal-edit-multi .selectsearch_parent,
#modal-multi-edit .selectsearch_parent
{ width: 190px }


#modal-journal-search .table_container { overflow: auto; min-height: 300px}
#modal-journal-search .table_container .scrollable-content tr { cursor: pointer;}
#modal-journal-search .table_container .scrollable-content tr.active,
#modal-journal-search .table_container .scrollable-content tr:hover { background-color: #EFF7FF; }
#modal-journal-search .table_container #result_journal {padding: 10px 0 0 1px; margin-bottom: 10px}

.setting-extra .label-setting {margin-right: 35px; width: 125px; display: inline-block;}
.setting-extra .setting-csv-half-width { border-top: solid 1px #eee; margin-top: 20px; padding-top: 20px;}

#upload-receipt-block .span1 { margin-left: 15px; width: 200px}
#upload-receipt-block .span2 { margin-left: 10px; width: 200px}
#upload-receipt-block .asupplier { margin-left: 0px; margin-top: 9px;}
#upload-receipt-block .top-label {margin-bottom: 5px; text-align: center;}
#upload-receipt-block .btn-wapper {margin-top: 27px;}
#upload-receipt-block .group-item { margin-left: 15px;}
#upload-receipt-block .group-label { margin-left: 35px; margin-bottom: 5px; font-weight: bold; font-size: 1.6rem;}
#upload-receipt-block .span3 { margin-left: 10px;}
#upload-receipt-block .span4 { margin-left: 10px; margin-bottom: 15px;}
#upload-receipt-block .span4 .ss-wrapper { width: 197px;}
#upload-receipt-block .top-label2 { margin-top: 5px; margin-left: 15px;}
#upload-receipt-block .asupplier2 { margin-left: 0px; margin-top: 30px;}
#upload-receipt-block #invoice-upload-pictures-preview {clear: both;}
#upload-receipt-block .disabled_checkbox { background-color: #F7F7F7}
#upload-receipt-block .btn-wapper2 { margin-top: 53px; height: 125px;}
#upload-receipt-block .expense-category {min-width: 100px}
#tbl-setting-category div.updating-none {
  text-align:center;
  font-size:large;
  font-weight:bold;
  margin-top:100px;
}

#learning-setting-tab th {text-align: center;}
#learning-setting-tab th.large_col { width: 200px}
#learning-setting-tab th.small_col { width: 150px}
#learning-setting-tab .ct-btn-refresh { margin-bottom: 10px}
#learning-setting-tab .ct-btn-refresh button { margin-right: 10px}

#check-filter-table { padding:0; }
#check_filter .first-line {margin-bottom: 20px;}
#check_filter .label-setting {margin-right: 35px; width: 150px; display: inline-block;}
#check_filter .result-table {width: 500px; display: inline-block;}


.csvformat-info { position: relative; margin-top: 15px; }
.csvformat-info-des { display: inline-block;margin-left: 25px; position: absolute; }
.csvformat-info-title { margin-right: 6px; margin-bottom: 10px; }

.fa.warning_flag.dark-blue { color: #216AA4 ;}
.fa.warning_flag.orange, .warningicon.warning_flag.orange { color: #ff8100 ;}
.warningicon.warning_flag.wn-yellow {color: #F8B62D}

.ss-item { margin-right: 10px; width: 150px; display: inline-block; text-align: left;}
.ss-item-code { width: 70px; }
.ss-highlight {font-weight: bold; color: #c77405;}
.ss-input {font-size: 14px; width: 100%; padding-right: 23px;}
.ss-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; position: absolute; right: 10px; top: 49%; cursor: pointer; }
.ss-wrapper {display: inline-block; position: relative;}
.ss-ul          , .selectize-dropdown-content {z-index: 999; overflow: overlay; overflow: -moz-scrollbars-vertical; padding-right: 2px; position:fixed; padding-left: 0px !important;}
.ss-ul li       , .selectize-dropdown-content li { line-height: normal; }
.ss-ul li .focus, .selectize-dropdown-content .active { background: #4DA0F5 !important; color: white !important; }
.ss-over { display: block; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 998; }

.category_in_row {height: 26px}
.category_select {width: 100%; max-width: 100%}
#result_journal .scrollable-content { min-width: 100%}

#card_list {clear: both}

.viewer-image-wrapper {position: relative;}
.viewer-image-wrapper .appendSpin { position: absolute; left: 182px; top: 162px;}


#action-invoice-grid-selected { margin-top: 10px; }

#storage_usage .page-contents { width: 800px; }
.percentage-bar { width: 500px; border: 1px solid #469fe5; }

.table-setting.aclist {width: 700px}
#table_ac_list {margin-left: 5px; width: 700px}
.highlight-text { color: blue}

.table_permission {clear: both; padding-top: 30px}
.table_permission table {margin-top: 10px;}
.table_permission table th {text-align: center;}
.table_permission table td {text-align: center;}

span.fiscal-alert {
    margin-left: 10px;
    color: red;
    display: inline-block;
}
#popup-edit #popup-top { margin-bottom: 50px}
#popup-edit .page-control { padding-left: 0px }
#popup-edit .memo {width: 100%}
#popup-edit #js-preview-photo img {max-width: 630px}

.cb_learning {margin-top: 8px; margin-left: 10px; position: absolute;}

.scrollable-content td {
    overflow: hidden;
}
#banklist .bankbook_img_container {
    max-width: 130px;
    overflow: hidden;
}

.bankbook-upload .bankbook_img_container {
    max-width: 170px;
    overflow: hidden;
}

@-webkit-keyframes ngdialog-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ngdialog-fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes ngdialog-fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ngdialog-fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ngdialog,
.ngdialog *,
.ngdialog *:before,
.ngdialog *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ngdialog {
    position: fixed;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ngdialog-overlay {
    position: fixed;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadein 0.5s;
    animation: ngdialog-fadein 0.5s;
}

.ngdialog.ngdialog-closing .ngdialog-overlay {
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadeout 0.5s;
    animation: ngdialog-fadeout 0.5s;
}

.ngdialog-content {
    background: white;
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadein 0.5s;
    animation: ngdialog-fadein 0.5s;
}

.ngdialog.ngdialog-closing .ngdialog-content {
    -webkit-backface-visibility: hidden;
    -webkit-animation: ngdialog-fadeout 0.5s;
    animation: ngdialog-fadeout 0.5s;
}

.ngdialog-close:before {
    font-family: 'Helvetica', Arial, sans-serif;
    content: '\00D7';
    cursor: pointer;
}

body.ngdialog-open {
    overflow: hidden;
}

select.filter-dialog.control {
  width: 165px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-color.income {
    color: blue;
}

.text-color.outgo {
    color: orange;
}

.grid-row-70 .ui-grid-viewport .ui-grid-cell-contents {
    line-height: 50px;
}

#tbl-CC-input input {
    margin-top: 6px;
}

.ng-submitted .ng-invalid
{
    border: 1px solid #cc4946;
}

.validate-message,
.validate-message>label{
    display: none;
}

.validate-message:first-child {
    display: block;
}

.ng-submitted .validate-message {
    display: block;
}

.row-bold .ui-grid-cell-contents {
    font-weight: bold;
}

.ui-grid-row button.btn, .ui-grid-cell a.btn, .report_td a.btn {
    padding: 2px 12px;
    margin-right: 4px;
}


.gird-filterbox .amount-wrap { float: left; position: relative; }
.gird-filterbox .amount-wrap input { width: 110px; }
.gird-filterbox .sep-word { float:left; padding:10px; }
.grid-align-center {
    text-align: center;
}
.grid-align-right {
    text-align: right;
}

.grid_cell_icon {
    height: 100%;
    line-height: 28px;
}
.grid_cell_icon > * {
    display: inline-block;
}

.grid_cell_icon iconwarning .j-show-warning div {
    height: 100%;
    line-height: 20px;
}

.gird_cell_company {
    line-height: 28px;
}


.exported-row > div {
    background-color: #f7f7f7 !important;
}

.unread-row > div {
    background-color: #feffde !important;
}

.btn:hover {
    text-decoration: none;
}

.wrapper-loading {
    position: absolute;
    background-color: white;
    height: 100%;
    width: 100%;
    z-index: 9;
}
.wrapper-loading .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    overflow: hidden;
}


#tabs-general-free .edit-table.edit_group_top {
    border-top: 1px solid #cccccc;
}

#tabs-general-free .edit-table.edit_group_top:first {
    border-top: 0;
}

.horizontal-menu > li {
    float: left;
}
.header-menu.left a {
    color: white;
}
.control[disabled], .blue[disabled] {
    color: #999!important;
    background-color: #eee ! important;
}

.ngdialog-blue .ngdialog-content-hd {
    background-color: #2a72b5;
    color: white;
}

div[class^="flaticon-"] {
    display: inline-block;
}

.wn-yellow {
    color: #F8B62D;
    font-size: 18px;
}
.flaticon-unchecked2:before {
    font-size: 15px;
}

.flaticon-close3 {
    font-size: 11px;
}


.ui-sortable .row-cat i {
    font-size: 22px;
    color: #cccccc;
    margin-right: 5px ;
    margin-top: 5px;
}
.ss-arrow-sub {
    top: 35%;
}

.popover-content table td {
    line-height: 30px;
}

#invoice-grid-edit-info .amount {
    display: inline-block;
    height: 24px;
    padding: 0px 8px;
    margin-right: 5px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #459fff;
    border-radius: 15px;
    background-color: #ffffff;
}
.black-icon-666{
    color: #666666;
}
.black-icon-ccc{
    color: #cccccc;
}
.blue-icon-learning {
    color: #469fe5;
}
.col_1_4 i.fa{
    font-size: 15px;
}
.col_1_4 i.fa-picture-o{
    line-height: 27px;
}
.col_1_4 .flaticon-triangle38, .col_1_4 .flaticon-exclamation32{
    font-size: 16px;
}
.col_1_4 .flaticon-black{
    line-height: 27px;
}
.icon_tar_rate_reduced:before {cursor: pointer; content:'軽';font-size: 12px;}

.grid-top-menu .btn {
    padding: 3px 12px;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.flaticon-triangle38, .flaticon-exclamation32 {
    font-size: 18px;
    margin-right: 3px;
}

.flaticon-question58 {
    font-size: 12px;
}

.red {
    color: #E83828;
}

.yellow {
    color: #F8B62D;
}
.industry-row-padding-left .ui-grid-cell-contents {
    padding-left: 20px;
}

.reset-line-height {
    line-height: normal;
}

.fht-table-wrapper .icon24:before {
    font-size: 21px;
}

.icon24:before {
    font-size: 24px;
}
.text-cancel-bb-page  {
    color: #434a54;
    margin-left: 12px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block;
}

#popup-body {
    margin-top: -28px;
}

.warning_flag {
    line-height: 17px;
}

.report_item { margin-bottom: 10px; width: 70%; }
.report_lable { margin-right: 50px }
.report-title { width: 100%; }

#learning .ui-grid-viewport { overflow-x:auto !important; }

.panel_control { display: inline-block; margin-left: 10px;}
.panel_control ul { padding-top: 8px; }

.text13 {font-size: 13px}


/* FOR IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), screen\0 and (min-width:0) and (min-resolution: .001dpcm) {
    .ss-ul {z-index: 999; overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar;  padding-right: 2px; position:fixed; padding-left: 0px !important;}
    #tbl-add-cat input {width: 200px}
}

@media only screen and (max-width: 1100px) {
    #page-header #document-title { margin-top: 10px; margin-bottom: 10px; }
    .header-menu.right { top: 17px; }
    #body-content, .agl-body-content { top: 100px; }
}

/* TEAM SETTING INFO */
.select-search .ss-input {
    padding-right: 8px;
}

.upload_stt { padding: 18px; border: solid 1px #469fe5; }
.upload_stt .progress_bar { height: 6px; left: 0; margin-left: 0; bottom: 0; position: inherit; margin-top: 0;}
.upload_stt .progress_bar div { height: 4px; position: inherit;}

.progress_bar {
    height: 2px;
    border: 1px solid #bbb;
    background-color: #e5e5e5;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.2);
    box-shadow: inset 0 0 1px rgba(0,0,0,.2);
    width: 50%;
    position: absolute;
    bottom: 33%;
    margin-top: -4px;
    left: 50%;
    margin-left: -25%;
    text-align: left;
    background: #e1e1e1;
    vertical-align: top;
}

.progress_bar div {
    width: 64%;
    height: 2px;
    position: absolute;
    left: -1px;
    top: -1px;
    border: 1px solid #2175ff;
    background-color: #4d90fe;
    background: #2c75ec;
    transition: width 0.5s;
}
.img_name {
    width: 150px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    margin: auto;
    margin-top: -14px;
}
img.upload_success { border: solid 2px #2175ff; }
img.upload_error { border: solid 2px red; opacity: 0.2; }

/* AUTH USER */
#dialog_auth_user label {
    padding-left: 4px;
}

#dialog_auth_user label span {
    color: red;
    padding-left: 4px;
}

.ui-grid-header-cell-label {float: left}

/*Todo: Task#2032: History for team*/
/* HISTORY */
ul#history{
    list-style: none;
    border: 1px solid #ccc;
    margin: 0px;
    padding: 0px;
    border-bottom: none;
}
ul#history li{
    border-bottom: 1px solid #ccc;
    padding: 0px 2px 0px 4px;
    display: none;
}
ul#history li:first-child{
    display: list-item;
}
ul#history li:first-child, ul#history li:last-child {
    border: none;
}
ul#history li:nth-child(2) {
    border-top: 1px solid #ccc;
}
ul#history .title_item {
    float: left;
    width: 30%;
}
ul#history .content_item {
    margin-left: 30%;
    border-left: 1px solid #ccc;
    padding-left: 4px;
}
ul#history:last-child {
    border-bottom: 1px solid #ccc !important;
}

/* Timestamp Receipt*/
#expense-edit-image{
    position: relative;
}
.area-verify{
    position: absolute;
    bottom: 0;
    right: 0;
}
.area-verify i{
    font-size: 50px;
}

/* -------------------- Contact -------------------- */
.contact_form .required_contact {
    color: #fff;
    background: #ff6666;
    padding: 4px 6px;
    border-radius: 3px;
    margin-left: 4px;
}
.contact_form tr {
    vertical-align: top;
}
.contact_form .input_contact {
    width: 354px;
}
.contact_form td.confirm_inquiry {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: initial;
    padding: 12px 0px;
}
.contact_form td.confirm_attach {
    line-height: initial;
    padding: 6px 0px;
}
.contact_form .attach_file {
    border: 1px solid #cfcfcf;
    padding: 6px 4px 6px 28px;
}
.contact_form .attach_file i {
    padding-left: 6px;
    color: red;
}
table.confirm tbody tr {
    border-top: 1px solid #CCCCCC;
}

.table-category .fht-tbody td button.btn {
    padding: 2px 12px;
    margin-right: 4px;
}

.table-category .ui-grid-cell-contents {
    padding: 0px;
}

.table-category .fht-tbody input[type='text'], .table-category .fht-tbody select , .table-category .fht-tbody input[type='number'] {
    padding: 0px 8px;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    background: #fff;
    height: 28px;
    width: 100%;
}
.st-tab {
    border-bottom: 1px solid #ddd;
    padding-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

.st-tab:before, .st-tab:after {
    display: table;
    content: " ";
}

.st-tab:after {
    clear: both;
}

.st-tab li {
    position: relative;
    display: block;
    float: left;
    margin-bottom: -1px;
}

.st-tab li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    position: relative;
    display: block;
    padding: 6px 16px;
    text-decoration: none;
    color: #555;
}

.st-tab li.active>a {
    color: #469fe5;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.csv-setting {
    margin-bottom: 20px;
}

.csv-setting div {
    display: inline;
}

.csv-setting div.text-label {
    margin-right: 10px;
}

.csv-setting div.setting-box {
    margin-right: 10px;
}
.table-wapper {
    margin-top: 20px;
}
/* Hide icon in button all page*/
/*.ui-grid-canvas .btn i, table.fht-table .btn i{*/
    /*display: none;*/
/*}*/
.table-category .fht-tbody td button.btn{
    padding: 2px 6px;
}
.setting-category .block-input .btn{
    min-width: 40px;
}

.select_show_field{
    float: right;
}
.select_show_field .btn-group{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.select_show_field .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
.select_show_field .dropdown-menu>li{
    cursor: pointer;
}
.select_show_field .dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.select_show_field .dropdown-menu>li>a:hover{
    text-decoration: none;
}
.select_show_field .dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
.btn-hide-img{
    float: right;
    margin-left: 10px;
}
.area-img.hide{
    display: none;
}
.ct-btn-refresh .btn {
    margin-right: 10px;
}

.btn-small {
    padding: 2px 6px;
}

.well {
    margin: 20px 0px;
    border: solid 1px #ccc;
    padding: 10px;
    overflow: auto;
}

.well .item {
    margin: 0px 15px;
}

.well .item .item-title, .well .item .item-content {
    margin-bottom: 10px;
    overflow: auto;
}
.btn-order-number{
    margin-top: 8px;
    float: left;
    margin-left: 15px;
}
.area-order-number{
    float: left;
    margin-top: 0px;
    margin-left: 10px;
}
#icon-order-number{
    font-size: 18px;
    margin-top: 10px;
    margin-left: 10px;
}

.fa-spinner::before {
    content: url('../../img/loading.gif')
}

.table-dialog .cell-multi {
    padding: 0 !important;
}

.table-dialog .fht-table-wrapper .fht-tbody {
    overflow-x: hidden;
}

.table-dialog .categorycell .category-type {
    padding: 0px;
    height: 32px;
    display: inline-block;
    background-color: #e2effa;
    width: 25px;
    text-align: center;
    border-right: 1px solid rgb(204, 204, 204);
}

.table-dialog .categorycell .category-text {
    padding-left: 10px;
    display: inline-block;
    height: 21px;
    line-height: 31px;
    width: 121px;
}

.table-dialog .textcell {
    padding-left: 5px;
    padding-right: 5px;
}

.table-dialog .fht-table-wrapper .fht-table td.datecell span {
    margin-left: -6px;
    margin-right: -10px;
}

.table-dialog .fht-table-wrapper .fht-table td.multi_data div.cell-multi {
    height: 32px;
    line-height: 32px;
}

.table-dialog td .credit, table tr.odd {
    background: #f9f9f9;
}

.table-dialog td div.summarytext, .table-dialog td div.memotext {
    display: inline-block;
    width: 108px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 19px;
}

.table-dialog td .textellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}

.table-dialog td div.memotext {
    width: 120px;
}

/* Past journal dialog */
#ngDialogSidebarRight {
    position: absolute;
    top: 62px;
    right: 0px;
    box-shadow: 0 0px 15px 0px #469fe5;
    display: none;
    z-index: 1;
}
#ngDialogResizable > .ui-resizable-w {
    position: absolute;
    left: -1px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
}
#ngDialogResizable {
    height: 100%;
}
#ngDialogResizable > .ngdialog {
    position: static !important;
    margin-left : 2px;
    height: 100%;
}

#ngDialogResizable > .ngdialog > .ngdialog-content-wp {
    margin-left: 0 !important;
    position: static !important;
    box-shadow: 0 0px 15px 0px #469fe5;
    height: 100%;
}
#ngDialogResizable .ngdialog-content-btn-close {
    position: static;
    cursor: pointer;
}

.assort-directive .assort-division .ss-wrapper {
    width: 100%
}

.assort-directive .empty-value input {
    border: 1px dashed red !important;
}

.fht-table-wrapper.table-category.setting .fht-tbody tbody:hover,
.fht-table-wrapper.table-category.setting .fht-tbody tbody:hover tr.odd,
.fht-table-wrapper.table-category.setting .fht-tbody tbody:hover .single_credit {
    background: #EFF7FF;
}

.fht-table-wrapper.table-category.setting .fht-tbody .single_credit {
    background: #f0f0f0;
}
.col_1_4 {
    margin-right: 2px;
}
.col_1_4:last-child {
    margin-right: 0px;
}
.col_1_4{
    width: 18%;
    float: left;
    min-height: 1px;
}

.single-item {
    background: #f0f0f0;
}
.btn-edit-company{
    float: right;
    padding: 5px 10px;
    line-height: 15px;
    margin-right: -10px;
    position: absolute;
    right: 5px;
    top: 5px;
}
.btn-edit-company:hover{
    cursor: pointer;
}
#edit-company input{
    width: 300px;
}
tr[num_row="1"] .company_memo{
    padding-right: 20px !important;
    position: relative;
}
.multi_company_memo{
    padding-right: 20px !important;
    position: relative;
}
#login #header{
    max-width: 960px;
    width: 90%;
    margin: 0px auto 0px auto;
    position: relative;
    overflow: hidden;
    padding-top: 5px;
}
#login #header h1 {
    float: left;
}
#login ul, #login ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
#login #header ul {
    clear: none;
    float: right;
    margin-top: 30px;
}
#login #container {
    border-top: solid 1px;
    padding-top: 90px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#login #container h2 {
    color: #2b96e3;
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    letter-spacing: 2px;
}
.card_list_pager .number select {
  padding-top: 3px;
}

i.btnToggleGroupDetail {
    font-size: 20px;
    top: 3px;
    position: relative;
    cursor: pointer;
}

.setting_grid_tax_rate, 
.setting_grid_tax_rate div
{
    display: inline;
}
.setting_grid_tax_rate input {
    width: 60px !important;
}

.report_message_area {
    margin-left: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    height: 35px;
}

#btn_confirm_win_save_learn:disabled {
    background-color: white !important;
    box-shadow: none !important;
}

.menu-col-setting > ul > li {
    width: 150px;
}

.form_trans_detail thead td,
.form_trans_detail thead th {
    line-height: 1.5em;
    padding-bottom: 15px;
}
.form_trans_detail thead td button {
    margin-right: 10px;
}

.alert-danger .error_category_list {
    width: 550px;
    margin: 0 auto !important;
    text-align: left;
}
.alert-danger .error_category_list > ul {
    margin-top: 5px;
}
.alert-danger .error_category_list > ul > li {
    margin: 0 0 0 20px;
}

.condition_item_show_reported_data {
    line-height: 28px;
}

/* -------------------------------------------- *
 *   row legend
 * -------------------------------------------- */
 #row-color-example > ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
    height: 35px;
    text-align: center;
}

#row-color-example > ul > li {
    margin: 0 2px;
}

#row-color-example > ul > li.unread {
    width: 75px;
    border: solid #A6A1A1 3px;
    background-color: #FEFFBE;
}

#row-color-example > ul > li.alreadyRead {
    width: 75px;
    border: solid #A6A1A1 3px;
    background-color: white;
}

#row-color-example > ul > li.alreadyOutput {
    width: 75px;
    border: solid #A6A1A1 3px;
    background-color: #F7F7F7;
}

#row-color-example > ul > li.disabledClient {
    width: 90px;
    border: solid #A6A1A1 3px;
    background-color: #efefef;
}

.expense-edit-table-assort-wrapper .assort-body tr:first-child td,
.table-dialog td .credit, table .assort-body tr:first-child td {
    border-top-width: 4px;
}

.expense-edit-table-assort-wrapper .assort-body:nth-child(odd) tr {
    background-color: #f9f9f9;
}

.selectize-control input
{
    border: none;
}

.selectize-control {
    border: none !important;
}

.ss-selectize-wrapper {
    width: 100%;
}
#expense-edit-table .ss-selectize-wrapper {
    width: 194px;
}
#expense-edit-table .has-error .ss-selectize-wrapper {
    width: 184px !important;
}
.expense-edit-table-assort-wrapper .ss-selectize-wrapper {
    width: 100% !important;
}

#expense-edit-table .ss-selectize-wrapper .selectize-input.disabled input {
    opacity: 0.5 !important;
}

.selectize-control {
    padding: 0px !important;
}

.selectize-input
{
    text-align: left;
    vertical-align: middle;
    max-height: 30px;
}
.ss-input .selectize-input.disabled {
    opacity: inherit !important;
}

.ss-input .selectize-input .name {
    white-space: nowrap
}

.ss-input .selectize-input > div {
    vertical-align: middle;
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 85%;
}

.fht-table-wrapper .selectize-input {
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 28px;
    max-height: 28px;
    height: 28px;
    line-height: 28px;
}
.fht-table-wrapper .selectize-control {
    height: 28px;
}

.grid-filterbox select[name=category_id],
.grid-filterbox select[name=credit_category_id] {
    max-width: 150px;
}


.dialog_campaign_code > div {
    display: inline-block;
    margin: 5px;
}

.dl-confirm-w .ngdialog-content-wp {
    width: 500px !important;
}

input:focus,
#login input:focus,
.table-category .fht-tbody input[type='text']:focus,
select:focus,
#body-content .grid-filterbox select:focus,
.table-category .fht-tbody select:focus,
button:focus,
#login #content button:focus,
#body-content .grid-filterbox button:focus,
.ngdialog-content-wp .ngdialog-content-btn-panel button:focus,
.ngdialog-content-wp .ngdialog-content-btn-panel button.blue:focus,
.ui-grid-cell input[type='text']:focus,
textarea:focus,
a.btn:focus
{
    border: 1px solid #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-error .selectize-input.focus {
    border: 1px solid #66afe9 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

#error-report {
  max-height: 70px;
  overflow: auto;
  background-color: #ff5b57;
  color: #FCFCFC;
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
}

#error-report p {
  margin-top: 5px;
  margin-bottom: 5px;
}

#error-report a {
  display: inline-block;
  color: white;
  text-decoration: underline;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 3px;
  margin-right: 3px;
}