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--------*/


/*--------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;
}



/*--------Customer/Vendor Show--------*/
.show-transaction-card-header
{
    padding: 1.14rem;
}

.show-transaction-card-footer
{
    padding: 1.15rem;
}

.edit-sv
{
    margin-bottom: 30px;
}
/*--------Customer/Vendor Show Finish--------*/


/*--------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--*/


/*--------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--------*/


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

/*--------Border--------*/
.border-1
{
    border: 1px solid #e5e5e5 !important;
}
/*--------Border 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--------*/


/*--------Company Name--------*/
.d-grid
{
    display: grid !important;
}
/*--------Company Name 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--------*/


/*--------Table Layout Fixed--------*/
.table-layout-fixed
{
    table-layout: fixed;
}
/*--------Table Layout Fixed 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;
}

.btn-delete{
    width: 73.10px;
}

.btn-confirm
{
    width: 86px;
}
/*--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--------*/


/*--------Pagination Alignment--------*/
.page-item .page-link, .page-item span
{
    align-items: unset;
    padding-top: 7px;
}
/*--------Pagination Alignment Finish--------*/


/*--------Akaunting Style Table Column--------*/
.col-aka
{
    margin-left: -51px;
}
/*--------Akaunting Style Table Column 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--------*/


/*--------Font Size 1--------*/
.font-size-1
{
    font-size: 1rem !important;
}
/*--------Font Size 1 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;
}
/*--------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--------*/


/*--------Add Item Show--------*/
.item-show
{
    min-width: 253px;
    border-radius: 0.4375rem;
}
/*--------Add Item Show 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.50 !important;
}

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

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


/*--------Font Size 50--------*/
.font-size-50
{
    font-size: 50px !important;
}
/*--------Font Size 50 Finish--------*/

/*--------Report Column--------*/
.report-column
{
    max-width: 100px;
    width: 160px !important;
}
/*--------Report Column Finish--------*/


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

/*--------Empty Page Image--------*/
.empty-image
{
    height: 300px;
}
/*--------Empty 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--*/


/*--Left Menu Stabilize--*/
.g-sidenav-show .sidenav {
    max-width: 250px !important;
  }

  .g-sidenav-show .sidenav .navbar-brand,
  .g-sidenav-show .sidenav .navbar-heading {
    display: block;
  }

  .g-sidenav-show .sidenav.fixed-left + .main-content {
    margin-left: 250px;
  }

  .g-sidenav-show .sidenav.fixed-right + .main-content {
    margin-right: 250px;
  }

  .g-sidenav-show .sidenav {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  .sidenav-show .navbar-top .navbar-brand {
    display: none;
  }
  /*--Left Menu Stabilize 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: .875rem;
        padding: .425rem 1.25rem;
        margin-top: 0.4rem;
        margin-bottom: -1rem;
    }

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

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

    .header-button-bottom
    {
        width: 100%;
        height: 40px;
        font-size: .875rem;
        padding: .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;
    }

    .empty-image
    {
        height: 200px;
    }

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

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

    .left-menu-toggle-position
    {
        margin-left: 2rem !important;
    }

    .dashboard-action
    {
        float: right;
    }

    .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;
    }

    .g-sidenav-show .sidenav
    {
        display: none !important;
    }

    .g-sidenav-show.g-sidenav-hidden .sidenav
    {
        display: none !important;
    }

    .g-sidenav-show.g-sidenav-pinned .sidenav
    {
        display: block !important;
    }
}
/*--Xs Breakpoint Finish--*/

/*--Sm Breakpoint--*/
@media (min-width: 576px) and (max-width: 767.98px)
{
    .dashboard-action
    {
        margin-left: 4rem !important;
    }
}
/*--Sm Breakpoint Finish--*/

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

    .dashboard-action
    {
        margin-left: 3rem !important;
    }
}
/*--Md Breakpoint Finish--*/

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

    .dashboard-action
    {
        margin-left: 1rem !important;
    }
}
/*--Lg Breakpoint Finish--*/
/*--------Responsive Finish--------*/

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