td.dataTables_empty:before {
    display: none!important;
}
.login #accordion {
    margin: 0px auto;
    margin-bottom: 50px;
}
#footer{
    padding-bottom: 10px;
}
.ui-accordion .ui-accordion-content-active{
    height:auto!important;
}
#ManageDatabase .demo,
div#filenotexists-contents{
    padding: 10px;
}
.box-report label{
    padding:10px;
}
.box-report label:first-child{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.box-report label.ui-corner-right{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
#area-upload li.box-upload{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    border:0;
}
#area-upload .box-upload .box-rename{
    height: auto;
    margin:0 0 8px 0;
}
#bt-add-file{
    margin:0;
}
#area-upload .box-upload .box-report{
    display: flex;align-items: center;
}

#ViewLog textarea{width:100%;}
label.ui-corner-right span,
label.ui-corner-left span,
#notaccordion2 span{
    display: none;
}
.dataTables_processing{
    border:0!important;
}
button#btnReset,
button#btnUpdate {
    padding: 10px;
    border: 2px solid #ccc;
}
.ui-dialog td{
    display: block;
    width: 100%;
}
.ui-dialog td label{
    margin-bottom: 8px;
    display: block;
}
.ui-widget-overlay{
    background:#000;
}
.eavailable-box,
.eallowed-box,
li .available-box, li .allowed-box {
    width: 45%!important;
}

.eicon-select-box,
li .icon-select-box{
    padding: 50px 20px;
    margin:0!important;
}
.ebox-select-code,
.ui-dialog td input,
.ui-dialog td textarea,
.box-select-code{
    width:100%!important;
}
textarea#filetypesub,
textarea,
select {
    border: 2px solid #ccc!important;
    border-radius: 5px!important;
    resize: none!important;
    padding: 8px!important;
}
.ui-dialog .ui-dialog-buttonpane button,
button#create-filetype,
label.ui-corner-right,
label.ui-corner-left{
    padding: 10px;
    border:2px solid #ccc;
    border-radius: 5px;
}
.ui-dialog .ui-dialog-titlebar-close{
    right:16px!important;
}

.ui-dialog .ui-dialog-content{height:auto!important;overflow-x:hidden!important;}
button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close{
    font-size: 0px;
}
#summaryTable_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix,
#summaryTable_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-tl.ui-corner-tr.ui-helper-clearfix,
#myTable5_wrapper .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-tl.ui-corner-tr.ui-helper-clearfix{
    display: none;
}
.ui-tabs .ui-tabs-nav li{
    margin:0 4px 4px 0!important;
    padding: 0!important;
}
input[type="text"],
input[type="password"],
input#login {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 8px;
}

#accordion input[type="text"],
#accordion input[type="password"] {
    height: 20px;
    margin-bottom: 10px;
}

#accordion table {
    width: 100%;
}
#accordion form img {
    width: 100%;
}
#accordion td {
    width: 100%;
    display: flex;
    flex-direction: column;
}
#accordion form label {
    margin-bottom: 5px;
    display: block;
}
#accordion form input {
    padding: 12px 8px !important;
    margin-bottom: 8px !important;
    width: auto !important;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:hover,
input#login:hover,
input#login:focus{
    border:2px solid #f1592a;
}
#accordion form tr:nth-of-type(7){
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
#accordion form tr:nth-of-type(7) td:nth-of-type(1) {
    display: flex;
    flex-direction: row;
}
#accordion form tr:nth-of-type(7) td input[type="checkbox"] {
    margin-right: 8px !important;
}
#accordion form tr:nth-of-type(7) td:nth-of-type(2) {
    margin-bottom: 10px !important;
    text-align: right!important;
}

#accordion form tr:last-child input:nth-of-type(1),
.forgot-pass input[type="submit"]{
    background-color:#f1592a;
    color:#fff;
    border:2px solid #f1592a;
    background-image: inherit;
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
}

.forgot-pass #accordion form tr:last-child input:nth-of-type(1){
    border:2px solid #ccc;
    background-color:#fff;
    color:#222;
    width: 230px!important;
}

.ui-accordion .ui-accordion-content-active{
    padding: 10px!important;
}

#header-menu li a {
    font-size: 14px;
    padding: 0.4em 0.4em 0.4em 8px;
}
#header-menu li a span {
    margin-right: 4px;
}
.box-summary img {
    width: 100%;
}

.ui-widget-content .list-detail a {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.ui-widget-content .list-detail a img {
    margin-right: 8px;
}

ul.col-6 {
    width: 50%;
    float: left;
}
.help-d-r.col-12 {
    width: 100%;
}
.help-d-r.col-12 p {
    width: 100%;
    float: left;
    margin: 0;
}

p {
    overflow-wrap: break-word;
}

#toc {
    display: flex;
    flex-wrap: wrap;
}

#toc li {
    margin: 0 10px 10px 0;
}

#toc li:hover a {
    color: #f47828;
}

@media only screen and (max-width: 1024px) {
    #box-img img {
        width: 80%;
    }
    .logo img {
        width: 100%;
    }
    .box-head-menu {
        width: 100%;
    }
    #header-menu {
        width: 100%;
        float: left;
        margin: 15px 0;
    }
    span.logged {
        text-align: left;
    }
    #header-menu li {
        margin: 0 5px 5px 0;
    }
    #header-menu li:first-child {
        margin: 0;
        width: 100%;
    }
    #header-menu li:first-child a {
        padding-left: 0;
    }
    #header-menu li a {
        padding: 0.4em 8px 0.4em 8px;
    }
    #header-menu li a span {
        margin-right: 4px;
    }
    #help-page {
        padding: 10px;
        margin: 0px;
    }
}

@media only screen and (max-width: 1024px) {
    .dataTables_filter input {
        height: 44px;
        border-radius: 5px;
        border: 1px solid #ccc;
        padding: 8px;
    }
    .ui-widget select {
        border: 0;
        border-radius: 3px;
        background-color: #fff;
        margin: 8px 0;
        padding: 8px;
        height: auto;
        border:2px solid #ccc;
    }
    #tabs table,
    #tabs thead,
    #tabs tbody,
    #tabs th,
    #tabs td,
    #tabs tr {
        display: block;
    }
    #tabs thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #tabs tr {
        margin: 0 0 1rem 0;
    }
    #summaryTable_wrapper tr{
        margin:0;
    }
    #tabs center,
    #tabs div {
        text-align: left;
    }

    /* #tabs tr:nth-child(odd) {
        background: #ccc;
    }*/

    #tabs td {
        /*border: none;
        border-bottom: 1px solid #eee;*/
        position: relative;
        padding-left:0;
        line-height: 34px;
        width: 100%;
    }
    /*#tabs td {
        position: relative;
        padding-left: 50%;
        line-height: 34px;
    }*/

    #myTable5 td {
        padding-left:0;
    }
    /*#myTable5 td {
        padding-left: 70%;
    }*/

    #tabs td:before {
        position:static;
        width:100%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        display: block;
    }
   /* #tabs td:before {
        position: absolute;
        top: 0;
        left: 0px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
    }*/

    td.dataTables_empty {
        padding: 0 !important;
    }
    td.dataTables_empty:before {
        display: none;
    }

    #summaryTable_wrapper tr td:nth-of-type(1):before{
        content: "Total";
    }
    #summaryTable_wrapper tr td:nth-of-type(2):before{
        content: "Records";
    }

    #myTable5 tr td:nth-of-type(1):before{
        content: "Last Update Database";
    }
    #myTable5 tr td:nth-of-type(2):before{
        content: "Total time taken to update";
    }
    #myTable5 tr td:nth-of-type(3):before{
        content: "Total number of Invoices";
    }
    #myTable5 tr td:nth-of-type(4):before{
        content: "Total number of Report Clients";
    }
    #myTable5 tr td:nth-of-type(5):before{
        content: "Total number of Client Codes";
    }
    #myTable5 tr td:nth-of-type(6):before{
        content: "Total number of Vendors";
    }

    #myTable2 tr td:nth-of-type(1):before{
        content: "Username";
    }
    #myTable2 tr td:nth-of-type(2):before{
        content: "Email";
    }
    #myTable2 tr td:nth-of-type(3):before{
        content: "Company";
    }
    #myTable2 tr td:nth-of-type(4):before{
        content: "Type";
    }
    #myTable2 tr td:nth-of-type(5):before{
        content: "Client_id";
    }
    #myTable2 tr td:nth-of-type(6):before{
        content: "Impersonate";
    }
    #myTable2 tr td:nth-of-type(7):before{
        content: "Edit";
    }
    #myTable2 tr td:nth-of-type(8):before{
        content: "Delete";
    }
    /*#myTable2 tr td:nth-of-type(6):before{
        position: static;
    }
    #myTable2 tr td:nth-of-type(6){
        padding: 0;
    }*/

    #myTable3 tr td:nth-of-type(1):before{
        content: "Typename";
    }
    #myTable3 tr td:nth-of-type(2):before{
        content: "Subtypename";
    }
    #myTable3 tr td:nth-of-type(3):before{
        content: "Caption";
    }
    #myTable3 tr td:nth-of-type(4):before{
        content: "Description";
    }
    #myTable3 tr td:nth-of-type(5):before{
        content: "Edit";
    }
    #myTable3 tr td:nth-of-type(6):before{
        content: "Delete";
    }

    /*caption table*/
    #tabs-TEST td:nth-of-type(1):before,
    #tabs-AR td:nth-of-type(1):before,
    #tabs-TAX td:nth-of-type(1):before,
    #tabs-Other td:nth-of-type(1):before {
        content: "#";
    }

    #tabs-TEST td:nth-of-type(2):before,
    #tabs-AR td:nth-of-type(2):before,
    #tabs-TAX td:nth-of-type(2):before,
    #tabs-Other td:nth-of-type(2):before {
        content: "Client";
    }

    #tabs-TEST td:nth-of-type(3):before,
    #tabs-AR td:nth-of-type(3):before,
    #tabs-TAX td:nth-of-type(3):before,
    #tabs-Other td:nth-of-type(3):before {
        content: "Name";
    }

    #tabs-TEST td:nth-of-type(4):before,
    #tabs-AR td:nth-of-type(4):before,
    #tabs-TAX td:nth-of-type(4):before,
    #tabs-Other td:nth-of-type(4):before {
        content: "Date";
    }

    #tabs-TEST td:nth-of-type(5):before,
    #tabs-AR td:nth-of-type(5):before,
    #tabs-TAX td:nth-of-type(5):before,
    #tabs-Other td:nth-of-type(5):before {
        content: "Sub Type";
    }

    #tabs-TEST td:nth-of-type(6):before,
    #tabs-AR td:nth-of-type(6):before,
    #tabs-TAX td:nth-of-type(6):before,
    #tabs-Other td:nth-of-type(6):before {
        content: "File Link";
    }

    /*Ap Table*/
    #tabs-AP td:nth-of-type(1):before,
    #myTableTEST td:nth-of-type(1):before {
        content: "#";
    }
    #tabs-AP td:nth-of-type(2):before,
    #myTableTEST td:nth-of-type(2):before {
        content: "Client";
    }
    #tabs-AP td:nth-of-type(3):before {
        content: "Vendor";
    }
    #tabs-AP td:nth-of-type(4):before {
        content: "Invoice No";
    }
    #tabs-AP td:nth-of-type(5):before {
        content: "Invoice Date";
    }
    #tabs-AP td:nth-of-type(6):before{
        content: "Invoice Amount";
    }
    #tabs-AP td:nth-of-type(7):before{
        content: "File Link";
    }

    #myTableTEST td:nth-of-type(3):before{
        content: "Name";
    }
    #myTableTEST td:nth-of-type(4):before{
        content: "Date";
    }
    #myTableTEST td:nth-of-type(5):before{
        content: "Sub Type";
    }
    #myTableTEST td:nth-of-type(6):before{
        content: "File Link";
    }

    #filenotexists td:nth-of-type(1):before{
        content: "File name";
    }
    #filenotexists td:nth-of-type(2):before{
        content: "File link";
    }
    #filenotexists td:nth-of-type(3):before{
        content: "Flag";
    }
    #filenotexists td:nth-of-type(4):before{
        content: "Action";
    }

    #myTableTEST_length label,
    #myTableAP_length label,
    #myTableTAX_length label,
    #myTableOther_length label,
    #myTableAR_length label {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 900px) {
    .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable{
        width: 95%!important;
        position: fixed!important;
        top: 50%!important;
        left: 50%!important;
        right: 0!important;
        transform: translate(-50%, -50%)!important;
        height:80%!important;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .list-info-company li label{
        min-width: 100%;
        width: 100%;
        margin-bottom: 8px;
    }
    .list-info-company li input[type="text"], .list-info-company li input[type="password"]{
        width: 100%!important;
    }
    .div a:first-child{
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    #toc li {
        overflow-wrap: break-word;
    }
    .link-zoom img {
        width: 100%;
    }
    dd img {
        width: 50px !important;
    }
    #help-page {
        width: calc(100% - 20px);
        margin: 0;
        padding: 10px;
    }
    #tabs .dataTables_processing {
        position: static;
        width: auto;
        border: 0;
        margin: 0;
        text-align: center;
        padding: 10px 0 15px 0;
    }
    .header td {
        display: block;
        width: 100%;
    }
    .header td div {
        text-align: left;
        margin-bottom: 10px;
    }
    #tabs-TEST .dataTables_wrapper {
        min-height: auto !important;
    }
    .fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-tl.ui-corner-tr.ui-helper-clearfix {
        display: flex;
        flex-direction: column;
    }
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info {
        width: 100% !important;
    }
    #myTableTEST_info,
    #myTableAP_info,
    #myTableTAX_info,
    #myTableOther_info,
    #myTableAR_info {
        text-align: left !important;
    }
    .ui-widget-header .dataTables_info,
    .fg-toolbar .dataTables_paginate {
        padding: 10px 0 !important;
    }
    .ui-tabs .ui-tabs-panel {
        padding: 0 !important;
    }
    table thead {
        display: none;
    }
}

@media screen and (max-width: 736px) {
    .eavailable-box, .eallowed-box,
    li .available-box, li .allowed-box {
        width: 100% !important;
    }
    .eicon-select-box,
    li .icon-select-box{
        padding: 20px 0!important;
    }
}

@media screen and (max-width: 667px) {
    span.max-size {
        margin-top: 8px;
        display: block;
        margin-left: 0;
    }
    .fg-toolbar .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        width: auto !important;
    }
    .fg-toolbar .dataTables_info,
    .fg-toolbar .dataTables_paginate {
        width: 100% !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 480px) {
    .forgot-pass #accordion form{
        padding: 0;
    }
    input.file_upload{
        width: 200px;
    }
    #area-upload{
        width: 100%;
        padding: 10px;
    }
    #area-upload .box-upload .box-report{
        flex-wrap: wrap;
        justify-content:flex-start;
    }
    .eavailable-box, .eallowed-box{
        width: 100% !important;
    }
    .eicon-select-box{
        padding:20px 0!important;
    }
    body{
        margin:25px 15px!important;
    }
    .box-logo {
        width: 100%;
    }
    li.login {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
    .help-detail .help-d-r,
    .help-detail .help-d-l {
        width: 100%;
    }
    #help-page .help-detail ul.box-detail {
        width: 90%;
    }
    ul.col-6 {
        width: 100%;
    }
    #help-page .help-summary .box-summary {
        width: calc(100% - 40px);
        margin: 0;
        padding: 20px;
    }
    .logo img {
        width: 100%;
    }
    #accordion,
    #accordion form {
        width: auto;
    }
    input[type="text"],
    input[type="password"] {
        border: 2px solid #ccc;
        border-radius: 5px;
    }
    #accordion form {
        margin: 0;
    }

    #footer {
        float: none !important;
    }
}

@media screen and (max-width: 435px){
    #myTable5 td:before,
    #myTable2 td:before{
        position: static;
        width: 100%;
        display: block;
    }
    #myTable5 td,
    #myTable2 td{
        padding-left: 0;
    }
}

@media screen and (max-width: 375px) {
    #area-upload .delete{
        margin: 12px 0 0 0;
        padding: 10px 34px;
        width: 100px;
        text-align: center;
    }
    .ui-button {
        margin-bottom: 0.3em;
    }
    body.help {
        margin: 15px 3.5% !important;
    }
    body {
        margin: 25px !important;
    }
    #accordion form {
        padding: 16px 8px 40px 8px;
    }
    #accordion,
    #accordion form {
        margin: 0;
    }
    .ui-tabs .ui-tabs-nav li {
        margin: 0.2em !important;
        text-align: center;
        border-radius: 5px;
        padding: 8px !important;
    }
    .ui-tabs .ui-tabs-nav li a {
        float: none;
        padding: 0;
        display: block;
        width: 100%;
    }
    .ui-tabs .ui-tabs-nav li a:focus,
    .ui-tabs .ui-tabs-nav li a:hover {
        border: 0 !important;
        text-decoration: none;
        outline: none;
    }
    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: 0.2em 0.2em 0.3em 0.2em;
    }
}

.section10 .row .owl-nav {
    width: 100%;
    text-align: center;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.section10 .row .owl-nav button {
    width: 50px;
    height: 50px;
    text-align: center;
    background-color: #fff;
    border-radius: 50px;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.16));
}

.section10 .row .owl-nav button:hover,
.section10 .row .owl-nav button:focus {
    background-color: #3393d0;
    color: #fff;
    outline: none;
}

.section10 .owl-carousel .owl-nav button.owl-prev:before {
    content: "\f053";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

.section10 .row .owl-nav button span {
    display: none;
}

.section10 .owl-carousel .owl-nav button.owl-next:before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}