body {
    background-color: rgb(30, 30, 30);
    color: rgb(175, 175, 175);
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    height: 100vh;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow-y: hidden;
}

a {
    cursor: pointer;
}

@supports (-webkit-user-drag: none) {
    a {
        -webkit-user-drag: none;
    }
}

@supports (-webkit-user-drag: none) {
    img {
        -webkit-user-drag: none;
    }
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(60, 60, 60);
    border-radius: 7px;
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

.top-navigation {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 100;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: rgba(50, 90, 130, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: 0.5s ease;
}

.top-navigation a {
    float: left;
    display: block;
    color: rgb(175, 175, 175);
    text-align: center;
    padding: 15px;
    text-decoration: none;
    transition: 0.5s ease;
    border-radius: 7px;
}

.top-navigation .icon {
    display: none;
}

.top-navigation-right {
    float: right;
}

.content-area {
    overflow: auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0px;
}

.content-container {
    border-radius: 7px;
    padding: 20px;
    margin: auto;
    padding-top: 20px;
}

.content-level-null,
.content-level-null:-webkit-autofill {
    background-color: rgb(27, 27, 27);
}

.content-level-0,
.content-level-0:-webkit-autofill {
    background-color: rgb(30, 30, 30);
}

.content-level-1,
.content-level-1:-webkit-autofill {
    background-color: rgb(45, 45, 45);
    transition: 0.5s ease;
}

.content-level-2,
.content-level-2:-webkit-autofill {
    background-color: rgb(60, 60, 60);
    transition: 0.5s ease;
}

.content-level-3,
.content-level-3:-webkit-autofill {
    background-color: rgb(75, 75, 75);
    transition: 0.5s ease;
}

.theme-colour-primary {
    background-color: rgb(40, 60, 80);
    transition: 0.5s ease;
}

.theme-colour-secondary {
    background-color: rgb(110, 0, 0);
    transition: 0.5s ease;
}

.theme-text {
    color: rgb(175, 175, 175);
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.theme-text-shadow {
    color: rgb(175, 175, 175);
    text-shadow: 0px 0px 5px black;
}

.content-shadow {
    box-shadow: 0px 0px 5px black;
}

.input-shadow {
    box-shadow: inset 0px 0px 3px black;
    transition: 0.5s ease;
}

.hover-shadow {
    box-shadow: 0px 0px 5px black;
}

.content-title {
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
    white-space: nowrap;
    text-shadow: 0px 0px 5px black;
}

.login-form {
    width: 500px;
    margin: auto;
}

input {
    height: 40px;
    border: none;
    border-radius: 7px;
    font-size: 18px;
    color: rgb(175, 175, 175);
    padding-left: 15px;
    outline: none;
}

input:disabled {
    color: rgb(120, 120, 120);
}

#minidesk-logo {
    width: 400px;
    filter: drop-shadow(0px 0px 5px black);
}

.logo-colour-primary {
    fill: #ccc;
    stroke-width: 0px;
}

.logo-colour-secondary {
    fill: rgb(15, 121, 212);
    stroke-width: 0px;
}

.login-input {
    width: calc(100% - 15px);
    margin-top: 20px;
}

button {
    border: none;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
}

.login-button {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.widget-grid-table {
    padding: 0px;
    border-spacing: 20px;
    border-collapse: separate;
}

.widget-grid-cell {
    border-radius: 7px;
    text-align: center;
    overflow: hidden;
    width: 8vw;
    height: 8vw;
    min-width: 8vw;
    min-height: 8vw;
    box-sizing: border-box;
}

.test-widget {
    position: absolute;
    z-index: 1;
    text-align: center;
    transition: 0s;
    overflow: hidden;
    width: calc((8vw * 3) + (40px * 2) + (20px * 2));
    height: calc((8vw * 2) + (40px * 1) + (20px * 1));
}

#top-navigation-setting-text {
    display: none;
}

#top-navigation-logout-text {
    display: none;
}

.widget-size-4x1 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 4) + (20px * 3));
    height: calc((8vw * 1) + (40px * 0) + (20px * 0));
    box-sizing: border-box;
}

.widget-size-4x2 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 4) + (20px * 3));
    height: calc((8vw * 2) + (40px * 1) + (20px * 1));
    box-sizing: border-box;
}

.widget-size-4x3 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 4) + (20px * 3));
    height: calc((8vw * 3) + (40px * 2) + (20px * 2));
    box-sizing: border-box;
}

.widget-size-4x4 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 4) + (20px * 3));
    height: calc((8vw * 4) + (20px * 3));
    box-sizing: border-box;
}

.widget-size-4x8 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 4) + (20px * 3));
    height: calc((8vw * 8) + (20px * 7));
    box-sizing: border-box;
}

.widget-size-8xNULL {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    box-sizing: border-box;
}

.widget-size-8x1 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 1) + (40px * 0) + (20px * 0));
    box-sizing: border-box;
}

.widget-size-8x2 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 2) + (40px * 1) + (20px * 1));
    box-sizing: border-box;
}

.widget-size-8x3 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 3) + (40px * 2) + (20px * 2));
    box-sizing: border-box;
}

.widget-size-8x5 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 5) + (40px * 4) + (20px * 4));
    box-sizing: border-box;
}

.widget-size-8x6 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 6) + (40px * 5) + (20px * 5));
    box-sizing: border-box;
}

.widget-size-8x7 {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 7));
    height: calc((8vw * 7) + (40px * 6) + (20px * 6));
    box-sizing: border-box;
}

#home-new-ticket {
    display: flex;
    height: 90px;
}

.new-ticket-button {
    width: 100%;
    height: 50px;
}

.quick-sale-button {
    width: calc(20% - 20px);
    height: 50px;
    margin-left: 20px;
}

#home-search-bar,
#customer-list-search,
#employees-list-search {
    height: 80px;
}

.home-search {
    width: calc(100% - 15px);
    text-align: center;
}

#home-stats,
#customer-list-filter,
#employees-list-filter,
#reports-filter {
    height: 80px;
    display: flex;
}

#customer-list-filter .filter-right:first-of-type {
    margin-left: auto;
    margin-right: 0px;
}

#customer-list-filter .filter-right {
    margin-left: 20px;
    margin-right: 0px;
}

#customer-list-sort-button {
    width: 165px;
}

.home-stat-area {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 7px;
    margin-right: 20px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}

#home-stats:last-child {
    margin-right: 0px;
}

#list-widget-home {
    height: 500px;
}

.list-display-area {
    height: calc(100% - 80px);
    overflow-y: auto;
    padding: 10px;
}

.list-display-button {
    margin: 10px;
}

.home-ticket-button {
    width: calc(100% - 20px);
    margin: 10px;
    display: flex;
}

.home-ticket-button-text {
    text-align: left;
}

.home-ticket-button-text:nth-child(1) {
    margin-left: 0px;
    width: 10%;
}

.home-ticket-button-text:nth-child(2) {
    width: 25%;
}

.home-ticket-button-text:nth-child(3) {
    width: 25%;
}

.home-ticket-button-text:nth-child(4) {
    width: 25%;
}

.home-ticket-button-text:nth-child(5) {
    width: 15%;
}

.customer-ticket-button {
    width: calc(100% - 20px);
    margin: 10px;
    display: block;
}

.list-item-text-icon {
    width: 25px;
    text-align: center;
}

.list-item-text {
    width: calc(50% - 10px);
    text-align: left;
    display: inline-block;
    margin-bottom: 5px;
}

.list-item-text:last-child,
.list-item-text:nth-last-child(2) {
    margin-bottom: 0px;
}

.list-item-row {
    width: calc(100% - 20px);
}

.list-item-row:last-child {
    margin-top: 5px;
}

#grid-placeholder {
    width: 100%;
    display: flex;
}

.grid-page-container {
    width: 100%;
    display: block;
}

#error-widget {
    width: 500px;
    text-align: center;
}

.icon-float {
    width: 5px;
    left: -0.5em;
    position: relative;
    font-size: 12px !important;
}

.ticket-icon {
    width: 0px;
    left: -0.8em;
    top: -0.8em;
    position: relative;
    font-size: 12px !important;
    box-shadow: 0px 0px 1px black;
}

::-ms-reveal {
    filter: invert(50%);
}

.setting-navigation-button {
    box-shadow: none;
}

#surrogate-container {
    height: calc(100vh - 160px);
    width: calc(100vw - 20px);
    top: 140px;
    left: calc((100vw - 40px) * -1);
    position: fixed;
    z-index: 99;
    background-color: rgba(90, 90, 90, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    transition: 0.5s ease;
    display: none;
    padding: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.surrogate-arrow {
    position: relative;
    left: calc(100% - 15px);
    top: calc(-50% - 1em);
    text-shadow: 0px 0px 3px black;
    height: 0px;
}

#surrogate-arrow-left {
    display: none;
    left: calc(100% - 13px);
}

#widget-card-area {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    position: relative;
    top: 20px;
    overflow-y: auto;
    background: rgba(10, 10, 10, 0.5);
    margin-left: 20px;
}

.widget-card {
    margin-bottom: 20px;
}

.widget-card:last-child {
    margin-bottom: 5px;
}

.widget-card-image-center {
    text-align: center;
}

.widget-card-image {
    margin-bottom: 20px;
    max-width: 100%;
    max-height: 500px;
    box-shadow: 0px 0px 5px black;
    border-radius: 7px;
}

.widget-card-title {
    margin-top: -1ex;
}

.add-widget-card {
    position: relative;
    left: calc(100% - 1em);
    transition: 0.5s ease;
}

#context-menu {
    background-color: rgba(90, 90, 90, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display: none;
    position: absolute;
    z-index: 101;
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
}

.context-menu-item {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 7px;
    transition: 0.5s ease;
}

.row {
    display: flex;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column-25 {
    width: 25%;
}

.column-50 {
    width: 50%;
}

.column-75 {
    width: 75%;
}

.column-third {
    width: calc(100% / 3);
}

.customer-info-button {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 30px;
    width: calc(100% - 4px);
}

label {
    transition: 0.5s ease;
    text-shadow: 0px 0px 5px black;
}

.input-label-column {
    margin-left: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.input-label {
    margin-bottom: 10px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(110, 0, 0);
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
    box-shadow: inset 0px 0px 5px black;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(175, 175, 175);
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
    box-shadow: 0px 0px 5px black;
}

input:checked+.slider {
    background-color: rgb(40, 60, 80);
    box-shadow: inset 0px 0px 5px black;
}

input:focus+.slider {
    box-shadow: 0 0 1px rgb(40, 60, 80);
    box-shadow: inset 0px 0px 5px black;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.check-list {
    margin-bottom: 30px;
    line-height: 30px;
    overflow-x: hidden;
}

.check-list:last-child {
    margin-bottom: 0px;
}

.check-list .switch {
    float: right;
}

.check-list-column {
    width: calc(100% - 50px);
    float: left;
}

.check-list-column-2 {
    width: calc(100% - 50px);
    float: right;
}

.check-list-label-cell {
    cursor: pointer;
}

#customer-view-profile,
#employees-view-profile,
#customer-view-comments,
#employees-view-comments {
    height: 615px;
}

#customer-view-summary {
    height: 400px;
}

#employees-view-summary {
    height: 420px;
}

#ticket-customer-information,
#ticket-electronics-information {
    padding-left: 10px;
    padding-right: 10px;
    height: 685px;
}

textarea {
    border-radius: 7px;
    font-size: 18px;
    padding: 15px;
    border: none;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(175, 175, 175);
    outline: none;
}

.ticket-task-name {
    margin-right: 10px;
    margin-bottom: 20px;
    border-radius: 7px;
    outline: none;
    width: calc(100% - 586px);
}

.ticket-task-assign {
    margin-right: 10px;
    margin-bottom: 0px;
    border-radius: 7px;
    outline: none;
    width: 200px;
    right: 0px;
    top: 23px;
}

.ticket-description-textarea {
    width: calc(100% - 30px);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 7px;
    outline: none;
}

#new-task-button {
    height: 50px;
    width: 100%;
    margin-right: 15px;
    margin-bottom: 20px;
}

.checkbox-style {
    background-color: rgb(40, 60, 80);
}

#comments-background {
    width: 100%;
    height: 696px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

#comment-entry-box {
    border-radius: 0px;
    border-bottom-left-radius: 7px;
    border: none;
    resize: none;
    height: 30px;
    width: calc(100% - 220px);
    padding: 10px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    bottom: 20px;
    color: rgb(175, 175, 175);
    outline: none;
}

#comment-send-button {
    height: 50px;
    width: 150px;
    float: right;
    border-radius: 0px;
    padding: 0px;
    border-bottom-right-radius: 7px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

#comments-sort-button {
    position: absolute;
    padding: 10px;
    height: 40px;
    top: 66px;
    right: 20px;
}

#customer-comments-background {
    width: 100%;
    height: 471px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.customer-view-profile,
.employees-view-profile {
    padding-left: 10px;
    padding-right: 10px;
}

#reports-cash-drawer {
    padding-left: 10px;
    padding-right: 10px;
    height: 615px;
}

.customer-view-table {
    width: calc(100% - 40px);
    height: calc(100% - 90px);
    border-radius: 7px;
    padding: 20px;
    overflow-y: auto;
}

.employee-view-table {
    width: calc(100% - 40px);
    height: calc(100% - 85px);
    border-radius: 7px;
    padding: 20px;
    overflow-y: auto;
}

.customer-view-table-row-header {
    display: inline;
}

.customer-view-table-value {
    display: inline;
    float: right;
}

.connect-text-underline {
    overflow: hidden;
    height: 30px;
}

.connect-text-underline::after {
    content: "........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................";
    position: relative;
    top: -1em;
}

table {
    border: none;
    border-collapse: collapse;
}

#ticket-status-button {
    margin-top: 45px;
    width: calc(100% - 30px);
    height: 50px;
    bottom: 20px;
    display: none;
    color: rgb(175, 175, 175);
    text-align: center;
    line-height: 50px;
}

#ticket-status-button .option-arrow {
    margin-top: 16px;
}

.ticket-invoice-area {
    position: absolute;
    width: calc(100% - 40px);
}

.ticket-status-button-area {
    width: calc(50% - 25px);
}

#ticket-invoice-button {
    width: calc(50% - 10px);
    height: 50px;
    position: absolute;
    top: 25px;
    right: 0px;
    display: none;
}

#ticket-signature-button {
    position: absolute;
    top: 25px;
    width: 100%;
    height: 50px;
}

.parts-list-table {
    width: calc(100% - 20px);
    margin-left: 20px;
}

.part-input {
    width: calc(100% - 30px);
}

.part-quantity-input {
    width: 50px;
    min-width: 40px;
}

.part-quantity-cell {
    width: 50px;
}

.add-part-button {
    width: 40px;
    height: 40px;
}

.add-part-button-cell {
    width: 80px;
    text-align: right;
}

.add-tax-button {
    height: 40px;
    width: 135px;
    padding-left: 10px;
    padding-right: 10px;
}

.part-quantity-cross-cell {
    width: 30px;
    text-align: center;
    text-shadow: 0px 0px 5px black;
}

.new-customer-information-update-button {
    position: absolute;
    bottom: -8px;
    width: calc((100% / 3) - 25px);
}

.customer-information-update-button {
    position: relative;
    top: 98px;
    width: calc(100% - 20px);
}

.device-password-offset {
    position: relative;
    margin-top: 30px;
}

.check-list-table {
    width: 100%;
}

.check-list-icon-cell {
    width: 30px;
    text-align: center;
}

#home-stats .filter-right:first-of-type {
    margin-left: auto;
    margin-right: 0px;
}

#home-stats .filter-right {
    margin-left: 20px;
    margin-right: 0px;
}

#inventory-create {
    padding-left: 10px;
    padding-right: 10px;
    height: 335px;
}

#inventory-add-button {
    position: relative;
    height: 40px;
    bottom: -115px;
    margin-left: 10px;
    margin-bottom: 30px;
    width: calc(100% - 20px);
}

#inventory-view-container {
    width: calc(100% - 40px);
    height: calc(100% - 85px);
    border-radius: 7px;
    overflow-y: auto;
    overflow-x: auto;
}

#inventory-view-table {
    width: 100%;
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
}

#inventory-view-table th {
    position: sticky;
    top: 0;
    text-align: left;
    background: rgba(120, 120, 120, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    padding: 10px;
    box-shadow: inset 0px 0px 2px rgb(120, 120, 120);
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

#inventory-view-table th:first-child {
    border-top-left-radius: 7px;
}

#inventory-view-table th:last-child {
    border-top-right-radius: 7px;
}

#inventory-view-table td {
    padding: 10px;
    box-shadow: inset 0px 0px 2px rgb(90, 90, 90);
}

#inventory-view-table tr {
    transition: 0.5s ease;
}

#inventory-view-table td {
    transition: 0.5s ease;
    text-shadow: 0px 0px 5px black;
}

#inventory-view-table tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

#inventory-view-table tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

#inventory-view-table tr:nth-child(odd) {
    background-color: rgb(45, 45, 45);
}

hr {
    height: 1px;
    border: none;
    background-color: rgb(175, 175, 175);
    box-shadow: 0px 0px 5px black;
}

.column-input {
    width: calc(100% - 37px);
    margin-left: 10px;
    margin-bottom: 30px;
}

.column-input-option {
    width: calc(100% - 67px);
    margin-left: 10px;
    margin-bottom: 30px;
}

#reports-graph {
    padding-left: 10px;
    padding-right: 10px;
}

.reports-graph-container {
    width: calc(100% - 60px);
    height: 650px;
    margin-left: 10px;
}

.subscription-title {
    margin-bottom: 10px;
}

#customer-view-subscription-indicator {
    display: inline;
}

.customer-view-subscription-indicator-enable {
    color: green;
}

.customer-view-subscription-indicator-disable {
    color: red;
}

#customer-view-subscription-date-start {
    text-shadow: 0px 0px 5px black;
    display: inline;
}

#customer-view-subscription-date-end {
    text-shadow: 0px 0px 5px black;
    display: inline;
}

#customer-view-subscription-button {
    height: 40px;
    width: 100%;
    padding: 0px 15px 0px 15px;
    margin-top: 15px;
}

#subscription-builder,
#subscriptions-list {
    width: 600px;
}

#subscriptions-list-area {
    height: 600px;
    width: calc(100% - 40px);
    overflow-y: auto;
}

#subscriptions-list-refresh-button {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
}

#subscriptions-list-add-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscriptions-list-edit-button {
    height: 40px;
    width: calc(50% - 10px);
    margin-top: 20px;
}

#subscriptions-list-close-button {
    height: 40px;
    width: calc(50% - 10px);
    margin-left: 15px;
    margin-top: 20px;
}

#subscription-edit,
#subscriptions-device,
#subscriptions-pause,
#subscriptions-resume,
#subscription-selection {
    width: 600px;
}

#subscription-edit-details,
#subscription-edit-device-area {
    height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

#subscription-edit-device-add-button {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
}

#subscription-edit-pause-resume-button {
    height: 40px;
    width: calc(50% - 10px);
}

#subscription-edit-cancel-button {
    height: 40px;
    width: calc(50% - 10px);
    margin-left: 15px;
}

#subscription-edit-print-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscription-edit-close-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscriptions-device-area {
    height: 400px;
    width: calc(100% - 40px);
    overflow-y: auto;
}

#subscriptions-device-add-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscriptions-device-close-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscriptions-pause-reason {
    width: calc(100% - 40px);
    outline: none;
    margin-bottom: 20px;
}

#subscriptions-pause-date {
    width: calc(100% - 25px);
    height: 38px;
    line-height: 38px;
    margin-bottom: 20px;
}

#subscriptions-pause-periods {
    width: calc(100% - 25px);
    height: 38px;
    line-height: 38px;
}

#subscriptions-pause-resume-date {
    width: calc(100% - 25px);
    margin-left: 10px;
    margin-bottom: 20px;
    height: 38px;
    line-height: 38px;
}

#subscriptions-pause-resume-timing {
    width: calc(100% - 45px);
    margin-left: 10px;
    margin-bottom: 0;
}

#subscriptions-pause-cancel {
    height: 40px;
    width: calc(100% - 10px);
    margin-top: 20px;
}

#subscriptions-pause-confirm {
    height: 40px;
    width: calc(100% - 10px);
    margin-left: 10px;
    margin-top: 20px;
}

#subscriptions-resume-timing-selector {
    width: calc(100% - 10px);
}

#subscriptions-resume-timing {
    margin-bottom: 0px !important;
}

#subscriptions-resume-date {
    width: calc(100% - 25px);
    margin-left: 10px;
}

#subscriptions-resume-cancel {
    height: 40px;
    width: calc(100% - 10px);
    margin-top: 20px;
}

#subscriptions-resume-confirm {
    height: 40px;
    width: calc(100% - 10px);
    margin-left: 10px;
    margin-top: 20px;
}

#subscription-selection-search {
    width: calc(100% - 18px);
    text-align: center;
}

#subscription-selection-list {
    height: 600px;
    width: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 20px;
}

#subscription-selection-close-button {
    height: 40px;
    width: 100%;
    margin-top: 20px;
}

#subscription-builder-search {
    width: calc(100% - 18px);
    text-align: center;
    margin-bottom: 10px;
}

#subscription-builder-list {
    height: 400px;
    margin-bottom: 10px;
    overflow-y: auto;
}

#subscription-builder-continue-button,
#subscription-builder-close-button {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.subscription-builder-product-details {
    width: 430px;
}

.subscription-builder-product-amount-column {
    display: flex;
    align-items: center;
}

.subscription-builder-minus,
.subscription-builder-plus {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
}

.subscription-builder-product-amount {
    width: 50px;
    text-align: center;
    padding: 0;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    margin-right: 10px;
}

#subscription-agreement {
    width: 600px;
}

#subscription-agreement-start {
    margin-top: 20px;
    margin-bottom: 20px;
}

#subscription-agreement-terms {
    height: 600px;
    overflow-y: auto;
}

#subscription-agreement-acknowledge {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

#subscription-agreement-acknowledge-button {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    float: right;
    position: relative;
    top: -5px;
}

#subscription-agreement-signature {
    height: 400px;
    width: 600px;
    border-radius: 7px;
    margin-bottom: -40px;
}

#subscription-agreement-cancel {
    height: 40px;
    width: calc(50% - 10px);
}

#subscription-agreement-agree {
    height: 40px;
    width: calc(50% - 10px);
    margin-left: 15px;
}

#subscription-agreement-clear-button {
    height: 40px;
    position: relative;
    left: calc(50% + 220px);
    top: -365px;
}

.subscription-agreement-icon {
    position: relative;
    color: rgb(117, 117, 117);
    text-shadow: 0px 0px 5px black;
    pointer-events: none;
    left: -60px;
    top: -90px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.subscription-agreement-line {
    position: relative;
    bottom: 100px;
    width: 550px;
    background: rgb(117, 117, 117);
    pointer-events: none;
}

#reports-payments {
    height: 250px;
}

.contact-method-button {
    width: calc(50% - 20px);
    overflow: hidden;
}

.contact-method-button-2 {
    margin-left: 15px;
}

#employees-graph-canvas {
    max-height: 280px;
}

#customer-view-subscription {
    height: 155px;
}

.settings-container {
    width: calc((8vw * 8) + (20px * 6));
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.text-editor-field {
    margin-left: 10px;
    width: calc(100% - 50px);
    min-height: 200px;
    border-radius: 7px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    outline: none;
    border: none;
    color: rgb(175, 175, 175);
    padding: 15px;
    overflow-x: hidden;
}

.text-editor-field a {
    color: white;
    text-shadow: rgb(120, 120, 120);
}

.text-editor-bar {
    margin-left: 10px;
    margin-bottom: 2px;
    width: calc(100% - 20px);
    border-radius: 7px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    display: flex;
    overflow-y: visible;
    max-height: 50px;
    height: 50px;
    padding: 0px;
    z-index: 1;
    position: relative;
}

.text-editor-bar-button {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
    background: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.text-editor-button-toggle {
    background-color: rgb(55, 75, 95);
    box-shadow: inset 0px 0px 2px black;
}

.text-editor-bar-select {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    border-radius: 7px;
    background-color: rgb(55, 75, 95);
    box-shadow: inset 0px 0px 2px black;
    border: none;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    outline: none;
    font-size: 18px;
}

.text-editor-bar-input {
    border-radius: 7px;
    height: 50px;
    width: 50px;
    margin: 0px;
    padding: 0px;
    outline: none;
}

.text-editor-bar-colour {
    height: 50px;
}

.text-editor-icon-button {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
    background: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.custom-select {
    position: relative;
    display: inline-block;
    z-index: 2;
    text-shadow: 0px 0px 5px black;
}

.select-selected {
    background-color: rgb(55, 75, 95);
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    height: 50px;
    border-radius: 7px;
    box-shadow: inset 0px 0px 2px black;
    line-height: 50px;
    z-index: 2;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

/* Style the dropdown items */
.select-items {
    position: absolute;
    top: 50px;
    display: none;
    background-color: rgba(50, 90, 130, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0px 0px 5px black;
    border-radius: 7px;
    z-index: 2;
    width: 100%;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

/* Style the dropdown items */
.select-items div {
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.select-down-arrow {
    float: right;
    margin-top: 17px;
}

[data-title]:after {
    content: attr(data-title);
    background-color: rgba(50, 90, 130, 0.5);
    color: rgb(175, 175, 175);
    font-size: 18px;
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    white-space: nowrap;
    box-shadow: 0px 0px 5px black;
    text-shadow: 0px 0px 5px black;
    opacity: 0;
    border-radius: 7px;
    z-index: 99999;
    visibility: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

[data-title] {
    position: relative;
}

.text-editor-bar-colour {
    block-size: auto;
    border-radius: 7px;
    border: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-top: 5px;
    padding: 0px;
    background-color: rgb(40, 60, 80);
}

.text-editor-bar-colour::-webkit-color-swatch,
.text-editor-bar-colour::-webkit-color-swatch-wrapper {
    border: none;
    border-radius: 10px;
    padding: 0;
}

font[size="1"] {
    font-size: 12px;
}

font[size="2"] {
    font-size: 14px;
}

font[size="3"] {
    font-size: 16px;
}

font[size="4"] {
    font-size: 18px;
}

font[size="5"] {
    font-size: 20px;
}

font[size="6"] {
    font-size: 22px;
}

font[size="7"] {
    font-size: 24px;
}

.text-editor-picture-input {
    display: none;
}

.text-editor-image {
    max-width: 100%;
    max-height: 100%;
    cursor: default;
    border: 1px dashed rgb(30, 30, 30);
}

#overlay-placeholder,
#message-placeholder {
    width: 100vw;
    height: calc(100vh - 50px);
    background-color: rgba(90, 90, 90, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display: none;
    top: 50px;
    overflow-y: auto;
    position: absolute;
}

.overlay-container {
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

#ticket-breakdown,
#ticket-signature {
    width: 800px;
    display: inline-table;
    position: relative;
}

.ticket-breakdown-table-container {
    padding: 15px;
    border-radius: 7px;
    margin-bottom: 20px;
}

#ticket-summary-table,
#ticket-breakdown-table {
    width: 100%;
    text-shadow: 0px 0px 5px black;
}

.ticket-breakdown-tab {
    width: 20px;
}

.ticket-breakdown-quantity-column {
    width: 20px;
    text-align: center;
}

.ticket-breakdown-x-column {
    width: 20px;
}

.ticket-breakdown-total {
    text-align: right;
}

.ticket-breakdown-payment {
    margin-right: 10px;
    width: 345px;
}

.ticket-breakdown-amount {
    width: 375px;
    position: absolute;
    right: 0px;
}

#ticket-breakdown-add-payment {
    height: 40px;
    width: 390px;
    margin-right: 15px;
    margin-bottom: 20px;
}

#ticket-breakdown-signature {
    height: 50px;
    width: 800px;
}

#ticket-breakdown-receipt {
    height: 50px;
    width: 800px;
    display: none;
}

#ticket-breakdown-invoice {
    height: 40px;
    width: 390px;
    margin-bottom: 20px;
}

#ticket-breakdown-payment-inputs {
    margin-top: 20px;
}

#ticket-breakdown-payment-inputs .ticket-breakdown-payment-row:not(:last-child) {
    margin-bottom: 10px;
}

.ticket-breakdown-bottom-buttons {
    margin-top: 10px;
}

.ticket-breakdown-quantity {
    width: 0;
}

.ticket-breakdown-x {
    width: 1em;
    text-align: center;
}

.ticket-breakdown-item {
    width: auto;
}

.ticket-breakdown-price {
    text-align: right;
}

#company-terms {
    width: 770px;
    height: 400px;
    overflow: auto;
    border-radius: 7px;
    padding: 15px;
    margin-bottom: 20px;
}

#signature-field {
    width: 800px;
    height: 400px;
    border-radius: 7px;
}

#cancel-button,
#cancel-button-2 {
    margin-top: 30px;
    height: 50px;
    width: 800px;
}

#signature-save-button {
    height: 50px;
    width: 800px;
}

.signature-icon {
    position: relative;
    bottom: 135px;
    left: 20px;
    color: rgb(117, 117, 117);
    text-shadow: 0px 0px 5px black;
    pointer-events: none;
}

.signature-line {
    position: relative;
    bottom: 140px;
    width: 760px;
    background: rgb(117, 117, 117);
    pointer-events: none;
}

.signature-buttons {
    margin-top: -23px;
}

.alert-shadow {
    box-shadow: 0px 0px 5px rgb(175, 175, 175);
}

[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: rgb(117, 117, 117);
}

.parts-list-table tr {
    height: 60px;
    vertical-align: text-top;
}

#chat-container {
    width: calc(100vw - 60px);
    height: calc(100vh - 90px);
    background-color: rgba(90, 90, 90, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    position: relative;
    border-bottom-right-radius: 7px;
    top: 70px;
    left: calc((100vw - 60px) * -1);
    overflow: visible;
}

#chat-tab {
    position: absolute;
    left: 0;
    top: 70px;
    width: 40px;
    height: 50px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: rgba(90, 90, 90, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.chat-top-shadow {
    width: calc(100% + 47px);
    height: 1px;
    position: absolute;
    left: -10px;
    top: 1px;
    box-shadow: 0px -2px 3px black;
}

.chat-tab-right-shadow {
    width: 1px;
    height: 44px;
    position: absolute;
    left: calc(100% + 39px);
    top: 3px;
    box-shadow: 2px 0px 3px black;
}

.chat-tab-bottom-shadow {
    width: 37px;
    height: 1px;
    position: absolute;
    left: 100%;
    top: 49px;
    box-shadow: 0px 2px 3px black
}

.chat-right-shadow {
    width: 1px;
    height: calc(100vh - 143px);
    position: absolute;
    left: calc(100% - 1px);
    top: 50px;
    box-shadow: 2px 0px 3px black;
}

.chat-bottom-shadow {
    width: calc(100% + 7px);
    height: 1px;
    position: absolute;
    left: -10px;
    top: calc(100vh - 91px);
    box-shadow: 0px 2px 3px black;
}

.chat-icon {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    left: calc(100% + 1px);
    top: 1px;
    z-index: 1;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
    cursor: pointer;
}

.chat-title {
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
    white-space: nowrap;
    text-shadow: 0px 0px 5px black;
}

#chat-background {
    width: calc(100% - 40px);
    height: calc(100vh - 416px);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    margin-left: 20px;
    background-color: rgba(10, 10, 10, 0.5);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.chat-other-container,
.chat-own-container {
    margin: 20px;
    padding: 10px;
    border-radius: 7px;
    max-width: calc(100% - 60px);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.chat-other-container {
    align-self: flex-start;
}

.chat-own-container {
    align-self: flex-end;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.chat-user-name {
    color: rgb(175, 175, 175);
    text-shadow: 0px 0px 5px black;
    font-weight: bold;

}

.chat-time {
    margin-left: 10px;
    color: rgb(150, 150, 150);
    text-shadow: 0px 0px 5px black;
}

.chat-message {
    color: rgb(175, 175, 175);
    text-shadow: 0px 0px 5px black;
}

.chat-entry-box {
    border-radius: 0px !important;
    border-bottom-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
    resize: none;
    min-height: 40px !important;
    height: 160px;
    width: calc(100% - 60px) !important;
    padding: 10px !important;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    bottom: 20px;
    background-color: rgba(10, 10, 10, 0.5);
    margin-left: 20px !important;
    overflow-y: auto;
}

#chat-send-button {
    height: 50px;
    width: 150px;
    float: right;
    border-radius: 0;
    border-bottom-right-radius: 7px;
    padding: 0px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

#chat-sort-button {
    position: absolute;
    padding: 10px;
    height: 40px;
    top: 66px;
    right: 20px;
}

.chat-editor-bar {
    margin-left: 20px !important;
    width: calc(100% - 40px) !important;
    border-radius: 0px !important;
    margin-top: 5px;
}

#customer-history-button {
    width: calc(100% - 20px);
}

#ticket-device-history-button {
    height: 40px;
    width: calc(100% - 20px);
    margin-left: 10px;
}

.ticket-summary-container {
    padding: 15px;
    border-radius: 7px;
}

#ticket-images {
    height: 280px;
}

#ticket-image-container {
    width: calc(100% - 30px);
    height: calc(100% - 75px);
    border-radius: 7px;
    overflow-x: scroll;
    padding: 15px;
    display: flex;
    flex-direction: row;
}

#ticket-image-add {
    width: 155px;
    height: 155px;
    min-width: 155px;
    min-height: 155px;
    border-radius: 7px;
    display: flex;
    font-size: 40px;
    background-color: rgb(45, 45, 45);
}

#ticket-add-icon {
    margin: auto;
}

#ticket-image-input {
    display: none;
}

.ticket-image-container {
    width: 145px;
    height: 145px;
    min-width: 145px;
    min-height: 145px;
    margin-right: 15px;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    padding: 5px;
    position: relative;
}

.ticket-image {
    max-width: 145px;
    max-height: 145px;
    margin: auto;
}

.ticket-image-remove {
    position: absolute;
    left: 136px;
    top: 2px;
    transition: 0.5s ease;
}

#ticket-image-display {
    display: flex;
    width: 100%;
    height: 100%;
}

.ticket-image-zoom {
    margin: auto;
    transition: 0.5s ease;
}

#ticket-image-return {
    text-shadow: 0px 0px 5px black;
    position: absolute;
    left: calc(100% - 40px);
    top: 0px;
    font-size: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: 0.5s ease;
    border-radius: 7px;
}

#ticket-image-expand {
    text-shadow: 0px 0px 5px black;
    position: absolute;
    left: calc(100% - 80px);
    top: 0px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: 0.5s ease;
    border-radius: 7px;
}

#ticket-image-restore {
    text-shadow: 0px 0px 5px black;
    position: absolute;
    left: calc(100% - 80px);
    top: 0px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    transition: 0.5s ease;
    border-radius: 7px;
    display: none;
}

#ticket-image-zoom-container {
    position: relative;
    padding-top: 40px;
    background-color: rgba(90, 90, 90, 0.5);
}

#ticket-information {
    height: 1045px;
}

#ticket-information-title {
    padding: 10px;
}

#check-list-container {
    height: 384px;
    overflow: auto;
    margin-left: 10px;
    width: calc(100% - 50px);
    padding: 15px;
}

#loading-placeholder {
    width: 100vw;
    height: 100vh;
    background-color: rgb(30, 30, 30);
    z-index: 1000;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}

.loader {
    position: relative;
    display: block;
    margin: auto;
    width: 120px;
    height: 120px;
    background: rgb(40, 60, 80);
    transform: rotateX(65deg) rotate(45deg);
    color: rgb(45, 45, 45);
    box-shadow: 0px 0px 5px black;
    animation: layers1 1s linear infinite alternate;
}

.loader:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(120, 120, 120, 0.5);
    animation: layerTr 1s linear infinite alternate;
}

@keyframes layers1 {
    0% {
        box-shadow: 0px 0px 0 0px
    }

    90%,
    100% {
        box-shadow: 20px 20px 0 -4px
    }
}

@keyframes layerTr {
    0% {
        transform: translate(0, 0) scale(1)
    }

    100% {
        transform: translate(-25px, -25px) scale(1)
    }
}

.grid-link {
    text-decoration: none;
}

.task-label {
    margin-top: 20px;
}

.ticket-task-label {
    margin-left: 20px;
}

.ticket-task-labour {
    margin-right: 10px;
    margin-bottom: 20px;
    width: 85px;
}

.ticket-task-labour-rate {
    margin-right: 15px;
    width: 80px;
    margin-bottom: 20px;
}

.ticket-task-labour-time {
    margin-right: 10px;
    width: 72px;
    margin-bottom: 20px;
}

.ticket-task-labour-hourly {
    height: 40px;
    width: 100px;
    margin-bottom: 20px;
}

.step-completed-cell {
    width: 135px;
    padding: 0px;
}

.part-tax-cell,
.sublet-cost-cell {
    width: 135px;
    padding: 0px;
}

.sublet-cost-cell input {
    margin-right: 0px;
    width: calc(100% - 15px);
}

.fees-amount-cell {
    width: 135px;
    padding: 0px;
}

.fees-amount-cell input {
    margin-right: 0px;
    width: calc(100% - 15px);
}

.ticket-task-breakdown {
    width: 100%;
    margin-top: 20px;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.ticket-task-breakdown td {
    padding: 10px;
    text-align: center;
}

.ticket-task-breakdown tr:first-child td {
    padding-bottom: 0px;
}

.ticket-task-breakdown td:not(:last-child) {
    padding: 10px;
    text-align: center;
    border-right: 1px solid rgb(45, 45, 45);
}

.task-container {
    position: relative;
    margin-bottom: 20px;
}

.expand-list-table {
    position: absolute;
    top: 7px;
    right: 5px;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.list-table-label {
    width: calc(100% - 5px);
    position: relative;
    cursor: pointer;
    background: rgb(90, 90, 90);
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
    padding: 5px 5px 5px 0px;
    margin-bottom: 5px;
}

.sublet-list-table,
.fees-list-table {
    display: none;
}

.step-completed-button {
    width: 135px;
    height: 40px;
}

#message-area,
#confirm-area {
    margin: auto;
    width: 800px;
    text-shadow: 0px 0px 5px black;
}

#message-close-button {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

#confirm-decline-button {
    width: calc(50% - 10px);
    height: 40px;
    margin-top: 20px;
}

#confirm-accept-button {
    width: calc(50% - 10px);
    height: 40px;
    margin-top: 20px;
    margin-left: 13px;
}

#ticket-existing {
    width: 800px;
}

#ticket-existing-container {
    height: 500px;
    overflow-y: auto;
}

.ticket-existing-button {
    width: 100%;
    height: 50px;
    display: flex;
}

.ticket-existing-button div {
    line-height: 50px;
    width: 25%;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

#ticket-existing-container .ticket-existing-button:not(:last-child) {
    margin-bottom: 10px;
}

#ticket-existing-create-new,
#ticket-existing-cancel {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.option-selected {
    border-radius: 7px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    transition: 0.5s ease;
    color: rgb(117, 117, 117);
    position: relative;
    margin-bottom: 11px;
    overflow: hidden;
    padding-right: 30px;
    display: flex;
}

.option-icon {
    position: relative;
    top: 50%;
    transform: translateY(-25%);
    margin-right: 5px;
}

.option-list-icon {
    width: 25px;
    text-align: center;
}

.option-arrow {
    flex-shrink: 0;
    position: relative;
    float: right;
    margin-top: 12px;
    margin-left: auto;
    right: -20px;
}

.option-sort-up {
    position: relative;
    transform: translateY(5px);
}

.option-sort-down {
    position: relative;
    transform: translateY(-3px);
}

.option-sort-icon {
    top: 25%;
    margin-left: 5px;
}

.option-items {
    background-color: rgba(50, 90, 130, 0.5);
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    position: absolute;
    width: 100%;
    z-index: 99;
    display: none;
}

.option-items div {
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    border-radius: 7px;
    transition: 0.5s ease;
    overflow: hidden;
}

.option-item-selected {
    color: rgb(175, 175, 175);
}

#auto-select-placeholder {
    background-color: rgba(50, 90, 130, 0.5);
    position: absolute;
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.search-container {
    padding: 20px;
    padding-bottom: 40px;
}

.search-icon {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto;
    position: relative;
    border: 3px solid rgb(175, 175, 175);
    border-radius: 50%;
    box-sizing: border-box;
    animation: animloader 2s linear infinite;
    box-shadow: 0px 0px 5px black;
}

.search-icon::after {
    content: '';
    box-sizing: border-box;
    width: 6px;
    height: 24px;
    background: rgb(175, 175, 175);
    transform: rotate(-45deg);
    position: absolute;
    bottom: -20px;
    left: 46px;
    box-shadow: 0px 0px 5px black;
}

@keyframes animloader {
    0% {
        transform: translate(-10px, -10px);
    }

    25% {
        transform: translate(-10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(-10px, -10px);
    }
}

.search-result {
    line-height: 40px;
    padding-left: 15px;
    border-radius: 7px;
    transition: 0.5s ease;
    text-shadow: 0px 0px 5px black;
    overflow: hidden;
}

.search-divider {
    margin-left: 10px;
    margin-right: 10px;
    border: none;
    height: 1px;
    box-shadow: 0px 0px 5px black;
    background-color: rgb(175, 175, 175);
}

.task-status-input {
    width: 220px;
    color: rgb(175, 175, 175);
}

.task-title {
    text-shadow: 0px 0px 5px black;
    font-size: 20px;
    margin-left: calc(50% - (250px + 4ch));
    margin-top: 0px;
    line-height: 40px;
}

.task-title-bar {
    display: flex;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.remove-task-button {
    position: absolute;
    right: 0px;
}

.ticket-breakdown-payment-row {
    width: 100%;
    display: flex;
    position: relative;
}

#ticket-deposits-list {
    width: 760px;
    border-radius: 7px;
    margin-top: 20px;
    padding: 20px;
    overflow-y: auto;
}

#ticket-deposits {
    width: 150px;
}

.ticket-breakdown-deposit {
    width: 120px;
    height: 41px;
    padding-top: 1px;
}

.ticket-breakdown-deposit-area {
    width: 165px;
    display: inline-block;
    margin-left: 20px;
    position: relative;
    top: -10.5px;
}

#ticket-deposit-note {
    width: 350px;
    margin-left: 20px;
    margin-right: 20px;
}

#ticket-deposit-add-button {
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
}

#ticket-deposits-list .deposit-line:not(:last-child) {
    margin-bottom: 15px;
}

.deposit-line {
    padding: 5px;
    border-radius: 7px;
    position: relative;
    height: 40px;
    line-height: 40px;
    display: flex;
    text-shadow: 0px 0px 5px black;
}

.deposit-line-item {
    margin-left: 10px;
    margin-right: 20px;
}

.remove-deposit-button {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    top: 10px;
    right: 10px;
    position: absolute;
    line-height: 30px;
}

.deposit-checkout-button {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    top: 10px;
    right: 60px;
    position: absolute;
    line-height: 30px;
}

#ticket-coupon {
    width: 613px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#ticket-coupon-apply-button {
    height: 40px;
    width: 150px;
}

#signature-clear-button {
    height: 40px;
    position: absolute;
    right: 20px;
    bottom: 531px;
}

#update-icon {
    position: fixed;
    top: 70px;
    right: 20px;
    display: none;
}

.icon-rotate {
    animation: spin 2s infinite linear;
    text-shadow: 0px 0px 5px black;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.page-select-button {
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.page-select-button:disabled {
    background-color: rgb(30, 50, 70);
    box-shadow: 0px 0px 5px black;
    color: rgb(120, 120, 120);
    text-shadow: 0px 0px 5px black;
}

.page-select-button:disabled:hover {
    background-color: rgb(30, 50, 70);
    box-shadow: 0px 0px 5px black;
    color: rgb(120, 120, 120);
    text-shadow: 0px 0px 5px black;
}

.page-select-button:not(:first-child) {
    margin-left: 5px;
}

.page-select-input {
    margin-top: 20px;
    width: 60px;
    padding: 0px;
    text-align: center;
    margin-left: 5px;
}

#page-minus-2-Button,
#page-minus-1-Button {
    display: none;
}

.page-select-div {
    display: inline-block;
}

.tickets-per-page-div {
    float: right;
    margin-top: 20px;
}

#home-sort-button {
    width: 170px;
}

#home-status-filter-button {
    width: 230px;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hide-on-small {
    display: inline-block;
    white-space: pre;
}

.show-on-small {
    display: none;
    white-space: pre;
}

.strikethrough {
    text-decoration: line-through;
}

#mobile-link,
#phone-link {
    text-decoration: none;
}

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

#ticket-breakdown-amount-auto,
#ticket-breakdown-amount-auto-2 {
    z-index: 1;
    height: 30px;
    width: 30px;
    margin-top: 5px;
    margin-left: 360px;
}

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

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

.ticket-label-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2in;
    height: 1in;
    overflow: hidden;
}

.reports-filter-label {
    margin-top: 12px;
    margin-right: 5px;
}

.reports-filter-date {
    margin-right: 20px;
}

.check-list-employee-permissions {
    height: 290px !important;
}

#confirm-pin-button {
    height: 40px;
    margin-top: 20px;
    margin-left: 13px;
    padding-left: 20px;
    padding-right: 20px;
}

#cancel-pin-button {
    height: 40px;
    margin-top: 20px;
    width: 100%;
}

#confirm-pin-area {
    margin: auto;
    width: 381px;
    text-shadow: 0px 0px 5px black;
}

#square-settings-toggle {
    height: 40px;
    margin-top: 20px;
    width: 200px;
    margin-left: calc(50% - 100px);
}

#square-settings-area {
    margin-top: 20px;
}

#square-create-device,
#square-list-devices {
    height: 40px;
    width: calc(50% - 20px);
    margin-left: 10px;
}

.square-check-list {
    height: 39px;
    border-radius: 7px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    margin-bottom: 30px;
    width: calc(100% - 40px);
}

.square-dropdown {
    height: 42px;
    width: calc(100% - 65px);
    margin-bottom: 30px;
}

#square-tipping-options {
    margin-bottom: 0px !important;
}

#ticket-label-barcode {
    width: 100%;
}

#ticket-label-ticket-id,
#ticket-label-customer-name {
    font-size: 14px;
}

#ticket-label-ticket-id {
    margin-top: 0.1in;
}

.quick-sale-container {
    width: 640px;
}

#quick-sale-description {
    width: 600px;
    outline: none;
}

#quick-sale-amount {
    margin-top: 20px;
    width: 290px;
}

#quick-sale-tax {
    width: 145px;
    height: 40px;
    margin-left: 15px;
    margin-top: 20px;
}

.quick-sale-fee-dropdown {
    float: right;
}

#quick-sale-fee {
    width: 105px;
    height: 40px;
    margin-left: 15px;
    margin-top: 21px;
}

#quick-sale-estimate {
    margin-top: 20px;
    margin-left: 400px;
    width: 200px;
}

#quick-sale-estimate-subtotal,
#quick-sale-estimate-tax,
#quick-sale-estimate-fee,
#quick-sale-estimate-total {
    float: right;
}

#quick-sale-confirm,
#quick-sale-cancel {
    width: 640px;
    height: 40px;
    margin-top: 20px;
}

#customer-information-contact-method,
#customer-information-country {
    width: calc(100% - 65px);
    height: 41px;
    margin-left: 10px;
    padding-top: 1px;
}

#customer-view-filter-customer-amount,
#customer-view-filter-open-counter {
    margin-top: 20px;
}

.customer-view-stat {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 7px;
    margin-right: 15px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    width: fit-content;
    display: inline-block;
}

#list-display-customer-jobs {
    height: calc(100% - 310px);
    overflow-y: auto;
    padding: 10px;
}

.option-selector-line {
    width: 100%;
    display: flex;
}

.customer-view-dropdown-container {
    width: calc(50% - 55px);
    margin-right: 65px;
}

.customer-view-dropdown-container:last-child {
    margin-right: 0px;
}

.customer-view-dropdown {
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100%;
}

#list-widget-customer-jobs .filter-right {
    float: right;
    margin-right: 0px;
    margin-top: 20px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.settings-subscription-agreement,
#square-subscription-manager-area {
    margin-top: 20px;
}

#square-subscription-list {
    width: calc(50% - 60px);
    float: left;
    margin-left: 20px;
    overflow-y: auto;
}

#square-subscription-area {
    width: calc(50% - 20px);
    float: left;
    margin-left: 10px;
}

#square-subscription-variation-area {
    max-height: 1127px;
    overflow-y: auto;
}

.square-subscription-currency {
    margin-bottom: 20px;
}

.square-subscription-plan-name-label {
    float: left;
}

#square-subscription-plan-name {
    width: calc(100% - 16px);
    margin-bottom: 20px;
}

.square-subscription-variation {
    text-align: left;
    margin-top: 20px;
}

.square-subscription-variation:first-child {
    margin-top: 0px;
}

.square-subscription-variation-name {
    width: calc(100% - 69px);
    margin-bottom: 20px;
}

.square-subscription-remove {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 15px;
    margin-top: 7px;
    float: right;
}

.square-subscription-plan-details {
    margin-bottom: 20px;
    outline: none;
}

.square-subscription-device-amount {
    margin-bottom: 20px;
    width: calc(100% - 18px);
}

.square-subscription-variation-ordinal {
    width: 75px;
}

.square-subscription-variation-cadence {
    width: calc(100% - 142px);
    margin-top: 20px;
    margin-left: 0px;
    margin-bottom: 20px;
    float: left;
}

.square-subscription-variation-period {
    width: 65px;
    margin-top: 20px;
    margin-left: 15px;
}

.square-subscription-variation-phase {
    margin-top: 20px;
}

.square-subscription-variation-phase:first-child {
    margin-top: 0px;
}

.square-subscription-variation-phase-pricing-type {
    margin-left: 0px;
    float: left;
    width: calc(50% - 54px);
    margin-right: 15px;
    margin-bottom: 0px;
}

.square-subscription-variation-phase-amount {
    width: calc(50% - 23px);
}

.square-subscription-add-phase {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

#square-subscription-area {
    text-align: center;
}

.square-subscription-add-variation,
.square-subscription-save-plan {
    width: calc(50% - 10px);
    height: 40px;
    margin-top: 20px;
}

.square-subscription-save-plan {
    margin-left: 15px;
}

.square-subscription-add-plan {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.square-subscription-list-label {
    margin-left: 20px;
}

.square-subscription-list-button {
    margin-bottom: 20px;
}

.square-subscription-list-button:last-child {
    margin-bottom: 0px;
}

.square-subscription-list-variation-area {
    margin-top: 20px;
}

.square-subscription-list-phase-area {
    margin-bottom: 20px;
}

.square-subscription-list-phase-area:first-child {
    margin-top: 10px;
}

.square-subscription-list-phase-area:last-child {
    margin-bottom: 0px;
}

.settings-navigation {
    overflow: hidden;
    width: calc((8vw * 8) + (20px * 9) + (20px * 16));
    border-radius: 7px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    height: 50px;
    line-height: 50px;
    background-color: rgb(40, 60, 80);
}

.settings-navigation a {
    float: left;
    text-align: center;
    text-decoration: none;
}

.settings-navigation-dropdown {
    float: left;
    overflow: hidden;
}

.settings-navigation-dropdown .settings-navigation-dropdown-button {
    border: none;
    outline: none;
    margin: 0;
    transition: 0.5s ease;
    height: 50px;
    width: 260px;
    text-align: left;
}

.settings-navigation-dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(50, 90, 130, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    width: 260px;
    z-index: 99;
    border-radius: 7px;
    transition: 0.5s ease;
}

.settings-navigation-dropdown-content a {
    float: none;
    text-decoration: none;
    display: block;
    text-align: left;
    border-radius: 7px;
    transition: 0.5s ease;
}

.settings-navigation-dropdown-sub {
    float: left;
    overflow: hidden;
    width: 100%;
}

.settings-navigation-dropdown-sub .settings-navigation-dropdown-button-sub {
    border: none;
    outline: none;
    margin: 0;
    min-width: 100%;
    text-align: left;
    transition: 0.5s ease;
    background-color: rgba(0, 0, 0, 0);
    height: 50px;
}

.settings-navigation-dropdown-content-sub {
    display: none;
    position: absolute;
    background-color: rgba(50, 90, 130, 0.5);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    min-width: 160px;
    z-index: 98;
    border-radius: 7px;
    min-width: 100%;
    transition: 0.5s ease;
}

.settings-navigation-dropdown-content-sub a {
    float: none;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: 0.5s ease;
}

#settings-navigation-save {
    border: none;
    border-radius: 7px;
    height: inherit;
    background-color: inherit;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.settings-navigation-right {
    float: right;
}

.settings-navigation-link {
    padding-left: 15px;
    padding-right: 15px;
}

.setting-integration-dropdown {
    height: 42px;
    width: calc(100% - 65px);
    margin-bottom: 0;
}

#square-location-create-area {
    width: 100%;
    padding: 0px 10px 0px 10px;
}

#square-location-list-area {
    margin: 0px 10px 0px 10px;
}

#square-location-employee-area {
    margin: 0px 10px 0px 10px;
}

.location-hours-button {
    padding: 0;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

#square-update-location-button,
#square-add-location-button,
#square-remove-location-button {
    height: 40px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 20px;
}

#square-add-location-employee-button {
    height: 40px;
    width: calc(50% - 20px);
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 10px;
    margin-top: 20px;
}

#square-remove-location-employee-button {
    height: 40px;
    width: calc(50% - 20px);
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 10px;
    margin-top: 20px;
    margin-left: 15px;
}

#square-location-area {
    margin-top: 20px;
}

.square-location-information-input {
    margin-bottom: 10px;
    width: calc(100% - 30px);
}

.square-location-information-input-dropdown {
    margin-bottom: 10px;
    width: calc(100% - 57px);
}

.square-location-hours-input {
    margin-bottom: 10px;
    margin-right: 15px;
    padding-right: 10px;
}

.square-location-hours-label {
    margin-right: 15px;
}

.square-location-hours-label-spacer {
    margin-top: 10px;
}

.square-location-hours-area {
    padding-left: 10px;
}

#square-location-hours-table {
    margin-right: 20px;
}

.square-location-lists-row {
    margin-top: 10px;
}

.square-location-layout {
    margin-bottom: 20px;
}

.square-location-layout:last-child {
    margin-bottom: 0;
}

#square-location-employee-list {
    width: 600px;
}

#square-location-employee-list-add-button,
#square-location-employee-list-close-button {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.load-list {
    display: flex;
    margin: auto;
    vertical-align: middle;
    height: 100%;
    text-align: center;
}

.empty-list {
    margin: auto;
    color: rgb(117, 117, 117);
    text-shadow: 0px 0px 5px black;
    text-align: center;
}

.list-item {
    margin-bottom: 10px;
}

.list-item:last-child {
    margin-bottom: 0px;
}

.list-item-selected {
    box-shadow: 0px 0px 2px 2px white !important;
}

.save-button-active {
    background: rgb(55, 75, 95);
    color: white;
    text-shadow: 0px 0px 5px rgb(175, 175, 175);
    box-shadow: inset 0px 0px 2px 2px white !important;
}

#stripe-subscriptions-area {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}

#stripe-subscriptions-product-editor {
    margin-right: 10px;
    border-radius: 7px;
    box-shadow: inset 0px 0px 5px black;
    padding: 15px;
}

.stripe-input {
    width: calc(100% - 17px);
    margin-bottom: 10px;
}

#stripe-subscriptions-product-description {
    margin-bottom: 10px;
    outline: none;
    padding: 15px;
}

#stripe-subscriptions-product-clear-button {
    height: 40px;
    width: calc(50% - 10px);
    margin-top: 10px;
}

#stripe-subscriptions-product-edit-button {
    height: 40px;
    width: calc(50% - 10px);
    margin-top: 10px;
    margin-left: 15px;
}

#stripe-subscriptions-product-list-area {
    margin-left: 10px;
}

#stripe-subscriptions-product-interval-area {
    display: none;
}

.stripe-api-key-area {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}

.stripe-api-input {
    width: calc(100% - 17px);
    margin-bottom: 10px;
}

.stripe-api-input:last-child {
    margin-bottom: 0px;
}

#device-information-pass-code {
    width: calc(100% - 92px) !important;
}

#device-information-toggle-code {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

#customer-new,
#lead-new {
    height: 90px !important;
}

#leads-search-bar {
    height: 80px !important;
}

#leads-filter {
    height: 80px !important;
    display: flex;
}

#list-widget-leads {
    height: 500px;
}

#leads-view-customer {
    height: 220px;
    padding-left: 10px;
    padding-right: 10px;
}

#leads-view-description {
    height: 700px;
}

.lead-column-input {
    width: calc(100% - 37px);
    margin-left: 10px;
    margin-bottom: 10px;
}

#leads-view-description-box {
    height: 400px;
    outline: none;
}

#leads-view-create-button {
    height: 60px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%
}

#leads-view-remove-button {
    height: 60px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    width: calc(50% - 10px);
    display: none;
}

#leads-view-convert-button {
    height: 60px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(50% - 10px);
    display: none;
}

#customer-referred {
    margin-left: 10px;
    width: calc(100% - 65px);
}

#customer-create-cancel-button {
    width: calc(50% - 20px);
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    margin-left: 10px;
}

#customer-create-confirm-button {
    width: calc(50% - 20px);
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
}

#customer-list-new {
    padding-left: 10px;
    padding-right: 10px;
}

#existing-list {
    width: 600px;
}

#existing-list-area {
    height: 600px;
    width: calc(100% - 40px);
    overflow-y: auto;
}

#existing-list-cancel-button {
    height: 40px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    width: calc(50% - 10px);
}

#existing-list-confirm-button {
    height: 40px;
    margin-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(50% - 10px);
}

#customer-view-device-add {
    height: 40px;
    width: 100%;
    margin-bottom: 20px;
}

#customer-view-device-search-bar {
    margin-bottom: 20px;
}

#list-display-device {
    height: calc(100% - 270px);
    overflow-y: auto;
}

#device-overlay {
    width: 600px;
    padding-left: 10px;
    padding-right: 10px;
}

#device-overlay-cancel-button {
    width: calc(50% - 20px);
    height: 40px;
    margin-left: 10px;
    margin-right: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

#device-overlay-create-button {
    width: calc(50% - 20px);
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
}

#leads-sort-button {
    width: 200px !important;
}

#leads-status-filter-button {
    width: 210px !important;
}

.filter-right:first-of-type {
    margin-left: auto;
    margin-right: 0px;
}

.filter-right {
    margin-left: 20px;
    margin-right: 0px;
}

#leads-closed-button {
    width: 180px;
}

.settings-column {
    margin: 0px 10px 10px 10px;
    border-radius: 7px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.column-input-small {
    width: calc(100% - 37px);
    margin-left: 10px;
    margin-bottom: 10px;
}

.column-input-small-option {
    width: calc(100% - 65px);
    margin-left: 10px;
    margin-bottom: 10px;
}

.sticky {
    position: fixed;
    top: 70px;
}

#settings-generate-button {
    width: calc(100% - 20px);
    height: 40px;
    margin-left: 10px;
}

.key-input {
    width: calc(100% - 50px);
    margin-left: 10px;
    padding: 15px;
    outline: none;
    border-radius: 7px;
    margin-bottom: 20px;
}

.stripe-location-manager {
    display: flex;
    width: calc(100% - 20px);
    gap: 20px;
    margin-top: 20px;
    padding: 0 10px 0 10px;
}

.stripe-location-manager .editor {
    width: 50%;
    flex-shrink: 0;
}

.stripe-location-manager .editor .editor-form button {
    height: 40px;
    width: calc((100% / 3) - 15px);
    margin: 20px 15px 0 0;
}

.stripe-location-manager .editor .editor-form button:last-of-type {
    margin-right: 0;
}

.stripe-location-manager .list {
    width: 50%;
    flex: 1;
}

#stripe-location-list {
    height: 570px;
    overflow-y: auto;
}

.stripe-location-manager .editor .editor-form input {
    width: calc(100% - 20px);
    margin-bottom: 10px;
}

#stripe-location-country {
    width: calc(100% - 48px);
}

.stripe-location-manager .list .list-container div button {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}

.stripe-terminal-manager {
    display: flex;
    width: calc(100% - 20px);
    gap: 20px;
    margin-top: 20px;
    padding: 0 10px 0 10px;
}

.stripe-terminal-manager .editor {
    width: 50%;
}

.stripe-terminal-manager .list {
    width: 50%;
    flex: 1;
}

.stripe-terminal-manager .editor .editor-form input {
    width: calc(100% - 20px);
    margin-bottom: 10px;
}

.stripe-terminal-manager .editor .editor-form button {
    height: 40px;
    width: calc(50% - 12px);
    margin: 20px 15px 0 0;
}

.stripe-terminal-manager .editor .editor-form button:last-of-type {
    margin-right: 0;
}

#stripe-terminal-location {
    width: calc(100% - 48px);
}

#stripe-terminal-list {
    height: 278px;
    overflow-y: auto;
}

.stripe-terminal-layout {
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#stripe-terminal-confirm {
    width: 600px;
}

#stripe-terminal-message {
    margin-top: 20px;
}

#stripe-terminal-confirm button {
    width: calc(50% - 10px);
    height: 40px;
    margin-top: 20px;
    margin-right: 15px;
}

#stripe-terminal-confirm button:last-of-type {
    margin-right: 0px;
}

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