
body {
    background: #f7f7f7;
    color: #2a3547;
}
body.abp-empty-layout {
    background: #fff;
}
/*validaitons*/
#AbpPageAlerts {
    /*position: absolute;*/
    width: 100%;
    top: 0;
}

/*Login & register */
.cover-img-left {
    height: 100vh;
    background: url("../themes/basic/images/register-doctor.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-img-left--login {
    background: url("../themes/basic/images/login-doctor.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.step {
    background-color: #bbbbbb;
    border-radius: 50%;
}

.step.active {
    background-color: var(--color-primary);
    opacity:1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #fc1299;
}
.form-text {
    color: #414141;
}

/*Header */
#main-navbar {
    background-image: linear-gradient(-225deg, #006adb, #fc1098);
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    padding:0 !important;
}

#main-navbar .nav-item.active {
    background: rgb(0 0 0 / 27%);
}
#main-navbar .nav-link {
    color: #fff;
}
#main-navbar .nav-link i {
    display:block
}
#main-navbar .dropdown-toggle::after {
    display: none;
}
@media (max-width:991px) {
    #main-navbar .nav-link i {
        display: inline-block;
    }
}
@media screen and (min-width: 992px) {
    #main-navbar .navbar-main li:hover {
        background-color: rgba(0,0,0,0.1);
    }
    #main-navbar .navbar-main li.active {
        background-color: rgba(0,0,0,0.3);
    }
    .navbar-sub .dropdown-item:active,
    .navbar-sub .dropdown-item.active {
        background-color: var(--bs-dropdown-link-hover-bg);
    }
    .navbar-sub .dropdown-menu {
        box-shadow: var(--bs-box-shadow) !important;
    }
    .navbar-sub .dropdown-menu a,.calendar-actions .dropdown-menu a,,.calendar-actions .dropdown-menu button{
        color: #5d596c;
    }
    .navbar-sub a:hover,.calendar-actions a:hover,.calendar-actions button:hover{
        color: var(--color-primary);
    }
    .calendar-actions a:active {
        background-color: var(--bs-dropdown-link-hover-bg);
    }
    #main-navbar .nav-item {
        text-align: center;
    }
    #main-navbar .navbar-sub {
        align-items: center;
        background: #ed169d;
    }
    .navbar-sub:after {
        border: solid transparent;
        border-top-color: #fc1299;
    }
}
@media screen and (max-width: 991.5px) {
    .navbar-sub .dropdown-item:active {
        background-color:transparent;
    }
    .user-border {
        border-bottom:1px solid var(--bs-border-color-translucent);
        padding-bottom:10px;
        margin-top:5px;
    }
    #main-navbar .navbar-sub ul {
        background-color: transparent;
    }
    
     .navbar-sub .dropdown-menu a {
        color: #ffffff;
    }
    .navbar-sub a:hover, .navbar-main a:hover {
        color: #ffffff;
        background-color: rgba(0,0,0,0.1);
    }
}

/*Notification*/
.notification-menu {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
}
.notification-item:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.notification-icon {
    font-size: 20px;
}

.notification-time {
    color: #8e99ad;
}
.read-indicator {
    background-color: var(--color-secondary);
}
.not-read {
    background-color: #f6f9fc;
}

.notification-menu a:hover {
    background-color: #f6f9fc;
}

.notification-menu a:hover .notification-title {
    color: var(--color-secondary);
}
.notification-badge {
    background: var(--color-info);
    background: rgb(0 0 0 / 50%);
}
#notificationcontent img{
    width:60px;
}
#imgLoading {
    margin-right: 40%;
    opacity: 1;
    color: black;
}
/*Dashboard*/
.page-title {
    color: #1773f9;
}
.card {
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
    padding: 1.25rem 1.25rem;
    border-radius: 5px;
    border: none;
}
.card-header, .sub-title {
    font-size: 20px;
    margin-bottom: 1rem;
    font-weight: bold;
    padding: 0;
    background: transparent;
    border: none;
}
    .card-header h2 {
        font-size: 20px;
        font-weight: bold;
        margin:0;
    }
.card .card-body{
    padding:0;
}
@media (min-width: 768px) {
    .card {
            padding: 1.25rem 2rem;
        }
    }
    /*colors*/
    .text-green {
    color: #00d508;
}
.text-lightblue {
    color: #17acf8;
}

/*footer*/
.footer {
    background: #fff;
    border-top: 1px solid #f1f1f1;
}
@media (max-width: 767.5px) {
    .footer .navbar-nav .nav-item {
        text-align: center;
    }
    .footer .nav-item i{
        opacity:0.8 !important;
    }
}

.copyright {
    font-size: 14px;
    color: #434343;
}

.copyright a {
    color: var(--color-primary);
}

/*My profile*/
.profile-image {
    border-radius: 50%;
    /*object-fit: cover;*/
}
/*Procedures*/
.procedures-field {
    border-bottom:1px solid var(--color-primary);
}
.icon-wrapper {
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 6px 3px rgba(68, 102, 242, 0.1);
}
.custom-file-upload input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
}

/*boostrap edit*/
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/*btn check*/
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary {
    color: #fff !important;
    background-color: var(--color-primary-active) !important;
}
/*buttons*/
.btn-link-secondary {
    color: var(--color-secondary) !important;
    text-decoration: none;
}
.btn-link-secondary:hover {
    color: var(--color-secondary-active) !important;
}
.btn-link-danger {
    color: var(--bs-danger) !important;
    text-decoration: none;
    
}
.btn-link-danger:hover {
    color: #ab2330 !important;
}
/*table*/
.table thead th {
    color: var(--color-primary);
}

/*stepper*/
.pill-cust {
    background-color: #EFF0F8;
    border-radius: 5px;
}
.pill-cust .nav-item .nav-link .fa-cust {
  background: white;
  color: #000000;
}
.pill-cust .nav-item .nav-link::after {
    display: inline-block;
    content: "";
    margin: 2rem 1rem 0;
    transform: translateY(-1rem);
    flex-grow: 1;
}
.pill-cust .nav-item .nav-link.active {
  color: white;
  background-color: transparent;
}
.pill-cust .nav-item .nav-link.active::after {
 /* border-top: 0.1rem solid #007bff;*/
  border-top: 0.1rem solid var(--color-primary);
}
.pill-cust .nav-item .nav-link.active .fa-cust {
  /*background: #007bff;*/
  background:var(--color-primary);
  color: #ffffff;
}
.pill-cust .nav-item .nav-link.active .text-capitalize{
    color:var(--color-primary) !important;

}
.pill-cust .nav-item:last-child .nav-link::after {
  display: none;
}

.pill-cust .completed i:before {
    content: "\f00c";
    color:var(--bs-success);
}
.pill-cust .completed .text-capitalize {
    color:var(--bs-success) !important;
}
.pill-cust .completed .nav-link::after {
 /* border-top: 0.1rem solid #007bff;*/
  border-top: 0.1rem solid var(--bs-success) !important;
}
.pill-cust .completed .nav-link.active i:before {
  color:#fff !important;
}

/*favorites*/
.card .user-panel {
    border-bottom: 1px solid rgba(101, 113, 179, 0.07);
}
/*reviews*/

@media (max-width: 767px) {
    .reviews .card {
        box-shadow: none;
    }
}

/**/
.btn-delete-admin,.panel-actions {
    top: 10px;
    right: 10px;
    position: absolute;
    pointer-events: auto;
}
@media (max-width: 320px) {
    .panel-actions {
        position: static;
    }
}
.admin-panel {
    pointer-events: none;
}
.admin-panel:hover {
    background-color: #fbfbfb;
}

/*wallet*/
.wallet-chart .dx-pivotgrid-vertical-headers span, 
.wallet-chart .dx-pivotgrid-horizontal-headers span {
    color: var(--color-primary);
    font-weight: bold;
}
.wallet-chart div.dx-pivotgrid-horizontal-headers {
    border-bottom: 1px solid var(--color-primary) !important;
}
.slogan {
    /*  background: -webkit-linear-gradient(225deg, #006adb, #fc1098);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    color: var(--color-primary);
    font-size: 21px;
    /*margin-top: 0px;
    position: absolute;
    left: 41.5%;*/
    font-style: normal;
    font-family: Calibri;
}
.btn-colorful {
    background-image: linear-gradient(-225deg, #006adb, #fc1098);
    border:none;
}
.btn-colorful:hover {
    background-image: linear-gradient(-225deg,#fc1098,#006adb);
}
.btn-outline-colorful {
    border: 1px solid transparent;
    border-image: linear-gradient(-225deg, #006adb, #fc1098);
    border-image-slice: 1;

}
.btn-outline-colorful:hover {
    background-color: var(--color-primary-light);
}

/*Pagination*/
.pagination {
    --bs-pagination-color: var(--color-primary);
    --bs-pagination-border-color: var(--color-primary);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--color-primary-active);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
}