body {
    font-family: Inter, sans-serif;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-color: #fcfcfc;
}
* {
    box-sizing: border-box;
}
.login-side {
    background-color: #1ebbd7;
}
.container {
    /* max-width: 1380px; */
    padding: 0 2rem;
}
.order-page {
    padding: 1rem;
}
.order-page h2 {
    margin-bottom: 1.5rem !important;
}
.form-inline {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    margin: 40px auto 40px auto;
    /* margin-bottom: 40px; */
    background-color: #1ebbd7;
    border: none;
    border-radius: 4px;
    width: auto;
    height: 48px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}
.btnChLogo {
    margin: 20px 10px 40px auto!important;
}
.btnChLogo.deactivate-btn {
    margin: 0 0 20px 0!important;
}
.signup-btn {
    margin: 20px auto !important;
}
.forgot-btn {
    margin-top: 1rem;
}
.btn:hover,
.custom-btn:hover,
.note:hover {
    background-color: #42637d;
}
.btn::after,
.custom-btn::after {
    content: url("../images/arrow.svg");
    position: relative;
    top: 4px;
    margin-left: 12px;
}
.add-more {
    padding-bottom: 55px;
}
.btn-plus,
.remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    margin: 0 auto 8px!important;
    background-color: #1ebbd7;
    border: none;
    border-radius: 4px;
    width: auto;
    height: 48px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}
.btn-plus {
    position: relative;
    top: -55px;
    left: -29%;
    margin: 16px 0;
}
.i-plus,
.i-minus {
    margin-left: 8px;
}
.sign-up {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    letter-spacing: 0.15px;
    color: #333333;
}
.sign-up a,
.forgot-pass a {
    color: #1ebbd7;
    text-decoration: none;
}
.row {
    display: flex;
    flex-flow: row;
    width: 100%;
}
.box {
    display: flex;
    flex-flow: column;
    width: 100%;
}
.left-box {
    margin-right: 32px;
}
.forgot-pass {
    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
}
.forgot-pass a {
    font-size: 14px;
    letter-spacing: 0.25px;
}
@media (min-width: 1536px) {
}
@media(max-width: 1440px) {
    .logo {
        margin-top: 0!important;
    }
}
@media (max-width: 800px) {
    .form-inline input {
        margin: 10px 0;
    }

    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
}
.error {
    text-align: left;
    margin: auto;
    /* padding: 1%; */
    /* width: 50%; */
    color: #c81927;
    border: 1px solid #c81927 !important;
}
.error-message {
    color: #c81927;
    margin-top: 5px;
    font-size: 12px;
    position: relative;
    top: -16px;
    left: 1rem;
}
.success {
    text-align: center;
    margin: auto;
    padding: 1%;
    width: 50%;
    border: 1px solid blue;
}
title {
    text-align: center;
}
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
}
.logo img {
    position: relative;
    top: 1rem;
}
.img-a {
    padding: 0;
    padding-top: 4px;
}
.img-a:hover {
    background-color: transparent !important;
}
.login_form {
    text-align: center;
    margin: auto;
    width: 712px;
    background-color: #fff;
    padding: 1rem;

    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.login_form h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 600;
}
.text {
    display: flex;
    text-align: left;
    font-size: 16px;
    font-family: Inter, sans-serif;
    line-height: 24px;
    letter-spacing: 0.5px;
}

.text-notice {
    display: inline-block;
    padding: 0 32px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #ff600a;
}
.error-message {
    color: #c81927;
    font-size: 12px;
    text-align: left !important;
}
.input {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}
.input-bntLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.input__label {
    position: absolute;
    left: 0;
    top: -7px;
    margin-left: 12px;
    padding: 0 4px;
    font-size: 12px;
    margin-top: 16px;
    background-color: #fff;
    letter-spacing: 0.4px;
}
.input__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 56px;
    padding: 1rem;
    border: 1px solid #333333;
    border-radius: 4px;
    margin: 16px 0;
    background-color: #fff;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: 0.5px;
    outline: none;
}
.input-disabled {
    color: #adadad;
    cursor: not-allowed;
}

::placeholder {
    color: #adadad;
}
#togglePassword,
#confirmTogglePassword {
    margin-left: -36px;
    margin-top: 36px;
    cursor: pointer;
    color: #adadad;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* background-color: #333; */
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active),
.btn-link:hover {
    background-color: #42637d;
}

.active {
    background-color: #42637d;
    border-radius: 4px;
    margin: 1rem;
}

.button {
    border: none;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.button2 {
    background-color: #e7e7e7;
    color: #008cba;
}
.custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 146px;
    margin: 0 auto;
    background-color: #1ebbd7;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.btn-link {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    color: white;
    float: right;
    font-family: Inter, sans-serif;
    font-size: inherit;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s;
}
/* nav */
.nav {
    height: 56px;
    background-color: #1ebbd7;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2),
        0px 1px 10px 0px rgba(0, 0, 0, 0.12),
        0px 4px 5px 0px rgba(0, 0, 0, 0.14);
}
.left {
    display: flex;
    align-items: center;
}
.left li {
    margin-right: 1rem;
}
.header-logo:hover a {
    background-color: transparent !important;
}
.right {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
.btn-right {
    margin-left: 1rem;
}
.nav-btn {
    color: #fff;
    padding: 8px 16px;
    /* background: #42637d; */
    margin-right: 32px;
    border-radius: 8px;
    transition: 0.3s;
}

.orders-title {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.orders-title h4 {
    font-size: 2rem;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 40px;
}
.note-title {
    width: 100%;
    margin-bottom: 0;
}
.sync-button {
    display: flex;
}
.sync-button,
.download-btn-bulk,
.search {
    align-items: center;
    background: #1ebbd7;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: 0.3s all;
}
.sync-button::before {
    content: url("../images/sync.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.sync-button:hover,
.download-btn-bulk:hover,
.search:hover,
.edit-acc:hover {
    background: #42637d;
}
.note,
.edit-acc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 146px;
    margin: 0 auto;
    background-color: #1ebbd7;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.edit-acc {
    width: 220px;
    margin-top: 1.5rem;
}
.note:disabled,
.edit-acc:disabled {
    background-color: #ebebeb;
    color: #adadad;
    cursor: not-allowed;
}
.edit-acc:disabled::before {
    content: url("../images/check.svg");
}
.note::before {
    content: url("../images/note-white.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.edit-acc::before {
    content: url("../images/check-white.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.date-pick {
    display: inline-flex;
}
.date-pick input {
    margin-right: 1.5rem;
}
#customers,
#order-customers,
#customer-info {
    font-family: Inter, sans-serif;
    border-collapse: collapse;
    width: 100%;
    display: flex;
    flex-flow: column;
    width: 100%;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
#order-customers,
#customer-info {
    box-shadow: none;
}
.table-titles {
    background: #f7f7f7;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem;
}

.table-titles th {
    color: #adadad;
    font-size: 1rem;
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding-right: 20px;
    text-align: left;
}

.table-titles th:nth-child(3),
.table-titles th:nth-child(4) {
    padding-left: 35px;
}
.table-titles.merchant th {
    padding-left: 10px;
}

.table-titles.merchant th:last-child {
    text-align: right;
}
.table-titles.merchant th:nth-child(6),
.table-titles.merchant th:nth-child(7),
.table-titles.merchant th:nth-child(8) .order-rows.merchant td:nth-child(6),
.order-rows.merchant td:nth-child(7),
.order-rows.merchant td:nth-child(8) {
    width: 166px !important;
}
.order-rows.merchant td:nth-child(7) {
    text-align: left;
}
.action-invoice {
    width: 100px !important;
}

.checkbox-td {
    width: 1%;
    white-space: nowrap;
}

.order-rows {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #ebebeb;
}

.order-rows td {
    text-align: left;
    padding-right: 20px;
}

.table-titles th:not(.checkbox-td),
.order-rows td:not(.checkbox-td) {
    width: calc((100% - 1%) / 8);
}

.table-titles.view-order th:not(.checkbox-td),
.order-rows.td-order td:not(.checkbox-td) {
    width: 650px!important;
}
.order-rows td:nth-child(3),
.order-rows td:nth-child(4) {
    padding-left: 35px;
}

.order-rows td:nth-child(8),
.order-rows td:nth-child(9) {
    width: 100px;
    padding-right: 35px;
}

.order-state li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.actions a {
    margin: 0 5px;
    text-decoration: none;
    color: #000;
}

.admin-account th {
    text-align: left;
}
.sort {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.sort::after {
    content: url("../images/sort.svg");
    margin-left: 1rem;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
}

.status {
    display: flex;
    justify-content: flex-start;
}
.actions {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}
.actions a {
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    position: relative;
    transition: all ease 0.5s;
    color: #adadad;
    text-decoration: none;
}
.actions a:hover i {
    color: #42637d;
    transition: 0.5s;
}
.admin-actions a {
    left: 0;
}
.ri-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
    height: 1rem;
    text-align: center;
}

.tooltip {
    visibility: hidden;
    display: flex;
    width: 20auto;
    padding: 2px 8px;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    background: #171923;
    color: white;
    font-size: 14px;
    font-family: Inter, sans-serif;
    line-height: 20px;
    position: relative;
    /* left: -92px; */
    top: 8px;
    text-align: center;
}
.tooltip::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #333 transparent;
}
.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
/* view order */
.wrapper {
    margin: 2.5rem 2rem;
    padding: 1.5rem 0.5rem;
    border-radius: 4px;
    background: white;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.wrapper h4 {
    margin: 0;
}
.wrap-all {
    width: 100%;
}
.orders-title .right a {
    text-decoration: none;
    color: #1ebbd7;
}
.download-btn,
.edit-btn,
.note-btn {
    background: transparent;
    display: flex;
    padding: 0.5rem 1rem;
    align-items: center;
    align-self: stretch;
    font-size: 16px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}
.download-btn-bulk {
    background-color: #1ebbd7;
    margin: 16px 0;
}
.download-btn-bulk::before {
    content: url("../images/download.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.back {
    color: #1ebbd7 !important;
}
.back:hover,
.back:focus,
.back:focus-visible,
.back:active {
    border: none;
    outline: none;
}
.download-btn::before {
    content: url("../images/download-blue.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.edit-btn::before {
    content: url("../images/pen-blue.svg");
    position: relative;
    right: 8px;
    top: 2px;
}
.note-btn::before {
    content: url("../images/right.svg");
    position: relative;
    right: 8px;
    top: 4px;
}
.view-order {
    margin: 0;
}
.view-order th {
    width: auto;
}
.td-order {
    margin: 0;
    justify-content: flex-start;
    align-items: stretch;
}
.td-order td {
    color: #333333;
    font-size: 16px;
    font-family: Inter, sans-serif;
    line-height: 24px;
    letter-spacing: 0.5px;
    width: 500px;
}
.edit-order {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
.edit-order-container {
    display: flex;
    flex-flow: row;
}
.order-box {
    width: 50%;
    padding: 0;
    padding-bottom: 1rem;
}
.note-form {
    width: 100%;
}
.note-input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 3rem;
}
.main-content {
    background-color: #fcfcfc;
}
.my-acc-title {
    font-size: 2rem;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 40px;
    margin: 40px 0;
    color: #333;
}
.my-acc {
    margin-bottom: 1.5rem !important;
}
.mb-0 {
    font-size: 1.5rem;
    font-family: Inter, sans-serif;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: #333;
    margin-bottom: 0;
}
.shadow {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.bg-secondary {
    background-color: #fff;
}
.form-control-alternative {
    font-size: 1rem;
    line-height: 1.5;
    display: block;
    width: 100%;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: #8898aa;
    border: 1px solid #cad1d7;
    border-radius: 0.375rem;
    background-clip: padding-box;
    box-shadow: none;
}
.card {
    position: relative;
    min-width: 696px;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
    background-color: #fff;
    background-clip: border-box;
    width: 696px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.card-body {
    padding: 1rem;
    flex: 1 1 auto;
}
.templates {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.template-card {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: inherit;
    width: 25%;
    border-radius: 4px;
    margin-right: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}
.template-card:last-child {
    margin-right: 0;
}
.template-card:hover {
    cursor: pointer;
}
.template-label {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: inherit;
    height: 100%;
    cursor: pointer;
}
.template-label input {
    cursor: pointer;
}
#html {
    margin-right: 0.5rem !important;
}
.mail {
    visibility: hidden;
}
.error-label {
    color: #c81927;
}
.alert {
    color: #c81927;
    display: flex;
    justify-content: center;
    margin-left: 16px;
    padding: 0;
    position: relative;
    top: -10px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.25px;
}
.closebtn {
    cursor: pointer;
    margin-right: 4px;
}
.alert-message {
    visibility: hidden;
    color: #333;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-radius: 4px;
    background: #f6ded2;
    width: fit-content;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
    margin: auto;
    margin-top: 16px;
}
.alert-message::before {
    content: url(../images/attention.svg);
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 8px;
}
.alert.info,
.alert.info-activated,
.alert.info-deactivated {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    padding: 16px;
    background: #66de66ed;
    width: fit-content;
    margin: 16px auto;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
}
.alert.info-deactivated {
    background: #c81927 !important;
}

/* admin  */
.avatar-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 20%;
}

.avatar-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.avatar-card a {
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}
.avatar-card a:hover {
    color: #1ebbd7;
}
/* .checkbox-td {
    width: 50% !important;
} */

.order-td a {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    top: 0;
    left: 1rem;
    transition: all ease 0.5s;
    color: #adadad;
    text-decoration: none;
}
.order-td a:hover {
    color: #42637d;
    transition: 0.5s;
}

.deactivate {
    color: #c81927 !important;
    word-break: keep-all;
}
.deactivate-btn {
    background: #c81927 !important;
    border-radius: 4px;
    margin: 1rem 0;
    padding: 12px 24px;
}
.deactivate-btn:hover {
    background: #9c141f !important;
}
.btn a {
    color: white !important;
}
.pass-btn::after,
.deactivate-btn::after,
.order-btn::after {
    content: "";
    margin: 0;
}
.activate {
    color: #00d100 !important;
    word-break: keep-all;
}

.admin-table td,
.admin-table th {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}
.admin-table th:nth-child(5) {
    padding-left: 25px;
}
.admin-table th:nth-child(7) {
    padding-left: 25px;
}

.admin-table td:nth-child(1),
.admin-table td:nth-child(2) {
    padding-right: 35px;
}
.admin-table th:nth-child(5),
.admin-table th:nth-child(6),
.admin-table th:nth-child(7),
.admin-table th:nth-child(8),
.admin-table td:nth-child(5),
.admin-table td:nth-child(6),
.admin-table td:nth-child(7),
.admin-table td:nth-child(8) {
    width: 160px !important;
    text-align: left;
}
/* pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 1.5rem 0;
}
.pagination-arrow {
    display: flex;
}
.current-page {
    display: flex;
    width: 28px;
    height: 28px;
    padding: 0px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #ebebeb;
}
.other-pages {
    display: flex;
    width: 28px;
    height: 28px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    color: #adadad;
    /* Subtitle 1 */
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}
.pagination a,
.pagination span {
    margin-left: 12px;
    text-decoration: none;
}
.table-status {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1rem;
    width: fit-content;
}
.table-status th {
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
}
.table-status th a {
    text-decoration: none;
    color: #adadad;
    text-align: center;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    padding: 12px;
}
.status-active {
    color: #1ebbd7 !important;
    border-bottom: 2px solid #1ebbd7;
}
li::marker {
    width: 8px;
    height: 8px;
}
.websites-acc {
    width: 696px;
    margin: 0 auto;
}
.websites-title {
    margin-top: 3rem;
}
.websites-table {
    margin-bottom: 3rem;
}
.websites-tr {
    background: #f7f7f7;
    height: 60px;
}
.websites td {
    height: 48px;
}
.websites-btn {
    color: #1a212d;
    width: 1.5rem;
    height: 1.5rem;
    text-decoration: none;
}
.wrap-text {
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 3rem 0;
}
.wrap-btn {
    margin: 0;
}