body {
    font-family: 'Open Sans', sans-serif;
    border-radius: 0rem !important;
}
.nav-link, .btn-primary,.btn {
    border: none !important;
}

.alert, .alert-success, .input-group-text {
    border-radius: 0rem !important;
}

tr:hover{
    background: none !important;
}

.bg-grey-two {background: #FFFFFF}

.bg-green {background: #046A38;}

.bg-blue {background: #A0DCFF;}

.btn-bg-blue {background: #007CB0;}

.bg-second-green-one { background: #000;}


h1, h2, h3, h4, h5, h6, p {margin-bottom: 0px;}

h1 { font-size: 2rem; font-weight: 600;}

h2 {font-size: 1.5rem; font-weight: 600;}

h3, h4, h5, h6, p { font-size: .875rem; font-weight: 400; line-height: 1.4; }

.nav-link { font-size: .875rem; color: #000;}

.nav {
    display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 0;list-style: none;
}


/* .h-120{height: 7.5rem;}

.h-300{height: 18.75rem;}

.h-720{height: 28.125rem;} */

.active-link{color: rgb(67, 176, 42);}

.title{background: #000; width: 100%; color: #fff; display: inline-block; padding: .625rem 1.875rem;}

.width-50{width: 70px;}

.overflow-y{overflow-y: auto;}


.bg-teal{background-color: #008080;}

.apexcharts-toolbar{display: none !important;}

.check-box{position: relative; padding-left: 1.5625rem;}

.check-box .form-check-input{position: absolute; left: 0rem;}


.form-check-input:checked{accent-color: #000; background-color: #000; border-color: #000; box-shadow: unset;}

label{font-size: .6875rem;}

/* Phoenix.Client.styles.css */

main{position: unset !important;}

.mainbar{overflow: unset !important;}

.top-row{height: auto !important;}





/* btns */

 .btn { background: #26890d; color: #fff; font-size: .875rem; display: inline-block; border-radius: 0rem !important;}

 .btn:focus {outline: unset; box-shadow: unset;}

 .btn:hover {background: #1d680a;}




/* cards & charts */

.chart {
    height: 100%;
    display: flex;
    width: 100%;
}

.card {
    width: 100%;
    border-radius: 0rem !important;
}

.card-header {
    border-bottom: unset !important;
    border-radius: 0rem !important;
}


/* table */
/*18.11.2022 - 18.05.2023*/
.table {
    margin-bottom: 0px;
}

/* .table tr{white-space: nowrap;} */

.table > :not(:first-child) {border-top: 0rem;}

.table > thead th {border-top: 0rem;}

.table tr th {color: #010204; font-size: .75rem;}

.table tr td, tr th {text-align: start; border-left: 0rem; border-right: 0rem;}

.table tr td {font-size: .75rem;}

.table tbody tr:hover {background: #ebebeb;}

.table .total {position: sticky; width: 100%; left: 0px; background: #ebebeb;}

.table .total th { border-left: 0rem; border-right: 0rem;}

.table .btn{background: #000;}


/* table */

/*.header{background: #000; z-index: 9; position: sticky; top: 0px; left: 0px; width: 100%;}

.header .client-logo { width: 4.375rem !important;}

 .header.inner-header {background: transparent !important;}

 .header.inner-header {position: absolute; left: 0rem; top: 0rem; width: 100%;}

 .header .nav .nav-item {margin-right: .9375rem;}

 .header .nav .nav-item:last-child { margin-right: 0rem;}

 .header .admin {padding: 0rem;}

 .header .admin .admin-img {width: 2.5rem;}

 .header .admin .btn {background: transparent; padding: 0rem;}
*/

.header {
    background: #000;
    padding: 4px 4px 4px 16px;
    position: fixed;
    width: 100%;
    top: 0rem;
    height: 48px;
    z-index: 9;
}

.header-login {
    background: #000;
    padding: 12px 5px 14px 4px;
    position: relative;
    width: 100%;
    top: 0rem;
    height: 48px;
    z-index: 9;
}

.header .logo-box {
    margin: 0 40px 0 0;
}

    .header .logo {
        width: 86px;
    }

    .header .logo-box .line {
        width: 1px;
        height: 16px;
        margin-right: 16px;
        background: #53565a;
        margin-left: 16px;
    }

    .header .Phoenix-logo {
        font: 600 14px/24px Open Sans,sans-serif;
        color: #fff;
    }



    .header .dropdown .btn {
        font: 400 14px/20px Open Sans,sans-serif;
    }





    .header .client-logo {
        width: 4.375rem !important;
    }

    .header.inner-header {
        background: transparent !important;
    }

    .header.inner-header {
        position: absolute;
        left: 0rem;
        top: 0rem;
        width: 100%;
    }

    .header .nav .nav-item {
        margin-right: .9375rem;
    }

        .header .nav .nav-item .nav-link {
            color: #fff;
        }



        .header .nav .nav-item:last-child {
            margin-right: 0rem;
        }

    .header .admin {
        padding: 0rem;
    }


        .header .admin .admin-img {
            width: 35px;
            height: 35px;
        }

        .header .admin .btn {
            background: transparent;
            padding: 0rem;
        }

.desclaimer-index {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
/* billing-checks page */

.wastage-box .h-5{height: 4.125rem;}


/* background */

.background{background: url(../images/black-bg.jpg) no-repeat; z-index: 1; width: 100%; background-size: cover; height: 100vh;}

.background h3{font-size: 20px;}


/* warpper-tabs */

.warpper-tabs .tabs { width: 100%; background: #fff;}

.warpper-tabs .tabs .nav-pills { border-bottom: .1875rem solid #d0d0ce; width: 100%;}

.warpper-tabs .tabs .nav-pills .nav-item { width: auto; display: inline-block;}

.warpper-tabs .tabs .nav-pills .nav-link.active {color: #000; background: transparent;}

.warpper-tabs .tabs .nav-pills .nav-link.active::after {position: absolute; bottom: -0.1563rem; height: .1875rem; background: #1d680a; content: ""; left: 0rem; width: 100%;}

.warpper-tabs .tabs .nav-pills .nav-link {display: inline-block; position: relative; width: 100%; color: #000; font-size: .75rem; }

.warpper-tabs .tabs .nav-pills .nav-link:hover {background: #00000014;}


/* sidebar */

.side-bar .nav-item .nav-link{color: #fff;}
  

/* Dropdown */



.dropdown {
    /* display: inline-block;
    background: #26890d;*/
    position: relative;
    width: 200px;
    float: right;
    text-align: center;
}

.dd-button{display: inline-block; padding: 10px 30px 10px 20px; cursor: pointer; white-space: nowrap;}

.dd-button:after{content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;  border-top: 5px solid #fff;}

.dd-button:hover {background-color: #1d680a;}

.dd-input {display: none;}

.dd-menu {position: absolute; top: 100%; left: 0px; padding: 0px; background-color: #ffffff; list-style-type: none;}

.dd-input + .dd-menu {display: none;}

.dd-input:checked + .dd-menu {display: block;}

.dd-menu li {padding: .25rem 1rem; font-size: 12px; cursor: pointer; white-space: nowrap;}

.dd-menu li:hover {background-color: #e9ecef;}

.dd-menu li a {display: block;}

.dd-menu li.divider { padding: 0; border-bottom: 1px solid #cccccc;}


/* form - inputs */

.form-control { border-radius: 0px !important; background: #fff !important; border: 1px solid #d0d0ce;}

input:-internal-autofill-selected {background-color: #fff !important;}

.form-control:hover, .form-control:focus { box-shadow: unset !important; border: 1px solid #000;}

.form-check-input[type=checkbox]{border-radius: 0px !important;}

.form-check-input[type=checkbox]:focus, .form-control:hover {box-shadow: unset !important;}




/* select dropdwon */

.form-select {
    border-radius: 0rem !important;
    border: .0625rem solid #53565A;
}

select.form-select option:hover {
    background: #E3E48D;
}

.form-select option:hover {
    background: #ebebeb !important;
    border-radius: 0rem !important;
}

.form-select:focus {
    box-shadow: unset !important;
    border: .0625rem solid #53565A;
    outline: unset !important;
}

.form-select-sm {
    border-radius: 0rem !important;
}


.select {
    position: relative;
}

    .select .selectBtn {
        display: block;
        width: 100%;
        font: inherit;
        text-align: left;
        padding: 5px 36px 7px 12px;
        background: #fff;
        box-shadow: inset 0 0 0 1px #d0d0ce;
        font-size: .875rem;
        border: none;
        outline: none;
        cursor: pointer;
    }

        .select .selectBtn:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 15px;
            width: 6px;
            height: 6px;
            -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
        }

    .select .hoverbtn {
        box-shadow: inset 0 0 0 1px #afafad;
    }

        .select .hoverbtn:after {
            -webkit-transform: translateY(-50%) rotate(227deg);
            transform: translateY(-50%) rotate(227deg);
        }

    .select .selectBtn.toggle:after {
        -webkit-transform: translateY(-50%) rotate(-135deg);
        transform: translateY(-50%) rotate(-135deg);
    }

    .select .selectDropdown {
        position: absolute;
        top: 100%;
        width: 100%;
        overflow: hidden;
        background: var(--bg1);
        border-top: 1px solid #eee;
        z-index: 1;
        background: #fff;
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transform-origin: top center;
        transform-origin: top center;
        border-top: unset;
        border: 1px solid #d0d0ce;
    }

        .select .selectDropdown .option {
            padding: 6px 38px 6px 12px;
            font-size: .875rem;
            box-sizing: border-box;
            cursor: pointer;
        }

            .select .selectDropdown .option:hover {
                background: #e0e0e0;
            }

        .select .selectDropdown.toggle {
            visibility: visible;
            -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
        }

.sticky-dropdown {
    position: sticky;
    top: 47px;
   
    margin-left: 0px;
}

body {
    font-family: 'open Sans' !important;
}

main{
    overflow:hidden;
}

@keyframes changeBackgroundColor {
    0% {
        background-color: #ffcccc; /* Start color */
    }

    25% {
        background-color: #ccffcc; /* Middle color 1 */
    }

    50% {
        background-color: #ccccff; /* Middle color 2 */
    }

    75% {
        background-color: #ffffcc; /* Middle color 3 */
    }

    100% {
        background-color: #ffccff; /* End color */
    }
}