/*!
Theme Name: THCmedia-company
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: thcmedia-company
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

THCmedia-company is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


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

:root {
    --text-color: #1a1a1a;
    --neutral-80-color: #333333;
    --neutral-60-color: #666666;
    --neutral-40-color: #808080;
    --neutral-20-color: #cccccc;
    --neutral-5-color: #f2f2f2;
    /*--primary-color-1: #204ec6;*/
    --primary-color-1-light: #204ec699;
    --primary-color-1-dark: #132f77;
    --primary-color-2: #9ec1f6;
    --primary-color-2-light: #9ec1f64d;
    --primary-color-2-dark: #6f87ac;
    --secondary-color-1: #7b73db;
    --secondary-color-1-light: #7b73db80;
    --secondary-color-1-dark: #453f8a;
    --secondary-color-2: #f1c329;
    --secondary-color-2-light: #f1c32980;
    --secondary-color-2-dark: #b2901e;
    --secondary-color-3: #00c7be;
    --secondary-color-3-light: #00c7beb2;
    --secondary-color-3-dark: #00908a;
    --additional-color-1: #aa0000;
    --additional-color-2: #ffcc00;
    --additional-color-3: #18aa2e;
    --additional-color-4: #ff2d55;
    --background-color: #f6f6f6;
    --background-form: #ffffff;
    --disable-color-1: #999999;
    --disable-color-2: #ccd0d6;
    --invoice: #06066F;
    --filter-primary-color: brightness(0) saturate(100%) invert(29%) sepia(82%) saturate(1649%) hue-rotate(206deg) brightness(82%) contrast(96%);
}

html {
    margin: 0 !important;
    box-sizing: border-box;
    font-size: 14px;
}

body {
    position: relative;
    font-family: "Poppins", sans-serif;
    margin: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    overflow-wrap: break-word;
    color: var(--primary-color-1);
    font-weight: 600;
}

a {
    text-decoration: none !important;
    color: var(--primary-color-1);
}

button:focus {
    outline: 0;
}

button, input, optgroup, select, textarea {
    font-family: "Poppins", sans-serif;
}
ul ul li {
    list-style: square;
}
/* ul,
ol {
  list-style: none;
} */

/* customs select2 */
.select2-selection {
    font-family: "Poppins", sans-serif;
    background: url(/wp-content/themes/thc-erp-system/assets/images/icon/arrow.png) no-repeat right 20px center;
    background-size: 6.74px 3.5px;
    /* background-color: var(--neutral-5-color) !important; */
    border-radius: 10px;
    border: 2px solid transparent;
    padding-right: 40px;
    min-height: 36px !important;
    min-width: 100%;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-color);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
}

.select2-selection[aria-expanded="true"] {
    background-color: #fff !important;
}

.select2-container--default .select2-selection--multiple {
    border: 2px solid transparent;
    padding-bottom: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-weight: normal;
    color: var(--text-color);
    padding-left: 22px;
}

.select2-selection__choice {
    background-color: #EDEDED !important;
    color: #3B3B3B;
    font-size: 12px;
    border: none !important;
    display: flex;
    flex-direction: row-reverse;
    padding: 10px!important;
}

.select2-selection__choice__remove {
    /* color: #fff !important; */
    padding-left: 2px;
    font-size: 16px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color-1);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

#register .select2-selection {
    display: flex;
    align-items: center;
    border-radius: 10px;
    font-size: 14px;
    line-height: 16px;
}

#register .select2-selection[aria-expanded="true"] {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#register .select2-selection {
    background-color: #fff !important;
}

.select2-container--open .select2-dropdown--below {
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--text-color);
}

#register .select2-selection {
    background: url(/wp-content/themes/thc-erp-system/assets/images/icon/arrow.png) no-repeat right 20px center;
}


/* customs select2 end */

.mx-n12px {
    margin-left: -12px;
    margin-right: -12px;
}

.px-12px {
    padding-left: 12px;
    padding-right: 12px;
}

.my-n12px {
    margin-top: -12px;
    margin-right: -12px;
}

.py-12px {
    padding-top: 12px;
    padding-bottom: 12px;
}

.pt-12px {
    padding-top: 12px;
}

.pb-12px {
    padding-bottom: 12px;
}

.ml-14px {
    margin-left: 14px;
}

.mr-14px {
    margin-right: 14px;
}

.mb-14px {
    margin-bottom: 14px;
}

.rotate-180 {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.rotateY-180 {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer-default {
    cursor: default !important;
}

/* style text */
.text-additional-color-1 {
    color: var(--additional-color-1);
}

.text-additional-color-2 {
    color: var(--additional-color-2);
}

.text-additional-color-3 {
    color: var(--additional-color-3);
}

.text-primary-1 {
    color: var(--primary-color-1);
}

.font-12 {
    font-size: 12px !important;
}

.font-32 {
    font-size: 32px !important;
}

.lh-40 {
    line-height: 40px !important;
}

.font-9 {
    font-size: 9px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-36 {
    font-size: 36px !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

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

.lh-16 {
    line-height: 16px !important;
}

.lh-18 {
    line-height: 18px !important;
}

.lh-12 {
    line-height: 12px !important;
}

.lh-20 {
    line-height: 20px !important;
}

.lh-44 {
    line-height: 44px !important;
}

.lh-24 {
    line-height: 24px !important;
}

.lh-32 {
    line-height: 32px !important;
}

.header-1,
.header-2,
.header-3,
.header-4,
.header-5,
.header-6 {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
}

.header-1 {
    font-size: 24px !important;
    line-height: 33px !important;
}

.header-2 {
    font-size: 20px !important;
    line-height: 27px !important;
}

.header-3 {
    font-size: 18px !important;
    line-height: 25px !important;
}

.header-4 {
    font-size: 14px !important;
    line-height: 19px !important;
}

.header-5 {
    font-size: 12px !important;
    line-height: 16px !important;
}

.header-6 {
    font-size: 10px !important;
    line-height: 14px !important;
}

.first-letter-cap::first-letter {
    text-transform: capitalize !important;
}

.body-text-1,
.body-text-2,
.body-text-3,
.body-text-4 {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: normal;
}

.body-text-1 {
    font-size: 14px !important;
    line-height: 16px !important;
}

.body-text-2 {
    font-size: 12px !important;
    line-height: 14px !important;
}

.body-text-3 {
    font-size: 10px !important;
    line-height: 12px !important;
}

.body-text-4 {
    font-size: 8px !important;
    line-height: 9px !important;
}

/* style text end */
.disable {
    pointer-events: none;
}

/*style Button */
.button-primary-1,
.button-secondary-1,
.button-primary-2,
.button-primary-3,
.button-secondary-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    min-width: 168px;
    min-height: 46px;
    border: 2px solid var(--primary-color-1);
    border-radius: 30px;
    padding: 11px 23px;
    user-select: none;
}

.button-primary-2,
.button-secondary-2 {
    border-radius: 10px;
}

.button-circle {
    min-width: 50px;
    min-height: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 2px 7px 20px rgba(26, 26, 26, 0.3);
}

.button-primary-1,
.button-primary-2 {
    color: #ffffff;
    background-color: var(--primary-color-1);
}

.button-primary-3 {
    color: var(--primary-color-1);
}

.button-secondary-1,
.button-secondary-2 {
    background-color: transparent;
    color: var(--primary-color-1);
}

.button-primary-2,
.button-secondary-2 {
    display: flex;
}

.button-primary-2 i,
.button-secondary-2 i {
    margin-right: 8px;
}

.button-primary-2 span,
.button-secondary-2 span {
    flex-grow: 1;
}

.button-primary-1:hover,
.button-secondary-1:hover,
.button-primary-2:hover,
.button-secondary-2:hover {
    background: #7995dd;
    border-color: #7995dd;
    color: #ffffff;
}

.button-primary-3:hover,
.button-secondary-3:hover {
    background: var(--primary-color-1);
    color: #ffffff;
}

.button-primary-1.disable,
.button-primary-2.disable {
    border: 2px solid var(--disable-color-1);
    background-color: var(--disable-color-1);
}

.button-secondary-1.disable,
.button-secondary-2.disable {
    color: var(--disable-color-1);
    border: 2px solid var(--disable-color-1);
    background-color: transparent;
}

/*style button end */

/* style status tag */
.not-sold-yet-tag,
.sold-tag,
.undefined-tag,
.completed-tag,
.unfinished-tag,
.green,
.pink,
.blue,
.gray,
.yellow,
.violet,
.red,
.orange,
.light,
.indigo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 8px;
    line-height: 9px;
    border-radius: 4px;
    width: 52px;
    height: 14px;
}

.completed-tag,
.unfinished-tag {
    min-width: 80px;
}

.not-sold-yet-tag,
.completed-tag,
.green {
    background: #a8ffb5;
}

.sold-tag,
.pink {
    background: #ffbebe;
}

.blue {
    background: #a8d5ff;
}

.yellow {
    background: #f3ffa8;
}

.violet {
    background: rgb(241, 27, 241);
}

.gray {
    background: #6f6c64;
}

.red {
    background: #ee4700;
}

.orange {
    background: rgba(241, 195, 41, 0.5);
}

.light {
    background: rgba(0, 199, 190, 0.7);
}

.indigo {
    background: rgba(123, 115, 219, 0.5);
}

.color-edit {
    display: initial;
    width: auto;
    padding: 2px 9px !important;
    font-size: 10px !important;
    font-weight: 500;
    color: #555;
}

.undefined-tag,
.unfinished-tag {
    width: 79px;
    height: 14px;
    color: var(--additional-color-2);
    background: #fff4c7;
}

/* link text */
a {
    color: var(--primary-color-1);
}

a.link-disable {
    color: var(--disable-color-1);
}

/* link text end */
/* social link */
.social-btn {
    --google-color: #be463a;
    --facebook-color: #294da5;
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #dbe2e8;
}

.img-default-logo {
    object-fit: contain;
}

.social-btn::after {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Brands";
    position: absolute;
    z-index: 1;
    font-size: 19px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0.7398px solid #ffffff;
    background: linear-gradient(
            135deg,
            #dbe2e8 14.55%,
            #eef2f4 37.8%,
            #fbfcfc 62.02%,
            #ffffff 85.32%
    );
}

.social-btn--google::after {
    content: "\f0d5";
    color: var(--google-color);
}

.social-btn:hover::after {
    background: var(--neutral-20-color);
}

.social-btn--google:hover::after {
    background: var(--google-color);
    color: #ffffff;
}

.social-btn--facebook::after {
    content: "\f39e";
    color: var(--facebook-color);
}

.social-btn--facebook:hover::after {
    background: var(--facebook-color);
    color: #ffffff;
}

/* .social-btn--zalo::after {
  content: url(https://projectdemo.thcmedia.vn/wp-content/uploads/2022/03/zalo-icon.svg);
  line-height: 0px;
}
.social-btn--viber::after {
  content: url(https://projectdemo.thcmedia.vn/wp-content/uploads/2022/03/phone-icon.svg);
  line-height: 0px;
}
.social-btn--email::after {
  content: url(https://projectdemo.thcmedia.vn/wp-content/uploads/2022/03/email_send.svg);
  line-height: 0px;
} */
.social-btn.disable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
}

/* social btn end */
/* input box */
.checkbox {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border: 1.5px solid var(--primary-color-1);
    border-radius: 6px;
    cursor: pointer;
    margin-right: 9px;
}

.checkbox:hover {
    background-color: #00000033;
}

.checkbox::after {
    display: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    font-size: 12px;
    color: #ffffff;
}

.checkbox:checked {
    background-color: var(--primary-color-1);
}

.checkbox:checked::after {
    display: block;
}

.checkbox-wrap.disable {
    opacity: 0.4;
}

.select-box {
    appearance: none;
    -webkit-appearance: none;
    background: url(/wp-content/themes/thc-erp-system/assets/images/icon/arrow.png) no-repeat right 20px center;
}

.select-box,
.input-box {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid transparent;
    min-height: 50px;
    min-width: 100%;
    padding: 0 22px;
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: var(--text-color);
    outline: none;
    cursor: pointer;
}

.select-box:hover,
.input-box:hover {
    border-color: var(--primary-color-1);
    background-color: #f3f8ff;
}

.select-box:focus,
.input-box:focus {
    background-color: #ffffff;
}

.select-wrap.disable > .layout-disable,
.input-wrap.disable > .layout-disable {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(204, 208, 214, 0.7);
}

.input_invalid {
    border: 1px solid var(--danger) !important;
}

.content {
    min-height: calc(100vh - var(--height-header));
    flex: 1;
    background-color: var(--background-color);
    max-width: calc(100% - var(--width-sidenav));
}

.public-page .content {
    max-width: 100%;
}

.public-page .container {
    max-width: 1250px;
    font-size: 12px;
}

.content-container {
    /* min-height: 100vh; */
    padding: 15px 52px 100px;
}

.content__head {
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.content__head > * {
    margin-top: 16px;
}

.content__control {
    margin-left: -6px;
    margin-right: -6px;
}

.content__control-item {
    padding: 0 6px;
}

.content__input:not([type="file"]) {
    min-height: unset;
    /*height: 25px;*/
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    border-radius: 6px;
}

.select-box.content__input {
    min-width: 130px;
    background-size: 6.74px 3.5px;
    background-position: right 10px center;
    padding: 0 11px;
}

button.content__input,
a.content__input {
    /*min-width: 96px;*/
}

.map-container {
    height: 306px;
    background: #ffffff;
    border-radius: 10px;
}

.google-map {
    border-radius: 8px;
}

.data__statistics > p {
    margin: 0;
}

.data__statistics-title {
    color: var(--neutral-40-color);
}

.data__card {
    min-height: 100%;
    background-color: #ffffff;
    box-shadow: 3px 10px 20px rgba(32, 78, 198, 0.1);
    border-radius: 10px;
}

.data__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--neutral-5-color);
    border-radius: 10px;
    box-shadow: 2px 4px 7px rgba(158, 193, 246, 0.25);
    margin-right: 14px;
}

.data__card-icon > i,
.content-block-head .head__icon {
    color: var(--primary-color-1);
    font-size: 18px;
}

.content-block-head {
    background: url("../images/background/Frame-174.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 20px;
    padding-bottom: 40px;
}

.customer-block-head i,
.content-block-head i {
    margin-right: 10px;
}

.quote-header-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quote-header-left h3 {
    font-weight: 600;
    font-size: 44px;
    line-height: 50px;
    color: var(--primary-color-1);
}

.customer-block-head {
    margin-top: -40px;
}

.customer-block-head .status {
    padding: 5px 10px;
    border-radius: 5px;
}

.customer-block-head .project-detail__intension {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e6dddd;
    background: white;
    width: 80%;
    justify-content: space-between;
}

.customer-block-head .say {
    width: 80%;
}

.boxdetailproduct {
    border-radius: 10px;
}

.boxdetailproduct thead tr th {
    background: #FEF9F7;
    color: var(--primary-color-1);


}

.boxdetailproduct thead tr th:first-child {
    border-top-left-radius: 10px;
}

.boxdetailproduct thead tr th:last-child {
    border-top-right-radius: 10px;
}

.company-name {
    text-transform: uppercase;
}

.project-detail__implement {
    width: 90%;
    border: 1px solid #D4D4D4;
    border-radius: 10px;
    display: block;
    margin: auto;
}

.content-block {
    background: #ffffff;
    border-radius: 10px;
}

.erp-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tabs-list {
    color: var(--neutral-40-color);
    border-bottom: 2px solid #bfbfbf;
    margin-left: 0;
}

.tabs-list a {
    color: currentColor;
}

.tabs-list a:hover {
    text-decoration: none !important;
}

.tab-item {
    flex: 1;
    text-align: center;
}

.tab-item:hover > a {
    color: var(--primary-color-1);
}

.tab-item > a.active,
.tab-item.active {
    color: var(--primary-color-1);
}

.tab-line {
    bottom: -2px;
    left: 0;
    border-bottom: 2px solid var(--primary-color-1);
    transition: all ease 0.5s;
}

/* pagination */

.select-pagination {
    cursor: pointer;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    min-width: 20px;
    height: 14px;
    background: url(/wp-content/themes/thc-erp-system/assets/images/icon/arrow.png) no-repeat right center;
    background-size: 6.74px 3.5px;
    padding-right: 14px;
}

.pagination-btn {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 0;
    background-color: #f2f2f2;
    border-radius: 5px;
    color: var(--text-color);
    margin: 0 3px;
}

.pagination-btn > i {
    margin: auto;
    font-size: 14px;
}

/* loading */

.loading-overlay {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.loading-overlay--body {
    position: fixed;
    display: block;
    z-index: 9999;
}

.loading-overlay > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: var(--primary-color-1);
    animation: loading linear 1s infinite;
}


/* error notify */
.error-message {
    position: absolute;
    bottom: calc(100% - 1px);
    font-weight: 500;
    left: 10px;
    color: var(--danger);
}

.submit-error,
.submit-success {
    font-weight: 500;
    color: var(--danger);
    text-align: center
}

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

@keyframes loading {
    0% {
        transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateZ(360deg);
    }
}

.tab-content {
    position: relative;
}

.delete.control-button:disabled {
    opacity: 0.3;
}

.btn-show-pass {
    display: flex;
    border-radius: 50%;
    position: absolute;
    right: 4px;
    top: 0;
    height: 36px;
    width: 36px;
    background-color: transparent;
    border: none;
    transition: all ease 0.3s;
}

.btn-show-pass i {
    margin: auto;
    font-size: 13px;
}

.btn-show-pass:hover {
    background-color: rgba(81, 122, 226, 0.2);
}

.btn-show-pass:focus {
    outline: none;
}

.hide-pwd-icon {
    display: none;
}

.toast_custom {
    position: fixed;
    top: calc(var(--height-header) + 10px);
    right: 30px;
    z-index: 9999;
    min-width: 300px;
    max-width: calc(100% - 20px);
    transition-duration: 1s
}


.listitemt:hover {
    cursor: pointer;
    background: rgba(158, 193, 246, 0.3) !important;
}

.single-post .detail-content-block > .content-block {
    min-width: 100%;
}

.fixed-btn-wrap {
    position: fixed;
    z-index: 1000;
    bottom: 20px;
    right: 20px;
    /* top:400px; */
}

.zoom-font-btn {
        /* min-height: 40px;
        min-width: 40px; */
    width: 40px;
    height: 40px
}

.zoom-font-btn + .zoom-font-btn {
    margin-left: 8px;
}

/* sidebar right */

.single-post {
    --with-sidebar-right: 250px
}

.single-post .content-container {
    width: calc(100% - (var(--with-sidebar-right) + 20px));
}

.sidebar-right {
    position: fixed;
    z-index: 10;
    top: calc(var(--height-header) + 65px);
    right: 20px;
}


.sidebar-right .content-block .accordion {
    width: var(--with-sidebar-right);
    max-height: 60vh;
}

.sidebar-right .accordion .card,
.sidebar-right .accordion .card-header {
    border: none;
    background-color: transparent;
    color: var(--text-color);
}


.sidebar-right .accordion .card + .card {
    border-top: 1px solid #ddd;
}

.sidebar-right .accordion .btn-link {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.sidebar-right-link {
    color: var(--text-color);
}

.sidebar-right-link + .sidebar-right-link {
    border-top: 1px solid #ddd;
}

.sidebar-right-link:hover {
    color: var(--primary-color-1);
}

.sidebar-right-link.current-post {
    color: var(--primary-color-1);
}

.sidebar-right-link.current-post span {
    text-decoration: underline;
}

.accordion-arrow-icon {
    transition: all ease 0.3s;
}

.card-header[aria-expanded=true] {
    color: var(--primary-color-1) !important;
}

.card-header[aria-expanded=false] .accordion-arrow-icon {
    transform: rotate(-90deg);
}

/* sidebar right end */


/* setting page */

.setting-group + .setting-group {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #888;
}

.setting-group-header,
.account-repeat,
.type-repeat {
    display: flex;
    align-items: center;
    color: var(--primary-color-1);
    font-size: 18px;
    font-weight: 500;
    margin: 16px 0 30px;
}

.setting-group-header i {
    margin-right: 8px;
}

.setting-group-header span {
    line-height: 1;
    color: var(--primary-color-1);
}

.setting-fieldset {
    /* border: 1px solid var(--primary-color-1); */
    border-radius: 5px;
    padding: 8px 30px;
}

.setting-fieldset + .setting-fieldset {
    margin-top: 16px;
}

.setting-fieldset-legend,
.account-repeat legend,
.type-repeat legend {
    display: inline-block;
    width: unset;
    padding: 0 4px;
    font-size: 14px;
}

.account-repeat legend,
.type-repeat legend {
    font-size: 12px;
    font-weight: 400;
}

.type-repeat legend {
    margin-bottom: 0;
}

.account-repeat,
.type-repeat {
    display: block;
    position: relative;
    /* background-color: var(--background-color); */
    color: var(--text-color);
    padding: 0px 16px 12px;
    margin-bottom: 0;
    border: 1px solid #ccc;
}

.type-repeat {
    padding-bottom: 4px;
}

.account-repeat + .account-repeat,
.type-repeat + .type-repeat {
    margin-top: 4px;
}

.account-repeat .input-box,
.type-repeat .input-box {
    min-height: 30px;
    padding: 0 8px;
}

.type-repeat .input-box {
    min-height: 25px;
}

.account-detele-btn,
.type-detele-btn {
    position: absolute;
    border: none;
    font-size: 18px;
    color: var(--danger);
    width: 55px;
    height: 46px;
    right: 20px;
    top: 15px;
    background: #FBEAE5;
    border-radius: 10px;
}

.type-detele-btn {
    top: 10px;
    font-size: 16px;
}

.account-detele-btn:focus-visible,
.type-detele-btn:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
}

.account-detele-btn:hover,
.type-detele-btn:hover {
    background-color: var(--danger);
    color: #fff;
}

.setting__option-list a {
    display: flex;
    align-items: center;
    padding: 8px 6px;
    color: var(--text-color);
}

.setting__option-list a.active {
    color: var(--primary-color-1);
}

.setting__option-list a.active span {
    text-decoration: underline;
}

.setting__option-list a + a {
    border-top: 1px solid #ccc;
}

.setting__option-list a i {
    margin-right: 8px;
}

.invoice-color {
    color: var(--invoice);
}

.footer-list-project {
    background: #FAFAFA;
    border-radius: 0px 0px 10px 10px;
    padding: 15px;
}

.project-detail__total-money-final {
    background: #EDEDED;
    border-radius: 6px;
    display: flex;
    padding: 15px 0;
    text-transform: uppercase;
    margin-left: -15px;
    padding-left: 30px;
}

.total-summary {
    display: block;
    margin-top: auto;
}

.other-cost {
    border-right: 1px solid #D4D4D4;
}

ol li {
    margin-bottom: 15px;
}

ol li strong {
    font-weight: bold;
}

ol {
    list-style: none;
    counter-reset: my-counter;
    margin-top: 15px;
}

ol li {
    counter-increment: my-counter;
    position: relative;
    line-height: 1.8;
    margin-left: 25px;
}

ol li:before {
    content: counter(my-counter);
    position: absolute;
    left: -40px;
    top: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    border: 1px solid var(--primary-color-1);
    line-height: 1;
}

.public-page ol li:before {
    top: -5px
}

.project-detail__title {
    width: 90%;
    justify-content: space-between;
    margin: 30px auto 20px auto;
    align-items: center;
}

.project-detail__title h3 {
    border-width: 1px 0 1px 0;
    border-color: #D4D4D4;
    border-style: solid;
    padding: 30px 20px;
    font-weight: 500;
    font-size: 20px;
    line-height: 21px;
}

.edit-button span {
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-button i {
    margin-left: 10px;
    border-radius: 100%;
    border: 1px solid white;
    height: 22px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 10px;
    margin-right: 0;
    line-height: 18px;
}

.content-setting {
    background: white;
    padding: 15px;
    border-radius: 10px;
}

.content-setting label {
    font-size: 16px;
    /* margin: 15px 0 10px; */
    color: var(--primary-color-1);
    width: 100%;
}

.content-setting button.button-primary-2,
.content-setting button.type-add-new-js,
.content-setting button.account-add-new-js {
    margin: 15px 0;
}

.customer-block-head.payment-info {
    margin-top: 50px;
}

.customer-block-head.payment-info span {
    font-weight: bold;
    color: var(--primary-color-1);
}

.status-wrap {
    width: unset;
    max-width: unset;
    flex: unset;
    font-weight: bold;
}