@import "root.css";

@font-face {
    font-family: 'Libre Baskerville';
    src: url('/webfonts/LibreBaskerville-Regular.ttf') format("truetype");
}

@font-face {
    font-family: 'PT Sans', sans-serif;
    src: url('/webfonts/PTSans-Regular.ttf') format("truetype");
}

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

.animate-in {
    -webkit-animation: fadeIn .25s ease-in;
    animation: fadeIn .25s ease-in;
}

.animate-out {
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    opacity: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Roto', sans-serif;
    font-size: 1.7vmin;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* Main Layout */
.container {
    display: grid;
    grid-template-rows: 4vmin auto 3.5vmin; /* Top Menu | Main Content | Footer */
    grid-template-columns: 1fr; /* Full width */
    height: 100vh;
}

/* Top Menu */
.main-header {
    display: flex;
    top: 0;
    width: 100%;
    background: var(--top-menu);
    border-bottom: var(--border-main-header);
    box-shadow: var(--box-shadow-main-header);
    padding: 1vmin 0 1vmin 0;
    justify-content: flex-end;
    align-items: center;
    font-size: 2vmin;
}

/* Sidebar Menu (Hidden by Default) */
.side-menu {
    position: fixed;
    left: -26vmin;
    top: 0;
    width: 26vmin;
    height: 100vh;
    background: var(--side-menu-bg);
    color: var(--left-menu-item-color) !important;
    transition: left 0.3s ease-in-out;
    padding-top: 7.5vmin;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    z-index: 10;
    border-right: none;
}

.side-menu.open {
    left: 0;
    border-right: var(--side-border);
}

.menu-collapsed .side-menu #open-side-menu {
    display: flex !important;
    color: var(--text-color);
    border: 0.1vmin solid var(--text-color);
    fill: var(--text-color);
    left: 26.5vmin;
    padding: 0.9vmin !important;
}

.side-menu h4 {
    background-color: var(--left-menu-header-bg-color);
    padding-top: 0.7vmin;
    padding-bottom: 0.7vmin;
    padding-left: 2.5%;
    display: flex;
    vertical-align: middle;
    align-items: center;
    border-bottom: 0.15vmin solid var(--high-contrast-light-border);
}

.side-menu h4 svg {
    height: 2vmin;
    fill: var(--left-menu-item-color);
    padding-right: 2.5%;
    padding-left: 1%;
}

.menu-collapsed .side-menu {
    /*box-shadow: none;*/
    left: -26vmin;
}

.menu-collapsed #side-logo {
    left: 4vmin;
    background-image: var(--logo-url-closed);
}

/* Shift content left when menu is collapsed */
.menu-collapsed .main-content {
    margin-left: 1.5vmin !important;
}

body.menu-collapsed.iframe-open .main-content {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.menu-collapsed.iframe-open .content-main{
    height: 100% !important;
}

body.menu-collapsed.iframe-open .content-header{
    display: none !important;
}


#menu-border {
    width: 36vmin;
    height: 8vmin;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
            to right,
            var(--bg-color) -3vmin,
            var(--bg-color), transparent);
    opacity: 0;
    transition: opacity 1s;
}

.menu-collapsed #menu-border {
    opacity: 1;
}

.close-btn {
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    background: none;
    border: 0.1vmin solid var(--side-menu-text);
    border-radius: 0.3vmin;
    padding: 0.6vmin;
    color: var(--side-menu-text);
    cursor: pointer;
    fill: var(--side-menu-text);
}



/* Main Content Area */
.main-content {
    grid-template-rows: auto; /* Header + Content */
    grid-template-columns: 26vmin auto; /* Sidebar + Flexible Content */
    padding: 0; /* No padding */
    grid-gap: 0; /* No gap between elements */
    transition: margin-left 0.3s ease-in-out;
}

/* Hide Left Menu */
.main-content.hide-left-menu {
    grid-template-columns: auto;
}

/* Hide Content Header */
.main-content.hide-header {
    grid-template-rows: auto;
}

.side-menu.open ~ .main-content {
    margin-left: 28vmin;
}

.content-header {
    /*background-image: url("../images/dashBoardBG.png");*/
    background-repeat: repeat;
    height: 4vmin;
    text-align: left;
    font-size: 2vmin;
    transition: background 0.3s;
    display: flex;
    /*font-family: 'Libre Baskerville';*/
}

.hidden {
    display: none !important;
}

.content-left-menu {
    background: var(--bg-color);
    border-right: 0.15vmin solid var(--left-menu-border-color);
    border-image: linear-gradient(180deg, var(--left-menu-border-color), var(--bg-color)) 1;
    padding: 1vmin; /* Tight padding */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease-in-out;
}

.content {
    background-image: url("/images/dashBoardBG.png");
    background-repeat: repeat;
    overflow-y: auto; /* Scrollable if content overflows */
    transition: background 0.3s;
    height: calc(100vh - 4vmin);
    padding: 0 2.5% 0 2.5%;
}


.top-content {
    height: 35vh;
    width: 100%;
    display: grid;
    grid-template-columns: 40% 30% 20%;
    font-family: 'PT Sans', sans-serif
}

.licenseHeader div{
    vertical-align: middle;
    padding-left: 2.5%;
    font-size: 2.75vmin;
    padding-bottom: 1%;
    padding-top: 1%;
}

.licenseInfo {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    background-color: var(--bg-color);
    margin: 1vmin 1vmin 1vmin 0;
}

.licenseData {
    width: 100%;
}

.licenseHeader {
    width: 100%;
    display: flex;
    align-items: center;
}

.licenseHeader:hover {
    cursor: pointer;
}

.licenseData table {
    width: 100%;
}

.licenseRow {
    width: 100%;
}

.licenseRow:hover {
    cursor: pointer;
}

.licenseRow td {
    font-size: 1.7vmin;
}

.customerInfo {
    margin-left: 5%;
}

.customerHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8vmin;
}

.editCustomerIcon {

    margin-left: auto;
    fill: var(--text-color);

    /*TESTING WELL FEATURE IS NOT IMPLEMENTED*/
    width: 2.2vmin;
}

.editCustomerIcon:hover {
    cursor: pointer;
}



.customerTitle {
    color:  var(--text-dashboard-header);
    font-size: 1.7vmin;
    vertical-align: top;
}

.customerData {
    font-size: 1.7vmin;
    vertical-align: top;
}

.customerTable {
    width: 100%;
    -webkit-border-horizontal-spacing: 0.75vmin !important;
    -webkit-border-vertical-spacing: 0.5vmin !important;
}

.customerTable tr td {
    padding-bottom: 1vmin;
}

.userContent {
    margin-left: 25%;
}

.contactContent {
    padding-top: 15%;
}

.member {
    font-size: 1.7vmin;
    padding-left: 5%;
    color: var(--text-content-header);
}

.member:hover {
    cursor: pointer;
}

.memberHeader {
    font-size: 1.8vmin;
    color:  var(--text-color);
    display: flex;
    font-weight: bolder;
    font-family: "Segoe UI", Arial, sans-serif;
}

.bottomContent {
    height: 40vh;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    font-family: 'PT Sans', sans-serif;
}

.bottomContent.singleColumn {
    grid-template-columns: 1fr;
}
.payTables {
    margin-top: 0;
    margin-right: 1vmin
}

.payTableInfo {
    background-color: var(--bg-color);
    border: 0.15vmin solid var(--table-border-color);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.tableTabSelectors {
    display: flex;
    grid-template-columns: 15% 15% 40% 30%;
    text-align: center;
    position: relative;
    z-index: 2;
}

.tableTabSelectors span {
    text-align: left;
}

.tableTabSelectors div{
    font-size: 2vmin;
    border-bottom: 0;
    padding: 0 1.7vmin;
    width: fit-content;
    text-align: center;
}


.tableTabSelectors div:hover{
    cursor: pointer;
}

.newTicket {
    padding: 0 !important;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.newTicket span {
    margin-right: 5%;
}

.selectedButton {
    background-color: var(--dashBoard-headers-color);;
    border-bottom: 0.15vmin solid var(--dashBoard-headers-color);;
    margin-bottom: -0.15vmin;
    border-top: 0.15vmin solid var(--table-border-color);
    border-left: 0.15vmin solid var(--table-border-color);
    border-right: 0.15vmin solid var(--table-border-color);
}

.invoiceTable {
    width: 100%;
}

table {
    border-spacing: 0;
}

.invoiceTable tr td {
    border-bottom: 0.15vmin solid var(--dashboard-line-color);
    font-size: 1.7vmin;
    line-height: 4.5vmin;
    vertical-align: middle;
}

.invoiceRow {
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}


/* Overlay wrapper */
.action-overlay,
.section-action-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;               /* center child */
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;        /* avoid blocking clicks unless hovered */
}

.section-action-overlay {
    gap: 1vmin;
}

/* Overlay text */
.action-text {
    font-weight: bold;
    font-size: 1.5vmin;
    color: #000;
    background: #fff;
    padding: 0.6vmin 1.2vmin;
    border-radius: 0.3vmin;
    box-shadow: 0 0.2vmin 0.6vmin rgba(0,0,0,0.15);
    white-space: nowrap;
}

/* Show on hover */
.invoiceRow:hover .action-overlay,
.section-header:hover .section-action-overlay
{
    opacity: 1;
    pointer-events: auto; /* allow clicking the overlay text */
}

/* Optional: style differences for actions */
.action-text.view-invoice,
.action-text.view-election
{
    border: 0.15vmin solid var(--table-border-color);
    color: var(--text-color);
    background-color: var(--bg-color);
}

.action-text.pay-invoice,
.action-text.new-election
{
    border: 0.15vmin solid var(--table-border-color);
    color: var(--text-color);
    background-color: var(--bg-color);
}

.payTableHeader {
    background-color: var(--dashBoard-headers-color);;
}

.payTableHeader th {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    font-size: 1.8vmin;
    text-align: left;
    color: var(--text-dashboard-header);
}

.farLeftHead {
    padding-left: 2.5%;
}

.viewInvoices {
    display : flex;
    justify-content: right;
    margin-top: 1vmin;
    margin-right: 5%;
}

.invoiceAmount {
    margin-top: 0.5vmin;
    margin-bottom: 0.5vmin;
    color: var(--text-color);
}

.supportTableInfo {
    border: 0.15vmin solid var(--table-border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.supportTable {
    margin-left: 1vmin;
    margin-right: 1vmin;
}



.supportTicketHeader {
    vertical-align: middle;
    font-size: 2.75vmin;
    color: var(--text-dashboard-header);
    padding-top: .75%;
    padding-bottom: 1%;
}

.supportTableInfo {
    background-color: var(--bg-color)
}

.invoiceHeader {
    text-align: center;
    font-weight: bold;
    font-size: 5vmin;
    color: var(--text-content-header);
}

.invoiceInfo {
    text-align: left;
    font-size: 2vmin;
    color: var(--text-color);
    display: flex;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 1%;
}

.infoSVG {
    fill: var(--text-color);
    width: 9vmin;
    padding-right: 2vmin;
    vertical-align: middle;
}

.infoText {
    line-height: 4vmin;
}

.halfCenterLine {
    margin-top: 1%;
    padding-bottom: 1%;
    border: none; /* Remove the default border */
    border-top: 0.15vmin solid #999999 !important;
}

.invoiceAnnual, .renewalFee {
    width: 50%;
    display: grid;
    grid-template-columns: 15% 40% 45%;
    font-size: 2vmin;
}
.annualText, .renewalText {
    text-align: left;
}
.annualPrice, .renewalCost {
    text-align: right;
}
.annualTotal {
    display: flex;
    justify-content: right;
    font-size: 2vmin;
    width: 50%;
    text-align: right;
}

.annualButtons {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2% 0 2% 0;
}

.annualButtons :nth-child(odd) {
    justify-self: right;
    margin-right: 2%;
}

.annualButtons :nth-child(even) {
    justify-self: left;
    margin-left: 2%;
}

.annualButton {
    color: var(--text-color);
    background: transparent;
    border: 0.15vmin solid var(--label-color) !important;
    border-radius: 0.3vmin;
    padding: 1% 4%;
    text-align: center;
    width: 22vmin;
    font-size: 2vmin;
    display: flex;
    justify-content: center;
}

.buyBundleButtonWrapper {
    color: white;
    position: absolute;
    bottom: 1vmin;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    text-align: center;
    width: fit-content;
    min-width: 22vmin;
    font-size: 2vmin;
    background-color: var(--button-green);
    border-radius: 0.3vmin;
    padding: 0.6vmin 1.5vmin;
    display: flex;
    align-items: center; /* vertically center SVG + text */
    justify-content: center;
    gap: 0.8vmin; /* space between icon and text */
    transition: transform 0.3s ease;
}

.buyBundleButtonWrapper:hover {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0) 100%
    );
    cursor: pointer;
    transform: scale(1.05) translateX(-50%);
}

.createInvoiceBtnSvg {
    width: 2.2vmin;
    height: 2.2vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.createInvoiceBtnSvg svg {
    fill: white;
    width: 100%;
    height: 100%;
    display: block;
}

.buyBundleAnnual {
    background-color: var(--current-menu-reports) !important;
    color: white; !important;
}

.creatInvoiceAnnual {
    background-color: green !important;
    color: white; !important;
}

.addUserBtn {
    border: 1px solid var(--text-color) !important;
}

.annualButton:hover {
    cursor: pointer;
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0) 100%
    );
    transition: 0.3s ease;
    transform: scale(1.05);
}

.bundleArea {
    display: grid;
    grid-template-columns: 50% 45%;
    gap: 5%;
    height: 0.5vmin;
    margin-top: 2%;
    position: relative;
}

.bundles {
    margin-top: 1%;
    text-align: left;
    font-size: 2vmin;
    height: 60vmin;
}

.bundleInput {
    display: flex;
    align-items: center !important;
    gap: 0.8vmin;
    font-size: 2vmin !important;
    color: var(--text-color) !important;
    margin: 2% 0 2% 0;
}

.bundleInput span {
    font-weight: bold !important;
}

.bundleInput input {
    width: 7vw;
    text-align: right;
    padding-right: 1%;
    background-color: var(--dashBoard-headers-color);
    border-bottom: 0.15vmin solid var(--text-color);
    color: var(--text-color)
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.bundleInfo {
    width: 100%;        /* Or set a specific width */
    max-height: 35vmin;  /* Adjust this value based on your design */
    overflow-y: auto;   /* Enables vertical scrolling */
}


.bundleInfo table {
    border: 0.15vmin solid #999999;
    width: 100%;
}


.bundleInfo table tr th {
    padding-top: 1vmin;
    padding-bottom: 1vmin;
    font-size: 2vmin;
    text-align: left;
    color: white;
    background-color: var(--dark-blue);
}
.bundleInfo table tr td {
    padding: 2%;
    text-align: left;
    font-size: 1.8vmin;
    border-bottom: 0.15vmin solid #999999;
}

.bundleInfo table tr:last-child td {
    border-bottom: none;
}

.bundleTableWrapper {
    height: 20vh;
    border-bottom: 0.15vmin #999999 solid;
    position: relative;
}

.currentBundles {
    width: 100%;
    margin-top: 2%;
}

.bundleEntry {
    display: grid;
    grid-template-columns: 5% 50% 45%;
}

.currentBundles tr td svg{
    width: 2vmin;
}

.tdCheckmark {
    fill: var(--text-color);
    padding-left: 4%;
    width: 2vmin;
}

.tdTotal {
    text-align: right;
}

.tdBundleName {
    text-align: left;
}

.bundleTotalDiv {
    display: flex;
    justify-content: right;
    margin-top: 5%;
}

.bundleTotalTable tr td {
    padding-top: 1%;
    padding-bottom: 1%;
}

#discountAmmt, #bundleSubTotal, #bundleTaxAmount, #bundleTotal {
    padding-left: 1vmin;
    text-align: right;
}

#bundleTotal {
    font-weight: bold;
}

#pop-up {
    overflow: auto;
    transition: height 0.6s ease;
}

/* Content hidden state (initial) */
#bundleSec.hid {
    opacity: 0;
    transform: translateY(2vmin);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

/* Content visible state (fade + slide) */
#bundleSec.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.bundleUpgradeInfo {
    border-left: 0.15vmin solid #999999;
    height: auto;
    padding: 2%;
}

/* Footer */
.footer {
    background: var(--top-menu);
    box-shadow: var(--box-shadow-footer);
    border-top: var(--border-footer);
    color: var(--text-color);
    align-items: center;
    line-height: 5vmin;
    font-size: 1.5vmin;
    /*position: relative;*/
    position: absolute;
    bottom: 0;
    width: 100vmax;
    z-index: 10;
    padding-left: 2vmin;
    transition: background 0.3s;
}

.dropdown {
    position: relative;
    margin-right: 2vmin; /* Space between icons */
    cursor: pointer;
}

.dropdown .bx {
    opacity: 0.75;
}

.bx svg {
    width: 2vmin;
    fill: var(--text-color);
    display: flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-color);
    box-shadow: var(--box-shadow);
    z-index: 3;
    right: 0;
    white-space: nowrap;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content div {
    padding: 0.5vmin 2vmin;
    cursor: pointer;
    font-size: 1.5vmin;
    color: var(--text-color);
}

.dropdown-content div:hover {
    background-color: var(--bg-hover);
}

input {
    border:none;
    outline: none;
}

button {
    cursor: pointer;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    gap: 1vmin;
    padding: 0.5vmin 1vmin;
    border-radius: 0.3vmin;
    font-size: 1.5vmin;
    border: 1px solid black;
}

button:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    box-shadow: var(--box-shadow-2);
}

button:active {
    transform: scale(0.9);
    transition: transform 0.3s;
}


button.plain {
    border: 0;
    color: var(--text-color);
    background-color: transparent;
    box-shadow: none;
}

.topMenuSvg {
    width: 1.15em;
    height: auto;
}

button.next {
    background-color: var(--bg-button-next);
    color: var(--text-color);
    border: var(--button-border);
}

#side-button {
    position: fixed;
    top: -0.2vmin;
    left: 1.5vmin;
    height: 10vmin;
    font-size: 150%;
    cursor: pointer;
    color: var(--side-menu-text);
}

#menu-button {
    font-size: 1em;
    margin-top: 0.5vmin;
}

#content-header {
    font-size: 2.5em;
    display: flex;
    align-items: center;
    color: var(--text-content-header);
    font-weight: bold;
    margin-top: 1vmin;
}

#content-header h1 {
    text-transform: uppercase;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
}

#content-main {
  position: relative;
  height: 100% !important;
}

.login-register {
    height: 100%;
}

.hidden {
    display: none;
}

/* Login Form */

.cont{
    overflow: hidden;
    position: relative;
    width: 90vmin;
    height: calc(90vmin * 9 / 14);
    background: var(--popup-bg);
    box-shadow: var(--box-shadow-login);
    border: var(--border-login);
    border-radius: 0.3vmin;
}

/*noinspection ALL*/
.form{
    position: relative;
    width: 65vmin;
    height: 100%;
    -webkit-transition:-webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

h2{
    width: 100%;
    font-size: 3vmin;
    text-align: center;
}

.img-text{
    z-index: 2;
    position: absolute;
    left: 0;
    top: 7vmin;
    width: 100%;
    padding: 0 1vmin;
    text-align: center;
    color: var(--img-text);
    -webkit-transition:-webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.img-text h2 {
    margin-bottom: 1vmin;
    font-weight: normal;
}

.img-text p {
    font-size: 1.7vmin;
    line-height: 1.5;
}

.img-btn{
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 70%;
    height: 3.5vmin;
    margin: 0 auto;
    background: transparent;
    color: var(--img-text);
    text-transform: uppercase;
    font-size: 1.7vmin;
    cursor: pointer;
}

.img-btn:after{
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0.15vmin solid var(--img-text);
    border-radius: 0.3vmin;
}

/*noinspection ALL*/
.img-btn span{
    color: var(--img-text);
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack:center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-transition:-webkit-transform 1.2s;
    transition: -webkit-transform 1.2s;
    transition: transform 1.2s;
    transition: transform 1.2s, -webkit-transform 1.2s;;
}

.img-btn span.m-in{
    -webkit-transform:translateY(-3.5vmin);
    transform:translateY(-3.5vmin);
}

.cont.s-signup .img-btn span.m-in{
    -webkit-transform:translateY(0);
    transform:translateY(0);
}

.cont.s-signup .img-btn span.m-up{
    -webkit-transform:translateY(3.5vmin);
    transform:translateY(3.5vmin);
}

.sign-up{
    -webkit-transform:translate3d(-90vmin, 0, 0);
    transform:translate3d(-90vmin, 0, 0);
    background: var(--popup-bg);
}

.cont.s-signup .sign-up{
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
}

.sub-cont{
    overflow: hidden;
    position: absolute;
    left: 65vmin;
    top: 0;
    height: 100%;
    padding-left: 25vmin;
    background: var(--popup-bg);
    -webkit-transition: -webkit-transform 1.2s ease-in-out;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out;
}

.cont.s-signup .sub-cont{
    -webkit-transform:translate3d(-65vmin, 0, 0);
    transform:translate3d(-65vmin, 0, 0);
}

.img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 25vmin;
    height: 100%;
    border-inline: var(--border-img-login);
}

.img:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100vmin;
    height: 100%;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    transition: -webkit-transform 1.2s ease-in-out;
    transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
}

.img:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100vmin;
    height: 100%;
    background: var(--login-image-shading);
}

.forgot-pass {
    position: absolute;
    bottom: 1vmin;
    font-size: 1.4vmin;
    text-align: center;
    width: 100%;
    left: 0
}

.img-container {
    position: absolute;  /*Putting the sign up button back*/
    bottom: 5vmin;
    justify-content: center;
    width: 100%;

}

.cont.s-signup .img:before{
    -webkit-transform:translate3d(65vmin, 0, 0);
    transform:translate3d(65vmin, 0, 0);
}


.cont.s-signup .img-text.m-up{
    -webkit-transform:translateX(50vmin);
    transform:translateX(50vmin);
}

.img-text.m-in{
    -webkit-transform:translateX(-50vmin);
    transform:translateX(-50vmin);
}

.cont.s-signup .img-text.m-in{
    -webkit-transform:translateX(0);
    transform:translateX(0);
}

.sign-in{
    padding-top: 8%;
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
    background: var(--popup-bg);
}

.cont.s-signup .sign-in{
    -webkit-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out;
    -webkit-transition-duration:1.2s;
    transition-duration:1.2s;
    -webkit-transform:translate3d(64vmin, 0, 0);
    transform:translate3d(64vmin, 0, 0);
}

.logo-container {
    height: 16vmin;
    background-image: var(--logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 5.5vmin;
}

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

a:hover {
    text-decoration: underline;
}

.text-capital {
    text-transform: capitalize;
}

.text-upper {
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

#errors {
    position: fixed;
    top: -6vmin;
    background: var(--bg-color-error);
    color: var(--text-color-error);
    padding: 1.5vmin 2vmin;
    text-align: center;
    width: 100%;
    transition: top 1s ease-in-out;
    z-index: 9999;
    font-size: 2.5vmin;
}

.show-error-message {
    top: 0 !important;
}

.show-error-text {
    border-bottom: 0.2vmin solid var(--input-color-error) !important;
    color: var(--input-color-error);
}

.color-green {
    background: var(--bg-color-success) !important;
}

.color-red {
    background: var(--bg-color-error)  !important;
}

.color-blue {
    background: var(--input-color-text) !important;
}

input, select {
    background: transparent;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color);
    color: var(--input-color-text);
    font-size: 1.8vmin;
}

/* Autofill fix for Chrome, Safari, Edge */
input:-webkit-autofill,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100vmin transparent inset !important;
    -webkit-text-fill-color: var(--input-color-text) !important;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color);
    background: transparent !important;
}

input:focus {
    border-bottom: 0.3vmin solid var(--input-color-text);
}

label, .label {
    display: block;
    margin-bottom: 2vmin;
    text-transform: uppercase;
    font-family: Bahnschrift, sans-serif;
}

.customerCode {
    text-align: center;
    justify-content: space-between;
    align-items: center;
}

#loginForm {
    /* width: 100%; */
}

.boxShadow2 {
    box-shadow: var(--box-shadow-2);
}

hr {
    border: none; /* Remove the default border */
    border-top: 0.15vmin solid var(--table-border-color);
    margin: 1vmin 0;
}

.toggle-icon {
    cursor: pointer;
    color: var(--hide-icon-color);
}

input:-webkit-autofill {
    background-color: transparent !important;
    box-shadow: 0 0 0 100vmin rgba(255, 255, 255, 0) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
    caret-color: var(--text-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.content-container {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.disabledButton {
    color: var(--text-color-disabled) !important;
    cursor: not-allowed;
}

.disabledButton:hover, .disabledButton:active {
    transform: none !important;
}

.pd20 {
    padding: 2vmin;
}

h1 {
    font-size: 4.5vmin;
    margin-bottom: 2vmin;
    color: var(--link-color);
}

.strike {
    border-bottom: 0.15vmin solid var(--input-border-color);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 4vmin;
    width: 100%;
}

.strike span {
    background-color: var(--popup-bg);
    color: var(--text-color);
    font-size: 2vmin;
    font-weight: 400;
    padding: 0 1vmin 0 1vmin;
    top: 1vmin;
    position: relative;
}

fieldset {
    border: 0;
    padding: 2vmin;
}

.clr {
    clear: both;
}

.pick {
    cursor: pointer;
    transition: 0.2s ease;
}

.pick-default {
    border-bottom: 0;
    transition: 0.2s ease;
    background-color: transparent;
    width: fit-content;
    padding: 0 1vmin 0 1vmin;
    border-radius: 0.3vmin;
    color: var(--label-color);
}

.pick-primary {
    border-bottom: 0.3vmin solid var(--link-color);
    color: var(--link-color);
    font-weight: 600;
    transform: scale(1.1);
    transition: 0.2s ease;
    background-color: transparent;
    width: fit-content;
    padding: 0 1vmin 0 1vmin;
    border-radius: 0.3vmin;
}

.pick:hover {
    border-bottom: 0.3vmin solid var(--pick-hover-color);
}

.toggle-container {
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    gap: 5vmin;
}

label, .label {
    text-align: center;
}

label span, .label span {
    font-size: 1.5vmin;
    color: var(--label-color);
    text-transform: uppercase;
}

.register-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vmin;
    position: relative;
}

#registration {
    width: 100%;
}

#registrationForm {
    display: flex;
    flex-direction: column;
    gap: 3vmin;
    align-items: center;
    overflow: auto;
}

#registrationForm h1 {
    margin-top: 5vmin;
}

.w105 {
    width: 5vmin;
}

.w120 {
    width: 18vmin;
}

.w150 {
    width: 22vmin;
}

.w200 {
    width: 25vmin;
}

.w250{
    width: 28vmin;
}

.w260 {
    width: 30vmin;
}

.w420 {
    width: 50vmin;
}

.w450 {
    width: 55vmin;
}

.w500 {
    width: 60vmin;
}

.mb5 {
    margin-bottom: 0.5vmin;
}

.mb10 {
    margin-bottom: 1vmin;
}

.mb15 {
    margin-bottom: 1.5vmin;
}

.mb20 {
    margin-bottom: 2vmin;
}

.mb25 {
    margin-bottom: 2.5vmin;
}

.mb30 {
    margin-bottom: 3vmin;
}

.mt5 {
    margin-top: 0.5vmin;
}

.mt10 {
    margin-top: 1vmin;
}

.mt15 {
    margin-top: 1.5vmin;
}

.mt20 {
    margin-top: 2vmin;
}

.mt25 {
    margin-top: 2.5vmin;
}

.mt30 {
    margin-top: 3vmin;
}

.mt40 {
    margin-top: 4vmin;
}

.mt50 {
    margin-top: 5vmin;
}

.mt150 {
    margin-top: 15vmin;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.ml20{
    margin-left: 2vmin;
}

.mr20{
    margin-right: 2vmin;
}

.ml10{
    margin-left: 1vmin;
}

.mr10{
    margin-right: 1vmin;
}

.fs9 {
    font-size: 0.9vmin;
}

.fs10 {
    font-size: 1vmin;
}

.fs15 {
    font-size: 1.5vmin;
}

.fs20 {
    font-size: 2vmin;
}

.fs23 {
    font-size: 3vmin;
}

.fs25 {
    font-size: 3.5vmin;
}

.tac {
    text-align: center;
}

.tal {
    text-align: left;
}

.tar {
    text-align: right;
}

.l80 {
    left: 8vmin;
}

.input-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1vmin;
    font-size: 1.3vmin;
    border-radius: 0.3vmin;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    z-index: 10;
}

.register-input input:focus:invalid + .input-tooltip {
    display: block;
    opacity: 1;
}

.register-input input:valid + .input-tooltip {
    display: none;
}

.hny {
    display: none
}

option {
    background-color: var(--bg-color);
    padding: 0.5vmin;
    color: var(--link-color);
    margin-bottom: 0.15vmin;
    font-size: 1.7vmin;
    cursor: pointer;
}

option:hover,  .active{
    background-color: var(--bg-hover);
}

.text-center {
    text-align: center;
}

.no-print {
    @media print {
        display: none;
    }
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 997; /* Just below the .pop-up */
    display: none;
}

iframe {
    border-radius: 0.3vmin;
    border: 0.15vmin solid var(--current-color);
    background-color: var(--bg-color);
}

.invoice-pop-up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 997;
    background-color: var(--bg-color);
}

.iframeDiv {
    width: 75%;
    height: 90%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998;
    background-color: var(--bg-color);
    border-radius: 0.3vmin;
    overflow: hidden; /* optional, if you don't want overflow */
}

.invoice-close,
.modal-962-close
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: sticky;    /* position relative to the parent .pop-up */
    top: 1vmin;            /* distance from the top of the pop-up */
    left: 100%;          /* distance from the right of the pop-up */
    font-size: 1.5vmin;
    color: var(--text-color);
    background-color: var(--bg-color);
    border-radius: 0.3vmin;
    padding: 0.5vmin 1.6vmin;
    cursor: pointer;
    gap: 0.6vmin;
    border: 0.15vmin solid var(--label-color);
    line-height: 1;
    transition: transform 0.2s ease;
    z-index: 1001;          /* above the pop-up content */
}

.scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
}

.invoice-close:hover {
    transform: scale(1.05);
}

.invoiceCloseSvg {
    width: 1.8vmin;
    height: 1.8vmin;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invoiceCloseSvg svg {
    fill: var(--text-color);
    width: 100%;
    height: 100%;
    display: block;
}

.pop-up {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 2vmin;
    border-radius: 0.3vmin;
    box-shadow: 0 0.4vmin 1vmin rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border: 0.15vmin solid var(--current-color);
    display: none;
}

.popup-close {
    all: unset;
    border: black solid 0.15vmin;
    border-radius: 0.3vmin;
    padding: 0.4vmin;
    cursor: pointer;
    font-size: 1.5vmin;
    position: absolute;
    top: 1vmin;
    right: 1vmin;
}

.popup-close i {
    font-size: 1.5vmin;
}

.pop-up h1 {
    color: var(--text-content-header);
}

body.dark-mode .content {
    background-image: url("/images/dashBoardBGb.png");
    background-repeat: repeat;
    color: white;
}

body.dark-mode .content-header {
    /*background-image: url("../images/dashBoardBGb.png");*/
    background-repeat: repeat;
}



/*body.dark-mode .invoiceExtras {*/
/*    background: black;*/
/*}*/


body.high-contrast-light .pop-up {
    background-color: white;
    color: black;
    border: 0.2vmin solid black;
}

body.high-contrast-light .pop-up h1 {
    color: #0e1d36;
}

body.high-contrast-dark .content {
    background: black !important;
}

body.high-contrast-dark .content-header {
    background: black !important;
}

.pd10 {
    padding: 1vmin;
}

.pd15 {
    padding: 1.5vmin;
}

.pd20 {
    padding: 2vmin;
}

.pd30 {
    padding: 3vmin;
}

.pd40 {
    padding: 4vmin;
}

.pd50 {
    padding: 5vmin;
}

.select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color);
    outline: none;
    padding-right: 2.4vmin;
    width: auto;
    min-width: 18vmin;
    background: transparent var(--dropdown-icon) no-repeat right 0.2vmin center;
    background-size: 1vmin;
}

.invoiceOptSvgs svg {
    fill: #04415E;
}

.spinner {
    vertical-align: middle;
    display: inline-block;
    animation: spin 1s linear infinite;
    height: 1.7vmin;
    width: 1.7vmin
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.agreementPopUp {
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    justify-content: center; /* Center vertically if the container has a height */
    align-items: center;     /* Center horizontally */
    color: var(--text-color) !important;
}

.agreementPopUp h1 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.agreementPopUp svg {
    fill: var(--text-color);
    width: 5.5vmin;
}

.agreeBtns {
    display: flex;
    gap: 2vmin;             /* Space between buttons */
    margin-top: 4vmin;
    font-size: 1.7vmin;
}

.agreeBtn {
    padding: 0.5vmin 1vmin;
    cursor: pointer;
    border-radius: 0.3vmin;
    background-color: #007bff;
    color: white;
    user-select: none;
    transition: transform 0.2s ease;
}

.agreeBtn:hover {
    transform: scale(1.2);
}

.agreeBtn.cancel {
    background-color: #ccc;
    color: #000;
}

.side-btn {
    height: 6.5vmin;
}

      /* W3.CSS 4.12 November 2018 by Jan Egil and Borge Refsnes */
*,*:before,*:after{
    /*box-sizing:inherit*/  /*Make registration form scrollable*/
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{
    display:block
}
audio,canvas,progress,video{
    display:inline-block
}
progress{
    vertical-align:baseline
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent;
    -webkit-text-decoration-skip:objects
}
a:active,a:hover{
    outline-width:0
}
abbr[title]{
    border-bottom:none;
    text-decoration:underline dotted
}
dfn{
    font-style:italic
}
mark{
    background:#ff0;
    color:#000
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sub{
    bottom:-0.25em
}
sup{
    top:-0.5em
}
figure{
    margin:1em 2vmin
}
img{
    border-style:none
}
svg:not(:root){
    overflow:hidden
}
code,kbd,pre,samp{
    font-family:monospace,monospace;
    font-size:1em
}
hr{
    box-sizing:content-box;
    height:0;
    overflow:visible
}
button,input,select,textarea{
    margin:0
}
optgroup{
    font-weight:bold
}
button,input{
    overflow:visible
}
button,select{
    text-transform:none
}
button,html [type=button],[type=reset],[type=submit]{
    -webkit-appearance:button
}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{
    border-style:none;
    padding:0
}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{
    outline:0.15vmin dotted ButtonText
}
fieldset{
    margin: 0 0.30vmin;
    padding: 1.5vmin;
}
legend{
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal
}
textarea{
    overflow:auto
}
[type=checkbox],[type=radio]{
    padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-0.3vmin
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-input-placeholder{
    color:inherit;
    opacity:0.54
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}

h1{
    font-size: 3.5vmin;
}
h2{
    font-size:3vmin
}
h3{
    font-size:2.5vmin
}
h4{
    font-size:2vmin
}
h5{
    font-size:1.7vmin
}
h6{
    font-size:1.5vmin
}
.w3-serif{
    font-family:serif
}
h1,h2,h3,h4,h5,h6{
    font-family:"Segoe UI",Arial,sans-serif;
    font-weight:400;
    margin:1vmin 0
}
.w3-wide{
    letter-spacing:0.4vmin
}
.w3-image{
    max-width:100%;
    height:auto
}
img{
    vertical-align:middle
}
a{
    color:inherit
}
.w3-table,.w3-table-all{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    display:table
}
.w3-table-all{
    border:0.15vmin solid #ccc
}
.w3-bordered tr,.w3-table-all tr{
    border-bottom:0.15vmin solid #ddd
}
.w3-striped tbody tr:nth-child(even){
    background-color:#f1f1f1
}
.w3-table-all tr:nth-child(odd){
    background-color:#fff
}
.w3-table-all tr:nth-child(even){
    background-color:#f1f1f1
}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{
    background-color:#ccc
}
.w3-centered tr th,.w3-centered tr td{
    text-align:center
}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{
    padding: 0.5vmin 0.5vmin;
    display:table-cell;
    text-align:left;
    vertical-align:top
}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{
    padding-left: 1vmin
}
.w3-btn,.w3-button{
    border:none;
    display:inline-block;
    padding: 0.3vmin 0.5vmin;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    text-align: left;
    margin-left: 5%;
    cursor:pointer;
    white-space:nowrap;
    font-size: 1.7vmin
}
.w3-btn:hover{
    box-shadow:0 0.7vmin 1.4vmin 0 rgba(0,0,0,0.2),0 0.6vmin 2vmin 0 rgba(0,0,0,0.19);
    text-decoration:none;
}
.w3-btn,.w3-button{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{
    cursor:not-allowed;
    opacity:0.3
}
.w3-disabled *,:disabled *{
    pointer-events:none
}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{
    box-shadow:none
}
.w3-badge,.w3-tag{
    background-color:#000;
    color:#fff;
    display:inline-block;
    padding-left:0.8vmin;
    padding-right:0.8vmin;
    text-align:center
}
.w3-badge{
    border-radius:50%
}
.w3-ul{
    list-style-type:none;
    padding:0;
    margin:0
}
.w3-ul li{
    padding:0.8vmin 1.6vmin;
    border-bottom:0.15vmin solid #ddd
}
.w3-ul li:last-child{
    border-bottom:none
}
.w3-tooltip,.w3-display-container{
    position:relative
}
.w3-tooltip .w3-text{
    display:none
}
.w3-tooltip:hover .w3-text{
    display:inline-block
}
.w3-ripple:active{
    opacity:0.5
}
.w3-ripple{
    transition:opacity 0s
}
.w3-input{
    padding:0.8vmin;
    display:block;
    border:none;
    border-bottom:0.15vmin solid #ccc;
    width:100%
}
.w3-select{
    padding:0.9vmin 0;
    width:100%;
    border:none;
    border-bottom:0.15vmin solid #ccc
}
.w3-dropdown-click,.w3-dropdown-hover{
    position:relative;
    display:inline-block;
    cursor:pointer
}
.w3-dropdown-hover:hover .w3-dropdown-content{
    display:block
}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{
    background-color:#ccc;
    color:#000
}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{
    background-color:#ccc;
    color:#000
}
.w3-dropdown-content{
    cursor:auto;
    color:#000;
    background-color:#fff;
    display:none;
    position:absolute;
    min-width:13vmin;
    margin:0;
    padding:0;
    z-index:1
}
.w3-check,.w3-radio{
    width:2.4vmin;
    height:2.4vmin;
    position:relative;
    top:0.6vmin
}
.w3-sidebar{
    height:100%;
    width:20vmin;
    background-color:#fff;
    position:fixed!important;
    z-index:1;
    overflow:auto
}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{
    width:100%
}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{
    min-width:100%
}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{
    width:100%;
    text-align:left;
    padding:0.5vmin 1vmin
}
.w3-main,#main{
    transition:margin-left .4s
}
.w3-modal{
    z-index:3;
    display:none;
    padding-top:10vmin;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.4)
}
.w3-modal-content{
    margin:auto;
    background-color:#fff;
    position:relative;
    padding:0;
    outline:0;
    width:60vmin
}
.w3-bar{
    width:100%;
    overflow:hidden
}
.w3-center .w3-bar{
    display:inline-block;
    width:auto
}
.w3-bar .w3-bar-item{
    padding:0.8vmin 1.6vmin;
    float:left;
    width:auto;
    border:none;
    display:block;
    outline:0
}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{
    position:static;
    float:left
}
.w3-bar .w3-button{
    white-space:normal
}
.w3-bar-block .w3-bar-item{
    width:100%;
    display:block;
    padding:0.8vmin 1.6vmin;
    text-align:left;
    border:none;
    white-space:normal;
    float:none;
    outline:0
}
.w3-bar-block.w3-center .w3-bar-item{
    text-align:center
}
.w3-block{
    display:block;
    width:100%
}
.w3-responsive{
    display:block;
    overflow-x:auto
}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{
    content:"";
    display:table;
    clear:both
}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{
    float:left;
    width:100%
}
.w3-col.s1{
    width:8.33333%
}
.w3-col.s2{
    width:16.66666%
}
.w3-col.s3{
    width:24.99999%
}
.w3-col.s4{
    width:33.33333%
}
.w3-col.s5{
    width:41.66666%
}
.w3-col.s6{
    width:49.99999%
}
.w3-col.s7{
    width:58.33333%
}
.w3-col.s8{
    width:66.66666%
}
.w3-col.s9{
    width:74.99999%
}
.w3-col.s10{
    width:83.33333%
}
.w3-col.s11{
    width:91.66666%
}
.w3-col.s12{
    width:99.99999%
}
@media (min-width:600.15vmin){
    .w3-col.m1{
        width:8.33333%
    }
    .w3-col.m2{
        width:16.66666%
    }
    .w3-col.m3,.w3-quarter{
        width:24.99999%
    }
    .w3-col.m4,.w3-third{
        width:33.33333%
    }
    .w3-col.m5{
        width:41.66666%
    }
    .w3-col.m6,.w3-half{
        width:49.99999%
    }
    .w3-col.m7{
        width:58.33333%
    }
    .w3-col.m8,.w3-twothird{
        width:66.66666%
    }
    .w3-col.m9,.w3-threequarter{
        width:74.99999%
    }
    .w3-col.m10{
        width:83.33333%
    }
    .w3-col.m11{
        width:91.66666%
    }
    .w3-col.m12{
        width:99.99999%
    }
}
@media (min-width:99.3vmin){
    .w3-col.l1{
        width:8.33333%
    }
    .w3-col.l2{
        width:16.66666%
    }
    .w3-col.l3{
        width:24.99999%
    }
    .w3-col.l4{
        width:33.33333%
    }
    .w3-col.l5{
        width:41.66666%
    }
    .w3-col.l6{
        width:49.99999%
    }
    .w3-col.l7{
        width:58.33333%
    }
    .w3-col.l8{
        width:66.66666%
    }
    .w3-col.l9{
        width:74.99999%
    }
    .w3-col.l10{
        width:83.33333%
    }
    .w3-col.l11{
        width:91.66666%
    }
    .w3-col.l12{
        width:99.99999%
    }
}
.w3-rest{
    overflow:hidden
}
.w3-stretch{
    margin-left:-1.6vmin;
    margin-right:-1.6vmin
}
.w3-content,.w3-auto{
    margin-left:auto;
    margin-right:auto
}
.w3-content{
    max-width:98vmin
}
.w3-auto{
    max-width:114vmin
}
.w3-cell-row{
    display:table;
    width:100%
}
.w3-cell{
    display:table-cell
}
.w3-cell-top{
    vertical-align:top
}
.w3-cell-middle{
    vertical-align:middle
}
.w3-cell-bottom{
    vertical-align:bottom
}
.w3-hide{
    display:none!important
}
.w3-show-block,.w3-show{
    display:block!important
}
.w3-show-inline-block{
    display:inline-block!important
}
@media (max-width:120vmin){
    .w3-auto{
        max-width:95%
    }
}
@media (max-width:60vmin){
    .w3-modal-content{
        margin:0 1vmin;
        width:auto!important
    }
    .w3-modal{
        padding-top:3vmin
    }
    .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{
        position:relative
    }
    .w3-hide-small{
        display:none!important
    }
    .w3-mobile{
        display:block;
        width:100%!important
    }
    .w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{
        text-align:center
    }
    .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{
        width:100%
    }
}
@media (max-width:760.8vmin){
    .w3-modal-content{
        width:50vmin
    }
    .w3-modal{
        padding-top:5vmin
    }
}
@media (min-width:99.3vmin){
    .w3-modal-content{
        width:90vmin
    }
    .w3-hide-large{
        display:none!important
    }
    .w3-sidebar.w3-collapse{
        display:block!important
    }
}
@media (max-width:99.2vmin) and (min-width:600.15vmin){
    .w3-hide-medium{
        display:none!important
    }
}
@media (max-width:99.2vmin){
    .w3-sidebar.w3-collapse{
        display:none
    }
    .w3-main{
        margin-left:0!important;
        margin-right:0!important
    }
    .w3-auto{
        max-width:100%
    }
}
.w3-top,.w3-bottom{
    position:fixed;
    width:100%;
    z-index:1
}
.w3-top{
    top:0
}
.w3-bottom{
    bottom:0
}
.w3-overlay{
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.5);
    z-index:2
}
.w3-display-topleft{
    position:absolute;
    left:0;
    top:0
}
.w3-display-topright{
    position:absolute;
    right:0;
    top:0
}
.w3-display-bottomleft{
    position:absolute;
    left:0;
    bottom:0
}
.w3-display-bottomright{
    position:absolute;
    right:0;
    bottom:0
}
.w3-display-middle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%)
}
.w3-display-left{
    position:absolute;
    top:50%;
    left:0;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%)
}
.w3-display-right{
    position:absolute;
    top:50%;
    right:0;
    transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%)
}
.w3-display-topmiddle{
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%)
}
.w3-display-bottommiddle{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%)
}
.w3-display-container:hover .w3-display-hover{
    display:block
}
.w3-display-container:hover span.w3-display-hover{
    display:inline-block
}
.w3-display-hover{
    display:none
}
.w3-display-position{
    position:absolute
}
.w3-circle{
    border-radius:50%
}
.w3-round-small{
    border-radius:0.2vmin
}
.w3-round,.w3-round-medium{
    border-radius:0.4vmin
}
.w3-round-large{
    border-radius:0.8vmin
}
.w3-round-xlarge{
    border-radius:1.6vmin
}
.w3-round-xxlarge{
    border-radius:3.2vmin
}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{
    padding:0 0.8vmin
}
.w3-container,.w3-panel{
    padding:1.6vmin
}
.w3-panel{
    margin-top:1.6vmin;
    margin-bottom:1.6vmin
}
.w3-code,.w3-codespan{
    font-family: Consolas, "courier new", serif;
    font-size:1.6vmin
}
.w3-code{
    width:auto;
    background-color:#fff;
    padding:0.8vmin 1.2vmin;
    border-left:0.4vmin solid #4CAF50;
    word-wrap:break-word
}
.w3-codespan{
    color:crimson;
    background-color:#f1f1f1;
    padding-left:0.4vmin;
    padding-right:0.4vmin;
    font-size:110%
}
.w3-card,.w3-card-2{
    box-shadow:0 0.2vmin 0.5vmin 0 rgba(0,0,0,0.16),0 0.2vmin 1vmin 0 rgba(0,0,0,0.12)
}
.w3-card-4,.w3-hover-shadow:hover{
    box-shadow:0 0.4vmin 1vmin 0 rgba(0,0,0,0.2),0 0.4vmin 2vmin 0 rgba(0,0,0,0.19)
}
.w3-spin{
    animation:w3-spin 2s infinite linear
}
@keyframes w3-spin{
    0%{
        transform:rotate(0deg)
    }
    100%{
        transform:rotate(359deg)
    }
}
.w3-animate-fading{
    animation:fading 10s infinite
}
@keyframes fading{
    0%{
        opacity:0
    }
    50%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
.w3-animate-opacity{
    animation:opac 0.8s
}
@keyframes opac{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
.w3-animate-top{
    position:relative;
    animation:animatetop 0.4s
}
@keyframes animatetop{
    from{
        top:-30vmin;
        opacity:0
    }
    to{
        top:0;
        opacity:1
    }
}
.w3-animate-left{
    position:relative;
    animation:animateleft 0.4s
}
@keyframes animateleft{
    from{
        left:-30vmin;
        opacity:0
    }
    to{
        left:0;
        opacity:1
    }
}
.w3-animate-right{
    position:relative;
    animation:animateright 0.4s
}
@keyframes animateright{
    from{
        right:-30vmin;
        opacity:0
    }
    to{
        right:0;
        opacity:1
    }
}
.w3-animate-bottom{
    position:relative;
    animation:animatebottom 0.4s
}
@keyframes animatebottom{
    from{
        bottom:-30vmin;
        opacity:0
    }
    to{
        bottom:0;
        opacity:1
    }
}
.w3-animate-zoom {
    animation:animatezoom 0.6s
}
@keyframes animatezoom{
    from{
        transform:scale(0)
    }
    to{
        transform:scale(1)
    }
}
.w3-animate-input{
    transition:width 0.4s ease-in-out
}
.w3-animate-input:focus{
    width:100%!important
}
.w3-opacity,.w3-hover-opacity:hover{
    opacity:0.60
}
.w3-opacity-off,.w3-hover-opacity-off:hover{
    opacity:1
}
.w3-opacity-max{
    opacity:0.25
}
.w3-opacity-min{
    opacity:0.75
}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{
    filter:grayscale(100%)
}
.w3-greyscale,.w3-grayscale{
    filter:grayscale(75%)
}
.w3-greyscale-min,.w3-grayscale-min{
    filter:grayscale(50%)
}
.w3-sepia{
    filter:sepia(75%)
}
.w3-sepia-max,.w3-hover-sepia:hover{
    filter:sepia(100%)
}
.w3-sepia-min{
    filter:sepia(50%)
}
.w3-tiny{
    font-size:1vmin!important
}
.w3-small{
    font-size:1.2vmin!important
}
.w3-medium{
    font-size:1.5vmin!important
}
.w3-large{
    font-size:10.8vmin!important
}
.w3-xlarge{
    font-size:2.4vmin!important
}
.w3-xxlarge{
    font-size:3.6vmin!important
}
.w3-xxxlarge{
    font-size:4.8vmin!important
}
.w3-jumbo{
    font-size:6.4vmin!important
}
.w3-left-align{
    text-align:left!important
}
.w3-right-align{
    text-align:right!important
}
.w3-justify{
    text-align:justify!important
}
.w3-center{
    text-align:center!important
}
.w3-border-0{
    border:0!important
}
.w3-border{
    border:0.15vmin solid #ccc!important
}
.w3-border-top{
    border-top:0.15vmin solid #ccc!important
}
.w3-border-bottom{
    border-bottom:0.15vmin solid #ccc!important
}
.w3-border-left{
    border-left:0.15vmin solid #ccc!important
}
.w3-border-right{
    border-right:0.15vmin solid #ccc!important
}
.w3-topbar{
    border-top:0.6vmin solid #ccc!important
}
.w3-bottombar{
    border-bottom:0.6vmin solid #ccc!important
}
.w3-leftbar{
    border-left:0.6vmin solid #ccc!important
}
.w3-rightbar{
    border-right:0.6vmin solid #ccc!important
}
.w3-section,.w3-code{
    margin-top:1.6vmin!important;
    margin-bottom:1.6vmin!important
}
.w3-margin{
    margin:1.6vmin!important
}
.w3-margin-top{
    margin-top:1.6vmin!important
}
.w3-margin-bottom{
    margin-bottom:1.6vmin!important
}
.w3-margin-left{
    margin-left:1.6vmin!important
}
.w3-margin-right{
    margin-right:1.6vmin!important
}
.w3-padding-small{
    padding:0.4vmin 0.8vmin!important
}
.w3-padding{
    padding:0.8vmin 1.6vmin!important
}
.w3-padding-large{
    padding:1.2vmin 2.4vmin!important
}
.w3-padding-16{
    padding-top:1.6vmin!important;
    padding-bottom:1.6vmin!important
}
.w3-padding-24{
    padding-top:2.4vmin!important;
    padding-bottom:2.4vmin!important
}
.w3-padding-32{
    padding-top:3.2vmin!important;
    padding-bottom:3.2vmin!important
}
.w3-padding-48{
    padding-top:40.8vmin!important;
    padding-bottom:40.8vmin!important
}
.w3-padding-64{
    padding-top:6.4vmin!important;
    padding-bottom:6.4vmin!important
}
.w3-left{
    float:left!important
}
.w3-right{
    float:right!important
}
.w3-button:hover{
    color: var(--current-left-menu-color-hover) !important;
    background-color: var(--current-left-menu-background-color-hover) !important
}
.w3-transparent,.w3-hover-none:hover{
    background-color:transparent!important
}
.w3-hover-none:hover{
    box-shadow:none!important
}
/* Colors */
.w3-amber,.w3-hover-amber:hover{
    color:#000!important;
    background-color:#ffc107!important
}
.w3-aqua,.w3-hover-aqua:hover{
    color:#000!important;
    background-color:#00ffff!important
}
.w3-blue,.w3-hover-blue:hover{
    color:#fff!important;
    background-color:#2196F3!important
}
.w3-light-blue,.w3-hover-light-blue:hover{
    color:#000!important;
    background-color:#87CEEB!important
}
.w3-brown,.w3-hover-brown:hover{
    color:#fff!important;
    background-color:#795548!important
}
.w3-cyan,.w3-hover-cyan:hover{
    color:#000!important;
    background-color:#00bcd4!important
}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{
    color:#fff!important;
    background-color:#607d8b!important
}
.w3-green,.w3-hover-green:hover{
    color:#fff!important;
    background-color:#4CAF50!important
}
.w3-light-green,.w3-hover-light-green:hover{
    color:#000!important;
    background-color:#8bc34a!important
}
.w3-indigo,.w3-hover-indigo:hover{
    color:#fff!important;
    background-color:#3f51b5!important
}
.w3-khaki,.w3-hover-khaki:hover{
    color:#000!important;
    background-color:#f0e68c!important
}
.w3-lime,.w3-hover-lime:hover{
    color:#000!important;
    background-color:#cddc39!important
}
.w3-orange,.w3-hover-orange:hover{
    color:#000!important;
    background-color:#ff9800!important
}
.w3-deep-orange,.w3-hover-deep-orange:hover{
    color:#fff!important;
    background-color:#ff5722!important
}
.w3-pink,.w3-hover-pink:hover{
    color:#fff!important;
    background-color:#e91e63!important
}
.w3-purple,.w3-hover-purple:hover{
    color:#fff!important;
    background-color:#9c27b0!important
}
.w3-deep-purple,.w3-hover-deep-purple:hover{
    color:#fff!important;
    background-color:#673ab7!important
}
.w3-red,.w3-hover-red:hover{
    color:#fff!important;
    background-color:#f44336!important
}
.w3-sand,.w3-hover-sand:hover{
    color:#000!important;
    background-color:#fdf5e6!important
}
.w3-teal,.w3-hover-teal:hover{
    color:#fff!important;
    background-color:#009688!important
}
.w3-yellow,.w3-hover-yellow:hover{
    color:#000!important;
    background-color:#ffeb3b!important
}
.w3-white,.w3-hover-white:hover{
    color:#000!important;
    background-color:#fff!important
}
.w3-black,.w3-hover-black:hover{
    color:#fff!important;
    background-color:#000!important
}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{
    color:#000!important;
    background-color:#9e9e9e!important
}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{
    color:#000!important;
    background-color:#f1f1f1!important
}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{
    color:#fff!important;
    background-color:#616161!important
}
.w3-pale-red,.w3-hover-pale-red:hover{
    color:#000!important;
    background-color:#ffdddd!important
}
.w3-pale-green,.w3-hover-pale-green:hover{
    color:#000!important;
    background-color:#ddffdd!important
}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{
    color:#000!important;
    background-color:#ffffcc!important
}
.w3-pale-blue,.w3-hover-pale-blue:hover{
    color:#000!important;
    background-color:#ddffff!important
}
.w3-text-amber,.w3-hover-text-amber:hover{
    color:#ffc107!important
}
.w3-text-aqua,.w3-hover-text-aqua:hover{
    color:#00ffff!important
}
.w3-text-blue,.w3-hover-text-blue:hover{
    color:#2196F3!important
}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{
    color:#87CEEB!important
}
.w3-text-brown,.w3-hover-text-brown:hover{
    color:#795548!important
}
.w3-text-cyan,.w3-hover-text-cyan:hover{
    color:#00bcd4!important
}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{
    color:#607d8b!important
}
.w3-text-green,.w3-hover-text-green:hover{
    color:#4CAF50!important
}
.w3-text-light-green,.w3-hover-text-light-green:hover{
    color:#8bc34a!important
}
.w3-text-indigo,.w3-hover-text-indigo:hover{
    color:#3f51b5!important
}
.w3-text-khaki,.w3-hover-text-khaki:hover{
    color:#b4aa50!important
}
.w3-text-lime,.w3-hover-text-lime:hover{
    color:#cddc39!important
}
.w3-text-orange,.w3-hover-text-orange:hover{
    color:#ff9800!important
}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{
    color:#ff5722!important
}
.w3-text-pink,.w3-hover-text-pink:hover{
    color:#e91e63!important
}
.w3-text-purple,.w3-hover-text-purple:hover{
    color:#9c27b0!important
}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{
    color:#673ab7!important
}
.w3-text-red,.w3-hover-text-red:hover{
    color:#f44336!important
}
.w3-text-sand,.w3-hover-text-sand:hover{
    color:#fdf5e6!important
}
.w3-text-teal,.w3-hover-text-teal:hover{
    color:#009688!important
}
.w3-text-yellow,.w3-hover-text-yellow:hover{
    color:#d2be0e!important
}
.w3-text-white,.w3-hover-text-white:hover{
    color:#fff!important
}
.w3-text-black,.w3-hover-text-black:hover{
    color:#000!important
}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{
    color:#757575!important
}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{
    color:#f1f1f1!important
}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{
    color:#3a3a3a!important
}
.w3-border-amber,.w3-hover-border-amber:hover{
    border-color:#ffc107!important
}
.w3-border-aqua,.w3-hover-border-aqua:hover{
    border-color:#00ffff!important
}
.w3-border-blue,.w3-hover-border-blue:hover{
    border-color:#2196F3!important
}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{
    border-color:#87CEEB!important
}
.w3-border-brown,.w3-hover-border-brown:hover{
    border-color:#795548!important
}
.w3-border-cyan,.w3-hover-border-cyan:hover{
    border-color:#00bcd4!important
}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{
    border-color:#607d8b!important
}
.w3-border-green,.w3-hover-border-green:hover{
    border-color:#4CAF50!important
}
.w3-border-light-green,.w3-hover-border-light-green:hover{
    border-color:#8bc34a!important
}
.w3-border-indigo,.w3-hover-border-indigo:hover{
    border-color:#3f51b5!important
}
.w3-border-khaki,.w3-hover-border-khaki:hover{
    border-color:#f0e68c!important
}
.w3-border-lime,.w3-hover-border-lime:hover{
    border-color:#cddc39!important
}
.w3-border-orange,.w3-hover-border-orange:hover{
    border-color:#ff9800!important
}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{
    border-color:#ff5722!important
}
.w3-border-pink,.w3-hover-border-pink:hover{
    border-color:#e91e63!important
}
.w3-border-purple,.w3-hover-border-purple:hover{
    border-color:#9c27b0!important
}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{
    border-color:#673ab7!important
}
.w3-border-red,.w3-hover-border-red:hover{
    border-color:#f44336!important
}
.w3-border-sand,.w3-hover-border-sand:hover{
    border-color:#fdf5e6!important
}
.w3-border-teal,.w3-hover-border-teal:hover{
    border-color:#009688!important
}
.w3-border-yellow,.w3-hover-border-yellow:hover{
    border-color:#ffeb3b!important
}
.w3-border-white,.w3-hover-border-white:hover{
    border-color:#fff!important
}
.w3-border-black,.w3-hover-border-black:hover{
    border-color:#000!important
}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{
    border-color:#9e9e9e!important
}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{
    border-color:#f1f1f1!important
}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{
    border-color:#616161!important
}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{
    border-color:#ffe7e7!important
}
.w3-border-pale-green,.w3-hover-border-pale-green:hover{
    border-color:#e7ffe7!important
}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{
    border-color:#ffffcc!important
}
.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{
    border-color:#e7ffff!important
}
#ticket_category{
    border-bottom: none;
    text-align-last: right;
    font-weight: 400;
    font-family: 'PT Sans', sans-serif;
}

#main-content{
    padding: 2.35vmin;
    overflow-y: auto;
    height: 88vmin;
    align-items: center;
    justify-content: center;
    display: grid;
}

#main-content .login-register {
    align-content: center;
}

#ticketsTable tr td{
    font-size: 1.7vmin;
    line-height: 4.5vmin;
}
#ticketTableHeader th{
    width: auto;
    font-size: 1.8vmin;
}
.ticket-btn-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vmin;
}
#supportTable h4,
#payTables h4,
#ticket_category,
#licenseHeader h4,
h4
{
    font-size: 1.8vmin;
    font-weight: bold;
}

#ticket-status-total{
    font-size: 1.5vmin;
}

#fullTicketsTable{
    width: 100% !important;
}
#fullTicketsTable_info,
#fullTicketsTable_paginate,
#auditLogsTable_info,
#auditLogsTable_paginate,
#usersTable_info,
#usersTable_paginate
{
    position: fixed;
    bottom: 6vmin
}

#fullTicketsTable_paginate,
#auditLogsTable_paginate,
#usersTable_paginate
{
    right: 0;
}

#fullTicketsTable td,
#fullTicketsTable th,
#auditLogsTable td,
#auditLogsTable th
{
    border-bottom: 0.15vmin solid var(--dashboard-line-color);
}

.status-submitted { color: var(--submitted); }
.status-draft { color: var(--draft); }
.status-closed { color: var(--closed); }
.status-payment-required { color: var(--information-needed) }
.status-in-progress { color: var(--in-progress); }
.status-information-needed { color: var(--information-needed); }
.status-on-hold { color: var(--on-hold); }

select {
    background-color: var(--bg-color);
    color: var(--link-color);
    cursor: pointer;
    font-size: 1.7vmin;
}

select option {
    background-color: var(--bg-color);
    color: var(--link-color);
    font-size: 1.7vmin;
}

#side-logo {
    width: 14vmin;
    height: 7vmin;
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 1vmin;
    left: 4vmin;
    transition: left 0.3s ease-in-out;
}

#invoiceBtn h4{
    position: relative;
    right: 0.5vmin;
}

.ticket-status-total{
    margin: 0; font-size: 1.5vmin
}

.licenseData {
    border: 0.15vmin solid var(--table-border-color);
}

.licenseData table tr td{
    border-bottom: 0.15vmin solid var(--dashboard-line-color);
    font-size: 1.4vmin;
    line-height: 4.5vmin;
    vertical-align: middle;
}

#emptyRow td{
    border: 0.15vmin solid transparent;
}

.highlight-new {
    background-color: var(--new-ticket-bg);/* soft green */
    font-weight: var(--new-ticket-font-weight);
}

#registration select{
    color: var(--input-color-text) !important;
}

/* Autofill fix for Chrome, Safari, Edge */
input:-webkit-autofill,
select:-webkit-autofill
{
    -webkit-text-fill-color: var(--input-color-text) !important;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color);
    background-color: transparent !important;
    /* force away browser's autofill background */
    transition: background-color 5000s ease-in-out 0s;
}

#password {
    display: inline;
    width: 26vmin;
}

#passwordMatch{
    position: relative;
    top: 1vmin;
    font-size: 1.5vmin;
    color: var(--password-strength-weak);
}

#passwordRequirements {
    list-style: none;
    padding: 0;
    font-size: 1.5vmin;
    margin-left: 1.3vmin;
}

#strengthContainer {
    width: 26vmin;
    height: 0.5vmin;
    background: var(--label-color);
    border-radius: 0 0 0.5vmin 0.5vmin;
    margin-top: 0;
}

#strengthBar {
    height: 100%;
    width: 0;
    border-radius: 0 0 0.5vmin 0.5vmin;
    transition: width 0.3s;
}

#passwordIcon, #confirmPasswordIcon {
    font-size: 1.2vmin;
}

#confirmPassword {
    display: inline;
    width: 26vmin;
}

#dataTable-add-ticket{
    position: fixed;
    bottom: 6vmin;
    left: 55%;
    transform: translateX(-50%);
}

.action-cell {
  width: 0;
}

.dataTables_length{
    display: none;
}

.capitalized-input{
    text-transform: capitalize;
}

.uppercase-input{
    text-transform: uppercase;
}

#verify-btn-container{
    display: flex; !important;
    justify-content: center; !important;
    margin-bottom:3vmin !important;
    margin-top: 1.6vmin;!important;
    gap: 20.15vmin;!important;
    align-items: center;!important;
}

.mb10 {
    margin-bottom: 1vmin;
}

.mb20 {
    margin-bottom: 2vmin;
}

.hidden{
    display: none;
}

input[type="checkbox"] {
    width: 2vmin;
    height: 2vmin;
    appearance: none; /* Remove default styling */
    border: 0.15vmin solid var(--text-color);
    border-radius: 0.15vmin;
    cursor: pointer;
    position: relative;
    top: 0.3vmin;
}

input[type="checkbox"]:checked {
    background-color: var(--bg-color);
}

input[type="checkbox"]:checked.login {
    background-color: var(--popup-bg);
}

.custom-legend {
    display: flex;
    justify-content: space-between; /* Distribute space between the two elements */
    align-items: center; /* Align items vertically in the middle */
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.separator {
    width: 75%;
    border-top: 1px solid black;
}

.not-applicable-container {
    display: flex;
    align-items: center;
}

.not-applicable-container label {
    margin-bottom: 0 !important;
    text-transform: capitalize;
}

.textarea-wrapper {
    position:relative;
    width:100%;
    height: 10vmin;
}

.investmentNoteTxt {
    width:100% !important;
    height:50px !important;
    padding-right:40%;
}


.printCheckBox {
    margin-right: .5vmin;
}

input[type="checkbox"]:checked::after {
    content: "✓";
    color: var(--input-color-text);
    font-size: 2.6vmin;
    position: absolute;
    left: 0.1vmin;
    top: -1.3vmin;
    font-weight: bolder;
}

button.inactive {
    cursor: default;
    transform: unset;
}

.invoiceBtn {
    padding-left: 2vmin!important;
}

.QRContainer {
    display: inline-table;
    width: 26vmin;
    float: right;
}

.QRCode {
    margin: 2vmin;
    width: 22vmin;
    float: right;
    margin-bottom: 0.5vmin
}

.secretCode, #recoveryCode {
    font-size: 2.1vmin;
    font-weight: bolder;
}

#registration input, select {
    text-align: center;
}

#passwordFrom #strengthContainer {
    margin-left: 1.3vmin;
}

.form-wrapper {
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.user-settings-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 1.75vmin;

    justify-content: center; /* vertical center */
    align-items: center;     /* horizontal center */
}

/* Main body of the form (top section), 60/40 layout */
.form-body {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 3vmin 6vmin;
    width: 100%;
    max-width: 90%;
    height: auto;
}

/* Remove unused flex styles that were breaking layout */
.form-left,
.form-right {
    display: flex;
    flex-direction: column;
}


.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: .5vmin;
}

/* Label styling */
.form-label {
    font-weight: 600;
    margin-bottom: 1vmin;
    margin-top: 2vmin;
}

.form-input {
    width: 100%;
    padding: 0.5vmin 0.5vmin;
    font-size: 2vmin;
}

.user-type-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-type-group .form-label {
    text-align: center;
    width: 100%;
}

#user_type {
    width: 50% !important;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color) !important;
    font-size: 2vmin !important;
    background-color: transparent !important;
    color: var(--input-color-text) !important;
}

#user_type option {
    font-size: 1.7vmin !important;
    padding: 0.5vmin 0.5vmin !important;
    background-color: var(--bg-color) !important;
    color: var(--link-color) !important;
}

#user_type option:hover {
    background-color: var(--input-border-color) !important;
    cursor: pointer;
}

/* Checkboxes nicely aligned */
.checkbox-group .checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 2vmin;
}

.checkbox-group .checkbox-input {
    margin-right: 0.25vmin;
    margin-bottom: 1vmin;
}

.checkbox-label span {
    margin-left: 1.5vmin;
    cursor: pointer;
}

/* Footer below form body */
.form-footer {
    margin-top: 3vmin;
    display: flex;
    justify-content: center;
    gap: .5vmin;
}

/* Submit button container aligned to center */
.form-submit {
    margin-top: 1vmin;
    text-align: center;
}

.phone-ext-wrapper {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.phone-container {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers label over input */
}

.ext-container {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers label over input */
}

.phone-input,
.ext-input {
    width: 100%;
}

.street-group {
    grid-column: 1 / -1; /* Span from first to last column */
    width: 100%;
}

.custom-form-body {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1.5vmin 6vmin;
    width: 100%;
    max-width: 90%;
}

.custom-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5vmin;
}

.custom-form-label {
    font-weight: 600;
    margin-bottom: 1vmin;
    margin-top: 2vmin;
}

.custom-form-input {
    width: 100%;
    padding: 0.5vmin;
    font-size: 2vmin;
}

.custom-street-group {
    grid-column: 1 / -1;
    width: 100%;
}

.custom-form-submit {
    margin-top: 3vmin;
    text-align: center;
}

.custom-form-submit button {
    border: none;
    white-space: nowrap;
    padding: 0.75vmin 2vmin;
    font-size: 1.75vmin;
    max-width: fit-content;
    display: inline-block;
}

.phone-ext-wrapper {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.phone-container {
    flex: 0 0 75%;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers label over input */
}

.ext-container {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers label over input */
}

.phone-input,
.ext-input {
    width: 100%;
}

.street-group {
    grid-column: 1 / -1; /* Span from first to last column */
    width: 100%;
}

.custom-form-body {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 1.5vmin 6vmin;
    width: 100%;
    max-width: 90%;
}

.custom-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5vmin;
}

.custom-form-label {
    font-weight: 600;
    margin-bottom: 1vmin;
    margin-top: 2vmin;
}

.custom-form-input {
    width: 100%;
    padding: 0.5vmin;
    font-size: 2vmin;
    text-align: center;
}

.custom-street-group {
    grid-column: 1 / -1;
    width: 100%;
}



.custom-form-submit {
    margin-top: 3vmin;
    text-align: center;
}

.custom-form-submit button {
    border: none;
    white-space: nowrap;
    padding: 0.75vmin 2vmin;
    font-size: 1.75vmin;
    max-width: fit-content;
    display: inline-block;
}

.custom-phone-group {
    grid-column: 1 / -1; /* Span full width of the grid */
    display: flex;
    justify-content: center; /* Center the inner wrapper */
    align-items: center;
    align-content: center;
}

.custom-phone-ext-wrapper {
    display: flex;
    gap: 1.5vmin;
    justify-content: center;
    width: 50%; /* Controls total width of the phone+ext section */
    align-items: center;
    align-content: center;
}

.custom-phone-container {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
}

.custom-ext-container {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
}
/* Apply to the Licensee Name group */
.custom-licensee-group {
    grid-column: 1 / -1; /* Span full width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the contents horizontally */
}
.custom-licensee-group .custom-form-input {
    max-width: 40%; /* Limit width so it's not too wide */
}

/* Make table rows a bit taller */
#usersTable tbody tr {
    height: 4.5vmin;
}

/* Increase padding inside cells */
#usersTable td {
    padding: 1.2vmin 1vmin;
    font-size: 1.8vmin;
}

#usersTable thead th {
    padding: 1.2vmin 1vmin;
    font-size: 1.85vmin;
}

#agreementsTable_wrapper .dataTables_filter label,
#archivesTable_wrapper .dataTables_filter label,
#auditLogsTable_wrapper .dataTables_filter label,
#usersTable_wrapper .dataTables_filter label {
    text-align: right !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5vmin;
    font-size: 1.75vmin;
}

/* Optional: Space between table and title */
#usersTable_wrapper {
    margin-top: 2vmin;
}

.toggle-label {
    text-align: left !important;
}

#editUserForm .form-body, #addUserForm .form-body {
    grid-template-columns: 42% 52%;
}

.permissions-table {
    border-collapse: collapse;
    color: var(--text-color);
}

.permissions-table th,
.permissions-table td {
    padding: .5vmin .5vmin;
    text-align: center;
    border: 1px solid var(--table-highlight-color);
    font-size: 1.35vmin;
}

.permissions-table th {
    background-color: var(--current-background);
    font-weight: bold;
}




/* Checkmark cells */
.permissions-table td.check {
    background-color: var(--light-table-green); /* light green background */
    color: var(--button-green); /* darker green checkmark */
    font-weight: bold;
}

/* Cross cells */
.permissions-table td.cross {
    background-color: var( --light-table-red); /* light red background */
    color: var(--red); /* darker red cross */
    font-weight: bold;
}

/* Add vertical spacing and bottom border to each row */
/* Ensure table borders are not collapsed */
#invoicesTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Add light grey line under each table row */
#invoicesTable tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Add vertical padding to each cell */
#invoicesTable tbody td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Style the header for spacing and visual separation */
#invoicesTable thead th {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #d0d0d0 !important;
    background-color: #fafafa;
}


/* Ensure spacing between rows */
#paymentsTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Add padding and border below each row */
#paymentsTable tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Vertical padding in each cell */
#paymentsTable tbody td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Header padding and underline */
#paymentsTable thead th {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #d0d0d0 !important;
    background-color: #fafafa;
    font-weight: 600;
    text-align: left;
}

/* Optional: Hover effect */
#paymentsTable tbody tr:hover {
    background-color: #f9f9f9;
}
.audit-settings-container {
    width: 70vmin;
    margin: 2vmin 0;
    padding: 2vmin;
    background: #f9f9f9;
    border: 0.2vmin solid var(--dashboard-line-color);
    font-family: Arial, sans-serif;
    text-align: left;
}

.audit-settings-container h3 {
    margin-bottom: 2vmin;
    color: #222;
    font-size: 2vmin;
    font-weight: bold;
}

.audit-master-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 2vmin;
    gap: 1vmin;
}

.audit-master-label {
    font-size: 1.6vmin;
    color: #222;
    font-weight: bold;
}

.audit-individual-logs-label {
    font-size: 1.5vmin;
    margin-bottom: 1vmin;
    color: #333;
}

.audit-log-list {
    display: flex;
    gap: 2vmin;
    flex-wrap: wrap;
}

.audit-log-column {
    flex: 1 1 0; /* auto-grow if only one column */
    display: flex;
    flex-direction: column;
    gap: 0.8vmin;
}

.audit-log-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border: 0.1vmin solid #ccc;
    border-radius: 0.5vmin;
    padding:2vmin 0.8vmin;
}

.audit-log-message {
    vertical-align: center;
    margin-left: 1.2vmin;
    font-size: 1.3vmin;
    color: #333;
    flex: 1;
}

.audit-switch {
    position: relative;
    display: inline-block;
    width: 4.5vmin;
    height: 2.3vmin;
    margin-bottom: 0;
}

.audit-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.audit-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 2.3vmin;
}

.audit-switch-slider:before {
    position: absolute;
    content: "";
    height: 1.8vmin;
    width: 1.8vmin;
    left: 0.25vmin;
    bottom: 0.25vmin;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.audit-switch input:checked + .audit-switch-slider {
    background-color: #4259be;
}

.audit-switch input:checked + .audit-switch-slider:before {
    transform: translateX(2.2vmin);
}

.audit-save-btn {
    display: inline-block;
    padding: 1vmin 2vmin;
    background: #4259be;
    color: white;
    border: none;
    border-radius: 0.5vmin;
    cursor: pointer;
    font-size: 1.5vmin;
    margin-top: 1.5vmin;
}

.audit-save-btn:hover {
    background: #0056b3;
}

.button-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin: 0 auto;
}

.settings-container {
    display: grid;
    grid-template-columns: 50% 49%;
    margin-top: 2vmin;
}

/* Session timeout section */
.session-settings-container {
    background: #f9f9f9;
    border: 0.2vmin solid var(--dashboard-line-color);
    padding: 2vmin;
    max-width: 70vmin;
    font-family: Arial, sans-serif;
    text-align: left;
}

.tax-forms-settings-container {
    border: 0.2vmin solid var(--dashboard-line-color);
    padding: 2vmin;
    margin: 2vmin 0;
    max-width: 70vmin;
    font-family: Arial, sans-serif;
    text-align: left;
}

.tax-forms-settings-container h3 {
    font-size: 2vmin;
    font-weight: bold;
    color: #222;
    margin-bottom: 1.5vmin;
}

.session-settings-container h3 {
    font-size: 2vmin;
    font-weight: bold;
    color: #222;
    margin-bottom: 1.5vmin;
}

/* Label + dropdown in one row */
.session-timeout-row {
    display: flex;
    align-items: center;
    gap: 1vmin;
    margin: 2vmin 0;
}

.session-label {
    font-size: 1.4vmin;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    margin-bottom: 0 !important;
    display: flex;
    vertical-align: middle;
}

.session-select {
    font-size: 1.4vmin;
    padding: 0.4vmin 1vmin;
    border-radius: 0.5vmin;
    border: 0.1vmin solid #ccc;
    width: auto;
}


/* 1️⃣ Position the container relatively so the tooltip can be placed absolutely */
.infoIcon {
    position: relative;
    display: inline-block;          /* shrink‑wrap the SVG */
    cursor: help;
    width: 2vmin;/* optional – indicates “more info” */
}

/* 2️⃣ The tooltip box – hidden by default */
.infoIcon::after {
    content: attr(data-tooltip);    /* pull the text from the attribute */
    position: absolute;
    left: 50%;
    bottom: 125%;                  /* sit above the icon */
    transform: translateX(-50%);
    background: #333;               /* dark background */
    color: #fff;                    /* white text */
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 0.85rem;
    opacity: 0;                     /* invisible */
    pointer-events: none;           /* ignore mouse */
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
}

/* 3️⃣ Small “arrow” underneath the tooltip */
.infoIcon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 115%;                 /* just under the tooltip */
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* 4️⃣ Show the tooltip on hover (or focus for accessibility) */
.infoIcon:hover::after,
.infoIcon:focus::after,
.infoIcon:hover::before,
.infoIcon:focus::before {
    opacity: 1;
}

/* Left-aligned save button */
.settings-save-wrapper {
    margin-top: 2vmin;
    text-align: left;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Highlight style for active menu button */
.w3-bar-item.w3-button.active {
    color: var(--text-content-header);
    font-weight: bold;
}

.open-ticket{
    color: var(--open-ticket-color) !important;
    border-color: var(--open-ticket-border-color) !important;
}

.edit-ticket{
    color: var(--edit-ticket-color) !important;
    border-color: var(--edit-ticket-border-color) !important;
}

.make-payment{
    color: var(--make-payment-color) !important;
    border-color: var(--make-payment-border-color) !important;
}

.download-invoice{
    color: var(--download-invoice-color) !important;
    border-color: var(--download-invoice-border-color) !important;
}



.page-wrapper {
    display: flex;
    font-family: Arial, sans-serif;
    background-color: var(--current-background);
}

.sidebar-wrapper {
    width: 30vmin;
    border-right: 3px solid var(--dashboard-line-color);
    background-color:  var(--current-background);
    padding: 10px;
    flex-shrink: 0;         /* don’t shrink */
    position: sticky;       /* sticky to viewport */
    top: 0;
    align-self: flex-start;
    height: 85vh;
}

/* Main content */
.content-wrapper {
    flex-grow: 1;           /* take remaining space */
    padding: 20px;
    background-color:  var(--current-background);
    overflow-x: auto;       /* horizontal scroll if table is wide */
}


#clientManagerWrapper {
    width: 100%;
}

/* Header */
.cm-header {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color) !important;
}

.cm-header-btns {
    float: right;
}

.cm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: -3%;
}

.cm-toolbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap; /* optional, in case toolbar wraps on small screens */
}


.dataTables_scrollBody thead {
    visibility: hidden !important;   /* invisible but still takes up space */
    height: 0 !important;            /* collapse the row height */
}
/* Buttons */
.cm-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: .5vmin .25vmin;
    font-size: 2.5vmin;
    border-radius: 6px;
    cursor: pointer;
    text-transform: none;
    transition: 0.2s;
    background: transparent;
    border: none;
}

.cm-btn svg {
    width: 3.5vmin;
    height: 3.5vmin;
    fill: currentColor;
}

.cm-btn-blue {
    border-color: var(--text-content-header);
    color: var(--text-content-header);
}

.cm-btn-blue:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

.cm-btn-black {
    border-color: var(--text-color);
    color: var(--text-color);
}

.cm-btn-black:hover:not(.cm-disabled) {
    background-color: rgba(0, 0, 0, 0.05);
}

.cm-disabled {
    opacity: 0.6;
    cursor: default;
}

/* ============================= */
/* TABLES */
/* ============================= */
.cm-table-container {
    overflow-x: auto;
}

.cm-datatable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
}

/* Table headers */
.cm-datatable th {
    background-color: var(--dashBoard-headers-color);
    border: 1px solid var(--dashboard-line-color);
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox column */



/* Table body */
.cm-datatable td {
    border: 1px solid var(--dashboard-line-color);
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zebra stripes */
.cm-datatable tbody tr:nth-child(even) {
    background-color: var(--table-alternate-color);
}

.cm-datatable tbody tr:hover {
    background-color: var(--dashboard-line-color);
    cursor: pointer;
}

/* Action links */
.cm-action-link i {
    font-size: 14px;
    color: var(--text-content-header);
    transition: 0.2s;
}

.cm-action-link:hover i {
    color: var(--text-content-header);
}

/* ============================= */
/* SIDEBAR CONTENT */
/* ============================= */
.section-header {
    position: relative;
    font-weight: bold;
    border-bottom: 1px dotted var(--dashboard-line-color);
    margin-top: 3vmin;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.section-header svg {
    margin-right: 8px;
    width: 2.25vmin;
    text-align: center;
    color: var(--text-color);
}

/* User header */
.user-header {
    display: flex;
    align-items: center;
    border-bottom: 1px dotted var(--dashboard-line-color);
    padding: 8px 0;
}

.user-header .icon-user-tie {
    margin-right: 8px;
}

.user-code {
    font-weight: bold;
    flex-grow: 1;
}

.spouse-label {
    font-size: 0.8em;
    color: var(--text-content-header);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding: 0.25vmin 4vmin;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.menu-item:hover {
    background-color: var(--dashboard-line-color);
    font-weight: bold;
}

.menu-item .menu-arrow {
    width: 2vmin;
    height: 2vmin;
    flex-shrink: 0;
    fill: currentColor;
    order: -1;
}


/* Lists */
ul {
    list-style: none;
    margin: 5px 0;
    padding-left: 0;
}

/* Recent clients */
.recent-client-list {
    margin-left: 25px;
}

.recent-client-item {
    cursor: pointer;
    padding: 2px 0;
    transition: font-weight 0.2s;
}

.recent-client-item:hover {
    font-weight: bold;
}

/* Reports & renewal */
.report-value {
    float: right;
    font-weight: bold;
}

.renewal-date {
    text-align: right;
    padding: 5px 0;
    font-weight: bold;
}

.sidebar-footer {
    margin-top: 20px;
    font-size: 0.9em;
    color: var(--dashboard-line-color);
    text-align: center;
}

.no-print {
    display: block;
}

.addClientHeader {
    font-weight: bold;
    display: flex;
    color: black;
    font-size: 4vmin;
    border-bottom: 3px solid black;
    padding-bottom: 1vmin;
    gap: 2vmin;
    align-items: center;
}

.mainAccount {
    display: grid;
    grid-template-columns: 50% 50%;
}

.fieldWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.25vmin;
    vertical-align: middle;
}

.noteFieldWrapper {
    position: relative;
}

.noteFieldWrapper .noteCheck {
    position: absolute;
    left: 32%;
    width: 20vmin !important;
}

.fieldWrapper label {
    width: 17vmin !important;
    text-align: left !important;
    vertical-align: middle !important;
    margin: 1vmin 1vmin !important;
}
.textarea-wrapper .printNoteBox {
    width: 20vmin !important ;
    position:absolute;
    right:10px;
    top:22%;
    display:flex;
    align-items:center;
    vertical-align: middle !important;
}

.fieldWrapper input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1vmin;
}
.fieldWrapper label input {
    width: 2vmin;
}

.bigInput {
    width: 70%;
}

.smallInput {
    width: 18%;
}

.addInvSubmit {
    display: flex;
    justify-content: center;
    margin-top: 2vmin;
}

.ownershipFieldSet {
    margin-top: 1vmin;
}

.remove-account-btn {
    cursor:pointer;
    margin-left:0.5vmin;
    margin-right: 0.5vmin;
    fill: #c52424;
    font-size:1rem;
    display:inline-block;
    width: 1.5vmin;

}

.remove-btn svg {
    width: 2.5vmin !important;
    height: 2.5vmin !important;
    fill: #c52424;
}

.formArea {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 2vmin;
    margin: 2vmin 3vmin
}

.clientForm {
    border-right: 1px solid var(--dashboard-line-color);
    padding-right: 1vmin;
}

.DateDropDownGroup select {
    width: 7.5vmin !important;
}

.editFormArea {
 padding: 2vmin 2vmin;
}


.formArea * input {
    width: 15.5vmin;
}

.formArea * select {
    width: 15.5vmin;
}

.usDateWrapper {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 1vmin;
    margin-top: 1vmin;
}

.usDateRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vmin;
    align-items: center;
    margin-bottom: 2vmin;
}

.usDateRow label {
    font-weight: 500;
    text-align: left;
    width: 50%;
}

.usDateButtons {
    display: flex;
    gap: 9vmin;
    margin-left: 20vmin; /* aligns with other form fields */
    margin-bottom: 2vmin;
}
.usDateRow label:not(:first-child) {
    margin-left: 0;
}

.noteLabel {
    width: 30% !important;
}

.usDateRow input {
    width: 100%;
    box-sizing: border-box;
}

.formActions, .showFormWrapper {
    display: flex;
    justify-content: center;
}

.fieldWrapper textarea {
    width: 65%;
    height: 12vmin;
    resize: none;
}

.cm-action-header {
    background-color: var(--current-background) !important;
    border: none !important;
    width: 5% !important;
}

.cm-actions-cell {
    width: 80px;
    text-align: left;
    white-space: nowrap;
    background-color: var(--current-background) !important;
    border: none !important;
}

.cm-row-actions {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.cm-action {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-size: 14px;
}

.cm-action:hover {
    color: var(--dark-font);
}

.cm-clientlist_filter {
    float: left
}

.table-icon {
    width: 2.5vmin !important;
    height: 2vmin !important;
    fill: var(--text-color);
}

.trash-icon {
    fill: #c52424 !important;
}

.cm-toolbar-edits {
    display: flex;
    gap: 8px;
}

.cm-toolbar-adds {
    display: flex;
    gap: 8px;
}

.table-options-icon {
    width: 7vmin;
    height: 7vmin;
}

.no-sort-arrows::after,
.no-sort-arrows::before {
    display: none !important;
    content: none !important;
}

.excel-icon {
    fill: #22a122 !important;
}

.pdf-icon {
    fill: #c52424 !important;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Tooltip text hidden by default */
.tooltip .tooltiptext {
    visibility: hidden;
    width: max-content;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* show above button */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%; /* bottom of tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.search-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-wrapper label {
    margin: 0;
    display: flex;
    align-items: center;
}

.ownershipAccount {
    margin-left: -1.5vmin !important;
}

.owner-title {
    font-size: 2vmin !important;
}

.removeOwnerBtn {
    width: 1.5vmin;
    height: 1.5vmin;
    fill: #c52424;
}

/* Adding Investment */
.account {
    width: 100%;
    font-family: sans-serif;
    margin: 20px 0;
    overflow-y: auto;
}

.account-select {
    width: 20%;
}

.investmentBankSelect {
    text-align: left;
}

.account-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.account-header .line {
    flex-grow: 1;
    height: 0.5px;
    background: #000;
}

.account-header .line.left {
    flex-basis: 40px;
    flex-grow: 0;
}


.account-header .line.inv-left {
    flex-basis: 15px;
    flex-grow: 0;
}

.account-header .line.middle {
    flex-grow: 1;
}
.account-header .line.right {
    flex-basis: 30px;
    flex-grow: 0;
}

.account-title {
    margin: 0 8px;
    font-weight: bold;
    white-space: nowrap;
}

.account-arrow {
    width: 2vmin;
    margin: 0 1vmin;
    transition: transform 0.3s ease;
}

.account.open .account-arrow {
    transform: rotate(180deg);
}

.account.accountDiv.open .account-field-set{
    border: 1px solid black  !important;
}

.account .account-field-set {
    border-top: 1px solid black !important;

}

.account-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 10px;
    background: transparent;
}

.account.open .account-content {
    overflow: auto;
    max-height: 50vmin;
    padding: 10px;
}



/* INVESTMENT FORM */
.investment-fieldset {
    border-top: 1px solid #333;
    display: grid;
    grid-template-columns: 55% 45%;

}

#investmentType {
    width: 24vmin;
}

.investment-fieldset legend {
    font-weight: bold;
    font-size: 2vmin;
    padding: 0 1vmin
}

.investment-fieldset * label {
    margin-right: 3vmin;
}

.account-field-set {
    margin-top: 10px;
    border-top: 1px solid #333;
}

.account-field-set legend {
    font-weight: bold;
    font-size: 2vmin;
    padding: 0 10px;
}

.magnify {
    width: 3.5vmin;
    height: 3.5vmin;
}

.multiselect {
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 1.25vmin;
}

.selected-area {
    background-color: var(--bg-color);
    color: var(--link-color);
    cursor: pointer;
    font-size: 1.7vmin;
    border: none;
    border-bottom: 0.15vmin solid var(--input-border-color);
}

/* Arrow */
.selected-area::after {
    content:"";
    position:absolute;
    top:50%; right:8px;
    border:5px solid transparent;
    border-top-color:#333;
    transform:translateY(-50%);
}

.placeholder {
    color:#777;
}

.options {
    display:none;
    position:absolute;
    top:calc(100% + 2px);
    left:0; right:0;
    max-height:200px;
    overflow-y:auto;
    border:1px solid #aaa;
    background:#fff;
    border-radius:4px;
    z-index:10;
    padding:5px 0;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
}

/* Show when wrapper (or any child) has focus */
.multiselect:focus-within .options { display:block; }

/* -------------------------------------------------------------
   3️⃣  Options (checkbox + label)
   ------------------------------------------------------------- */
.option {
    display:flex;
    text-align: left;
    padding:1vmin 0;
    cursor:pointer;
}

/* hide the native checkbox */
.option input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/* the visible text inside the dropdown */
.option .tag {
    margin-left:24px;          /* space for the hidden checkbox */
}

/* bold when checked */
.option input:checked + .tag { font-weight:bold; color:#0066cc; }

/* -------------------------------------------------------------
   4️⃣  Chips that stay visible after closing
   ------------------------------------------------------------- */
.selected-area .chip {
    display:inline-block;
    background:#e0e0e0;
    border-radius:3px;
    padding:2px 4px;
    margin:2px 4px 0 0;
    font-size:0.85em;
}

/* Hide placeholder once a chip appears */
.selected-area .chip ~ .placeholder { display:none; }

/* -------------------------------------------------------------
   5️⃣  The CSS “magic” – copy each checked label into a chip
   ------------------------------------------------------------- */
/* For every checked checkbox we create a chip inside .selected-area */
.option input:checked + .tag::after {
    content: attr(data-label);
}

/* Place those chips *before* the placeholder */
.multiselect .option input:checked + .tag::after {
    /* create a pseudo‑element that will be moved */
}

/* Use the sibling selector chain to inject a chip */
.multiselect .option input:checked + .tag {
    /* store the text in a custom property */
    --lbl: attr(data-label);
}

/* Finally, display the chip inside the selected-area */
.multiselect .option input:checked + .tag {
    /* No extra markup needed – the chip appears thanks to the rule below */
}

/* The actual injection – each checked item adds a chip before the placeholder */
.multiselect .option input:checked + .tag {
    /* we use the ::before pseudo‑element on the .selected-area */
}

/* Because pure CSS cannot truly “move” content out of its original
   place, we instead duplicate it: */
.selected-area::before {
    content: "";
}

/* Build a comma‑separated list of chips.
   Unfortunately CSS can’t loop, so we have to list each possible option
   explicitly (still pure CSS, just a bit verbose). */
.option:nth-child(1) input:checked ~ .selected-area::before {
    content: "Stock/Equity";
}
.option:nth-child(2) input:checked ~ .selected-area::before {
    content: "Bond/Debt";
}
.option:nth-child(3) input:checked ~ .selected-area::before {
    content: "Mutual Fund";
}
.option:nth-child(4) input:checked ~ .selected-area::before {
    content: "ETF";
}
.option:nth-child(5) input:checked ~ .selected-area::before {
    content: "Cash";
}
.option:nth-child(6) input:checked ~ .selected-area::before {
    content: "Real Property";
}
.option:nth-child(7) input:checked ~ .selected-area::before {
    content: "Intangible";
}
.option:nth-child(8) input:checked ~ .selected-area::before {
    content: "Other";
}

/* Show chips separated by commas – a tiny trick */
.selected-area::before {
    white-space: nowrap;
}
.selected-area::before {
    display: inline;
}

#addSubFundsBtn {
    margin-top: 2vmin;
}

.subfund-list{
    border:1px solid #aaa;
    padding:10px;
    height: auto;
    background:#fff;
    display: none;
}
.subfund-item{
    border:1px solid #888;
    background:#fafafa;
    margin:6px 0;
    border-radius:4px;
}
.subfund-header{
    background:#e6e6e6;
    padding:6px;
    display:flex;
    align-items:center;
    gap:8px;
}
.drag-handle{
    cursor:grab;
    font-size:16px;
    user-select:none;
}
.toggle-btn{
    cursor:pointer;
    font-size:14px;
    user-select:none;
}
.remove-btn{
    border:none;
    background:none;
    cursor:pointer;
    color: var(--password-strength-weak);
    margin-left:auto;
    font-weight:bold;
}
.subfund-body{
    display:none;
    grid-template-columns: 50% 50%;
    padding:8px;
    background:#fff;
    border-top:1px solid #ddd;
}
.subfund-body.open{display:grid;}
.subfund-children{
    margin-left:24px;
    padding-left:6px;
    padding-top:6px;
    min-height:14px;
}
.dragging .toggle-btn{
    pointer-events:none !important;
}

.confirm-delete-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem auto;
    padding: 1.5rem;
    background: transparent;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.confirm-delete-icon {
    width: 64px;
    height: 64px;
    fill: #e53935;
}


.confirm-delete-message {
    font-size: 1rem;
    line-height: 1.4;
    color: #333;
}

.client-name {
    color: #d32f2f;
}

.row-highlight {
    background-color: #e6f2ff;
}
.row-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    padding: 4px;
}


.confirm-delete-actions {
    display: flex;
    gap: 1rem;
}

.btn {
    flex: 1 1 0;
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .2s, transform .1s;
}

.btn-yes {
    background-color: #d32f2f;
    color: #fff;
}

.btn-no {
    background-color: #e0e0e0;
    color: #333;
}

.btn:hover {
    filter: brightness(1.05);
}

.btn:active {
    transform: translateY(1px);
}

.investment-form-group{
    display: flex;
    align-items: baseline;
}
.investment-form-group label{
    margin-right: 1.5vmin;
}
.new-election-header{
    margin-bottom: 3vmin;
}

.investment-fields-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.investment-fields-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--dashBoard-headers-color);
    z-index: 2;
    border: 1px solid #ddd;
    padding: 6px;
}

.investment-fields-table td {
    overflow-x: auto;
    text-overflow: ellipsis;
    padding: 4px 6px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.investment-fields-table td:focus{
    outline: 2px solid var(--input-border-color);
    outline-offset: -2px;
}

.investment-fields-table td input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    padding: 0;
}

.investment-fields-table td::-webkit-scrollbar {
    height: 4px;
}
.investment-fields-table td::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 2px;
}

.new-election-footer{
    display: flex;
    gap: 1vmin;
    float: right;
    margin-top: 2vmin;
}



.account.locked .account-form input,
.account.locked .account-form select,
.account.locked .account-form textarea {
    background:#f5f5f5;
    cursor:not-allowed;
}


.readonly-select {
    background:#f5f5f5;
    cursor:not-allowed;
    pointer-events:none;
}

.readonly-select::-ms-expand { display:none; }

.lock-icon .lock-svg {
    width: 2vmin;
    height: 2vmin;
    vertical-align: middle;
    margin-left: 0.4vmin;
    margin-right: 0.4vmin;
    fill: #e00;
}

.addOwnershipBtn {
    margin-top: 1vmin;
}

.dataTables_scrollBody #cm-investmentlist thead{
    display: none !important;
}

#earnings-profits-table{
    margin-top: 7vmin;
}

select[name="investment"],
select[name="tp"]
{
    width: 100%;
}

input[type="file"]{
    border-bottom: none;
}
.invalid
{
    color: #c52424;
}

.missing-field{
    border-bottom: 0.2vmin solid var(--input-color-error) !important;
}
.investment-form-group input:not([type="file"]) {
    width: 8vmin;
    text-align: center;
}

.modal-backdrop {
    position: fixed;
    inset: 0;                     /* top / right / bottom / left = 0 */
    background: rgba(0,0,0,0.8);
    display: flex;               /* flexbox to centre the content */
    align-items: center;
    justify-content: center;
    z-index: 9999;               /* on top of everything */
}

/* The white “popup” that holds the form */
.modal-962-content {
    background: var(--bg-color, #fff);
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    width:68vmin;
    height: 53vmin;
    overflow-y: scroll;
    position: relative;
    padding: 20px;
}

/* X‑button (top‑right) */
.modal-962-close {
    top: -1.5vmin;
}

.transactionFieldWrapper {
    display: block;
    text-align: center;
    margin-right: 2vmin;
}

.transactionDetails {
    display: flex;
}

.transSelect {
    margin-right: 1vmin;
}

.transactionSubmit {
    margin-top: 2vmin;
}

.investmentTableBody {
    position: relative;
}

.hvr-panel-row { display: none; position: absolute; left: 0; right: 0; background:#fff}
.hvr-panel-cell { padding:0; background:#fff; border-top:none; }
.hvr-abs-panel {
    position: absolute;
    background: var(--current-background);
    height: 15vmin;
    border: 1px solid var(--dashboard-line-color);
    width: 20vmin;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease;
    transform:scale(.95);
}

.hvr-abs-panel.is-visible {
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.hvr-col {
    margin: 1vmin;
}
.hvr-btn-col a {
    text-decoration: none;
    padding: .4rem .8rem;
    background:#007bff;
    color:#fff;
    border-radius:.3rem;
    text-align:center;
}

.transNote {
    width: 33% !important;
    height: 6vmin !important;
}