/* global */
:root {
    --primary-color: #f4f3f3;
    --secondary-color: #450606;
    --screen-size: 480px;
}

body {
    background-color: #f4f3f3 !important;
}

.body-center-fix {
    height: 100vh;
}

.inactive {
    cursor: normal;
}

.body-mobile-shrink {
    width: 90%;
    height: 100%;

    margin: 0 auto;

}

.hidden {
    display: none !important;
}

.custom-container {
    background-color: #dfdfdf;

    border: 2px solid #bfd8d5;
    border-radius: 5px;

    padding: 2.5em;
    margin: 0 auto;
}

/* Error */

.div-result {
    border-radius: 5px;

    margin: 10px auto;
    padding: 20px;

    display: flex;
    justify-content: center;
    align-content: center;
}

.div-result.success {
    background-color: #b6fdb4;
    border: 1px solid #5aa550;
}

.div-result.failure {
    background-color: #ffb4a8;
    border: 1px solid #d37261;
}

/* - login page */
/* - - form */
.login-parent-container {
    background-color: inherit;
    height: 100vh;
}

.login-center-fix {
    padding: 0 1rem;

    display: flex;
    align-items: center;
    flex: 1;
}

.login-container {

    background-color: #dfdfdf;


    border: 1px solid #bfd8d5;
    border-radius: 5px;

    padding: 2.5em;
}

/* - Dashboard */
/* - - Company Info */
.company-info {
    background-color: whitesmoke;

    border-bottom: 1px solid #ccc;

    margin: 2rem 0;
    padding: 3rem;
}

/* - - Years */
.head-container {
    margin: 2rem 0 0 0 ;

    display: flex;
    flex-direction: row;
}

.year-container {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.year-container h5 {
    padding: 0 .6rem;
    position: relative;
    top: 4px;
}

.year-container .btn {
    display: flex;
    align-items: center;
}

.buttons-container {
    position: relative;
    top: 2px;
}

/* - - Calendar  */
.calendar-conatiner {
    background-color: whitesmoke;

    border-bottom: 1px solid #ccc;

    margin: 0 .5rem 2rem .5rem;
    padding: 2rem;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.calendar-month {
    width: 175px;
    height: 150px;

    border: 1px solid #aaa;

    margin-bottom: 2rem;

    display: flex;
    flex-direction: column;
}

.calendar-month-header {
    background-color: #ccc;

    border-bottom: 1px solid #aaa;

    text-align: center;
    padding: .5rem 0 0 0;
}

.calendar-month-body {
    height: 100%;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
}

.calendar-month-body .checkbox {
    width: auto;
    height: 28px;
    margin: .3rem;
}

.calendar-month-body .btn {
    margin: .3rem;
    display: flex;
    align-items: center;
}

.blacklisted {
    background-color: #ccc;
}

.checked {
    border: 2px solid #777;
    border-radius: 2px;
}

.checked .calendar-month-body {
    background-color: #ddd;
}

.show-title {
    margin-top: 2rem;
}

/* - Show */
.show-container {
    margin-top: 2rem;
}

/* - Add */
.add-container {
    margin-top: 2rem;
}

.add-table {
    table-layout: fixed;
    word-wrap:break-word;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

/* - Manage */
.manage-container {
    width: 100;
}

.manage-heading {

    margin: 2rem 0 3rem 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* - - Add Employee */

.add-employee-landing {
    width: 400px;

    margin: 0 auto;

    display: flex;
    justify-content: space-around;

}

.add-employee-upload {
    width: 400px;

    margin: 2% auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.add-employee-upload input {
    margin-top: 10px;
}

@media (max-width: 450px) {
    .manage-heading input {
        width: 150px;
        float: right;

        margin-top: 2px;
    }
}

/* - Admin Dashboard */
.adm-dashboard-container {
    width: 100;
}

.adm-dashboard-heading {

    margin: 2rem 0 3rem 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* - - Add Client */
.add-client-form {
    margin-bottom: 4%;

    display: flex;
    flex-wrap: wrap;
}

.add-client-form div {
    flex: 1 0 46%;
    margin: 5px;
}

/* - - Media Query */
@media (max-width: 450px) {
    .adm-dashboard-heading input {
        width: 120px;
        float: right;

        margin-top: 2px;
    }

    .add-client-form div {
        flex: 1 0 96%;
        margin: 5px;
    }
}

/* - Manage and Admin Dashboard */

.table-custom tr td input {
    width: 100%;
}

.table-header {
    margin: .4rem 0 1rem 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-header input{
    margin: 0 .5rem;
}

.table-header .form-control {
    width: 75px;
}