/* Globals */
:root {
    --black:#0F111A;
    --altBlack: #1F2333;
    --white:#f1f3f4;
    --cream:#F8F2DC;
    --primary:#334833;
    --secondary:#4C6B4D;
    --lighterGreen:#ABC4AB;
    --darkPrimary:#223022;
    --accent:#B95E13;
    --accentSecondary:#81420E;
    --red:#B81800;


    --font:"Urbanist";
    --altFont:"Big Shoulders";
    --shadow:rgb(0, 0, 0, 0.15) 0px 0px 20px;

    --stat1: #eb2f48;
    --stat2: #f7921e;
    --stat3: #00a1e2;
    --stat4: #9acc75;
    --statBg: #676767;
    --pieDiameter: 300px;
    --pieThickness: 35px;
    --barLength: 350px;
    --barHeight: 25px;

}

body {font-family:var(--font);letter-spacing:0.7;font-size:18px;font-weight:500;margin:0;min-height:100%;background-color:var(--white);}
.main-wrapper, .main-left-column, .main-center-column {min-height:100%;transition: 0.2s;}
.main-inner {padding:40px;display:flex;}
.main-wrapper {display:flex;flex-direction:column;height:100%;}
.main-left-column {width:400px;background-color:var(--primary);display:flex;box-shadow: var(--shadow);}
.main-center-column {width:calc(100% - 400px);display:flex;flex-direction: column;max-height:100vh;}
.main-right-column {width:400px;background-color:var(--accent);display:flex;box-shadow: var(--shadow);}
.button, .button-alt {margin:0;background-color:var(--primary);padding:15px 30px;color:var(--white);border-radius:5px;box-shadow:var(--shadow);text-align:center;cursor:pointer;display:inline-block;transition:0.15s;text-transform: uppercase;letter-spacing:2;text-decoration:none;user-select:none;}
.button-alt {background-color: var(--accent);}
.button:hover {background-color:var(--secondary) !important;}
.button-alt:hover {background-color:var(--accentSecondary) !important;}
.hide-element {display:none !important;}
.button-disabled, .button-disabled:hover {opacity:0.5;background-color:grey !important;cursor:default !important;}
.fullwidth-element {width:100%;}

/* Loader */
#jobsavir-loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#jobsavir-loader img {
    width: 150px;
    height: 150px;
}
#jobsavir-loader p {
    font-family: var(--altFont);
    text-transform: uppercase;
    font-weight: 900;
    margin: 0;
    font-size: 32px;
    color: var(--primary);
}

/* Top Bar */
#top-bar {height:60px;background-color:var(--darkPrimary);color:var(--white);box-shadow:var(--shadow);    align-content: center;display: flex;justify-content: space-between;font-size:20px;}
#top-branding {display:flex;align-items: center;padding:5px 10px;text-decoration:none;color:var(--white);}
#top-branding > img {height:50px;}
#top-branding > h2 {font-family: var(--altFont);text-transform: uppercase;font-weight: 900;margin:0;padding-left:10px;padding-right:10px;}
/* #top-branding > span {font-family: var(--altFont);text-transform: uppercase;font-weight:400;font-size:16px;} */

#top-nav {
    display: flex;
    gap: 4px;
}
.top-button {
    align-content: center;
    padding: 0px 15px;
    cursor:pointer;
    background-color: var(--primary);
    font-family: var(--altFont);
    letter-spacing: 1.2px;
    user-select: none;
    color: var(--white);
    text-decoration: none;
}
.top-button:hover {background-color:var(--secondary);}
.top-active-button {
    height:70px;
    background-color: var(--secondary) !important;
    z-index: 2;
    border-radius: 0px 0px 5px 5px;
    box-shadow: var(--shadow);
}

/* Menu Tools */
#top-tools-group {
    display: flex;
    background-color: var(--darkPrimary);
    gap: 4px;
}
#top-tools-group > .top-button {
    /* background-color:var(--primary); */
}
.top-tools {
    align-items: center;
    display: flex;
}
.top-tools span {
    
}
.top-tools img {
    height: 25px;
    margin-left: 10px;
}

/* XERO */
#top-xero {position:relative;}
#top-xero-display {
    display: block;
    height: 100%;
    align-content: center;
    cursor:pointer;
}
.xero-connected:after {
    content:'';
    display:inline-block;
    height:13px;
    width:13px;
    border-radius:50px;
    background-color:green;
    margin-left:5px;
}
.xero-disconnected:after {
    content:'';
    display:inline-block;
    height:13px;
    width:13px;
    border-radius:50px;
    background-color:var(--red);
    margin-left:5px;
}
#top-xero-modal {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 220px;
    background-color: var(--white);
    padding: 10px;
    border: 5px solid var(--accent);
    color: var(--black);
    z-index:99;
}
#connect-xero:hover {background-color:#047b9f;}
#xero-connected-accounts {font-size:16px;text-align: center;}
#xero-connected-accounts > p {
    margin: 0;
    font-weight: 600;
    font-family: var(--altFont);
    font-size: 20px;
}
.no-xero-accounts {padding-bottom:10px;}
#xero-connected-accounts-list {display:flex;gap:5px;justify-content:center;flex-direction:column; margin: 10px 0px;}
#xero-connected-accounts-list > span {text-decoration: underline;}
#xero-revoke-all {text-decoration:none;background-color:var(--red);display:inline-block;padding:5px 20px;margin-top: 10px;transition: 0.15s;text-transform: uppercase;letter-spacing: 2;
    color: var(--white);border-radius: 5px;box-shadow: var(--shadow);}

/* Menu Account */
#top-button-account {
    align-content: center;
    padding: 0px 15px;
    font-size: 24px;
    letter-spacing: 1px;
    cursor: pointer;
}
/* #top-button-account:hover {background-color:var(--secondary);} */
#top-account-modal {
    position: absolute;
    top: 50;
    right: 10;
    width: 140px;
    display: flex;
    flex-direction: column;
    /* background-color: var(--accent); */
    gap: 5px;
    /* padding: 10px 10px; */
    z-index:99;
}
.account-button {
    text-align: center;
    padding: 5px 0px;
    font-size: 20px;
    font-family: var(--altFont);
    text-transform: uppercase;
    background-color: var(--accent);
    text-decoration:none;
    color:var(--white);
}
.account-button:hover {background-color: var(--accentSecondary);}

/* Login Page / Register Page */
#login-wrapper .main-left-column {display:none;}
#login-wrapper .main-center-column {width:100%;}
#login-wrapper .main-center-column .main-inner {min-height:100%;display:flex;width:100%;padding:0px;position:relative;}

#loginOuter {margin:auto;width:525px;text-align:center;z-index:1;padding:40px;}
#loginLogo {width:120px;}
#login-wrapper h1 {font-size: 64px;text-transform: uppercase;font-weight: 900;color:var(--primary);margin-bottom:0px;margin-top:-5px;font-family:var(--altFont);}

#loginLower {display:none;}

#login-wrapper p {font-family: var(--altFont);
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom:40px;
}

#loginInner, #registerInner {color:var(--black);border-radius: 10px;background-color: var(--white);box-shadow: var(--shadow);padding:40px;display: flex;flex-direction: column;gap:40px;position:relative;}
#loginInner label, #registerInner label {font-size: 18px;text-align: left;margin-bottom: -30px;}
#loginInner input, #registerInner input {background-color: var(--white);padding-bottom:5px;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--primary);
    font-size: 22px;
    color: var(--secondary);}
#registerInner input:disabled {
    opacity:0.5;
    cursor:disabled;
    user-select:none;
}
#login-help {font-size:14px;text-align: center;}
#login-help a {text-decoration:none;color:var(--primary);}

#login-validation, #register-validation {font-size:18px;color:var(--red);position:absolute;bottom: -40px;left: 0;width: 100%;text-align: center;}

#login-images {position:absolute;bottom:0;opacity:0.5;z-index:0;display:flex;width:100%;height:100%;}
#login-images img {object-fit: cover;position: absolute;bottom: 0;height:100%;max-width: 50%;}
#login-images img:nth-of-type(1) {left: 0;
    -webkit-mask-image:linear-gradient(to right, rgba(0, 0, 0, 1) -85%, rgba(0, 0, 0, 0) 85%);
    mask-image:linear-gradient(to right, rgba(0, 0, 0, 1) -85%, rgba(0, 0, 0, 0) 85%);
}
#login-images img:nth-of-type(2) {right: 0;
    -webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 1) -85%, rgba(0, 0, 0, 0) 85%);
    mask-image:linear-gradient(to left, rgba(0, 0, 0, 1) -85%, rgba(0, 0, 0, 0) 85%);
}

#loginLower, #registerLower {margin-top:40px;}
#loginLower > span, #registerLower > span {font-size:18px;padding-bottom:10px;display:block;}

/* .fadeOut{animation:fadeOut 0.2s linear forwards; animation-delay:5s;}
@keyframes fadeOut{
    0% {opacity:1;}
    100% {opacity:0;}
} */

/* Main Dashboard / Template */
#content-wrapper {display:flex;height:calc(100% - 60px);}
#dashboard-content {padding-bottom:40px;}
.main-left-column .main-inner {width:100%;}
#main-left-content {display:flex;flex-direction: column;justify-content: space-between;width:100%;position:relative;}

#menu-toggle {position:absolute;top:-20px;right:-20px;width:25px;cursor:pointer;}
.menu-collapsed .main-left-column {width:100px;}
.menu-collapsed .main-left-column .main-inner {padding:0px;}
.menu-collapsed #main-left-top, .menu-collapsed #main-left-bottom {opacity: 0;position: absolute;bottom: 0;transition: 0s;height:0px;width:0px;bottom:0;overflow:hidden;}
.menu-collapsed #menu-toggle {top: 20px;right: 40px;}
.menu-collapsed .main-center-column {width:calc(100% - 100px);}

#main-left-top, #main-left-bottom {opacity:1;transition:0.2s;transition-delay:0.2s;}
#main-left-top {height: calc(100% - 100px);}
/* #main-panel-target {height:100%;} */
#menu-help {font-size:16px;text-align: center;}
#menu-help a {text-decoration:none;color:var(--accent);font-style:italic;}

#main-buttons, #main-actions-target {padding:40px 0px;display:flex;flex-direction: column;gap:10px;}
#main-buttons .button, #main-actions .button {background-color:var(--darkPrimary);}
#main-buttons .button:hover, #main-actions .button:hover {background-color:var(--secondary);}
#main-buttons .active-button, #main-actions .active-button {background-color:var(--accent);}
#main-buttons .active-button:hover, #main-actions .active-button:hover {background-color:var(--accent);}

#main-left-bottom {display:flex;flex-direction:column;color:var(--white);}

.main-center-top {height:100%}
.main-wrapper .main-center-column .main-inner {height:100%;overflow:auto;}
.main-wrapper .main-center-column .main-inner::-webkit-scrollbar { 
    width: 35px;
}
.main-wrapper .main-center-column .main-inner::-webkit-scrollbar-track {
    background: #223022;
}
.main-wrapper .main-center-column .main-inner::-webkit-scrollbar-thumb {
    background: #4C6B4D;
    border-radius: 20px;
    border: 5px solid #223022;
}

.main-center-content {color:var(--black);width:100%;display: flex;flex-direction: column;}
#main-title {font-size: 48px;text-transform: uppercase;font-weight: 900;margin:0;padding-bottom:10px;margin-bottom:40px;font-family:var(--altFont);margin-bottom:0;border-bottom:2px solid var(--primary);}

.main-hide-button {display:none;}

#jobsavir-version {
    position: absolute;
    bottom: -35px;
    font-size: 12px;
    left: -35px;
    font-style: italic;
}

.dashboard-action-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid var(--secondary);
    border-radius: 5px;
    padding: 20px 10px 10px 10px;
    /* margin-bottom: 20px; */
    margin:0px -10px 40px -10px;
}
.dashboard-action-title {
    text-align: center;
    color: var(--lighterGreen);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1;
    margin: -30px auto 0px auto;
    padding: 0px 20px;
    background-color: var(--primary);
}
#dashboard-content-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.dashboard-tile {
    border-radius: 20px;
    min-height: 300px;
    background-color: var(--black);
    padding: 20px;
    padding-top: 50px;
    box-shadow: var(--shadow);
    position:relative;
}
#jobtracker-dashboard-tile {
    background:linear-gradient(90deg, rgba(241, 243, 244, 0.98), 80%, rgba(241, 243, 244, 0.6)), url(/assets/images/jobtracker_splash.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
}
#docgen-dashboard-tile {
    background: linear-gradient(90deg, rgba(241, 243, 244, 1), 30%, rgba(241, 243, 244, 0.98), 70%, rgba(241, 243, 244, 0.7)), url(/assets/images/docgen_splash.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
}
.empty-dashboard-tile {
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center !important;
}
#dashboard-jobtracker-tile-col2, #dashboard-docgen-tile-col2 {
    display:flex;
    gap:20px;
}
.dashboard-pinned-doc-button, #dashboard-latest-doc-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 20px;
}


.dashboard-pinned-job-button {
    padding:0;
}
.jobtracker-job-button-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 60px;
    border-radius: 10px;
}
.jobtracker-job-button-wrapper > span {
    background-color: var(--secondary);
    padding: 0px 10px;
    width: 75px;
    display: inline-block;
    text-align: left;
    height: 61px;
    align-content: center;
    border-radius: 10px 0px 0px 10px;
}
.jobtracker-job-button-inner-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.jobtracker-job-button-inner-wrapper > span:nth-of-type(1){
    text-align: left;
}
.jobtracker-job-button-inner-wrapper > span:nth-of-type(2){
    color: var(--lighterGreen);
    font-style: italic;
    font-size: 16px;
    text-transform: none;
    text-align: left;
}
.dashboard-pinned-job-button svg {
    height: 40px;
    width: 40px;
    position: absolute;
    right: 10;
}



/* .dashboard-quick-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 20px;
} */
.dashboard-pinned-doc-button svg, #dashboard-latest-doc-button svg {
    height:40px;
    width:40px;
}
#dashboard-jobtracker-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#dashboard-pinned-jobs {
    display: flex;
    flex-direction: column;
    gap:10px;
}
.dashboard-tile-button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid var(--lighterGreen);
    border-radius: 5px;
    padding: 20px 10px 10px 10px;
}
.dashboard-tile-titles {
    color: var(--darkPrimary);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1;
    margin: -30px auto 0px 15px;
    padding: 0px 20px;
    background-color: var(--white);
}
.dashboard-tile-tool-title {
    /* display:none; */
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
    background-color: var(--lighterGreen);
    padding: 5px 10px 5px 10px;
    border-radius: 0px 20px 0px 0px;
}
#dashboard-jobtracker-stats-bars, #dashboard-jobtracker-stats-donut {
    align-content: center;
}
#dashboard-jobtracker-tile-col1, #dashboard-docgen-tile-col1 {
    width: 100%;
    padding-right: 40px;
}
#dashboard-docgen-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#dashboard-pinned-documents {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#dashboard-docgen-tile-col2 {
    gap:40px;
    width:670px;
}
#dashboard-docgen-tile-stats {
    flex-direction: column;
    display: flex;
    width:230px;
}
#dashboard-docgen-tile-downloads {
    width: 396px;
    border: 2px solid var(--lighterGreen);
    border-radius: 5px;
}
#dashboard-docgen-tile-downloads-inner {
    padding:20px;
    position:relative;
}
#dashboard-docgen-download-title {
    
}
#dashboard-docgen-downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.docgen-download-tile {
    height: 100px;
    border-radius: 5px;
    padding: 10px;
    background-color: var(--lighterGreen);
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    color: var(--black);
    max-width: 154px;
}
.docgen-download-tile:hover {
    background-color: var(--primary);
    color: var(--white);
}
.docgen-download-tile:hover svg path {
    fill:var(--white);
}
.docgen-download-tile-doc {
    margin-top: 10px;
}
.docgen-download-tile-title {
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.docgen-download-tile > svg {
    height:40px;
    width:40px;
}
.dashboard-docgen-stat-line {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dashboard-docgen-stat-line:last-of-type{
    margin:0;
}
.dashboard-docgen-stat-line span:nth-of-type(1){
    font-style: italic;
}
.dashboard-docgen-stat-line span:nth-of-type(2){
    font-size: 38px;
    color: var(--primary);
    font-weight: 700;
    line-height: 1;
}
.alt-docgen-overview-tile {
    padding-top:20px;
    margin-top:20px;
}
.alt-docgen-overview-tile .dashboard-tile-tool-title {
    display:none;
}







/* Dashboard Stats */
.dashboard-stat-pie-wrapper {
    position:relative;
}
.dashboard-stat-pie {
    width: var(--pieDiameter);
    height: var(--pieDiameter);
    border-radius: 50%;
    animation: fadeIn 2s;
    background-image: conic-gradient(var(--stat1) var(--pieSplitCalc1), var(--stat2) var(--pieSplitCalc1), var(--stat2) var(--pieSplitCalc2), var(--stat3) var(--pieSplitCalc2), var(--stat3) var(--pieSplitCalc3), var(--stat4) var(--pieSplitCalc3), var(--stat4) var(--pieSplitCalc4), var(--primary) var(--pieSplitCalc4));
}
.dashboard-stat-pie-inner {
    position: absolute;
    width: calc(var(--pieDiameter) - var(--pieThickness) * 2);
    height: calc(var(--pieDiameter) - var(--pieThickness) * 2);
    border-radius: 50%;
    top: 0;
    background-color: var(--white);
    margin-left: var(--pieThickness);
    margin-top: var(--pieThickness);
}
.dashboard-stat-pie-count {
    position: absolute;
    color: var(--black);
    height: var(--pieDiameter);
    width: var(--pieDiameter);
    top: 0px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.dashboard-stat-pie-count span {
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 22px;
}
@keyframes fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.views-stat-bars-wrapper {
    color: var(--black);
    position: relative;
}
.views-stat-bar {
    padding-bottom: 10px;
}
.views-stat-bar-top {
    position: relative;
    padding-bottom: 10px;
}
.views-stat-bar-title {
    width: var(--barLength);
    text-align: center;
    font-size: 22px;
}
.views-stat-bar-values {
    display: flex;
    justify-content: space-between;
    width: var(--barLength);
    position: absolute;
    top: 0px;
    font-size: 22px;
}
.views-stat-bar-group {
    position: relative;
}
.views-stat-bar-background {
    height: var(--barHeight);
    width: var(--barLength);
    display: block;
    background-color: grey;
    border-radius: 50px;
}
.views-stat-bar-percent {
    height: var(--barHeight);
    width: var(--barLength);
    position: absolute;
    top: 0px;
    border-radius: calc(var(--barHeight) / 2);
    min-width: calc(var(--barLength) * 0.05);
}














/* Jobtracker */
.main-center-top > iframe {
    border: none !important;
    margin: -40px !important;
    width: calc(100% + 80px) !important;
    height: calc(100% + 80px) !important;
}
.jobtracker_content-wrapper .main-left-column {
    display:none;
}
.jobtracker_content-wrapper .main-center-column {
    width:100% !important;
}

/* My Account */
#account-content-inner {padding-top:40px;}
#xero-connection-wrapper {text-align: center;border-bottom: 2px solid var(--black);}
#account-details-fields {display:flex;gap:20px;flex-wrap: wrap;}
.account-details-field {flex-basis: calc(50% - 10px);display: flex;flex-direction: column;}
.account-details-field label {font-size: 18px;text-align: left;margin-bottom: 10px;}
.account-details-field input {background-color: var(--white);padding-bottom:5px;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--primary);
    font-size: 22px;
    color: var(--secondary);}
#account-details-save {margin-top:20px;}
#account-detail-email {opacity:0.5;}
#connect-xero {background-color:#06b3e8;}


/* Billing */
#billing-history {border-top:2px solid var(--black);margin-top:40px;}
.billing-line {margin-bottom:10px;background-color: lightgrey;padding: 10px;;}
.billing-line-upper {display:flex;gap:20px;justify-content: space-between;}
.billing-line-lower {display:none;}
.billing-line-upper-inner {display:flex;gap:20px;}
.tool-active {color: var(--secondary);font-weight: 700;}

#organisation-details-wrapper {
    border: 2px solid var(--lighterGreen);
    border-radius: 5px;
    padding:20px;
    margin-top:50px;
}
#organisation-details-wrapper > h4 {
    color: var(--darkPrimary);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1;
    margin: -30px auto 0px 15px;
    padding: 0px 20px;
    background-color: var(--white);
    display:inline-block;
}
.org-details.org-not-auth > p > span {
    font-weight: 700;
    color: var(--primary);
}
.org-details.org-has-auth > h5 {
    font-size: 32px;
    margin: 0;
    color: var(--darkPrimary);
}
.org-member {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    border-bottom: 2px solid var(--secondary);
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.admin-member {
    font-style:italic;
    font-weight:600;
    color:var(--secondary);
}
.remove-member, .remove-member-confirm, .remove-member-cancel {
    color:var(--red);
    font-weight:600;
    cursor:pointer;
    user-select:none;
}
.remove-member:hover, .remove-member-confirm:hover, .remove-member-cancel:hover {
    color:var(--accent);
}
.remove-member-actions {
    display:flex;
    gap:10px;
}
#org-members-section {
    background-color: var(--lighterGreen);
    padding: 10px;
    margin: 20px 0px;
}
#org-members-section > p {
    margin: -10px 0px 20px -10px;
    padding: 10px;
    text-transform: uppercase;
    display: inline-block;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 0px 0px 10px 0px;
}
.org-member-email {
    font-style: italic;
    color: var(--secondary);
}
#org-members-add {
    display: flex;
    gap: 20px;
    align-items: center;
}
#oma-input {
    width: 300px;
    height: 50px;
    background-color: var(--white);
    padding-bottom: 5px;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--primary);
    font-size: 22px;
    color: var(--secondary);
}
#oma-validation {

}

/* Doc Gen */
#docgen-content {height:100%;position:relative;}
#docgen-content > p {}
#docgen-templates {
    padding: 20px 0px;
}
#docgen-templates > p {
    margin:0;
}
#docgen-template-tiles {
    display: flex;
    gap: 20px;
    flex-direction:column;
}
.docgen-template-tile {
    display: flex;
    background-color: var(--primary);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    height: 80px;
    justify-content: space-between;
}
.docgen-template-tile:hover {
    background-color:var(--darkPrimary);
}
.docgen-template-tile.docgen-template-selected {
    background-color:var(--accent);
}
.docgen-template-tile .docgen-template-tile-title {
    display: block;
    font-size: 36px;
    font-family: var(--altFont);
}
.docgen-template-tile .docgen-template-tile-date {
    display: block;
    color: var(--lighterGreen);
}
.docgen-template-tile-left, .docgen-template-tile-right {
    height:100%;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content: center;
}
.docgen-template-tile-right img {
    height: 100%;
    border-radius: 10px;
    opacity: 0.3;
    width: 200px;
    object-fit: contain;
    background-color: white;
}


#docgen-job-title p, #docgen-job-description p, #docgen-templates > p {
    margin: 0;
    color: var(--primary);
    font-size: 26px;
    font-weight: 700;
    font-family: var(--altFont);
    padding-bottom: 10px;
}
#docgen-job-title input, #docgen-job-description textarea {
    width: 100%;
    border: 0px;
    border-bottom: 2px solid var(--primary);
    font-size: 20px;
    font-family: var(--font);
    color: var(--black);
    padding: 10px;
}
#docgen-job-title input:focus, #docgen-job-description textarea:focus {
    box-shadow:unset;
    outline:none;
    border-bottom-color: var(--accent);
}
#docgen-job-description {
    margin-top:20px;
}
#docgen-job-description > p > span{
    font-weight:400;
    color: var(--secondary);
}


.docgen-section-content {position:relative;}
#docgen-section-loader {position:absolute;top:0;right:0;width:100%;height:100%;background-color:black;}
#docgen-content-target {padding-bottom:40px;}
#docgen-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top:40px;
}
#docgen-sidebar-actions > .button {
    background-color: var(--darkPrimary);
}



/* Docgen Modal */
#docgen-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 99;
    border: 0;
    height: 100%;
    align-content: center;
}
#docgen-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #00000080;
}
#docgen-inner-wrapper {
    width: 80%;
    margin: auto;
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: var(--white);
    border-radius: 5px;
    box-shadow: var(--shadow);
}
#docgen-modal-target {
    padding:40px;
    border: 5px solid var(--primary);
    border-radius: 5px;
}
#docgen-exit-preview {
    position: absolute;
    text-align: center;
    transform: translate(-50%, 15px);
    left: 50%;
}
#docgen-preview-hint {
    margin: 0;
    text-align: center;
    color: var(--darkPrimary);
    font-style: italic;
    padding-top: 10px;
}

/* Docgen Form Header + Sidebar */
#docgen-section-header {
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align:center;
}
.docgen-doc-job-title {
    font-family: var(--altFont);
    font-size: 32px;
    margin: 0;
    border-bottom: 2px solid;
    text-align:center;
}
.docgen-doc-section-number {
    margin: 0;
    padding-top: 40px;
    margin-bottom:-5px;
}
.docgen-doc-section-title {
    font-family: var(--altFont);
    font-size: 42px;
    margin: 0;
    line-height: 42px;
    padding: 5px 0px;
}
.docgen-doc-section-description {
    margin: 0;
    font-style: italic;
    padding-bottom: 20px;
    font-size: 16px;
}
.docgen-progression-bar-wrapper {
    text-align:center;
}
.docgen-doc-job-description {
    margin:0;
    padding-top:5px;
    font-size:16px;
    color:var(--lighterGreen);
}


/* Docgen Form */
.docgen-section-content {

}
.docgen-section {
    background-color: rgb(51, 72, 51, 0.07);
    padding: 40px;
    /* overflow-y:auto; */
    /* margin-top: 40px; */
}
.docgen-section-middle {
    gap: 20px;
    display: flex;
    flex-direction: column;
}
.docgen-section-end {
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:20px;
}
.docgen-input-group {
    flex-direction:column;
}
.docgen-group-inputs {
    width: calc(100% - 320px);
    position: relative;
    padding-bottom:20px;
}
.docgen-group-inputs-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    position: relative;
    border-bottom: 2px solid var(--primary);
    /* padding-bottom: 20px; */
    margin-bottom: 10px;
    /* padding-right: 10px; */
    padding: 10px 0px;
}
.docgen-input-row, .docgen-input-group {
    box-shadow: rgb(51, 72, 51, 0.35) 3px 3px 15px;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--white);
    display:flex;
    /* align-items:center; */
    gap:20px;
    position:relative;
}
.docgen-input-group .docgen-input-row {
    box-shadow:none;border-radius:none;padding:0;
}
.docgen-input-title-section, .docgen-group-title-section {
    width:300px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.docgen-input-group .docgen-input-title-section, .docgen-input-group .docgen-group-title-section, .docgen-input-group .docgen-group-inputs {
    width:100%;
}
.docgen-input-content-section {
    align-items: center;
    width: calc(100% - 320px);
    height: 100%;
    display: flex;
    position:relative;
}
.docgen-group-inputs .docgen-input-title-section {
    width:300px;
}
.docgen-group-inputs .docgen-input-content-section {
    width: calc(100% - 320px);
    display: flex;
    align-items: center;
}
.docgen-input-group .docgen-group-title {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 5px;
}
.docgen-input-title, .docgen-group-title {
    margin: 0;
    /* padding-bottom: 10px; */
    color: var(--primary);
    font-size: 26px;
    font-weight: 700;
    font-family: var(--altFont);
}
.docgen-group-inputs .docgen-input-title {font-size:22px;}
.docgen-input-hint, .docgen-group-hint {
    margin:-10px 0px 0px 0px;font-style:italic;color:var(--darkPrimary);font-size:18px;
}
.docgen-input-field {
    width: 100%;
    border: 0px;
    /* border-bottom: 2px solid var(--primary); */
    font-size: 20px;
    font-family: var(--font);
    color: var(--black);
    padding: 10px;
    /* margin: -10px 0px; */
}
.docgen-input-field:focus {
    outline:none;
    box-shadow:none;
    border-bottom:2px solid var(--accent);
}
/* textarea.docgen-input-field {
    height:100%;
    width:100%;
} */
.docgen-input-content-section .ql-toolbar {
    background-color: var(--primary);
    border: none;
}
.docgen-input-content-section .ql-stroke {
    stroke:var(--white) !important;
}
.docgen-input-content-section .ql-container, .docgen-input-content-section .ql-editor {
    min-height:200px;
    background-color: white;
}
.docgen-repeat-hidden {display: none;}
.docgen-group-repeat-button, .docgen-input-repeat-button {
    position: absolute;
    bottom: -15px;
    right: 50%;
    transform: translate(50%, 0px);
    text-align: center;
    background-color: var(--primary);
    color: var(--white);
    border-radius: 50px;
    font-size: 30px;
    width: 36px;
    cursor:pointer;
    user-select:none;
}
.docgen-group-repeat-remove, .docgen-input-repeat-remove {
    position: absolute;
    top: 50%;
    right: -40px;
    width: 36px;
    text-align: center;
    background-color: var(--red);
    color: var(--white);
    border-radius: 50px;
    font-size: 30px;
    transform: translate(0%, -50%);
    cursor:pointer;
    user-select:none;
}
.docgen-input-checkbox {width:0px;height:0px;}
.docgen-input-checkbox:after {
    content:url('/assets/icons/checkbox.png');
    display:block;
    /* margin-top: -10px; */
}
.docgen-input-checkbox:checked:after {
    content:url('/assets/icons/checkbox-ticked.png');
}
.docgen-input-field.docgen-input-disabled {
    background-color:lightgrey;
}
.docgen-input-field[fieldtype="list"] {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.docgen-input-field[fieldtype="list"] li {
    list-style: none;
    display: flex;
    gap: 35px;
}
.docgen-input-field[fieldtype="list"] li input {
    margin: 0px;
}
.docgen-input-image-preview {
    border: 2px solid var(--secondary);
    position: relative;
    width: 170px;
    height: 120px;
    align-content: center;
    text-align: center;
    cursor:pointer;
}
.docgen-input-image-preview-main {
    width: 150px;
    height: 100px;
    object-fit: contain;
}
.docgen-input-image-preview-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    position:absolute;
    bottom:5;
    right:5;
}
.docgen-vertical-inputs {
    display:block !important;
}
.docgen-prefill-button {
    position: absolute;
    right: -65px;
    background-color: var(--accent);
    padding: 12px;
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
    top: 50%;
    transform: translate(0px, -50%);
    user-select: none;
}
.docgen-prefill-button:hover {
    background-color: var(--accentSecondary);
}
.docgen-input-image-controls {
    display:flex;
    flex-direction:column;
    gap: 10px;
    margin-left: 10px;
}
.docgen-input-image-controls > span {
    background-color: var(--accent);
    display: block;
    width: 165px;
    text-align: center;
    padding: 12px;
    color: var(--white);
    border-radius: 5px;
    cursor:pointer;
    user-select: none;
}
.docgen-input-row-separator {
    border-top: 2px solid var(--lighterGreen);
    padding-top: 20px !important;
}
.docgen-image-delete {
    background-color: var(--red) !important;
}
.docgen-image-fullwidth {
    background-color: var(--lighterGreen) !important;
}
.docgen-image-fullwidth.docgen-fullwidth-enabled {
    background-color: var(--primary) !important;
}
.docgen-image-fullwidth:hover {
    background-color: var(--secondary) !important;
}
#docgen-save-validation {
    margin: 0;
    font-style: italic;
    color: var(--accent);
}
.docgen-nosave {
    opacity: 0.5;
    cursor: default;
}
.docgen-nosave:hover {
    background-color:var(--accent)!important;
}

/* Docgen Section Jumper Modal */
.docgen-section-jumper-modal #docgen-inner-wrapper {
    width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#docgen-section-jumper-inner {
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}
#docgen-section-jumper-inner::-webkit-scrollbar {
    width:0px;
}
#docgen-section-jumper-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.docgen-section-jumper-button {
    width: 470px;
    background-color: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    cursor:pointer;
    user-select:none;
}
.docgen-section-jumper-button:hover {
    background-color: var(--darkPrimary);
}
.docgen-section-jumper-button p {
    margin: 0;
}
.docgen-section-jumper-button p:nth-of-type(1){
    color: var(--lighterGreen);
}
.docgen-section-jumper-button p:nth-of-type(2){
    font-size: 28px;
    font-weight: 600;
}
.docgen-section-jumper-button p:nth-of-type(3){
    color: var(--lighterGreen);
    font-style: italic;
    overflow: hidden;
    max-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#docgen-section-jump-close {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0px);
}

/* Docgen Edit Details Modal */
.docgen-edit-details-modal #docgen-inner-wrapper {
    width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#docgen-edit-details-save {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0px);
}
.docgen-edit-details-modal input, .docgen-edit-details-modal textarea {
    margin:0 !important;
}
/* .docgen-edit-details-modal input:focus, .docgen-edit-details-modal textarea:focus {
    padding:10px 10px 7px 10px;
} */
.docgen-edit-details-modal p {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    /* text-align: center; */
    color: var(--primary);
    padding-bottom: 5px;
}
.docgen-edit-details-modal p:nth-of-type(2){
    margin-top:20px;
}

/* Docgen Previous Documents */
#prevdoc-table {

}
#prevdoc-table-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    background-color: var(--darkPrimary);
    color: var(--white);
    border-radius: 5px;
}
#prevdoc-table-content {
    display:flex;gap:5px;flex-direction: column;
}
.prevdoc-table-row {
    flex-direction: column;
    display: flex;
    
    color: var(--white);
    border-radius: 5px;
    font-size:16px;
}
.prevdoc-table-row-upper {
    display: flex;
    gap: 20px;
    background-color: var(--secondary);
    cursor:pointer;
}
.prevdoc-table-row-upper:hover {
    background-color: var(--darkPrimary) !important;
}
.prevdoc-table-row-lower {
    display:none;
    background-color: var(--secondary);
}
.prevdoc-table-id, .prevdoc-table-h1 {
    width:50px;
    display:block;
}
.prevdoc-table-title, .prevdoc-table-h2 {
    width:calc(100% - 720px);
    display:block;
}
.prevdoc-table-template, .prevdoc-table-h3 {
    width:300px;
    display:block;
}
.prevdoc-table-modified, .prevdoc-table-h4 {
    width:150px;
    display:block;
}
#prevdoc-table-header > span, #prevdoc-table-content .prevdoc-table-row-upper > span, #prevdoc-table-content .prevdoc-table-row-lower > span {
    padding:20px;
}
.prevdoc-active-row .prevdoc-table-row-upper {
    background-color: var(--primary);
    border: 3px solid var(--accent);
    border-bottom: 0px;
}
.prevdoc-active-row .prevdoc-table-row-lower {
    display: flex;
    justify-content: space-between;
    border: 3px solid var(--accent);
    border-top-width: 0px;
    border-radius: 0px 0px 5px 5px;
    gap: 20px;
}
.prevdoc-table-row-actions, .prevdoc-action-stats, .prevdoc-confirm-delete {
    padding:10px 20px;
    align-content: center;
}
.prevdoc-table-row-actions {
    display: flex;
    gap: 10px;
}
.prevdoc-table-row-actions > span, .prevdoc-confirm-delete > span {
    background-color: var(--primary);
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    user-select:none;
}
.prevdoc-table-row-actions > span:hover {
    background-color: var(--darkPrimary);
}
.prevdoc-action-stats {
    font-size:14px;font-style:italic;
}
.prevdoc-table-row-actions > .prevdoc-action-download {
    background-color:var(--accent);
}
.prevdoc-table-row-actions > .prevdoc-action-download:hover {
    background-color:var(--accentSecondary);
}
.prevdoc-table-row-actions > .prevdoc-pinned {
    background-color:var(--accent);
}
.prevdoc-table-row-actions > .prevdoc-pinned:hover {
    background-color:var(--accentSecondary);
}
.prevdoc-table-row-actions > .prevdoc-action-delete, .prevdoc-action-confirm-delete, .prevdoc-table-row-actions > .prevdoc-action-delete:hover, .prevdoc-action-confirm-delete:hover, .prevdoc-action-archive, .prevdoc-action-archive:hover {background-color:var(--red) !important;}
.prevdoc-confirm-delete {display:flex;gap:20px;}
.prevdoc-confirm-delete > p {display:inline-block;margin:0;padding-right:20px;}
#docgen-content-previous {
    border:2px solid var(--lighterGreen);
    border-radius:5px;
    padding:20px;
    margin-top:40px;
}
#docgen-content-previous > p {
    color: var(--darkPrimary);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1;
    margin: -30px auto 0px 15px;
    padding: 0px 20px;
    background-color: var(--white);
    display: inline-block;
}
#prevdoc-table[type='archived'] .prevdoc-action-edit, #prevdoc-table[type='archived'] .prevdoc-action-pin, #prevdoc-table[type='archived'] .prevdoc-action-duplicate {
    display:none;
}
.prevdoc-complete {
    color: var(--lighterGreen);
}