html {
    scroll-behavior: smooth;
}

#main-content {
    background: #f1f1f1;
}

#main-content.dark {
    background: #2b2b2b;
}

/* for select2 in modals */
#modal {
    overflow: visible;
}

#modal-file-picker .modal-content {
    padding: 0;
}

.card {
    padding-bottom: 50px;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: transparent;
}

td, th {
    border-radius: 0;
}

table:not(.datepicker-table) th {
    border-bottom: 1px solid black;
}

/* sweet alert (swal) input modals */
.swal-text {
    text-align: center;
}

.swal-button--delete {
    background: #e97474;
}

.swal-button--delete:active {
    background: #e97474;
    color: white;
}

.swal-button--delete:focus {
    background: #e97474;
}

.swal-button--confirm {
    background: #0288d1;
}

.swal-button--confirm:active {
    background: #0288d1;
    color: white;
}

.swal-button--confirm:focus {
    background: #0288d1;
    color: white;
}

.swal-button--cancel:focus, .swal-button--cancel:active {
    color: #555;
    background-color: #bbbbbb;
}

.swal-overlay {
    overflow-y: auto;
}

/* sidebar */
.brand-sidebar .brand-logo {
    padding: 18px 12px;
    margin: 0;
}

.brand-sidebar .logo-wrapper a.brand-logo img {
    height: 35px;
    position: relative;
    top: 4px;
}

.brand-sidebar span.logo-text {
    display: block;
    margin-top: -12px;
    margin-left: 40px;
}

.brand-sidebar .logo-wrapper a.navbar-toggler i {
    line-height: 45px;
}

.task-type-status {
    padding: 0 15px;
    border-radius: 50px;
}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid #00000040;
}

.progress {
    display: inline-block;
    width: 75%;
    margin: 0.1rem 0;
}

.progress-text {
    font-size: 0.6rem;
    margin-right: 10px;
}

.suffix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    transition: color 0.2s;
    top: 0.5rem;
    right: 20px;
    text-align: right;
}

.material-icons.inset {
    font-size: 1.5rem;
    top: 0.75rem;
}

.material-icons.actionable {
    cursor: pointer;
    z-index: 2;
}

/* loader button */
.spinner {
    display: inline-block;
    opacity: 0;
    width: 0;
    -webkit-transition: opacity 0.25s, width 0.25s;
    -moz-transition: opacity 0.25s, width 0.25s;
    -o-transition: opacity 0.25s, width 0.25s;
    transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {
    cursor: progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    width: auto;
}

.has-spinner.btn.active .spinner {
    min-width: 20px;
}

/* loader overlay */
#loading-overlay {
    position: absolute;
    background: white;
    z-index: 100;
    /* filter: brightness(0.5); */
}

#load-message {
    position: absolute;
    color: black
}

/* Task Add/ Edit date select helper buttons */
.help-date {
    border: 1px solid #cecece;
    border-radius: 20px;
    font-size: .8rem;
    height: 30px;
    line-height: 28px;
    color: #343434;
    transition: .3s all ease-in;
}

.help-date:hover {
    border-color: #999;
    color: #000;
}

.help-date.selected {
    background-color: #0288D1;
    color: white;
    border-color: #246a90;
}

.save-approval {
    border: 1px solid #cecece;
    border-radius: 20px;
    font-size: .8rem;
    height: 30px;
    line-height: 28px;
    color: #343434;
    transition: .3s all ease-in;
}

.save-approval:hover {
    background-color: #0288D1;
    color: white;
    border-color: #246a90;
}

.type-button {
    border: 1px solid #cecece;
    border-radius: 20px;
    color: #343434;
}

.type-button.selected {
    color: white;
    background-color: #0288D1;
    border-color: #246a90;
}

/* Scrollbars */
.tabs::-webkit-scrollbar {
    height: 10px;
    background: #ddd;
}

.tabs::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

.tabs::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 0px;
    /*border-radius:2px;*/
}

.dashboard-card::-webkit-scrollbar {
    background: transparent;
    width: 10px;
}

.dashboard-card::-webkit-scrollbar-thumb {
    background: #999;
}

.dashboard-card::-webkit-scrollbar-thumb:hover {
    background: #777;
}

*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: rgba(224, 224, 224, 0.3);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgb(116, 116, 116);
}

*::-webkit-scrollbar-thumb {
    background-color: #adadad;
    /*border-radius: 2px;*/
}

@media only screen and (max-width: 992px) {
    .brand-sidebar .brand-logo {
        left: 0;
    }
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block;
}

.page-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 18px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    min-width: 100vw;
    box-sizing: border-box;
    z-index: 999;
}

.page-loader {
    height: 50px;
    transform-origin: bottom center;
    animation: rotate 3s linear infinite;
}

.page-loader-circle {
    display: inline-block;
    background-color: #20A5E4;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transform: scale(0);
    animation: grow 1.5s linear infinite;
    margin: -10px;
    opacity: 1;
}

.page-loader-circle:nth-child(2) {
    background-color: #016797;
    animation-delay: 0.75s;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes grow {
    50% {
        transform: scale(1);
    }
}

/*----------------------------------------
    Forgot Password Page
------------------------------------------*/

.forgot-bg {
    background-image: url('../images/hero.jpg');
    background-repeat: no-repeatcenter center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#forgot-password {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#forgot-password .card-panel.border-radius-6.forgot-card {
    margin-left: 0 !important;
}

/*----------------------------------------
    Login Page
------------------------------------------*/
.login-bg {
    background-image: url('../images/hero.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.login-bg::after {
    content: '';
    filter: brightness(0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.4);
    z-index: -1;
}

#login-page {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    height: 100vh;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#login-page .card-panel.border-radius-6.login-card {
    margin-left: 0 !important;
}

/*----------------------------------------
        Data Tables
------------------------------------------*/
#main .section-data-tables table {
    width: 100%;
}

#main .section-data-tables .dataTables_wrapper table th {
    min-width: 69px;
    color: #616161;
}

#main .section-data-tables .dataTables_wrapper table th.background-image-none {
    background-image: none !important;
}

#main .section-data-tables .dataTables_wrapper table th.select-all {
    background-image: none !important;
}

#main .section-data-tables .dataTables_wrapper table th,
#main .section-data-tables .dataTables_wrapper table td {
    font-weight: 300;
    padding: 17px 14px;
    white-space: nowrap;
    border-bottom: 1px solid #cfd8dc;
}

#main .section-data-tables .dataTables_wrapper table {
    overflow: auto;
    max-width: 100%;
    height: 300px;
}

#main .section-data-tables .dataTables_wrapper table th,
#main .section-data-tables .dataTables_wrapper table td {
    padding: 8px 14px;
    white-space: nowrap;
    border: none !important;
}

#main .section-data-tables .dataTables_wrapper table tr td:before,
#main .section-data-tables .dataTables_wrapper table tr th:before {
    font-size: .9rem;
    line-height: 14px;
    top: 10px;
    left: -3px;
    width: 12px;
    height: 12px;
    text-indent: 0;
}

#main .section-data-tables .dataTables_wrapper table th,
#main .section-data-tables .dataTables_wrapper table td {
    font-weight: 300;
    white-space: nowrap;
    border-top: 1px solid #cfd8dc;
}

#main .section-data-tables .dataTables_wrapper table tr,
#main .section-data-tables .dataTables_wrapper table tr {
    height: auto;
}

#main .section-data-tables .dataTables_wrapper table tr .odd,
#main .section-data-tables .dataTables_wrapper table tr .odd {
    background-color: #f4f5f7;
}

#main .section-data-tables .dataTables_wrapper table tr .odd > .sorting_1,
#main .section-data-tables .dataTables_wrapper table tr .odd > .sorting_1 {
    background-color: transparent;
}

#main .section-data-tables .dataTables_wrapper table tr .odd.selected,
#main .section-data-tables .dataTables_wrapper table tr .odd.selected {
    background-color: #acbad4 !important;
}

#main .section-data-tables .dataTables_wrapper table tr .odd.selected th,
#main .section-data-tables .dataTables_wrapper table tr .odd.selected th {
    border-radius: 0;
}

#main .section-data-tables .dataTables_wrapper table tr.hover > .sorting_1,
#main .section-data-tables .dataTables_wrapper table tr:hover > .sorting_1,
#main .section-data-tables .dataTables_wrapper table tr.hover > .sorting_1,
#main .section-data-tables .dataTables_wrapper table tr:hover > .sorting_1 {
    background-color: transparent;
}

#main .section-data-tables .dataTables_wrapper table [type='checkbox'] + span:not(.lever):before,
#main .section-data-tables .dataTables_wrapper table [type='checkbox']:not(.filled-in) + span:not(.lever):after {
    opacity: .5;
    border-radius: 4px !important;
}

#main .section-data-tables .dataTables_wrapper .dataTables_length#page-length-option_length,
#main .section-data-tables .dataTables_wrapper .dataTables_filter#page-length-option_filter {
    display: block;
}

#main .section-data-tables .dataTables_wrapper .dataTables_length#page-length-option_length label select,
#main .section-data-tables .dataTables_wrapper .dataTables_filter#page-length-option_filter label select {
    display: inline-block;
    width: auto;
    height: auto;
}

#main .section-data-tables .dataTables_wrapper .dataTables_length#page-length-option_length label input,
#main .section-data-tables .dataTables_wrapper .dataTables_filter#page-length-option_filter label input {
    width: auto;
    height: auto;
}

#main .section-data-tables .dataTables_wrapper .dataTables_length,
#main .section-data-tables .dataTables_wrapper .dataTables_filter {
    display: none;
}

#main .section-data-tables .dataTables_wrapper .dataTables_info {
    margin-left: 18px;
    color: #616161;
}

#main .section-data-tables .dataTables_wrapper .dataTables_paginate,
#main .section-data-tables .dataTables_wrapper #page-length-option_paginate {
    margin-right: .35rem;
    margin-bottom: .75rem;
}

#main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button,
#main .section-data-tables .dataTables_wrapper #page-length-option_paginate .paginate_button {
    margin-top: .25rem;
    padding: .25em .65em;
}

#main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button.current,
#main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
#main .section-data-tables .dataTables_wrapper #page-length-option_paginate .paginate_button.current,
#main .section-data-tables .dataTables_wrapper #page-length-option_paginate .paginate_button.current:hover {
    color: #fff !important;
    border: 1px solid #2196f3;
    border-radius: 6px;
    background: #2196f3;
    -webkit-box-shadow: 0 0 8px 0 #2196f3;
    box-shadow: 0 0 8px 0 #2196f3;
}

#main .section-data-tables .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
#main .section-data-tables .dataTables_wrapper #page-length-option_paginate .paginate_button:hover {
    color: #fff !important;
    border: 1px solid #2196f3;
    border-radius: 6px;
    background: #2196f3;
    -webkit-box-shadow: 0 0 8px 0 #2196f3;
    box-shadow: 0 0 8px 0 #2196f3;
}

/*----------------------------------------
    Profile Page
------------------------------------------*/
#user-profile .user-section-negative-margin {
    position: relative;
    margin-top: -115px;
}

#user-profile .card-border {
    border-radius: 10px;
}

#user-profile .photo-border {
    border-radius: 6px;
}

#user-profile .vertical-align-bottom {
    vertical-align: bottom;
}

#user-profile .vertical-align-middle {
    vertical-align: middle;
}

#user-profile .user-card-negative-margin {
    margin-top: -13px;
}

#user-profile .star-width {
    font-size: 20px;
    width: 18px;
    cursor: pointer;
}

#user-profile .material-icons.vertical-align-middle {
    vertical-align: middle;
}

#user-profile .latest-update {
    cursor: pointer;
}

#user-profile .user-projects img.responsive-img {
    cursor: pointer;
}

#user-profile #feed .social-icon .material-icons {
    cursor: pointer;
}

#user-profile hr {
    opacity: .4;
}

@media only screen and (max-device-width: 1024px) {
    .user-profile {
        margin-top: 1rem;
    }
}

/*Notification Dropdown*/
#notifications-dropdown {
    position: fixed;
    border-radius: 5px;
}

#notifications-dropdown li:first-child {
    background: #3D8EAD;
}

#notifications-dropdown h6 {
    color: white;
    font-size: 1.3rem;
}

#notifications-dropdown li {
    font-size: 1rem;
    padding: 8px 16px;
}

#notifications-dropdown li:not(:first-child):hover {
    background: #d2d2d2;
}
#notifications-dropdown a:hover {
    background: #d2d2d2;
}

#notifications-dropdown li.divider {
    padding: 0;
    height: 1px;
    min-height: 0;
}

#notifications-dropdown a {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.7;
    padding: 2px;
    position: relative;
}

#notifications-dropdown li > time {
    font-size: .8rem;
    font-weight: 400;
    margin-left: 38px;
}

#notifications-dropdown .badge {
    font-size: 0.75rem;
    position: relative;
    top: 4px;
    display: inline-block;
    margin: 0 10px 0 auto;
}

#notifications-dropdown .item {
    display: flex;
}

#notifications-dropdown .collapsible-body {
    padding: 1rem;
}

.icon-bg-circle {
    font-size: 0.75rem;
    position: relative;
    /*top: 2px;*/
    display: inline-block;
    margin-right: 10px;
    max-height: 28px;
}

#slide-out-right.sidenav #messages .header-search-input:focus {
    border-bottom: 0;
    box-shadow: none;
}

#slide-out-chat .chat-footer {
    margin: 0;
}

#notifications-dropdown small {
    border-radius: 50%;
    padding: 0 6px;
    position: relative;
    top: 5px;
}

span.badge {
    min-width: 2rem;
}

/*tabs*/

.tabs {
    height: 60px;
    border-radius: 5px;
}

.tabs .tab a {
    padding: 8px 24px;
    color: #989898;
    transition: all .5s;
}

.tabs .tab a:hover {
    color: black;
}

.tabs .tab a.active {
    padding: 8px 24px;
    color: black;
}

.tabs .indicator {
    background-color: #03a9f4;
    bottom: 5px;
    margin: 0 5px;
}

/*Lock Page*/
/*----------------------------------------
    Login Page
------------------------------------------*/
.forgot-bg
{
    background-image: url('../images/hero.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

#lock-screen
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    height: 100vh;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#lock-screen .card-panel.border-radius-6.forgot-card
{
    margin-left: 0 !important;
}

.search-container {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    float: right;
    text-align: left;
    color: #333;
}

.search-container input[type=search]:not(.browser-default) {
    border-bottom-color: white;
}

.search-container input[type=search]:not(.browser-default):focus:not([readonly]) {
    box-shadow: none;
    border-bottom-color: white;
}

.search-container input[type=search]:not(.browser-default) {
    border-bottom-color: #aaa;
}

.search-container input[type=search]:not(.browser-default):focus:not([readonly]) {
    box-shadow: none;
    border-bottom-color: #aaa;
}

.table-container {
    overflow: auto;
    clear: both;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding-left: 10px;
    box-sizing: border-box;
}

@media screen and (min-width: 620px) {
    .search-container {
        width: 40%;
        margin: 0 10px;
    }
}

@media screen and (min-width: 1000px) {
    .search-container {
        width: 30%;
        margin: 0 10px;
    }
}

[type=radio]:checked+span, [type=radio]:not(:checked)+span {
    margin: 0 10px;
    padding-left: 30px;
}

/*filepond*/

/* use a hand cursor intead of arrow for the action buttons */
.filepond--file-action-button {
    cursor: pointer;
}

/* the text color of the drop label*/
.filepond--drop-label {
    color: #555;
}

/* underline color for "Browse" button */
.filepond--label-action {
    text-decoration-color: #aaa;
}

/* the background color of the filepond drop area */
.filepond--panel-root {
    background-color: #eee;
}

/* the border radius of the drop area */
.filepond--panel-root {
    border-radius: 0.5em;
}

/* the border radius of the file item */
.filepond--item-panel {
    border-radius: 0.5em;
}

/* the background color of the file and file panel (used when dropping an image) */
.filepond--item-panel {
    background-color: #555;
}

/* the background color of the drop circle */
.filepond--drip-blob {
    background-color: #999;
}

/* the background color of the black action buttons */
.filepond--file-action-button {
    background-color: rgba(0, 0, 0, 0.5);
}

/* the icon color of the black action buttons */
.filepond--file-action-button {
    color: white;
}

/* the color of the focus ring */
.filepond--file-action-button:hover,
.filepond--file-action-button:focus {
    box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
}

/* the text color of the file status and info labels */
.filepond--file {
    color: white;
}

/* error state color */
[data-filepond-item-state*='error'] .filepond--item-panel,
[data-filepond-item-state*='invalid'] .filepond--item-panel {
    background-color: red;
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: green;
}

/* bordered drop area */
.filepond--panel-root {
    background-color: transparent;
    /*border: 2px solid #2c3340;*/
}