@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Open+Sans&display=swap');

@font-face {
    font-family: 'Eras';
    src: local('Eras Medium ITC'), local('ErasITC-Medium'),
        url('/fonts/subset-ErasITC-Medium.woff2') format('woff2'),
        url('/fonts/subset-ErasITC-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

:root{
    --backgroundColour: #fff;
    --backgroundGradient: #fff;
    --primaryColour: #bb1a5b;
    --secondaryColour: #0d7280;
    --tertiaryColour: #1293A5;
    --bodyColour: #232323;
    --bodyColour2: #222;
    
    --gradientMin: #fff;
    --gradientMax: #f8f8f8;
    --boxShadowTop: #eaeaea;
    --boxShadowBottom: #d7d7d788;
    
    --buttonColour:#fff;
    --buttonHoverColour: #fff;
    
    --errorColour: red;
    --warningColour: #ca6e3a;
    --successColour: rgb(74, 240, 74);
    --infoColour: green;

    --createColour: blue;
    --updateColour: rgb(46 144 46);
    --deleteColour: red;
    --requestColour: purple;
    --changeColour: #72b5ca;
    --purgeColour: #f13d06;
    --cloneColour: #a923e7;
    --confirmedColour: hsl(202, 80%, 52%);
    --archivedColour: hsla(335, 80%, 52%, 0.63);
    --restoredColour: hsla(34, 80%, 52%, 0.89);
    --issuedColour: #2b6fab;

    --toCheckColour: #ffbd6b;
    --checkedColour: hsl(120, 50%, 50%);
    
    --underline: #0004;
    
    --box-shadow: inset 1px 1px 3px #0004;
    --box-shadow-hover: inset 5px 5px 10px #000a;
    --box-shadow-hover-small: inset 2px 2px 5px #0008;
    
    --mainFont: 'Eras', sans-serif;
    --secondaryFont: 'Raleway', sans-serif;
}

/* width */
::-webkit-scrollbar {
    width: 0.5rem;
    height:0.4rem;
    cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
    background: #aaa;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-image: linear-gradient(90deg, var(--secondaryColour) 0%, var(--tertiaryColour) 100%);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: var(--primaryColour);
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--backgroundColour);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100vw;
    font-family: var(--secondaryFont);
    overflow-x: hidden;
    min-height:100vh;
}

.col, .col-center, .col-top-center, .col-end, .col-right{
    display: flex;
    flex-direction: column;
}
.col{
    align-items: flex-start;
    justify-content: flex-start;
}

.col-center{
    align-items: center;
    justify-content: center;
}

.col-top-center{
    align-items: center;
    justify-content: flex-start;
}

.col-end{
    align-items: flex-end;
    justify-content: flex-end;
}

.col-right{
    align-items: flex-end;
    justify-content: flex-start;
}

.row, .row-center, .row-end, .row-between, .row-right, .row-left, .row-align-center{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row{
    justify-content: flex-start;
    align-items: flex-start;
}

.row-center{
    justify-content: center;
    align-items: flex-start;
    width:100%;
}

.row-end{
    justify-content: flex-end;
    align-items: center;
    width:100%;
}
.row-between{
    justify-content: space-between;
    align-items: center;
    width:100%;
}

.row-right{
    justify-content: flex-end;
    align-items: center;
    width:100%;
}

.row-left{
    justify-content: flex-start;
    align-items: center;
    width:100%;
}

.row-align-center{
    align-items: center;
}

.half-row{
    width:50%;
}

.fw{
    width:100%;
}

h1,h2,h3,h4{
    margin-bottom:1rem;
    font-family: 'Eras', sans-serif;
}

h1{
    font-size: 2.5rem;
    color:var(--secondaryColour);
    margin-bottom: 1.5rem;
}

h2{
    font-size: 1.7rem;
    color: var(--primaryColour);
}

h3{
    font-size: 1.5rem;
    color: var(--primaryColour);
}

h4{
    font-size:1rem;
    color: var(--secondaryColour);
}

h5{
    font-size: 0.8rem;
    color:var(--bodyColour2);
}

p{
    color: var(--bodyColour);
    margin-bottom:0.5rem;
}

p.indent{
    margin:0.1rem 0 0.1rem 0.5rem;
}

p.center{
    width:80%;
    max-width:800px;
    min-width:500px;
    text-align: center;
}

p.tertiary{
    color:var(--tertiaryColour);
}

a{
    text-decoration: none;
    color: var(--bodyColour);
}

a:hover{
    color:var(--primaryColour);
}

section{
    width: 100%;
    margin: 1rem 0;
}

header{
    position: sticky;
    top:0;
    background-color: var(--backgroundColour);
    z-index: 90;
}

.raisedDiv{
    padding:1rem;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--gradientMin), var(--gradientMax));
    box-shadow:  3px 3px 6px var(--boxShadowBottom), 
                 -3px -3px 6px var(--boxShadowTop);
    scrollbar-color: var(--primaryColour) var(--backgroundGradient);
    scrollbar-width: thin;
    position: relative;
    margin:1rem;
    min-width: 150px;
}

.raisedDiv::after{
    content: attr(data-type);
    position:absolute;
    top:0.3rem;
    right:0.3rem;
    color:#8885;
    font-size: 1.3rem;
}

button, .button{
    border-radius:8px;
    background-color: var(--secondaryColour);
    border:none;
    color:var(--buttonColour);
    padding: 0.5rem 1rem;
    cursor:pointer;
    font-size: 1rem;
    transition: 0.1s;
    font-family: var(--secondaryFont);
}

button:hover, .button:hover{
    background-color:var(--primaryColour);
    color:var(--buttonHoverColour);
}

button.small{
    font-size: 0.7rem;
}

.secondaryButton{
    background-color: var(--tertiaryColour);
    font-size: 0.8rem;
    padding:0.3rem 0.8rem;
    margin: 0.3rem;
}

.secondaryButton:hover{
    background-color: var(--secondaryColour);
}

.tertiaryButton, #backButton{
    font-size: 0.8rem;
    padding:0.3rem 0.8rem;
    background: transparent;
    border-radius:8px;
    color:var(--bodyColour);
    transition: 0.1s;
    margin:0.3rem;
    border:1px solid #ccc;
}

.tertiaryButton:hover, #backButton:hover{
    background: transparent;
    color:var(--primaryColour);
}

.tinyButton{
    padding:0.2rem 0.4rem;
}

label{
    color: var(--bodyColour);
    margin:0.25rem 1rem 0.25rem 0.5rem;
    min-width:200px;
    text-align: left;
}

.smallLabel{
    min-width:100px;
}

form{
    width:700px;
    max-width:90%;
}

form.noWidth{
    width: unset;
    max-width: unset;
}

form h2{
    width:95%;
    margin: 2rem 0 1rem;
    position: relative;
}

form h2:first-of-type{
    margin-top:0;
}

form h2::after{
    content:'';
    position:absolute;
    bottom:-0.1rem;
    left:0;
    height:1px;
    width:100%;
    background-color:var(--underline);
}

form .row{
    align-items: center;
}

input, select, textarea{
    width:250px;
    border-radius: 8px;
    padding: 0.3rem;
    margin:0.5rem;
    border:1.5px solid var(--secondaryColour);
    background-color: var(--backgroundColour);
    color: var(--bodyColour)
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { 
    box-shadow: 0 0 0 30px var(--backgroundGradient) inset !important;
    -webkit-text-fill-color: var(--bodyColour) !important;
}

.terms{
    width:95%;
    margin:1rem auto;
}

input:disabled, textarea:disabled{
    background: var(--underline);
}

.smallInput{
    width:150px;
    margin:0.2rem;
}

.tinyInput{
    width:50px;
    padding:0.2rem;
    margin:0;
}

.inputRow{
    position:relative;
    margin-left:0.5rem;
}

.inputRow input, .inputRow select{
    padding: 0.3rem 0.3rem 0.3rem 1.5rem;
}

.inputRow i{
    position: absolute;
    top:-5px;
    left:-5px;
    background:var(--backgroundColour);
    border-radius: 50%;
    border:1.5px solid var(--secondaryColour);
    padding:0.4rem;
    color:var(--secondaryColour);
    width:30px;
    height:30px;
}

.inputRow i::before{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.inputRow .togglePassword{
    left: 85%;
    top: 10%;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

h5.inputRowLabel{
    margin-bottom:0.5rem;
}

.underlinedHeading {
    position: relative;
    width: 100%;
}

.underlinedHeading::before{
    content:'';
    position:absolute;
    bottom:-0.1rem;
    left:0;
    width:100%;
    height:1px;
    background:var(--underline);
}

.infoMessage, .error, .warning{
    color:var(--infoColour);
    font-size: 0.85rem;
    margin: 0.3rem 0.5rem;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.error{
    color:var(--errorColour);
}

.warning{
    color: var(--warningColour);
}

.success{
    color:var(--successColour);
}

.info{
    color:var(--bodyColour);
    font-size: 0.8em;
    margin:0.2rem 0;
    max-width:60ch;
}

.overlay, .waiterOverlay{
    width:100vw;
    height:100vh;
    background-color: #0008;
    z-index: 50;
    position: fixed;
    top:0;
    left:0;
    margin:0;
}

.pika-single button:hover{
    background-color: var(--backgroundColour);
    color:var(--primaryColour);
}

#switchExample.switch{
    display: inline-block;
    margin:0 0.3rem;
    width:30px;
    min-width:30px;
    --bg: #0d7280;
    --trans:18px;
    --dim:12px;
}

#switchExample::before, #switchExample::after{cursor:default}

.permission-recommendation{
    color:var(--primaryColour);
    font-weight: bold;
    margin-left:0.5rem;
    font-size: 0.8rem;
}

.created,
.updated,
.deleted,
.requested,
.changed,
.cloned,
.confirmed,
.archived,
.issued{
    font-weight: bold;
}

.created{
    color:var(--createColour);
}

.updated{
    color:var(--updateColour);
}

.deleted{
    color:var(--deleteColour);
}

.requested{
    color:var(--requestColour);
}

.changed{
    color:var(--changeColour);
}

.cloned{
    color:var(--cloneColour);
}

.confirmed{
    color:var(--confirmedColour);
}

.archived{
    color:var(--archivedColour);
}

.restored{
    color:var(--restoredColour);
}

.issued{
    color:var(--issuedColour);
}

.odsLink{
    color:var(--primaryColour);
}

.odsLink:hover, .ods:focus{
    color:var(--secondaryColour);
}

.number{
    font-family: 'Open Sans', sans-serif;
}

.boldlyBlue{
    font-weight: bold;
    color: var(--secondaryColour);
    margin-top:1rem;
}

.vatRow[data-state="disabled"]{
    opacity: 0.5;
}

.vatRow[data-state="enabled"]{
    opacity: 1;
}

#itemHolder{
    width:80%;
    margin:2rem 0.5rem 1rem;
}

#addItem{
    margin-bottom:1rem;
}

#amountRow input{
    margin:0 0.3rem;
}

.item{
    padding:1rem;
    border:1px solid var(--underline);
    border-radius: 8px;
}

.item + .item{
    margin-top:1rem;
}

.smallCard.profileCard{
    width:fit-content;
}

.reportCard{
    min-width:300px;
    text-align: center;
}

.reportCard:hover i{
    color: var(--primaryColour);
}

.reportCard i{
    font-size: 4rem;
    margin: 2rem 0 3rem;
    color: #a1a1a1;
    transition: color 0.3s;
}

.subbieNoteButtons form button[type="submit"]{
    margin: 0.3rem 1rem;
}

.finalInvoiceValue{
    margin-left:auto;
    color: var(--primaryColour);
    font-size: 1.2rem;
}

.itemContainer {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 1rem;
    gap: 2rem;
    margin: 2rem 0;
  }
  .itemContainer.column {
    flex-direction: column;
  }
  .itemContainer.column .item {
    width: 100%;
    margin: 1rem 0;
  }
  .itemContainer .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    position: relative;
    padding: 2rem;
  }
  .itemContainer .item[data-state=hidden] {
    display: none;
  }
  .itemContainer .item[data-state=shown] {
    display: flex;
  }
  .itemContainer .item .header {
    width: 100%;
  }
  .itemContainer .item .content {
    width: 100%;
    padding: 1rem 0;
    margin: 1rem 0;
    position: relative;
  }
  .itemContainer .item .content::before, .itemContainer .item .content::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    top: 0%;
    height: 1px;
    background: linear-gradient(90deg, #141925 0%, #666666 20%, #666666 80%, #141925 100%);
    filter: opacity(0.8);
  }
  .itemContainer .item .content::after {
    top: 100%;
  }
  .itemContainer .item .footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    margin-top: auto;
  }
  .itemContainer .item .title {
    color: var(--secondaryColour);
    font-size: 1.2rem;
    font-weight: bold;
  }
  .itemContainer .item .subTitle {
    color: #57d2db;
    font-size: 1rem;
    margin: 0.5rem 0 0;
  }
  .itemContainer .item + .item{
    margin: 0;
  }  

.fa-calendar-alt{
    cursor: pointer;
}

.constructionRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0.2rem 0;
}

.constructionRow p{
    margin: 0;
}

.constructionRow .buttonRow{
    align-items: center;
    margin: 0 0 0 2rem;
}

.constructionRow .deleteButton, .item .deleteButton{
    position: relative;
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    background: transparent;
    border-radius: 8px;
    color: var(--bodyColour);
    transition: 0.1s;
    margin: 0.3rem;
    border: 1px solid #ccc;
    top: unset;
    right: unset;
    width: unset;
    height: unset;
}

.inlineForm{
    width: 80%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.inlineForm form{
    width: unset;
    max-width: unset;
}

.inlineForm button[type=submit]{
    margin: 0;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem
}

/*******STATE CHANGES********/
*[data-state=hidden]{
    display:none;
}

*[data-state=shown]{
    display:flex;
}

*[data-error=error]{
    border: 1px solid red;
}

@media only screen and (min-width:768px) and (max-width:1024px){
    form{
        width:500px;
    }
}

@media only screen and (max-width:767px){
    h2{
        font-size: 1.5rem;
    }
    h3{
        font-size:1.3rem;
    }
    .inputRow{
        width:100%;
    }
    .inputRow input, .inputRow select{
        width:100%;
    }
    .infoMessage, .error, .warning{
        text-align: center;
    }
    p.center{
        min-width:90%;
        width:90%;
        max-width:90%;
    }
    .smallCard.profileCard{
        width:100%;
    }
}

@media screen and (min-width: 1440px) {
    .itemContainer .item {
      max-width: max-content;
    }
  }
  @media screen and (min-width: 767px) and (max-width: 1024px) {
    .itemContainer {
      justify-content: center;
    }
  }
  @media screen and (max-width: 767px) {
    .itemContainer {
      flex-direction: column;
      padding: 0;
      width: 100%;
    }
    .itemContainer .item {
      width: 100%;
    }
    .itemContainer .item .header {
      flex-direction: column;
    }
  }

  .infoRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .infoRow + .infoRow {
    margin-top: 0.5rem;
  }
  .infoRow p, .infoRow .link {
    margin: 0 1rem;
    max-width: 50ch;
  }
  @media screen and (max-width: 767px) {
    .infoRow p {
      text-align: left;
    }
    .infoRow .buttonRow {
      justify-content: flex-end;
    }
  }

  .noMargin{
    margin: 0 !important; 
  }