/* 
    Created on : 2020
    Author     : shaban chamba
*/

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 1050px}

/* Set background color and 100% height */
.sidenav {
  background-color: #f1f1f1;
  height: 100%;
}

/* On small screens, set height to 'auto' for the grid */
@media screen and (max-width: 767px) {
  .row.content {height: auto;} 
}

/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {
  margin-bottom: 0;
  border-radius: 0;
}

/* Add background color and some padding to the footer */
footer {
  background-color: #f2f2f2;
  padding: 25px;
}

.pointer{
    cursor: pointer
}

.pwell {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

body{
    background-color: #f5f5f5;
    font-size: 12px;
    font-family:monospace
}

.errMsg{
    color:red; font-size:10px 
}

.infoMsg{
    color:lightblue; font-size:10px 
}

.custDetail{
    height: auto;
    background-color: #fff
}

.trans-receipt{
    height: auto; 
    background-color: #fff;
	
}
@media print { .modal-dialog { max-width: 100%; width: 100%; } }
@media print {
         
          #print-content * {
            visibility: visible;
            overflow: visible;
          }
          #mainPage * {
            display: none;
          }
          .modal {
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            min-height: 550px;
            visibility: visible;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }
          .modal-dialog {
            visibility: visible !important;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }
          p {
            page-break-after: auto;
          }
        }
.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: scrollbar;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0);
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
    background-color:#C8D1E1;
}

.latestStuffsBody{
    font-size: 3em;
    color: #fff;
    height: 100px;
}

.latestStuffsText{
    font-size:15px
}

.navbarIcons{
    color:#337ab7;
    font-size:16px
}


.box .box-header:before,
.box .box-header:after {
  display: table;
  content: " ";
}
.box .box-header:after {
  clear: both;
}


.box .box-header .box-title {
  display: inline-block;
  padding: 15px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  float: left;
  cursor: default;
  color: #FFFFFF;

}

.box .box-body {
  padding: 15px;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.panel-height{
    max-height:300px;
}

.margin-top-5{
    margin-top:5px;
}

.panel-hash > .panel-heading {
  color: #fff;
  background-color: #333;
}

.panel-hash > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}

.custom-active{
    background-color: #333;
}


   /* =====================================================
           GLOBAL
        ====================================================== */

        html,
        body {
            min-height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background: #f4f7fa;
            color: #344050;
            font-family: "Segoe UI", Arial, Helvetica, sans-serif;
            font-size: 14px;
        }

        a {
            transition: all .2s ease;
        }


        /* =====================================================
           TOP NAVBAR
        ====================================================== */

        .navbar.app-navbar {
            min-height: 70px;
            margin-bottom: 0;

            background: #ffffff;
            background-image: none;

            border: none;
            border-radius: 0;

            box-shadow: 0 2px 12px rgba(22, 39, 55, .08);

            z-index: 1000;
        }


        /* =====================================================
           BRAND
        ====================================================== */

        .app-navbar .navbar-header {
            min-height: 70px;
        }

        .app-navbar .navbar-brand {
            height: 70px;
            padding: 7px 20px;

            display: flex;
            align-items: center;

            margin: 0 !important;
        }

        .app-navbar .navbar-brand img {
            max-width: 115px;
            max-height: 56px;
            width: auto;
            height: auto;

            object-fit: contain;
        }


        /* =====================================================
           NAVBAR TOGGLE
        ====================================================== */

        .app-navbar .navbar-toggle {
            margin-top: 18px;
            margin-right: 20px;

            border: 1px solid #e2e8ed;
            border-radius: 7px;

            background: #f8fafb;
        }

        .app-navbar .navbar-toggle:hover,
        .app-navbar .navbar-toggle:focus {
            background: #eef4f5;
        }

        .app-navbar .navbar-toggle .icon-bar {
            background: #176d6a;
        }


        /* =====================================================
           USER INFO
        ====================================================== */

        .navbar-user-info {
            height: 70px;

            display: flex;
            align-items: center;

            padding: 0 15px;
        }

        .navbar-user-box {
            display: flex;
            align-items: center;

            padding: 8px 14px;

            background: #f6f9fa;

            border: 1px solid #e9eef1;
            border-radius: 9px;
        }

        .navbar-user-avatar {
            width: 34px;
            height: 34px;

            margin-right: 10px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            background: linear-gradient(135deg, #167c76, #0d5963);

            color: #ffffff;
        }

        .navbar-user-label {
            display: block;

            color: #9aa5ae;

            font-size: 10px;
            font-weight: 600;

            line-height: 1;

            text-transform: uppercase;
            letter-spacing: .5px;

            margin-bottom: 4px;
        }

        .navbar-user-name {
            display: block;

            max-width: 180px;

            color: #344354;

            font-size: 13px;
            font-weight: 600;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        /* =====================================================
           DAILY SALES
        ====================================================== */

        .daily-earning {
            height: 70px;

            display: flex !important;
            align-items: center;
        }

        .daily-earning > a {
            padding: 8px 14px !important;

            background: #edf8f5;

            border: 1px solid #d8eee8;
            border-radius: 8px;

            color: #5f7078 !important;
        }

        .daily-earning .earning-icon {
            margin-right: 6px;
            color: #18806f;
        }

        .daily-earning b {
            color: #12695f;
            font-size: 14px;
        }


        /* =====================================================
           ACCOUNT MENU
        ====================================================== */

        .account-dropdown {
            height: 70px;

            display: flex !important;
            align-items: center;
        }

        .account-dropdown > a {
            width: 42px;
            height: 42px;

            padding: 0 !important;

            display: flex !important;
            align-items: center;
            justify-content: center;

            margin-right: 15px;

            border-radius: 50%;

            background: #f3f6f8 !important;

            color: #52616d !important;
        }

        .account-dropdown > a:hover {
            background: #e7f1f1 !important;
            color: #176f6a !important;
        }

        .account-dropdown .caret {
            margin-left: 5px;
        }


        .account-dropdown .dropdown-menu {
            min-width: 210px;

            padding: 8px 0;

            border: none;
            border-radius: 10px;

            box-shadow: 0 10px 35px rgba(31, 45, 61, .16);
        }

        .account-dropdown .dropdown-menu-header {
            padding: 10px 18px;

            color: #80909c;

            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .6px;
        }

        .account-dropdown .dropdown-menu > li > a {
            padding: 11px 18px;

            color: #4b5966;
        }

        .account-dropdown .dropdown-menu > li > a:hover {
            background: #f5f8f9;
            color: #176f6a;
        }

        .account-dropdown .dropdown-menu i {
            width: 20px;
            margin-right: 5px;
        }


        /* =====================================================
           MAIN LAYOUT
        ====================================================== */

        .app-layout {
            padding: 0;
        }

        .app-content-row {
            margin: 0;
            min-height: calc(100vh - 125px);
        }


        /* =====================================================
           SIDEBAR
        ====================================================== */

        .mySideNav {
            min-height: calc(100vh - 70px);

            padding: 22px 12px;

            background:
                linear-gradient(
                    180deg,
                    #15384a 0%,
                    #102e3e 55%,
                    #0d2836 100%
                );

            border: none;
        }


        .sidebar-heading {
            padding: 0 14px 10px;

            color: rgba(255,255,255,.42);

            font-size: 10px;
            font-weight: 600;

            text-transform: uppercase;
            letter-spacing: 1.2px;
        }


        .mySideNav .nav {
            margin: 0;
        }


        .mySideNav .nav > li {
            margin: 3px 0;
        }


        .mySideNav .nav > li > a {
            position: relative;

            padding: 12px 14px;

            border-radius: 7px;

            color: rgba(255,255,255,.73);

            font-size: 13px;
            font-weight: 500;

            transition:
                background .2s ease,
                color .2s ease,
                transform .2s ease;
        }


        .mySideNav .nav > li > a i {
            width: 24px;

            margin-right: 7px;

            text-align: center;

            font-size: 15px;

            color: rgba(255,255,255,.55);
        }


        .mySideNav .nav > li > a:hover,
        .mySideNav .nav > li > a:focus {
            background: rgba(255,255,255,.08);

            color: #ffffff;

            transform: translateX(2px);
        }


        .mySideNav .nav > li > a:hover i {
            color: #ffffff;
        }


        /* Active menu */

        .mySideNav .nav > li.active > a,
        .mySideNav .nav > li.active > a:hover,
        .mySideNav .nav > li.active > a:focus {

            background: linear-gradient(
                135deg,
                #17847b,
                #116c70
            );

            color: #ffffff;

            box-shadow: 0 5px 15px rgba(0,0,0,.15);

            font-weight: 600;
        }


        .mySideNav .nav > li.active > a i {
            color: #ffffff;
        }


        .mySideNav .nav > li.active > a:before {
            content: "";

            position: absolute;

            left: -12px;
            top: 10px;
            bottom: 10px;

            width: 3px;

            background: #61d5c5;

            border-radius: 0 3px 3px 0;
        }


        /* =====================================================
           MAIN CONTENT
        ====================================================== */

        .main-content-area {
            min-height: calc(100vh - 125px);

            padding: 25px 28px 35px;

            background: #f4f7fa;
        }


        .page-topbar {
            margin-bottom: 20px;

            padding: 0 2px 15px;

            border-bottom: 1px solid #e4e9ed;
        }


        .page-topbar h4 {
            margin: 0;

            color: #253746;

            font-size: 20px;
            font-weight: 600;
        }


        .page-topbar .breadcrumb-text {
            margin-top: 5px;

            color: #9aa6b0;

            font-size: 12px;
        }


        .page-topbar .breadcrumb-text i {
            margin-right: 5px;
        }


        /* =====================================================
           CARDS / PANELS
        ====================================================== */

        .main-content-area .panel {
            border: 1px solid #e6eaee;
            border-radius: 9px;

            box-shadow: 0 2px 9px rgba(31,45,61,.05);
        }

        .main-content-area .panel-heading {
            border-radius: 9px 9px 0 0;
        }


        /* =====================================================
           TABLES
        ====================================================== */

        .main-content-area .table {
            background: #ffffff;
        }

        .main-content-area .table > thead > tr > th {
            border-bottom: 1px solid #e4e9ed;

            color: #62717d;

            font-size: 12px;
            font-weight: 600;

            text-transform: uppercase;
            letter-spacing: .3px;
        }

        .main-content-area .table > tbody > tr > td {
            vertical-align: middle;

            border-top-color: #edf0f2;
        }


        /* =====================================================
           FORMS
        ====================================================== */

        .main-content-area .form-control {
            border: 1px solid #dce3e8;
            border-radius: 6px;

            box-shadow: none;

            transition: border .2s ease, box-shadow .2s ease;
        }

        .main-content-area .form-control:focus {
            border-color: #188078;

            box-shadow: 0 0 0 3px rgba(24,128,120,.08);
        }


        /* =====================================================
           BUTTONS
        ====================================================== */

        .main-content-area .btn {
            border-radius: 6px;
        }

        .main-content-area .btn-primary {
            background: #167b75;
            border-color: #167b75;
        }

        .main-content-area .btn-primary:hover,
        .main-content-area .btn-primary:focus {
            background: #116a65;
            border-color: #116a65;
        }


        /* =====================================================
           FOOTER
        ====================================================== */

        .app-footer {
            min-height: 55px;

            padding: 18px 20px;

            background: #ffffff;

            border-top: 1px solid #e7ebee;

            color: #8c99a3;

            font-size: 12px;
        }

        .app-footer p {
            margin: 0;
        }

        .app-footer a {
            color: #176f6a;
            font-weight: 600;
            text-decoration: none;
        }

        .app-footer a:hover {
            color: #105b57;
            text-decoration: none;
        }


        /* =====================================================
           MODALS
        ====================================================== */

        .modal-content {
            border: none;
            border-radius: 11px;

            box-shadow: 0 15px 45px rgba(0,0,0,.20);
        }

        .modal-header {
            border-bottom: 1px solid #edf0f2;

            border-radius: 11px 11px 0 0;

            padding: 17px 20px;
        }

        .modal-header h4 {
            color: #314150;

            font-weight: 600;
        }

        .modal-body {
            padding: 22px;
        }


        /* =====================================================
           MOBILE NAVIGATION
        ====================================================== */

        .mobile-nav {
            padding: 10px 15px !important;
        }

        .mobile-nav > li > a {
            border-radius: 6px;

            color: #56646f !important;
        }

        .mobile-nav > li.active > a {
            background: #167b75 !important;
            color: #ffffff !important;
        }

        .mobile-nav > li > a i {
            width: 22px;
            margin-right: 6px;
        }


        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media (max-width: 991px) {

            .navbar-user-name {
                max-width: 110px;
            }

            .main-content-area {
                padding: 22px 20px 30px;
            }

        }


        @media (max-width: 767px) {

            .navbar.app-navbar {
                min-height: 65px;
            }

            .app-navbar .navbar-header {
                min-height: 65px;
            }

            .app-navbar .navbar-brand {
                height: 65px;
                padding-left: 15px;
            }

            .app-navbar .navbar-brand img {
                max-width: 100px;
                max-height: 50px;
            }

            .app-navbar .navbar-collapse {
                background: #ffffff;

                border-top: 1px solid #edf0f2;

                box-shadow: 0 8px 18px rgba(0,0,0,.08);
            }

            .navbar-user-info {
                height: auto;

                padding: 10px 15px;
            }

            .navbar-user-box {
                width: 100%;
            }

            .daily-earning,
            .account-dropdown {
                height: auto;

                display: block !important;

                padding: 5px 15px;
            }

            .daily-earning > a {
                display: block;

                margin: 5px 0;
            }

            .account-dropdown > a {
                margin: 5px 0;
            }

            .main-content-area {
                padding: 18px 15px 25px;
            }

            .page-topbar {
                margin-bottom: 15px;
            }

        }


        /* =====================================================
           PRINT
        ====================================================== */

        @media print {

            body {
                background: #ffffff;
            }

            .main-content-area {
                padding: 0;
                background: #ffffff;
            }

        }