@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
    font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, system-ui, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    padding: 0;
    margin: 0;
}
body {
	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, system-ui, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
	font-size: var(--bs-body-font-size);
	font-weight: var(--bs-body-font-weight);
	line-height: var(--bs-body-line-height);
	color: var(--bs-body-color);
	text-align: var(--bs-body-text-align);
	-webkit-text-size-adjust: 100%;
}
/* Color code */
:root {
    --blue: #86c5df;
    --yellow: #ffc107;
    --white: #ffffff;
    --Caribbean-Green: rgb(30, 180, 200);
    --red-winne: #980303;
    --red: #de4848;
    --green: #22af46;
    --dusty-grey: #9A9A9A;
    --dark-black: #212529;
    --black: #000;
    --carbon-grey: #5D5F62;
    --alabaster: #FBFBFB;
    --green-blue: #0EBAAE;
    --shuttle-grey: #626262;
    --light-purple: #ab7df6;
    --algae-green: #7be390;
    --green-cyan: #18A558;
    --tealish-green: #2F5233;
    --hippie-blue: #4e9d9d;
    --cyan-blue: #49535a;
    --pink-swan: #bfb7b7;
    --tufts-blue: #2a7fba;
    --tealish-blue: #084298;
    --carousel-pink: #e5e7e9;
}

/* colorcode */
.page-wrapper {
    min-height: calc(100vh - 40px);
    background-color: #f5ffff;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
}

/* / scroll / */

::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: #aaa;
}

::-webkit-scrollbar-thumb {
    background: #747373;
    -webkit-border-radius: 1ex;
    /* / -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); / */
}

::-webkit-scrollbar-corner {
    background: #2c6a9f;
}

.scrollable {
    max-width: 200px;
    max-height: 100%;
    height: 450px;
    overflow: scroll;
}

/* / end / */
.dashboard_topheader {
    padding: 5px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: #f8f6ff;
    box-shadow: rgba(199, 199, 204, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.header-nav {
    display: flex;
    justify-content: space-between;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none !important;
}

ul {
    padding: 0px;
    margin: 0px;
}

ul li {
    list-style: none;
}

.clear {
    clear: both;
}
a {color: #0f1c01;}

/* dark-mood */

div#example_wrapper {height: 100%;}


/*  */
.form-out-sear {
    position: relative;
}

.form-search {
    position: absolute;
    top: 10px;
    left: 20px;
}

#example_filter input {
    padding: 0px 4px;
}

.input-type-btn {
    margin-top: 3px;
    justify-content: center;
}

.input-group .search-btn {
    right: 4px;
    background-color: Var(--Caribbean-Green) !important;
    border: Var(--Caribbean-Green);
}

.input-group .search-btn:hover,
.input-group .search-btn:focus,
.input-group .search-btn:active {
    background-color: Var(--Caribbean-Green) !important;
}

.dropdown .btn-log {
    background-color: transparent;
    color: var(--black);
    border: none;
    font-weight: 300;
    box-shadow: none;
    margin-top: -10px !important;
}

.dropdown .btn-log:hover,
.dropdown .btn-log:focus,
.dropdown .btn-log:active {
    background-color: transparent;
    color: var(--black);
    border-color: none;
    box-shadow: none;
    border: none;
}

.dropdown .user i {
    border-radius: 50%;
    border: Var(--Caribbean-Green);

    color: Var(--Caribbean-Green);
    ;
}

.bast-heade {
    display: flex;
    justify-content: flex-end;
}

.dorp-right {
    float: right;
    margin-top: 4px;
}

.doctor-ul {
    padding: 0;
    margin: 0;
    margin-top: -5px;
    margin-left: 2px;
}

.doctor-ul li {
    list-style: none;
    display: inline-block;
}

.doctor-ul li a {
    display: block;
    padding: 5px 7px;
    color: Var(--Caribbean-Green);
    font-size: 16px;
    border: 1px solid Var(--Caribbean-Green);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
    text-decoration: none;
}

.doctor-ul li a:hover,
#active {
    color: var(--white);
    background-color: Var(--Caribbean-Green);
    border: 1px solid Var(--Caribbean-Green);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}



.host-text {
    text-align: center;
    display: block;
    margin-left: 30px;
}

.doctor-icon {
    float: left;
    margin-right: 30px;
}

/* left-menu */


@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(5deg);
    }

    70% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand>a,
.sidebar-wrapper .sidebar-dropdown>a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/



.page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}

.page-wrapper .theme.chiller-theme {
    background: var(--dark-black);
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
    left: 0px;
    top: 0px;
    z-index: 999;
}





/*----------------show sidebar button----------------*/
#show-sidebar {
    position: fixed;
    left: 0;
    top: 11px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
    z-index: 999;
}

.page-wrapper.toggled #show-sidebar {
    left: 0px;
}

/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 230px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
    max-height: calc(100% - 0px);
    height: calc(100% - 0px);
    overflow-y: auto;
    position: relative;
}

.sidebar-content.desktop {
    overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
    padding: 12px 20px;
    display: flex;
    align-items: center;
}

.sidebar-wrapper .sidebar-brand>a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}

.main {
    width: 100%;
}

.full-wapper {
    padding: 0px;
    margin: 0px;
}

/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
}

.sidebar-wrapper .sidebar-header .user-info>span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
    font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: var(--green);
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search>div {
    padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-menu .header-menu span {
    font-weight: 300;
    font-size: 13px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}

.sidebar-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 20px 8px 10px;
    font-size: 16px;
    text-transform: capitalize;
}

.sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}

.sidebar-menu ul li a:hover>i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-menu ul li a:active>i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-dropdown>a:after {
    font-family: 'FontAwesome';
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-submenu ul {
    padding: 5px 0;
}

.sidebar-submenu li {
    padding-left: 25px;
    font-size: 13px;
}

.sidebar-submenu li a {
    padding-left: 25px;
    font-size: 13px;
}

.sidebar-submenu li a:before .active {
    color: rgb(30, 180, 200);
}

.sidebar-submenu li a:before {
    content: "\f111";
    font-family: 'FontAwesome';
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
}

.sidebar-menu ul li a span.label,
.sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

.sidebar-submenu li a .badge,
.sidebar-submenu li a .label {
    float: right;
    margin-top: 0px;
}

.sidebar-menu .sidebar-submenu {
    display: none;
}

.sidebar-menu .sidebar-dropdown.active>a:after {
    transform: rotate(90deg);
    right: 17px;
}



/*--------------------------side-footer------------------------------*/

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
}

.sidebar-footer>a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
}

.sidebar-footer>a .notification {
    position: absolute;
    top: 0;
}

.badge-sonar {
    display: inline-block;
    background: var(--red-winne);
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
}

.badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid var(--red-winne);
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/

.page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
    /* position: relative;
    margin-left: 235px; */
}

.page-content>div {
    padding: 20px 0px;
    padding-bottom: 0px;
}

.page-content {
    overflow-x: hidden;
}


/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #337ab7;
}

.sidebar-header,
.sidebar-search,
.sidebar-menu {
    border-top: 1px solid var(--dark-black);
}

.sidebar-search input.search-menu,
.sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.sidebar-header .user-info .user-role,
.sidebar-header .user-info .user-status,
.sidebar-search input.search-menu,
.sidebar-search .input-group-text,
.sidebar-brand>a,
.sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
    color: var(--white);
}

.sidebar-menu ul li:hover>a,
.sidebar-menu .sidebar-dropdown.active>a,
.sidebar-header .user-info,
.sidebar-brand>a:hover,
.sidebar-footer>a:hover i {
    color: var(--carousel-pink);
}

.chiller-theme.toggled #close-sidebar {
    color: var(--carousel-pink);
}

.chiller-theme.toggled #close-sidebar:hover {
    color: var(--white);
}

.sidebar-wrapper ul li:hover a i,
.sidebar-submenu li a:hover:before,
.sidebar-search input.search-menu:focus+span,
.sidebar-menu .sidebar-dropdown.active a i {
    color: #fff;
    text-shadow: 0px 0px 10px rgba(12, 4, 131, 0.5);
}

.sidebar-submenu li {
    padding-left: 0px;
}

.sidebar-submenu li a {
    padding-left: 25px !important;
}


.sidebar-submenu li.active a {
    color: #000;

    background-color: #bdbbbb;

}

.sidebar-menu ul li a:active {
    color: #000;
    text-shadow: 0px 0px 10px rgba(0 0 0 / 13%);
}

.sidebar-menu ul li a i,
.sidebar-menu .sidebar-dropdown div,
.sidebar-search input.search-menu,
.sidebar-search .input-group-text {
    background: rgb(0 0 0 / 13%);
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: var(--carbon-grey);
}

.chiller-theme .sidebar-footer {
    background: var(--dark-black);
    box-shadow: 0px -1px 5px var(--dark-black);
    border-top: 1px solid var(--dark-black);
}

.chiller-theme .sidebar-footer>a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer>a:last-child {
    border-right: none;
}

/* full-wrapper */

.full-wrapper {
    margin-top: 30px;
    /* background-color: var(--alabaster); */
    padding: 10px 0px;
}

.panel {
    border-radius: 0px;
    border: 0px solid var(--alabaster);
    border-radius: 0px;
    display: flex;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 0px 21px 2px rgb(0 0 0 / 18%);
    cursor: pointer;
}

.Bg-1 {
    background-color: var(--blue);
}

.Bg-2 {
    background-color: var(--yellow);
}

.Bg-3 {
    background-color: var(--green-blue);
}

.Bg-4 {
    background-color: var(--shuttle-grey);
}

.Bg-5 {
    background-color: Var(--light-purple);

}

.Bg-6 {
    background-color: var(--algae-green);
}

.Bg-7 {
    background-color: var(--green-cyan);
}

.Bg-8 {
    background-color: var(--tealish-green);
}

.Bg-9 {
    background-color: var(--hippie-blue);
}

.Bg-10 {
    background-color: var(--cyan-blue);
}

.Bg-11 {
    background-color: var(--pink-swan);
}

.Bg-12 {
    background-color: var(--tufts-blue);
}


.symbol {
    padding: 13px 7px;
    background-color: var(--white);
    margin: 0 0px;
    width: 60px;
    text-align: center;
    border-radius: 3px 0 0 3px;
}

.panel:hover .symbol {
    background-color: var(--tealish-blue);

}


.panel:hover .symbol i {
    color: var(--white);
}


.panel:hover {
    transition: 1s;
    transform: scale(0.9);
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.symbol i {
    color: var(--dusty-grey);
    font-size: 30px;
}

.value {
    width: 100%;
    padding-top: 0px;
    text-align: center;
    line-height: 50px;
}

.value h3 {
    margin-top: 15px;
    color: var(--white);
    line-height: 4px;
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 5px;
}

.value h1,
.value p {
    color: var(--white);
    font-weight: normal;
    font-size: 15px;
    margin-bottom: 0;
    line-height: 2;
}

.m-chart-card {
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.total-reve {
    display: flex;
    justify-content: space-between;
}

.total li a {
    font-size: 13px;
    height: 30px;
    width: 30px;
    padding: 5px 5px;
    background-color: var(--carousel-pink);
    border: var(--carousel-pink);
}

.total li a:hover,
#active {
    background-color: Var(--Caribbean-Green);
    border: Var(--Caribbean-Green);
    color: var(--white);
}


#wrap.calendar-h #calendar .fc-first {
    min-height: 87px !important;

}

#wrap.calendar-h #calendar .fc-first {
    min-height: 79px !important;
    height: 34px !important;
}

/* my chart */
.chart-section {
    padding-bottom: 6px;
}

/* footer */

.site-footer {
    background: #2c6a9f;
    color: var(--white);
    padding: 10px 0;
}




/* calender */


.panel-heading {
    border-radius: 0px;
    background: var(--white);
    color: var(--white);
    padding-left: 10px;
    font-size: 15px !important;
    text-align: center;
    background-color: rgb(44 106 159);
    padding: 10px 9px;
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 10px;
}

.panel-box {
    padding: 0px 15px;
    text-align: left;
    font-size: 15px;
}

.date-palan {
    display: flex;
    justify-content: space-between;

}

.badge {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* .not-box{
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
} */


/* dark-mood */
/* dark-mood */
/* dark-mood */


#switch,
#circle {
    cursor: pointer;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
}

#switch {
    width: 40px;
    height: 8px;
    border: 2px solid #8167a9;
    border-radius: 27px;
    background: var(--black);
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    opacity: 1;
    transform: translate(0);
    top: 20px;
}



body.hero-anime #switch {
    opacity: 0;
    transform: translateY(40px);

}

#circle {
    position: absolute;
    top: -8px;
    left: -13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black);
}

.switched {
    border-color: var(--black) !important;
    background: #8167a9 !important;
}

.switched #circle {
    left: 32px;
    box-shadow: 0 4px 4px rgba(26, 53, 71, 0.25), 0 0 0 1px rgba(26, 53, 71, 0.07);
    background: var(--white);
}


/* doctor  page */
.doc-box {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--pink-swan);
    margin-bottom: 10px;
}

.doc-box-new {
    border-bottom: 1px solid var(--pink-swan);
    /* margin-bottom: 10px; */
    background-color: #2c6a9f;
    padding: 8px 10px 5px 10px;
    border-radius: 10px 10px 0px 0px;
}

.btn-add {
    background-color: #939B62 !important;
    /* margin-bottom: 6px; */
    color: var(--white) !important;
    transition: 0.3;
    font-size: 14px !important;
    border-radius: 50px !important;
}

.btn-add:hover {
    background-color: #132400 !important;
}

.btn-add:focus {
    border: inherit !important;
}

.doc-text {
    font-size: 16px;
    padding-top: 5px;
    color: #fff;
    border: 3px;
    text-transform: capitalize;
}

/* ul li table */
.icon_action {
    padding: 0;
    margin: 0;
}

.icon_action li {
    display: inline-block;
}

.icon_action li a {
    color: #5f655e;
    padding: 2px 4px;
    font-size: 18px;

}

.fa-circle-info {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.trans-icon {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.fa-gopuram {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--light-purple);
}

.squqre-font {
    color: #fff !important;
    border: none !important;
}

.text-red {

    color: var(--red);
    font-weight: 400;
    padding: 3px;
    font-size: 16px;

}

.text-green {

    color: var(--green);
    font-weight: 400;
    padding: 3px;
    font-size: 16px;

}

.pfd-file {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--green-blue);
}

.direct-user {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--light-purple);
}

.doller-r {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.print-r {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--green-blues);
}

.info {
    border: none;
    color: var(--green);
}

.fa-house {
    color: var(--tufts-blue);
    padding: 0px 10px;
}

.fa-hourglass-start {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: #bbbb0f;
}

.fa-calendar-check {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: #990d83;
}

.fa-trash-can {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: #f00;
}

.fa-eye {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--hippie-blue);
}


.holi-clock {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--hippie-blue);
}

.text-box-lab {

    padding: 15px 15px;
    background-color: var(--white);
    margin: 20px 0;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    border-radius: 20px;
    display: none;

}

.text-box-lab p {
    font-size: 13px;
    color: var(--green);
    margin-bottom: 0px;
    display: none;
}


/* doctor-list-2nd */

.table-para {
    overflow-y: auto;
    margin-bottom: 0;
}

.text-color-more {
    color: var(--green-blue);
}

.btn-details:hover {
    background-color: var(--green);
    color: #fff !important;

}

.btn-details:hover .info {
    color: #fff !important;
}

.modal-dialog.modal-box-dialog {
    max-width: 650px;
}

.modal-dialog.history-calendar {
    max-width: 880px;
}

.doc-name {
    font-size: 16px;
    color: var(--blue);
    padding-top: 20px;
}

.history-tab-b {
    border-bottom: 1px solid var(--dusty-grey);
    padding: 10px;
}

.history-tab {
    padding: 10px;

}


/* images */
.img-thumb {
    max-height: 75px;
    border: 2px solid none;
    border-radius: 3px;
    padding: 1px;
    cursor: pointer;
    width: 100%;
}

.img-thumb-wrapper {
    display: inline-block;
    margin: 10px 7px;
}

.remove {
    display: block;
    background: #444;
    border: 1px solid none;
    color: white;
    text-align: center;
    cursor: pointer;
}

.remove:hover {
    background: white;
    color: black;
}

.upload__box .form-control[type=file]:not(:disabled):not([readonly]) {
    display: none;
}

.upload__box {
    border: 2px solid #9999;
    width: 150px;
    min-height: 150px;
    position: relative;
    margin-right: 10px;
    margin-top: 10px;

}

#font-t {
    position: absolute;
    bottom: 0;
    right: 0;
}

.tox .tox-statusbar {
    display: none !important;
}

.tox .tox-notification--warn,
.tox .tox-notification--warning {
    display: none !important;
}

.btn-cancel {
    background-color: var(--red) !important;
    font-size: 14px !important;
    border: 0px;
    border-radius: 20px !important;
    border: 1px solid var(--red) !important;
}

.btn-sub {
    background-color: #fff !important;
    font-size: 14px !important;
    color: #000 !important;
    border: 0 !important;
}

.btn-sub:hover {
    color: #fff !important;
    background-color: #084298 !important;
}

/* Appointment */
.doc-wrapper {
    background-color: #e7e5e5;
    padding: 5px 10px 5px 10px;
    position: relative;
    border-radius: 5px;
}

.breadcrumb {
    margin-bottom: 0px !important;
    display: flex;
    flex-wrap: wrap;
    padding: 1px 2px !important;
    margin-bottom: 0;
    list-style: none;
    align-items: baseline !important;
    margin-top: 4px;
}

.breadcrumb li h4.page-title {
    margin-bottom: 0px;
}

.breadcrumb li a img {
    width: 33px;
    padding-bottom: 9px;
    margin: 0 5px;
}

.create-breadcrumb {
    margin-top: 0px;
}

.add-new-left {
    margin-left: 20px;
}

.img-head {
    padding-right: 10px;

}

.f-right {

    float: right;
    padding-top: 0px !important;
}

.f-right li:first-child {
    padding-top: 8px !important;
}

.f-right {
    float: right;
    padding-top: 1px !important;
    margin-top: -6px;
}

.text-color {
    color: #0f1c01;
    font-size: 16px;
    line-height: 24px;
}

/* add- payments */

.payment .percent_amount {
    font-size: 8px !important;
    padding: 6px 9px !important;
}

.payment .percent_amount,
.percent_amount-2 {
    padding: 14px 12px !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.draft-btn {
    background-color: var(--green) !important;
    border: var(--green) !important;
}


.save-prints {
    background-color: var(--hippie-blue) !important;
    border: var(--hippie-blue) !important;
}


.financial-sec-box {
    display: flex;
    justify-content: space-between;
    background-color: var(--carbon-grey);
    padding: 20px 20px;
    border-radius: 5px;
}

.gross-bill {
    display: block;

}

.gross-bill i {
    font-size: 20px;
    color: var(--white);
}

.gross-bill .gross-text {
    display: block;
    color: var(--white);

}

.financial-sec-box .bdt-text {
    color: var(--white) !important;
    font-size: 20px;
    padding-top: 10px;


}

.totol-text {
    text-align: left;
}

.breadcrumb .btn.btn-bg-c2 {
    background-color: var(--green-cyan) !important;
}

.breadcrumb .btn.btn-bg-c2:hover {
    background-color: var(--algae-green) !important;
}

.modal-header {
    padding: 10px 10px !important;
}

.modal-footer {
    padding: 10px 10px !important;
}

.doctor-scolle {
    overflow-y: scroll;
    height: 230px;
}

.icon_action i {
    font-size: 15px;
}

.modal-body {
    padding-bottom: 0px !important;
    padding-top: 8px !important;
}

.signature-text {
    padding: 0;
    margin: 0;
}

.jquery-uploader-preview-container {
    padding: 0 !important;
}

.bread-icon li a {
    padding: 5px;
    font-size: 24px;
}


/* .bread-icon li a {
    border: 1px solid;
    padding: 3px ;
    border-radius: 3px;
    
} */

.c-print {

    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: rgb(102, 100, 100);
}



.c-excel {
    color: #1D6F42;
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
}

.c-pdf {
    color: #F40F02;
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
}

.c-csv {
    color: #31bf8b;
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
}

.c-copy {
    color: #a0a2a1;
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
}









#sidebar {
    display: block;
}


















































.activetab {
    background: #2c6a9f;
}


.sidebar-footer {
    display: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button-bevel;
}


::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: #aaa;
}

::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    /* -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); */
}

.jpk-logo {
    justify-content: center;
    display: flex;
}

.jpk-logo img {
    width: 100px;
    text-align: center;
}

.jpk-logo .gow-text {
    text-align: center;
    /* font-size: 24px; */
    color: #000;
    padding-top: 10px;
    font-weight: 400;
}

.invoice-list h4 {
    font-weight: 300;
    font-size: 16px;
}


.invoce-box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.pay-b {
    padding: 0;

}

.pay-b li {
    font-size: 12px;
    font-weight: normal;
}



.table-invoice-pay>thead {
    background-color: #f9f9f9;
    font-size: 11px !important;
    color: #000;
    font-weight: 300;
}


.table-striped>tbody>tr>td {
    font-size: 15px;
}


.patient-section {
    padding: 10px 10px 10px 10px;
    background-color: var(--white);
    margin: 20px 0;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
    border-radius: 5px;
}

.patient-detail {
    text-align: left;
}

.patient-detail h5 {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 5px;
}

.patient-detail p {
    font-size: 12px;
    font-weight: 300;


}



.patient-detail {
    border-left: 1px solid #ddd;
    text-align: center;
    background: #fff;
    margin: 10px 10px;
    padding: 9px 10px;
}

.patient-detail-a {
    text-align: center;
    border: none;
    padding: 0;
}

.patient-detail p.patient-t {
    font-size: 12px !important;

}

span.pay-tb-l {
    /* padding-left: 30px; */
    width: 126px;
    display: inline-block;
}

.deposit_text {
    padding-bottom: 0px;
    margin-bottom: 4px;
    font-size: 14px;
}

/* .total-amount{
 display: flex;
  justify-content: end;
} */

.total-amount .total-grand_text {
    text-align: right;
    font-size: 11px;
    font-weight: normal;
}

.add-patient-history {
    background-color: #f7f7f7;
    padding: 10px 10px;
}

.patient-p-box {
    display: flex;
    justify-content: space-between;



}

.patient-p-box .patient_name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

.name-otieno {
    font-weight: 300;
    font-size: 18px;
    color: #6b6161;
}

.paient-heading {
    font-size: 22px;
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}

/*  */
.payment {
    padding-top: 10px;
    padding-bottom: 0px;
    border: none;
}


.search-type {
    height: 40px;
    width: 100%;
    /* position: absolute; */
    border: 1px solid #ced4da;
    border-radius: 3px;
    /* margin: 2px 0; */
    padding: 10px;
}

.leave-Text {
    padding-top: 40px;
}

.lab-text {
    display: block;
    text-align: center;
    padding: 10px 0;

}

.line-bottom {
    width: 200px;
    height: 3px;
    margin: 0 auto;
    background-color: green;
    width: 140px !important;
}

.img-box-info {
    width: 150px;
    height: 150px;
    border: 1px solid #bdbdbf;
    border-radius: 5px;
}

.dep-text {
    font-size: 14px;
    margin-bottom: 2px;
    padding-top: 10px;
}

.patient-detail-info {
    text-align: left;
    padding-left: 36px;
}

.add-sales {
    background-color: rgb(228 227 227);
    width: 100%;
    height: 200px;
    overflow-y: auto;

}

.sale {
    border: none;
    padding: 0;
    margin-bottom: 20px;
    padding-left: 10px;
}

.sale p.patient-t {
    padding: 0;
    margin: 0;

}

.corporate-id {
    margin-bottom: 5px;
}

.corporate h1 {
    text-align: center;
    font-weight: 400;
    font-size: 33px;
}

.corporate h4 {
    font-weight: 300;
    font-size: 16px;
    text-align: center;
}

.details h4 {
    font-weight: 300;
    font-size: 16px;

}

.details p {
    font-size: 10px;
    font-weight: bold;
}

.unstyled li {
    font-size: 10px;
    font-weight: bold;
}

.invoice-block .unstyled {
    float: right;
    text-align: right;
}




#sidebar .fa.fa-tachometer-alt {
    color: #198754;
}

#sidebar .fa.fa-shopping-cart {
    color: #0dcaf0;
}

#sidebar .fa-solid.fa-user-doctor {
    color: #0d6efd;
}

#sidebar .fa-solid.fa-hospital-user {
    color: #ffc107;
}

#sidebar .fa-solid.fa-clock {
    color: #dc3545;
}


#sidebar .fa.fa-calendar {
    color: #198754;
}

#sidebar .fa-solid.fa-prescription-bottle-medical {
    color: #0dcaf0;
}

#sidebar .fa-solid.fa-users {
    color: #0d6efd;
}

#sidebar .fa-solid.fa-flask-vial {
    color: #ffc107;
}

#sidebar .fa-solid.fa-capsules {
    color: #dc3545;
}



#sidebar .fa-solid.fa-hand-holding-droplet {
    color: #198754;
}

#sidebar .fa-solid.fa-bed-pulse {
    color: #0dcaf0;
}

#sidebar .fa-solid.fa-bed-pulse {
    color: #0d6efd;
}

#sidebar .fa-solid.fa-prescription {
    color: #ffc107;
}




#sidebar .fa-solid.fa-clipboard-user {
    color: #198754;
}

#sidebar .fa-solid.fa-clock {
    color: #0dcaf0;
}

#sidebar .fa-solid.fa-bell {
    color: #0d6efd;
}

#sidebar .fa-solid.fa-envelopes-bulk {
    color: #ffc107;
}

#sidebar .fa-solid.fa-comment-sms {
    color: #dc3545;
}



#sidebar .fa-solid.fa-credit-card {
    color: #198754;
}

#sidebar .fa-solid.fa-file-lines {
    color: #0dcaf0;
}

#sidebar .fa-brands.fa-rocketchat {
    color: #0d6efd;
}

#sidebar .fa-solid.fa-bell-slash {
    color: #ffc107;
}

#sidebar .fa-solid.fa-gear {
    color: #dc3545;
}


#sidebar .fa-solid.fa-clock-rotate-left {
    color: #198754 !important;
}

#sidebar .fa-solid.fa-user {
    color: #0dcaf0;
}





.text-cyan {
    color: #0ebaae !important;
}

.modal-footer>* {
    margin: .25rem;
    border-radius: 50px !important;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0px;
}

.table {
    margin-bottom: 10px !important;
}

table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 22px !important;
}

.guides-container {
    background: #ffffff;
    /* border-radius: 4px; */
    overflow: hidden;
    margin: 15px !important;
    -webkit-box-shadow: 0 0 20px 0 rgba(62, 28, 131, 0.1);
    box-shadow: 0 0 20px 0 rgba(62, 28, 131, 0.1);
    border-radius: 20px;
    max-width: 96% !important;
    width: 100% !important;
}

.guides-box {
    text-align: center;
}

.guides-box {
    text-align: center;
    padding: 12px 7px;
}

.guides-box-col-main-page {
    /* min-height: 210px; */
}

.guides-img-box {
    width: 100px;
    height: 50px;
    margin: 5px auto;
    border-radius: 12px;
    background: #edf7f6;
    padding: 8px;
    text-align: center;
    justify-content: center;
    display: grid;
    line-height: 2;
    font-weight: bold;
    border: 2px solid #89dbe6;
}

.guider-detail h4 {
    font-size: 17px;
    color: #334e6f;
}

.btn-info {
    color: #fff !important;
    background-color: #084298 !important;
    border-color: #084298 !important;
    border-radius: 50px !important;
    margin-right: 5px;
}

.custom-cbox select,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(https://newtrendsupply.vendorelite.com/images/down-arrow.png) no-repeat right center !important;
    border: 1px solid #000;
    padding-right: 24px;
}

.no-print {
    float: right;
}

.prefer {
    font-size: 16px;
    text-transform: capitalize;
    margin-top: 5px !important;
}

.modal-header {
    background: rgb(51 122 183 / 26%);
}

.modal-header .btn-close {
    border: 1px solid;
    border-radius: 50px;
    /* color: #f00 !important; */
}

.modal-footer {
    justify-content: center !important;
}

.main-dashboard-icon-fornt-1 i {
    color: #56bfea;
}

.main-dashboard-icon-fornt-2 i {
    color: #2f5233;
}

.main-dashboard-icon-fornt-3 i {
    color: #ffc107;
}

.main-dashboard-icon-fornt-4 i {
    color: #0ebaae;
}

.main-dashboard-icon-fornt-5 i {
    color: #626262;
}

.main-dashboard-icon-fornt-6 i {
    color: #ab7df6;
}

.main-dashboard-icon-fornt-7 i {
    color: #7be390;
}

.main-dashboard-icon-fornt-8 i {
    color: #18a558;
}

.main-dashboard-icon-fornt-9 i {
    color: #4e9d9d;
}

.main-dashboard-icon-fornt-10 i {
    color: #49535a;
}

.main-dashboard-icon-fornt-11 i {
    color: #bfb7b7;
}

.main-dashboard-icon-fornt-12 i {
    color: #2a7fba;
}

#sidebar .fa-arrows-rotate {
    color: #dc3545;
}


/* new-css */
.logo-stone {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    margin-left: 30px;
    margin-top: 12px;
    display: block;
}


.month-name {
    font-size: 15px;
    font-weight: 600;
    height: 200px;
    background-color: #dcecfb;
    color: #000;
    padding: 15px 20px;
}

.Invoic-palan span {

    font-size: 15px;
    font-weight: 600;
    display: block;
    text-align: center;
}

.Invoic-palan {
    margin-bottom: 10px;
}

.doctor-scolle-dash {
    padding-bottom: 1px;
}

.dorp-right .icon_right {
    font-size: 23px;
    padding: 0px 10px;
    margin-top: 6px;
    color: rgb(44 106 159);
}

.project_box {
    display: flex;
    justify-content: space-around;
    background-color: rgb(44 106 159);
    padding: 2px;
    color: #ffff;
    border-radius: 5px 5px 0px 0px;
}

.search-text {

    color: var(--white);

    font-size: 13px;
    text-align: center;

    padding: 7px 0px;
    text-transform: uppercase;


}

.input-group-text {
    font-size: 14px !important;
}


.picker_date {
    font-size: 15px !important;
    border: 1px solid #cccccc;
    outline: none !important;
}

.table>thead {
    background-color: #cfcfcf;
    font-weight: 500;
    color: var(--white);
}

table.dataTable th {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.table.dataTable td {
    font-size: 15px;
    font-weight: normal;
    vertical-align: middle;
}

/* ul li table */
.icon_action {
    padding: 0;
    margin: 0;
}

.icon_action li {
    display: inline-block;
}

.icon_action li a {
    color: #5f655e;
    padding: 2px 4px;
    font-size: 18px;

}

.fa-circle-info {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.trans-icon {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.fa-gopuram {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--light-purple);
}

.squqre-font {
    color: #fff !important;
    border: none !important;
}

.text-red {

    color: var(--red);
    font-weight: 400;
    padding: 3px;
    font-size: 16px;

}

.text-green {

    color: var(--green);
    font-weight: 400;
    padding: 3px;
    font-size: 16px;

}

.pfd-file {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--green-blue);
}

.direct-user {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--light-purple);
}

.doller-r {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--blue);
}

.print-r {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--green-blues);
}



.fa-pencil-square-o {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: #0a1ad7;
}

.fa-trash-o {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: #f00;
}

.fa-eye {
    border: 1px solid;
    padding: 3px;
    border-radius: 3px;
    color: var(--hippie-blue);
}

.page-search {
    /* width: 200px; */
    display: flex;
    justify-content: space-between;
    padding: 6px 0px 4px 0px;
}

.pagenumber {
    width: 150px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.pagenumber span.show {
    margin-top: 3px;
}

.pagenumber span select.select-btn {
    width: 51px;
    height: 26px;
    padding: 4px;
    font-size: 14px;
    border-radius: 3px;
    margin-bottom: 9px;
}

.search-enter {
    font-size: 14px;
    border-radius: 3px;
    padding: 3px 5px;
}

.number-show {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
}

.show_info {
    font-size: 14px;
}

.paging-numbers {
    padding: 0px 0px;
}

.paginate_btn {
    color: #000;
    font-size: 14px;
}

.paginate_btn-num {
    background-color: #0f1c01;
    padding: 0px 8px;
    color: #fff;
    margin: 0px 10px;
}

.paginate_btn-num:hover {
    color: #fff;
    background-color: #132400;
}

.dis-right {
    display: flex;
    justify-content: end;
}

.dis-right .btn-back {
    margin-left: 10px;
    background-color: #131313 !important;
}


.dis-right .btn-create {
    margin-left: 10px;
    background-color: #337ab7 !important;
}

.form-control {
    font-size: 13px;

}

.client_text {
    color: #000;
    text-transform: uppercase;
    margin-top: 10px;
}

.table-responsive {
    background-color: #fff;


}

.Table-section {
    background-color: #fff;


}

.filter_section {
    padding: 0px 0px;
    /* position: absolute;
     z-index: 9; */
    background-color: #fff;
    margin-bottom: 30px;
}

.top-pay {
    background: #2c6a9f !important;
    margin-top: -6px;
    display: none !important;
}


.dropdown-menu {
    background: #337ab7 !important;
}

.dropdown-menu li a.dropdown-item {
    color: #fff;
    font-size: 13px;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #2c6a9f !important;
}

.btn-control {
    background-color: #2c6a9f !important;
}

.template_sention {
    padding: 7px 10px;
}

.client_text span {
    display: inline-block;
    position: relative;
    top: -2px;
    padding-right: 4px;
}


/* multi sectore sales page */
.multiSelect {
    width: 100%;
    position: relative;
}

.multiSelect *,
.multiSelect *::before,
.multiSelect *::after {
    box-sizing: border-box;
}

.multiSelect_dropdown {
    font-size: 13px;
    min-height: 31px;
    line-height: 35px;
    border-radius: 0px 4px 4px 0px;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: #444f5b;
    border: 1px solid #d9dbde;
    font-weight: 400;
    padding: 0.5px 13px;
    margin: 0;
    transition: .1s border-color ease-in-out;
    cursor: pointer;
    margin-top: -4px;
    position: absolute;
    z-index: 99;
    width: 100%;
}

.multiSelect_dropdown.-hasValue {
    padding: 5px 30px 5px 5px;
    cursor: default;
}

.multiSelect_dropdown.-open {
    box-shadow: none;
    outline: none;
    padding: 4.5px 29.5px 4.5px 4.5px;
    border: 1.5px solid #4073FF;
}

.multiSelect_arrow::before,
.multiSelect_arrow::after {
    content: '';
    position: absolute;
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 20px;
    border-bottom: 8px solid #99A3BA;
    top: 40%;
    transition: all .15s ease;
}

.multiSelect_arrow::before {
    right: 18px;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}

.multiSelect_arrow::after {
    right: 13px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

.multiSelect_list {
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    max-height: calc(10 * 31px);
    top: 28px;
    left: 0;
    z-index: 99;
    right: 0;
    background: #fff;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: opacity 0.1s ease, visibility 0.1s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    -webkit-transform: scale(0.8) translate(0, 4px);
    transform: scale(0.8) translate(0, 4px);
    border: 1px solid #d9dbde;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
}

.multiSelect_option {
    margin: 0;
    padding: 0;
    opacity: 0;
    -webkit-transform: translate(6px, 0);
    transform: translate(6px, 0);
    transition: all .15s ease;
}

.multiSelect_option.-selected {
    display: none;
}

.multiSelect_option:hover .multiSelect_text {
    color: #fff;
    background: #4d84fe;
}

.multiSelect_text {
    cursor: pointer;
    display: block;
    padding: 5px 13px;
    color: #525c67;
    font-size: 14px;
    text-decoration: none;
    outline: none;
    position: relative;
    transition: all .15s ease;
}

.multiSelect_list.-open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(0, 12px);
    transform: scale(1) translate(0, 12px);
    transition: opacity 0.15s ease, visibility 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.15s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

.multiSelect_list.-open+.multiSelect_arrow::before {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
}

.multiSelect_list.-open+.multiSelect_arrow::after {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
}

.multiSelect_list.-open .multiSelect_option {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.multiSelect_list.-open .multiSelect_option:nth-child(1) {
    transition-delay: 10ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(2) {
    transition-delay: 20ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(3) {
    transition-delay: 30ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(4) {
    transition-delay: 40ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(5) {
    transition-delay: 50ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(6) {
    transition-delay: 60ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(7) {
    transition-delay: 70ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(8) {
    transition-delay: 80ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(9) {
    transition-delay: 90ms;
}

.multiSelect_list.-open .multiSelect_option:nth-child(10) {
    transition-delay: 100ms;
}

.multiSelect_choice {
    background: rgba(77, 132, 254, 0.1);
    color: #444f5b;
    padding: 4px 8px;
    line-height: 17px;
    margin: 5px;
    display: inline-block;
    font-size: 13px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
}

.multiSelect_deselect {
    width: 12px;
    height: 12px;
    display: inline-block;
    stroke: #b2bac3;
    stroke-width: 4px;
    margin-top: -1px;
    margin-left: 2px;
    vertical-align: middle;
}

.multiSelect_choice:hover .multiSelect_deselect {
    stroke: #a1a8b1;
}

.multiSelect_noselections {
    text-align: center;
    padding: 7px;
    color: #b2bac3;
    font-weight: 450;
    margin: 0;
}

.multiSelect_placeholder {
    position: absolute;
    left: 5px;
    font-size: 13px;
    top: 6px;
    padding: 0 4px;
    background-color: #fff;
    color: #b8bcbf;
    pointer-events: none;
    transition: all .1s ease;
}

.multiSelect_dropdown.-open+.multiSelect_placeholder,
.multiSelect_dropdown.-open.-hasValue+.multiSelect_placeholder {
    top: -11px;
    left: 17px;
    color: #4073FF;
    font-size: 13px;
    display: none;
}

.multiSelect_dropdown.-hasValue+.multiSelect_placeholder {
    top: -11px;
    left: 17px;
    color: #6e7277;
    font-size: 13px;
}

.multiSelect {
    padding: 0px !important;
    border: 0px !important;
    border-radius: 0px 0px 0px 0px !important;
}

/* end */

.btn-add {
    background-color: #57970f !important;
    border: 0px !important;
}

.name-text {
    font-weight: 600;
    font-size: 14px;
}

.quick-text {
    font-size: 14px;
    padding: 18px 0px 3px 0px;
}

.client_info {
    background-color: #fff;
}

.nav-tabs .nav-link .icon-tab {
    font-size: 20px;
    display: block;
    /* border: 1px solid rgb(33 62 1); */
    color: #2c6a9f;

    border-radius: 3px;
}

.nav-tabs .nav-link {
    border: 1px solid #2c6a9f !important;
    margin-right: 2px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    /* border: 1px solid #f7f7f7 !important; */
    background-color: #fff;
}

.nav-tabs {
    border-bottom: 1px solid#fff !important;
}


.nav {
    justify-content: center;
}

.client-file {
    padding: 4px 0px 0px 0px;
}

.popup-client-not {
    padding: 0px 10px;
}

.textarea {
    padding: 10px;
}

.last-edit {
    padding-right: 30px;
}

.place-box {
    width: 200px;
    padding: 5px 10px;
    margin-bottom: 10px;
}

.nav-link {
    padding: 6px 10px !important;
    font-size: 13px;
    color: #000 !important;
}

.logo-box a.logo-stone:hover {
    color: #000 !important;
}

.required-icon {
    color: #f00;
    padding-left: 2px;

}

.input-group-text {
    padding: 4px !important;
    border-radius: .25rem 0rem 0rem .25rem !important;
}

.form-control {
    padding: 4px !important;
}

.form-select {
    padding: 4px !important;
    border-radius: 0px !important;
}

.client-bill .shipping {
    color: #000;
}

.client-bill {
    border-bottom: 1px solid #ccc;
}

.shipping_add {
    padding: 0px
}

.billing_add {
    padding: 0px
}

.check-add {
    display: flex;
    justify-content: end;
    padding: 0px;
    position: relative;
    top: 7px;
}



.text-area-box {
    padding: 13px 4px !important;
}

.shipping .icon-bill i {
    font-size: 25px;
    color: #0d6efd !important;
    padding-right: 10px;
}

.form-check-label {
    color: #444 !important;
    font-size: 14px;
    padding-top: 2px;
}


.shipping-box {
    padding: 10px 0px;
}

.nav-tabs .nav-link.active {
    background: #2c6a9f !important;
    color: #fff !important;
}

.nav-tabs .nav-link.active .icon-tab {
    color: #fff !important;
}

.dis-right .new-popup {
    background-color: #caddec !important;
    color: #000 !important;
}

.hasDatepicker {
    border: 1px solid #ccc !important;

    border-radius: 0.25rem;
    padding: 4px !important;
    font-size: 13px !important;
}


.input-group>.hasDatepicker {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.multiSelect {
    padding: 4px 0px !important;
}

.breadcrumb-item .fa.fa-house {
    display: none;
}

.project-padd {
    padding: 0px 10px;
}

/* upload */


.file-upload {
    background-color: #ffffff;
    width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #337ab7;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #337ab7;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.file-upload-btn:hover {
    background: #337ab7;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    margin-top: 20px;
    border: 4px dashed #337ab7;
    position: relative;
    border-radius: 10px;
}

.image-dropping,
.image-upload-wrap:hover {
    background-color: #f8fcff;
    border: 4px dashed #337ab7;
}

.image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
}

.drag-text {
    text-align: center;
}

.drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #337ab7;
    padding: 60px 0;
}

.file-upload-image {
    max-height: 200px;
    max-width: 200px;
    margin: auto;
    padding: 20px;
}

.remove-image {
    width: 200px;
    margin: 0;
    color: #fff;
    background: #cd4535;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #b02818;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}

.page-create {
    overflow-x: initial !important;
}

.dis-right a.btn-add-log {
    border-radius: 20px !important;
    /* background-color: #337ab7 !important; */
    border: 0px !important;
    font-size: 14px;
    outline: #0d6efd;
}



.work-order-btn {
    background-color: #c9d0d6 !important;
    color: #000 !important;

}

.work-order-btn:hover {
    background-color: #c9d0d6c5 !important;
}

.add-new-client-icon {
    padding: 6.5px !important;
    position: relative;
    top: 7px;
}

.nav-tabs .nav-link:hover {
    /* border: 1px solid #dcecfb !important; */
    background-color: #dcecfb;
}

.quote-color {
    background-color: #e7e5e5;
}

.quote-color .doc-text {
    color: #000;
}

.responsive-quote {
    padding: 0px !important;
}

.quote-amount {
    width: 400px !important;


    float: right;
    display: block;
    padding: 10px 10px;
}

.quote-sub-total {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    padding: 6px 0px;
    font-size: 14px;
}

.clear {
    clear: both;
}

.dis-padding {
    padding: 1px 4px !important;
    font-size: 13px !important;
    border: 1px solid #ccc;
    float: right;
    display: block;
    margin-top: 0px;
}

.text-area {
    height: 26px !important;
}

.quote-dropdown::after {
    display: none !important;
}

.quote-dropdown {
    background-color: inherit !important;
    border: none !important;
    color: #131313;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    padding: 6px !important;

}

.quote-dropdown .user i {
    color: #131313;
}

.qoute-menu {
    background-color: #e9eef9 !important;
}

.qoute-menu li a {
    padding: 8px;
    color: #000 !important;
    font-size: 14px !important;

}

.qoute-menu li a i {
    padding: 0 10px;
    color: #0d6efd;
    font-size: 18px !important;
}


.qoute-menu .dropdown-item:focus,
.qoute-menu .dropdown-item:hover {
    background-color: #fff !important;
}

.action_qoute {
    float: left;
    margin-right: 2px;
}

.invoice-btn {
    margin-right: 10px;
}


/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
    --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
}

.pdf-setting .doc-text {
    color: #2c6a9f;
}

/* update */

.form-label {
    font-size: 13px;
    font-weight: 400;
    color: #444;
    margin-bottom: 2px !important;
}

.form-control {
    padding: 4px !important;
    background-color: #f5f8fa !important;
    border-radius: 0px !important;
    border: 1px solid #e5ffff;
    outline: none !important;
}

.input-group-text {
    padding: 4px !important;
    border-radius: 0.25rem 0rem 0rem 0.25rem !important;
    width: 135px;
    background-color: inherit !important;
    border: inherit !important;
}

.input-group-text {
    font-size: 15px !important;
    margin-top: 5px;
}

.input-group {
    margin-bottom: 1rem !important;
}


.center-serach {
    height: 37px;
}

/* swich */
.switch {
    position: relative;
    display: block;
    vertical-align: top;
    width: 85px;
    height: 25px;
    padding: 3px;
    /* margin: 0 10px 10px 0; */
    border-radius: 18px;
    cursor: pointer;
    /* margin: 0 10px; */
    margin-top: -5px;
}

.switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: capitalize;
    background: #2f2f2f;
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%), inset 0 0 2px rgb(0 0 0 / 15%);
    color: 3fff;
}

.switch-label:before,
.switch-label:after {
    position: absolute;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.switch-label::before {
    content: attr(data-off);
    right: 8px;
    color: #fff;
    text-shadow: 0 1px rgb(255 255 255 / 50%);
    top: 12px;
    font-size: 12px;
}

.switch-label:after {
    content: attr(data-on);
    left: 7px;
    color: #FFFFFF;
    text-shadow: 0 1px rgb(0 0 0 / 20%);
    opacity: 0;
    top: 12px;
    font-size: 12px;
}

.switch-input:checked~.switch-label {
    background: #15c32a;
    border-color: #15c32a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.switch-input:checked~.switch-label:before {
    opacity: 0;
}

.switch-input:checked~.switch-label:after {
    opacity: 1;
}

.switch-handle {
    position: absolute;
    top: 9px;
    left: 8px;
    width: 13px;
    height: 13px;
    / background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);/ background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
    border-radius: 100%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-handle:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    width: 12px;
    height: 12px;
    background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
    background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}

.switch-input:checked~.switch-handle {
    left: 64px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
  ========================== */
.switch-label,
.switch-handle {
    transition: All 0.3s ease;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
}

.switch_off {
    margin-top: 2px;
    margin-bottom: -3px;
    display: inline-block;
}

.switch-box {

    display: flex;
    justify-content: end;
}


/*
 * FilePond Custom Styles
 */
.avatar-upload {
    position: relative;
    max-width: 47px;
    /* margin: 50px auto; */
    position: absolute;
    top: 2px;
    left: 252px;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: -13px;
    z-index: 1;
    top: 0px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input+label:after {
    content: "\f040";
    font-family: 'FontAwesome';
    color: #757575;
    position: absolute;
    top: -1px;
    left: 17px;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 42px;
    height: 42px;
    position: relative;
    border-radius: 100%;
    border: 1px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/*  */

.add-box {
    padding-top: 25px;
    padding-left: 20px
}

.add-box h4 {
    padding-left: 10px;
}

.tabs-system {
    border: 0px !important;
}

.tabs-system .nav-link {
    margin-right: 2px !important;
    padding: 6px 4px !important;
}


.details-text p {
    padding: 3px 0px;
    font-size: 13px;
    margin-bottom: 0px !important;
    font-weight: 400;
}

.details-text p i {
    font-size: 18px;
    color: #444;
    padding-right: 5px;
}

.search-btn-header {
    border-radius: 3px !important;
    padding: 5px !important;
}

button.btn.btn-primary.search-btn {
    padding: 6px 12px !important;
    margin: -1px 2px 0px 0px !important;
}

.tabs-system .nav-link {

    font-size: 12px;
}



.check-box {
    display: flex;

}

.file-upload-box .form-check {
    padding-left: 48px;
    margin-top: 4px;
    font-size: 14px;
}

.file-upload-box {

    padding: 10px;
}

.model-btn-box {
    justify-content: start !important;
}

.dis-right .new-popup {

    margin-top: -2px;
}

.center-serach .btn-control {
    background-color: #2c6a9f !important;
}

.billing_add {
    padding: 0px 10px;
}

.select-employee-history {
    width: 130px !important;
    position: relative;
    top: -6px;
}

.input-group.mb-2.select-employee-history select {
    font-size: 14px;
}


.box-dashboard {
    background: #e5dbf7;
    border: 2px solid #ccc;
    height: 200px !important;
    padding: 10px;
}

.box-dashboard h2 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

.border-left-discussion {
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

.discussion-board {


    font-size: 13px;
}

.discussion-bx {
    padding-left: 10px;
}

/*.border-left-discussion:nth-child(2n){
   background-color: yellow;
 }*/



.border-left-discussion:nth-child(-n + 9) {
    border-left: 1px solid #ccc;
    margin-bottom: 1px;
}

.input-group .file_up {
    background-color: inherit !important;
    border: inherit !important;
}

.file-upload-show {
    min-width: auto;
    min-height: auto;
    /* background-color: #f2f2f2; */
    margin-bottom: 15px;
    padding: 5px 1px;
    font-size: 13px;
    margin-right: 12px;
}

.file-upload-show img {
    width: 28px;
}

.file-flex {
    display: flex;

}

.trash-icon i.fa-trash-o,
.trash-icon2 i.fa-trash-o,
.trash-icon3 i.fa-trash-o,
.trash-icon4 i.fa-trash-o {
    margin-top: 7px;
    border: none !important;
    font-size: 14px;

}


/* new-css-discussion-board */



h1 {
    font-size: 26px;
    font-weight: 700;
}

h2 {
    font-size: 18px;
    font-weight: 400;
}

h3 {
    font-size: 18px;
    font-weight: 700;
}

h4 {
    font-size: 12px;
    font-weight: 400;
    color: #89989c;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-form__avatar,
.post__avatar {
    position: absolute;
    top: 6px;
    left: 15px;
    height: 40px;
    width: 40px;
    background-color: #89989c;
    border-radius: 50%;
}

.comment-form .comment-form__actions .button {
    position: relative;
    display: inline-block;
    width: initial;
    height: 35px;
    padding: 0 10px;
    margin-left: 15px;
    background-color: white;
    color: #4ab2d9;
    line-height: 35px;
    font-weight: 400;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid #4ab2d9;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}

.comment-form .comment-form__actions .button:hover {
    background-color: #4ab2d9;
    color: #FFF;
}

.comment-form {
    position: relative;
    padding: 15px;
    background-color: #FFF;
    border-radius: 2px;
    /* box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15); */
}

.comment-form-n,
.comment-form-n2 {
    padding: 15px;
    background-color: #FFF;
    border-radius: 2px;
    /* box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15); */
}

/* .container {
  width: 90%;
  max-width: 900px;
  margin: 50px auto 100px;
} */

/* .response-group {
  position: relative;
  width: 100%;
  padding: 100px 15px 15px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
} */
.response-group>header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 2px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.response-group>header i {
    margin: 0 10px 0 20px;
}

.response-group>header .header-dropdown-trigger {
    border: 1px solid transparent;
    padding: 10px;
    border-radius: 2px;
    cursor: pointer;

}

.text-box {
    font-size: 15px;
}

.response-group>header .header-dropdown-trigger:after {
    content: "";
    font-family: "FontAwesome";
    font-size: 0.5em;
    line-height: 2.5;
    vertical-align: top;
    margin-left: 5px;
}

.response-group>header .header-dropdown-trigger:hover,
.response-group>header .header-dropdown-trigger.active {
    border: 1px solid #cdd7dc;
}

.response-group>.header-dropdown {
    display: none;
    position: relative;
    top: -38px;
    left: -16px;
    width: calc(100% + 32px);
    padding: 15px 1px;
    background: #ebeff1;
}

.response-group>.header-dropdown.expand {
    display: block;
}

.response-group>.header-dropdown ul {
    margin: -15px;
}

.response-group>.header-dropdown li {
    padding: 1em 15px;
    cursor: pointer;
    border-bottom: 1px solid #ebeff1;
}

.response-group>.header-dropdown li h2 {
    display: inline-block;
    margin: 0;
    font-size: 15px;
}

.response-group>.header-dropdown li:hover h2 {
    font-weight: 700;
}

.response-group>.header-dropdown li span {
    float: right;
    margin-left: 15px;
    line-height: 1.25;
}

.response-group>.header-dropdown .progress {
    float: right;
    width: 50%;
    margin: 0.25em 0;
}

.progress {
    position: relative;
    width: 100%;
    height: 0.75em;
    border-radius: 2px;
    background-color: #ebeff1;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
}

.progress__complete {
    position: absolute;
    top: 0;
    width: 50%;
    height: 0.75em;
    background-color: #5fbc71;
    border-radius: 2px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
}

.response {
    position: relative;
}

.response__number {
    position: absolute;
    width: 2rem;
    height: 2rem;
    line-height: 1.8rem;
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
    color: #89989c;
    border: 2px solid #cdd7dc;
    border-radius: 50%;
}

.response__title {
    margin-left: 3.25rem;
    margin-bottom: 50px;
}

/* .post-group {
  margin-left: 3.5rem;
} */

.post {
    position: relative;
    padding: 15px 15px 0 80px;
    margin-bottom: 20px;
    margin-top: 20px;
    border: 1px solid #ebeff1;
    border-bottom: none;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
}

.post__author {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
}

.post__timestamp {
    margin-top: 0;
    font-size: 13px;
}

.post__body {
    font-size: 13px;
}

.post__actions {
    height: 40px;
    width: calc(100% + 95px);
    margin-left: -80px;
    background-color: #ebeff1;
    border-top: 1px solid #ebeff1;
}

.post__actions .button {
    float: left;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: top;
    border-right: 1px solid #cdd7dc;
}

.post__actions .button i.solid {
    display: none;
}

.post__actions .button:not(.comment):active i {
    transform: scale(1.2);
}

.post__actions .button:not(.comment-trigger):hover,
.post__actions .button:not(.comment-trigger).active {
    background-color: #FFF;
    cursor: pointer;
}

.post__actions .button:not(.comment-trigger):hover i.solid,
.post__actions .button:not(.comment-trigger).active i.solid {
    display: inline-block;
}

.post__actions .button:not(.comment-trigger):hover i:not(.solid),
.post__actions .button:not(.comment-trigger).active i:not(.solid) {
    display: none;
}

.post__actions .button:not(.comment-trigger):hover.button--approve,
.post__actions .button:not(.comment-trigger).active.button--approve {
    color: #5fbc71;
}

.post__actions .button:not(.comment-trigger):hover.button--deny,
.post__actions .button:not(.comment-trigger).active.button--deny {
    color: #f26f54;
}

.post__actions .button--flag {
    width: 60px;
    border-right: none;
    font-weight: 400;
}

.post__actions .button--flag i {
    margin-right: 5px;
}

.post__actions .button--fill {
    width: calc(100% - 140px);
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: #89989c;
}

.post__comments {
    display: none;
    padding: 15px;
}

.comment-group {
    padding-bottom: 15px;
}

.comment-group .post {
    padding: 15px 15px 0 65px;
    margin-bottom: 15px;
    box-shadow: none;
}

.comment-group .post__avatar {
    height: 35px;
    width: 35px;
}

.comment-form {
    height: 100%;
    padding: 9px 27px 8px 67px;

    justify-content: space-between;
    border-radius: 42px;
    background-color: inherit;
    border: 1px solid #cccc;
}

.comment-form-n,
.comment-form-n2 {
    height: 100%;
    padding: 9px 27px 8px 67px;

    justify-content: space-between;
    border-radius: 42px;
    background-color: inherit;
    border: 1px solid #cccc;
}


.comment-form textarea {
    width: 100%;
    /* margin-bottom: 10px; */
    font-size: 13px;
    border: 1px solid #cdd7dc;
    border-radius: 2px;
    box-shadow: 0 1px 1px #ebeff1 inset;
    height: 38px;
}


.comment-form textarea:focus {
    outline: none;
}

.comment-form-n .comment-form__avatar {
    height: 35px;
    width: 35px;
}

.comment-form-n2 .comment-form__avatar {
    height: 35px;
    width: 35px;
}




.comment-form .comment-form__actions {
    text-align: right;
    /* width: 38%; */

}

.comment-form .comment-form__actions .button {
    float: none;
}

.comment-form .comment-form__actions .button--confirm {
    border-color: #5fbc71;
    color: #5fbc71;
}

.comment-form .comment-form__actions .button--confirm:hover {
    background-color: #5fbc71;
    color: #FFF;
}

.comment-form .comment-form__actions .button--light {
    border-color: transparent;
    color: #89989c;
}

.comment-form .comment-form__actions .button--light:hover {
    background-color: #89989c;
    color: #FFF;
}

.post--commenting .post__actions {
    height: initial;
}

.post--commenting .button.comment-trigger span {
    display: none;
}

.post--commenting .post__comments {
    display: block;
    margin-top: 40px;
    border-top: 1px solid #cdd7dc;
}

.post-box {
    display: flex;
    justify-content: space-between;
}

.comment-n-box {
    display: flex;
    justify-content: space-between;
}


.dashboard-show {
    background-color: #fff;
    width: 215px;
    height: auto;
    border-radius: 3px;
    text-align: center;
    position: relative;

}

.dashboard-padd {
    padding: 13px 10px 4px 10px;
}

.dash-home-page {
    display: flex !important;
    justify-content: space-between !important;
}


.profile-name {
    font-size: 15px;
    color: #000;
    font-weight: 300;
}

.view-profile {
    background-color: #fff;
    padding: 10px 10px 2px 10px;
    border: 1px solid #ffa696;
    text-align: left;
}

.dashboard-show:hover .view-profile {
    background-color: #f2f2f2;

}

.dashboard-show:hover .dashboard-padd {
    background-color: #ffa696c9;
}

.dashboard-show:hover .dashboard-padd-2 {

    background-color: #ffef96ae;
   
}

.dashboard-show:hover .dashboard-padd-3{
    background-color: #96efffcb; 
}
.dashboard-show:hover .dashboard-padd-4{
    background-color: #a2ff96bf;
}
.view-billing {
    background-color: #fff;
    padding: 10px 10px 2px 10px;
    text-align: left;
     border: 1px solid #fff096;
}

.dashboard-show:hover .view-billing {
    background-color: #f2f2f2;
    border: 1px solid #fff096;
}
.dashboard-show:hover .view-project {
    border:1px solid #a3ff96;
}
.view-project {
    border:1px solid #a3ff96;
  
}
.dashboard-show:hover .view-employee{
    border: 1px solid #96efff;
}
.view-employee {
    border: 1px solid #96efff;
}
.dashboard-show:hover .dashboard-padd-5 {
     background-color:#9698ffc0 ;
    
}
.dashboard-show:hover .user-project{
    border-color:  #9697ff
}
.user-project {
    border-color:  #9697ff;
}
.bg-blue {
    background-color: #0a1ad7 !important;
}

a.btn.view_text {
    padding: 4px 7px;
    font-size: 13px !important;
}

/* line 177, ../sass/test.scss */
.dashboard-show:hover {

    background-color: #fff;
    transition: 0.3s;


}

.dis-flex {
    display: flex;
    justify-content: space-between;
}

.dashboard-show h2.dash-title {
    text-align: center;
    color: #000;
    padding: 0px 0px;
    display: block;
    font-size: 15px !important;
    font-weight: 500;
}

.dashboard-show p {
    padding: 0px;
    font-size: 12px;
    color: #000;
    text-align: left;
}

.dashboard-show img {
    width: 50px;
    text-align: center;
}

.dashboard-show a:hover {
    color: #000000ad;
}



.dashboard-padd {
    background-color: #ffa696;
}

.dashboard-padd-2 {
    background-color: #fff096;
}

.dashboard-padd-3{
    background-color: #96efff;
}

.dashboard-padd-4 {
    background-color: #a3ff96;
}
.dashboard-padd-5 {
    background-color: #9697ff;
}

img.vert-move {
    -webkit-animation: mover 0.1s infinite alternate;
    animation: mover 1s infinite alternate;
}

img.vert-move {
    -webkit-animation: mover 0.1s infinite alternate;
    animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes mover {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}


img.vert-move2 {
    -webkit-animation: mover2 1s infinite alternate;
    animation: mover2 1s infinite alternate;
}

img.vert-move2 {
    -webkit-animation: mover2 1s infinite alternate;
    animation: mover2 1.5s infinite alternate;
}

@-webkit-keyframes mover2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes mover2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}


.new_text {
    position: absolute;
    background-color: #F40F02;
    right: 0px;
    top: 0px;
    padding: 10px;
    transform: rotate(10deg);
}


.btn-check:focus+.btn-secondary, .btn-secondary:focus, .btn-secondary:focus-visible {
    color: #fff;
    box-shadow: none;
}
/* 
.dropdown-menu.show {
  
    display: block;
    transition: all 0.5s ease-out;
} */
.radius-2 {border-radius: 2px;}
.mw-100 {display: block; text-align: center;} 
.breadcrumb-item.active {color: #0d6efd !important;;}

.support {
    display: flex;}
.support {
    display: flex;
    margin-bottom: 10px;
}
.support-text {
    padding-left: 15px;
    display: inline-block;
    margin-bottom: 8px;
}
.support i {
    color: #0061b5;
    font-size: 30px;
    float: left;
    margin-top: 0px;
}
.support-text h4 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}
.support-text span {
    color: #000;
    font-size: 15px;
}
.support .modal-header .btn-close {font-size: 10px;}




.rating {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 150px;
    position: relative;
  }
  
  .rating-0 {
    filter: grayscale(100%);
  }
  
  .rating > input {
    display: none;
  }
  
  .rating > label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .3s;
  }
  
  .rating > input:checked ~ label,
  .rating > input:checked ~ label ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  }
  
  
  .rating > input:not(:checked) ~ label:hover,
  .rating > input:not(:checked) ~ label:hover ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  }
  
  .emoji-wrapper {
    width: 100%;
    text-align: center;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .emoji-wrapper:before,
  .emoji-wrapper:after{
    content: "";
    height: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  
  .emoji-wrapper:before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
  }
  
  .emoji-wrapper:after{
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
  }
  
  .emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
  }
  
  .emoji > svg {
    margin: 15px 0; 
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }
  
  #rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(-100px); }
  #rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(-200px); }
  #rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(-300px); }
  #rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(-400px); }
  #rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(-500px); }
  
  .feedback {
    max-width: 360px;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0,0,0,.05);
  }

  small.allowed-filedegault {
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    padding-left: 10px;
    display: flex;
}

 #hoverbox {
  /* height: 100vh; */
  width: 100%;
  position: relative;
}
#tooltip {
  opacity: 0;
  position: absolute;
  background-color: white;
  color:black;
  top: 0;
  left: 0;
  width:300px;
  padding: 5px;
  border-radius: 15px;
  border: 3px solid #f00;
  z-index:99999999;
  line-height: 20px;
}
#hoverbox:hover #tooltip {
  opacity: 1;
}