akaunting/public/css/custom.css

@font-face {
    font-family: element-icons;
    src: url("./../fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff")
            format("woff"),
        url("./../fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf")
            format("truetype");
    font-weight: 400;
    font-display: "auto";
    font-style: normal;
}

/*--Layout Content--*/
.content-layout {
    max-width: 1300px !important;
}
/*--Layout Content Finish--*/

/*--------Cursor Styles--------*/
/*--Cursor Pointer--*/
.cursor-pointer {
    cursor: pointer !important;
}
/*--Cursor Pointer Finish--*/

/*--Cursor Default--*/
.cursor-default {
    cursor: default !important;
}
/*--Cursor Pointer Finish--*/
/*--------Cursor Styles Finish--------*/

/*--------Border Radius Styles--------*/
/*--Border Radius None--*/
.border-radius-none {
    border-radius: 0 !important;
}
/*--Border Radius None Finish--*/

/*--Border Radius Default--*/
.border-radius-default {
    border-radius: 0.25rem !important;
}
/*--Border Radius Default Finish--*/
/*--------Border Radius Styles Finish--------*/

/*--------Overflow Styles--------*/
/*--Overflow Y Hidden--*/
.overflow-y-hidden {
    overflow-y: hidden !important;
}
/*--Overflow Y Hidden Finish--*/

/*--Overflow Y Scroll--*/
.overflow-y-scroll {
    overflow-y: scroll !important;
}
/*--Overflow Y Scroll Finish--*/

/*--Overflow X Hidden--*/
.overflow-x-hidden {
    overflow-x: hidden !important;
}
/*--Overflow X Hidden Finish--*/

/*--Overflow X Scroll--*/
.overflow-x-scroll {
    overflow-x: scroll !important;
}
/*--Overflow X Scroll Finish--*/
/*--------Overflow Styles Finish--------*/

/*--------Akaunting Backgrounds--------*/
/*--Login Page Background--*/
.login-page {
    background: url("../img/login.png") no-repeat center center fixed;
    height: 100%;
    width: 100%;
    padding: 5% 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
/*--Login Page Background Finish--*/

/*--Wizard Page Background--*/
.wizard-page {
    background: url("../img/login.png") no-repeat center center fixed;
    height: 100%;
    width: 100%;
    padding: 5% 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
/*--Wizard Page Background Finish--*/

/*--Installation Page Background--*/
.installation-page {
    background: url("../img/login.png") no-repeat center center fixed;
    height: 100%;
    width: 100%;
    padding: 5% 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
/*--Installation Page Background Finish--*/
/*--------Akaunting Backgrounds Finish--------*/

/*--------Credit Card--------*/
.card-input__input:hover,
.card-input__input:focus {
    border-color: #55588b !important;
}
/*--------Credit Card Finish--------*/

/*--------Custom Toggle--------*/
.custom-toggle {
    width: 60px;
}

.custom-toggle input:checked + .status-green:before {
    left: 10px;
}

.custom-toggle-slider:after {
    top: -1px;
}
/*--------Custom Toggle Finish--------*/

/*--Button Element Focus--*/
button:focus {
    outline: none !important;
}
/*--Button Element Focus Finish--*/

/*--Button Hover--*/
.btn:hover {
    transform: translateY(0px);
}
/*--Button Hover Finish--*/

/*--------Chart Donut Height--------*/
.chart-donut {
    position: relative !important;
    height: 23vh !important;
}
/*--------Chart Donut Height Finish--------*/

/*--------Wizard Steps--------*/
.wizard-header {
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}
/*--------Wizard Steps Finish--------*/

.dropup .dropdown-toggle::after {
    display: none !important;
}

.role-list {
    text-overflow: ellipsis;
    overflow: hidden;
}

/*--------Navbar Notification--------*/
.nav-link .badge-update {
    position: absolute;
    top: 15%;
    margin-left: -0.2rem;
    transform: translateY(50%);
    width: 1rem !important;
    height: 1rem !important;
    font-size: 0.5rem;
}

.nav-link .badge-reminder {
    position: absolute;
    top: -59%;
    margin-left: -0.35rem;
    transform: translateY(50%);
    width: 1rem !important;
    height: 1rem !important;
    font-size: 0.5rem;
}
/*--------Navbar Notification Finish--------*/

/*--------Index Page Tables--------*/
.table-responsive {
    overflow-x: visible !important;
}
/*--------Index Page Tables Finish--------*/

/*--------Left Menu--------*/
.menu-dropdown {
    position: absolute !important;
    left: 1.2rem;
}

.menu-dropdown-width {
    min-width: 13rem !important;
}

.g-sidenav-hidden .navbar-vertical.navbar-expand-xs {
    overflow: hidden !important;
}
/*--------Left Menu Finish--------*/

/*--------Max Width 100 Pixel--------*/
.mwpx-100 {
    max-width: 100px !important;
}
/*--------Max Width 100 Pixel Finish--------*/

/*--------Form Group--------*/
.form-group.visible-field .form-control {
    background-color: #fff;
}
/*--------Form Group Finish--------*/

/*--Long Texts--*/
.long-texts {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*--Long Texts Finish--*/

/*--Akaunting Column Style--*/
.col-aka {
    margin-left: -51px;
}
/*--Akaunting Column Styl Finish--*/

/*--------Table Head Row Margin--------*/
.thead-light .row {
    margin: 0;
}
/*--------Table Head Row Margin Finish--------*/

/*--------Table Head Column Letter Spacing--------*/
.table thead th {
    letter-spacing: 0;
}
/*--------Table Head Column Letter Spacing Finish--------*/

/*--------Table Body Row Margin--------*/
.table,
tbody .row {
    margin-right: 0;
    margin-left: 0;
}
/*--------Table Body Row Margin Finish--------*/

/*--------Item Column Image--------*/
.item-img {
    width: 38px;
    height: 38px;
}
/*--------Item Column Image Finish--------*/

/*--------User Column Image--------*/
.user-img {
    width: 36px;
    height: 36px;
}
/*--------User Column Image Finish--------*/

/*--------Border--------*/
.border-1 {
    border: 1px solid #e5e5e5 !important;
}
/*--------Border Finish--------*/

/*--------Border Top--------*/
.border-top-1 {
    border-top: 1px solid #e9ecef !important;
}
/*--------Border Top Finish--------*/

/*--------Border Bottom--------*/
.border-bottom-1 {
    border-bottom: 1px solid #e9ecef !important;
}
/*--------Border Bottom Finish--------*/

/*--------Border Top Style--------*/
.border-top-style {
    border-top-style: hidden !important;
}
/*--------Border Top Style Finish--------*/

/*--------Border Bottom Style--------*/
.border-bottom-style {
    border-bottom-style: hidden !important;
}
/*--------Border Bottom Style Finish--------*/

/*--------Invoice Bill Show Table Position--------*/
.show-table {
    margin-right: -2.5rem !important;
    margin-left: -2.5rem !important;
}
/*--------Invoice Bill Show Table Position Finished--------*/

/*--------Table Head Line--------*/
.table-head-line {
    line-height: 26px;
}

.table tbody + tbody {
    border-top: 1px solid #e9ecef;
}
/*--------Table Head Line Finish--------*/

/*--Display Grid--*/
.d-grid {
    display: grid !important;
}
/*--Display Grid Finish--*/

/*--------Card Header Bulk Action--------*/
.d-none.show {
    display: flex !important;
}

.form-group.d-none.show {
    display: unset !important;
}

.btn .d-none.show {
    display: inherit !important;
}
/*--------Card Header Bulk Action Finish--------*/

/*--------Card Action Button--------*/
.card-action-button {
    position: absolute;
    right: 0;
    z-index: 1;
}
/*--------Card Action Button Finish--------*/

/*--Akaunting Button Animation--*/
.aka-loader-frame {
    width: 59.88px;
    height: 31px;
}

.aka-loader {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    animation: aka-loader 0.7s ease alternate infinite;
    animation-delay: 0.28s;
    top: -13px;
    margin: -10px auto 0;
}

.aka-loader::after,
.aka-loader::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: aka-loader 0.8s ease alternate infinite;
}

.aka-loader::before {
    left: -15px;
    animation-delay: 0.14s;
}

.aka-loader::after {
    right: -15px;
    animation-delay: 0.42s;
}

@keyframes aka-loader {
    0% {
        box-shadow: 0 28px 0 -28px #ffffff;
    }

    100% {
        box-shadow: 0 28px 0 #ffffff;
    }
}

.btn-outline-confirm:disabled span {
    opacity: 1 !important;
}

.btn .aka-loader {
    display: none !important;
}

.btn:disabled span {
    opacity: 0;
}

.btn:disabled .aka-loader {
    display: block !important;
}
/*--Akaunting Button Animation Finish--*/

/*--------Settings Index Page--------*/
/*--------Settings Icons--------*/
.settings-icons {
    position: relative;
    top: -0.4rem;
    height: 45px;
    width: 45px;
    padding-top: 10px;
}
/*--------Settings Icons Finish--------*/

/*--------Settings Button Focus--------*/
.btn-icon-clipboard:focus {
    outline: none;
}
/*--------Settings Button Focus Finish--------*/

/*--------Shadow None Focus--------*/
.shadow-none--hover:focus {
    box-shadow: none !important;
}
/*--------Shadow None Focus Finish--------*/
/*--------Settings Index Page Finish--------*/

/*--------Avatar Size--------*/
.avatar-size {
    width: 128px;
    height: 128px;
    font-size: 4.5rem;
}
/*--------Avatar Size--------*/

/*--------Button Disabled Hover--------*/
.btn:disabled:hover {
    box-shadow: none !important;
}
/*--------Button Disabled Hover Finish--------*/

/*--------Recurring Inputs--------*/
.recurring-single {
    margin-top: 29px !important;
}
/*--------Recurring Inputs--------*/

/*--------Invoice and Bill Total Column--------*/
.total-column {
    padding-top: 1.75rem !important;
}

.item-total {
    width: 15%;
}
/*--------Invoice and Bill Total Column Finish--------*/

/*--------Custom Table--------*/
.table thead th {
    border-bottom: 0;
}

.table-flush tbody tr td {
    border: 0 !important;
}
/*--------Custom Table Finish--------*/

/*--------Height 0--------*/
.h-0 {
    height: 0 !important;
}
/*--------Height 0 Finish--------*/

/*--------Editor Text--------*/
.ql-editor p {
    font-size: 0.775rem !important;
    margin-bottom: 0 !important;
}
/*--------Editor text Finish--------*/

table .align-items-center td span.badge {
    height: 24px;
    padding-top: 8px;
    font-size: 9px;
}

/*--------Print Template--------*/
.choose {
    cursor: pointer;
}

.choose:hover > img {
    opacity: 0.5 !important;
}

.bg-print {
    background-color: rgba(229, 229, 229, 0.4) !important;
}

.print-edge {
    width: 140px;
}
/*--------Print Template Finish--------*/

/*--------Report Column--------*/
.report-column-name {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    width: 10%;
    max-width: 10%;
}

.report-column-value {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 6.66%;
    flex: 0 0 6.66%;
    max-width: 6.66%;
}
/*--------Report Column Finish--------*/

/*--------App Comment--------*/
.media-comment-text {
    border-top-left-radius: 0.4375rem;
    padding: 1rem;
}
/*--------App Comment Finish--------*/

/*--------Blank Page Image--------*/
.blank-image {
    height: 300px;
}
/*--------Blank Page Image Finish--------*/

/*--------Text Pre Nowrap--------*/
.text-pre-nowrap {
    white-space: pre-wrap !important;
}
/*--------Text Pre Nowrap Finish--------*/

/*--------Table Without toggle button--------*/
.tr-py {
    padding-top: 5px;
    padding-bottom: 5px;
}
/*--------Table Without toggle button Finish--------*/

/*--------Table No Records--------*/
.nr-py {
    padding-top: 5px;
    padding-bottom: 5px;
}
/*--------Table No Records Finish--------*/

/*--------From Group Disabled--------*/
.form-group.disabled .input-group-text,
.form-group.readonly .input-group-text {
    background-color: #e9ecef;
}
/*--------From Group Disabled Finish--------*/

/*--------Modal Dialog Resizing--------*/
@media (min-width: 576px) {
    .modal-payment .modal-dialog {
        max-width: 559px !important;
    }
}
/*--------Modal Dialog Resizing Finish--------*/

/*--Save Buttons Responsive--*/
.save-buttons {
    float: right !important;
}
/*--Save Buttons Responsive Finish--*/

/*--Index Pages Badge Min Width--*/
.mw-60 {
    min-width: 60px;
}
/*--Index Pages Badge Min Width Finish--*/

/*--Quantity Width--*/
.w-10 {
    width: 10%;
}
/*--Quantity Width Finish--*/

/*--Discount Width--*/
.w-12 {
    width: 12%;
}
/*--Discount Width Finish--*/

/*--------Responsive--------*/
/*--Xs Breakpoint--*/
@media (max-width: 575.98px) {
    .col-xs-1 {
        width: 8.33%;
    }
    .col-xs-2 {
        width: 16.66%;
    }
    .col-xs-3 {
        width: 25%;
    }
    .col-xs-4 {
        width: 33.33%;
    }
    .col-xs-5 {
        width: 41.66%;
    }
    .col-xs-6 {
        width: 50%;
    }
    .col-xs-7 {
        width: 58.33%;
    }
    .col-xs-8 {
        width: 66.66%;
    }
    .col-xs-9 {
        width: 75%;
    }
    .col-xs-10 {
        width: 83.33%;
    }
    .col-xs-11 {
        width: 91.66%;
    }
    .col-xs-12 {
        width: 100%;
    }

    .btn-alone {
        width: 100%;
        height: 40px;
        font-size: 0.875rem;
        padding: 0.425rem 1.25rem;
        margin-top: 0.4rem;
        margin-bottom: -1rem;
    }

    .header-button-top {
        width: 100%;
        height: 40px;
        font-size: 0.875rem;
        padding: 0.425rem 1.25rem;
        margin-top: 16px;
    }

    .header-drop-top {
        display: block !important;
    }

    .header-button-bottom {
        width: 100%;
        height: 40px;
        font-size: 0.875rem;
        padding: 0.425rem 1.25rem;
        margin-top: 0.5rem;
        margin-bottom: -1rem;
    }

    .footer-texts {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        font-size: 0.75rem !important;
    }

    .blank-image {
        height: 200px;
    }

    .col-aka {
        margin-left: 0;
    }

    .left-menu-toggle {
        display: block !important;
        padding-top: 0.4rem !important;
    }

    .dashboard-action {
        float: right;
    }

    .dropdown-menu-xs-left {
        right: auto;
        left: 0 !important;
    }

    .dropdown-menu-xs-right {
        right: 0 !important;
        left: auto;
    }

    .pagination-xs {
        padding-right: 0;
        padding-top: 1.5rem;
    }

    .el-range-editor.el-input__inner {
        width: 100% !important;
        margin-top: 1rem;
    }

    .save-buttons {
        float: none !important;
    }
}
/*--Xs Breakpoint Finish--*/

/*--Sm Breakpoint--*/
@media (min-width: 576px) and (max-width: 767.98px) {
}
/*--Sm Breakpoint Finish--*/

/*--Md Breakpoint--*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .sidenav .navbar-nav .dropdown-menu {
        left: 1rem !important;
    }
}
/*--Md Breakpoint Finish--*/

/*--Lg Breakpoint--*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidenav .navbar-nav .dropdown-menu {
        left: 1rem;
    }
}
/*--Lg Breakpoint Finish--*/
/*--------Responsive Finish--------*/

/*--------Menu Fix--------*/
.navbar-vertical .navbar-nav .nav-link:hover:not(.active) {
    color: #fff;
}

.navbar-vertical .navbar-nav .nav-link:hover:not(.active) {
    color: #fff;
}

.navbar-vertical .navbar-nav .nav-link.active i {
    color: #161842 !important;
}

@media (min-width: 1200px) {
    .g-sidenav-show #panel {
        margin-left: 250px;
    }
}

@media (max-width: 991.98px) {
    .g-sidenav-show.g-sidenav-hidden .sidenav {
        max-width: 62px !important;
    }
}

.g-sidenav-show .sidenav {
    max-width: 250px !important;
}

.scrollbar-inner {
    width: 100%;
}

.scrollbar-inner .sidenav-header {
    padding: 0 24px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.g-sidenav-pinned #sidenav-collapse-main {
    display: block;
}

@media (min-width: 1200px) {
    .g-sidenav-pinned .navbar-vertical.navbar-expand-xs {
        max-width: 250px !important;
    }
}

@media (min-width: 768px) {
    .navbar-vertical .navbar-collapse:before {
        content: "";
        display: block;
        margin: 0;
    }
}

.navbar-vertical.navbar-expand-xs {
    position: fixed;
    top: 0;
    bottom: 0;
    display: block;
    overflow-y: auto;
    width: 100%;
    max-width: 62px;
    padding-right: 0;
    padding-left: 0;
}

.navbar-vertical .navbar-nav .nav-link:not(.active) {
    color: #fff !important;
}

.form-group.has-error .el-input__inner {
    border-color: #ef3232 !important;
}