.jumbotron,h4 {
    text-align: center
}

.header,.jumbotron {
    border-bottom: 1px solid #e5e5e5
}

.browsehappy {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

body {
    padding: 0
}

.footer,.header,.marketing {
    padding-left: 15px;
    padding-right: 15px
}

.header {
    margin-bottom: 10px
}

.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px
}

.footer {
    margin-top: 25px;
    color: #777;
    border-top: 1px solid #e5e5e5
}

.container-narrow>hr {
    margin: 30px 0
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px
}

.marketing {
    margin: 40px 0
}

.marketing p+h4 {
    margin-top: 28px
}

@media screen and (min-width: 768px) {
    .container,body {
        max-width:400px
    }

    body {
        margin-left: 35%;
        border: 1px solid #c2efb9;
        margin-top: 5%
    }

    .footer,.header,.marketing {
        padding-left: 0;
        padding-right: 0
    }

    .header {
        margin-bottom: 30px
    }

    .jumbotron {
        border-bottom: 0
    }

    .form-signin {
        max-width: 330px;
        padding: 15px;
        margin: 0 auto
    }

    .form-signin input {
        margin: 5px
    }

    .home {
        width: 100%;
        height: 100%
    }

    .home .buy {
        background-image: url(/images/Buy.png)
    }

    .home .card {
        background-image: url('/images/Card in Use Filled.png')
    }

    .home .checked {
        background-image: url('/images/Check Filled.png')
    }

    .home .money {
        background-image: url('/images/Money Box Filled.png')
    }

    .home .rupee {
        background-image: url('/images/Rupee Filled.png')
    }

    .home .cash {
        background-image: url('/images/Receive Cash Filled.png')
    }

    .home .img-icon {
        height: 100%;
        width: 50%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        border: 1px solid #cae0ca;
        background-position: 30px
    }

    .shubh-labh-panel,.shubh-labh-panel .btn-add-more button {
        background: rgba(187,241,187,.56)
    }

    .home .row-custom {
        height: 150px;
        margin: 0
    }

    .home .row-custom span {
        position: absolute;
        top: 80%;
        -ms-flex-item-align: center;
        align-self: center;
        left: -4%;
        width: 100%;
        text-align: center
    }

    .shubh-labh-panel {
        border: 2px solid #b6bdb6;
        border-radius: 10px;
        width: 100%;
        box-shadow: #dde6dd 3px 3px;
        margin-bottom: 10px;
        margin-right: 10px;
        height: 120px;
        list-style: none;
        margin-left: -45px
    }

    .custom-height {
        height: 70px
    }

    .shubh-labh-panel .item-box {
        position: relative;
        float: left
    }

    .shubh-labh-panel input {
        margin-bottom: 2px;
        margin-left: 10px
    }

    .shubh-labh-panel .number {
        width: 50%
    }

    .shubh-labh-panel .text {
        width: 100%
    }

    .shubh-labh-panel input[type=text],.shubh-labh-panel input[type=number] {
        width: 80%
    }

    .shubh-labh-panel label {
        font-size: 11px;
        margin-left: 10px
    }

    .shubh-labh-panel .btn-add-more {
        width: 50px;
        height: 29px;
        position: relative;
        margin-left: 101%;
        margin-top: 40px
    }

    .btn-header {
        position: relative;
        height: 50px;
        border-bottom: 1px solid rgba(145,199,145,.82);
        margin-bottom: 30px
    }

    .sale-cash,.total-sale {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 50px;
        border: 1px solid rgba(51,50,50,.2);
        padding: 10px
    }

    .sale-cash input[type=number] {
        margin-left: 20px
    }

    .total-sale :nth-child(2) {
        margin-left: 40px
    }
}

@media screen and (max-width: 767px) {
    .form-signin {
        max-width:330px;
        padding: 15px;
        margin: 0 auto
    }

    .form-signin input {
        margin: 5px
    }

    .btn-save,.quick-button-group {
        margin-left: 30%
    }

    h4 {
        text-align: center;
        background: rgba(51,122,183,.5);
        padding: 10px
    }

    .home {
        width: 100%;
        height: 100%
    }

    .home .buy {
        background-image: url(/images/Buy.png)
    }

    .home .card {
        background-image: url('/images/Card in Use Filled.png')
    }

    .home .checked {
        background-image: url('/images/Check Filled.png')
    }

    .home .money {
        background-image: url('/images/Money Box Filled.png')
    }

    .home .rupee {
        background-image: url('/images/Rupee Filled.png')
    }

    .home .cash {
        background-image: url('/images/Receive Cash Filled.png')
    }

    .home .img-icon {
        height: 100%;
        width: 50%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        border: 1px solid #cae0ca;
        background-position: 30px
    }

    .shubh-labh-panel,.shubh-labh-panel .btn-add-more button {
        background: rgba(187,241,187,.56)
    }

    .home .row-custom {
        height: 150px;
        margin: 0
    }

    .home .row-custom span {
        position: absolute;
        top: 80%;
        -ms-flex-item-align: center;
        align-self: center;
        left: -4%;
        width: 100%;
        text-align: center
    }

    .shubh-labh-panel {
        border: 2px solid #b6bdb6;
        border-radius: 10px;
        width: 100%;
        box-shadow: #dde6dd 3px 3px;
        margin-bottom: 10px;
        margin-right: 10px;
        height: 120px;
        list-style: none;
        margin-left: -45px
    }

    .custom-height {
        height: 70px
    }

    .shubh-labh-panel .item-box {
        position: relative;
        float: left
    }

    .shubh-labh-panel input {
        margin-bottom: 2px;
        margin-left: 10px
    }

    .shubh-labh-panel .number {
        width: 50%
    }

    .shubh-labh-panel .text {
        width: 100%
    }

    .shubh-labh-panel input[type=text],.shubh-labh-panel input[type=number] {
        width: 80%
    }

    .shubh-labh-panel label {
        font-size: 11px;
        margin-left: 10px
    }

    .shubh-labh-panel .btn-add-more {
        width: 50px;
        height: 29px;
        position: relative;
        margin-left: 101%;
        margin-top: 40px
    }

    .btn-header {
        position: relative;
        height: 50px;
        border-bottom: 1px solid rgba(145,199,145,.82);
        margin-bottom: 30px
    }

    .sale-cash,.total-sale {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 50px;
        border: 1px solid rgba(51,50,50,.2);
        padding: 10px
    }

    .sale-cash input[type=number] {
        margin-left: 20px
    }

    .total-sale :nth-child(2) {
        margin-left: 40px
    }
}

.load {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(0,0,0,.33);
    z-index: 9999999;
    top: 0;
    left: 0
}

.load-screen {
    -webkit-animation: mymove 2s;
    animation: mymove 2s
}

@-webkit-keyframes mymove {
    0% {
        left: 100%
    }

    100% {
        left: 0
    }
}

@keyframes mymove {
    0% {
        left: 100%
    }

    100% {
        left: 0
    }
}

.load-screen>i {
    position: absolute;
    top: 45%;
    left: 45%
}

.home .img-icon i {
    left: 75%;
    position: absolute;
    top: 5%;
    color: gray;
    opacity: .3
}

.home .img-icon .done {
    color: #27ae60;
    opacity: 1
}

.preview {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 200px;
    content: no-close-quote;
    background-color: rgba(0,0,0,.63);
    color: #fff;
    left: 20%
}

.preview :nth-child(1) {
    top: 10%;
    position: absolute;
    left: 15%
}

.preview :nth-child(3) {
    top: 40%;
    position: absolute;
    left: 15%
}

.date-custom {
    float: left;
    width: 55%;
    margin-left: 10px;
    margin-right: 10px
}

.dashboard-items {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

h4 {
    background: rgba(51,122,183,.5);
    padding: 10px
}
