.avatar {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    padding: 20px;
}
.avatar img {
    width: 100%;
    max-width: 100px;
}
.card-header {
    background-color: #4886EE !important;
}
.item-title {
    bottom: -15px;
    color: #000000 !important;
}
.legendLabel {
    color: black;
}
ul, span.current {
    font-family: 'Lato', 'Font Awesome 5 Free';
    font-weight: 400;
    font-size: .875rem;
    color: black;
}


.R-pie{
    width: 245px;
    height: 200px;
}

.R-h{
    border-color:  #20c997d1;
;
}


/* message tab styles  */
.message-tab .nav-tabs{
    border-radius:1rem !important;
    margin-top: 1.5rem;
}
.project-tab .card-tabs .nav-tabs .nav-link {
    border: 0 !important;
    border-radius:0.3rem !important;
}
/* .project-tab .card-tabs .nav-tabs .nav-link.active{
  background:#20C997 !important;
  color: #ffffff !important;
  letter-spacing: 2px;
} */
.project-tab .card-tabs .nav-tabs .nav-link.active{
    background:#20C997 !important;
    color: #fdfdfd;
    letter-spacing: 0.125rem;

}
/* .nav-link-color{
color: #fdfdfd !important;
} */

ul,span.current{
    font-family: 'Poppins', sans-serif;
}

.btn-success {
    color: #ffffff;
    background-color: #4886EE;
    border-color: #4885eee6;
}

/* .card-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  text-transform: capitalize;
} */

/* .card-header {
  background-color: #20c997d1;
} */



/* ul, span.current {
  color: rgb(255 255 255 / 85%);
} */

/* .btn-icon-start {
  background: #eee;


} */

/* .btn {
  margin: 0 0.6rem;
} */
/* .btn-secondary {
  background-color: #20c997 !important;
  border-color: #09bd3c !important;

} */

/* .btn-danger {

  background-color: #20c997d1 !important;
  border-color: #09bd3c !important;

} */

/* .btn-primary {
  border-color: #20c997;
  background-color: #09bd3c;


} */

/* .form-control {
  background-color: #20c997d1 !important;
  border-color: #09bd3c !important;

} */

/* .nice-select .list {
  background-color: #20c997d1 !important;
  color: #fff;
} */

/* .R-a{
  background-color: #ffffff !important;
  border: #20C997 solid 0.125rem;
} */

/* .border-2 {
  border-width: 0.12rem !important;
  background-color: #F4F5FF;
} */
/* .pic-color{
  background-color: #F4F5FF;
} */
p{
    line-height: 0.9375rem;
}
.bgcolor{
    background-color: #105310 !important;
}

/* sidemenu */

/* .sidemenu-item{
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.icon-style{
  display: block !important;
  padding: 0;
  background: #4886EE;
  color: rgba(0, 0, 0, 0.3);
  width: 3.75rem !important;
  height: 3.75rem !important;
  border-radius: 0.625rem !important;
  line-height: 3.75rem !important;
  margin-bottom: 0.3125rem;
} */
/* .icon-style:hover{
  background: #4286f4;
} */

/* .sudo-ele-none::before,.sudo-ele-none::after{
  display: none !important;
  background-color: #3f82f5 !important;
}
.try::before,.try::after{

  background-color: #3f82f5 !important;
}
.dlabnav .metismenu > li > a:before{
  background: #0261f9f5 !important;
}

[data-layout="vertical"][data-sidebar-style="compact"] .dlabnav {
  width: 11.25rem;
} */

/* side menu end */

.addbutton{

    margin-left: 48%;
}


/* css for widget*/

body {
    margin:0;
    font-family: 'Roboto Condensed', sans-serif;
}


h1 {

    color:#333;
    font-weight:700;
    margin-top:125px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:4px;
    line-height:23px;
}


/* --- Start progress bar --- */

.process-wrapper {
    margin:auto;
    max-width:1080px;
}

#progress-bar-container {
    position:relative;
    margin:auto;
    height: 120px;
    margin-top: 30px;
}

#progress-bar-container ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0;
    margin:0;
    padding-top:15px;
    z-index:9999;
    width:100%;
    margin-top:-40px;
    position: relative;
}

#progress-bar-container li:before {
    content:" ";
    display:block;
    margin:auto;
    width:30px;
    height:30px;
    border-radius:50%;
    border:solid 2px #aaa;
    transition:all ease 0.3s;

}

#progress-bar-container li.active:before, #progress-bar-container li:hover:before {
    border:solid 2px #fff;

    background: #4886EE;
}

#progress-bar-container li {
    list-style:none;
    width:180px;
    text-align:center;
    color:#aaa;
    text-transform:uppercase;
    font-size:11px;
    cursor:pointer;
    font-weight:700;
    transition:all ease 0.2s;
    vertical-align:bottom;
    height:60px;
    position:relative;
}

#progress-bar-container li .step-inner {
    position:absolute;
    width:100%;
    bottom:0;
    font-size: 14px;
}

#progress-bar-container li.active, #progress-bar-container li:hover {
    color:#444;
}

#progress-bar-container li:after {
    content:" ";
    display:block;
    width:6px;
    height:6px;
    background:#777;
    margin:auto;
    border:solid 7px #fff;
    border-radius:50%;
    margin-top:40px;
    box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
    transition:all ease 0.2s;

}

#progress-bar-container li:hover:after {
    background:#555;
}

#progress-bar-container li.active:after {
    background:#207893;
}

#progress-bar-container #line {
    width:84%;
    margin:auto;
    background: #eee;
    height:6px;
    position:absolute;
    left:8%;
    top:89px;
    z-index:1;
    border-radius:50px;
    transition:all ease 0.9s;
}

#progress-bar-container #line-progress {
    content:" ";
    width:0;
    height:100%;
    background: #207893;
    background: #207893;
    position:absolute;
    z-index:2;
    border-radius:50px;
    transition:all ease 0.9s;
}

#progress-content-section {
    width:100%;
    margin: auto;
    background: #fff;
    border-radius: 2px;
}

#progress-content-section .section-content {
    padding: 10px 0px;
    text-align:center;
}

#progress-content-section .section-content h2 {
    font-size:17px;
    text-transform:uppercase;
    color:#333;
    letter-spacing:1px;
}

#progress-content-section .section-content p {
    font-size:16px;
    line-height:2.8rem;
    color:#777;
}

#progress-content-section .section-content {
    display:none;
    animation: FadeInUp 700ms ease 1;
    animation-fill-mode:forwards;
    transform:translateY(15px);
    opacity:0;
}

#progress-content-section .section-content.active {
    display:block;
}

@keyframes FadeInUp {
    0% {
        transform:translateY(15px);
        opacity:0;
    }

    100% {
        transform:translateY(0px);
        opacity:1;
    }
}

/* end */

/* Bill card */

.SCard{
    background-color: #E3EFF7;
}

.search-1{
    margin: 20px 10px;
    border-radius: 25px;
}



.nice-select.wide {
    width: 100%;
    line-height: 30px !important;
}

.sm-control{
    height: 2.5rem!important;
    border: 0.0625rem solid #898989!important;
}
.sm-area{
    height: auto!important;
    border: 0.0625rem solid #898989!important;
}
.router-link-exact-active {
    font-weight: 600;
    background: var(--rgba-primary-1);
    border-bottom-right-radius: 5rem;
    border-top-right-radius: 0.9rem;
    color: var(--primary) !important;
}
.router-link-exact-active i {
    color: var(--primary) !important;
}
.router-link-exact-active:before{
    width: 0.563rem!important;
    position: absolute;
    content: "";
    background: var(--primary);
    height: 100%;
    top: 0;
    left: 0rem;
    border-top-right-radius: 3.563rem;
    border-bottom-right-radius: 3.563rem;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
.cursor-pointer{
    cursor: pointer;
}
.bg-transparent-input{
    background: transparent!important;
    height: 2.5rem!important;
    padding: 10px!important;
}
.bg-transparent-input:focus{
     border-color: transparent;
     border: none!important;
 }
.categoryName{
    font-size: 20px;
    font-weight: 600;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #a7a7a7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #808080;
}
.w-15 {
    width: 15%!important;
}
.w-35 {
    width: 35%!important;
}

.dlabnav .metismenu .has-arrow:after {
    top: 53%;
}
.content-body{
    margin-left: 17.563rem;
}
.form-control:disabled, .form-control[readonly] {
    background: #e5e5e5;
    opacity: 1;
}

.form-control{
    border: 1px solid #d0d0d0;
}
.paginate_button.big{
     width:68px!important;
}
.metismenu li .bichi li a{
    padding-left: 3rem!important;
}
.metismenu li .bichi li a:hover{
    padding-left: 4.5rem!important;
}
.metismenu li .bichi li a::before{
    left: 2rem!important;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
.block{
    pointer-events: none;
    filter: blur(3px);
    cursor: not-allowed;
    opacity: .8;
}
.vs__dropdown-toggle{
    border: none!important;
    height: 45px!important;
}
@media only screen and (max-width: 1366px) {
    .vs__dropdown-toggle{
        border: none!important;
        height: 35px!important;
    }
}

button:disabled{
    opacity: .30;
}
.custom-bg {
    background-color: #c8c8c8 !important;
    padding: 10px;
    .card-title {
        color: #000000 !important;
    }
}
.card-title {
    color: #ffffff !important;
}
.p-inputtext {
    width: 100% !important;
    border-top-left-radius: 15px !important;
    border-bottom-left-radius: 15px !important;
}
.input-group-append {
    position: absolute !important;
    right: 0 !important;
}
.border-right {
    input {
        border-top-right-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
    }
}
.product-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .each-product {
        cursor: pointer;
        border: 1px solid #f2f2f2;
        background-color: #ffffff;
        margin-right: 15px;
        border-radius: 10px;
        box-shadow: 0 0.3125rem 0.3125rem 0 rgba(82, 63, 105, 0.05);
        width: 100px;
        transition: 500ms;
        margin-bottom: 15px;

        &:hover {
            border: 1px solid #6572FF;
            transition: 500ms;
        }

        .img {
            width: 100%;
            height: 50px;

            img {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }

        .detail {
            padding: 10px;

            .name {
                font-weight: bold;
            }

            .desc {
                font-size: 13px;
                color: #808080;
            }
        }
    }
}
.white-bg {
    input {
        color: #ffffff !important;
    }
}