/*axat-book-styles*/

.page-topbar {
    background: #505a65;
    min-height: 60px;
    max-height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 199;
    width: 100%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}


/** {
    white-space: normal;
}*/

.page-container.container-fluid {
    padding: 0;
}

#main-content-ax {
    margin-left: 200px;
    display: block;
}

.all-pages-content {
    margin-top: 60px;
    display: inline-block;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.pages-content {
    display: inline-block;
    width: 100%;
    padding: 10px 10px 0;
}

.pagesidebar {
    width: 200px;
    position: fixed;
    padding: 0px;
    background: #ffffff;
    margin-top: 60px;
    overflow-x: hidden;
    box-shadow: 0 0 0px 1px rgba(0, 0, 0, .08);
    min-height: 100%;
    height: 100%;
    z-index: 1000;
}


/*globle styles here*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', serif!important;
    font-weight: 400;
    color: #3e4042;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    background: transparent;
    border: 0;
    outline: 0;
}

.axat-logo {
    background: #ffffff;
    color: #000;
    line-height: 60px;
    width: 200px;
    display: block;
    text-align: center;
    float: left;
}

.axat-logo a img {
    width: 150px;
}

.top-node-a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -10px;
    left: 10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
}

.ax-drop-w {
    width: 100%;
    min-width: 100%!important;
}

.btn.btn-default {
    background: #fbfbfb;
    color: #505a65;
    border: 1px solid #b1b1b1;
}

.btn.active-btn {
    background: #2dd5f1;
}

.btn.small-btn {
    padding: 4px 16px;
    font-size: 13px;
    margin-top: 10px;
}

.no-br-rds {
    border-radius: 0!important;
}


/*----------------------------------------------
            Expand and collapsed style
----------------------------------------------*/


/*this class for side bar at top*/

.sidebar-collapsed {
    width: 53px;
    overflow-x: hidden;
}

.sidebar-collapsed .fill-full {
    width: 260px;
}

.sidebar-collapsed .fill-full.sidebar-nav .panel a i {
    padding-right: 50px;
}


/*this class for header beside logo */

.collapsed-logo {
    width: 53px;
    overflow-x: hidden;
}

.collapsed-logo img {
    position: relative;
    left: 11px;
}


/*this class for main content beside #main-content-ax id */

.content-collepsed {
    margin-left: 53px!important;
}


/*----------------------------------------------
            all syle
----------------------------------------------*/


/*header style*/

.info-panel {
    padding: 0 15px;
    margin: 0;
    line-height: 60px;
    min-height: 60px;
    list-style: none;
}

.info-panel li {
    float: left;
    padding: 0 5px;
}

a.sidebar-toggle {
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.info-panel li a:hover {
    background: #49535e;
    color: #fff;
}

.ui.dropdown.company-tab {
    padding: 0 10px;
}

.ui.dropdown.company-tab:hover {
    background: #49535e;
}

.ui.dropdown.company-tab:hover .text {
    color: #fff;
}

.company-tab .text {
    color: #eaf1f5;
    font-size: 13px;
}

.company-tab strong.com-hd {
    padding: 13px 10px;
    line-height: normal;
    margin: 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
    font-size: 15px;
    display: block;
    color: #505a65;
    font-weight: 500;
}

.ax-dropdown.menu {
    width: auto;
    min-width: 220px!important;
    border-radius: 0!important;
    padding: 0!important;
}

.ax-dropdown.menu a {
    padding: 13px 10px;
    float: left;
    font-size: 13px;
    color: #505a65;
    width: 100%;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: 0.5s all;
    border-bottom: 1px solid #f3f6f9;
}

.ax-dropdown.menu a:hover {
    background: #f3f6f9;
    color: #2dd5f1;
    transition: 0.5s all;
}

.ax-dropdown.menu a.mng-comp {
    background: #f4f9ff;
    border-top: 1px solid #ddd;
    text-align: center;
    color: #505a65;
    font-weight: 400;
}

.ax-dropdown.menu a.mng-comp:hover {
    background: #fff;
    color: #2dd5f1;
}

a.mng-comp i {
    padding-right: 3px;
}

a.active-com {
    position: relative;
}

a.active-com:after {
    position: absolute;
    right: 10px;
    top: 13px;
    content: "\f046";
    font-family: 'FontAwesome';
    font-size: 16px;
    color: #2dd5f1;
}


/*--side bar accordian style--*/

.sidebar-nav .panel .arrow-toggle:after {
    font-family: 'FontAwesome';
    content: "\f107";
    float: right;
}

.sidebar-nav .panel .arrow-toggle.collapsed:after {
    content: "\f105";
}

.sidebar-nav {
    margin-top: 10px;
    list-style: none;
    padding: 0;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
}

.sidebar-nav .panel {
    margin: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.sidebar-nav .panel a {
    padding: 12px 20px 12px 15px;
    color: #545454;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    display: inline-block;
    line-height: 20px;
    transition: 0.2s all;
}

.sidebar-nav .panel a i {
    font-size: 17px;
    width: 17px;
    display: inline-block;
    position: relative;
    margin-right: 4px;
    top: 2px;
    text-align: center;
}

.sidebar-nav .panel a:hover,
.sidebar-nav .panel a:focus,
.sidebar-nav .panel a:active,
.sidebar-nav .panel.active-btn a {
    text-decoration: none;
    background: #fafbfc;
    color: #00d1f4;
    transition: 0.2s all;
    position: relative;
}

.sidebar-nav .panel.active-btn a:before {
    background: #00d1f4;
    content: "";
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.sidebar-sub-nav li a {
    padding-left: 48px!important;
}

.cdk-overlay-container {
    z-index: 9999999!important;
}


/*--------invoice popup----------*/

.ui.attached.segment {
    border: none!important;
}

.form-group label {
    font-weight: 500;
    font-size: 13px;
    text-transform: capitalize;
}

.ui.secondary.pointing.menu .item {
    font-size: 13px!important;
    font-weight: 600!important;
    text-transform: uppercase
}

.ui.secondary.pointing.menu .active.item {
    border-color: #2dd5f1!important;
    color: rgb(45, 213, 241)!important;
}

.ui.selection.dropdown .menu>.item {
    font-weight: 400px;
    font-size: 13px;
}

.saveSend .ax-dropdown.menu {
    bottom: auto;
    top: -121px!important;
    right: 0;
    box-shadow: 0 -1px 3px 0 rgba(34, 36, 38, .15)!important;
    left: auto!important;
    min-width: 150px!important;
}

.saveSend .ax-dropdown.menu.top-node-a:after {
    top: auto;
    left: auto;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    border-bottom: transparent;
    right: 4px;
    bottom: -10px;
}

.add-products-ax {
    padding: 0;
}


/*----------invoice pdf style--------------*/

.print-pdf-view {
    display: none
}


/*----------Global css style--------------*/

.container-pages {
    margin-top: 50px;
}

.save-button .btn {
    display: inline-block;
    width: 150px;
}

.add-company-info.log-inn-d {
    padding: 30px 15px 30px 15px;
    background: #fff;
}

.add-company-info h3 {
    font-size: 25px;
    text-align: left;
    margin: 0 0 15px 0;
    padding: 0;
    font-weight: 300;
    color: #393d40
}

.axat-apps-panel {
    display: inline-block;
    width: 100%;
    margin-top: 30px;
}

.apps-item {
    display: inline-block;
    width: auto;
    text-align: center
}

.apps-item a img {
    width: 140px;
    border-radius: 100px;
    transition: 0.5s all;
}

.apps-item a:hover img {
    box-shadow: 0 0 4px rgba(0, 209, 244, 1);
    transition: 0.5s all;
}

.apps-item a span {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-weight: 400;
    font-size: 16px;
    color: #505a65;
}


/*----------user setting and other options styles-----------*/

ul.user-setting-bx {
    margin: 0;
    line-height: 60px;
    min-height: 60px;
    list-style: none;
}

ul.user-setting-bx li.un-items {
    float: left;
    border-left: 1px solid #68727d;
    color: #c4cdd7;
    font-size: 19px;
    height: 60px;
}

.srch-bx {
    position: relative;
}

.srch-bx input.search-input {
    background: transparent;
    border: 0!important;
    color: #c4cdd7;
    font-size: 14px;
    font-weight: 400;
}

.srch-bx input.search-input {
    width: 200px;
    transition: 0.5s all;
    padding-left: 45px;
    padding-right: 10px;
    min-height: 60px;
}

.srch-bx input.search-input:focus {
    width: 280px;
    transition: 0.5s all;
}

.srch-bx input.search-input:hover,
.srch-bx input.search-input:focus,
.srch-bx input.search-input:active {
    background: #475059;
    border: 0!important;
}

#searchBtn {
    position: absolute;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    left: 12px;
    top: 0;
}

.srch-bx:hover #searchBtn {
    color: #fff;
}

.notification-tool li .no-tool {
    padding: 0 20px;
    transition: 0.5s all;
    cursor: pointer
}

.notification-tool li .no-tool:hover {
    background: #475059;
    transition: 0.5s all;
    color: #fff;
}

#newNotification {
    position: relative;
}

.notification-count {
    position: absolute;
    right: 9px;
    top: 11px;
    z-index: 1;
    border-radius: 100px;
    background: #2dd5f1;
    text-align: center;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    height: 19px;
    width: 19px;
    line-height: 19px;
}

#addNewBtn.no-tool,
#newNotification.no-tool {
    padding: 0;
}

.mega-menu-ax,
.messages-list-ax,
.notification-drop {
    padding: 0 20px;
}

.menu.hddrop {
    min-width: 149px!important;
    float: left;
    padding: 15px!important;
    left: auto!important;
    border-radius: 0!important;
    line-height: normal;
}

.mega-menu-ax .hddrop {
    right: 0;
    /*width: 700px;*/
    width: 300px;
}

ul.mega-nav-item {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table-row;
}

ul.mega-nav-item li {
    float: left;
    /*width: 25%;*/
    width: 50%;
    border: none;
    padding: 0 15px;
}

ul.mega-nav-item li strong {
    font-size: 13px;
    font-weight: 500;
    color: #2b2828;
    margin: 0;
    padding-bottom: 10px;
    display: inline-block;
}

ul.mega-nav-item li a {
    padding: 8px 5px;
    font-size: 13px;
    font-weight: 400;
    float: left;
    color: #505a65;
    line-height: normal;
    width: 100%;
    border-bottom: 1px solid #fff;
    white-space: normal;
    transition: 0.5s all;
}

ul.mega-nav-item li a:hover {
    color: #00d1f4;
    border-bottom: 1px solid #00d1f4;
    padding-left: 13px;
    transition: 0.5s all;
}

strong.nav-hd {
    font-size: 24px;
    font-weight: 400;
    color: #505a65;
    padding: 15px;
    display: inline-block;
}

.notification-drop .hddrop {
    right: 0;
    width: auto;
    min-width: 250px!important;
    padding: 0!important;
}

.hddrop:after,
.hddrop:before {
    position: absolute;
    content: "";
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    top: -8px;
    right: 8px;
    z-index: 1;
}

.hddrop:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 9px solid #ddd;
    top: -9px;
    right: 6px;
}

.notification-drop .msg-hd {
    font-size: 16px;
    color: #34383c;
    display: inline-block;
    border-bottom: 1px solid #d3d3d3;
    font-weight: 500;
    width: 100%;
    padding: 15px 10px;
    margin: 0;
}

ul.messages-list-ax {
    padding: 0;
    float: left;
    width: 100%;
}

.messages-list-ax li {
    border: none!important;
    width: 100%;
}

.messages-list-ax a.notifi-items {
    font-size: 13px;
    font-weight: 400;
    color: #505a65;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    white-space: normal;
    width: 100%;
    float: left;
    transition: 0.5s all;
}

.messages-list-ax a.notifi-items:hover {
    background: rgba(80, 90, 101, 0.1);
    transition: 0.5s all;
}

.messages-list-ax a.notifi-items .not-fi-icon {
    float: left;
    width: 25px;
    height: 25px;
    color: #F44336;
    border-radius: 100px;
    text-align: center;
    line-height: 25px;
    font-size: 18px;
}

.messages-list-ax a.notifi-items .noto-fi-msg {
    float: left;
    width: calc(100% - 25px);
    padding-left: 10px;
    font-weight: 500;
    font-size: 12px;
}

.messages-list-ax a.notifi-items .noto-fi-msg .ntf-time {
    font-size: 12px;
    color: #868d96;
    display: inline-block;
    width: 100%;
    font-weight: 400;
}

.user-profile-image {
    cursor: pointer;
    height: 60px;
}

.us-pro-pic {
    width: 60px;
    overflow: hidden;
    height: 60px;
}

.us-pro-pic.lg-pic {
    width: 75px;
    height: 80px;
    border: 1px solid #ddd;
}

.us-pro-pic img {
    width: 100%;
}

button.change-us-pic {
    width: 100%;
    font-size: 12px;
    text-align: center;
    background: #fff;
    border: 1px solid #d2d2d2;
    color: #505a65;
    padding: 3px;
    font-weight: 300;
    transition: 0.5s all
}

button.change-us-pic:hover {
    color: #fff;
    background: #2dd5f1;
    border-color: #2dd5f1;
    transition: 0.5s all
}

.user-pro-drop .hddrop {
    right: 10px;
    width: auto;
    padding: 0!important;
}

.us-manege-st {
    padding: 25px;
    line-height: normal;
    display: inline-block;
    width: 100%;
}

.us-setting-name {
    margin-left: 95px;
    white-space: normal;
}

.us-setting-name .us-name {
    font-size: 15px;
    color: #313438;
    font-weight: 500;
    white-space: nowrap;
}

.us-setting-name .us-email {
    font-size: 12px;
    font-weight: 400;
    color: #52769c;
    display: inline-block;
    padding-bottom: 8px;
}

p.oth-info {
    font-size: 12px;
    margin: 0;
    font-weight: 400;
    padding: 2px 0;
    color: #b0b6bd;
}

p.oth-info b {
    color: #616a74;
}

.us-footer {
    width: 100%;
    background: #eff6ff;
    padding: 20px;
    display: table;
}

.table-row {
    display: table-row;
}

.us-footer strong {
    display: table-cell;
}

.us-footer a {
    color: #505a65;
    font-size: 14px;
    font-weight: 400;
    padding: 0 10px;
}

strong.sot {
    text-align: right;
}

.us-footer a.sign-out-us {
    color: #ff3b3b;
    cursor: pointer;
}

.us-footer a:hover {
    text-decoration: underline
}

a#userSettingOpt {
    display: inline-block;
    color: #c4cdd7;
}

a#userSettingOpt:hover {
    color: #fff
}


/*--------------------------------------
            header basic
--------------------------------------*/

.header-basic {
    display: inline-block;
    width: 100%;
    padding: 5px 25px;
    background: #fff;
    min-height: 45px;
    line-height: 35px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

.h-bs-nav a {
    color: #858a8d;
    margin-left: 30px;
    font-size: 13px;
    font-weight: 400;
}

.h-bs-nav a:hover {
    color: #00d1f4;
}

.us-drop-btn-bs {
    display: inline-block;
    margin-left: 30px;
    position: relative;
}

.user-button-bs {
    border: 0;
    background: transparent;
    outline: 0;
}

.user-button-bs img {
    width: 35px;
    height: 38px;
    border: 0;
    border: 2px solid #f9f9f9;
    transition: 0.5s all;
}

.user-button-bs img:hover {
    border-color: rgba(0, 0, 0, 0.3);
    transition: 0.5s all;
}

.us-dropdown-bs {
    position: absolute;
    right: 0;
    top: 45px;
    min-width: 130px;
    background: #fff;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
    line-height: normal;
    border: 1px solid #e8e8e8;
    z-index: 1;
    animation: dropdown-slide 0.5s;
}


/*animation keyframes start--------------------*/

@-webkit-keyframes dropdown-slide {
    0% {
        top: 0px;
        opacity: 0;
    }
    25% {
        top: 30;
        opacity: 0.5;
    }
    75% {
        top: 50px;
        opacity: 1;
    }
    100% {
        top: 45px;
        opacity: 1;
    }
}

@keyframes dropdown-slide {
    0% {
        top: 0px;
        opacity: 0;
    }
    25% {
        top: 30;
        opacity: 0.5;
    }
    75% {
        top: 50px;
        opacity: 1;
    }
    100% {
        top: 45px;
        opacity: 1;
    }
}


/*-------------------- end*/

.us-dropdown-bs a {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 14px;
    line-height: normal;
}

.us-dropdown-bs:after,
.us-dropdown-bs:before {
    content: "";
    position: absolute;
}

.us-dropdown-bs:after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
    right: 14px;
    top: -9px;
}

.us-dropdown-bs:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ddd;
    right: 13px;
    top: -10px;
}


/*-----------------------------------------------------
            Dashboard content style
-----------------------------------------------------*/

.dash-hader {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    line-height: 44px;
    min-height: 40px;
}

.dash-hader h2 {
    padding: 10px 0;
    font-weight: 400;
    color: #4d555d;
    font-size: 22px;
}


/*-----------------------------------------------------
            Manage company content style
-----------------------------------------------------*/

.add-n-button {
    background: #00d1f4;
    padding: 0 18px 0 18px;
    min-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #fff!important;
    display: inline-block;
    border-radius: 2px;
    line-height: 35px;
    transition: 0.5s all;
}

.add-n-button:hover {
    background: #00bad9;
    transition: 0.5s all;
}

.add-n-button i {
    font-size: 16px;
    padding-right: 5px;
    position: relative;
    top: 1px;
}

.company-column {
    background: #fff;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1);
    padding: 40px 15px;
    position: relative;
    transition: 0.5s all;
    border: 1px solid #fff;
    overflow: hidden;
}

.company-column:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    transition: 0.5s all;
    border: 1px solid #ddd;
}

.com-over-col {
    padding: 15px 15px 30px 15px;
}

.trail-alert {
    position: absolute;
    left: 0;
    top: 0;
    background: #ffaf3d;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    padding: 2px 10px;
}

.trail-alert.activated-acc {
    background: #00d1f4;
}

.com-logo-bx img {
    border: 1px solid #ececec;
    width: 230px;
    height: 115px;
}

.company-info-bx {
    padding: 25px 0;
}

h4.company-name {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    color: #373a3e;
    font-family: 'Roboto', sans-serif!important
}

.company-info-bx p {
    margin: 0;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 400;
    color: #8c8c8c;
}

.company-info-bx p b {
    color: #4f4f4f;
    font-weight: 500;
    padding-left: 5px;
}

.company-info-bx p .default-acc {
    color: #41c926;
    font-size: 13px;
    font-weight: 500;
}

.company-info-bx p .default-acc.mkit-default {
    color: #01dbff;
    font-weight: 400;
}

.dashboard-pg-link {
    background: #e3e9ef;
    border: 1px solid #ddd;
    color: #505a65;
    padding: 10px 30px;
    width: auto;
    font-size: 13px;
    font-weight: 500;
    transition: 0.5s all;
}

.dashboard-pg-link:hover {
    background: #505a65;
    border: 1px solid #505a65;
    color: #fff;
    transition: 0.5s all;
}

button.remove-company {
    background: #fff;
    padding: 8px 13px;
    right: 0;
    color: #fd8c8c;
    bottom: 0;
    position: absolute;
    font-size: 14px;
    /*display: none;*/
    /*transition: 0.5s all;*/
    animation: delete-fadeOut 0.5s;
    opacity: 0;
}

@keyframes delete-fadeOut {
    0% {
        right: 0;
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        right: -50px;
        opacity: 0;
    }
}

button.remove-company:hover {
    background: #fd8c8c;
    color: #fff;
    transition: 0.5s all;
}

.company-column:hover button.remove-company {
    opacity: 1;
    right: 0px;
    margin-right: 0;
    animation: delete-fadeIn 0.5s;
}

@keyframes delete-fadeIn {
    0% {
        right: -50px;
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        right: 0px;
        opacity: 1;
    }
}

button.company-setting-btn {
    padding: 8px 13px;
    left: 0;
    color: #505a65;
    bottom: 0;
    position: absolute;
    font-size: 14px;
    overflow: hidden;
    width: 39px;
    white-space: nowrap;
    transition: 0.5s all;
}

button.company-setting-btn i {
    padding-right: 10px;
    transition: 0.5s all;
}

button.company-setting-btn:hover i {
    padding-right: 2px;
    transition: 0.5s all;
    color: #505a65;
}

button.company-setting-btn:hover {
    color: #00d1f4;
    width: 87px;
    transition: 0.5s all;
}

.crt-n-company-btn .hddrop {
    padding: 5px 0!important;
    min-width: 300px!important;
    left: auto!important;
    right: 0!important;
}

.crt-n-company-btn .ad-com-nav li a {
    width: 100%;
    display: inline-block;
    padding: 10px 15px;
    color: #505a65;
    font-weight: 400;
    font-size: 13px;
    text-decoration: none;
    transition: 0.5s all;
}

.crt-n-company-btn .ad-com-nav li a i {
    padding-right: 4px;
}

.crt-n-company-btn .ad-com-nav li a:hover {
    background: #fcfcfc;
    color: #00d1f4;
    transition: 0.5s all;
}

.nv-info {
    font-size: 11px;
    font-weight: 300;
    display: block;
    color: #8c98a5;
    width: 100%;
    padding-left: 18px;
    padding-top: 3px;
}


/*-----------------------------------------------
             create new company
------------------------------------------------*/

.company-creation {
    margin-bottom: 100px;
}

.company-creation-form {
    background: #fff;
    padding: 40px;
}

.info-form {
    font-size: 12px;
    color: #a5a5a5;
    padding-top: 3px;
    display: inline-block;
    font-weight: 300;
}

.add-company-logo {
    width: 190px;
    min-height: 150px;
    max-height: 190px;
    overflow: hidden;
    margin-top: 25px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    line-height: 150px;
}

.add-company-logo img {
    height: 100%;
    width: 100%;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}

.add-company-logo .change-us-pic {
    padding: 9px;
    font-size: 15px;
    font-weight: 400;
}

.n-address-location {
    margin-top: 20px;
}

.n-address-location h3 {
    font-size: 20px;
    font-weight: 300;
    color: #333;
    margin: 0 0 5px;
}

.form-wizard {
    display: table;
    width: 100%;
}

.form-wizard span {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 300;
    color: #777777;
    float: left;
    background: #ececec;
    border-bottom: 1px solid #f7f7f7;
}

.form-wizard span.active {
    background: #fff;
    color: #505a65;
    font-weight: 400;
}

.help-alert i {
    font-size: 12px;
    text-align: center;
    border-radius: 100px;
    border: 1px solid #00d1f4;
    width: 18px;
    height: 18px;
    color: #00d1f4;
    margin-left: 5px;
    line-height: 17px;
}

sui-popup .ui.inverted.popup {
    background: #505a65;
    color: #fff;
    border: none;
    box-shadow: none;
    padding: 10px;
    border-radius: 2px;
}

sui-popup .ui.popup {
    font-size: 11px;
    font-weight: 300;
}

sui-popup .ui.inverted.popup .arrow {
    background: #505a65;
}


/*---footer-fixed---*/

.footer-fixed-bottom {
    position: fixed;
    bottom: 0;
    width: calc(100% - 200px);
    background: #fff;
    padding: 15px;
    border-top: 0 solid #ddd;
    box-shadow: 0 -4px 5px -3px rgba(0, 0, 0, 0.2);
    min-height: 60px;
    height: auto;
    text-align: right;
    line-height: 38px;
}


/*-------------scrollbar--------*/

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
    background-color: #f3f6f9;
}

body::-webkit-scrollbar {
    width: 6px;
    background-color: #f3f6f9;
}

body::-webkit-scrollbar-thumb {
    background-color: #a4aeb7;
}


/*----------taxes page-------------*/

.select-opt-field {
    display: inline-block;
    width: 100%;
}

label.rd-field {
    float: left;
    margin-right: 15px;
}

label.rd-field input[type="radio"] {
    margin-right: 5px;
}

label.register-GST {
    font-size: 14px;
    color: #2dd5f1;
    font-weight: 400;
    padding-bottom: 5px;
}

.select-opt-field label.rd-field {
    font-size: 12px;
    font-weight: 400;
}

.no-value-default h6 {
    font-size: 14px;
    color: #505a65;
    font-weight: 400;
}

.no-value-default ul {
    padding-left: 15px;
}

.no-value-default ul li {
    list-style: circle;
    font-size: 13px;
    font-weight: 400;
    color: #858586;
}

.no-value-default {
    background: #edf4fb;
    padding: 10px 20px 20px;
    margin: 20px 0;
}

.hb-br {
    border-bottom: 1px solid #ddd;
}

a.info-form {
    display: inline-block;
    width: 100%;
}

.hd-txt-sm {
    font-size: 15px;
    font-weight: 600;
    border-top: 1px solid #ddd;
    padding: 20px 0 5px;
}


/*----------feature page-------------*/

h2.fe-hd-md {
    font-size: 20px;
    font-weight: 300;
    color: #505a65;
    margin-top: 20px!important;
}

h2.fe-hd-md span {
    font-size: 13px;
    display: block;
    width: 100%;
    margin-top: 5px;
    font-family: 'Roboto';
}

.fe-select-bx label {
    width: 100%;
    display: block;
    margin-bottom: 15px;
}

.fe-select-bx label input {
    margin: 0 8px 0 0;
    position: relative;
    top: 2px;
}

.short-info {
    display: block;
    width: 100%;
    padding-left: 19px;
    font-size: 12px;
    font-weight: 300;
    color: #808080;
}

.selectdatatime {
    display: block;
}

.Inventory-sdate label {
    width: 100%;
    display: block
}

.form-group.Inventory-sdate {
    display: inline-block;
    background: #f1f1f1;
    padding: 10px 20px;
}


/*---------- company setting-------------*/

.link-btn {
    font-size: 12px;
    color: #00d1f4;
}

.txtbasis label {
    display: block;
    width: 100%;
}

.add-placeholder-txt {
    position: relative;
}

.add-placeholder-txt input.form-control {
    padding-left: 254px;
}

.page-url-link {
    position: absolute;
    left: 15px;
    top: 9px;
    font-size: 13px;
    color: #777;
}

.f-bottom {
    text-align: center;
    margin-top: 15px;
}

.f-bottom button {
    margin-left: 15px;
}


/*---------------invoice list page -----------------*/

.invoice-list {
    background: #fff;
    padding: 15px;
    display: inline-block;
    width: 100%;
}

.fl-blocks {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.blocks-items {
    background: #fff;
    padding: 10px;
    border: 1px solid #d5dbe2;
    display: inline-block;
    width: 100%;
    transition: 0.5s all;
    cursor: pointer;
    min-height: 85px;
}

.blocks-items:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: #00d1f4;
    transition: 0.5s all;
}

.blocks-items:hover .blc-hd {
    color: #fff
}

.blocks-items:hover .blc-value {
    color: #fff
}


/* .blocks-items.paid-bx {
    background: #00d3f431;
}

.blocks-items.low-stock {
    background: #c5b4432d;
}

.blocks-items.out-stock {
    background: #c5734327;
} */


/* .blocks-items.paid-bx span,
.blocks-items.paid-bx strong,
.blocks-items.low-stock strong,
.blocks-items.out-stock strong {
    color: #fff;
} */

.sm-hd-blck {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    color: #9fa7af;
    display: inline-block;
    width: 100%;
}

.blc-hd {
    font-size: 14px;
    color: #505a65;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    margin: 5px 0 20px;
}

.blc-value {
    font-size: 25px;
    float: right;
    color: #505a65;
    font-weight: 500;
}

.blc-value .money-sym {
    font-size: 24px;
    font-weight: 400;
}

.filter-lbl label {
    width: 100%;
}

.md-datepicker {
    position: relative
}

.md-datepicker button.mat-datepicker-toggle {
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent
}

.filter-by-date {
    display: inline-block;
    margin-left: 10px;
}

.days-filter {
    display: inline-block;
}

.calender-filt {
    display: inline-block;
}

.from-date,
.to-date {
    display: inline-block;
    
}

.filter-lbl input[type="text"],
.filter-lbl input.form-control,
.filter-lbl select.form-control,
.filter-lbl textarea.form-control,
.filter-lbl .ui.selection.dropdown {
    min-width: 150px;
    width: auto;
    border: 1px solid #ddd !important;
    min-height: 30px;
    background: #f7f7f7;
    color: #505a65;
}

.filter-lbl input[type="text"]:hover,
.filter-lbl input.form-control:hover,
.filter-lbl select.form-control:hover,
.filter-lbl textarea.form-control:hover,
.filter-lbl .ui.selection.dropdown:hover,
.filter-lbl input[type="text"]:focus,
.filter-lbl input.form-control:focus,
.filter-lbl select.form-control:focus,
.filter-lbl textarea.form-control:focus,
.filter-lbl .ui.selection.dropdown:focus {
    border: 1px solid #00d1f4 !important;
}

.calender-filt .md-datepicker input.form-control {
    min-height: 35px;
    line-height: normal;
}

.calender-filt .md-datepicker button.mat-datepicker-toggle {
    top: 6px;
}

.filter-pnl {
    /*margin-bottom: 15px;*/
    display: inline-block;
    width: 100%;
}

.sales-drop .text {
    margin: 8px 0 0;
    padding: 0px 0 0;
}

.sales-drop .text i {
    font-size: 20px;
}

.new-transcation-drop .hddrop {
    padding: 0!important;
    right: 0;
}

.new-transcation-drop .hddrop a {
    cursor: pointer
}

.tax-g-tb tr th:last-child,
.tax-g-tb tr td:last-child {
    text-align: right
}

.tax-g-tb input[type="checkbox"] {
    min-height: 0
}

.edit-tg-tb tr th:last-child,
.edit-tg-tb tr td:last-child {
    width: 20px;
}

.edit-tg-tb tr td:nth-child(3) input {
    text-align: right
}


/*--------globle style here-----------*/

.left-drop-nb .hddrop {
    padding: 0!important;
    left: 0;
    right: auto;
}

.left-drop-nb .hddrop:after,
.left-drop-nb .hddrop:before {
    border: none;
}

.right-drop-nb .hddrop {
    padding: 0!important;
    right: 0;
    left: auto;
}

.right-drop-nb .hddrop:after,
.right-drop-nb .hddrop:before {
    border: none;
}


/*------------All list table here-------------------*/

.list-table-ax tr th:last-child,
.list-table-ax tr td:last-child {
    text-align: right
}

.send-msg {
    margin-right: 15px;
    font-size: 13px;
}

.cust-seachbox {
    display: inline-block;
    position: relative;
}

.cust-seachbox input.form-control {
    border: 1px solid #b1b1b1!important;
    background: #fff;
    min-height: 35px;
    padding-right: 20px;
    min-width: 270px;
}

.cust-seachbox i.fa.fa-search {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #9ca4ad;
}

img.pro-img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    border: 1px solid #ddd;
}


/*------------------invoice page css style here---------------*/

.invoice-form .form-control {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-size: 13px;
    height: 38px;
}

.invoice-form .ui.selection.dropdown {
    border: 1px solid #c1c7cd;
    border-radius: 0;
    width: 100%;
}

.adn-custmor sui-select,
.adn-custmor .add-n-custmor {
    float: left;
}

.add-bnt-cs {
    border: 1px solid #c1c7cd;
    padding: 0 10px;
    border-left: 0;
    height: 38px;
    background: #fff;
}

.add-bnt-cs span {
    font-size: 33px;
    font-weight: 400;
    line-height: 36px;
    color: #5c656f;
}

.add-n-custmor h3 {
    font-size: 18px;
    font-weight: 300;
}

.cust-adus label,
.cust-adus input {
    float: left;
    width: 100%;
    justify-content: initial;
}

.cust-adus input {
    border: 1px solid #c1c7cd;
    border-radius: 0;
    padding: 7px;
    margin-bottom: 10px;
}

.ad-n-btn {
    padding: 12px 10px;
    background: #f1f1f1;
    border: 0;
    width: 100%;
    text-align: left;
}

.save-bnt-pop {
    border: 1px solid #c1c7cd;
    color: #4e6d7e;
}

.save-bnt-pop:hover {
    color: #fff;
}

span.admr-dtl {
    color: #0e86c6;
    padding-right: 10px;
}

.ui.popup {
    min-width: 357px;
}

.md-datepicker {
    position: relative
}

.md-datepicker button.mat-datepicker-toggle {
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent
}

.invoice-form .form-group {
    /*margin-bottom: 25px;*/
}

textarea.textarea-fi {
    height: 65px!important;
    resize: none
}

.form-group.cust-adus {
    display: inline-block;
    margin: 0;
    width: 100%;
}

.add-nom-bx {
    width: 100%;
    display: inline-block;
    padding: 0 0 0 20px;
}

.field.no-rbtn {
    margin-top: 10px;
}

.no-rbtn strong {
    font-weight: 600;
    font-size: 13px;
    padding-left: 20px;
    padding-bottom: 10px;
    display: block;
}

.total-value {
    background: #fff;
    padding: 20px;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0 0px rgba(0, 0, 0, 0.1);
}

.total-value h5 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    color: #73808e;
}

h2.pay-value {
    font-size: 25px;
    color: #000;
    font-family: Roboto;
    margin-top: 8px;
}

h2.pay-value span {
    color: #828282;
    font-weight: 300;
    font-size: 20px;
}

.datatable-value {
    margin-top: 10px;
    padding: 15px;
    background: #fff;
    /*margin-left: 15px;
    margin-right: 15px;*/
    margin-bottom: 95px;
}

.datatable-st {
    margin-bottom: 15px;
}

.upload-new-doc {
    margin: 20px 0;
}

.upload-new-doc input[type="file"] {
    background: #f3f3f3;
    border: 1px dashed #656565;
    padding: 20px 10px 20px 30px;
    width: 100%;
    height: auto;
}

.form-control {
    border-radius: 0;
    line-height: normal!important;
}

.add-n-row-tbl button.btn {
    color: #4e6d7e;
    border: 1px solid rgba(78, 109, 126, 0.42);
    font-size: 13px;
    text-transform: none;
    padding: 4px 10px;
    box-shadow: none;
    border-radius: 0;
}


/*.add-n-row-tbl button.btn:hover {
    color: #fff;
}*/

.all-total-pay {
    background: #f9f9f9;
    padding: 5px 20px;
}

p.all-t-list,
div.all-t-list {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    display: flex;
    width: 100%;
    font-size: 14px;
    color: #505a65;
}

p.all-t-list:last-child {
    border: none;
}

.all-t-list span {
    width: 40%;
    display: inline-block;
    font-weight: 400;
    text-align: left;
}

.all-total-pay strong {
    font-family: Roboto;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #505a65;
    width: 60%;
}

.amout-w-tax label {
    font-size: 13px;
    font-weight: 500;
    margin-right: 10px;
    color: #565656;
}

.discount-pnl {
    display: inline-flex;
    width: 60%;
}

.discount-pnl select.form-control {
    margin-right: 10px;
}

.amout-w-tax .ui.selection.dropdown {
    min-height: auto;
    padding: 8px;
    border: none;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 13px;
    color: #565656;
    min-width: 180px;
}

.new-customer .ax-modal-box {
    width: 800px;
}

.ax-txt-bx {
    width: 100%;
    position: relative;
    padding: 15px 0;
}

.ax-txt-bx label {
    padding: 5px 0;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    color: #596e78;
    font-family: Roboto;
    width: 100%;
}

.cc-bcc-email {
    border: none;
    background: transparent;
    padding: 0;
    font-weight: 400;
    color: #14cef1;
    position: absolute;
    left: 70px;
    top: 15px;
    font-size: 12px;
}

.ax-txt-bx .ui.selection.dropdown,
.ax-txt-bx .form-control {
    /*border: none!important;
    box-shadow: none!important;*/
    padding: 10px;
    width: 100%;
}

.ax-txt-bx .label-warning {
    margin-left: 11px;
    border-radius: 1px;
    position: absolute;
}

.discount-pnl input[type="text"] {
    width: 50px;
    float: left;
}

.discount-pnl .ui.selection.dropdown {
    min-height: 35px;
    border-radius: 0;
    padding: 10px;
    height: 35px;
    float: left;
    min-width: 50px;
    background: #f1f1f1;
    border-left: none;
}

.discount-pnl sui-select {
    width: 60px;
}

.discount-pnl sui-select span {
    text-transform: none;
}

.invoice-footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 200px);
    background: #fff;
    padding: 15px;
    border-top: 0 solid #ddd;
    box-shadow: 0 -4px 5px -3px rgba(0, 0, 0, 0.2);
    min-height: 60px;
    height: auto;
    text-align: right;
    line-height: 38px;
}

.field .checkbox-inline input {
    height: auto;
    margin-top: 2px;
    min-height: auto;
}

span.checkbox-inline {
    font-weight: 500;
}

span.checkbox-inline input {
    height: auto;
    min-height: auto
}

.invoice-popup-form-ax select,
.invoice-popup-form-ax input,
.invoice-popup-form-ax textarea {
    border: 2px solid #c5c5c5;
    box-shadow: none;
    min-height: 35px;
    height: auto;
    font-weight: 400;
    color: #2f2f2f;
    font-size: 13px;
}

.invoice-popup-form-ax textarea {
    height: 80px;
}

.invoice-popup-form-ax .ax-drop-w {
    min-height: 38px;
    border-radius: 0;
    height: 38px;
    border: 1px solid #c5c5c5;
    font-weight: 400;
    color: #2f2f2f;
    font-size: 13px;
}

.addCard {
    border: 1px solid #2dd5f1;
    color: #505a65;
    font-size: 12px;
    padding: 5px 10px;
    text-transform: none;
    margin-top: 5px;
}

.addCard:hover {
    border: 1px solid #505a65;
}

.more-info-tbax {
    display: inline-block;
    width: 100%;
    background: #fafafa;
}

.more-info-tbax .ui.tab {
    background: #fafafa;
}

.address-rt-pd {
    padding-right: 25px;
}

.address-lf-pd {
    padding-left: 25px;
}

#addCardModal {
    background: rgba(0, 0, 0, 0.4);
}

.ft-link a {
    color: #505a65;
    font-size: 12px;
    font-weight: 500;
    padding-right: 15px;
    text-decoration: none;
}

.ft-link a:hover {
    color: #00d1f4;
}

.saveSend {
    float: right;
    background: #20c3de;
    position: relative;
    padding: 6px 12px;
    line-height: normal;
    font-size: 19px;
    margin-top: 2px;
    color: #fff;
    border-radius: 0 4px 4px 0;
    transition: 0.5s all;
}

.saveSend:hover {
    background: #505a65;
    transition: 0.5s all
}

.save-send-btn {
    display: inline-block;
    margin: 0 10px;
}

.save-send-btn .btn {
    border-radius: 4px 0 0 4px;
}


/*-----add products ----*/

.upload-products {
    margin-bottom: 20px;
}

p.pro-hd-ax {
    font-size: 13px;
    font-weight: 300;
    color: #6a6c6d;
    background: #f2fbfd;
    padding: 5px 10px;
    margin-bottom: 15px;
}


/*-----print-preview modal-----*/

.print-preview .modal-dialog {
    width: 900px;
}


/*---------receive payment------------*/

.credit-card input[type="checkbox"] {
    width: auto!important;
    margin-top: 1px;
    margin-right: 5px;
}


/*--------------------------------------
            Material Custom style
-------------------------------------*/

.mat-cust .mat-select-underline,
.mat-cust .mat-input-underline,
.mat-cust .mat-input-ripple {
    background-color: transparent!important;
}

.mat-select-panel {
    box-shadow: 0 0 0 rgba(0, 0, 0, .2)!important;
    border: 1px solid #ddd
}

.mat-select-trigger,
.mat-option {
    font-size: 13px!important;
}

.mat-option {
    line-height: 35px!important;
    height: 35px!important;
}

.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow,
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-trigger {
    color: #00d1f4!important;
}

.mat-cust .mat-input-infix {
    border: none!important
}

.all-t-list.nr-txt-ax span {
    display: inline-block!important;
    width: 100%!important;
    font-weight: 500!important;
    font-size: 12px;
    color: #626d79;
}

.all-t-list.nr-txt-ax strong {
    font-weight: 500!important;
    font-size: 14px!important;
    color: #626d79;
}

.blocks-items.blk-hpd strong.blc-hd {
    margin-top: 0;
}

.blocks-items.blk-hpd strong.blc-value {
    margin-top: 20px;
}


/*-------------------------------
        add products styles
------------------------------*/

.add-products-tbs .mat-tab-labels {
    display: table!important;
    table-layout: fixed;
    width: 100%;
}

.add-products-tbs .mat-tab-label {
    min-width: auto!important;
    display: table-cell;
    line-height: 48px;
}

.view-all-customer.ui.dropdown {
    min-width: 160px!important;
    border: none!important;
}

.view-all-customer.ui.dropdown input,
.view-all-customer.ui.dropdown input:hover,
.view-all-customer.ui.selection.dropdown:hover,
.view-all-customer.ui.selection.dropdown:focus {
    border: none!important;
}

.view-all-customer.ui.dropdown>.text {
    font-weight: 500;
    color: #4d555d;
    font-size: 20px;
}

.view-all-customer.ui.dropdown>.dropdown.icon {
    font-size: 18px;
    top: 8px!important;
}

sui-tabset.more-info-tbax.cust-dt-tb,
sui-tabset.more-info-tbax.cust-dt-tb .ui.tab {
    background: #fff;
}

.cust-pic {
    display: inline-block;
    width: 100%;
}

.customer-details-ax {
    background: #fff;
    margin-bottom: 20px;
}

span.cut-name-ax {
    font-size: 22px;
    line-height: normal;
    padding: 10px;
    display: inline-block;
    font-weight: 300;
}

.cust-pic img {
    vertical-align: top;
    width: 70px;
    height: 80px;
}

.more-info-ax {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
}

.user-pic-st-ax {
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 15px 0;
}

.cu-nm {
    font-size: 16px;
    font-weight: 400;
    margin: 10px 0 5px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.act-ax-st a {
    font-size: 12px;
    padding: 0 5px;
    color: #909294;
}

.act-ax-st a:hover {
    color: #00d1f4;
}

.more-info-ax p {
    margin: 0 0 5px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 0 5px;
}

.more-info-ax p:last-child {
    border: none;
    padding: 0;
    margin: 0;
}

.more-info-ax p span,
.more-info-ax p b {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: #636567;
}

.more-info-ax p b {
    color: #000!important;
}

.address-at-ax {
    border: 1px solid #ddd;
    padding: 5px 15px 15px;
    margin: 15px 0;
}

.cust-address-ax {
    padding: 10px 0 0;
}

.cust-address-ax strong {
    padding: 0 0 5px;
    display: inline-block;
    font-weight: 500;
    color: #505a65;
}

.cust-address-ax p {
    font-size: 13px;
    color: #737980;
    font-weight: 400;
}

.cust-address-ax b {
    display: block;
    color: #0cd3f1;
    font-weight: 500;
}

.line-chart-data {
    width: 100%;
    background: #fff;
    margin-top: 20px;
}

.line-chart-data img {
    width: 100%;
}

.in-txt-vl {
    font-size: 14px;
}

.edit-cutomer-page {
    background: #fff;
    padding: 20px;
    margin-bottom: 100px;
}

.table.add-n-person tr th {
    font-size: 13px;
    font-weight: 500;
}

button.ad-n-cp {
    font-size: 13px;
    color: #00d1f4;
}

.pro-hd-st {
    padding: 0 0 10px;
    display: inline-block;
    font-weight: 400;
    color: #3b3f44;
    font-size: 16px;
}

.more-detail-pd {
    padding: 15px;
    background: #fff;
    margin-bottom: 20px;
}

.more-detail-pd .table {
    margin-bottom: 0;
}

.more-detail-pd strong {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    display: block;
    color: #505a65;
}


/*----------dashboard design-----------*/

.dash-col {
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* box-shadow: 0 2px 0px rgba(0, 0, 0, .1); */
    background: #fff;
    padding: 20px;
    min-height: 250px;
}

.dash-hd {
    color: #505a65;
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 25px;
    display: block;
}

.access-point {
    padding: 20px 0;
    display: block;
    font-size: 16px;
    text-align: center;
    color: #919599;
}

.access-point i {
    font-size: 70px;
    display: block;
    padding-bottom: 5px;
}

.access-point:hover {
    color: #00d1f4;
}

span.price-title {
    font-size: 13px;
    font-weight: 300;
    color: #374c4f;
}

p.price-dtl {
    color: #919599;
    font-size: 16px;
    font-weight: 400;
}

span.price-vlu {
    color: #374c4f;
}

.small-txt span.price-title {
    color: #919599;
}

.small-txt p.price-dtl {
    font-size: 16px;
}

.br-rt {
    border-right: 1px solid #ddd;
}

.small-txt {
    margin-top: 40px;
}


/*.bank-bx {
    position: relative;
}*/

.bank-st {
    margin-top: 20px;
    border-bottom: 1px solid #ddd;
}

.add-n-bank {
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    left: 30px;
}

.mb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.small-txt.no-mrg {
    margin-top: 0;
}

.income-p span.price-title {
    color: #00d1f4
}

.exp-p span.price-title {
    color: #a569aa
}

.more-options {
    position: absolute;
    right: 16px;
    top: 0px;
}

.more-options button.mat-button {
    border-radius: 100px;
    height: 38px;
    padding: 0;
    margin: 0;
    color: #505a65;
    font-size: 15px;
    min-width: 38px;
}

.btn.mat-button.back-btn {
    background: #ddd;
}

.save-button {
    margin-top: 20px;
}


/*----style 23 October 2017-------*/

.bill-form {
    background: #fff;
}

.mat-input-container {
    width: 100%;
}

.mat-input-infix {
    padding: 0!important;
}

.alert {
    padding: 5px;
    margin-bottom: 20px;
    position: absolute;
    border: 1px solid transparent;
    border-radius: 2px;
    z-index: 99;
    width: 100%;
}

.form-inline .sm-w-txt.form-control {
    width: 80px!important;
}


/* .ax-table .datatable-st{
    table-layout: fixed;
} */

.ax-table .datatable-st th {
    font-weight: 500;
    color: #505a65;
}

.delete-icon button.btn {
    background: transparent;
    border: none;
    padding: 5px;
    vertical-align: middle;
}

td.delete-icon {
    text-align: center;
    vertical-align: middle!important;
    padding: 0;
}

.check-box-ax {
    margin-bottom: 15px;
}

.pro-sku {
    font-size: 11px;
    margin-top: 5px;
}

.pro-sku a {
    float: right;
}

.pro-min-w {
    width: 25%;
}

.sm-w-ax.form-control {
    width: 70px;
}

input.sm-w-ax.form-control {
    width: 70px!important;
}

md-select.w-10-md {
    width: 100%;
}

.add-btn-st {
    display: inline-block;
    cursor: pointer;
    text-transform: none;
    font-weight: 400;
    font-size: 12px;
}

.add-row-bnt {
    display: flex;
}

.add-row-bnt button.btn {
    margin-right: 10px;
}

.w-100 {
    width: 100%;
}

.add-flex-ax {
    display: flex;
}

.add-flex-ax select.form-control {
    margin-right: 10px;
}

.mat-radio-label-content {
    text-transform: none;
}

.bottom-m-90 {
    margin-bottom: 95px;
}

div.all-t-list {
    display: block;
    width: 100%;
}

div.all-t-list span {
    display: block!important;
    width: 100%!important;
}

.discount-pnl {
    display: flex;
    width: 100%;
}

.discount-pnl .form-control:nth-child(2) {
    margin-right: 10px;
}

.mr-rt-10 {
    margin-right: 10px;
}

.invoice-row {
    display: flex;
    font-family: 'Roboto', sans-serif;
}

.n-0 {
    padding: 0;
}

.invoice-rt-bx {
    border-left: 1px solid #ddd;
    padding: 30px;
}

li.invoice-li-item {
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

li.invoice-li-item:hover,
li.invoice-li-item.active {
    background: #fbfbfb;
}

.in-hd-mn {
    display: flex;
    width: 100%;
}

.date-vlu {
    color: #9a9a9a;
    font-size: 13px;
    font-weight: 300;
}

h4.in-user-name {
    font-size: 13px;
    margin: 0 0 6px;
    color: #505a65;
    font-weight: 500;
    width: 100%;
}

span.title {
    width: 100%;
    font-size: 13px;
    color: #2dd5f1;
    font-weight: 300;
    flex: 1;
}

.otr-vlu {
    display: flex;
}

span.pay-sta {
    font-size: 12px;
    color: #b5b5b5;
    font-weight: 300;
    padding-right: 10px;
}

mat-icon.mat-icon.material-icons {
    width: 25px!important;
    text-align: center;
    height: 23px!important;
    line-height: 21px;
    font-size: 15px;
}

.open-a-invoice {
    position: relative;
}


/* ----payment color options--- */

.sticker-paid {
    position: absolute;
    top: 0;
    left: 0;
}

.sticker-paid span {
    color: #fff;
    padding: 3px 15px;
    font-size: 13px;
    position: absolute;
    z-index: 1;
    transform: rotate(-45deg);
    text-align: center;
    width: 100%;
    left: 3px;
    top: 27px;
}

.sticker-paid:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 90px solid #21ba45;
    position: absolute;
    border-right: 90px solid transparent;
    font-weight: 500;
    left: 0;
    top: 0;
}

.overdue-color:after {
    content: "";
    border-top: 90px solid #ba3821;
}

.partial-payment-color:after {
    content: "";
    border-top: 90px solid #bab721;
}

.due-color:after {
    content: "";
    border-top: 90px solid #ba6b21;
}


/* ----payment color options--- */

.col-ax-3 {
    float: left;
    width: 190px;
}

.dropdown-pds {
    min-height: 36px;
}


/* --------add new contact popup style--------- */

.new-customer.add-new-contact .ax-modal-box {
    width: calc(100% - 200px);
    z-index: 15;
}

.no-ny-effect .form-control {
    border: transparent;
    box-shadow: none;
    padding-left: 0;
}

.no-ny-effect {
    margin-bottom: 10px;
}

.import-cus-sec {
    text-align: center;
    padding: 60px 0
}

.import-cus-sec h3 {
    font-weight: 400;
    margin-bottom: 30px !important
}

.import-cus-sec form {
    border: 1px dashed #eee;
    padding: 40px 0
}

.import-cus-sec form button {
    margin-top: 20px
}

.import-cus-sec form input {
    display: inline-block
}

.add-marg-btm {
    margin-bottom: 80px;
}

.bill-dt .mat-form-field-infix {
    border-top: transparent!important;
}

.bill-dt button.mat-icon-button {
    position: relative;
    top: 4px;
    right: 10px;
}

.nw-chk-bx {
    display: grid!important;
    grid-template-columns: 20px auto;
}

.nw-chk-bx input#disabledTextInput {
    position: relative;
    top: 4px;
}

.sticky-hd {
    position: fixed;
    width: calc(100% - 200px);
    z-index: 2;
}

.sti-ad-margin {
    margin-top: 50px;
}

.pro-sub-hd {
    font-size: 20px;
    margin-top: 10px;
    font-weight: 300;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .form-inline .form-control,
    .form-inline .form-group {
        width: 100%!important;
    }
}

.adcu-in .form-group {
    margin-bottom: 10px;
}

.gst-tr p {
    display: grid;
    grid-template-columns: auto 100px;
    text-align: right;
}

.gst-tr p strong {
    font-weight: 400;
}

.hilight-div {
    margin-top: 40px;
}

.view-div-st {
    background: #f9f9f9;
    padding: 10px 15px 0;
    margin-bottom: 15px;
}

p.info-txt {
    font-size: 12px;
}

.form-group {
    position: relative;
}

.right-txt {
    text-align: right
}

.report-pnl {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding: 25px 10px;
    grid-template-rows: auto;
    grid-gap: 20px;
}

.re-item-li {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-gap: 10px;
}

.report-opt h4 {
    font-size: 20px;
    font-weight: 300;
    padding: 0;
    margin: 0 0 10px;
}

.report-opt {
    background: #fbfbfb;
    padding: 10px;
}

a.re-blg {
    padding: 30px 10px;
    display: grid;
    text-align: center;
    transition: 0.5s all;
}

.re-blg i {
    font-size: 50px;
    color: #9a9a9a;
    padding-bottom: 10px;
}

.re-blg.active,
.re-blg.active i {
    color: #21ba45
}

a.re-blg:hover {
    background: #505a65;
    color: #fff;
    transition: 0.5s all;
}

a.re-blg:hover i {
    color: #fff
}

.y-n-radio-bnt .rd-bnt {
    margin-right: 12px;
}

.save-button.top-br {
    border-top: 1px solid #ddd;
    padding-top: 15px;
}

.gst-form-st {
    display: grid;
    grid-template-columns: 35% auto;
}

.rd-btn label {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 10px;
}

.form-group.rd-btn {
    margin-bottom: 10px;
}

.in-rd-bnt label {
    font-size: 16px;
    text-transform: none;
    font-weight: 400;
    color: #4c4c4c;
    width: 100%;
}

.pro-unit {
    font-size: 13px;
    color: #00d1f4;
}

.no-ny-effect mat-radio-group.form-control {
    margin-top: 0;
    padding-top: 0;
}

span.rupees {
    width: auto;
}


/*-- navigation dropdown style-- */

.ax-dropdown {
    position: relative;
}

.dropdown-menu {
    background: #fff;
    line-height: normal;
    border: 1px solid #e8e8e8;
    border-radius: 1px;
    z-index: 1;
}


/* -------today add style------- */

span.price-sym {
    font-size: 12px;
}

select.gst-txt-vlu.form-control {
    width: 100px!important;
    padding: 6px!important;
}

.mrbn {
    margin-bottom: 0!important;
}

.cash-flow-bx {
    display: inline-block;
    width: 100%;
}

@media (max-width: 1380px) {
    .o-line-12 {
        float: left;
        width: 100%;
    }
    .o-line-12 .br-rt {
        border-right: none!important;
    }
    .small-txt {
        margin-top: 10px;
    }
    .dash-col {
        min-height: 260px;
    }
}

.in-ex-vlu {
    padding-left: 30px;
}

.in-ex-vlu .br-rt {
    border-right: none;
    border-bottom: 1px solid #ddd;
}

.in-ex-vlu .small-txt {
    margin-top: 15px;
}


/* ------materials css------- */

.moreview .mat-menu-item {
    border-bottom: 1px solid #f1f1f1;
    color: #505a65;
    font-size: 14px;
}

.moreview .mat-menu-item:last-child {
    border-bottom: transparent;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
html,
body {
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.aca-content {
    padding: 2.2rem 0
}

.aca-admin-widget {
    padding: 2.2rem;
}

.sec-bg {
    -webkit-box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.08);
    -moz-box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.08);
    box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.08);
    background-color: #ffffff;
}

.aca-admin-widget .aca-admin-widget_item {
    padding: 1.1rem 0;
    border-bottom: 0.07rem dashed #ebedf2;
}

.aca-admin-widget .aca-admin-widget_item:last-child {
    border: 0
}

.aca-admin-widget .aca-admin-widget_item.boxed {
    border: 1px solid #d7dfe3 !important;
    border-radius: 4px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    padding: 15px;
}

.aca-admin-widget .aca-admin-widget_item.boxed:last-child {
    margin-bottom: 0
}

.aca_item_block {
    margin-left: 0;
    margin-right: 0;
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
}

.aca-admin-widget .aca-admin-widget_item.boxed .aca_item_block .col:first-child {
    flex-grow: 0;
    margin-right: 15px
}

.aca-admin-widget .aca-admin-widget_item.boxed .aca_item_block .col i {
    font-size: 40px
}

.tuaca {
    position: relative;
    width: 200px;
    margin: 0 auto;
    margin-top: 30px;
    border: 1px solid #d7dfe3 !important;
    border-radius: 4px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px;
}

.tuaca h3 {
    color: #3f4047;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0;
}

.tuaca:after {
    content: '';
    width: 0;
    height: 225px;
    position: absolute;
    border: 1px solid #d7dfe3;
    top: 74px;
    left: 100px;
}

.tuaca span {
    font-size: 1.5rem;
    font-weight: 600;
    display: block;
    color: #858a8d
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.aca_item_title {
    color: #3f4047;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0;
}

.aca_item_desc {
    display: inline-block;
    margin-top: 0.21rem;
    font-size: 1rem;
    font-weight: 300;
    color: #9699a2;
}

.aca-userlist {
    margin-top: 2.2rem;
}

.tabl-head {
    display: table;
    padding: 0;
    width: 100%;
    padding: 0 2.2rem;
    height: 5.1rem;
    border-bottom: 1px solid #ebedf2;
}

.tabl-head h3 {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3rem;
    font-weight: 500;
}

.aca_font_blue {
    color: #00d1f4;
    font-size: 1.5rem;
    font-weight: 400;
    display: block
}

.aca_font_green {
    color: #34bfa3;
    font-size: 1.5rem;
    font-weight: 400;
    display: block
}

.aca_font_red {
    color: #f4516c;
    font-size: 1.5rem;
    font-weight: 400;
    display: block
}

.aca-admin-widget .aca-admin-widget_item.boxed {
    position: relative
}

.aca-admin-widget .aca-admin-widget_item.boxed:hover .arrow-overlay {
    display: block;
    position: absolute;
    z-index: 2;
    right: 0
}

.arrow-overlay i {
    font-size: 40px;
    color: #858a8d;
    font-weight: 300
}

.arrow-overlay {
    display: none
}

.aca-tbldata label.mat-checkbox-layout {
    margin: 0 !important
}

.aca-tbldata .mat-checkbox-inner-container {
    width: 18px !important;
    height: 18px !important
}
.company-info {
    font-size: 13px;
}
.form-group.filter-lbl>div, .form-group.filter-lbl .cust-seachbox {
    margin-right: 10px;
}


.form-group.filter-lbl select.form-control {
    height: 35px;
}

.chckbox input[type=checkbox] {
    margin: 0 6px 0 0;
    position: relative;
    padding: 0;
    top: 12px;
}

.n-u-role .mat-tab-body-content{
    min-height: 500px;
}

/* For Summary of Paid Transaction */
.transactions-history-sec {
    position: relative;
    min-height: 83px;
    top: 50px;
    z-index: 1;
}

.transactions-history-sec .transaction-details .mat-tab-body-wrapper {
    background: rgba(255, 255, 255, 0.5);
    padding: 15px
}

.transactions-history-sec .transaction-details .mat-tab-body-wrapper .table>tbody>tr>th {
    border-bottom: 1px solid #ddd;
    border-top: 0
}

.transactions-history-sec .transaction-details .mat-tab-body-wrapper .table {
    margin: 0
}

.ed-grp i {
    margin: 0 5px
}


.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar,
.mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: #00d1f4 !important;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #00d1f4 !important;
}

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: rgba(0, 209, 244, .26);
}
/* End */



/* ===========Project CSS Start=========== */

.time-sheet-header
{
width: 100%;
background-color: #fff;
}


.nav-tabs {
border-bottom: 1px solid #fff;
width: 80%;
}

.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
color: #444;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #30daf3;
cursor: default;
border-bottom: 3px solid #64e3f6 !important;
border: 1px solid #fff;
}

#time-project {
width: 100%;
max-width: 100%;
margin-bottom: 100px;
margin-top: 20px;
}

.time-middle
{
background-color: #fff;
}

.new-project
{
background-color: #fff;
width: 15%;
float: right;
}

.all-projects
{
width: 98.5%;
background-color: #fff;
margin: 0 auto;
margin-top: 8px;
}

.add-new-project
{
color: #fff;
font-size: 18px;
margin: 2px 5px 0px 5px;
}

.new-project button
{
width: 80%;
background-color: #12d4f1;
color: #fff;
font-weight: 500;
font-size: 15px;
text-align: left;
border: 1px solid #fff;
border-radius: 2px;
height: 46px;
margin: 5px 0px 5px 0px;
}



.demo-tab-group {
border: 1px solid #e8e8e8;
}

.demo-tab-content {
padding: 16px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #ffffff;
}

.form-horizontal.project-new
{
    width: 80%;
}

.form-horizontal.project-new .control-label {
    padding-left: 31px;
    margin-bottom: 0;
    text-align: left;
}

.customer-name
{
    width: 92%;
    height: 34px;
    border: 1px solid #c5c5c5;
}

.billing-method
{
    width: 100%;
    height: 34px;
    border: 1px solid #c5c5c5;
}

.prj-new-search
{
        font-size: 20px;
    background-color: #0cd3f1;
    color: #fff;
    padding: 6px 10px 9px 11px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    float: right;
    margin: -35px -39px 0px 0px;
}

.form-horizontal .checkbox.prj-new-checkbox
{
    float: right;
    width: 52%;
    margin: 10px 0px 0px 0px;
}

.all-projects h2
{
    font-size: 21px;
    text-align: left;
    padding: 2px 0px 0px 30px;
    color: #5d5d5d;
    font-weight: 500;
}

.prj-new-user
{
    background-color: #fff;
        width: 60%;
    float: left;
    margin-left: 25px;
}


.prj-new-add-user button
{
    width: 100%;
    background-color: #ffffff;
    color: #00d1f4;
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 35px;
    margin: 5px 0px 5px 0px;
}

.add-new-proj {
    color: #00d1f4;
    font-size: 18px;
    margin: 2px 5px 0px 5px;
}

.prj-new-add-user
{
    background-color: #fff;
    width: 20%;
    float: left;
}


.prj-new-checkboxs
{
    float: left;
    width: 52%;
    margin: 0px 0px 0px 30px;
}

.prj-new-save
{
    width: 7%;
    background-color: #04cdeb;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    float: left;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 37px;
    margin: 5px 0px 50px 30px;
    padding: 5px 0px 5px 20px;
}


.billable-checkbox {
    float: left;
    margin: 8px 0px 0px 0px;
    font-weight: 400;
    width: 70px
}

.icon-delete
{
    font-size: 15px;
    border: 1px solid #fff;
}

.prj-new-cancel
{
   width: 8%;
    background-color: #c4c5c6;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    float: left;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 37px;
    margin: 5px 0px 50px 10px;
    padding: 5px 0px 5px 20px;
}

/*------Log Time Starts-------*/


.log-time
{
   width: 50%;
   margin: 0 auto;
}

.form-horizontal.log-time
{
   width: 100%;
}

.form-horizontal.log-time label
{
   font-size: 14px;
   text-align: left;
   width: 30%;
   padding: 10px 0px 5px 15px;
   color: #5b5e5f;
}

.log-time-buttons
{
   width: 50%;
   float: left;
   margin: 8px 0px 10px 15px;
}

/*-------Log Time Ends-------*/

/*-----Project View Starts-----*/

.prj-view-left
{
    width: 27%;
    background: #f9f9f9;
    float: left;
    margin: 30px 0px 0px 15px;
    padding-bottom: 121px;
}

.prj-view-user
{
    font-size: 35px;
    color: #737272;
    float: left;
    margin: 5px 0px 0px 5px;
}

.prj-view-left span
{
    font-size: 22px;
    padding: 0px 0px 0px 21px;
    color: #04b2cc;
    line-height:50px;
    font-weight: 400;
}

.prj-view-project
{
    font-size: 26px;
    color: #484848;
    float: left;
    margin: 20px 0px 0px 5px;
}

.prj-view-left h6
 {
    font-size: 19px;
    color: #888686;
    text-align: left;
    padding: 13px 0px 0px 50px;
}

.prj-view-left h2
{
    font-size: 17px;
    color: #737171;
    font-weight: 400;
    text-align: right;
    padding: 0px 126px 0px 0px;
}

.prj-view-left h3
{
    font-size: 15px;
    color: #444;
    font-weight: 500;
    text-align: left;
    padding: 6px 0px 30px 50px;
}

.prj-view-right
{
    background: #fff;
    float: left;
    margin: 30px 0px 0px 15px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.prj-view-right h1
{
    font-size: 21px;
    color: #737272;
    font-weight: 450;
    text-align: left;
    padding: 15px 0px 0px 10px;
}

.prj-view-right h2
{
    font-size: 16px;
    color: #6f6f6f;
    font-weight: 400;
    text-align: left;
    padding: 0px 0px 5px 15px;
}

.prj-view-right h3
{
    font-size: 16px;
    font-weight: 500;
    color: #00d2f5;
    text-align: left;
    padding: 0px 0px 0px 40px;
    margin-bottom:-30px;
}

.prj-view-right h4
 {
    font-size: 16px;
    color: #737272;
    font-weight: 400;
    text-align: left;
    padding: 0px 0px 0px 15px;
}

.prj-views-tb
{
    width: 100%;
    margin-top: -20px;
}

.prj-view-add-user
{
    background-color: #fff;
    width: 10%;
    float: right;
    margin-right: 21px;
}

.prj-view-add-user button
{
    width: 100%;
    background-color: #ffffff;
    color: #00d1f4;
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 35px;
    margin: 5px 0px 5px 0px;
}

.prj-views-add-user
{
    background-color: #fff;
        width: 100%;
    float: left;
    margin-right: 21px;
}

.prj-views-add-user button
{
    width: 100%;
    background-color: #ffffff;
    color: #00d1f4;
    font-weight: 400;
    font-size: 15px;
    text-align: left;
    border: 1px solid #fff;
    border-radius: 5px;
    height: 35px;
    margin: 5px 0px 5px 0px;
}

.form-horizontal.add-user label {
    font-size: 14px;
    text-align: left;
    width: 100%;
    padding: 10px 0px 5px 15px;
    color: #5b5e5f;
}

/*-----Project View Ends-------*/

/*---------prj-purchase-list Starts----------*/

.prj-purchase-list{
    width: 97.5%;
        margin-top: 4%;
}

.prj-purchase-box
{
     border:1px solid #fff;
}

#status-all
{
    width: 13%;
    float: right;
}

#all-button:hover
{
    float: right;
    background: #fbfbfb;
    color: #0078f4;
    padding-bottom: 1px;
    margin-top: -7px;
    border:1px solid #fbfbfb;
}

.status
{
    font-size: 14px;
    color: #525252;
    font-weight: 500;
    float: left;
    margin-left: 45px;
}

#all-button
{
    float: right;
    background: #fbfbfb;
    color: #0078f4;
    padding-bottom: 1px;
    margin-top: -7px;
}

.date-prj
{
    color: #e40505;
    text-align: right;
    padding-right: 7px;
}

.down-arrow
{
    font-size: 20px;
    float: left;
    margin: -5px 5px 0px 1px;
}

/*----------prj-purchase-list Ends-------------*/

/*-------Grids Starts--------*/
#list-grid
 {
    width: 16%;
    float: right;
}

.list-home {
    width: 105%;
    float: left;
    margin-left: -27px;
}

.grids
{
    font-size: 17px;
    float: left;
    margin: 0px 8px 0px 0px;
    color: #848488;
}

.lists
{
    font-size: 16px;
    float: left;
    margin: 0px 8px 0px 0px;
    color: #848488;
}

.grid-box
{
   width: 240px !important;
    float: left;
    background-color:#fdfdfd;
    margin: 40px 26px 0px 0px;
    box-shadow: 2px 2px 5px #e6e4e4;
    padding-bottom: 2%;
    margin-bottom: 5%;
    padding-top: 2%;
    border-radius: 5px;
    border: 1px solid #f7f7f7;
}


.grid-box h1
{
    font-size: 25px;
    color: #00d1f4;
    font-weight: 300;
    text-align: center;
}

.grid-box h2
{
    font-size: 16px;
    color: #06b8d6;
    font-weight: 300;
    text-align: left;
    margin-top: -7px;
    padding-left: 50px;
}


.grid-box h3
 {
    font-size: 19px;
    text-align: center;
    padding-top: 25px;
    color: #757373;
    font-weight: 400;
}


.grid-box h4
{
    text-align: center;
    margin-top: 5px;
    color: #656464;
}

.grid-box button
{
    background: #f9f7f7;
    padding: 5px 10px 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #444;
    font-weight: 500;
    float: left;
    margin-left: 6px;
        font-size: 13px
}

/*-------Grids Enfs--------*/


/* ===========End of the Project========== */

.modals {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-contents {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.prj-slaes-22
{
    width: 97.5%;
    float: right;
    margin-right: 40px;
    margin-bottom: 50px
}