:root {
    --main-blue-color: #153456;
    --overlay-gradient: linear-gradient(120deg, #153456BF 58%, #15345600 58%);
    --input-background-color: #dadada;
    --input-border: 1px solid rgba(0, 0, 0, 0.175);
    --border-line: 1px solid rgba(0, 0, 0, 0.123);
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Barlow Semi Condensed", Sans-serif;
}

main {
    min-height: 100vh;
}

.bannerContent {
    font-family: "Barlow Semi Condensed", Sans-serif;
    max-width: 1100px;
    padding: 0 24px;
    margin: 0 auto;
}

.pageContent {
    font-family: "Barlow Semi Condensed", Sans-serif;
    max-width: 1200px;
    padding: 0 24px;
    margin: 0 auto;
    margin-top: 60px;
}

.hoverIcon {
    transition: 0.3s;
}

.hoverIcon:hover {
    color: #119ED6;
}


/* -------------------- Header & navigation -------------------- */
header {
    background-color: var(--main-blue-color);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    font-family: "Barlow Semi Condensed", Sans-serif;

    position: sticky;
    top: 0;
    z-index: 1000;

    font-size: 20px;
    font-weight: 700;
}

.headerContainer {
    max-width: 1220px;
    padding: 0 10px;
    margin: 0 auto;
}

.headerContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo img {
    vertical-align: middle;
    height: 48px;
    margin-left: 10px;
}

nav {
    display: flex;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
}

nav a {
    color: #FFFFFF;
    text-decoration: none;
}

.listStart {
    padding: 15px 0;
    margin: 0 12.5px 0 0;
}

.list {
    padding: 15px 0;
    margin: 0 12.5px;
}

.listEnd {
    padding: 15px 0;
    margin: 0 0 0 12.5px;
}

.activePage {
    color: #119ED6;
}


/* -------------------- Banner & overlay -------------------- */
.overlay {
    background-color: transparent;
    background-image: var(--overlay-gradient);
}

.homeBanner, .accountBanner {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.homeBanner {
    background-image: url(../img/inkomsthal.png);
}

.accountBanner {
    background-image: url(../img/meeting.png);
}

.accountOverlay {
    background-color: transparent;
    background-image: var(--overlay-gradient);
    min-height: 100vh;
}

.bannerTextDiv {
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 30px;
}

.bannerText {
    font-size: 36px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.75;
    margin: 0;
}

.bannerSubText {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
}

.homeInputs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
}

.homeButtons {
    display: flex;
    flex-direction: row;
}


/* -------------------- Footer -------------------- */
footer {
    background-color: #112C4A;
    color: #FFFFFFC9;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.footerContainer {
    max-width: 1220px;
    padding: 0 24px;
    margin: 0 auto;
}

.footerContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
}

.footerRight a {
    color: #FFFFFF;
    text-decoration: none;
}


/* -------------------- Tables -------------------- */
tmb-table .table-responsive {
    max-height: 550px
}

thead .sc-tmb-table {
    background-color: #153456 !important;
    color: #ffffff !important;
    font-weight: 500;
    padding: 8px 20px;
}

td:hover {
    background-color: #e3e3e3;
    cursor: pointer;
}

tmb-table .table-responsive {
    max-height: 550px;
    border-radius: 0.275em !important;
}

.coloredCell {
    border-radius: 0.275em;
}

.coloredCell.green {
    background-color: #20e22a86;
}

.coloredCell.yellow {
    background-color: #f1c40f86;
}

.coloredCell.orange {
    background-color: #ff730086;
}

.coloredCell.grey {
    background-color: #cecece86;
}

.checkboxInput {
    text-align: left;
}

.checkboxInput div {
    margin: 2px;
}

.checkbox {
    border: 1px solid rgba(0, 0, 0, 0.2);
    accent-color: #119ED6;
    vertical-align: middle;
    width: 15px;
    margin-right: 3px;
    cursor: pointer;
}

.cursor {
    cursor: pointer;
}

.tableHeader {
    position: relative;
}

.datePickerWrapper {
    position: absolute;
    left: 0;
    width: 200px;
}


/* -------------------- Datepicker -------------------- */
.daterangepicker.sc-tmb-datepicker .drp-calendar.right.sc-tmb-datepicker {
    display: none;
}

td.active.sc-tmb-datepicker-day, td.active.sc-tmb-datepicker-day:hover {
    background-color: #119ED6 !important;
}

.daterangepicker.sc-tmb-datepicker .ranges.sc-tmb-datepicker li.sc-tmb-datepicker {
    font-size: 14px;
}

.daterangepicker.sc-tmb-datepicker .ranges.sc-tmb-datepicker li.active.sc-tmb-datepicker {
    background-color: #119ED6;
}

.monthselect.sc-tmb-datepicker-calendar, .yearselect.sc-tmb-datepicker-calendar {
    font-size: 14px;
}


/* -------------------- Primary & secondary button -------------------- */
.btn-primary, .btn-secondary {
    --tmb-btn-color: #ffffff !important;
    --tmb-btn-bg: #135297 !important;
    --tmb-btn-border-color: #153456 !important;
    --tmb-btn-hover-color: #ffffff !important;
    --tmb-btn-hover-bg: #153456 !important;
    --tmb-btn-hover-border-color: #153456 !important;
    --tmb-btn-active-color: #ffffff !important;
    --tmb-btn-active-bg: #112C4A !important;
    --tmb-btn-active-border-color: #153456 !important;
    --tmb-btn-disabled-color: #ffffff !important;
    --tmb-btn-disabled-bg: #1c3147 !important;
    --tmb-btn-disabled-border-color: #1c3147 !important;
}

.homeInputs .btn-secondary {
    --tmb-btn-color: #ffffff !important;
    --tmb-btn-bg: #119ED6 !important;
    --tmb-btn-border-color: #ffffff !important;
    --tmb-btn-hover-color: #ffffff !important;
    --tmb-btn-hover-bg: #153456 !important;
    --tmb-btn-hover-border-color: #ffffff !important;
    --tmb-btn-active-color: #ffffff !important;
    --tmb-btn-active-bg: #112C4A !important;
    --tmb-btn-active-border-color: #ffffff !important;
    font-size: 18px !important;
    text-transform: uppercase;
}

.btn {
    font-family: "Barlow Semi Condensed", Sans-serif !important;
    border-radius: 0.175em !important;
}

tmb-button {
    display: flex;
    margin-top: auto;
    align-content: center;
    justify-content: center;
}

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


/* -------------------- Offcanvas -------------------- */
.sc-tmb-offcanvas-h .offcanvas-header.sc-tmb-offcanvas {                                
    background-color: #135297 !important;
}

h3 {
    color: #ffffff !important;
}
      
tmb-offcanvas {
    --offcanvas-width: 50vw !important;
}

.offcanvasBody {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.requestSection, .createRequestSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    flex: 1;
    min-height: 0;
}

.offcanvasSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    flex: 1;
    min-height: 0;
    padding: 0 50px;
}

.offcanvasClientSection {
    display: flex;
    flex-direction: column;
    width: 100%;

    flex: 1;
    min-height: 0;
    padding: 0 50px;
}

.offcanvasContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    flex: 1;
    width: 100%; 
}

.requestContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    flex: 1;
    overflow-y: auto;
    width: 100%;
}

.createRequestContent {
    flex: 1;
    overflow-y: auto;
    width: 100%;

    display: flex;
    flex-direction: column;
    padding-left: 5%;
}

.offcanvasFooter {
    width: 90%;
    padding-top: 30px;
}

.info {
    width: 90%;
}

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

.clientInfo {
    width: 95%;
}

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

.alignAccountInfo {
    display: flex;
    flex-wrap: wrap;
}

.alignWorkerAccountInfo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 95%;
}

.titleText {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.titleSubText {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    margin-right: 5px;
}

.email {
    margin-top: 10px;
}

@media screen and (max-width: 1440px) {
    .cards {
        padding-left: 5px !important;
    }
}

@media screen and (max-width: 1024px) {
    .cards {
        padding-left: 5px !important;
    }
}


/* ---- Cards in offcanvas ---- */
.cards {
    display: grid;
    justify-items: center;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding-left: 10px;
    margin-bottom: 10px;
}

.requestCard {
    width: 100%;
    padding-left: 10px;
    margin-bottom: 40px;
}

.permissionCard {
    width: 100%;
    margin-bottom: 40px;
}

.card {
    --tmb-card-border-radius: 0.275em !important;
}

.form-control {
    border-radius: 0.275em !important;
}

.form-control:focus {
    border-color: #153456 !important;
}


/* ---- Modal in offcanvas ---- */
.modal-footer > * {
    width: 100%;
}

.rejectRequest, .cancelRejection {
    width: 25%;
}


/* -------------------- Requests -------------------- */
/* ---- Requestcards ---- */
.requestTitle {
    font-weight: 500;
}

.files, .attachment {
    margin: 0;
}

.attachment {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: var(--border-line);
    max-width: 260px;
    padding-bottom: 5px;
    margin-top: 20px;
}

.attachmentIcon {
    font-size: 13px;
    margin-right: 5px;
}

.requestFile, .downloadIcon {
    margin-right: 10px;
    margin-top: 10px;
}

.downloadIcon {
    text-decoration: underline;

    &:hover {
        color: #119ED6;
        cursor: pointer;
    }
}

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

.additionalInfo, .clientMessage {
    margin: 30px 0 5px 0;
    font-weight: 500;
}

.bigDescription, .mediumDescription, .smallDescription, .denyMessage {
    all: unset;
    font-family: "Barlow Semi Condensed", Sans-serif;
    height: 75px;
    padding: 8px;  
}

.bigDescription {
    height: 60px;
    width: 92%;
}

.mediumDescription {
    height: 50px;
    width: 350px;
}

.smallDescription {
    height: 40px;
    width: 92%;
}

.border {
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.275em;
}

.rejected {
    margin-top: 10px;
}

.denyMessage {
    border: var(--border-line);
    width: 96%;
}

.disabled {
    background-color: rgba(255, 255, 255, 0.295);
    color: #3f3f3f;
    font-style: italic;
    cursor: default;
}

.requestDeadline {
    width: 90px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.deadlineSelect {
    border: none;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 16px;
    width: 100%;
    padding: 5px 8px;
    margin-right: 10px;
}

.deadlineSelect:valid {
    color: var(--main-blue-color);
}

.saveRequest {
    width: 100%;
    margin-top: 30px;
}

.editForm {
    color: #ffffff;
    font-size: 20px;
    margin-left: 20px;

    &:hover {
        color: #119ED6;
        cursor: pointer;
    }
}

.greyColor {
    color: rgb(122, 122, 122);
    font-size: 18px;
    font-style: italic;
    cursor: pointer;
    margin: 0;
}

.redColor {
    color: red;
    font-size: 18px;
    cursor: pointer;
    margin: 0;
}

.orangeColor {
    color: orange;
    font-size: 18px;
    cursor: pointer;
    margin: 0;
}

.orangeColorBold {
    color: orange;
    font-weight: 600;
}

.greenColor {
    color: green;
    font-size: 18px;
    cursor: pointer;  
}

.greenColorBold {
    color: green;
    font-weight: 600;
}

.denied {
    color: rgb(184, 38, 38);
    font-size: 16px;
    cursor: pointer;
    margin-left: 5px;
}

.noFiles {
    margin-top: 5px;
    color: rgb(184, 38, 38);
}

/* ---- Create request ---- */
.documentSelect {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.selectAlign {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 400px;
}

.createDocDescription {
    all: unset;
    border: var(--border-line);
    background-color: rgba(255, 255, 255, 0.733);
    font-family: "Barlow Semi Condensed", Sans-serif;
    height: 50px;
    width: 98%;
    padding: 8px;
}

.createRequestDescription {
    all: unset;
    border: var(--border-line);
    background-color: rgba(255, 255, 255, 0.733);
    font-family: "Barlow Semi Condensed", Sans-serif;
    height: 20px;
    width: 98%;
    padding: 8px;
}

.hideDescription {
    display: none;
}

.addMessage {
    color: var(--main-blue-color);
    margin: 10px 0 5px 0;

    &:hover {
        text-decoration: underline;
        cursor: pointer;
    }
}

.deadlineText, .inviteEmail {
    margin: 15px 0 5px 0;
}

.newRequestDiv {
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    margin-bottom: 20px;
}

.docTitle {
    font-weight: 500;
}

.newRequestDiv input {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.275em;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;

    width: 275px;
    padding: 5px 16px;
    margin: 5px 0;
}


/* -------------------- Worker homepage -------------------- */
.deadline {
    all: unset;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 20px;
    text-align: center;
    padding: 5px 12px;
}

.deadline {
    background-color: #FFFFFF;
    border: var(--input-border);
    border-radius: 0.175em;
}

.deadline {
    color: grey;
}

.deadline:valid {
    color: var(--main-blue-color);
}


/* -------------------- Clients/workers overview page -------------------- */
.createNewAccount, .createNewRequest {
    width: 200px;
}

.buttonSpacing {
    margin-left: 20px;
}

.profileInfo {
    font-size: 18px;
    width: 250px;
}

.createButton {
    display: flex;
    justify-content: flex-end;
    width: 15%;
} 

.createAccountButton {
    display: flex;
    justify-content: flex-end;
    width: 22%;
} 

.buttonFooter {
    display: flex;
    justify-content: flex-end;
}


@media screen and (max-width: 1440px) {
    .createButton {
        width: 20%;
    }
    .createAccountButton {
        width: 27%;
    }
}

@media screen and (max-width: 1024px) {
    .createButton {
        width: 25%;
    }
    .createAccountButton {
        width: 32%;
    }
}

/* -------------------- Clients/workers create page -------------------- */
.newAccountDiv {
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    margin-bottom: 20px;
}

.newAccountDiv input {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.275em;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;

    width: 275px;
    padding: 5px 16px;
    margin: 5px 0;
}

.newWorkerDiv {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.newWorkerDiv input {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.275em;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;

    width: 250px;
    padding: 5px 16px;
    margin: 5px 0;
}

.permissionTitle {
    font-weight: 500;
    margin-bottom: 10px;
}


/* -------------------- Client homepage -------------------- */
.clientPageContent {
    font-family: "Barlow Semi Condensed", Sans-serif;
    max-width: 1200px;
    padding: 0 24px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.pageTitle {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

.clientCards {
    display: grid;
    justify-items: center;
    grid-template-columns: 50% 50%;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.clientRequestTitle {
    font-size: 18px;
    font-weight: 500;
}

.attachmentClient {
    border-bottom: var(--border-line);
    width: 160px;
    padding-bottom: 5px;
    margin-top: 10px;
}

.deleteFile {
    cursor: pointer;
    margin-left: 10px;
}

input[type="file"] {
    display: none;
}

.upload {
    margin-top: 20px;
    margin-bottom: 20px;
}

.fileUpload {
    background-color: #135297;
    border: 1px solid #153456;
    border-radius: 0.175em;
    color: #FFFFFF;

    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    padding: 5px 20px;

    &:hover {
        background-color: #153456;
    }
}

.messageClient {
    font-weight: 500;
    margin: 10px 0 5px 0;
}

.deadlineClientText {
    font-weight: 500;
    margin: 10px 0 0 0;
}

.saveRequest {
    margin-top: 30px;
}

.delete {
    vertical-align: middle;
    margin-left: 10px;

    &:hover {
        color: #119ED6;
        cursor: pointer;
    }
}


/* -------------------- Accountpage -------------------- */
.accountName {
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 600;
    padding-top: 30px;
}

.userIcon {
    color: #FFFFFF;
    font-size: 75px;
}

.accountName p {
    margin-bottom: 30px;
}

.accountDiv label {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400l
}

.accountDiv {
    margin-bottom: 10px;
}

.accountDiv input {
    background-color: var(--input-background-color);
    border: var(--input-border);
    border-radius: 3px;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 20px;

    height: 25px;
    width: 225px;
    padding: 8px 16px;
    margin: 10px 0;
}

.input:valid {
    color: var(--main-blue-color);
}

.edit {
    font-size: 18px;
    width: 100px;
    vertical-align: middle;
    
    &:hover {
        color: #119ED6;
        cursor: pointer;
    }
}

.edit i {
    font-size: 20px;
    margin-left: 10px;
}

.accountContent {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 550px;
}

.permissions p {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 10px;
}

.permissionDiv {
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
}

.permissionDiv label {
    font-size: 20px;
    font-weight: 300;
}

.permissionDiv {
    background-color: var(--input-background-color);
    border: var(--input-border);
    border-radius: 3px;
    font-family: "Barlow Semi Condensed", Sans-serif;
    width: 500px;
    padding: 8px 16px;
}

.permissionDiv input {
    border: unset;
    background-color: unset;
    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;
    width: 245px;
    padding: 5px;
}


.editPasswordButton, .securityButton {
    all: unset;
    background: linear-gradient(90deg, rgba(75, 163, 211, 1) 35%, rgba(21, 135, 195, 1) 100%);
    background-color: #4BA4D3;
    border: solid #FFFFFF;
    border-width: 1px;
    color: #FFFFFF;

    font-family: "Barlow Semi Condensed", Sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    cursor: pointer;
}

.editPasswordButton, .securityButton {
    padding: 7px 24px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.editPasswordButton {
    margin-left: 17px;
}