body {
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: open-sans;
    color: #404041;
}

form {
    text-align: left;
}

label {
    font-family: os-semibold;
    color: #404041;
}

textarea {
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
}

input {
    font-family: Arial, Helvetica, sans-serif;;
}

input, select, textarea {
    padding: 1vh 1vw;
    border-radius: 5px;
/*    -webkit-appearance: none;*/
}

input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], textarea, select {
    border: solid 1px #404041;
    color: #404041;
}

input:active, input:focus, button:active, button:focus, select:active, select:focus, a:active, a:focus, textarea:active, textarea:focus {
    outline: none!important;
}

input:active, input:focus, select:active, select:focus {
    border: solid 1px #cc2229;
}

select:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
}

select:disabled::-ms-expand {
    display: none;
}

a {
    text-decoration: none;
    font-family: os-light;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.btn {
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: os-light!important;
}

.btn:disabled {
    background: #a6a6a6;
}

.btn:disabled:hover {
    background: #a6a6a6;
}

.btn-new {
    background: #9ACD32;
}

.btn-new:hover {
    background: #7F9E1F;
}

.btn-neutral {
    background: #6871FB;
}

.btn-neutral:hover {
    background: #525bc9;
}

.btn-submit {
    background: #7ecc22;
}

.btn-submit:hover {
    background: #5d991a;
}

.btn-delete {
    background: #cc2229;
}

.btn-delete:hover {
    background: #ae1e22;
}

.btn-task-pending {
    background: #cc7022;
}

.btn-task-pending:hover {
    background: #ae611e;
}

.btn-task-all {
    background: #22CCC5;
}

.btn-task-all:hover {
    background: #16837f;
}

.btn-exit {
    background: none;
    border: none;
    font-family: open-sans;
    color: #a4a4a8;
}

.btn-exit:hover {
    color: #404041;
}

.btn-clear {
    font-family: open-sans;
    color: #7022cc;
}

.btn-clear:hover {
    color: #a266e5;
}

.btn-export {
    background: #a4a4a8;
}

.btn-export:hover {
    background: #404041;
}

.btn-table svg {
    fill: #fff;
    width: 15px;
    height: 15px;
}

.search-input {
    border: none!important;
    width: 30vw;
}

.wrapper {
    padding-top: 5vh;
    padding-bottom: 5vh;
    background: #e77723;
    height: 100vh;
    overflow-x: hidden;
}

.login-container {
    background: #fff;
    padding: 5vh 5vw;
    margin: auto;
    border-radius: 10px;
    height: 80vh;
    box-shadow: 5px 5px 20px #4d4d4d;
    text-align: center;
}

.login-container img {
    margin-top: 10vh;
}

.login-container input {
    width: 100%;
}

#welcome-heading {
    font-family: lato-bold;
    color: #404041;
}

#user-bar-container {
    height: 8vh;
    border-bottom: solid black 1px;
}

#user-bar-right {
    text-align: right;
}

#main-content-container {
    background: #ecf8f8;
    padding-left: 2vw;
    padding-right: 2vw;
    height: 92vh;
}

#actions-container {
    margin-bottom: 2vh;
    position: sticky;
    top: 0;
    background: #ecf8f8;
    padding-top: 5vh;
    padding-bottom: 3vh;
    z-index: 2;
}

#error-message {
    color: #cc2229;
    font-family: open-sans;
    padding-left: 1vw;
}

#page-title-container {
    background: #fff;
    padding: 1vh 1vw;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#page-title, #page-title-s {
    margin-block-start: 0;
    margin-block-end: 0;
    font-family: open-sans;
}

.table-container {
    background: #fff;
}

.table-header th {
    background: #C5E7FF;
    padding: 1vh 1vw;
    color: #404041;
    text-align: left;
}

.table-body {
    cursor: pointer;
    border-bottom: solid 1px #b3b3b3;
}

.table-body:hover {
    background: #fcfbe9;
}

.table-body td {
    padding: 1vh 0.5vw;
}

.empty-records {
    text-align: center;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.form-container {
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.form-heading-container {
    margin-top: 2vh;
    padding: 0.1vh 2vw;
    background: #fff;
    border-bottom: solid 2px #cc2229; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.form-body {
    background: #fff;
    padding: 3vh 2vw;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.form-body > div > div {
    margin-right: 2vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.form-body input[type=text], .form-body input[type=password], .form-body input[type=email], .form-body input[type=number], .form-body input[type=date], .form-body select, .form-body textarea {
    width: 100%;
}

.form-table td {
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.other-input-container {
    display: none;
    width: 100%;
}

.concurrent-input div {
    margin-right: 1vw;
    width: 25%;
}

.form-footer {
    margin-top: 2vh;
}

.form-footer .btn-submit {
    width: 100%;
}

.blocks-container {
    padding-top: 2vh;
}

.details-container {
    background: #fff;
    margin: 1vh 1vw;
}

.details-heading {
    text-transform: capitalize;
    font-family: os-bold;
    padding: 1.5vh 1vw;
    border-bottom: solid 2px #BA3E84;
    background-color: #C5E7FF;
    display: flex;
    justify-content: space-between;
}

.details-body {
    font-family: open-sans;
    padding: 2vh 1vw;
}

.details-table {
    text-align: left;
    vertical-align: top;
}

.details-table th {
    padding: 3vh 0.2vw;
    vertical-align: top;
	
}

.details-table td {
    padding: 2vh 0.2vw;
    vertical-align: top;
}

#edit-save, #edit-cancel {
    display: none;
}

input[type=text].edit-input, input[type=email].edit-input, textarea.edit-input, select.edit-input {
    width: 100%;
}

input[type=number].edit-input {
    width: 90%;
}

.edit-input:disabled, .edit-input-disabled:disabled {
    background: none;
    border: none!important;
}

.edit-input-hidden-number {
    display: none;
}

.project-update-status, #project-cancel-status {
    display: none;
}

.upload-container {
    padding-top: 5vh;
}

.upload-container form {
    text-align: center;
}

.upload-container p {
    margin-bottom: 5vh;
}

#project-contact-container {
    display: none;
}

.assignee-table td {
    width: 25%;
}

.settings-nav-container {
    padding-top: 4vh;
    padding-left: 1vw;
    padding-right: 1vw;
}

.settings-nav-container button {
    margin: 0 1vw;
}

.settings-table {
    text-align: left;
}

.settings-table th, .settings-table td {
    padding: 2vh 1vw;
}

.settings-table tr:hover {
    background: #fcfbe9;
}

.settings-table th {
    background: #D9D9D9;
    color: #404041;
}

.subsectors-container {
    display: none;
}

.required-asterisk {
    color: #cc2229;
}

.referral-container {
    background: #fff;
    margin: 1vh 1vw;
    padding: 4vh 2vw;
}

.referral-container .search-input {
    border: solid 1px #404041 !important;
}

.referral-container ul {
    list-style-type: none;
}

.referral-container li {
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.referral-list-container {
    height: 60vh;
    overflow-y: scroll;
}

.referral-list-container::-webkit-scrollbar {
    width: 10px;
}

.referral-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.referral-list-container::-webkit-scrollbar-thumb {
    background: #888;
}

.referral-list-container::-webkit-scrollbar-thumb {
    background: #555;
}

.referral-actions {
    margin-bottom: 1.5vh;
}

.referral-actions input {
    width: 100%;
}

.dashboard-container {
    width: 32%;
    margin-top: 2vh;
    margin-left: 0.5%;
    margin-right: 0.5%;
    background: #fff;
}

.dashboard-container:hover {
    box-shadow: 2px 3px 10px #ccc;
}

.dashboard-container div {
    margin: 2vh 2vw;
}

.dashboard-full-container {
    width: 98%;
    text-align: center;
    margin-top: 2vh;
    margin-left: 0.5%;
    margin-right: 0.5%;
    background: #fff;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.dashboard-half-container {
    width: 48.5%;
    margin-top: 2vh;
    margin-left: 0.5%;
    margin-right: 0.5%;
    background: #fff;
}

.dashboard-half-container div {
    /* margin: 2vh 2vw; */
}

.dashboard-heading {
    font-size: 1.2rem;
    font-family: os-bold;
    color: #7022cc;
}

.dashboard-table-heading {
    font-size: 1.2rem;
    font-family: os-bold;
    color: black;
    padding: 1em;
    margin:0em;
    background-color:#C5E7FF;
    border-bottom: #BA3E84;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.due {
    color: #cc2229;
}

.dueing {
    color: #cc7022;
}

.dashboard-stats {
    font-size: 1.2rem;
    font-family: os-semibold;
}

.reminder-container {
    height: 50vh;
    overflow-y: scroll;
}

.reminder-container::-webkit-scrollbar {
    width: 10px;
}

.reminder-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.reminder-container::-webkit-scrollbar-thumb {
    background: #888;
}

.reminder-container::-webkit-scrollbar-thumb {
    background: #555;
}

.reminder-container table td {
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.reminder-container table th {
    padding-top: 1vh;
    padding-bottom: 1vh;
    background: #d9d9d9;
}

.profile-container {
    background: #fff;
    width: 98%;
    margin: 2vh auto;
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.profile-container > div {
    margin-left: 2vw;
    margin-right: 2vw;
}

.profile-container > div > div {
    padding: 1vh 2vw;
}

.profile-container .profile-label {
    width: 8vw;
    font-weight: bold;
}

.change-password-container {
    display: none;
    flex-direction: row;
}

.reports-filter {
    margin-top: 3vh;
}

.report-label {
    width: 18vw;
    font-weight: bold;
}

.acc-col-1 {
    width: 6vw;
}

.acc-col-2 {
    width: 5vw;
}

.acc-col-3 {
    width: 5vw;
}

.acc-col-4 {
    width: 6vw;
}

.acc-col-5 {
    width: 6vw;
}

.acc-col-6 {
    width: 6vw;
}

.acc-col-7 {
    width: 6vw;
}

.acc-col-8 {
    width: 5vw;
}

.acc-col-9 {
    width: 6vw;
}

.acc-col-10 {
    width: 5vw;
}

.acc-col-11 {
    width: 4vw;
}

.acc-col-12 {
    width: 6vw;
    word-break: break-all;
}

.con-col-1 {
    width: 10vw;
}

.con-col-2 {
    width: 10vw;
}

.con-col-3 {
    width: 10vw;
}

.con-col-4 {
    width: 10vw;
}

.con-col-5 {
    width: 17vw;
}

.con-col-6 {
    width: 10vw;
}

.con-col-7 {
    width: 6vw;
}

.pro-col-1 {
    width: 13vw;
}

.pro-col-2 {
    width: 9vw;
}

.pro-col-3 {
    width: 9vw;
}

.pro-col-4 {
    width: 9vw;
}

.pro-col-5 {
    width: 9vw;
}

.pro-col-6 {
    width: 7vw;
}

.pro-col-7 {
    width: 9vw;
}

.pro-col-8 {
    width: 6vw;
}

.task-col-1 {
    width: 23vw;
}

.task-col-2 {
    width: 8vw;
}

.task-col-3 {
    width: 21vw;
}

.task-col-4 {
    width: 17vw;
}

.task-col-5 {
    width: 8vw;
}

.ref-col-1 {
    width: 12vw;
}

.ref-col-2 {
    width: 42vw;
}

.ref-col-3 {
    width: 10vw;
}

.ref-col-4 {
    width: 15vw;
}

.log-col-1 {
    width: 71vw;
}

.log-col-2 {
    width: 12vw;
    text-align: center;
}

.details-select {
    width: 100%!important;
    margin-bottom: 2vh;
}

#loading-container {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    padding-top: 30vh;
}

#loading-container p {
    font-size: 1.8rem;
    font-family: os-bold;
}

#loading-container img {
    width: 10vw;
}

#saving-container {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    padding-top: 30vh;
    display: none;
}

#saving-container p {
    font-size: 1.8rem;
    font-family: os-bold;
}

#saving-container img {
    width: 10vw;
}

.alpha-filter-container {
    padding-left: 1vw;
}

.export-col-container {
    display: flex;
}

.export-col-container div {
    width: 15vw;
}

.filter-container div {
    margin-left: 1vw;
    margin-bottom: 2vh;
}

table.striped tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

table.striped tbody tr:nth-child(odd):hover {
    background: #fcfbe9;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}