/*================================================================================
	Item Name: Stack - Responsive Admin Theme
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.pulse-primary {
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
	animation: pulse-primary 3s infinite;
}

	.pulse-primary:hover {
		color: rgba(255, 255, 255, 1) !important;
	}

@-webkit-keyframes pulse-primary {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		color: rgba(255, 255, 255, 1);
	}
}

@keyframes pulse-primary {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
		box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		box-shadow: 0px 0px 20px 5px rgba(0, 170, 255, .8);
		color: rgba(255, 255, 255, 1);
	}
}


.pulse-warning {
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
	animation: pulse-warning 2.5s infinite;
}

	.pulse-warning:hover {
		color: rgba(255, 255, 255, 1) !important;
	}

@-webkit-keyframes pulse-warning {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		color: rgba(255, 255, 255, 1);
	}
}

@keyframes pulse-warning {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, 0);
		box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		box-shadow: 0px 0px 20px 5px rgba(255, 170, 0, .8);
		color: rgba(255, 255, 255, 1);
	}
}


.pulse-default {
	color: rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
	animation: pulse-default 3.2s infinite;
}

	.pulse-default:hover {
		color: rgba(0, 0, 0, 1) !important;
	}

@-webkit-keyframes pulse-default {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		color: rgba(0, 0, 0, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		color: rgba(0, 0, 0, 1);
	}
}

@keyframes pulse-default {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		color: rgba(0, 0, 0, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, 0);
		box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		box-shadow: 0px 0px 20px 5px rgba(245, 245, 245, .8);
		color: rgba(0, 0, 0, 1);
	}
}


.pulse-danger {
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
	animation: pulse-danger 2.7s infinite;
}

	.pulse-danger:hover {
		color: rgba(255, 255, 255, 1) !important;
	}

@-webkit-keyframes pulse-danger {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		color: rgba(255, 255, 255, 1);
	}
}

@keyframes pulse-danger {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, 0);
		box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		box-shadow: 0px 0px 20px 5px rgba(255, 63, 58, .8);
		color: rgba(255, 255, 255, 1);
	}
}


.pulse-success {
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
	animation: pulse-success 3.5s infinite;
}

	.pulse-success:hover {
		color: rgba(255, 255, 255, 1) !important;
	}

@-webkit-keyframes pulse-success {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		color: rgba(255, 255, 255, 1);
	}
}

@keyframes pulse-success {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, 0);
		box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		box-shadow: 0px 0px 20px 5px rgba(45, 220, 45, .8);
		color: rgba(255, 255, 255, 1);
	}
}


.pulse-info {
	color: rgba(255, 255, 255, 0.8);
	box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
	animation: pulse-info 3.7s infinite;
}

	.pulse-info:hover {
		color: rgba(255, 255, 255, 1) !important;
	}

@-webkit-keyframes pulse-info {
	0% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, 0);
	}

	100% {
		-webkit-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		color: rgba(255, 255, 255, 1);
	}
}

@keyframes pulse-info {
	0% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		color: rgba(255, 255, 255, 1);
	}

	70% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, 0);
		box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, 0);
	}

	100% {
		-moz-box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		box-shadow: 0px 0px 20px 5px rgba(125, 249, 255, .8);
		color: rgba(255, 255, 255, 1);
	}
}

/************************************************************** _Layout.cshtml *************************************************************************/

html body {
    height: calc(100% - 1px);
}

/* Smooths out any jerky transitions that don't have their own respecified transition time */
.main-menu, .header-navbar {
    transition: all 0.25s;
}


    /* Main Dark Mode Color Changes */
    .main-menu.menu-dark .navigation, .navbar-dark {
        background-color: black;
    }

    .header-navbar.navbar-dark.navbar-border {
        border-bottom-color: #DCDCDC;
    }
/* */

/* Highlights Current Page on Left Nav*/
.active-sidenav-listitem i, .active-sidenav-listitem span, .active-menu-item i {
    color: #695AEB !important;
}
/* */

/* Top Navbar Logo */
#navbar-brand {
    padding: 5px;
}

.nav-brand-logo {
    width: 200px;
}

/* */

.notification-bell {
    position: relative;
    top: 2px;
}

/* Top Nav Company Name */
.navbar-dark .company-name-top, .navbar-dark .company-name-top:hover {
    color: #DCDCDC;
}

.company-name-top, .company-name-top:hover {
    color: #404E67;
}
/* */

/* Left Nav's Company Name & Company Settings Button */
.company-container {
    height: 30px;
}

.company-name {
    margin-bottom: 0;
    font-weight: 400;
    transition: color 0.25s !important;
}

.company-logo {
    height: 30px;
    margin-right: 5px;
    box-shadow: 0 1px 5px rgb(0 0 0 / 46%);
}

.btn-custom {
    color: #FFF !important;
    background: #6A5AEB !important;
    width: 90%;
    overflow: visible !important;
    transition: all .25s;
}

#company-settings:hover {
    background: #ADA4F5 !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}

.menu-dark .dropdown-divider {
    border-top-color: rgba(0, 0, 0, .85);
}
/* */

/* Top-Nav Profile Picture */
.profile-picture {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border-bottom: 0 none;
    box-shadow: 0 1px 5px rgb(0 0 0 / 46%);
    margin-right: 10px;
}

.profile-picture-not-set {
    background-color: #404E67;
    color: white;
    display: inline-block;
}

/* Font-Size was reduced to accompany the largest possible initial configuration (WW) to ensure all combinations fit inside of the circle */
.initials {
    font-size: 10px;
    font-weight: bold;
    line-height: 3;
}

.navbar-dark .profile-picture {
    box-shadow: 0 1px 5px rgb(255 255 255 / 46%);
}
/* */

.custom-icon {
    margin-top: 0 !important;
}

/*.dropdown-menu {
    margin-top: 0.94rem;
}
*/
.top-nav-height {
    height: 56px;
}

#search-input {
    color: #404E67 !important;
}

#search-icon {
    padding: 1.2rem 0.4rem 1rem;
}

/* (Medium View Size) Collapsed Navbar Styling & Animations */

body.vertical-layout.vertical-menu.menu-collapsed .main-menu .main-menu-content a.menu-title {
    background-color: #695AEB;
    border-color: #695AEB;
}

.menu-collapsed .navbar #navbar-brand {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-300px);
    transition: all 0.5s;
}

.changing-menu.menu-expanded .navbar #navbar-brand {
    visibility: visible;
    opacity: 1;
    transform: translate(0px);
    transition: all 0.5s;
}

.menu-collapsed .navbar #navbar-brand-2 {
    visibility: visible;
    opacity: 1;
    transition: all 0.5s;
}

.changing-menu.menu-expanded .navbar #navbar-brand-2 {
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}

.menu-expanded .navbar #navbar-brand-2 {
    visibility: hidden;
    opacity: 0;
}

@media only screen and (min-width: 767.98px) {
    #ipad-dripjobs-logo {
        display: flex !important;
    }

    .selected-count {
        display: none;
    }
}

.menu-collapsed .main-menu .navigation > li > .company-container {
    height: 0px;
    margin: 0 !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.5s;
    /*display: none !important;*/
}

.changing-menu.menu-expanded .main-menu .navigation > li > .company-container {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.5s;
    /*display: none !important;*/
}

.menu-collapsed .main-menu .navigation > li > #company-settings {
    width: 85%;
    padding: 5px;
}
/* */
/* Footer */
.footer {
    position: static;
    bottom: 0;
    /* calc() width accounts for the left navbar */
    width: calc(100% - 240px);
    transition: all 0.25s;
    z-index: 10;
}

.menu-collapsed .footer {
    width: calc(100% - 60px);
    transition: all 0.25s;
}

.footer-icon {
    font-size: 24px;
}

.footer-icon-text {
    width: 65px;
    font-size: 0.75rem;
}
/* */
/* (Mobile View Size) Top Nav Styling */
@media only screen and (min-width: 767.98px) {
    .notification-count {
        left: -18px !important;
    }
}

@media only screen and (max-width: 767.98px) {
    #search-icon, #calendar-icon {
        padding: 1rem;
    }

    .top-nav-height {
        height: 50px;
    }

    .footer {
        width: 100%;
        transition: all 0.25s;
        position: sticky;
    }

    .mt-xs-1 {
        margin-top: 0.5rem !important;
    }

    /* Data table mobile view CSS */
    .dt-mobile-view {
        width: 100vw !important;
    }
    /* */

    html body .content {
        min-height: calc(100% - 80px);
    }
}

@media only screen and (max-width: 850px) {
    .changing-menu.menu-collapsed #setup-online-payments, .menu-expanded #setup-online-payments {
        display: none;
    }
}

@media only screen and (max-width: 400px) {
    .company-name-top-container {
        display: none;
    }

    .footer-icon {
        font-size: 20px;
    }

}

@media only screen and (max-width: 340px) {
    .brand-logo {
        position: relative;
        top: 6px;
        width: 150px;
    }
}
/* */

/* app-assets/css/colors.css has collisions with app-assets/css/bootstrap.css when it comes to alerts. This fixes that */

.alert-secondary.alert-secondary {
    color: #383d41 !important;
    background-color: #e2e3e5 !important;
    border-color: #d6d8db !important;
}

.alert-success.alert-success {
    color: #0B6E50 !important;
    background-color: #D0F6EB !important;
    border-color: #BEF3E3 !important;
}

.alert-danger.alert-danger {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

.alert-warning.alert-warning {
    color: #856404 !important;
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
}

.alert-info.alert-info {
    color: #176B76 !important;
    background-color: #D5F5F9 !important;
    border-color: #C4F1F7 !important;
}

.alert-light.alert-light {
    color: #818182 !important;
    background-color: #fefefe !important;
    border-color: #fdfdfe !important;
}

.alert-dark.alert-dark {
    color: #1b1e21 !important;
    background-color: #d6d8d9 !important;
    border-color: #c6c8ca !important;
}


/* */

.dataTables_empty {
    width: 100vw !important;
}

.dataTables_length, .dataTables_filter {
    margin: 7px
}

.dataTables_paginate {
    margin-right: 7px;
}

table.dataTable {
    border-collapse: collapse !important;
}

.nav-tabs {
    margin-bottom: 1.5rem !important;
}

.nav-underline.no-hover-bg.nav-justified, .nav.nav-tabs.nav-underline .nav-item a.nav-link {
    color: #695AEB !important;
    border-bottom-color: #695AEB;
}
    .nav.nav-tabs.nav-underline .nav-item a.nav-link:before {
        background: #695AEB;
    }

body, .content-wrapper {
    background-color: #FFF !important;
}

/*@media only screen and (min-width: 767.98px) and (max-width: 991.98px) {
 
}
*/

.ti-more {
    font-size: 24px;
}

/* bootstrap.css doesn't have enough priority to make collapsing class styling go through, this is to boost it*/
/*.collapsing {
    height: 0 !important;
    overflow: hidden !important;
}*/

.ti-more-toggle:hover {
    background-color: #9991e6 !important;
}

.ti-more-toggle:active, ti-more-toggle:focus {
    background-color: #695AEB !important
}

.select2-container--default .select2-selection--single, .select2-dropdown, input[type='color'], input[type='file'], [class*='bs-callout'].callout-bordered, .input-group-text {
    border: 1px solid #CCD6E6;
}

[class*='bs-callout'].callout-bordered {
    border-radius: 0.25rem;
}

@media only screen and (min-width: 768px) {
    /* Notifications window width/height */
    .header-navbar .navbar-container .dropdown-menu-media.notification-menu {
        width: 40rem;
    }

    .header-navbar .navbar-container ul.nav li #notification-container.media-list {
        max-height: 44rem;
    }
}


@media only screen and (max-width: 767.98px) {
    .header-navbar .navbar-container ul.nav li #notification-container.media-list {
        max-height: 60vh;
    }

    .header-navbar .navbar-container .dropdown-menu-media.notification-menu {
        max-height: calc(60vh + 86px);
        overflow-y: auto;
    }

    /* NOTE: This is to preserve styling on smaller viewports in modals, double check to ensure it fixes more than it breaks */
    .modal-body .table th, .modal-body .table td {
        padding: 0.5rem !important;
    }

    #navbar-mobile .search-input.open .input {
        color: #404E67;
    }
}

.popover-header, .popover-body {
    text-align: center;
}

#setup-online-payments:hover #setup-online-payments-icon {
    color: #FFF !important;
}

[v-cloak] {
    display: none;
}

body::-webkit-scrollbar, .scroll-style::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body::-webkit-scrollbar-track, .scroll-style::-webkit-scrollbar-track {
    background: #EEE;
}

body::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb, .scroll-style::-webkit-scrollbar-thumb {
    background-color: #CCC;
    border-radius: 20px;
    border: 3px solid #EEE;
}

.badge-scheduled {
    background-color: #D1E9FF;
    color: #114EB1;
    font-weight: bold;
}

.badge-signed {
    color: #0D6D34;
    background-color: #CBEDD7;
    font-weight: bold;
    margin-left: 5px;
    font-size: 1em;
}


.badge-completed {
    color: #0D6D34;
    background-color: #CBEDD7;
    font-weight: bold;
}

.badge-pending {
    color: #422C13;
    background-color: #FDE9C5;
    font-weight: bold;
}

.badge-rejected {
    color: #B32E3B;
    background-color: #FEE4E4;
    font-weight: bold;
}

.proposal-badge {
    color: #555555 !important;
    background-color: #f3f3f3 !important;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #f3f3f3;
}
    .proposal-badge:hover {
        color: #333333 !important;
        background-color: #f6f6f6 !important;
        border: 1px solid #c8c8c8;
    }
.proposal-badge .feather {
    font-weight: 400 !important;

}
.selected-count {
    font-size: .6em;
}

.circle {
    display: inline-block;
    background-color: #F5F7FA;
    border-radius: 50%;
}

.circle-inner {
    color: #5444E5;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    height: 20px;
    width: 20px;
    font-size: 10px;
    font-weight: bold;
}

.main-menu .navigation > li > a > i {
    margin-right: 12px;
}

.nav-item svg.icon {
    height: 20px;
    fill: #404E67;
}

/* CSS with Class Names Based on Background Colors */
.bgFFA07A {
    background-color: #FFA07A;
    color: #D45D3A !important;
}

.bgE0BBE4 {
    background-color: #E0BBE4;
    color: #A167A5 !important;
}

.bgB0E0E6 {
    background-color: #B0E0E6;
    color: #5E9CA6 !important;
}

.bgFFB6C1 {
    background-color: #FFB6C1;
    color: #D46F81 !important;
}

.bgFFCCCB {
    background-color: #FFCCCB;
    color: #D47F7E !important;
}

.bgFDFD96 {
    background-color: #FDFD96;
    color: #B8B84F !important;
}

.bgAEC6CF {
    background-color: #AEC6CF;
    color: #5C848F !important;
}

.bg98FF98 {
    background-color: #98FF98;
    color: #3DBD3D !important;
}

.bgE6E6FA {
    background-color: #E6E6FA;
    color: #9191C7 !important;
}

.bgFFDFD3 {
    background-color: #FFDFD3;
    color: #D49B86 !important;
}

.bgCBAACB {
    background-color: #CBAACB;
    color: #8F628F !important;
}

.bgFFDAB9 {
    background-color: #FFDAB9;
    color: #D49B6C !important;
}

.bg77DD77 {
    background-color: #77DD77;
    color: #339933 !important;
}

.bgB39EB5 {
    background-color: #B39EB5;
    color: #765A78 !important;
}

.bgFFB347 {
    background-color: #FFB347;
    color: #D47600 !important;
}

.bgACE5EE {
    background-color: #ACE5EE;
    color: #5AA3AE !important;
}

.bgFFF5BA {
    background-color: #FFF5BA;
    color: #BFB56D !important;
}

.bgFF9AA2 {
    background-color: #FF9AA2;
}

.bgD3D3E9 {
    background-color: #D3D3E9;
}

.bgC3CDE6 {
    background-color: #C3CDE6;
}

.bgF1E0C5 {
    background-color: #F1E0C5;
}

.bgFFDAC1 {
    background-color: #FFDAC1;
    color: #D49B74 !important;
}

.bgFFE4E1 {
    background-color: #FFE4E1;
}

.bgB2DFEE {
    background-color: #B2DFEE;
}

.bgD4A5A5 {
    background-color: #D4A5A5;
}

.bgFF6961 {
    background-color: #FF6961;
}

.bgF3B0C3 {
    background-color: #F3B0C3;
}

.bgFFD1DC {
    background-color: #FFD1DC;
}

.bgDefault {
    background-color: #f3f3f3 !important;
}

.dj-badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #000000 !important;
}