/* Global styles */
html,
body {
    background-color: #f4f5f7;
    padding: 0;
    margin: 0;
}

/* buttons*/
.button {
    background: #808080;
    color: #fff;
    font-size: medium;
    font-weight: bold;
}

.button:hover {
    background: #464646;
    color: #fff;
    font-size: medium;
    font-weight: bold;
}

.delete-btn {
    background-color: red;
    color: #fff;
    font-size: large;
    font-weight: bold;
}

.delete-btn:hover {
    background-color: rgb(240, 10, 10);
    color: #fff;
    font-size: large;
    font-weight: bold;
}

.modal-close-btn {
    background-color: #313638;
    color: #fff;
    font-size: large;
    font-weight: bold;
}

.modal-close-btn:hover {
    background-color: #3f4649;
    color: #fff;
    font-size: large;
    font-weight: bold;
}

.apply-btn {
    color: #464646;
    border: 2px solid #464646;
    font-size: medium;
}

.apply-btn:hover {
    background: #464646;
    color: #fff;
    text-decoration: none;
    font-size: medium;
}

/* forms */
.form-header {
    background-color: #afafaf;
}

.form-header-text {
    font-weight: bold;
    text-align: center;
}

textarea {
    width: 100%;
}

.links {
    color: #464646;
    cursor: pointer;
}

.form-group.required .control-label:after {
    content: "*";
    color: red;
}

.form-group.required .col-form-label:after {
    content: "*";
    color: red;
}

.form-group .required .col-form-label:after {
    content: "*";
    color: red;
}

/* icons */
.fa-edit {
    color: #464646;
    cursor: pointer;
}

.fa-trash {
    color: red;
    cursor: pointer;
}

.fa-archive {
    color: red;
    cursor: pointer;
}

.fa-pencil {
    color: #535b5e;
    cursor: pointer;
}

.fa-eye {
    color: #5c100c;
    cursor: pointer;
}

/* cards */
.card-shadow {
    box-shadow: 0px 2px 4px 0px #00000033;

    box-shadow: 0px 1px 10px 0px #313638;

    box-shadow: 0px 4px 5px 0px #00000024;
}

.jobCard:hover {
    box-shadow: 0px 2px 4px 0px #00000033;

    box-shadow: 0px 1px 10px 0px #313638;

    box-shadow: 0px 4px 5px 0px #00000024;
}

#nav {
    height: 100vh;
    background-color: #5c100c;
}

.navbar-link {
    background-color: #5c100c;
    color: white;
    font-weight: bold;
}

.editApplicationForm {
    display: none;
}

.numbers {
    font-size: large;
}

.dashboard-stat-color-1 {
    color: white;
    background-color: #363841;
    background-image: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.1)
    );
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
}

.dashboard-stat-color-2 {
    color: white;
    background-color: #af231b;
    background-image: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.3)
    );
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
}

/* admin dashboard */

.dashboard {
    background-color: #5c100c;
}

#header.header-scrolled,
#header.admin-header {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 3px 1px -2px rgb(0 0 0 / 10%),
        0 1px 5px 0 rgb(0 0 0 / 6%);
}

/* pagination */

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #fff !important;
    background-color: #dd433b !important;
    border: 1px solid #5c100c !important;
}
.page-link:hover {
    z-index: 2;
    color: #fff !important;
    text-decoration: none;
    background-color: #ee2c22 !important;
    border-color: #5c100c;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #ee2c22 !important;
    border-color: #5c100c;
}

/* tables */

table.table-bordered {
    border: 1px solid grey !important;
    margin-top: 20px;
}
table.table-bordered > thead > tr > th {
    border: 1px solid grey !important;
}
table.table-bordered > tbody > tr > td {
    border: 1px solid grey !important;
}

.bootstrap-select .btn {
    border-style: solid;
    border-width: 1px;
    border-color: lightgray;
}