@font-face {
    font-family: 'itfaam';
    src: url('../fonts/font.eot');
    src: url('../fonts/font.eot#iefix') format('embedded-opentype'), 
         url('../fonts/font.woff') format('woff'), 
         url('../fonts/font.ttf') format('truetype'), 
         url('../fonts/font.svg#CartoGothicStdBook') format('svg');
    font-weight: normal !important;
    font-style: normal !important;
}

*:not(i) {
    font-family: itfaam !important;
    font-weight: normal !important;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*======================= GLOBAL =======================*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none !important; }
body { font-size: 13px; width: 100%; margin: 0; padding: 0; }
i { }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
a { text-decoration: none !important; }
ul { list-style: none; }
table, thead, tr { width: 100%; }
.phone { direction: ltr; text-align: center; letter-spacing: 10px; }
#itfaam-loading { background-color: rgba(0,0,0,0.3); text-align: center; display: none; padding-top: 45vh; font-size: 25px; text-shadow: 0 0 3px #000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 9999999999999999999999; }
#itfaam-loading p {  }
#itfaam-loading i { animation: rotating 2s linear infinite; font-size: 40px; }
#itfaam-loading-close { cursor: pointer; color: #fff; width: 100px; float: none; position: absolute; left: 0; right: 0; margin: auto; top: calc(45vh + 100px); }
.user-type-status i, .chat-item .info-name i { color: #ddd; font-size: 10px; font-weight: bold !important; margin-inline-end: 5px; }
.user-type-status i.active, .chat-item .info-name i.active { color: dodgerblue; }
.table-index, .table-index thead, .table-index tr { width: auto; }
.table-index button.sublink-in-list { background-color: transparent; border: none; padding: 0; color: dodgerblue; }
.table-index td.sublist { cursor: pointer; }
.table-index td.sublist i.sublist-icon { position: relative; margin-inline-end: 5px; font-size: 15px; top: 2px; }
.table-index td.sublist span.sublist-count {  }
.table-index td.sublist ul.sublist-box { cursor: auto; font-size: 13px; position: absolute; z-index: 8; background-color: #f5f5f5; padding: 0; margin: 0; border: 1px solid; border-color: #ccc; top: 21px; display: none; right: -1px; box-shadow: 0 0 15px -8px rgba(0,0,0,0.8); }
.table-index td.sublist ul.sublist-box li { padding: 10px 5px 10px 60px; border-bottom: 1px dashed #ccc; position: relative; }
.table-index td.sublist ul.sublist-box li:last-child { border-bottom: none; }
.table-index td.sublist ul.sublist-box li:hover { background-color: dodgerblue; color: #fff; }
.table-index td.sublist ul.sublist-box li a {  }
.table-index td.sublist ul.sublist-box li i { position: absolute; top: 7px; font-size: 20px; cursor: pointer; }
.table-index td.sublist ul.sublist-box li i:hover { color: yellow; text-shadow: 0 0 3px #000; }
.table-index td.sublist ul.sublist-box li i.decrease { left: 5px; }
.table-index td.sublist ul.sublist-box li i.increase { left: 35px; }
.table-index td.sublist.active { overflow: visible !important; }
.table-index td.sublist.active ul.sublist-box { display: block; }
.table-index td.datetime, .table-index td.date { min-width: 120px; direction: ltr; text-align: center; }
.table-index td.id, .table-index th.ID, .table-index th.ID .resize-column { min-width: 60px; max-width: 60px; }
.table-index td.image { text-align: center; }
.table-index td.image img { height: 25px; border-radius: 4px; }
.table-index td.image.profile-image img { border-radius: 100px; }
.table-index td.title.has-slug { padding-bottom: 20px; line-height: 20px; }
.table-index td.title .slug { display: inline-block; width: 100%; position: absolute; font-size: 10px; color: #ccc; right: 5px; bottom: 5px; height: 15px; line-height: 15px; overflow: hidden; }
.table-index tr[data-active="False"] td { background-color: #f5f5f5; color: #aaa; }
.hidden-required { position: absolute; opacity: 0 !important; width: 0 !important; float: right !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.table-data th { position: relative; }
.table-data th.required::after, table.diet th.required::after { content: "( * )"; position: absolute; left: 10px; font-size: 13px; color: red; font-weight: bold; line-height: 17px; padding: 3px 0 0; }
.clear-date-input, .clear-select-input { cursor: no-drop; margin-inline-start: 15px; font-size: 15; font-size: 20px; position: relative; top: 5px; /*float: right;*/ }
/*.table-data td input { float: right; }*/
.unread-count { position: absolute; top: 10px; left: 10px; background-color: #f4f4f4; color: #555 !important; width: 20px !important; height: 20px; border-radius: 100px; text-align: center !important; line-height: 24px; padding: 0 !important; font-size: 11px !important; }
.unread-count#unread-chat { top: -8px; left: -8px; }
.unread-count.active { background-color: orange;  }
.content-section input[type="text"], .content-section textarea { min-width: 50%; max-width: 100%; min-height: 35px; line-height: 35px; }

/*======================= LTR =======================*/
.ltr .content-section {
    direction: ltr;
    text-align: left;
}
.ltr .content-section th {
    text-align: left;
}
.ltr .content-section th::after {
    left: auto;
    right: 10px;
}
.ltr .content-section .dropdown {
    float: left;
}
.ltr .content-section .dropbtn {
    padding-inline-start: 30px;
    padding-inline-end: 10px;
}
.ltr .content-section .classified-contents-item .classified-content-image-box > i {
    float: left;
}
.ltr .content-section .classified-contents-remove-item {
    left: auto;
    right: 10px;
}
.ltr .content-section .classified-contents-item {
    float: left;
}
.ltr .content-section .classified-contents-add-item {
    margin-right: 0;
    margin-left: 10px;
}
.ltr .content-section .direction-float {
    float: left;
}
/*======================= RTL =======================*/
.direction-float {
    float: right;
}
body {
    direction: rtl;
}
body {
    text-align: right;
}
.itfaam-sidebar {
    float: right;
}
.itfaam-body {
    float: right;
}
.itfaam-body .body-footer p {
    float: right;
}
.itfaam-body .body-footer p.footer-right {
    text-align: right;
}
.itfaam-body .body-footer p.footer-left {
    text-align: left;
}
.content-top .breadcrumb-item {
    float: right;
}
.content-top .action-item {
    float: left;
}
.itfaam-body .body-header > ul > li.header-profile {
    float: right;
}
.itfaam-body .body-header > ul > li.header-tools {
    float: left;
}
.fixbox {
    left: 60px;
}
.fixbox-control {
    direction: ltr;
    text-align: left;
}
.fixbox-control .get-list {
    position: absolute;
    right: 49%;
}
.fixbox-control .add-to-list {
    position: absolute;
    right: 60%;
    color: #000;
}
.fixbox-control p {
    right: 10px;
}
.fixbox-fullscreen {
    left: 60px !important;
}
.fixbox-action {
    text-align: right;
}
.fixbox-action button {
    float: left;
}
ul.index-footer .list-count {
    float: right;
}
ul.index-footer .pagenation {
    
}
ul.index-footer .go-to {
    float: left;
}
ul.index-footer .go-to label {
    float: right;
}
ul.index-footer .go-to a {
    float: left;
}
.body-content .login-box label span {
    text-align: left;
}
.range-selector i {
    cursor: pointer;
}

/*======================= COLORS =======================*/
body {
    background-color: #eee;
}
.itfaam-toolbar {
    background-color: #fff;
    border-color: #ccc !important;
}
.itfaam-sidebar {
    background-color: #fff;
    border-color: #ccc !important;
}
.itfaam-body .body-header {
    background-color: #fff;
    border-color: #ccc !important;
}
.content-top .action-add {
    background-color: #888;
    color: #fff;
}
.content-top .action-item {
    color: #000;
}
.table-index .action-box {
    background-color: #fff;
    border-color: #ccc !important;
}
.table-index .table-index-action i {
    color: #fff;
    background-color: #888;
}
.table-index tr {
    background-color: #fff;
}
.table-index td {
    border-color: #ccc !important;
}
.table-index th {
    border-color: #bbb !important;
    background-color: #e0e0e0;
}
.table-index .action-box li a,
.table-index .action-box li button {
    border-color: #ccc !important;
}
.itfaam-body .body-content .table-data tr {
    background-color: #fff;
}
.itfaam-body .body-content .table-data th,
.itfaam-body .body-content .table-data td {
    padding: 5px;
    border: 1px solid;
    border-color: #ccc !important;
}
.sidebar-items > li > form > button {
    background-color: #fff;
}
.sidebar-items > li > span, .sidebar-items > li > form > button,
.sidebar-items > li > ul > li > span, .sidebar-items > li > ul > li > form > button {
    border-color: #ccc !important;
    color: #000;
    text-align: right;
}
.sidebar-items > li > ul > li > span, .sidebar-items > li > ul > li > form > button {
    background-color: #f0f0f0;
}
.sidebar-items .logo-box {
    border-color: #ccc !important;
}
.itfaam-body .body-header > ul > li.header-profile img {
    border-color: #ccc !important;
}
.itfaam-body .body-header > ul > li.header-profile > div {
    border-color: #ccc !important;
}
.itfaam-body .body-header > ul > li.header-profile > div::after {
    color: #ccc;
}
.itfaam-body .body-header > ul > li > ul {
    background-color: #fff;
    border-color: #ccc !important;
}
.itfaam-body .body-header > ul > li > ul > li {
    border-color: #ccc !important;
}
.itfaam-body .body-header > ul > li > ul > li a {
    color: #000;
}
.content-top {
    background-color: #ddd;
    color: #000;
}
.fixbox {
    border-color: #999 !important;
    background-color: #fff;
}
.fixbox-control {
    background-color: #ccc;
}
.fixbox-action button {
    background-color: #eee;
    border-color: #ccc !important;
}
#fixbox-quick-add-customer label input {
    border-color: #ccc !important;
}
#itfaam-loading {
    color: yellow;
}
.table-index .row-action .action-box li a,
.table-index .row-action .action-box li button {
    color: #000;
}
ul.index-footer .go-to a,
ul.index-footer .pagenation a {
    background-color: #fff;
    border-color: #ccc !important;
    color: #000;
}
ul.index-footer .pagenation a.active {
    background-color: #000;
    color: #fff;
    cursor: not-allowed;
}
ul.index-footer .go-to input {
    border-color: #ccc !important;
    background-color: #fff;
}
ul.index-footer .list-count select {
    border-color: #ccc !important;
    background-color: #fff;
}
.table-index thead .filter-box th span.sortable.active_asc::before, 
.table-index thead .filter-box th span.sortable.active_desc::after {
    color: #666;
}
.table-index thead .filter-box th .filterable,
.table-index thead .filter-box th input {
    background-color: transparent;
    border-color: #ccc !important;
}
.body-content .login-box {
    background-color: #fff;
    border-color: #ccc !important;
}
.body-content .login-box h2 {
    background-color: #e0e0e0;
}
.body-content .login-box label input {
    border-color: #ccc !important;
    background-color: #fff;
}
.body-content .login-box button {
    background-color: #eee;
    border-color: #ccc !important;
}
.table-index tr.active td,
.table-index tr.active .row-action .action-tools,
.table-index tr.active .row-action .action-box {
    background-color: aquamarine;
    color: #000;
}
.table-index tr:hover td,
.table-index tr:hover .row-action .action-tools {
    background-color: aqua;
}
.table-index tr {
    cursor: pointer;
}

/*======================= PANEL SIDE BAR =======================*/
.itfaam-sidebar {
    width: 250px;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    min-height: 100vh;
    top: 0;
    right: 0;
    border-inline-end: 1px solid;
    border-bottom: 1px solid;
    border-color: #ccc !important;
}
.itfaam-sidebar.fixed-bottom {
    position: fixed;
    bottom: 0;
    top: auto;
}
.sidebar-items {
    padding: 0;
    margin: 0;
}
.sidebar-items .logo-box {
    height: 50px;
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid;
}
.sidebar-items .logo-box img {
    height: 100%;
    width: auto;
}
.sidebar-items li {
    position: relative;
    cursor: pointer;
}
.sidebar-items > li.active,
.sidebar-items > li.force-active {
    background-color: #ddd
}
.sidebar-items > li > span,
.sidebar-items > li > ul > li > span,
.sidebar-items > li > form > button,
.sidebar-items > li > ul > li > form > button {
    width: 100%;
    display: inline-block;
    padding: 10px;
    border-width: 0 0 1px 0;
    cursor: pointer;
    padding-inline-start: 60px;
}
.sidebar-items > li > span,
.sidebar-items > li > ul > li > span,
.sidebar-items > li > form > button,
.sidebar-items > li > ul > li > form > button {
    border-style: solid;
}
.sidebar-items > li > ul > li > span,
.sidebar-items > li > ul > li > form > button {
    border-style: dashed;
}
.sidebar-items li i {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    border-inline-end: 1px solid;
    height: 100%;
    width: 50px;
    border-color: #ccc !important;
    padding: 10px;
    text-align: center;
}
.sidebar-items > li > ul {
    padding: 0;
    border-inline-start: 50px solid;
    border-color: #ddd !important;
    height: 0;
    overflow: hidden;
}
.sidebar-items > li.force-active > ul {
    border-color: dodgerblue !important;
}
.sidebar-items > li.active > ul {
    height: auto;
    overflow: visible;
}
.sidebar-items > li.force-active > ul {
    height: auto !important;
    overflow: visible;
}
.sidebar-items > li > ul > li.force-active button,
.sidebar-items > li > ul > li.force-active i {
    background-color: dodgerblue !important;
    color: #fff !important;
}

.itfaam-panel.collapse-sidebar .itfaam-sidebar {
    width: 50px;
    z-index: 9999;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .logo-image,
.itfaam-sidebar .logo-image-collapse {
    display: none;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .logo-image-collapse {
    display: inline-block !important;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > span,
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > ul > li > span,
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > form > button > span,
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > ul > li > form > button > span {
    display: none;
    position: absolute;
    right: 49px;
    width: 150px;
    height: 41px;
    background-color: #fff;
    z-index: 9999;
    line-height: 40px;
    text-align: center;
    border-radius: 100px 0 0 100px;
    border: 1px solid;
    border-color: #ccc !important;
    top: 0;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > ul > li > form > button > span {
    right: 39px;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items li i:hover + span {
    display: inline-block;
    color: #000 !important;
}
.itfaam-panel.collapse-sidebar .sidebar-items > li > span, .sidebar-items > li > ul > li > span, 
.itfaam-panel.collapse-sidebar .sidebar-items > li > form > button, .sidebar-items > li > ul > li > form > button {

}
.itfaam-panel.collapse-sidebar .sidebar-items > li > span, 
.itfaam-panel.collapse-sidebar .sidebar-items > li > ul > li > span, 
.itfaam-panel.collapse-sidebar .sidebar-items > li > form > button, 
.itfaam-panel.collapse-sidebar .sidebar-items > li > ul > li > form > button {
    padding: 0;
    padding-inline-start: 0;
    border: none;
}
.itfaam-panel.collapse-sidebar .sidebar-items > li > ul > li > form > button > i {
    width: 39px;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li {
    
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items > li > ul {
    border-inline-start: 10px solid;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items li i {
    position: relative;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #ccc !important;
}
.itfaam-panel.collapse-sidebar .itfaam-sidebar .sidebar-items li ul li i {
    background-color: #f0f0f0;
    border-style: dashed;
}

/*======================= PANEL TOOL BAR =======================*/
.itfaam-toolbar {
    width: 50px;
    display: inline-block;
    border-inline-start: 1px solid;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
}
.itfaam-toolbar ul.toolbar-top {
    top: 0;
}
.itfaam-toolbar ul.toolbar-bottom {
    bottom: 0;
}
.itfaam-toolbar ul.toolbar-top,
.itfaam-toolbar ul.toolbar-bottom {
    padding: 0;
    margin: 0;
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
}
.itfaam-toolbar ul.toolbar-top > li, 
.itfaam-toolbar ul.toolbar-bottom > li {
    position: relative;
    padding: 3px 0;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
    border-radius: 4px;
    color: #000;
    margin: 10px;
    border-color: #ccc;
}
.itfaam-toolbar ul.toolbar-top > li i, 
.itfaam-toolbar ul.toolbar-bottom > li i {
    font-size: 20px;
}
.itfaam-toolbar ul.toolbar-top > li a, 
.itfaam-toolbar ul.toolbar-bottom > li a,
.itfaam-toolbar ul.toolbar-bottom > li button {
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #000;
}
.itfaam-toolbar ul.toolbar-bottom > li form, 
.itfaam-toolbar ul.toolbar-bottom > li button {
    height: 100%;
    padding: 0;
    background: none;
    border: none;
}
.toolbar-top li.active {
    background-color: #ccc;
}

/*======================= PANEL TOP BAR =======================*/
.itfaam-body .body-header {
    height: 50px;
    width: calc(100% - 300px);
    border-bottom: 1px solid;
    position: fixed;
    top: 0;
    left: 50px;
    z-index: 999;
}
.itfaam-panel.collapse-sidebar .itfaam-body .body-header {
    width: calc(100% - 100px);
}
.itfaam-body .body-header > ul {
    margin: 0;
    display: inline-block;
    width: 100%;
    height: 50px;
    padding: 10px;
    position: relative;
}
.itfaam-body .body-header > ul > li {
    display: inline-block;
}
.itfaam-body .body-header > ul > li > ul {
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
    top: 40px;
    border: 1px solid;
    border-top: none;
    z-index: 9;
    overflow: hidden;
    height: 0;
}
.itfaam-body .body-header > ul > li.active > ul {
    height: auto;
}
.itfaam-body .body-header > ul > li > ul > li {
    padding: 10px;
    border-bottom: 1px dashed;
}
.itfaam-body .body-header > ul > li > ul > li.full-name {
    display: none;
}
.itfaam-body .body-header > ul > li > ul > li:last-child {
    border-bottom: none;
}
.itfaam-body .body-header > ul > li > ul > li a {
    width: 100%;
    display: inline-block;
}
.itfaam-body .body-header > ul > li > ul > li a i {
    margin-inline-end: 5px;
}
.itfaam-body .body-header > ul > li.navbar-collapse {
    float: right;
    font-size: 25px;
    height: 30px;
    line-height: 30px;
    padding-inline-start: 5px;
    cursor: pointer;
}
.itfaam-body .body-header > ul > li.navbar-collapse i {
    position: relative;
    top: 3px;
}
.itfaam-body .body-header > ul > li.header-profile {
    height: 30px;
    position: relative;
    cursor: pointer;
    padding-inline-start: 55px;
    padding-inline-end: 5px;
}
.itfaam-body .body-header > ul > li.header-profile img {
    height: 40px;
    width: 40px;
    position: absolute;
    right: 5px;
    top: -5px;
    border-radius: 100%;
    border: 1px solid;
    overflow: hidden;
}
.itfaam-body .body-header > ul > li.header-profile > div {
    border-bottom: 1px solid;
    position: relative;
    text-align: center;
    display: inline-block;
    padding-bottom: 3px;
}
.itfaam-body .body-header > ul > li.header-profile > div::after {
    content: ' \25BC';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
}
.itfaam-body .body-header > ul > li.header-tools {
    height: 30px;
    width: 30px;
    text-align: center;
    cursor: pointer;
}
.itfaam-body .body-header > ul > li.header-tools i {
    font-size: 25px;
}

/*======================= PANEL FOOTER =======================*/
.itfaam-body .body-footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 15px 10px;
}
.itfaam-body .body-footer p {
    display: inline-block;
    margin: 0;
    width: 50%;
}

/*======================= PANEL BODY =======================*/
.itfaam-body {
    width: calc(100% - 300px);
    display: inline-block;
    position: relative;
    height: 100%;
    top: 0;
    bottom: 0;
    min-height: 100vh;
    padding-bottom: 50px;
    right: 250px;
}
.itfaam-panel.collapse-sidebar .itfaam-body {
    width: calc(100% - 100px);
    right: 50px;
}

/*======================= PANEL BODY CONTENT =======================*/
.itfaam-body .body-content {
    padding: 10px;
    position: relative;
}
.content-top {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 50px 0 5px;
    height: 35px;
    padding: 5px;
    border-radius: 4px;
}
.fixbox-body .content-top {
    margin-top: 0;
    border-radius: 0;
}
.content-top .breadcrumb-item {
    font-size: 15px;
    margin-inline-end: 10px;
    padding-inline-end: 15px;
    position: relative;
    padding-top: 1px;
    padding-bottom: 1px;
}
.content-top .breadcrumb-item button {
    border-style: dashed;
    background-color: rgba(0,0,0,0);
    border-width: 0 0 1px 0;
    color: darkviolet;
}
.content-top .breadcrumb-item::after {
    content: " \203A";
    position: absolute;
    left: 0;
    top: 2px;
}
.content-top .breadcrumb-item.last-child::after {
    content: "" !important;
}
.content-top .action-item {
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 4px;
    margin-inline-start: 15px;
    font-size: 20px;
    padding: 2px;
    cursor: pointer;
}
.content-top .action-item form {
    width: 100%;
    height: 100%;
}
.content-top .action-item form button {
    background-color: rgba(0,0,0,0);
    border: none;
    width: 100%;
    height: 100%;
    padding: 0;
}
.content-top .action-item i {
    font-size: 20px;
}
.content-top .action-add {
    padding: 1px;
    border: none;
    color: #fff;
    text-shadow: 0 0 3px #000;
}
.content-top .action-add i {
    font-size: 17px;
}

/*======================= PANEL BODY CONTENT INDEX =======================*/
.table-index-box {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 100vh;
    margin-bottom: -100vh;
}
.table-index-box-scroll {
    height: 20px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
.table-index-box-scroll.fixed {
    height: 20px;
    width: calc(100% - 320px);
    overflow-x: auto;
    overflow-y: hidden;
    position: fixed;
    bottom: 0;
    left: 60px;
    z-index: 9;
}
.itfaam-panel.collapse-sidebar .table-index-box-scroll.fixed {
    width: calc(100% - 120px);
}
.table-index-box-scroll > div {
    height: 20px;
}
.table-index {
    /*overflow-x: auto;*/
    /*display: inline-block;*/
    border-inline-end: 1px solid;
    border-bottom: 1px solid;
    border-color: #ccc !important;
}
.table-index .row-action.select input {
    margin: 0;
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
.table-index .table-index-action, 
.table-index .row-action {
    height: 15px;
    width: 35px;
    position: sticky;
    top: 0;
    padding: 0;
    text-align: center;
    opacity: 1 !important;
    line-height: 5px;
}
.table-index tr.active .row-action {
    position: relative;
    left: 0 !important;
}
.table-index .table-index-action i,
.table-index .row-action .action-tools {
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    border-inline-start: 1px solid;
    border-color: #ccc;
}
.table-index .table-index-action i {
    padding: 8px;
    width: 35px;
    height: 35px;
    font-size: 15px;
    border-radius: 0;
}
.table-index .row-action .action-tools {
    font-size: 15px;
    width: 35px;
    height: 15px;
    background-color: #fff;
    border-radius: 0;
    line-height: 15px;
    padding: 0;
}
.table-index tr:hover td {

}
.table-index th, 
.table-index td {
    border: 1px solid;
    position: relative;
}
.table-index td {
    position: relative;
    padding: 0 5px;
    font-size: 13px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.table-index tr.active td {
    z-index: 9;
}
.table-index th {
    text-align: center;
    position: relative;
    top: 0;
    z-index: 9;
}
.table-index th > div.resize-column {
    resize: horizontal;
    overflow: hidden;
    min-width: 50px;
    height: 35px;
    padding-inline-end: 2px;
    padding-inline-start: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.table-index .row-action {
    background-color: #fff;
}
.table-index .row-action .action-tools {

}

.table-index .row-action .action-box {
    padding: 0;
    margin: 0;
    position: fixed;
    width: 0;
    left: 50px;
    top: 50px;
    overflow: hidden;
    /*height: calc(100vh - 50px);*/
    z-index: 9;
    /*overflow-y: auto;*/
}
.table-index tr.active .row-action .action-box {
    width: 140px;
    border: 1px solid;
}
.table-index .row-action .action-box li {
    
}
.table-index .row-action .action-box li a, 
.table-index .row-action .action-box li button {
    padding: 10px 5px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed;
    line-height: 15px;
    border-width: 0 0 1px 0;
}
.table-index .row-action .action-box li:last-child a,
.table-index .row-action .action-box li:last-child button {
    border-bottom: none;
    /*padding-bottom: 0;*/
}
.table-index .row-action.open-box {
    position: relative;
    top: 0;
    left: 0 !important;
    right: 0;
    bottom: 0;
}
.table-index .row-action.open-box .action-tools {
    display: none;
}
.table-index .row-action.open-box ul.action-box {
    position: relative;
    height: 15px;
    top: 0;
    right: 0;
    /*width: 130px;*/
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: inline-block;
    z-index: 8;
    background-color: transparent;
}
.table-index .row-action.open-box ul.action-box li {
    float: right;
    width: auto;
    display: inline-block;
}
.table-index .row-action.open-box ul.action-box li a,
.table-index .row-action.open-box ul.action-box li button {
    padding: 0 10px;
    line-height: 5px;
    border: none;
    line-height: 17px;
}
.table-index thead .filter-box th .filterable, 
.table-index thead .filter-box th input {
    width: 100%;
    margin: 0;
    border: none;
    text-align: center;
}
.table-index thead .filter-box th span {
    width: 100%;
    display: inline-block;
}
.table-index thead .filter-box th span:not(.sortable) i {
    font-size: 17px;
    position: relative;
    cursor: pointer;
    padding: 3px 15px 0;
}
.table-index thead .filter-box th small.datefilter {
    font-size: 10px;
    position: absolute;
    bottom: -1px;
    right: 0;
    top: auto;
}
.table-index thead .filter-box th small.datefilter.min {
    right: 20px;
}
.table-index thead .filter-box th small.datefilter.max {
    left: 0;
    /*right: auto;*/
    right: 0;
}
.table-index thead .filter-box th span:not(.sortable) i:last-child {
    margin-inline-end: 0;
}
.table-index thead .filter-box th .filterable, 
.table-index thead .filter-box th input,
.table-index thead .filter-box th span:not(.sortable) {
    min-width: 50px;
    height: 100%;
}
.table-index thead .filter-box th span:not(.sortable) {
    padding-top: 8px;
}
.table-index thead .filter-box th span.datefilter-box {
    padding-top: 0;
}
.table-index thead .filter-box th span.sortable {
    font-weight: bold;
    cursor: pointer;
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    color: #ccc;
    border-left: 1px solid;
    font-size: 15px !important;
}
.table-index thead .filter-box th span.sortable::before,
.table-index thead .filter-box th span.sortable::after {
    position: absolute;
    height: 15px;
    right: 3px;
}
.table-index thead .filter-box th span.sortable::before {
    content: " \25B2";
    top: 2px;
}
.table-index thead .filter-box th span.sortable::after {
    content: " \25BC";
    top: 15px;
}
ul.index-footer {
    height: 35px;
    margin: 20px 0 5px;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    padding: 0;
    text-align: center;
    z-index: 7;
    position: relative;
}
ul.index-footer li {
    display: inline-block;
    height: 35px;
}
ul.index-footer .list-count {
    
}
ul.index-footer .list-count select {
    height: 35px;
    width: 70px;
    border-radius: 100px;
    text-align: center;
    border: 1px solid;
}
ul.index-footer .go-to {
    padding-inline-start: 40px;
}
ul.index-footer .go-to label {
    margin: 0;
    height: 35px;
    padding: 0;
    display: inline-block;
}
ul.index-footer .go-to input {
    height: 35px;
    border-radius: 100px;
    border: 1px solid;
    width: 100px;
    text-align: center;
    padding: 5px;
    font-size: 17px;
    font-weight: bold !important;
}
ul.index-footer .go-to a {
    top: 0 !important;
}
ul.index-footer .go-to a,
ul.index-footer .pagenation {
    font-size: 17px;
}
ul.index-footer .go-to a,
ul.index-footer .pagenation span, 
ul.index-footer .pagenation a {
    display: inline-block;
    height: 100%;
    width: 35px;
    text-align: center;
    padding: 7px 0px;
}
ul.index-footer .pagenation span {
    
}
ul.index-footer .go-to a,
ul.index-footer .pagenation a {
    border: 1px solid;
    border-radius: 100%;
    cursor: pointer;
}
ul.index-footer .pagenation a.active {
    width: 55px;
    height: 55px;
    margin-top: -10px;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.5);
    font-weight: bold !important;
    font-size: 20px;
    padding: 14px 0;
}
.table-index-box.global-form table {
    width: 100%;
}
.table-index-box.global-form table.table-index tr th:first-child,
.table-index-box.global-form table.table-index tr td:first-child {
    width: 20%;
}
.table-index-box.global-form td {
    text-overflow: unset !important;
    white-space: unset !important;
    overflow: visible !important;
    font-size: 10px;
}
.table-index-box.global-form td label {
    
}
.table-index .visit-cancel-turn {
    cursor: pointer;
}

/*======================= PANEL BODY CONTENT CREATE - EDIT - DELETE - DETAILS =======================*/
.itfaam-body .body-content .table-data tr {

}
.itfaam-body .body-content .table-data th,
.itfaam-body .body-content .table-data td {
    padding: 5px;
    border: 1px solid;
    position: relative;
}
.itfaam-body .body-content .table-data th {
    width: 20%;
}
.itfaam-body .body-content .table-data td {
    width: 80%;
}
.itfaam-body .body-content ol.table-data-error {
    margin: 0 0 10px;
    background-color: indianred;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    padding-inline-start: 30px;
}
.itfaam-body .body-content ol.table-data-error li {
    padding: 5px;
}
table.diet th {
    position: relative;
}

/*======================= Component - Searchable Selectbox =======================*/
.dropbtn {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-inline-end: 30px;
    height: 30px;
}
.dropbtn::after {
    content: " \25BC";
    position: absolute;
    top: 9px;
    left: 10px;
    font-size: 8px;
    color: #aaa;
}
.dropbtn:hover, .dropbtn:focus {
    background-color: rgba(0,0,0,0.1);
}
.dropdown-content > input {
    color: #000;
    font-size: 12px !important;
    width: 90%;
    margin: 0 5%;
    border-radius: 100px;
    border: 1px solid;
    border-color: #ccc;
    padding: 5px;
    box-shadow: 0 3px 8px -5px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}
.dropdown {
    /* position: relative; */
    display: inline-block;
    width: auto;
    float: right;
}
.dropdown-content {
    display: none;
    position: relative;
    background-color: #fff;
    width: auto;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 9;
    right: 0;
    height: 270px;
    padding-top: 5px;
    top: -1px;
    min-width: 250px;
    padding-bottom: 50vh;
    margin-bottom: -50vh;
}
.dropdown-content ul {
    padding: 0;
    margin: 0;
    height: calc(50vh - 30px);
    overflow-y: auto;
    border-top: 1px solid;
    border-color: #ccc;
    left: 0;
    right: 0;
    width: 100%;
}
.dropdown-content ul li.customer-list-item {
    display: none;
}
.dropdown-content ul li.drop-down-placeholder {
    text-align: center;
    font-style: italic;
    color: #aaa;
    font-size: 11px !important;
    padding: 15px 0;
    border: none;
}
.dropdown-content ul li {
    color: #000;
    padding: 5px;
    border-bottom: 1px dashed #ccc;
    cursor: pointer;
    font-size: 12px !important;
}
.dropdown-content ul li:last-child {
    border-bottom: none;
}
.dropdown li:hover {
    background-color: #ddd;
}
.dropdown li.active {
    background-color: dodgerblue;
    color: #fff;
}
.dropdown .show {
    display: block;
}
.select-box-notic {
    display: none;
}

/*======================= Component - Media =======================*/
#uploader-media,
#uploader-file {
    position: relative;
    width: 100%;
    display: none;
    padding-top: 30px;
}
#uploader-notic {
    display: none;
    margin: 0;
}
#uploader[data-type=""] #uploader-notic,
#uploader[data-type="Image"] #uploader-image,
#uploader[data-type="Audio"] #uploader-media,
#uploader[data-type="Video"] #uploader-media,
#uploader[data-type="Pdf"] #uploader-file {
    display: inline-block;
}
#upload-image-input,
#upload-media-input,
#upload-file-input {
    display: none;
}
#uploader-media i.remove-selected,
#uploader-media.active i.choose-file,
#uploader-file i.remove-selected,
#uploader-file.active i.choose-file {
    display: none;
}
#uploader-media.active i.remove-selected,
#uploader-file.active i.remove-selected {
    display: block;
}
#upload-media-icon,
#upload-file-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 30px;
    z-index: 99;
    margin: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100px;
    line-height: 20px;
    cursor: pointer;
}
#progress-media-box,
#progress-file-box {
    margin: 10px 0 0;
    background-color: #eee;
    border-radius: 100px;
    position: relative;
    height: 40px;
    display: inline-block;
    width: 100%;
}
#progress-media,
#progress-file {
    max-width: calc(100% - 95px);
    min-width: 35px;
    display: inline-block;
    float: right;
    height: 30px;
    margin: 5px;
    background-color: indianred;
    border-radius: 100px 0 0 100px;
    color: #fff;
    padding: 5px 10px;
    line-height: 20px;
}
#upload-media-submit,
#upload-file-submit {
    padding: 5px;
    display: inline-block;
    width: 80px;
    text-align: center;
    float: right;
    background-color: #ccc;
    margin: 5px;
    border-radius: 0 100px 100px 0;
    height: 30px;
    margin-inline-end: 0;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.5) inset;
    cursor: pointer;
}
#selected-file-count {
    position: absolute;
    top: 0;
    right: 50px;
    width: 150px;
    height: 30px;
    line-height: 35px;
    font-size: 15px !important;
}
#selected-file-count .number {
    font-size: 25px !important;
    font-weight: bold !important;
    margin-inline-end: 5px;
}
.choose-media, .media-remove {
    color: #000;
    font-size: 30px;
    cursor: pointer;
}

.media-remove {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.media-box {
    /*display: none;*/
    position: relative;
    height: 150px;
    padding-inline-start: 35px;
    display: inline-block;
}
.media-play {
    height: 100%;
    width: 50px;
    display: inline-block;
    cursor: pointer;
}
.media-play i {
    font-size: 25px;
    padding: 12.5px;
}
.uploader-result {
    display: inline-block;
}
.uploader-result .media-box {
    height: 50px;
    padding-inline-start: 0;
    width: auto;
    margin: 10px;
    float: right;
    background-color: #eee;
    border-radius: 5px;
}
.uploader-result .media-box.pdf a {

}
.uploader-result .media-box.pdf a img {
    width: 50px;
    height: 50px;
}
.media-box .media-remove {
    width: 20px;
    height: 20px;
    font-size: 20px;
    text-align: center;
    top: -10px;
    bottom: auto;
    left: -10px;
    right: auto;
    text-shadow: 0 0 3px #000;
    color: yellow;
}
.media-box.active {
    display: block;
}
.media-box.image img,
.media-box.video video,
.media-box.audio audio,
.media-box.pdf .pdf {
    border-radius: 5px;
    border: 1px solid;
    border-color: #ccc;
    height: 100%;
    /*width: auto;*/
}
.table-data .choose-media.video, .table-data .choose-media.audio {
    display: none;
}
.table-data[data-type="Video"] .choose-media.video,
.table-data[data-type="Audio"] .choose-media.audio {
    display: inline-block;
}
#add-new-media {
    width: 70px;
    resize: none;
    display: inline-block;
    font-size: 15px;
    border: 1px solid;
    height: 100%;
    cursor: pointer;
    float: right;
    color: #000;
    border-color: #000;
    position: relative;
    padding: 5px;
    text-align: center;
}
#uploaded-image {
    display: inline-block;
    margin-inline-end: 10px;
    width: 200px;
    height: auto;
    margin-bottom: 10px;
}
#uploaded-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.media-box.not-editable {
    padding: 0;
}

/*======================= Component - Fix Box =======================*/
.fixbox {
    width: 600px;
    height: 400px;
    z-index: 999;
    border: 1px solid;
    box-shadow: 0 0 15px -5px rgba(0,0,0,0.8);
    padding: 32px 0 0;
    position: fixed !important;
    min-height: 250px !important;
    min-width: 400px !important;
    top: 60px;
}
.fixbox .fixbox-body {
    top: 32px;
    right: 0;
    left: 0;
    height: calc(100% - 32px);
    padding: 0;
}
.fixbox-control {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    padding: 7px 10px;
    width: 100%;
    height: 32px;
    font-size: 15px;
    cursor: move;
}
.fixbox-control i {
    cursor: pointer;
    margin-top: 2px;
    margin-inline-end: 7px;
}
.fixbox-control p {
    margin: 0;
    position: absolute;
    top: 5px;
    font-size: 15px;
}
.fixbox-fullscreen {
    top: 60px !important;
    height: calc(100vh - 70px) !important;
    width: calc(80% - 20px) !important;
    margin: 0 !important;
}
.itfaam-panel.collapse-sidebar .fixbox-fullscreen {
    width: calc(100% - 120px) !important;
}
.fixbox-minimize {
    height: 0 !important;
    width: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0;
    border: 0;
    overflow: hidden;
}
.fixbox-body {
    position: absolute;
    top: 42px;
    right: 10px;
    left: 10px;
    height: calc(100% - 92px);
    overflow-y: auto;
    padding: 10px;
    cursor: move;
}
.fixbox-action {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: inline-block;
    padding: 10px;
    height: 50px;
    text-align: right;
    border-top: 1px solid;
    border-color: #ccc;
}
.fixbox-action button {
    width: 70px;
    resize: none;
    display: inline-block;
    font-size: 15px;
    border: 1px solid;
    height: 100%;
    cursor: pointer;
}

/*======================= Component - Reminder List =======================*/
.body-header li#reminder-list {
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    top: 10px;
    cursor: pointer;
    left: 0;
    right: 0;
    margin: auto;
}
.body-header li#reminder-list > i {
    font-size: 30px;
}
.body-header li#reminder-list > .message-count {
    display: none;
    position: absolute;
    top: 1px;
    left: -16px;
    background-color: red;
    color: #fff;
    text-shadow: 0 0 2px #000;
    width: 20px;
    height: 20px;
    line-height: 24px;
    border-radius: 100px;
}
#fixbox-reminder-list .fixbox-control {
    height: 70px;
}
#fixbox-reminder-list .fixbox-control .get-list {
    right: calc(49% - 40px);
}
#fixbox-reminder-list .fixbox-control .reminder-filter {
    border-top: 1px dashed rgba(0,0,0,0.15);
    padding-top: 5px;
    margin-top: 5px;
    text-align: center;
    direction: rtl;
}
#fixbox-reminder-list .fixbox-control .reminder-filter label {
    margin: 0 1px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 100px;
    padding: 0px 10px;
    line-height: 24px;
    height: 24px;
}
#fixbox-reminder-list .fixbox-control .reminder-filter label:first-child {
    margin-inline-start: 0;
}
#fixbox-reminder-list .fixbox-control .reminder-filter label:last-child {
    margin-inline-end: 0;
}
#fixbox-reminder-list .fixbox-control .reminder-filter label input {
    top: 3px;
    position: relative;
    margin: 0;
}
#fixbox-reminder-list .fixbox-body {
    top: 70px;
    height: calc(100% - 70px);
    overflow-y: visible;
}
#fixbox-reminder-list .fixbox-body .reminder-list {
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
#fixbox-reminder-list .reminder-message {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 5px 30px 5px 90px;
    float: right;
}
#fixbox-reminder-list .reminder-message .date {
    display: inline-block;
    width: 80px;
    float: left;
    position: absolute;
    top: 5px;
    left: 5px;
    direction: ltr;
    text-align: center;
    height: 36px;
    line-height: 20px;
    font-size: 13px;
}
#fixbox-reminder-list .reminder-message .set-confirm {
    display: inline-block;
    width: 20px;
    float: right;
    position: absolute;
    top: 13px;
    right: 5px;
    font-size: 18px;
    cursor: pointer;
    height: 20px;
    padding-top: 1.5px;
}
#fixbox-reminder-list .reminder-message .message-box {
    display: inline-block;
    width: 100%;
    border-radius: 5px;
}
#fixbox-reminder-list .reminder-message .message-box.Check, 
#fixbox-reminder-list .fixbox-control .reminder-filter label.Check {
    background-color: orangered;
    color: #fff;
}
#fixbox-reminder-list .reminder-message .message-box.Do, 
#fixbox-reminder-list .fixbox-control .reminder-filter label.Do {
    background-color: limegreen;
    color: #fff;
}
#fixbox-reminder-list .reminder-message .message-box.Private, 
#fixbox-reminder-list .fixbox-control .reminder-filter label.Private {
    background-color: #eee;
    color: #000;
}
#fixbox-reminder-list .reminder-message .message-box.Managerial, 
#fixbox-reminder-list .fixbox-control .reminder-filter label.Managerial {
    background-color: orange;
    color: #000;
}
#fixbox-reminder-list .reminder-message .message-box .header {
    display: inline-block;
    width: 100%;
    padding: 5px;
    float: right;
    height: 36px;
}
#fixbox-reminder-list .reminder-message .message-box .header .title {
    display: inline-block;
    width: calc(100% - 120px);
    float: right;
    text-align: right;
    height: 26px;
    line-height: 25px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#fixbox-reminder-list .reminder-message .message-box .header .customer {
    display: inline-block;
    float: left;
    width: 120px;
    font-size: 11px;
    background-color: rgba(0,0,0,0.15);
    border-radius: 5px;
    padding: 3px;
    text-align: center;
    height: 26px;
}
#fixbox-reminder-list .reminder-message .message-box .header .customer form {
    width: 100%;
    display: inline-block;
    height: 20px;
}
#fixbox-reminder-list .reminder-message .message-box .header .customer button,
#fixbox-reminder-list .reminder-message .message-box .header .customer a {
    display: inline-block;
    width: 100%;
    height: 20px;
    line-height: 15px;
    background-color: rgba(0,0,0,0);
    border: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
}
#fixbox-reminder-list .reminder-message .message-box .header .customer button:hover,
#fixbox-reminder-list .reminder-message .message-box .header .customer a:hover {
    text-overflow: unset;
    white-space: unset;
    overflow: visible;
}
#fixbox-reminder-list .reminder-message .message-box .header .customer button i,
#fixbox-reminder-list .reminder-message .message-box .header .customer a i {

}
#fixbox-reminder-list .reminder-message .message-box .body {
    display: inline-block;
    width: 100%;
    margin: 0;
    border-top: 1px dashed rgba(0,0,0,0.2);
    padding: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    float: right;
    height: 26px;
    font-size: 12px;
    line-height: 16px;
}
#fixbox-reminder-list .fixbox-body .body-content.data-box {
    padding: 0 !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
}
#fixbox-reminder-list .reminder-add {
    position: absolute;
    width: 17px;
    height: 17px;
    top: -63px;
    z-index: 9999;
    left: 0;
    right: 40px;
    margin: auto;
    font-size: 19px;
    line-height: 0;
    text-align: center;
}
#fixbox-reminder-list .reminder-add form,
#fixbox-reminder-list .reminder-add form button {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    border: none;
    padding: 0;
}
#fixbox-reminder-list .reminder-add form button i {

}
#fixbox-reminder-list .fixbox-body .body-content.data-box > form {
    height: 100%;
    overflow-y: auto;
}
#fixbox-reminder-list .fixbox-body .body-content.data-box .content-top {
    display: none !important;
}
#fixbox-reminder-list .fixbox-body .body-content.data-box table.table-data {
    text-align: right !important;
}

/*======================= Component - Bit =======================*/
.togglebutton > label > span.true,
.togglebutton > label > span.false {
    display: none;
    margin-right: 10px;
}
.togglebutton > label.true > span.true, 
.togglebutton > label.false > span.false{
    display: initial;
}
.togglebutton > label.true > span.true {
    color: dodgerblue;
}
.togglebutton > label.false > span.false {
    color: red;
}

/*======================= Component - CheckList =======================*/
ul.checklist {
    list-style: disc;
    padding-inline-start: 20px;
}
ul.checklist > li {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dashed;
    border-color: #ccc;
}
ul.checklist > li > label {
    margin: 0;
    display: inline-block;
    margin-inline-end: 20px;
}
ul.checklist li ul {
    padding: 0;
    display: initial;
}
ul.checklist li ul li {
    display: inline-block;
}
ul.checklist li ul li label {
    padding: 3px 5px;
    background-color: #eee;
    margin: 5px;
    border-radius: 2px;
}
ul.checklist label input {
    margin-inline-end: 5px;
}
ul.checklist label {
    cursor: pointer;
}

/*======================= Component - Chart =======================*/
.table-index td.chart {
    text-align: center;
}
.table-index td.chart .chart-icon {
    cursor: pointer;
    font-size: 15px;
    position: relative;
    top: 2px;
}
.table-index td.chart.active { 
    overflow: visible !important; 
}
.table-index td.chart i.chart-icon {
    text-align: center;
    text-shadow: 0 0 3px orange;
    font-size: 20px;
    cursor: pointer;
}
.table-index td.chart table.chart-data {
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 36px;
}
.table-index td.chart.active table.chart-data {
    display: table;
}
.chart-box {
    background-color: #fff;
    border: 1px solid;
    border-color: #ccc;
    padding: 40px 10px 10px;
    width: calc(50% - 10px);
    display: inline-block;
    float: right;
    margin-inline-end: 20px;
    margin-bottom: 20px;
    position: relative;
}
.chart-box:nth-child(2n) {
    margin-inline-end: 0;
}
.chart-box h2 {
    margin: 0;
    font-size: 15px !important;
    background-color: #eee;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 10px;
    line-height: 20px;
    border-bottom: 1px solid;
    border-color: #ccc;
    padding-inline-start: 50px;
}
.chart-box h2 i {
    font-size: 25px;
    position: absolute;
    top: 6px;
    right: 10px;
}
.chart-box canvas {

}

/*======================= Component - Classified Contents =======================*/
.classified-contents-add-item {
    width: 50px;
    margin-top: 10px;
    height: 50px;
    display: inline-block;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
}
.classified-contents-remove-item {
    position: absolute;
    left: 10px;
    margin: 0;
    bottom: 10px;
    font-size: 20px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.05);
    text-align: center;
    line-height: 50px !important;
    border-radius: 5px;
}
.classified-contents {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}
.classified-contents-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    float: right;
    position: relative;
    width: calc(100% - 60px);
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 10px;
    margin-top: 15px;
    padding-inline-end: 80px;
}
.classified-contents-item:first-child {
    margin-top: 0;
}
.classified-contents-item label {
    font-size: 10px;
    width: 100%;
    margin-bottom: 20px;
}
.classified-contents-item label.half {
    width: calc(50% - 20px);
    display: inline-block;
}
.classified-contents-item label.third {
    width: calc(33.33% - 20px);
    display: inline-block;
}
.classified-contents-item label input,
.classified-contents-item label textarea,
.classified-contents-item label select {
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    border: none;
    min-height: 35px;
    width: 100%;
}
.classified-contents-item label textarea {
    min-height: 200px;
}
.classified-contents-item .classified-content-image-box,
.classified-contents-item .classified-content-product-box,
.classified-contents-item .classified-content-article-box {
    margin-bottom: 0;
}
.classified-contents-item .classified-content-image-box span,
.classified-contents-item .classified-content-product-box span,
.classified-contents-item .classified-content-article-box span {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.classified-contents-item .classified-content-image-box .uploader-result {
    float: right;
}
.classified-contents-item .classified-content-image-box .uploader-result .media-box {
    height: 35px;
    width: 35px;
    margin: 0;
    margin-inline-end: 20px;
    float: right;
    background-color: rgba(0,0,0,0.05);
}
.classified-contents-item .classified-content-image-box > i {
    height: 35px;
    width: 35px;
    font-size: 35px;
    text-align: center;
    float: right;
}

/*======================= Component - Report =======================*/
.report-rule-group {
    float: right;
    display: inline-block;
    position: relative;
    width: calc(100% - 60px);
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 10px;
    margin-top: 15px;
}
.report-rule-group:first-child,
.report-rule-group .report-rule-item:nth-child(3) {
    margin-top: 0;
}
.report-rule-item {
    display: flex;
    flex-direction: row;
    width: calc(100% - 60px);
    position: relative;
    float: right;
    padding: 10px;
    margin-top: 15px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
    min-height: 110px;
}
.report-rule-item .filter-box {
    margin-inline-end: 10px;
    border-inline-end: 1px dashed rgba(0,0,0,0.2);
}
.report-rule-item .value-box {

}
.report-rule-item .filter-box,
.report-rule-item .date-box,
.report-rule-item .value-box {
    flex-direction: column;
}
.report-rule-item .filter-box {
    max-width: 321px;
}
.report-rule-item .operator-box,
.report-rule-item .date-value {
    flex-direction: row;
}
.report-rule-item .operator-box {
    flex-wrap: wrap;
}
.report-rule-item .date-label {
    
}
.report-rule-item .date-label label {
    
}
.report-rule-item .date-label label span {
    
}
.report-rule-item .date-label label input {
    margin: 0;
    margin-inline-end: 10px;
}
.report-rule-item .date-box.active .date-label .deactive,
.report-rule-item .date-box .date-label .active,
.report-rule-item .date-box .date-value {
    display: none;
}
.report-rule-item .date-box .date-label .deactive,
.report-rule-item .date-box.active .date-label .active,
.report-rule-item .date-box.active .date-value {
    display: flex;
}
.report-rule-item .date-label label .active {
    color: dodgerblue;
}
.report-rule-item .date-label label .deactive {
    color: red;
}
.report-rule-item .operator-box > .rule-item-box {
    margin-inline-end: 10px;
}
.report-rule-item .date-box,
.report-rule-item .date-value {
    margin-top: 20px;
}
.report-rule-item .date-value > div {
    flex: auto;
}
.report-rule-item .date-value > .rule-item-box {
    margin-inline-end: 10px;
}
.report-rule-item .rule-item-box {
    flex-direction: column;
}
.report-rule-item *:not(option):not(i) {
    display: flex;
}
.report-rule-item label {
    font-size: 10px;
    width: 100%;
    margin-bottom: 5px;
}
.report-rule-item select {
    width: 150px;
    border: none;
    background-color: rgba(0,0,0,0.05);
    text-align: center;
    min-height: 35px;
    border-radius: 5px;
    font-size: 11px;
}
.report-rule-item select option {
    font-size: 11px;
}
.report-rule-item .rule-value-list,
.report-rule-item .rule-value-text,
.report-rule-item .sub-operator-1,
.report-rule-item .sub-operator-2,
.report-rule-item .sub-operator-3,
.report-rule-item .sub-operator-4,
.report-rule-item .sub-operator-5 {
    display: none;
}
.report-rule-item .rule-value-list select {
    min-width: 200px;
    max-width: 300px;
    height: 103px;
    margin-bottom: 10px;
    text-align: right;
}
.report-rule-item .rule-value-except {
    flex-direction: row;
}
.report-rule-item .rule-value-except label {
    width: 30px;
    padding-top: 10px;
}
.report-rule-item .rule-value-list select option {
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    font-size: 9px;
    padding: 1px 0;
    margin: 0;
    padding-inline-start: 20px;
}
.report-rule-item .operator select optgroup[disabled] {
    color: rgba(0,0,0,0.2);
}
.report-rule-item .operator select option[disabled] {
    color: rgba(0,0,0,0.3);
}
.report-rule-item .rule-value-list select option[selected="selected"] {
    background-color: indianred;
    color: #fff;
}
.report-rule-item .rule-value-list input.value-list-data {
    margin-bottom: 10px;
}
.report-rule-item .rule-value-list input.value-except,
.report-rule-item .rule-value-list input.value-list-data,
.report-rule-item .rule-value-text input,
.report-rule-item .rule-date-start input, 
.report-rule-item .rule-date-end input {
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    border: none;
    text-align: center;
    min-height: 35px;
    width: 100%;
}
.report-rule-item .rule-value-text input {
    direction: ltr;
}
.report-add-row {
    width: 50px;
    margin-right: 10px;
    height: 50px;
    display: inline-block;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
}
.report-remove-row {
    position: absolute;
    left: 10px;
    margin: 0;
    bottom: 10px;
    font-size: 20px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.05);
    text-align: center;
    line-height: 50px !important;
    border-radius: 5px;
}
.report-result-box {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}
/*======================= Custom - Target Data =======================*/
.target-data-list {
    margin: 0;
}
.target-data-add {
    display: inline-block;
    font-size: 25px;
    margin: 10px 0;
    cursor: pointer;
}
.target-data-list li {
    display: inline-block;
    width: 100%;
}
.target-data-list li > .target-data-item {
    display: inline-block;
    float: right;
}
.target-data-list li > .target-data-item > label {
    margin-inline-end: 10px;
}
.target-data-list li > .target-data-item-sub {

}
.target-data-list li > i {
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
    display: inline-block;
    position: relative;
    float: right;
}

/*======================= Custom - Customer Profile =======================*/
#fixbox-customer-note, #fixbox-attachment, #fixbox-visit, #fixbox-customer-list {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#fixbox-customer-note.fixbox-fullscreen, #fixbox-attachment.fixbox-fullscreen, #fixbox-visit.fixbox-fullscreen, #fixbox-customer-list.fixbox-fullscreen {
    position: fixed !important;
    height: calc(100vh - 70px) !important;
    width: calc(80% - 20px) !important;
}
.itfaam-panel.collapse-sidebar #fixbox-customer-note.fixbox-fullscreen,
.itfaam-panel.collapse-sidebar #fixbox-attachment.fixbox-fullscreen,
.itfaam-panel.collapse-sidebar #fixbox-visit.fixbox-fullscreen,
.itfaam-panel.collapse-sidebar #fixbox-customer-list.fixbox-fullscreen {
    width: calc(100% - 120px) !important;
}
.profile-info .profile-body #fixbox-customer-note,
.profile-info .profile-body #fixbox-attachment,
.profile-info .profile-body #fixbox-visit,
.profile-info .profile-body #fixbox-customer-list {
    box-shadow: none;
}
.profile-info {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
    position: relative;
}
.profile-info > div {
    margin-bottom: 0;
}
.profile-info > div:last-child {
    margin-bottom: 0;
}
.profile-info .info-table {
    width: 100%;
    display: inline-block;
    position: relative;
}
.profile-info .info-table .image-box {
    width: 122px;
    height: 122px;
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.profile-info .info-table .image-box .icon-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.profile-info .info-table .image-box .icon-box i {
    color: #ddd;
    font-size: 25px;
    font-weight: bold !important;
    margin: 0 10px 5px;
}
.profile-info .info-table .image-box .icon-box i.active {
    color: dodgerblue;
}
.profile-info .info-table .image-box img {
    width: 90px;
    height: 90px;
    border: 1px solid #ccc;
    border-radius: 100px;
}
.profile-info .info-table table {
    width: calc(25% - 34px);
    float: right;
    position: relative;
    margin: 0 2px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
}
.profile-info .info-table table.full-table {
    width: calc(100% - 124px);
    margin-inline-end: 0;
    margin-top: 4px;
}
.profile-info .info-table table:nth-child(5) {
    margin-inline-end: 0;
}
.profile-info .info-table table th, .profile-info .info-table table td {
    padding: 5px;
    border: 1px solid #bbb;
    position: relative;
    height: 30px;
}
.profile-info .info-table table th {
    background-color: #ddd;
    width: 110px;
}
.profile-info .info-table table td {

}
.profile-info .profile-tab {
    display: inline-block;
    width: 100%;
    position: relative;
}
.profile-info .profile-tab .tab-nav {
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
}
.profile-info .profile-tab .tab-nav li {
    display: inline-block;
    padding: 0 30px;
    margin: 0 20px;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    color: #000;
}
.profile-info .profile-tab .tab-nav li.active {
    background-color: #eee;
    color: #000;
}
.profile-info .profile-tab .tab-body {
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
}
.profile-info .profile-tab .tab-body li {
    width: 100%;
    padding: 5px;
    display: none;
    background-color: #eee;
    border-radius: 5px;
}
.profile-info .profile-tab .tab-body li.active {
    display: inline-block;
}
.profile-info .profile-tab .tab-body li a {
    display: inline-block;
    padding: 0 20px;
    background-color: dodgerblue;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 0 3px #000;
}
.profile-info .profile-tab .tab-body li a:first-child {
    border-radius: 0 5px 5px 0;
}
.profile-info .profile-tab .tab-body li a:last-child {
    border-radius: 5px 0 0 5px;
}
.profile-info .profile-body {
    display: inline-block;
    width: 100%;
    height: 520px;
}
.profile-info .profile-body > div {
    position: relative;
    display: inline-block;
    float: right;
    background-color: #eee;
    border-radius: 5px;
}
.profile-info .profile-body .customer-note {
    width: calc(50% - 10px);
    margin-inline-end: 10px;
    height: 100%;
}
.profile-info .profile-body .doctor-visits {
    width: calc(50% - 10px);
    margin-inline-start: 10px;
    height: calc(50% - 10px);
    margin-bottom: 10px;
}
.profile-info .profile-body .customer-list {
    width: calc(50% - 10px);
    margin-inline-start: 10px;
    height: calc(50% - 10px);
    margin-bottom: 10px;
}
.profile-info .profile-body .customer-attachment {
    width: calc(50% - 10px);
    margin-inline-start: 10px;
    height: calc(50% - 10px);
    margin-top: 10px;
}
.profile-info .profile-body .customer-attachment.customer-attachment-full-height,
.profile-info .profile-body .customer-list.customer-list-full-height {
    height: 100%;
    margin-top: 0;
}
.profile-info .profile-body .customer-list.customer-list-full-width {
    width: 100%;
    margin-top: 20px;
    margin-inline-start: 0;
    margin-bottom: 20px;
}
.profile-info .profile-body .background-title {
    position: absolute;
    margin: auto;
    float: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    color: #aaa;
}

/*======================= Custom - Visit Today =======================*/
ul.tab-table-nav, ul.tab-table-body {
    margin: 0;
}
ul.tab-table-nav {
    padding: 0 10px;
}
ul.tab-table-body {
    padding: 10px;
    background-color: #ddd;
    border-radius: 4px;
}
ul.tab-table-nav > li {
    display: inline-block;
    padding: 10px;
    margin-inline-end: 10px;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    color: #999;
}
ul.tab-table-nav > li.active {
    background-color: #ddd;
    color: #000;
}
ul.tab-table-body > li > .table-index-box {
    display: none;
}
ul.tab-table-body > li.active > .table-index-box {
    display: block;
}
ul.tab-table-body form {
    display: inline-block;
    width: 100%;
}
.table-index-open-action {
    background-color: #eee;
    padding: 5px 10px;
    display: inline-block;
    color: #000;
    margin: 5px;
    width: 100px;
    text-align: center;
    border: none;
}
td > *:last-child,
td > *:last-child > *:last-child {
    margin-inline-end: 0;
}
.table-index-open-action.turn {
    background-color: orange;
}
.table-index-open-action.turn .action-box,
.table-index-open-action.turn .action-box li,
.table-index-open-action.turn .action-box li form,
.table-index-open-action.turn .action-box li form button {
    background-color: rgba(0,0,0,0);
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
}
.table-index-open-action.cancel {
    background-color: red;
    color: #fff;
}
.table-index-open-action.confirm {
    background-color: limegreen;
    color: #fff;
}
.table-index-open-action.confirm ul {
    padding: 0;
    background: none;
}
.table-index-open-action.confirm ul li button {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}
.table-index-open-action.start {

}
.table-index-open-action.finish {
    background-color: #000;
    color: #fff;
}
.table-index-open-action.text {
    background-color: transparent;
}
ul.tab-table-body tr th:nth-child(9),
ul.tab-table-body tr td:nth-child(9) {
    width: 225px;
    text-align: center;
}


/*======================= Custom - Anthropometry Value =======================*/
.anthropometry-value-table th, .anthropometry-value-table td {
    text-align: center;
    padding: 5px;
}
.anthropometry-value-table .anthropometry-new td {
    background-color: hotpink !important;
    color: #fff;
}
.anthropometry-value-table .anthropometry-new td i {
    top: 12px;
}
.anthropometry-value-table .anthropometry-new td.row-date {
    padding: 0;
}
.anthropometry-value-table .anthropometry-new td.row-date input {
    border: none;
    height: 40px;
    text-align: center;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 50%) inset;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
}
.anthropometry-value-table td a {
    color: #000;
}
.anthropometry-value-table .anthropometry-new .anthropometry-value-action i {
    color: rgba(255,255,255,0.4);
}
.anthropometry-value-table .anthropometry-value-action {
    padding: 0 !important;
}
.anthropometry-value-table .anthropometry-value-action input {
    margin: 0;
    text-align: center;
    padding: 0;
    border: none;
    background-color: rgba(0,0,0,0);
    width: 100px;
    padding-left: 25px;
    height: 25px;
}
.anthropometry-value-table .anthropometry-value-action.description input {
    width: 300px;
}
.anthropometry-value-table .anthropometry-value-action i {
    font-size: 15px;
    position: absolute;
    top: 5px;
    left: 3px;
    cursor: pointer;
    color: rgba(0,0,0,0.2);
}

/*======================= Custom - Customer Quick Add =======================*/
#fixbox-quick-add-customer label {
    width: 100%;
    display: inline-block;
    height: 50px;
    margin: 15px 0;
    padding: 0 20px;
}
#fixbox-quick-add-customer label span {
    font-size: 17px;
    width: 110px;
    display: inline-block;
    padding: 13px 0;
}
#fixbox-quick-add-customer label input {
    border: none;
    border-bottom: 1px solid;
    width: calc(100% - 115px);
    padding: 10px 5px;
    font-size: 15px;
}
#fixbox-quick-add-customer label a {
    background-color: limegreen;
    border: none;
    color: #fff;
    height: 50px;
    width: 100px;
    display: inline-block;
    font-size: 20px;
    padding: 10px 0;
}

/*======================= Custom - Customer Note =======================*/
#fixbox-customer-note .fixbox-body {
    border-bottom: 1px solid;
    border-color: #ccc;
    top: 60px;
    height: calc(100% - 160px);
}
#fixbox-customer-note .fixbox-action {
    height: 100px;
}
#fixbox-customer-note .fixbox-action button {
    
}
#fixbox-customer-note .fixbox-action .dropdown {
    width: calc(100% - 80px);
    margin-bottom: 5px;
    height: 30px;
}
#fixbox-customer-note .fixbox-action .DropDownButton {
    width: 100%;
}
#fixbox-customer-note .fixbox-action textarea {
    width: calc(100% - 80px);
    height: 100%;
    padding: 5px 30px 5px 5px;
}
#fixbox-customer-note .fixbox-action .sync-status {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 15px;
    display: none;
    padding: 3px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    text-align: center;
}
#fixbox-customer-note .fixbox-action .sync-status.sync-failed {
    background-color: red;
    color: #fff;
}
#fixbox-customer-note .fixbox-action .sync-status.sync-success {
    background-color: limegreen;
    color: #fff;
}
#fixbox-customer-note .fixbox-action .sync-status.sync-loading { 
    animation: rotating 2s linear infinite;
}
#fixbox-customer-note .fixbox-action .manual-sync {
    position: absolute;
    top: 65px;
    right: 15px;
    font-size: 20px;
    display: none;
    cursor: pointer;
}
#fixbox-customer-note .fixbox-body p.status {
    text-align: center;
    font-size: 15px;
}
#fixbox-customer-note .note-item {
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    position: relative;
}
#fixbox-customer-note .note-item .note-date {
    float: left;
    direction: ltr;
}
#fixbox-customer-note .note-item .note-personnel {
    float: right;
}
#fixbox-customer-note .note-item .note-personnel::after {
    content: "-";
    margin: 0 10px;
}
#fixbox-customer-note .note-item .note-edit {
    position: absolute;
    left: 0;
    right: 40px;
    top: 0;
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    font-size: 15px;
    margin: auto;
    cursor: pointer;
}
#fixbox-customer-note .note-item .note-remove {
    position: absolute;
    left: 40px;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    text-align: center;
    padding: 5px;
    font-size: 15px;
    margin: auto;
    cursor: pointer;
}
#fixbox-customer-note .note-item .note-expertise {
    float: right;
}
#fixbox-customer-note .note-item .note-text {
    margin: 0;
    float: right;
    width: 100%;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px dashed;
    border-color: rgba(0,0,0,0.2);
    white-space: pre-wrap;
}
#fixbox-customer-note #note-edit-cancel {
    display: none;
    font-size: 13px;
    color: #aaa;
    width: 70px;
    position: absolute;
    left: 10px;
    text-align: center;
    top: 10px;
    padding: 5px;
    cursor: pointer;
}
#fixbox-customer-note .fixbox-control {
    height: 60px;
}
#fixbox-customer-note .fixbox-control .get-note-expertise {
    display: inline-block;
    width: 100%;
}
#fixbox-customer-note .fixbox-control .get-note-expertise .customer-note-search {
    width: 200px;
    float: right;
    text-align: right;
    direction: rtl;
    font-size: 10px;
    height: 25px;
    background-color: rgba(0,0,0,0.1);
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 0 5px;
}
#fixbox-customer-note .fixbox-control .get-note-expertise .multi-select-searchable {
    width: calc(100% - 210px);
    float: left;
}

/*======================= Custom - Multi Select Searchable =======================*/
.multi-select-searchable {
    width: 100%;
    position: relative;
}
.multi-select-searchable .dropdown-display-label {
    padding: 2px 2px 2px 25px;
    height: 25px;
    font-size: 10px;
    background-color: rgba(0,0,0,0.1);
    cursor: pointer;
    direction: rtl;
    text-align: right;
    padding-inline-start: 70px;
}
.multi-select-searchable .dropdown-display-label:after, 
.multi-select-searchable .dropdown-display:after {
    top: 7px;
    left: 8px;
    right: auto;
}
.multi-select-searchable .dropdown-display-label .dropdown-chose-list {
    width: 100%;
}
.multi-select-searchable .dropdown-display-label .dropdown-search {
    width: 100%;
}
.multi-select-searchable .dropdown-display-label input::placeholder {
    color: rgba(0,0,0,0.5);
}
.multi-select-searchable .dropdown-display-label input {
    width: 100%;
}
.multi-select-searchable .dropdown-display-label input, 
.multi-select-searchable .dropdown-display-label input:focus {
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    line-height: 19px;
    background-color: rgba(0,0,0,0);
    color: #fff;
}
.multi-select-searchable .dropdown-main {
    background-color: #f5f5f5;
    direction: rtl;
    text-align: right;
    font-size: 10px;
}
.multi-select-searchable .dropdown-group {
    text-align: center;
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
    padding: 0;
}
.multi-select-searchable .dropdown-option {
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    color: #000;
    padding: 0 10px;
    position: relative;
}
.dropdown-option.dropdown-chose:after {
    margin: 7px 0 0 10px;
}
.multi-select-searchable .dropdown-option:hover {
    background-color: dodgerblue;
    color: #fff;
}
.multi-select-searchable .dropdown-display-label .dropdown-selected {
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    line-height: 17px;
}
.multi-select-searchable .dropdown-display-label .dropdown-selected {
    display: none;
}
.multi-select-searchable .selected-count {
    position: absolute;
    top: 2.5px;
    right: 50px;
    width: 20px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 3px;
}
.multi-select-searchable .select-all {
    width: 70px;
    float: right;
    margin: 0;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    direction: rtl;
    cursor: pointer;
    text-align: right;
    position: relative;
    padding-inline-start: 5px;
    z-index: 9999999;
}
.multi-select-searchable .select-all input {
    top: 3px;
    position: relative;
}

/*======================= Custom - Chat =======================*/
#fixbox-chat-online {
    padding: 32px 0px 0px;
    width: 900px;
}
#fixbox-chat-online .fixbox-body {
    top: 32px;
    right: 0;
    left: 0;
    height: calc(100% - 32px);
    padding: 0;
}
#fixbox-chat-online .fixbox-body .chat-online-list {
    width: 30%;
    display: inline-block;
    height: 100%;
    border-left: 1px solid #ccc;
    float: right;
}
#fixbox-chat-online .fixbox-body .chat-online-list .my-chat {
    border-bottom: 1px solid #ccc;
}
#fixbox-chat-online .fixbox-body .chat-online-list .other-chat {

}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-online-list-title {
    margin: 0;
    background-color: #eee;
    padding: 17px 5px;
    font-size: 11px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
#fixbox-chat-online .fixbox-body .chat-online-list .status {
    margin: 0;
    padding: 10px 5px;
    text-align: center;
    color: #999;
    font-size: 11px;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list {

}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item {
    display: inline-block;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding: 8px 50px 8px 5px;
    cursor: pointer;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item:hover {
    background-color: aqua;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item.active {
    background-color: aquamarine;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item:last-child {
    border-bottom: none;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-image {
    height: 40px;
    width: 40px;
    border: 1px solid #ccc;
    border-radius: 100px;
    position: absolute;
    right: 5px;
    top: 5px;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data {
    display: inline-block;
    width: 100%;
    position: relative;
    padding-left: 30px;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data .item-info {
    display: inline-block;
    width: 100%;
    position: relative;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data .item-info .info-name {
    font-size: 10px;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data .item-info .info-date {
    font-size: 10px;
    color: #999;
    position: absolute;
    left: -30px;
    top: 0;
    width: 30px;
    text-align: left;
    direction: ltr;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data .item-text {
    margin: 0;
    color: #999;
    font-size: 10px;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#fixbox-chat-online .fixbox-body .chat-online-list .chat-item-list .chat-item .item-data .item-un-read {
    font-size: 10px;
    color: #999;
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: red;
    color: #fff;
    bottom: 0;
    text-align: center;
    line-height: 20px;
    border-radius: 100px;
}
#fixbox-chat-online .fixbox-body .chat-box-message {
    width: 70%;
    display: inline-block;
    height: 100%;
    float: right;
    overflow: hidden;
}
#fixbox-chat-online .fixbox-action {

}

#fixbox-chat-online .fixbox-action input {
    width: calc(100% - 80px);
    height: 100%;
    padding: 5px 30px 5px 5px;
    border: 1px solid #ccc;
    font-size: 11px;
}
#fixbox-chat-online .fixbox-action input::placeholder {
    color: #999;
}
#fixbox-chat-online .fixbox-action .sync-status {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 15px;
    display: none;
    padding: 3px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    text-align: center;
}
#fixbox-chat-online .fixbox-action .sync-status.sync-failed {
    background-color: red;
    color: #fff;
}
#fixbox-chat-online .fixbox-action .sync-status.sync-success {
    background-color: limegreen;
    color: #fff;
}
#fixbox-chat-online .fixbox-action .sync-status.sync-loading { 
    animation: rotating 2s linear infinite;
}
.chat-box {
    display: inline-block;
    background-color: #fff;
    width: 100%;
    border-radius: 5px;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.chat-box .chat-message-box {
    display: inline-block;
    width: 100%;
    position: relative;
}
.chat-box .chat-message-box .chat-message-text {
    margin: 0;
    display: inline-block;
    width: calc(50% - 60px);
    padding: 10px;
    box-shadow: 0 0 6px -3px rgba(0,0,0,0.8);
    border-radius: 5px;
    margin: 5px 0;
    direction: rtl;
    text-align: right;
}
.chat-box .chat-message-box .chat-message-text::before {
    content: " ";
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    bottom: 15px;
    transform: rotate(45deg);
}
.chat-box .chat-message-box.sent_messe {
    text-align: right;
}
.chat-box .chat-message-box.receive_messe {
    text-align: left;
    direction: ltr;
}
.chat-box .chat-message-box.sent_messe .chat-message-text {
    background-color: limegreen;
    color: #fff;
    padding-right: 15px;
}
.chat-box .chat-message-box.receive_messe .chat-message-text {
    background-color: #eee;
    color: #000;
    padding-left: 15px;
}
.chat-box .chat-message-box.sent_messe .chat-message-text::before {
    background-color: limegreen;
    right: -8px;
}
.chat-box .chat-message-box.receive_messe .chat-message-text::before {
    background-color: #eee;
    left: -8px;
}
.chat-box .chat-message-box .chat-message-date {
    direction: ltr;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    width: 120px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 1px;
    color: #aaa;
}
.chat-box .chat-message-box.sent_messe .chat-message-date {
    right: calc(50% - 60px);
}
.chat-box .chat-message-box.receive_messe .chat-message-date {
    left: calc(50% - 60px);
}
.chat-box .chat-header {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 50px;
    padding: 5px;
}
.chat-box .chat-header .message-sent,
.chat-box .chat-header .message-receive,
.chat-box .chat-header .chat-data {
    display: inline-block;
    width: 33.33%;
    height: 100%;
    text-align: center;
}
.chat-box .chat-header .message-sent {
    float: right;
}
.chat-box .chat-header .message-receive {
    float: left;
}
.chat-box .chat-header .chat-data {
    padding: 0 20px;
    position: relative;
}
.chat-box .chat-header .chat-data .chat-search-input {
    height: 100%;
    width: 100%;
    border-radius: 100px;
    border: 1px solid #ccc;
    text-align: center;
    color: #000;
}
.chat-box .chat-header .chat-data .remove-search {
    cursor: pointer;
    position: absolute;
    font-size: 20px;
    top: 8px;
    left: 0;
    color: #999;
    display: none;
}
.chat-box .chat-header .chat-data .chat-search-input::placeholder {
    color: #999;
}
.chat-box .chat-header .message-sent img,
.chat-box .chat-header .message-receive img {
    height: 100%;
    border-radius: 100px;
    border: 1px solid #ccc;
    margin-left: 10px;
}
.chat-box .chat-header .message-receive img {
    margin-left: 10px;
}
.chat-box .chat-header .message-sent img {
    margin-right: 10px;
}
.chat-box .chat-header .message-sent span,
.chat-box .chat-header .message-receive span {

}
.chat-box .chat-list {
    padding: 0 25px 10px;
    height: calc(100% - 100px);
    overflow-y: auto;
    text-align: center;
    position: relative;
    display: inline-block;
    width: 100%;
}
.chat-box .chat-list .status {
    text-align: center;
    color: #999;
    margin: 0;
}
.chat-box .chat-list .load-more {
    cursor: pointer;
    background-color: #eee;
    color: #000;
    padding: 10px 30px;
    border-radius: 100px;
    display: inline-block;
    margin: 10px 0;
    font-size: 11px;
}

/*======================= Custom - Login =======================*/
.body-content .login-box {
    width: 505px;
    border: 1px solid;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.5);
    height: 500px;
    display: inline-block;
}
.body-content .login-box h2 {
    margin: 0;
    text-align: center;
    font-size: 20px;
    padding: 5px;
}
.body-content .login-box img {
    height: 200px;
    width: auto;
    margin: 10px 0 20px;
}
.body-content .login-box label {
    width: 100%;
    display: inline-block;
    position: relative;
    padding: 5px 150px;
}
.body-content .login-box label span {
    width: 70px;
}
.body-content .login-box label input {
    border: 1px solid;
    width: 200px;
    text-align: center;
}
.body-content .login-box button {
    margin: 10px 0;
    width: 90px;
    border: 1px solid;
    padding: 5px;
    cursor: pointer;
}

/*======================= Custom - Diet =======================*/
table.diet {
    background-color: #fff;
    border: 1px solid;
    border-color: #ccc;
}
table.diet tr th:first-child {
    width: 10%;
}
table.diet tr th:first-child p {
    font-size: 16px;
    font-weight: bold !important;
    text-align: center;
}
table.diet td,
table.diet th {
    padding: 5px;
    border: 1px solid;
    border-color: #ccc;
}
table.diet td.diet-meal {
    width: 15%;
    vertical-align: top;
    position: relative;
}
table.diet td.diet-meal h4 {
    font-size: 15px;
    font-weight: bold !important;
    position: relative;
    margin: 0;
    text-align: center;
    line-height: 25px;
    background-color: #eee;
    border-radius: 4px;
    padding: 2px;
    color: #000;
}
table.diet td.diet-meal h4.MainMeal_1, 
table.diet td.diet-meal h4.MainMeal_2 {
    background-color: deeppink;
    color: #fff;
}
table.diet td.diet-meal h4 span {
    display: block;
    font-size: 10px;
}
table.diet td.diet-meal div {
    display: block;
}
table.diet td textarea {
    width: 100%;
}
table.diet td.diet-meal .meal-material {
    padding: 10px 0;
}
table.diet td.diet-meal .meal-material .material-item {
    padding: 2px 0;
    border-bottom: 1px dashed;
    border-color: #ccc;
    font-size: 11px;
    line-height: 20px;
}
table.diet td.diet-meal .meal-material .material-item:last-child {
    border-bottom: none;
}
table.diet td.diet-meal .meal-material .material-item span {
    
}
table.diet td.diet-attention textarea {
    height: 100px;
}

/*======================= Custom - Diet Exchange =======================*/
#exchage-food-list {
    position: absolute;
    top: 57px;
    right: 11px;
    bottom: 11px;
    width: calc(10% + 51px);
    z-index: 99999;
    border-radius: 0 0 4px 4px;
    display: none;
    overflow: hidden;
}
#exchage-food-list .exchage-food-box {
    background-color: #fff;
    width: 435px;
    padding: 5px;
    height: 100%;
    position: fixed;
    right: -500px;
    top: 0;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    border-inline-end: 1px solid;
    border-color: #ccc;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.8);
}
#exchage-food-list .exchage-food-box-data {
    overflow-y: auto;
    height: calc(100% - 35px);
    border-top: 1px solid;
    border-color: #ccc;
}

#exchage-food-list.SubMeal_1 #exchage-food-SubMeal_1,
#exchage-food-list.SubMeal_2 #exchage-food-SubMeal_2,
#exchage-food-list.MainMeal_1 #exchage-food-MainMeal_1,
#exchage-food-list.SubMeal_3 #exchage-food-SubMeal_3,
#exchage-food-list.MainMeal_2 #exchage-food-MainMeal_2,
#exchage-food-list.SubMeal_4 #exchage-food-SubMeal_4 {
    right: 0;
}

#exchage-food-list .exchage-food-item {
    cursor: pointer;
    position: relative;
    /*padding-right: 30px;*/
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}
#exchage-food-list .exchage-food-item:hover {
    background-color: #eee;
}

/*#exchage-food-list .exchage-food-item::before {
    content: "+";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 17px;
    background-color: rgba(0,0,0,0.15);
    padding: 3px 7px;
    border-radius: 3px;
    bottom: 10px;
}*/

#exchage-food-list .exchage-food-item h4 {
    font-size: 12px;
    margin: 0;
    text-align: center;
}

#exchage-food-list .exchage-food-item h4 span {
    display: block;
}

#exchage-food-list .exchage-food-item .meal-material,
#exchage-food-list .exchage-food-item h4 i {
    display: none;
}

#exchage-food-list-close {
    position: fixed;
    top: 5px;
    right: 405px;
    font-size: 20px;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid;
    border-color: #ccc;
    height: 33px;
    width: 25px;
    background-color: #eee;
    color: #000;
}

.exchage-food-search {
    width: calc(100% - 30px);
    margin: 0;
    margin-bottom: 10px;
    border-radius: 100px;
    border: 1px solid;
    border-color: #ccc;
    height: 30px;
    text-align: center;
    font-size: 11px;
    box-shadow: 0 6px 3px -5px rgba(0,0,0,0.3);
}

.exchage-food {
    position: absolute;
    left: 5px;
    margin: 0;
    top: 5px;
    cursor: pointer;
    color: rgba(0,0,0,0.3);
    font-size: 17px;
}

/*======================= Custom - Diet Calculator =======================*/
#diet-calculator-box {
    position: absolute;
    top: 5px;
    right: 210px;
    width: 530px;
    background-color: #fff;
    border: 1px solid;
    border-color: #ccc;
    padding: 10px;
    z-index: 999;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.3);
    display: none;
}
#diet-calculator-icon {
    cursor: no-drop;
    margin-inline-start: 15px;
    font-size: 15;
    font-size: 20px;
    position: relative;
    top: 5px;
    /*float: right;*/
}
#diet-calculator-box .calculator-section {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px dashed;
    border-color: #ccc;
    padding-bottom: 10px;
}
#diet-calculator-box .calculator-section .calc-gender-section {
    width: 25%;
    display: inline-block;
    position: relative;
    top: 4px;
}
#diet-calculator-box .calculator-section .calc-gender-section label {
    width: 40%;
    display: inline;
    margin-inline-end: 10%;
}
#diet-calculator-box .calculator-section label {
    margin-inline-end: 20px;
}
#diet-calculator-box .calculator-section input {
    margin-inline-end: 5px !important;
    margin: 0;
    position: relative;
    top: 3px;
}
#diet-calculator-box .calculator-section input[type="text"], 
#diet-calculator-box .calculator-section input[type="number"] {
    width: calc(25% - 5px);
    float: right;
    top: 0;
    padding: 2px 5px;
}
#diet-calculator-box #btnCalc {
    display: inline-block;
    padding: 5px 10px;
    background-color: #eee;
    color: #000;
    cursor: pointer;
}

/*======================= Custom - Checklist whit Selectbox =======================*/
.order-product .add,
.check-select-box .add {
    float: right;
    font-size: 30px;
    margin-inline-end: 10px;
    cursor: pointer;
}
.order-product-list,
.check-select-list {
    display: inline-block;
}
ul.order-product-selected,
ul.check-select-selected {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
}
ul.order-product-selected li,
ul.check-select-selected li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
}
ul.order-product-selected li span,
ul.check-select-selected li span {

}
ul.order-product-selected li input,
ul.check-select-selected li input {
    margin: 0 10px;
    height: 40px;
    width: 40px;
    text-align: center;
}
ul.order-product-selected li i,
ul.check-select-selected li i {
    width: 30px;
    height: 30px;
    background-color: palevioletred;
    color: #fff;
    text-shadow: 0 0 3px #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
}


/*======================= Tools - Input Length =======================*/
.length-limit-area .length-box {
    display: inline-block;
    position: relative;
    min-width: 50%;
    max-width: 100%;
    height: 10px;
    border-radius: 100px;
    background-color: #eee;
    margin-top: 5px;
    line-height: 0;
    overflow: hidden;
}
.length-limit-area .length-limit-data-holder {
    display: inline-block;
    width: auto;
    height: 0px !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    float: right;
    line-height: 0 !important;
}
.length-limit-area .length-limit.meta-title,
.length-limit-area .length-box.meta-title {
    min-width: 620px;
    max-width: 100%;
}
.length-limit-area .length-limit.meta-title,
.length-limit-area .length-limit-data-holder {
    font-size: 20px !important;
    font-family: arial,sans-serif !important;
}
.length-limit-area .length-box .length-bar {
    display: inline-block;
    height: 10px;
    border-radius: 100px;
    color: #fff;
    line-height: 10px;
    font-size: 9px;
    padding: 1px 10px;
    text-shadow: 0 0 3px #000;
    letter-spacing: 3px;
}
.length-limit-area .length-box .length-bar.red {
    background-color: red;
}
.length-limit-area .length-box .length-bar.green {
    background-color: limegreen;
}
.length-limit-area .length-box .length-bar.orange {
    background-color: orange;
}


/*======================= Custom - Responsive =======================*/
@media only screen and (max-width: 992px) {
    .itfaam-body {
        padding-bottom: 90px;
    }
    .body-content .login-box {
        width: 100%;
    }
    .body-content .login-box label {
        padding: 5px 80px;
    }
    .body-content .login-box label span {
        right: 0px;
    }
    .chart-box {
        width: 100%;
        margin-inline-end: 0;
    }
    .itfaam-body .body-footer {
        height: 85px;
    }
    .itfaam-body .body-footer p {
        width: 100%;
        text-align: center !important;
    }
    .itfaam-body .body-header > ul > li.active > ul {
        width: 200px;
    }
    .itfaam-body .body-header > ul > li.header-profile > div > span {
        display: none;
    }
    .itfaam-body .body-header > ul > li > ul > li.full-name {
        display: block;
    }
    ul.index-footer {
        height: 110px;
    }
    ul.index-footer li {
        width: 100%;
        text-align: center;
    }
    ul.index-footer .list-count select {
        height: 30px;
    }
    ul.index-footer .go-to {
        padding-inline-start: 0;
    }
    ul.index-footer .go-to label {
        height: 30px;
        float: none;
    }
    ul.index-footer .go-to input {
        height: 30px;
    }
    ul.index-footer .go-to a {
        float: none;
    }
    ul.index-footer li {
        height: 30px;
        margin-bottom: 10px;
    }
    ul.index-footer .go-to a, 
    ul.index-footer .pagenation span, 
    ul.index-footer .pagenation a {
        width: 30px;
        padding: 5px 0px;
    }
    ul.index-footer .pagenation a.active {
        width: 30px;
        height: 30px;
        margin-top: 0;
        font-size: 17px;
        padding: 5px 0;
    }
}