/*==================================================[FONTS]============================================*/
@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/poppins/Poppins-Bold.ttf'); 
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/poppins/Poppins-Medium.ttf'); 
}

/*==================================================[COMMON CSS]============================================*/

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-y:auto;
}

body {
    font-family: Poppins-Regular, sans-serif;
    height: 100%;
    background-color: #fafafa;
    overflow-y:auto;
    font-size: 14px;
    color: #333333;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #333333;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-dark {
    color: #333333!important;
}

.select2 {
    height: 42.33px;
}

.select2-container .select2-selection--single {
    height: 100% !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px !important;
    outline: none !important;
    border: 1.5px solid #4a90e2 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 42.33px !important;
}

.select2-selection__arrow {
    height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100% !important;
    color: #979797 !important;
    line-height: 42px !important;
}

.btn {
    background-color: transparent;
    border: none;
    text-align: center;
    vertical-align: middle;
}

.btn-primary {
    border-radius: 4px;
    font-weight: 500!important;
    font-size: 14px;
    padding: 10px;
    background: #4a90e2;
    color: #fff;
    outline: none!important;
    border: 1px solid #3483de !important;
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
}

.btn-primary:hover,.btn-primary:focus {   
    color: #fff;
    background-color: #2275d7;
    border-color: #1d65b8;
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
}

.btn-primary-rounded {
    font-size: 14px;
    padding: 10px;
    background: #4a90e2;
    color: #fff;
    outline: none!important;
    border: 1px solid #3483de !important;
    border-radius: 25px;
    padding-left: 30px;
    padding-right: 30px;
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
}

.btn-primary-rounded:hover, .btn-primary-rounded:focus {
    background-color: #fff !important;
    border: 1px solid #3483de !important;
    color: #4A90E2 !important; 
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
}

.btn-rounded {
    border-radius: 25px;
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border: 1px solid #269abc!important;
    font-size: 14px;
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
}

.btn-info:hover, .btn-info:focus  {
    color: #fff;
    background-color: #31b0d5;
    border: 1px solid #269abc!important;
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%)!important;
}

.btn-secondary {
    font-weight: 500!important;
    font-size: 14px;
    padding: 10px;
    background-color: #efefef;
    color: #333333;
    border: 1px solid #d3d3d3!important;
    border-radius: 4px;
}

.chart-stats {
    display: flex;
    justify-content: center;
}

.chart-stats .stat {
    margin-bottom: 20px;
    margin-top: 20px;
}

.card {
    padding: 21px 13px;
}

.stat h6 {
    color: #7A939F;
    font-weight: 700;
    font-size: 14px;
}

.card h5 {
    color: #7A939F;
}

.form-select {
    font-size: 14px;
    color: #979797;
    border: 1px solid #979797;
    border-radius: 4px;
}

.form-select:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #979797;
    outline: 0;
}

.form-control {
    outline: 0;
    outline-color: transparent;
    outline-style: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    color: #979797;
    background-color: #fff;
    border: 1px solid #979797;
    border-radius: 4px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid #979797;
}

.form-control[readonly], fieldset[disabled] {
    background-color: #eeeeee;
    opacity: 1;
}

label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

textarea {
    height: auto!important;
}

.form-control::placeholder {
    color: #979797;
}

/*==================================================[MODAL]============================================*/

.close {
    font-size: 21px;
    font-weight: bold;
    color: #000;
    opacity: .2;
    padding: 0px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.close:hover, .close:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.modal-footer {
    border-top: 1px solid #e5e5e5!important;
}

/*==================================================[TOGGLE BUTTON]============================================*/
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    margin-bottom: -8px;
    /* float:right;*/
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 3px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input.primary:checked + .slider {
    background-color: #2196F3;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*==================================================[DATA TABLES]============================================*/
.table {
    font-size: 14px;
}

.table a {
    color: #4a90e2;
    text-decoration: none;
    margin-left: 3px;
    margin-right: 3px;
}

.table-bordered {
    border: 1px solid #ddd !important;
}

.table-bordered th {
    border-top: 1px solid #ddd !important;
    border-bottom: 2px solid #ddd !important;
}

.table-bordered td {
    border: 1px solid #ddd;
    background-color: #fff;
}

.table img {
    width: 60px;
    height: 40px;
}

.dataTables_info {
    font-size: 14px;
    margin-top: 15px;
}

.dataTables_paginate {
    font-size: 14px;
    margin-top: 15px;
}

.dataTables_wrapper .dataTables_filter {
    padding-top: 15px;
    padding-bottom: 15px;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #979797!important;
    border-radius: 15px!important;
    padding-left: 20px!important;
    padding-right: 20px!important;
    font-size: 14px;
    background-color: #fff!important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #979797;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(151 151 151 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(151 151 151 / 60%);
}


/*==================================================[HEADER]============================================*/
.navbar-default {
    z-index: 100;
    font-weight: bold;
    background-color: #fff;
    border-color: #eeeeee;
    height: 75px;
    -webkit-box-shadow: 0 1px 5px 0 rgb(0 0 0 / 16%);
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 16%);
}

.navbar-collapse {
    justify-content: space-between;
    padding-left: 50px;
    background-color: #fff;
}

.navbar-collapse li {
    display: flex;
    justify-content: center;
}

.navbar-toggler, .navbar-toggler:focus {
    outline: none !important;
    box-shadow: none;
    border: none !important;
}

.navbar-default img {
    width: 110px;
    height: 36px;
}

.navbar-default a {
    font-size: 14px;
}

.navbar-default .btn {
    font-size: 14px;
    outline: none;
    border: 1px solid #ffffff00 !important;
    font-weight: 700;
}

.navbar-default .btn-primary:hover {
    background-color: #fff !important;
    border: 1px solid #3483de !important;
    color: #4A90E2 !important; 
    -webkit-box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
}

.navbar-default .navbar-nav .active a {
    color: #4A90E2;
    background-color: #fff;
}

.navbar-default .navbar-nav .active {
    border-bottom: 4px solid #4A90E2;
    border-radius: 4px;
}

.quote-btn-nav a.btn.btn-primary {
    padding: 10px;
    background: #4a90e2;
    color: #fff;
}

/*==================================================[LOGIN-PAGE]============================================*/

.login-page {
    font-size: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9053c7;
    background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
    background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
    background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
    background: linear-gradient(-135deg, #c850c0, #4158d0);
}

.login-page .row {
    display: flex;
    justify-content: center;
}

.login-page h4 {
    color: #333333;
    text-align: center;
}

.login-page img {
    margin-left: auto;
    margin-right: auto;
}

.login-page .form-control {
    font-family: Poppins-Medium;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    border: 1px solid rgba(0,0,0,.15);
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    border-left: 0;
}

.login-page .form-control {
    box-shadow: none;
}

.login-page .form-control:focus {
    background-color: #fff!important;
    border: none!important;
}

.focus-icon {
    color: #57b846!important;
    background-color: #fff!important;
    border: none!important;
}

.login-page .input-group-text {
    color: #666666;
    border: 1px solid rgba(0,0,0,.15);
    background: #e6e6e6;
    border-radius: 25px;
    padding-left: 35px;
}

.login-page .btn-primary {
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #57b846;
    padding: 0 25px;
    outline: none!important;
    border: none;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.login-page .btn-primary:hover {
    background: #333333;
}

.login-input-animation {
    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
    animation: anim-shadow 0.5s ease-in-out forwards;
}

.login-page img{
    width: 350px;
    height: 114px;
}
  
@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 70px 25px;
        opacity: 0;
    }
}

/*==================================================[DASHBOARD]============================================*/

.dashboard .top-card {
    border-radius: 0;
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}

.dashboard .top-card .stat {
    border-right: 1px solid #e5e5e5;
    margin-bottom: 15px;
    margin-top: 15px;
}

#daily-data-chart {
    margin-top: 20px;
}

.dashboard .table th {
    border-bottom: 2px solid #ddd;
}

.dashboard .table td {
    border-bottom: 1px solid #ddd;
    padding-top: 18px;
    padding-bottom: 18px;
}

.dashboard table.dataTable.no-footer {
    border-bottom: none;
}

.dashboard .dataTables_wrapper .dataTables_filter {
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}


/*==================================================[REPORT PAGE]============================================*/
.report label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.report .form-control {
    height: 46px;
}


/*==================================================[CREATE QUOTE]============================================*/
.customer-info, .add-product, .delivery-options {
    margin-top: 30px;
}

.delivery-options {
    display: flex;
    justify-content: end;
}

.customer-info table h5 {
    color: #333333;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
}

.customer-info > div, .add-product > div, .delivery-options > div {
    margin-top: 8px;
    margin-bottom: 8px;
}

.add-product .row > div  {
    margin-top: 18px;
    margin-bottom: 18px;
}

.add-product > div  {
    margin-top: 0px;
    margin-bottom: 0px;
}

.customer-info h4, .delivery-options h4 {
    font-weight: 600;
    border-bottom: 1px solid #979797;
    padding-bottom: 10px;
    margin-bottom: 13px;
}

.add-product h4 {
    font-weight: 600;
    border-bottom: 1px solid #979797;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.create-quote button {
    width: 100%;
}

.customer-info .form-select {
    width: 100%;
    height: 100%;
}

.customer-info {
    color: #979797;
}

.add-product .form-select {
    width: 100%;
    height: 38px;
}

/*==================================================[VIEW QUOTE]============================================*/
.view-quote .header {
    display: flex;
    justify-content: space-between;
}

.view-quote button {
    width: 100%;
}

.view-quote .customer-info {
    display: flex;
    justify-content: end;
}

.total, .total > div {
    border: 1px solid #ddd !important;
}

.total > div {
    border: 1px solid #ddd !important;
    padding-top: 20px;
    padding-bottom: 20px;
}

.total h5 {
    color: #333333;
    margin-bottom: 0px;
    font-size: 18px;
}

.grand-total h5 {
    display: inline;
    line-height: 1.8;
}

.grand-total small {
    color: #333333;
}

.customer-info a {
    color: #4A90E2;
    text-decoration: none;
}

/*====================================[ CREATE-CUSTOMER PAGE/ EDIT-CUSTOMER PAGE]===================================*/

.client .row > div {
    margin-bottom: 15px;
}

.client .form-select {
    height: 38px;
}

.client .button-container {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}

.client .button-container > div {
    margin-bottom: 0px;
}

.client button {
    width: 100%;
}

/*====================================[ ADD-PRODUCT PAGE/ EDIT-PRODUCT PAGE]===================================*/

.product-add-edit .row > div {
    margin-bottom: 40px;
}

.product-add-edit .form-select {
    height: 38px;
}

.product-add-edit .button-container {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}

.product-add-edit .button-container > div {
    margin-bottom: 0px;
}

.product-add-edit button {
    width: 100%;
}

.product-add-edit a {
    color: #666;
    text-decoration: none;
}

.product-add-edit a:hover {
    color: #4A90E2;
}

/*====================================[ Modal ]===================================*/
.editGuest button {
    width: auto;
}

.editGuest label {
    color: #333333;
}


/*==================================================[RESPONSIVE]============================================*/
@media (max-width: 1200px) {
    .navbar-collapse {
        margin-right: -12px;
        margin-left: -12px;
        margin-top: 22px;
        padding: 10px;
        border: 1px solid #eeeeee;
    }

    .navbar-collapse .btn {
        width: 100%;
    }

    .navbar-right .btn {
        text-align: start;
    }

    .navbar-collapse li {
        padding: 5px;
    }

    .navbar-default .navbar-nav .active {
        border-bottom: none!important;
    }

    .navbar-default .navbar-nav a {
        display: block;
    }
}

@media (max-width: 992px) {
    .dashboard .top-card .stat {
        border: none;
    }
}


@media (max-width: 768px) {
    .login-page img {
        width: 280px;
    }

    .chart-stats .stat {
        text-align: center;
    }

    .create-quote .form-select {
        height: 38px;
    }
}

@media (max-width: 576px) {
    .hideInMobile {
        display: none;
    }

    .dashboard .top-card .stat {
        text-align: center;
    }

    .total h5 {
        display: inline;
        margin-right: 10px;
    }
}

@media (max-width: 420px) {
    .login-page img {
        width: 240px;
    }
}

@media (min-width: 992px) and (max-width: 1400px) {
    .container {
        padding-left: 70px!important;
        padding-right: 70px!important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .container {
        padding-left: 50px!important;
        padding-right: 50px!important;
        max-width: 100% !important;
    }

    .hideInMediumScreen {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .container {
        padding-left: 20px!important;
        padding-right: 20px!important;
        max-width: 100% !important;
    }

    .hideInTablet {
        display: none;
    }
}