/* Common Styles */
.content-wrapper {
    background-color: #F5F9FF;
}
.mx-auto {
    margin: 0 auto;
}
.mt-10 {
    margin-top: 10px;
}
.mt-40 {
    margin-top: 40px;
}
.mb-5px {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mr-mb-8px {
    margin-right: 8px;
    margin-bottom: 8px;
}
.pr-2px {
    padding-right: 2px;
}
.pr-6px {
    padding-right: 6px;
}
.p-8 {
    padding: 8px !important;
}
.pt-12 {
    padding-top: 12px;
}
.pb-12 {
    padding-bottom: 12px;
}
.pt-20 {
    padding-top: 20px !important;
}
.pb-20 {
    padding-bottom: 20px !important;
}
.pr-4px {
    padding-right: 4px;
}
.dash-text-primary {
    color: #3b5998 !important;
}
.dash-grey-text {
    color: #607D8B !important;
}
.dash-dark-grey-text {
    color: #3F4656;
}
.dash-text-italic {
    font-style: italic;
}
.dash-text-bold {
    font-weight: 600;
}
.dash-title {
    font-size: 22px;
    font-weight: 600;
    color: #3b5998;
}

label {
    font-weight: 600;
    /* color: #607D8B; */
} 

.dash-uline {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 6px;
}
.dash-uline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 30px;
    background-color: #3b5998;
}

.dashboard-card-shadow {
    box-shadow: 0 0 14px #d8dde5 !important;
}

.dashboard-btn {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.4s;
}
/* .dashboard-btn:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
} */

.dashboard-icon-btn {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 10px;
    box-shadow: 0 0 14px #d8dde5 !important;
    border-radius: 0;
}

.dashboard-grey-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 0;
    transition: 0.4s;
}
.dashboard-grey-btn {
    color: #607D8B;
    border: 1px solid #cddaea;
    background-color: transparent;
}
.dashboard-grey-btn:hover {
    box-shadow: 0 0 14px #d8dde5;
    color: #fff;
    background-color: #2b416f;
}

.dashboard-badge-success {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    color: #24b314;
    background-color: #d8ffd4;
    border-radius: 2px;
}
.dashboard-badge-error {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    color: #ef5350;
    background-color: #ffe1e5;
    border-radius: 2px;
}
.dashboard-badge-warning {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    /* color: #ffa307; */
    color: #da8900;
    background-color: #fff0d6;
    border-radius: 2px;
}

.dashboard-pagination .page-item .page-link {
    background-color: transparent;
    border: none;
    margin-left: 5px;
    margin-right: 5px;
}
.dashboard-pagination .page-item.active .page-link {
    background-color: #3c8dbc;
    color: #fff;
    box-shadow: 1px 1px 4px #333;
}

.dash-table-thead th {
    color: #3F4656;
}

.dash-shadow-on-hover {
    transition: 0.4s;
}
.dash-shadow-on-hover:hover {
    box-shadow: 0 0 14px #aab6c9;
}
.dash-grey-border {
    border: 1px solid #cddaea;
}

@media (max-width: 771px) {
    .timeline > li > .timeline-item {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    .navbar-custom-menu .btn-primary {
        background: #3b5998 !important;
        color: #fff !important;
    }
    .navbar-custom-menu .btn-danger {
        background: #dd4b39 !important;
        color: #fff !important;
    }
}

/* Custom tooltip */
.dash-tooltip {
    position: relative;
}
.dash-tooltip:hover .dash-tooltip-box {
    visibility: visible;
    opacity: 1;
    bottom: 100%;
    z-index: 0;
}
.dash-tooltip .dash-tooltip-icon {
    opacity: 0.8;
}
.dash-tooltip .dash-tooltip-box {
    position: absolute;
    background-color: bisque;
    color: #2c4052;
    bottom: 0%;
    opacity: 0;
    z-index: -1;
    left: 0px;
    /* width: 140px; */
    width: 230px;
    visibility: hidden;
    padding: 5px 4px;
    transition: 0.2s;
}
.dash-tooltip .dash-tooltip-box p {
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}

/* Custom Scrollbar */
.dash-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.dash-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  transition: 0.4s;
}
.dash-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

/* START - Callout Styles */

.custom-callout {
    border-radius: 3px;
    margin: 0 0 10px 0;
    padding: 5px 10px 5px 10px;
    border-left: 5px solid transparent;
}
.custom-callout h4 {
    font-size: 16px;
    font-weight: 600;
}
.custom-callout p {
    font-size: 12px;
}
.custom-callout .callout-action.is-button {
    border: none;
    background: transparent;
    border-bottom: 1px dotted #777;
    padding: 0;
    outline: none;
}
.custom-callout .callout-action {
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px dotted transparent;
    opacity: 0.9;
    transition: 0.2s;
}
.custom-callout .callout-action:hover {
    border-bottom-style: solid;
    opacity: 1;
}

.danger-callout {
    background-color: rgba(230, 101, 86, 0.18);
    border-color: #e66656;
}
.danger-callout h4 {
    color: #e66656;
}
.danger-callout .callout-action {
    color: #c94f40;
    border-color: #c94f40;
}

.success-callout {
    background-color: #d8ffd4;
    border-color: #24b314;
}
.success-callout h4 {
    color: #24b314;
}
.success-callout .callout-action {
    color: #24b314;
    border-color: #24b314;
}

.info-callout {
    background-color: #ffe9c9;
    border-color: #f3aa2f;
}
.info-callout h4 {
    color: #f3aa2f;
}
.info-callout .callout-action {
    color: #f3aa2f;
    border-color: #f3aa2f;
}

.primary-callout {
    background-color: rgba(68, 150, 243, 0.07);
    border-color: #2196F3;
}
.primary-callout h4 {
    color: #2196F3;
}
.primary-callout .callout-action {
    color: #1d89df;
    border-color: #1d89df;
}

/* END - temp - callout styles */

/* START - Custom Checkbox */

/* The container */
.container-checkbox {
    display: block;
    position: relative;
    /* padding-left: 35px; */
    padding-left: 25px;
    margin-bottom: 8px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.container-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    /* border: 1px solid #384562; */
    border: 1px solid #6c6c6c;
    border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
    /* background-color: #3b5998; */
    background-color: #4cb444;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* <label class="container-checkbox">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label> */

/* END - Custom Checkbox  */

/* START - Navbar dropdown */
.notifications-menu {
    position: relative;
}
.notifications-menu .dropdown-menu {
    border-radius: 8px !important;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
}

.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a:hover {
    background: #dcefff;
}

@media (min-width: 991px) {
    .dropdown-arrow::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 20px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #fff;
    }
}

/* END - Navbar dropdown */

/* START - Dashboard Home Page */

/* Business Card */
.dashboard-business-card {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 25px 35px 15px 35px;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    margin-bottom: 20px;
}
.dashboard-business-card .b-card-top {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.dashboard-business-card .b-card-top .b-card-blogo {}
.dashboard-business-card .b-card-top .b-card-bname {
    font-size: 22px;
    font-weight: 600;
}
.dashboard-business-card .b-card-top .b-card-wlink {
    border-bottom: 1px dotted #ddd;
    transition: 0.4s;
}
.dashboard-business-card .b-card-top .b-card-wlink:hover {
    border-bottom: 1px solid #999;
}
.dashboard-business-card .b-card-bottom {
    padding-top: 12px;
}
.dashboard-business-card .b-card-bottom h3 {
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 12px;
}
.dashboard-business-card .b-card-bottom p {}
.dashboard-business-card .b-card-bottom a {
    color: #1d89df;
    border-bottom: 1px dotted #ddd;
    transition: 0.4s;
}
.dashboard-business-card .b-card-bottom a:hover {
    border-bottom: 1px solid #999;
}

/* Dashboard Card Offer */
.dashboard-offer-card {
    position: relative;
    /* background-color: #3b5998; */
    background-color: transparent;
    color: #fff;
    /* padding: 25px 20px; */
    /* border-radius: 4px; */
    /* border: 1px solid #ddd; */
    /* -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17); */
    /* box-shadow: 0 0 17px 0 rgba(23,50,68,.17); */
    margin-bottom: 20px;
}
.dashboard-offer-card span {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
}
.dashboard-offer-card h2 {
    margin-bottom: 20px;
}
.dashboard-offer-card .offer-btn {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #fff;
}

/* premium feature list and set your website list */
.dashboard-list-card {
    background-color: #fff;
    padding: 0;
    border-radius: 4px;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    margin-bottom: 20px;
}
.dashboard-list-card h3 {
    background-color: #f9f9f9;
    padding: 15px 10px 10px 20px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;
}
.dashboard-list-card .dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dashboard-list-card .dashboard-list.setup-list {
    max-height: 400px;
    overflow: auto;
}
.dashboard-list-card .dashboard-list .dash-list-item {
    position: relative;
    display: block;
    padding: 12px 6px 12px 20px;
    border-bottom: 1px solid #ddd;
}
.dashboard-list-card .dashboard-list .dash-list-item.website-setup-list {
    font-size: 16px;
}
.dashboard-list-card .dashboard-list .dash-list-item:hover {
    background-color: #f9f9f9;
}
.dashboard-list-card .dashboard-list .dash-list-item .list-icon {
    margin-right: 8px;
}
.dashboard-list-card .dashboard-list .dash-list-item .right-arrow {
    position: absolute;
    right: 20px;
    opacity: 0.6;
}

/* Stats at glance */
.dashboard-stats-at-glance {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 0px 25px 5px 25px;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    margin-bottom: 20px;
}
.dashboard-stats-at-glance h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 0;
    padding-bottom: 10px;
    /* border-bottom: 1px solid #ddd; */
}
.dashboard-stats-at-glance .sg-col {
    position: relative;
    text-align: center;
    /* margin-top: 10px; */
    margin-bottom: 12px;
    background-color: #F5F9FF;
    padding-top: 6px;
    padding-bottom: 6px;
    /* border-right: 1px solid #ddd; */
}
.dashboard-stats-at-glance .sg-col .add-btn {
    position: absolute;
    top: 4px;
    right: 4px;
}
.dashboard-stats-at-glance .sg-col .sg-col-count {
    font-size: 28px;
    font-weight: 600;
}
.dashboard-stats-at-glance .sg-col h4 {
    font-size: 12px;
    color: #607D8B;
}

/* Website statistics */
.dashboard-stats-card {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 10px 25px 10px 25px;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    margin-bottom: 20px;
}
.dashboard-stats-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.dashboard-stats-card .dashboard-analytics-btns {
    text-align: right;
    margin-bottom: 12px;
}
.dashboard-stats-card .dashboard-analytics-btns .btnDataPoint {
    background-color: #fff;
    border-color: #cddaea;
    color: #607D8B;
    font-size: 10px;
    transition: 0.4s;
}
.dashboard-stats-card .dashboard-analytics-btns .btnDataPoint.active,
.dashboard-stats-card .dashboard-analytics-btns .btnDataPoint:hover {
    background-color: #2b416f;
    color: #fff;
}
.dashboard-stats-card .stats-card-col {
    position: relative;
    text-align: center;
    background-color: #F5F9FF;
    padding: 18px 10px 10px 10px;
    margin-bottom: 15px;
    border: 1px solid #efefef;
}
.dashboard-stats-card .stats-card-col .stat-duration {
    font-size: 10px;
    position: absolute;
    top: 4px;
    right: 4px;
    color: #607D8B;
}
.dashboard-stats-card .stats-card-col .stat-count {
    font-size: 28px;
    font-weight: 600;
}
.dashboard-stats-card .stats-card-col .stat-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    color: #607D8B;
}


/* Sidebar Card */
.dashboard-sidebar-card {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    box-shadow: 0 0 17px 0 rgba(23,50,68,.17);
    margin-bottom: 20px;
}
.dashboard-sidebar-card .dash-sidebar-card-header {
    position: relative;
}
.dashboard-sidebar-card .dash-sidebar-card-header h3 {
    background-color: #f9f9f9;
    padding: 15px 10px 10px 20px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;
}
.dashboard-sidebar-card .dash-sidebar-card-header .help-link {
    position: absolute;
    right: 20px;
}
.dashboard-sidebar-card .dash-sidebar-card-body {
    padding: 15px 10px 25px 20px;
}
.dashboard-sidebar-card .dash-sidebar-card-body .dash-sidebar-card-actions {
    text-align: center;
}
.dashboard-sidebar-card .dash-sidebar-card-body .dash-sidebar-card-actions a {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}


/* Stats Page */

.dash-info-box {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cddaea;
}
.dash-info-box .dash-info-box-icon {
    height: 75px;
    width: 75px;
    line-height: 75px;
    border-radius: 15px;
}
.dash-info-box .dash-info-box-content .dash-info-box-number {
    font-weight: normal;
    font-size: 35px;
}
.dash-info-box .dash-info-box-content .dash-info-box-duration {
    position: absolute;
    right: 25px;
    top: 14px;
    color: #3b5998;
}

.dash-small-box {
    position: relative;
    border-radius: 10px;
    z-index: 1;
}
.dash-small-box .inner {
    padding-left: 22px;
}
.dash-small-box .inner h3 {
    font-weight: normal;
}

.dash-box-widget {
    border: 1px solid #cddaea;
}

/* END - Dashboard Home Page */


/* START - Update List */
@media (max-width: 767px) {
    span.time {
        display: block;
        width: 100%;
    }
}
/* END - Update List */