/* Rule for the Sweet Alert window border */
div.swal2-container.swal2-center.swal2-backdrop-show>div {
    border: 2px solid #333232;
}

/* Rule for the Sweet Alert image */
.swal2-image {
    box-shadow: 10px 10px 16px #212121;
}

/* Rule for the custom orange text with black outline */
.cool-text {
    color: #08b5bb;
    text-shadow: -1px 0 #333232,
        0 1px #333232,
        1px 0 #333232,
        0 -1px #333232;
}

/* Rule for the custom black text with orange outline */
.cool-text-inverse {
    color: #333232;
    text-shadow: -2px 0 antiquewhite,
        0 1px antiquewhite,
        1px 0 antiquewhite,
        0 -1px antiquewhite;
}

/* Rule for landing page background gradient */
.landing-body {
    background-repeat: no-repeat;
    background: #43C6AC;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #191654, #43C6AC);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #191654, #43C6AC);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* Rule for the three column card header */
.cool-header {
    background-color: antiquewhite;
}

/* Rule for the cards border & outline */
.cool-border {
    outline: 2px solid #333232;
    border: 1px solid #08b5bb;
}

/* Help with card body vertical positioning */
.card-body {
    padding-top: .5rem;
    padding-bottom: .25rem;
}

.task-body .navbar-dark {
    border-bottom: 5px solid #08b5bb;

}

/* Text color and weight for eTaskifier-er*/
.navbar-dark .navbar-brand {
    color: #08b5bb;
    font-weight: bold;
}


/* Side nav styling hr */
.side-nav .col-2 {
    height: calc(100vh - 80px);
    /* border-right: 5px solid #08b5bb; */
    max-width: max-content;
}

/* Side nav styling hr */
.side-nav hr {
    margin-top: 0;
}

/* Link color on side nav */
.side-nav .nav-link {
    color: #08b5bb
}

/* Rule to make the link text grow */
.side-nav .nav-item>a:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.2);
    padding-left: 30px;
}

/* Rule to keep the drop down menu background black on hover*/
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: unset;
}


/* HR on Dashboard page */
hr.cool-line {
    margin-top: 20px;
    outline: 2px solid #08b5bb;
    border: 2px solid #333232;
}

.tooltip-inner {
    background-color: #08b5bb;
    border: 2px solid #333232;
    font-weight: bold;
    color: #212121;
}

/* Represents the first four elements. [=-0+4, -1+4, -2+4, -3+4] */
tr.complete>td:nth-child(-n+4) {
    text-decoration: line-through;
}

.modal-header {
    border-bottom: 2px solid #333232;

}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    text-align: center;
    color: antiquewhite;
    padding: 25px 0;
    background: #212121;
    border-top: 5px solid #08b5bb;
}

footer .copyright {
    margin-bottom: .3rem;
}

footer .credits {
    margin-bottom: 0;
}

footer .credits a {
    color: #d6f7fd;
}