/* CSS */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;700&display=swap");
.roboto-slab {
    font-family: "Roboto Slab", serif;
}
html body {
    font-size: 14px;
    overscroll-behavior: none;
}
img {
    max-width: 100%;
    max-height: 100%;
}
.font-red {
    color: #f00000;
}
.font-green {
    color: #23aa1e;
}
.bold {
    font-weight: 600;
}
.white-bg {
    background-color: #ffffff !important;
}
.text-input-group {
    margin: 0px 0px;
}
.inputbtnlabel {
    height: 30px;
    position: relative;
    display: flex;
    margin-right: 15px;
}
.inputbtnlabel:last-child {
    margin-right: 0px;
}
.inputbtnlabel > .text-input-group.no-min-width {
    min-width: unset;
}
.text-input-group.w-label .text-input-field::placeholder {
    color: #666666;
}

.button--primary .fa {
    padding-right: 5px;
}
.ccdr-left label {
    margin-bottom: 0px;
}
.regular .select2-container--default .select2-selection,
.regular .select2-container--focus .select2-selection,
.regular .select2-container--open .select2-selection,
.regular .active .select2-selection,
.select2-selection__rendered {
    min-height: 30px !important;
    padding-top: 0px !important;
}
.regular .select2-selection__arrow {
    display: block !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    font-weight: normal;
}
.regular .select2-container--default .select2-selection,
.regular .select2-container--focus .select2-selection,
.regular .select2-container--open .select2-selection,
.regular .active .select2-selection {
    background-image: none !important;
    border: 1px solid #dedede !important;
}
.text-input-group.date,
.text-input-field.date {
    min-width: 100px;
    width: 100%;
    box-shadow: none;
}
.text-input-field,
.text-input-field:valid,
.text-input-field:focus {
    /* padding-top: 10px; */
}
.header {
    background-color: var(--color-main);
}
.header,
.header a,
.header a:hover {
    color: var(--color-main-text);
}
.header ul li a {
    padding: 14px;
    color: var(--color-main-text);
}
.header .th-left ul li a:hover {
    color: var(--color-main-text);
    /*background-color: rgba(0, 0, 0, 0.07);*/
}
.header ul {
    list-style: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
.header ul li {
    display: inline-block;
    position: relative;
}
.header .top-header {
    display: flex;
    height: 50px;
    align-items: center;
}
.header .top-header .th-left {
    width: 50%;
}
.header .top-header .th-right {
    text-align: right;
    width: 50%;
}
a.btn-translate {
    display: block;
}
a.btn-translate:hover {
    background-color: rgba(0, 0, 0, 0.07);
}
.thl-menu.right-navigation {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}
.ninedot.dark-icon {
    background-color: var(--color-main-dark) !important;
    margin-top: 5px mp !important;
}
.ninedot.dark-icon:hover {
    background-color: var(--color-main-darker) !important;
}
.header .top-header li.open-translate .translate-menu {
    display: block;
}
.header .top-header .translate-menu {
    display: none;
    min-width: 200px;
    background-color: #fff;
    padding: 10px 0px;
    color: #333;
    border-radius: 5px;
    top: 50px;
    position: absolute;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 0 60px rgba(14, 42, 71, 0.25);
    z-index: 2;
}
.header .top-header .translate-menu .trans-scroll {
    max-height: 70vh;
    overflow: auto;
}
.header .top-header .translate-menu .language-row {
    width: 100%;
    padding: 5px 10px;
    text-align: left;
    display: flex;
    line-height: normal;
    cursor: pointer;
}
.header .top-header .translate-menu .language-row:hover {
    background-color: #f7f7f7;
}
.header .top-header .translate-menu .language-row:last-child {
    padding-bottom: 0px !important;
}
.header .top-header .translate-menu .language-row .trans-flag {
    height: 18px;
    width: 18px;
    margin-right: 10px;
}
.header .top-header .translate-menu .language-row .trans-lag {
}
.header .top-header .translate-menu .language-row .trans-flag img {
    height: 100%;
    width: auto;
    display: block;
}
.blue-button-rounded .fa,
.header .top-header .th-right .fa {
    padding-right: 5px;
}
.button-ended,
.button-ended:hover {
    background-color: #a4a4a4 !important;
    pointer-events: none !important;
    color: #ffffff !important;
}
.sort-by {
    margin-bottom: 15px;
}
.group-button {
    text-align: center;
}
.group-button a {
    min-width: 144px;
    margin: 0px 5px 10px;
}
.group-button button {
    min-width: 144px;
    margin: 0px 5px 10px;
}
.back-group {
    margin-top: 40px;
    margin-bottom: 50px;
}
.back-group .back-btn {
    float: left;
}
.back-group .pagination {
    float: right;
    width: auto !important;
}
.back-group .cart-back {
    width: 126px;
    float: right;
}
.header .translate-icon {
    max-height: 14px;
}
.blue-button-rounded,
.header ul li a.header-btn {
    padding: 5px 15px;
    background-color: var(--color-main-dark);
    border-radius: 50px;
    margin: 0px 5px;
    color: var(--color-main-text);
}
.blue-button-rounded {
    background-color: var(--color-main);
}
.blue-button-rounded:hover {
    color: var(--color-main-text);
    background-color: var(--color-main-dark);
}
.radio-container input:checked ~ .shade,
.checkbox-container input:checked ~ .checkmark {
    /* background-color: var(--color-main);
    border-color: var(--color-main-dark); */
    /* RSPD-1519 */
    background-color: #125789;
    border-color: #125789;
}
.box-btn .fa {
    padding-right: 5px;
}
.box-btn .fa.fa-caret-right {
    padding-left: 5px;
    padding-right: 0px;
}
.table .thead-main th {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
.box-btn {
    border-radius: 0px;
    border: 0px;
    font-size: var(--fontSize-anchor);
    padding: 5px 15px;
    background-color: var(--color-main);
    margin: 0px 0px;
    color: var(--color-main-text);
    display: inline-block;
}
.box-btn:hover {
    background-color: var(--color-main-dark);
    color: var(--color-main-text);
}
.box-btn:disabled,
.box-btn:disabled:hover {
    cursor: default;
    opacity: 0.6;
    background-color: var(--color-main);
}
.header ul li a.header-btn .header-qty {
    background-color: #0000002b;
    display: inline-block;
    border-radius: 100px;
    min-width: 0px;
    font-size: 12px;
    text-align: center;
    margin-right: -10px;
    padding: 2px 5px;
}
.header ul li a.header-btn:hover {
    background-color: var(--color-main-darker);
}
.header .top-banner img {
    max-width: 100%;
    height: auto;
}
.header .top-search {
    height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
}
.header .top-search .input-group.text-input-field-search {
    margin: 0px 0px;
    width: 100%;
    max-width: 400px;
}
.input-group.text-input-field-search {
    border: 1px solid #e5e5e5;
    overflow: hidden;
}
.input-group.text-input-field-search input.form-control {
    background-color: #f3f3f3;
}
.input-group.text-input-field-search button {
    background-color: #ffffff;
}
.input-group.text-input-field-search button {
    color: #808080;
    display: flex;
    align-items: center;
}
.top-search .search-group {
    display: flex;
    align-items: center;
}
.top-search .advanced-search {
    margin-left: 20px;
}
.top-search .advanced-search a {
    text-decoration: underline !important;
    color: #333 !important;
}
.icon-cal-group {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    float: right;
}
.icon-cal-group a.icon-cal img {
    height: 18px;
    width: auto;
}
.icon-cal-group a.icon-cal {
    background-color: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-cal-group a.icon-cal:hover {
    background-color: #ececec;
}
.wrapper {
    min-height: calc(100vh - 275px - 135px);
    padding: 25px 0px;
    background-size: cover !important;
    background-position: center center;
}
.wrapper.popup-wrapper {
    padding: 25px 20px;
}
.popup-wrapper .back-group {
    margin-top: 0;
    margin-bottom: 0;
}
.popup-wrapper form {
    margin-bottom: 0;
}
.popup-wrapper .container {
    padding-left: 0;
    padding-right: 0;
}
footer {
    background-color: var(--color-main);
    min-height: 135px;
    padding: 40px 10px;
}
footer ul,
footer .verified {
    text-align: center;
}
footer .footer-row {
    margin-bottom: 10px;
}
footer ul,
footer li {
    list-style: none;
    padding: 0px 0px;
    margin: 0px 0px;
}
footer li {
    display: inline-block;
}
footer li a {
    color: var(--color-main-text);
    padding: 0px 20px;
    border-right: 1px solid #fff;
}
footer li a:hover {
    color: var(--color-main-text);
    text-decoration: underline !important;
}
footer ul li:last-child a {
    border-right: 0px solid #fff;
}
.homepage-content {
    padding: 50px 0px 60px;
}
.page-content {
    padding: 20px 0px 0px;
}
.top-mobile-menu {
    display: none;
}
.layer-mobile {
    display: none;
}
.layer-mobile .toggle-menu svg,
.top-mobile-menu .toggle-menu svg {
    fill: var(--color-main-text);
}
.layer-mobile .toggle-menu,
.top-mobile-menu .toggle-menu {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 20px;
    margin: 20px;
    opacity: 0.8;
    cursor: pointer;
}
.close-img {
    width: 100%;
    height: auto;
}
.breadcrumb {
    color: #333333;
    background-color: #f9f9f9 !important;
    display: block;
    margin-bottom: 30px;
    border: 1px solid #e5e5e5;
    font-size: 12px;
    border-radius: 0px;
}
.breadcrumb .user-info .usertext {
    color: #005a86;
    font-weight: 600;
}
.breadcrumb a {
    font-size: 12px;
}
.breadcrumb a.current-page {
    font-weight: 600;
}
.clear {
    clear: both;
}
.wrap-list-program.list-program-3coloumn {
}
.wrap-list-program.list-program-3coloumn .wrap-item-lp {
    float: left;
    width: 75%;
}
.wrap-list-program.list-program-3coloumn .wrap-item-lp .lp-item {
    width: calc(33.33% - 20px);
}
.wrap-list-program.list-program-3coloumn .right-content {
}
.wrap-list-program.list-program-3coloumn .lp-item {
}
.wrap-list-program .lp-item.rc-item {
    border: 1px solid #e8e8e8 !important;
    padding: 20px;
    height: auto;
}
.wrap-list-program .rc-item:hover {
    cursor: unset !important;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
    border: 1px solid #e8e8e8;
}
.wrap-list-program .lp-item {
    border-radius: 4px;
    overflow: hidden;
    width: calc(25% - 20px);
    float: left;
    height: 346px;
    background-color: #fff;
    margin: 0px 10px 20px;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all 0.3s;
    border: 1px solid #e8e8e8;
}
.wrap-list-program .lp-item:hover {
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8e8e8;
}
.wrap-list-program .lp-item .lpi-top {
    height: 50%;
    background-color: #f3f3f3;
}
.thumbnail-fit {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.thumbnail-fill {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.thumbnail-stretch {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.wrap-list-program .lp-item .lpi-bottom {
    padding: 15px 15px;
}
.wrap-list-program .lp-item .lpi-bottom .lpib-title {
    font-size: 24px;
    font-weight: 600;
    /*font-family: 'Roboto Slab', serif;*/
    color: #005a86;
    margin-bottom: 7px;
    line-height: normal;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wrap-list-program .lp-item .lpi-bottom .lpib-desc {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.class-desc {
    margin-bottom: 40px;
}
.class-desc .class-title {
    font-size: 24px;
    font-weight: 600;
}
.class-desc .cd-desc {
    padding: 20px 0px;
}
.cr-table {
    width: 100%;
    font-size: 14px;
}
.cr-table strong {
    font-weight: 600;
}
.cr-table .blue-button-rounded {
    font-size: 14px;
}
.cr-table .crt-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: #ececec;
    padding: 10px;
    font-weight: 600;
}
.cr-table .crt-body {
}
.modal-body iframe {
    width: 100%;
    height: 100%;
    border: inherit;
}
.cr-table .crt-body .crt-body-row .title {
    font-weight: 600;
}
.cr-table .crt-body .crt-body-row {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    display: flex;
    align-items: top;
    justify-content: left;
    background-color: #ffffff;
    padding: 20px 10px;
}
.cr-table .crt-body .crt-body-row:nth-child(even) {
    background-color: #fcfcfc;
}
.cr-table .crt-col.row-details {
    width: 45%;
    padding-right: 10px;
}
.cr-table .crt-col.row-program {
    width: 20%;
    text-align: left;
}
.cr-table .crt-col.row-cost {
    width: 15%;
    text-align: right;
}
.cr-table .crt-col.row-select {
    width: 20%;
    text-align: center;
    padding-left: 9px;
}
.cr-table .crt-col.row-details .detail-title {
    color: #125789;
}
.cr-table .crt-col.row-details .detail-row {
    margin: 0px 0px 0px 15px;
}
.cr-table .crt-col.row-details .detail-row .detail-col {
    display: inline-block;
    margin-right: 20px;
    margin-top: 5px;
}
.btn-view-less-more {
    color: #125789;
    font-weight: 600;
    cursor: pointer;
    margin: 5px 10px 10px 15px;
}
.btn-view-less-more .vm-text:before {
    content: "View More";
}
.btn-view-less-more .fa {
    padding-right: 10px;
}
.cr-table .crt-col.row-details.more .btn-view-less-more .vm-text:before {
    content: "View Less";
}
.cr-table .crt-col.row-details.more .btn-view-less-more .fa {
    transform: rotate(180deg);
    padding-right: 0px;
    margin-right: 10px;
}
.cr-table .crt-col.row-details .detail-group {
    max-height: 0px;
    overflow: hidden;
    transition: all 0.3s;
}
.cr-table .crt-col.row-details.more .detail-group {
    max-height: 200px;
}
.item-product-content {
    background-color: var(--color-white);
    border: 1px solid #e5e5e5;
}
.item-product-content .ipc-header {
    display: flex;
    padding: 15px 20px;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
}
.item-product-content .ipc-header .ipcd-left {
    width: calc(100% - 200px);
}
.item-product-content .ipc-header .ipcd-right {
    width: 200px;
    text-align: right;
}
.item-product-content .ipc-header .ipcd-left .ipdcl-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.item-product-content .ipc-body {
    padding: 20px 0px 60px;
}
.item-product-content .ipc-body .ipc-row {
    width: 100%;
    display: flex;
    padding: 10px 20px;
}
.item-product-content .ipc-body.row-product .ipc-row .ipcr-left {
    width: 200px;
}
.item-product-content .ipc-body.row-product .ipc-row .ipcr-right {
    width: calc(100% - 200px);
}
.item-product-content
    .ipc-body.row-product
    .ipc-row.row-product-img
    .ipcr-left {
    display: none;
}
.item-product-content
    .ipc-body.row-product
    .ipc-row.row-product-img
    .ipcr-right {
    width: 100%;
    text-align: center;
}
.item-product-content .ipc-body .ipc-row .ipcr-left {
    width: 250px;
    padding-right: 20px;
    text-align: right;
}
.item-product-content .ipc-body .ipc-row .ipcr-right {
    width: calc(100% - 250px);
}
.dt-table {
    border: 1px solid #e5e5e5;
}
.dt-table .dtt-row {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
}
.dt-table .dtt-row:nth-child(odd) {
    background-color: #f9f9f9;
}
.dt-table .dtt-row:last-child {
    border-bottom: 0px solid #e5e5e5;
}
.dt-table .dtt-row .dttr-left {
    width: 55%;
    padding: 10px 10px 10px 20px;
    border-right: 1px solid #e5e5e5;
}
.dt-table .dtt-row .dttr-right {
    width: 45%;
    padding: 10px 10px 10px 20px;
}
.main-account-menu {
    background-color: #ececec;
    height: 50px;
}
.main-account-menu .container,
.main-account-menu .container .row,
.main-account-menu .container .row .col-md-12 {
    height: 100%;
}
.header .main-account-menu,
.header .main-account-menu ul li a {
    color: #5b5b5b !important;
    font-size: 14px;
}
.main-account-menu .mam-group,
.main-account-menu .mam-group .ac-menu,
.main-account-menu .mam-group .ac-menu ul,
.main-account-menu .mam-group .ac-menu ul li {
    height: 100%;
}
.main-account-menu .mam-group {
    display: flex;
    align-items: center;
}
.main-account-menu .mam-group .ac-menu {
    width: calc(100% - 210px);
}
.main-account-menu .mam-group .user-info {
    width: 210px;
    text-align: right;
}
.main-account-menu .mam-group .user-info .usertext {
    color: #005a86;
    font-weight: 600;
}
.main-account-menu .mam-group .ac-menu ul li.active a,
.main-account-menu .mam-group .ac-menu ul li:hover a {
    background-color: #fff !important;
    color: #005a86 !important;
}
.main-account-menu .mam-group .ac-menu ul li a {
    font-weight: 600;
    display: block;
    transition: all 0.3s;
    height: 100%;
}
.header .top-header .ac-menu,
.header .top-header .user-info {
    display: none;
}
.account-content {
    margin: 20px 0px;
}
.a-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #005a86;
}
.account-content .rh-period {
    display: flex;
}
.account-content .rh-period .rhp-left .rhp-vo .rhp-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.account-content .rh-period .rhp-left .rhp-label {
    margin-right: 15px;
    min-width: 110px;
}
.account-content .rh-period .rhp-left .select2-group {
    margin-right: 15px;
}
.datefromto {
    margin-right: 15px;
    display: flex;
}
.grey-btn,
.grey-btn:disabled {
    background-color: #eeeeee;
    color: #1f1f1f;
    cursor: pointer;
    padding: 5px 20px;
    font-size: var(--fontSize-anchor);
    border: 0px;
    border-radius: 0;
}
.grey-btn:hover {
    background-color: #e1e1e1;
}
.grey-btn:disabled,
.grey-btn:disabled:hover {
    opacity: 0.6;
    cursor: default;
    background-color: #eeeeee;
}
.dateft {
    height: 30px;
    position: relative;
    display: flex;
    margin-right: 15px;
}
.dateft:last-child {
    margin-right: 0px;
}
.inputcrlabel {
    background-color: #ebebeb;
    font-size: 14px;
    height: 100%;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-right: 0px solid #dedede;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    color: #868686;
    padding-right: 10px;
}
.account-content .rh-period .select2-group .select2-container {
    min-width: 307px;
}
.account-content.payment-history .rh-period .select2-group .select2-container {
    min-width: 207px;
}
.account-content.payment-history .group-button {
    text-align: left;
}
.account-content .rh-period .rhp-left {
    width: calc(100% - 400px);
    font-size: 14px;
}
.account-content .rh-period .rhp-right {
    width: 400px;
}
.account-content.payment-history .rh-period .rhp-left {
    width: calc(100% - 400px);
}
.account-content.payment-history .rh-period .rhp-right .rhpr-box {
    background-color: transparent;
    padding: 0px 0px 20px;
}
.account-content.payment-history .rh-period .rhp-right {
    width: 400px;
}
.account-content .rh-period .rhp-right .rhpr-box {
    width: 100%;
    font-size: 14px;
    padding: 20px;
    background-color: #f5f5f5;
}
.account-content .rh-period .rhp-right .rhpr-box .rhpr-row {
    width: 100%;
    display: flex;
    margin-bottom: 5px;
}
.account-content .rh-period .rhp-right .rhpr-box .rhpr-row:last-child {
    margin-bottom: 0px;
}
.account-content .rh-period .rhp-right .rhpr-box .rhpr-row .rhprr-left {
    width: calc(100% - 100px);
    text-align: right;
    padding-right: 30px;
}
.account-content .rh-period .rhp-right .rhpr-box .rhpr-row .rhprr-right {
    width: 100px;
    text-align: right;
}
.transinfo {
    text-align: right;
    width: 100%;
    font-style: italic;
    margin: 20px 0px;
    font-size: 14px;
}
.cr-table.table_reservation_history .crt-col {
    padding-right: 5px;
    padding-left: 0px;
}
.cr-table.table_reservation_history .crt-head-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 10px;
    font-weight: 600;
    background-color: var(--color-main);
    color: var(--color-main-text);
    font-weight: 700;
    text-align: center;
}
.cr-table.table_reservation_history .crt-head .row-rh-regdate,
.cr-table.table_reservation_history .crt-head .row-rh-item,
.cr-table.table_reservation_history .crt-head .row-rh-idsection {
}
.cr-table .crt-body .row-rh-cancel a {
    color: #005a86;
}
.cr-table .row-rh-regdate {
    width: calc(8% - 15px);
    margin-right: 15px;
    text-align: right;
}
.cr-table .row-rh-item {
    width: 17%;
    text-align: left;
}
.cr-table .row-rh-idsection {
    width: 10%;
    text-align: left;
}
.cr-table .row-rh-days {
    width: 10%;
    text-align: left;
}
.cr-table .row-rh-begins {
    width: calc(8% - 15px);
    margin-right: 15px;
    text-align: right;
}
.cr-table .row-rh-time {
    width: 10%;
    /* text-align: left; */
    /* NF 103464 Tables */
    text-align: right;
}
.cr-table .row-rh-sessions {
    width: 8%;
    /* text-align: center; */
    /* NF 103464 Tables */
    text-align: right;
}
.cr-table .row-rh-participant {
    width: 12%;
    text-align: left;
}
.cr-table .row-rh-amount {
    width: 10%;
    text-align: right;
}
.cr-table .row-rh-cancel {
    width: 7%;
    text-align: center;
}
.cr-table.table_cart .row-c-qty {
    width: 60px;
    text-align: center;
}
.cr-table.table_cart .row-c-id {
    width: 10%;
}
.cr-table.table_cart .row-c-classname {
    width: 30%;
}
.cr-table.table_cart .row-c-period {
    width: 15%;
}
.cr-table.table_cart .row-c-full {
    width: 100%;
}
.cr-table.table_cart .row-c-item {
    width: calc(20% - 72px);
}
.cr-table.table_cart .row-c-item-id {
    width: calc(39% - 72px);
}
.cr-table.table_cart .row-c-schedule {
    width: calc(19% - 72px);
    text-align: left;
}
.cr-table.table_cart .row-c-participant {
    width: calc(19% - 72px);
}
.cr-table.table_cart .row-c-begins {
    width: calc(10% - 11px);
}
.cr-table.table_cart .row-c-days {
    width: 50px;
    text-align: center;
}
.cr-table.table_cart .row-c-sess {
    width: 50px;
    text-align: center;
}
.cr-table.table_cart .row-c-starttime {
    width: calc(8% - 11px);
    text-align: center;
}
.cr-table.table_cart .row-c-itemcost {
    width: calc(9% - 10px);
    text-align: right;
}
.cr-table.table_cart .row-c-discount {
    width: calc(10% - 12px);
    text-align: right;
}
.cr-table.table_cart .row-c-due {
    width: calc(9% - 11px);
    text-align: right;
}
.cr-table.table_cart .row-c-pay {
    width: calc(9% - 11px);
    text-align: right;
}
.cr-table.table_cart .row-c-del {
    width: 50px;
    text-align: center;
}
.cr-table.table_cart.table_payment_information_page .row-c-item {
    width: calc(20% - 72px + 50px);
}
.cr-table.table_cart .cart-additional .row-c-item {
    width: calc(
        20% - 30px + 16% - 72px + 8% - 11px + 50px + 50px + 8% - 11px + 50px +
            14px
    );
}
.cr-table.table_cart .cart-additional .row-c-item-id {
    padding-left: 15px;
    width: calc(
        25% - 18px + 16% - 72px + 8% - 11px + 50px + 50px + 8% - 11px + 50px +
            12px
    );
}
.cr-table.table_cart .crt-col {
    padding-right: 10px;
}
.cr-table.table_cart .crt-col:last-child {
    padding-right: 0px;
}
.cr-table.table_cart .row-c-qty input {
    width: 40px;
    display: inline-block;
    font-size: 12px;
}
.cr-table.table_cart.table_payment_information_page .white-bg {
    min-height: 60px;
}
.tolal-payment {
    width: 100%;
}
.tolal-payment .row-tp {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    justify-content: right;
    justify-content: flex-end;
}
.tolal-payment .row-tp .rtp-left {
    text-align: right;
    width: 250px;
}
.tolal-payment .row-tp .rtp-right {
    text-align: right;
    width: 100px;
}
.tolal-payment .inputbtnlabel .text-input-group .text-input-field {
    text-align: right;
}
.tolal-payment .inputbtnlabel .text-input-group {
    min-width: 70px;
}
.tolal-payment .inputbtnlabel {
    width: 100px;
}
.subtitle {
    font-size: 18px;
    font-weight: 600;
    margin: 0px 0px 10px;
}
.section-row {
    margin: 50px 0px 0px;
}
.section-row .spm {
    max-width: 950px;
    margin: 15px 0px;
    justify-content: space-between;
    display: flex;
}
.side-label .col {
    padding: 0px 0px 0px;
}
.coa-row {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    margin-top: 10px;
    padding-left: 20px;
}
.coa-row.cc {
    padding-left: 0px;
}
.coa-row.cc .coa-left {
    width: 270px;
}
.coa-row .coa-left {
    margin-right: 10px;
    width: 250px;
}
.coa-row .text-input-group {
    min-width: 108px;
}
.checkbox-container {
    margin-bottom: 0px;
    padding-left: 20px;
}
.sr-right .coa-row {
    padding-left: 0px;
}
.sr-right .coa-row .coa-left {
    width: 200px;
    font-weight: 600;
}
.sr-right .coa-row .coa-left .grey-btn {
    pointer-events: none !important;
    font-size: 12px;
}
.spm .inputbtnlabel .text-input-group.w-label input {
    text-align: right;
}
.cc-detail {
    min-width: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.cc-detail .ccd-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.chosen-container-multi .chosen-choices {
    border: 1px solid var(--color-blue1) !important;
    background-color: var(--color-blue3) !important;
    background-image: none !important;
}
.chosen-container-multi .chosen-choices li.search-choice {
    background-color: var(--color-gray4) !important;
    background-image: none !important;
}
.chosen-container .chosen-results li.highlighted {
    background-color: var(--color-main) !important;
    color: var(--color-main-text) !important;
    background-image: none !important;
}
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
.cc-detail .ccd-row .ccdr-left {
}
.cc-detail .ccd-row .ccdr-right {
    width: 270px;
    display: flex;
    align-items: center;
}
.cc-detail .ccd-row .ccdr-right.cc-brand .select2-group {
    margin-right: 10px;
    width: 40%;
    min-width: 0px;
}
.cc-detail .ccd-row .ccdr-right.cc-brand .select2-group .select2-container {
    min-width: 0px;
}
.cc-detail .ccd-row .ccdr-right.cc-brand .text-input-group.w-label {
    width: 60%;
    min-width: 0px;
}
.cc-detail .ccd-row .ccdr-right.cc-brand-exp .select2-group {
    width: calc(60% - 10px);
    margin-right: 10px;
}
.cc-detail .ccd-row .ccdr-right.cc-brand-exp .select2-group:last-child {
    margin-right: 0px;
    width: 40%;
}
.cc-detail .ccd-row .ccdr-right.cc-brand-exp .select2-group .select2-container {
    min-width: 0px;
}
.cc-detail .ccd-row .ccdr-right.cc-brand-exp .text-input-group.w-label {
    width: 50%;
}
.cc-detail .ccd-row .ccdr-right .select2-group {
}
.cc-detail .ccd-row .ccdr-right .select2-group {
    width: 100%;
}
.cc-detail .ccd-row .ccdr-right .select2-container,
.cc-detail .ccd-row .ccdr-right .text-input-group.w-label,
.cc-detail .ccd-row .ccdr-right .text-input-group.w-label input {
    width: 100%;
}
.cc-detail .ccd-row .ccdr-right.cvc input {
    max-width: 100px;
}
.cc-detail .ccd-row .ccdr-right.cvc .text-input-group.w-label {
    width: 80px;
    min-width: 0px;
    margin-right: 15px;
}
.cc-detail .ccd-row .ccdr-right.cvc .text-cvc {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #005a86;
}
.cc-detail .ccd-row .ccdr-right.cvc .text-cvc a {
    color: #005a86;
}
.cc-detail.form-participant-info {
    max-width: 100%;
}
.cc-detail.form-participant-info .ccd-row .ccdr-right {
    width: 200px;
}
.cc-detail.form-participant-info .ccd-row .ccdr-right.full {
    width: calc(100% - 200px);
}
.cc-detail.form-participant-info .ccd-row {
    justify-content: unset !important;
}
.cc-detail.form-participant-info .ccd-row .ccdr-left {
    padding-right: 20px;
    width: 200px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.cc-detail.form-participant-info .text-input-group {
    min-width: 0px;
}
.cc-detail.form-participant-info .text-input-group.phone-1 {
    margin-left: 10px;
    width: 100px !important;
}
.cc-detail.form-participant-info .same-as-dn {
    font-size: 12px;
    padding-left: 10px;
    display: flex;
    align-items: center;
}
.cc-detail.form-participant-info .same-as-dn a {
    font-size: 12px;
}
.cc-detail.form-participant-info .checkbox-group {
    padding-top: 5px;
    width: 300px;
}
.cc-detail.form-participant-info .checkbox-group .checkbox-container {
    margin-bottom: 10px;
}

.cr-table.table-payment-history .row-ph-issue-date {
    width: 120px;
}
.cr-table.table-payment-history .row-ph-description {
    width: calc(30% - 32px);
}
.cr-table.table-payment-history .row-ph-invoice {
    width: calc(20% - 32px);
}
.cr-table.table-payment-history .row-ph-payment-type {
    width: calc(20% - 32px);
    text-align: left;
}
.cr-table.table-payment-history .row-ph-amount-paid {
    width: calc(15% - 32px);
}
.cr-table.table-payment-history .row-ph-amount-due {
    width: calc(15% - 32px);
    text-align: right;
    padding-right: 30px;
}
.cr-table.table-payment-history .row-ph-view {
    width: 60px;
    text-align: center;
}
.cr-table.table-payment-history {
    padding-bottom: 50px;
}

.cr-table.table-make-payment .row-mp-sb {
    width: 30px;
    display: flex;
    justify-content: center;
}
.cr-table.table-make-payment .row-mp-invoiceno {
    width: 10%;
}
.cr-table.table-make-payment .row-mp-regdate {
    width: 12.5%;
}
.cr-table.table-make-payment .row-mp-item {
    width: calc(20% - 15px);
}
.cr-table.table-make-payment .row-mp-participant {
    width: calc(17.5% - 15px);
}
.cr-table.table-make-payment .row-mp-invoicecost {
    width: 10%;
}
.cr-table.table-make-payment .row-mp-amtpaid {
    width: 10%;
}
.cr-table.table-make-payment .row-mp-due {
    width: 10%;
}
.cr-table.table-make-payment .row-mp-payamount {
    width: 10%;
}

.cr-table.table-make-payment .inputbtnlabel .text-input-group {
    min-width: 0;
    width: 100%;
}
.cr-table.table-make-payment .row-tp .rtp-left {
    text-align: right;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}

.cr-table.table-make-payment .crt-col:last-child {
    margin-right: 0px;
}
.cr-table.table-make-payment
    .crt-body-row
    .crt-col.row-mp-sb
    .checkbox-container {
    margin-top: 3px;
}

.group-button.gb-proceedpayment {
    text-align: right;
}
.group-button.gb-proceedpayment a {
    margin: 0px 0px 10px;
}

.account-member-info {
}
.account-member-info .am-header {
    display: flex;
    justify-content: space-between;
}
.account-member-info .am-header .ami-title {
    font-size: 18px;
    font-weight: 600;
    color: #005a86;
}
.tab-content,
.uxpin.nav-tabs {
    min-width: unset;
}
.cr-table .crtable-info {
    text-align: right;
    padding: 10px 0px 10px 10px;
}
.cr-table.table-participan-info .crt-col {
    margin-right: 10px;
}
.cr-table.table-participan-info .crt-col:last-child {
    margin-right: 0px;
}
.cr-table.table-participan-info .row-pi-name {
    width: 23%;
}
.cr-table.table-participan-info .row-pi-dayphone {
    width: 13%;
}
.cr-table.table-participan-info .row-pi-nightphone {
    width: 13%;
}
.cr-table.table-participan-info .row-pi-gender {
    width: 8%;
}
.cr-table.table-participan-info .row-pi-agegroup {
    width: 10%;
}
.cr-table.table-participan-info .row-pi-reminder {
    width: 10%;
    text-align: center;
}
.cr-table.table-participan-info .row-pi-edit {
    width: 8%;
    text-align: center;
}
.cr-table.table-participan-info .row-pi-delete {
    width: 8%;
    text-align: center;
}

.cr-table.table-participan-info,
.cr-table.table-payers-info,
.cr-table.table-guardian-info,
.cr-table.table-cc-info {
    margin-bottom: 80px;
}
.cr-table .switch {
    margin-bottom: 0px !important;
}
.switch.no-text small,
.switch.no-text input {
    cursor: pointer;
}
.cr-table.table-payers-info .crt-col {
    margin-right: 10px;
}
.cr-table.table-payers-info .crt-col:last-child {
    margin-right: 0px;
}
.cr-table.table-payers-info .row-pyi-name {
    width: 23%;
}
.cr-table.table-payers-info .row-pyi-dayphone {
    width: 13%;
}
.cr-table.table-payers-info .row-pyi-nightphone {
    width: 13%;
}
.cr-table.table-payers-info .row-pyi-email {
    width: 20%;
}
.cr-table.table-payers-info .row-pyi-shared .horizontal .checkbox-container {
    margin-right: 5px;
    margin-bottom: 5px;
}
.cr-table.table-payers-info .row-pyi-shared {
    width: 20%;
    text-align: center;
}
.cr-table.table-payers-info .row-pyi-edit {
    width: 5%;
    text-align: center;
}

.no-found {
    border: 1px solid #dac197;
    background-color: #fbf5eb;
    color: #dac197;
    padding: 50px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.cr-table.table-cc-info .row-cci-payers {
    width: 29%;
}
.cr-table.table-cc-info .row-cci-cardtype {
    width: 20%;
}
.cr-table.table-cc-info .row-cci-expdate {
    width: 17%;
    /* text-align: center; */
    /* NF 103464 Tables */
    text-align: right;
}
.cr-table.table-cc-info .row-cci-shared {
    width: 12%;
    text-align: center;
}
.cr-table.table-cc-info .row-cci-edit {
    width: 12%;
    text-align: center;
}
.cr-table.table-cc-info .row-cci-delete {
    width: 11%;
    text-align: center;
}

.cr-table.table-guardian-info .checkbox-container,
.cr-table.table-participan-info .checkbox-container,
.cr-table.table-cc-info .checkbox-container {
    text-align: center;
    width: 16px;
    margin: 0 auto;
    display: block;
}

.wrapper.login-page {
    min-height: calc(100vh - 225px - 135px);
}

.wrapper.login-page .text-input-field,
.wrapper.login-page .text-input-field:valid,
.wrapper.login-page .text-input-field:focus {
    height: 50px;
    padding: 20px 10px 10px 10px;
}
.wrapper.login-page .text-input-group {
    max-height: 30px;
    min-height: 0px;
}
.wrapper.login-page .text-input-group {
    margin: 0px auto 16px auto !important;
    min-height: 42px;
    max-height: 100px;
    width: 230px;
}
.login .title p {
    font-size: 16px;
}
.wrapper.login-page .notification-error {
    margin-bottom: 20px !important;
    display: block;
}
.wrapper.login-page .login.card-bg--default {
    max-height: 999px;
    height: auto;
    padding-bottom: 30px;
    width: 100%;
    max-width: 500px;
}
.card-header {
    padding: 0.5rem 0.5rem;
}
.card-header .btn-collapse {
    padding: 3px 0 0 0;
}
.wrapper.login-page .select2-group.regular {
    float: unset;
    max-width: 230px;
    margin: 10px auto 0px;
}
.wrapper.login-page .regular .select2-container--default .select2-selection {
    min-height: 42px !important;
    padding-top: 7px !important;
}
/*.wrapper.login-page .new-account .button--neutral {
display: block;
margin: 0px auto;
font-weight: bold;
background-color: transparent !important;
height: auto;
padding: 0px 0px !important;
}*/
.wrapper.login-page .regular .select2-container--default .select2-selection {
    background-color: #e4e9ef !important;
}
.select2-container .select2-search__field {
    background-color: transparent !important;
}
.wrapper.login-page
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 42px;
}
.wrapper.login-page .login .lnk-reset {
    margin-bottom: 0px;
    font-size: 16px;
}
.wrapper.login-page .select2 + label {
    top: 0px;
    font-weight: 700;
    padding-left: 15px;
}
.wrapper.login-page .button--secondary,
.wrapper.login-page .button--primary {
    min-width: 120px;
    height: 40px;
}

.select2 + label.active,
.select2-container--focus + label,
.select2-container--open + label {
    margin-left: 0px !important;
    padding-left: 10px !important;
}

.pd-ubt {
    color: #333333;
    padding: 0px 0px 30px !important;
    display: block;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0px;
}
.wrap-detail-program {
}
.wrap-detail-program .dp-title {
    font-size: 24px;
    font-weight: 700;
    color: #005a86;
    margin-bottom: 30px;
}
.wrap-detail-program .dp-id {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.wrap-detail-program .dp-id .dp-image {
    width: 300px;
}
.wrap-detail-program .dp-id .dp-image img {
    width: 100%;
    height: auto;
}
.wrap-detail-program .dp-id .dp-description {
    width: calc(100% - 300px);
    padding: 0px 0px 0px 30px;
}
.wrap-detail-program .dp-introtext {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.dp-footer {
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
    margin-bottom: 40px;
}

.alert-red {
    background-color: #f2dedf;
    color: #aa5357;
    border: 0px solid #aa5357;
    padding: 20px 30px;
    margin: 40px 0px;
}

.promo-code {
    margin: 0 auto 40px;
    padding: 20px 20px;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    text-align: center;
}
.promo-code .input-pc {
    display: flex;
    margin: 10px 0px;
    justify-content: center;
}
.promo-code .text-input-group.w-label {
    margin-right: 10px;
}
.promo-code .notif-pc {
    color: #aa5357;
}

.other-costs-options {
    margin: 50px 0px;
}
.other-costs-options .crt-col {
}
.table-other-costs-options .row-oco-cb {
    width: 100px;
    display: flex;
    justify-content: center;
}
.table-other-costs-options .row-oco-item {
    width: calc(50% - 110px);
}
.table-other-costs-options .row-oco-qty {
    width: 120px;
}
.table-other-costs-options .row-oco-qty input {
    width: 70px;
}
.table-other-costs-options .row-oco-payment-method {
    width: calc(50% - 110px);
}

.item-status {
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 10px;
}
.item-status.approval {
    background-color: #c5e1ff;
}
.item-status.waiting {
    background-color: #fbcd45;
}

.form-row {
    justify-content: unset !important;
    display: flex;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-left: 0px;
}
.advanced-search-wrap .form-row {
    margin-bottom: 15px;
}
.advanced-search-wrap .form-row .form-row-left {
    width: 200px;
}
.advanced-search-wrap .form-row .form-row-right {
    width: 310px;
}
.form-row .form-row-left {
    padding-right: 20px;
    width: 250px;
    text-align: right;
}
.form-row .form-row-right {
    display: flex;
    align-items: baseline;
    width: 200px;
}
.form-row .form-row-right.width-auto {
    width: auto;
}
.form-row .text-input-group,
.form-row .select2-group {
    width: 100%;
}
.form-row .horizontal .checkbox-container {
    margin-top: 0px;
}
.asearch-btn {
    float: left;
    margin-left: 10px;
}
.dropdown-toggle::after {
    vertical-align: 0.155em;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: #f8f9fa;
}

.wrapper.tab-cc .pm-tab-cc,
.wrapper.tab-po .pm-tab-po {
    display: block;
}

.wrapper.tab-po .cc-charge {
    display: none;
}
.pm-tab-po .form-row .form-row-left {
    text-align: left;
}
.pm-tab-po .form-row-left {
    margin-bottom: 10px;
}
.pm-tab-po .form-row .fr-col {
    margin-right: 15px;
    width: calc(25% - 15px);
}
.pm-tab-po .form-row {
    margin-bottom: 15px;
}
.pm-tab-po .form-row-right {
    width: 100%;
}
.pm-tab-po .form-row.fr-textarea .form-row-left,
.pm-tab-po .form-row.fr-textarea .form-row-right {
    width: 100%;
}
.pm-tab-po .form-row.fr-textarea textarea {
    height: 80px;
    padding: 10px 10px 10px 10px;
}
.pm-tab-po .form-row.fr-textarea .fr-col {
    width: calc(50% - 15px);
}

.pm-tab-po .col-po-amount .form-row-left {
    text-align: right;
    padding-right: 0px;
}
.pm-tab-po .col-po-amount .form-row-right {
    text-align: right;
    display: block;
}

.textarea-field-input {
    border-color: #dedede;
}
.pagination .page.active a,
.pagination .page.active a:hover {
    background-color: var(--color-main);
    color: var(--color-main-text);
}
input[type="file"] {
    border: 0px solid #ffffff !important;
    height: auto;
    background-color: transparent;
    padding: 0px 0px 0px 0px !important;
}
.text-input-file {
    background-color: transparent !important;
}
.pm-tab-po .form-row .fr-col:last-child {
    margin-right: 0px !important;
}

.middle-form .ccd-row {
    margin-left: calc(65% - 400px);
}

.middle-form .form-row. .eform-form .form-row {
    margin-bottom: 15px;
}

.line {
    border-bottom: 1px solid #ddd;
    width: 600px;
    margin: 40px 0px;
}

.eform-form .checkbox-container {
    margin-bottom: 10px;
}
.form-row .form-row-right.tc-checkboxes {
    align-items: flex-start;
}
.form-row .form-row-right.tc-checkboxes .cb-left {
    margin-right: 20px;
}
.bg-main-content {
    padding: 15px 20px;
    border: 1px solid #e5e5e5;
    background-color: var(--color-white);
}
.left-content ul {
    padding: 0px 0px 0px 20px;
    margin: 0px 0px;
}
.left-content ul li {
}
.sort-by .radio-title,
.sort-by .radio-container {
    font-size: 16px;
}

.cr-table .checkbox-container input {
    position: relative;
}
@media only screen and (min-width: 1200px) {
    .cc-detail.form-participant-info .sdf {
        display: flex;
    }
}

@media only screen and (max-width: 1199px) {
    .cc-detail.form-participant-info .checkbox-group {
        width: auto !important;
    }
    .cc-detail.form-participant-info .same-as-dn {
        padding-left: 0px;
        padding-top: 5px;
    }
}

/* popup */
.histroy-invoice .group-button {
    text-align: right;
    margin: 20px 0px;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 20px;
}
.histroy-invoice .col-a {
    width: calc(100% - 300px);
}
.histroy-invoice .col-b {
    width: 300px;
}
.histroy-invoice .row-a {
    display: flex;
    margin: 50px 0px;
}
.histroy-invoice .row-b {
    margin: 20px 0px 50px;
}

.cr-table.table-history-invoice {
    margin-bottom: 50px;
}

.histroy-invoice .cr-table.table-history-invoice .row-hi-reg-date {
    width: 100px;
}
.histroy-invoice .cr-table.table-history-invoice .row-hi-item {
    width: calc(50% - 100px);
}
.histroy-invoice .cr-table.table-history-invoice .row-hi-id-section {
    width: calc(30% - 100px);
}
.histroy-invoice .cr-table.table-history-invoice .row-hi-participant {
    width: calc(20% - 100px);
}
.histroy-invoice .cr-table.table-history-invoice .row-hi-cost {
    width: 100px;
}
.histroy-invoice .cr-table.table-history-invoice .row-hi-amount {
    width: 100px;
}

/* responsive table */
@media only screen and (max-width: 767px) {
    .cr-table.table-history-invoice .row-hi-reg-date:before,
    .cr-table.table-history-invoice .row-hi-item:before,
    .cr-table.table-history-invoice .row-hi-id-section:before,
    .cr-table.table-history-invoice .row-hi-participant:before,
    .cr-table.table-history-invoice .row-hi-cost:before,
    .cr-table.table-history-invoice .row-hi-amount:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table-history-invoice .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table-history-invoice .row-hi-reg-date:before {
        content: "Reg. Date";
    }
    .cr-table.table-history-invoice .row-hi-item:before {
        content: "Item";
    }
    .cr-table.table-history-invoice .row-hi-id-section:before {
        content: "# - ID - Section";
    }
    .cr-table.table-history-invoice .row-hi-participant:before {
        content: "Participant";
    }
    .cr-table.table-history-invoice .row-hi-cost:before {
        content: "Cost";
    }
    .cr-table.table-history-invoice .row-hi-amount:before {
        content: "Amount";
    }

    .cr-table.table-history-invoice .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }

    .cr-table.table-history-invoice .tolal-payment .row-tp {
        justify-content: flex-start;
    }

    /* .responsive table */

    .histroy-invoice .col-a {
        width: 100%;
    }
    .histroy-invoice .col-b {
        margin-top: 30px;
        width: 100%;
    }
    .histroy-invoice .row-a {
        display: block;
    }
    .wrapper.histroy-invoice {
        padding: 0px 0px;
    }
}
.cr-table.table-history-invoice .white-bg {
    min-height: 60px;
}
.cr-table.table-history-invoice .tolal-payment .row-tp .rtp-left {
    text-align: left;
    width: 150px;
}

/* ----------------------------- */

.table-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.histroy-receipt .col-a {
    width: calc(100% - 300px);
}
.histroy-receipt .col-b {
    width: 300px;
}
.histroy-receipt .row-a {
    display: flex;
    margin: 50px 0px;
}
.histroy-receipt .row-b {
    margin: 20px 0px 50px;
}

.cr-table.table-history-invoice {
    margin-bottom: 50px;
}

.histroy-receipt .cr-table.table-histroy-receipt .row-hre-id-section {
    width: calc(30% - 100px);
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hre-item {
    width: calc(70% - 100px);
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hre-cost {
    width: 100px;
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hre-pay {
    width: 100px;
}

.histroy-receipt .tolal-payment .row-tp .rtp-left {
    text-align: right;
    width: 240px;
    padding-right: 30px;
}
.histroy-receipt .tolal-payment .row-tp .rtp-right {
    text-align: right;
}
.no-border-bottom {
    border-bottom: 0px solid #333333 !important;
}
.histroy-receipt .crt-body-row.payment-date {
    border-bottom: 0px solid #333333 !important;
    padding: 0px 10px;
    width: 100%;
    background-color: #ffffff !important;
}
.histroy-receipt .crt-body-row.payment-method {
    background-color: #ffffff !important;
    border-bottom: 0px solid #333333 !important;
    padding: 20px 10px 0px;
    width: 100%;
    font-weight: 700;
}
.histroy-receipt .paymet {
    width: 500px;
    display: flex;
}
.histroy-receipt .paymet .pcr {
    margin-right: 20px;
}
.cr-table.table-histroy-receipt {
    margin-bottom: 50px;
}

@media only screen and (max-width: 767px) {
    .histroy-receipt .paymet {
        margin: 0px 0px 20px;
    }

    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-id-section:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-item:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-cost:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-pay:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
        text-align: left;
    }
    .cr-table.table-histroy-receipt .crt-col:first-child:before {
        margin-top: 0px;
    }
    .histroy-receipt
        .cr-table.table-histroy-receipt
        .row-hre-id-section:before {
        content: "# - ID - Section";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-item:before {
        content: "Item /Participant";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-cost:before {
        content: "Cost";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hre-pay:before {
        content: "Amt. to pay";
    }

    .cr-table.table-histroy-receipt .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }

    .cr-table.table-histroy-receipt .tolal-payment .row-tp {
        justify-content: flex-start;
    }
}

/* --------- */

.histroy-receipt .cr-table.table-histroy-receipt .row-hcd-item {
    width: calc(60% - 50px);
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hcd-date {
    width: calc(40% - 50px);
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hcd-sess {
    width: 100px;
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hcd-days {
    width: 100px;
}
.histroy-receipt .cr-table.table-histroy-receipt .row-hcd-location {
    width: calc(33% - 100px);
}

@media only screen and (max-width: 767px) {
    .histroy-receipt .row-a {
        display: block;
        margin: 0px 0px;
    }
    .histroy-receipt .col-a {
        width: 100%;
        margin-bottom: 20px;
    }
    .histroy-receipt .paymet {
        margin: 0px 0px 20px;
    }

    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-item:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-date:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-sess:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-days:before,
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-location:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table-histroy-receipt .crt-col:first-child:before {
        margin-top: 0px;
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-item:before {
        content: "Item ";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-date:before {
        content: "Start / End Date & Times";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-sess:before {
        content: "Sess.";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-days:before {
        content: "Days ";
    }
    .histroy-receipt .cr-table.table-histroy-receipt .row-hcd-location:before {
        content: "Location ";
    }
}

.a-title.title-center {
    text-align: center;
}
.statement-report .rhp-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.statement-report .text-input-group.date {
    min-width: 120px;
}
.statement-report .rhp-label {
    margin-right: 15px;
}
.statement-report .inputcrlabel {
    border: 1px solid #dedede;
    border-left: 0px solid #333;
}
.instructor .instructor-wrap {
    position: relative;
    padding-right: 193px;
    min-height: 178px;
}
.instructor .iw-left {
}
.instructor .iw-right {
    width: 178px;
    position: absolute;
    top: 0px;
    right: 0px;
}
.instructor .iw-right img {
    width: 100%;
    height: auto;
}
.family-income-size .fis-row {
    display: flex;
    align-items: center;
    margin: 20px 0px 0px;
}
.family-income-size .fis-row .fis-title {
    margin-right: 10px;
}
.family-income-size .group-button {
    text-align: left;
}
.family-income-size .cc-detail .ccd-row .ccdr-right {
    width: 200px;
}
.family-income-size .cc-detail {
    min-width: unset;
    margin-top: 20px;
    margin-bottom: 0px;
    max-width: 475px;
}
.popup-regform .addnew-group .group-button {
    text-align: left;
    margin: 20px 0px 10px;
}
.popup-regform .addnew-group .group-button a {
    margin: 0px 0px 10px;
}

.cr-table.table-regform .row-rform-participants {
    width: calc(100% - 260px);
}
.cr-table.table-regform .row-rform-class-fee {
    width: 160px;
}
.cr-table.table-regform .row-rform-total {
    width: 100px;
}

@media only screen and (max-width: 767px) {
    .cr-table.table-regform .row-rform-participants:before,
    .cr-table.table-regform .row-rform-class-fee:before,
    .cr-table.table-regform .row-rform-total:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table-regform .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table-regform .row-rform-participants:before {
        content: "Participants";
    }
    .cr-table.table-regform .row-rform-class-fee:before {
        content: "Class Fee";
    }
    .cr-table.table-regform .row-rform-total:before {
        content: "Total";
    }

    .cr-table.table-regform .crt-col {
        width: 100%;
    }

    .cr-table.table-regform .ccd-row .ccdr-left {
    }
    .cr-table.table-regform .row-rform-participants {
        width: 100%;
    }

    .cr-table.table-regform .ccd-row {
        margin: 10px 0px 0px;
    }
    .rform-total {
        justify-content: flex-start !important;
    }
    .rform-total .rft-a {
        padding: 0px 20px 0px 0px !important;
    }
}

.cr-table.table-regform .ccd-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.cr-table.table-regform .ccd-row .ccdr-left {
    margin-right: 10px;
    width: 80px;
}

.rform-total {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #ececec;
    padding: 10px;
    font-weight: 600;
}
.rform-total .rft-a {
    padding: 0px 20px;
}
.rform-total .rft-b {
    width: 120px;
    padding: 0px 20px;
}
/* --- */
.cr-table.table-regform-new-member .row-rform-nm-first-name {
    width: calc(50% - 252.2px);
}
.cr-table.table-regform-new-member .row-rform-nm-last-name {
    width: calc(50% - 252.2px);
}
.cr-table.table-regform-new-member .row-rform-nm-gender {
    width: 150px;
}
.cr-table.table-regform-new-member .row-rform-nm-age-group {
    width: 150px;
}
.cr-table.table-regform-new-member .row-rform-nm-disabled {
    width: 80px;
    text-align: center;
}
.cr-table.table-regform-new-member .row-rform-nm-father {
    width: 65px;
    text-align: center;
}
.cr-table.table-regform-new-member .row-rform-nm-notes {
    width: 60px;
    text-align: center;
}

.cr-table.table-regform-new-member .select2-container {
    min-width: 120px;
}
.cr-table.table-regform-new-member .row-rform-nm-age-group .select2-container {
    min-width: 120px;
}
.cr-table.table-regform-new-member .text-input-group,
.cr-table.table-regform-new-member .select2-group {
    width: calc(100% - 20px);
    min-width: 0px;
}
.cr-table.table-regform-new-member .dateft {
    width: 100%;
    padding-right: 34px;
}
.cr-table.table-regform-new-member .dateft .inputcrlabel {
    border-left: 0px solid #dedede;
    border-right: 1px solid #dedede;
    z-index: 2;
    right: 0px;
    position: absolute;
    top: 0px;
}
.cr-table.table-regform-new-member .datefromto {
    margin-right: 20px;
}
.cr-table.table-regform-new-member .datefromto .text-input-group {
    width: 100%;
}
.cr-table.table-regform-new-member .text-input-field.date {
    width: 100%;
    min-width: 0px;
}
.cr-table.table-regform-new-member .crt-body .crt-body-row {
    padding: 10px 10px;
}

@media only screen and (max-width: 767px) {
    .cr-table.table-regform-new-member .row-rform-nm-first-name:before,
    .cr-table.table-regform-new-member .row-rform-nm-last-name:before,
    .cr-table.table-regform-new-member .row-rform-nm-gender:before,
    .cr-table.table-regform-new-member .row-rform-nm-age-group:before,
    .cr-table.table-regform-new-member .row-rform-nm-disabled:before,
    .cr-table.table-regform-new-member .row-rform-nm-father:before,
    .cr-table.table-regform-new-member .row-rform-nm-notes:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }

    .cr-table.table-regform .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table-regform-new-member .row-rform-nm-first-name:before {
        content: "First Name";
    }
    .cr-table.table-regform-new-member .row-rform-nm-last-name:before {
        content: "Last Name";
    }
    .cr-table.table-regform-new-member .row-rform-nm-gender:before {
        content: "Gender";
    }
    .cr-table.table-regform-new-member .row-rform-nm-age-group:before {
        content: "Age Group";
    }
    .cr-table.table-regform-new-member .row-rform-nm-disabled:before {
        content: "Disabled";
    }
    .cr-table.table-regform-new-member .row-rform-nm-father:before {
        content: "Father?";
    }
    .cr-table.table-regform-new-member .row-rform-nm-notes:before {
        content: "Notes";
    }
    .cr-table.table-regform-new-member .row-rform-nm-age-group.bdate:before {
        content: "Birth Dates";
    }

    .cr-table.table-regform .crt-col {
        width: 100%;
    }
    .cr-table.table-regform .row-rform-participants {
        width: 100%;
    }
    .cr-table.table-regform .ccd-row {
        margin: 10px 0px 0px;
    }

    .cr-table.table-regform-new-member .select2-group {
        margin-bottom: 10px;
    }

    .cr-table.table-regform-new-member .row-rform-nm-disabled,
    .cr-table.table-regform-new-member .row-rform-nm-father,
    .cr-table.table-regform-new-member .row-rform-nm-notes {
        text-align: left;
    }

    .cr-table.table-regform-new-member .text-input-group,
    .cr-table.table-regform-new-member .select2-group {
        width: 100%;
        min-width: 100%;
    }
    .cr-table.table-regform-new-member .row-rform-nm-first-name {
        width: 100%;
    }
    .cr-table.table-regform-new-member .row-rform-nm-last-name {
        width: 100%;
    }
    .cr-table.table-regform-new-member .row-rform-nm-gender {
        width: 100%;
    }
    .cr-table.table-regform-new-member
        .row-rform-nm-age-group
        .select2-container {
        min-width: 100%;
    }
    .cr-table.table-regform-new-member .row-rform-nm-age-group {
        width: 100%;
    }
}
/* .popup */

/* =========== MEDIA QUERY =========== */
@media only screen and (max-width: 1024px) {
    .cc-detail.form-participant-info .ccd-row .ccdr-left {
        padding-right: 20px;
        width: 120px;
    }
    .middle-form .ccd-row {
        margin-left: calc(72% - 400px);
    }
}
@media only screen and (max-width: 991px) {
    .line {
        width: 100%;
    }
    .form-row .form-row-left {
        padding-right: 0px;
        width: 100%;
        text-align: left;
    }
    .pm-tab-po .form-row .fr-col,
    .pm-tab-po .form-row.fr-textarea .fr-col {
        width: 100%;
    }
    .pm-tab-po .form-row {
        display: block;
    }
    .pm-tab-po .form-row .fr-col {
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .form-row .form-row-right {
        width: 100%;
    }
    .pm-tab-po .form-row.fr-textarea .form-row-left,
    .pm-tab-po .form-row.fr-textarea .form-row-right {
        width: 100%;
    }
    .dp-footer {
        padding: 30px 15px 0px;
    }
    .wrap-detail-program .dp-id .dp-description {
        width: 100%;
        padding: 0px 0px 0px 0px;
    }
    .wrap-detail-program .dp-title {
    }
    .wrap-detail-program .dp-id .dp-image {
        width: 100%;
        max-width: 300px;
        margin-bottom: 30px;
    }

    .wrap-detail-program .dp-id {
        display: block;
    }

    .group-button a {
        min-width: 144px;
        margin: 0px 0px 10px;
    }
    .account-content .rh-period .rhp-right .rhpr-box .rhpr-row .rhprr-left {
        text-align: left;
    }
    .account-content.payment-history .rh-period .rhp-right .rhpr-box {
        padding: 20px 0px 40px;
    }
    .section-row .spm .sr-left {
        margin-bottom: 50px;
    }
    .section-row .spm {
        display: block;
    }
    .account-content .rh-period {
        display: block;
    }
    .transinfo {
        text-align: left;
        margin: 30px 0px 0px;
    }
    .main-account-menu .mam-group .ac-menu {
        width: 100%;
    }
    .main-account-menu .mam-group .user-info {
        width: calc(100% + 30px);
        padding: 20px 20px 0px;
        text-align: right;
        background-color: #fff;
        margin-left: -15px;
    }
    .main-account-menu .mam-group {
        display: block;
    }
    .main-account-menu {
        height: auto;
    }
    .top-search .ts-left {
        flex: unset;
        width: calc(100% - 66px);
        max-width: 100%;
    }
    .top-search .ts-right {
        width: 63px;
        flex: unset;
    }
    .container {
        max-width: 100%;
    }
    .wrapper {
        padding: 70px 0px;
    }
    .wrapper {
        padding: 30px 0px;
    }
    .homepage-content {
        padding: 20px 0px 60px;
    }
}
@media only screen and (max-width: 800px) {
    .cr-table .crt-col.row-select {
        padding-left: 0px;
    }
    .wrap-list-program .lp-item {
        width: calc(33% - 20px);
    }
    .wrap-list-program .lp-item.rc-item {
        width: calc(25% - 20px);
    }
}
@media screen and (min-width: 768px) and (max-width: 860px) {
    .header .top-header .th-left {
        width: 40%;
    }
    .header .top-header .th-right {
        width: 60%;
    }
    .pm-tab-po .col-po-amount .form-row-left {
        text-align: left;
    }
    .pm-tab-po .col-po-amount .form-row-right {
        text-align: left;
    }
}
@media only screen and (max-width: 768px) {
    .main-account-menu .mam-group .user-info {
        display: none;
    }
    .cr-table .crt-col.row-details .detail-row {
        margin: 0;
    }
    .middle-form .ccd-row {
        margin-left: calc(80% - 400px);
    }
    .btn-view-less-more {
        margin: 5px 0;
    }
}
@media only screen and (max-width: 767px) {
    .family-income-size .cc-detail .ccd-row .ccdr-right {
        width: 100%;
    }
    .instructor {
        padding: 0px 0px;
    }
    .instructor .instructor-wrap {
        padding-top: 193px;
        padding-right: 0px;
    }
    .instructor .iw-right {
        top: 0px;
        right: unset;
    }
    .instructor .iw-right img {
        max-height: 178px;
    }
    .statement-report .datefromto {
        display: block;
        width: 154px;
        margin: 0 auto;
    }
    .statement-report .dateft {
        width: 100px;
    }
    .statement-report .rhp-row {
        display: block;
    }
    .statement-report .rhp-label {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    .statement-report .dateft {
        margin-bottom: 0px;
    }
    .thl-menu.right-navigation {
        display: block;
    }
    .cr-table.table-regform-new-member .checkbox-container {
        display: inline-block;
        margin-bottom: 10px;
    }
    .header {
        margin-top: 50px;
    }
    .cc-detail.form-participant-info .ccd-row .ccdr-left {
        justify-content: flex-start;
    }
    .left-content {
        margin-bottom: 40px;
    }
    .middle-form .ccd-row {
        margin-left: 0;
    }
    .nav-item .nav-link {
        border-color: #dee2e6 #dee2e6 #fff;
    }
    .cr-table.table_reservation_history .crt-col {
        width: 100%;
        text-align: left;
    }
    .account-content.payment-history .group-button {
        text-align: center;
    }
    .pm-tab-po .col-po-amount .form-row-left {
        text-align: left;
    }
    .pm-tab-po .col-po-amount .form-row-right {
        text-align: left;
    }

    .advanced-search-wrap .form-row .form-row-right {
        width: 100%;
    }
    .form-row .horizontal .checkbox-container {
        margin-bottom: 10px;
    }
    .advanced-search-wrap .form-row {
        margin-left: 0px;
        margin-right: 0px;
    }
    .form-row {
        display: block;
    }
    .form-row .form-row-left {
        padding-right: 0px;
        width: auto;
        text-align: left;
        margin-bottom: 10px;
    }
    .table-other-costs-options .row-oco-cb {
        width: 100px;
        display: block;
        justify-content: left;
    }
    .table-other-costs-options .checkbox-container {
        display: block;
    }

    .table-other-costs-options .row-oco-cb:before,
    .table-other-costs-options .row-oco-item:before,
    .table-other-costs-options .row-oco-qty:before,
    .table-other-costs-options .row-oco-payment-method:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .table-other-costs-options .crt-col:first-child:before {
        margin-top: 0px;
    }
    .table-other-costs-options .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
        min-height: 16px;
    }
    .table-other-costs-options .row-oco-cb:before {
        content: " ";
    }
    .table-other-costs-options .row-oco-item:before {
        content: "Other Costs & Options";
    }
    .table-other-costs-options .row-oco-qty:before {
        content: "Qty";
    }
    .table-other-costs-options .row-oco-payment-method:before {
        content: " Payment method";
    }

    .cr-table.table-participan-info .row-pi-name:before,
    .cr-table.table-participan-info .row-pi-dayphone:before,
    .cr-table.table-participan-info .row-pi-nightphone:before,
    .cr-table.table-participan-info .row-pi-gender:before,
    .cr-table.table-participan-info .row-pi-agegroup:before,
    .cr-table.table-participan-info .row-pi-reminder:before,
    .cr-table.table-participan-info .row-pi-edit:before,
    .cr-table.table-participan-info .row-pi-delete:before,
    .cr-table.table-payers-info .row-pyi-name:before,
    .cr-table.table-payers-info .row-pyi-dayphone:before,
    .cr-table.table-payers-info .row-pyi-nightphone:before,
    .cr-table.table-payers-info .row-pyi-email:before,
    .cr-table.table-payers-info .row-pyi-shared:before,
    .cr-table.table-payers-info .row-pyi-edit:before,
    .cr-table.table-cc-info .row-cci-payers:before,
    .cr-table.table-cc-info .row-cci-cardtype:before,
    .cr-table.table-cc-info .row-cci-expdate:before,
    .cr-table.table-cc-info .row-cci-shared:before,
    .cr-table.table-cc-info .row-cci-edit:before,
    .cr-table.table-cc-info .row-cci-delete:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }

    .cr-table.table-participan-info .crt-col:first-child:before,
    .cr-table.table-payers-info .crt-col:first-child:before,
    .cr-table.table-cc-info .crt-col:first-child:before {
        margin-top: 0px;
    }

    .cr-table.table-participan-info .crt-col,
    .cr-table.table-payers-info .crt-col,
    .cr-table.table-cc-info .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }

    .cr-table.table-participan-info .row-pi-name:before {
        content: "Name";
    }
    .cr-table.table-participan-info .row-pi-dayphone:before {
        content: "Day Phone";
    }
    .cr-table.table-participan-info .row-pi-nightphone:before {
        content: "Night Phone";
    }
    .cr-table.table-participan-info .row-pi-gender:before {
        content: "Gender";
    }
    .cr-table.table-participan-info .row-pi-agegroup:before {
        content: "Age Group";
    }
    .cr-table.table-participan-info .row-pi-reminder:before {
        content: "Reminder";
    }
    .cr-table.table-participan-info .row-pi-edit:before {
        content: "Edit";
    }
    .cr-table.table-participan-info .row-pi-delete:before {
        content: "Delete";
    }

    .cr-table.table-payers-info .row-pyi-name:before {
        content: "Name";
    }
    .cr-table.table-payers-info .row-pyi-dayphone:before {
        content: "Day Phone";
    }
    .cr-table.table-payers-info .row-pyi-nightphone:before {
        content: "Night Phone";
    }
    .cr-table.table-payers-info .row-pyi-email:before {
        content: "Email";
    }
    .cr-table.table-payers-info .row-pyi-shared:before {
        content: "Shared";
    }
    .cr-table.table-payers-info .row-pyi-edit:before {
        content: "Edit";
    }

    .cr-table.table-cc-info .row-cci-payers:before {
        content: "Payers";
    }
    .cr-table.table-cc-info .row-cci-cardtype:before {
        content: "Card Type";
    }
    .cr-table.table-cc-info .row-cci-expdate:before {
        content: "Expiration Date";
    }
    .cr-table.table-cc-info .row-cci-shared:before {
        content: "Shared";
    }
    .cr-table.table-cc-info .row-cci-edit:before {
        content: "Edit";
    }
    .cr-table.table-cc-info .row-cci-delete:before {
        content: "Delete";
    }

    .cr-table.table-cc-info .checkbox-container {
        display: unset !important;
    }

    .cr-table.table-make-payment .row-mp-invoiceno:before,
    .cr-table.table-make-payment .row-mp-regdate:before,
    .cr-table.table-make-payment .row-mp-item:before,
    .cr-table.table-make-payment .row-mp-participant:before,
    .cr-table.table-make-payment .row-mp-invoicecost:before,
    .cr-table.table-make-payment .row-mp-amtpaid:before,
    .cr-table.table-make-payment .row-mp-due:before,
    .cr-table.table-make-payment .row-mp-payamount:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table-make-payment .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table-make-payment .row-mp-invoiceno:before {
        content: "Invoice No";
    }
    .cr-table.table-make-payment .row-mp-regdate:before {
        content: "Reg. Date";
    }
    .cr-table.table-make-payment .row-mp-item:before {
        content: "Item";
    }
    .cr-table.table-make-payment .row-mp-participant:before {
        content: "Participant";
    }
    .cr-table.table-make-payment .row-mp-invoicecost:before {
        content: "Invoice Cost";
    }
    .cr-table.table-make-payment .row-mp-amtpaid:before {
        content: "Amt Paid";
    }
    .cr-table.table-make-payment .row-mp-due:before {
        content: "Due";
    }
    .cr-table.table-make-payment .row-mp-payamount:before {
        content: "Pay Amount";
    }
    .cr-table.table-make-payment .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }

    .cr-table.table-make-payment .row-mp-sb {
        display: block;
    }
    .cr-table.table-make-payment .row-mp-sb .checkbox-container {
        min-height: 16px;
    }

    .cr-table.table-payment-history .row-ph-issue-date:before,
    .cr-table.table-payment-history .row-ph-description:before,
    .cr-table.table-payment-history .row-ph-invoice:before,
    .cr-table.table-payment-history .row-ph-payment-type:before,
    .cr-table.table-payment-history .row-ph-amount-paid:before,
    .cr-table.table-payment-history .row-ph-amount-due:before,
    .cr-table.table-payment-history .row-ph-view:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table-payment-history .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table-payment-history .row-ph-issue-date:before {
        content: "Issue Date";
    }
    .cr-table.table-payment-history .row-ph-description:before {
        content: "Description";
    }
    .cr-table.table-payment-history .row-ph-invoice:before {
        content: "Invoice Total";
    }
    .cr-table.table-payment-history .row-ph-payment-type:before {
        content: "Payment Type";
    }
    .cr-table.table-payment-history .row-ph-amount-paid:before {
        content: "Amount Paid";
    }
    .cr-table.table-payment-history .row-ph-amount-due:before {
        content: "Amount Due";
    }
    .cr-table.table-payment-history .row-ph-view:before {
        content: "View";
    }
    .cr-table.table-payment-history .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }
    .account-content.payment-history .rh-period .rhp-right .rhpr-box {
        background-color: transparent;
        padding: 40px 0px;
        display: block;
    }
    .account-content.payment-history .rh-period .rhp-right {
        width: 100%;
    }
    .account-content.payment-history
        .rh-period
        .rhp-right
        .rhpr-box
        .rhpr-row
        .rhprr-left {
        width: calc(100% - 60px);
        text-align: left;
        padding-right: 0px;
    }
    .account-content.payment-history
        .rh-period
        .rhp-right
        .rhpr-box
        .rhpr-row
        .rhprr-right {
        text-align: left;
    }
    .header .top-header ul li a.btn-translate {
        display: none;
    }
    .header .top-header li.open-translate .translate-menu {
        display: block;
        width: 100%;
        top: 0px;
        position: relative;
        border-radius: 0px;
    }
    .cc-detail.form-participant-info .ccd-row .ccdr-left {
        padding-right: 0px;
        width: 100%;
        text-align: left;
    }
    .cc-detail.form-participant-info .ccd-row .ccdr-right.full,
    .cc-detail.form-participant-info .ccd-row .ccdr-right {
        width: 100%;
    }
    .cc-detail.form-participant-info .same-as-dn {
        display: block;
        padding-top: 10px;
        padding-left: 0px;
    }
    .cc-detail .ccd-row {
        display: block;
        margin-bottom: 15px;
    }
    .cc-detail .ccd-row .ccdr-right {
        width: 100%;
    }
    .cc-detail .ccd-row .ccdr-left {
        margin-bottom: 10px;
    }
    .cc-detail {
        max-width: 100%;
        min-width: revert;
    }
    /* responsive table */
    .cr-table.table_cart .row-c-qty:before,
    .cr-table.table_cart .row-c-id:before,
    .cr-table.table_cart .row-c-item:before,
    .cr-table.table_cart .row-c-item-id:before,
    .cr-table.table_cart .row-c-schedule:before,
    .cr-table.table_cart .row-c-participant:before,
    .cr-table.table_cart .row-c-begins:before,
    .cr-table.table_cart .row-c-days:before,
    .cr-table.table_cart .row-c-sess:before,
    .cr-table.table_cart .row-c-starttime:before,
    .cr-table.table_cart .row-c-itemcost:before,
    .cr-table.table_cart .row-c-discount:before,
    .cr-table.table_cart .row-c-due:before,
    .cr-table.table_cart .row-c-pay:before,
    .cr-table.table_cart .row-c-del:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.table_cart .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.table_cart .row-c-qty::before {
        content: "Qty";
    }
    .cr-table.table_cart .row-c-id:before {
        content: "# - ID - Section";
    }
    .cr-table.table_cart .row-c-item:before {
        content: "Item";
    }
    .cr-table.table_cart .row-c-item-id:before {
        content: "Item (# - ID - Section)";
    }
    .cr-table.table_cart .row-c-schedule:before {
        content: "Schedule";
    }
    .cr-table.table_cart .row-c-participant:before {
        content: "Participant";
    }
    .cr-table.table_cart .row-c-begins:before {
        content: "Begins";
    }
    .cr-table.table_cart .row-c-days:before {
        content: "Days";
    }
    .cr-table.table_cart .row-c-sess:before {
        content: "Sessions";
    }
    .cr-table.table_cart .row-c-starttime:before {
        content: "Start Time";
    }
    .cr-table.table_cart .row-c-itemcost:before {
        content: "Item Cost";
    }
    .cr-table.table_cart .row-c-discount:before {
        content: "Discount";
    }
    .cr-table.table_cart .row-c-due:before {
        content: "Due";
    }
    .cr-table.table_cart .row-c-pay:before {
        content: "Pay Amount";
    }
    .cr-table.table_cart .row-c-del:before {
        content: "Delete";
    }
    .cr-table.table_cart .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }
    .cr-table.table_cart .row-c-del .checkbox-container {
        margin-top: 5px;
    }
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-qty,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-id,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-participant,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-begins,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-days,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-sess,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-starttime,
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-del {
        display: none;
    }
    .cr-table .crt-body .crt-body-row.cart-additional .row-c-item:before {
        margin-top: 0px;
    }
    /* .responsive table */
    .cr-table .row-rh-regdate:before {
        content: "Program";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-item:before {
        content: "Item";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-idsection:before {
        content: "# - ID - Section";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-days:before {
        content: "Days";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-begins:before {
        content: "Begins";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-time:before {
        content: "Time";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-sessions:before {
        content: "Sessions";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-participant:before {
        content: "Participant";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-amount:before {
        content: "Amount";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table .row-rh-cancel:before {
        content: "Cancel";
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }

    .account-content .rh-period .rhp-right .rhpr-box {
        margin-top: 40px;
    }
    .account-content .rh-period .rhp-left .select2-group {
        margin-right: 0px;
        width: 100%;
        margin-bottom: 10px;
    }
    .account-content .rh-period .select2-group .select2-container {
        min-width: 0px;
        max-width: 100%;
    }
    .datefromto {
        margin-right: 0px;
        display: flex;
        width: 100%;
    }
    .dateft {
        display: flex;
        width: calc(50% - 7px);
        margin-bottom: 10px;
    }
    .account-content .rh-period .rhp-left .rhp-label {
        margin-bottom: 10px;
        margin-right: 0px;
    }
    .grey-btn {
        display: inline-block;
    }
    .account-content .rh-period .rhp-left .rhp-vo .rhp-row {
        display: block;
    }
    .account-content .rh-period .rhp-left {
        width: 100%;
    }
    .account-content .rh-period .rhp-right {
        width: 100%;
    }
    .main-account-menu {
        display: none;
    }
    .header .top-header .ac-menu,
    .header .top-header .user-info {
        display: block;
    }
    .header .top-header .user-info {
        padding: 5px 20px 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
        margin-bottom: 5px;
    }
    .header .top-header .user-info .usertext {
        display: block;
    }
    .top-header .ac-menu {
        border-top: 1px solid rgba(0, 0, 0, 0.09);
        margin-top: 10px;
        padding-top: 10px;
    }
    .item-product-content .ipc-body {
        padding: 20px 0px 20px;
    }
    .header ul li a.header-btn:hover {
        background-color: transparent;
    }
    .item-product-content .ipc-header .ipcd-left {
        width: 100%;
    }
    .item-product-content .ipc-header .ipcd-right {
        width: 100%;
        margin: 20px 0px 0px;
        text-align: left;
    }
    .item-product-content .ipc-header .ipcd-right .item-status {
        margin-left: 0px;
    }
    .dt-table {
        border: 1px solid #e5e5e5;
        font-size: 14px;
    }
    .item-product-content .ipc-header {
        display: block;
        padding: 15px 15px;
    }
    .item-product-content .ipc-body .ipc-row {
        display: block;
    }
    .item-product-content .ipc-body .ipc-row .ipcr-left {
        width: 100%;
        padding-right: 0px;
        text-align: left;
    }
    .item-product-content .ipc-body .ipc-row .ipcr-right {
        width: 100% !important;
    }
    .back-group .back-btn {
        float: left;
        width: auto;
    }
    .back-group .pagination {
        margin-bottom: 30px;
        width: 100% !important;
    }
    .cr-table .crt-body .crt-body-row {
        display: block;
    }
    .cr-table .crt-col.row-select {
        margin-top: 20px;
        text-align: center !important;
    }
    .cr-table .crt-col.row-details:before {
        content: "Details";
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
    }
    .cr-table .crt-col.row-details {
        width: 100%;
        text-align: left;
    }
    .cr-table .crt-col.row-program:before {
        content: "Program";
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
    }
    .cr-table .crt-col.row-cost:before {
        content: "Cost";
        font-weight: 600;
        margin-bottom: 5px;
        display: block;
    }
    .cr-table .crt-col.row-program {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }
    .cr-table .crt-col.row-cost {
        width: 100%;
        text-align: left;
    }
    .cr-table .crt-col.row-select {
        width: 100%;
        text-align: left;
    }
    .cr-table .crt-body {
        border-top: 1px solid #e5e5e5;
    }
    .cr-table .crt-head {
        display: none;
    }
    .wrap-list-program.list-program-3coloumn .wrap-item-lp {
        width: 100%;
    }
    .wrap-list-program.list-program-3coloumn .wrap-item-lp .lp-item {
        width: 100%;
    }
    .wrap-list-program .lp-item.rc-item {
        width: 100%;
    }
    .homepage-content {
        padding: 20px 0px 30px;
    }
    .wrap-list-program .lp-item {
        width: calc(100% - 0px);
        margin: 0px 0px 20px;
    }
    footer {
        height: auto;
    }
    footer li {
        display: block;
    }
    footer li a {
        border-right: 0px solid #fff;
    }
    .header .top-header .th-right {
        width: 100%;
    }
    /* left panel */
    .header .top-header ul li a .fa {
        padding-right: 5px;
    }
    .top-mobile-menu .toggle-menu {
        padding: 0px 0px;
        margin: 10px;
        position: absolute;
        width: 30px;
    }
    .top-mobile-menu {
        display: flex;
        background-color: var(--color-main);
        height: 50px;
        left: 0px;
        top: 0px;
        position: fixed;
        width: 100%;
        align-items: center;
        justify-content: right;
        padding: 10px;
        z-index: 2;
    }
    .mobile-menu-open {
        overflow: hidden;
    }
    .mobile-menu-open .layer-mobile {
        display: block;
    }
    .mobile-menu-open .layer-mobile {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: rgba(51, 51, 51, 0.87);
        z-index: 2;
    }
    .header {
        position: relative;
    }
    .header .top-header {
        display: block;
        align-items: center;
        position: fixed;
        height: 100vh;
        left: 0px;
        background-color: var(--color-main);
        z-index: 3;
        top: 0px;
        width: 250px;
        left: -250px;
        padding: 20px 0px;
        transition: all 0.3s;
    }
    .mobile-menu-open .top-header {
        left: 0px;
    }
    .header .top-header .th-left {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
        padding-bottom: 10px;
    }
    .header .top-header .th-right {
        padding-top: 10px;
        width: 100%;
        text-align: left;
    }
    .header .top-header ul li {
        display: block;
        width: 100%;
    }
    .header .top-header ul li a {
        color: var(--color-main-text);
        padding: 5px 20px;
        display: block;
        font-size: 16px;
    }
    .header ul li a.header-btn {
        padding: 5px 20px;
        background-color: transparent;
        border-radius: 0px;
        margin: 0px 0px;
    }
}

.datepicker table {
    width: 100%;
}
.datepicker .datepicker-days,
.datepicker .datepicker-months,
.datepicker .datepicker-years,
.datepicker .datepicker-centuries,
.datepicker .datepicker-decades {
    width: 260px;
}
/* - bug aileen */
@media only screen and (max-width: 767px) {
    /* - list program */
    .top-search .advanced-search {
        margin-left: 10px;
    }
    .top-search .advanced-search a {
        font-size: 11px;
        line-height: normal;
        display: block;
    }
    .top-search .ts-left {
        padding-right: 0px;
    }
    .datepicker.dropdown-menu {
        z-index: 1 !important;
    }
    footer .footer-row {
        margin-bottom: 0px;
    }
    /* -  advanced search - */
    .form-row .horizontal .checkbox-container {
        min-width: 50px;
    }
}
/* - list category */
body .button-disabled,
body .button-disabled:hover {
    background-color: #6c6c6c;
}
.header .top-banner img {
    max-height: 290px !important;
}
@media only screen and (max-width: 320px) {
    /* -  advanced search - */
    .datepicker.dropdown-menu {
        left: calc(50% - 134px) !important;
    }
    .datepicker-dropdown:after,
    .datepicker-dropdown:before {
        display: none !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .cr-table .crt-col.row-select {
        width: 180px;
    }
    .cr-table .crt-col.row-cost {
        width: 100px;
    }
    .cr-table .crt-col.row-details {
        width: calc(100% - 180px - 100px);
    }
}

.wrap-list-program .lp-item.rc-item .rc-content .html-content a {
    word-wrap: break-word;
}
.modal-asdr {
    margin: 0 auto;
    background-color: #fff;
}
.wrap-as-detail-report .asdr-info {
    margin: 10px 0px 20px;
    border-top: 5px solid #a2a2a2;
    border-bottom: 5px solid #a2a2a2;
    padding: 10px 0px;
}
.wrap-as-detail-report .asdr-row {
}
.wrap-as-detail-report .asdr-info .asdr-left {
    display: inline-block;
    width: 130px;
    text-align: right;
    padding-right: 10px;
    font-weight: 600;
}
.wrap-as-detail-report .asdr-info .asdr-right {
}
.wrap-as-detail-report .align-right {
    text-align: right;
}
.wrap-as-detail-report .grey-btn:hover {
    color: #1f1f1f;
}
.district {
    margin: 40px 0px;
    display: flex;
}
.district .dleft,
.district .dright {
    display: inline-block;
    width: 40%;
}
@media only screen and (max-width: 900px) {
    .district {
        display: block;
    }
    .modal-asdr {
        width: 100%;
    }
    .district .dleft,
    .district .dright {
        display: block;
        width: 100%;
    }
    .district .dleft {
        margin-bottom: 20px;
    }
    .cr-table.asdr-table {
        width: 100% !important;
        float: unset !important;
    }
    .aging-detail {
        width: 250px;
        font-size: 12px;
        float: unset;
        padding: 40px 0px 40px 0px;
    }
    .ad-total {
        width: 250px;
        font-size: 12px;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px;
        font-weight: 600;
    }
}
.cr-table.asdr-table {
    font-size: 12px;
    width: calc(100% - 250px);
    float: left;
}
.cr-table.asdr-table .row-asdr-date {
    width: 75px;
    padding-right: 5px;
}
.cr-table.asdr-table .row-asdr-participation {
    width: calc(33.3% - 100px);
    padding-right: 5px;
}
.cr-table.asdr-table .row-asdr-item {
    width: calc(33.3% - 20px);
    padding-right: 5px;
}
.cr-table.asdr-table .row-asdr-activity {
    width: calc(33.3% - 66px);
    padding-right: 5px;
}
.cr-table.asdr-table .row-asdr-amout {
    width: 60px;
    text-align: right;
}
.cr-table.asdr-table .row-asdr-balance {
    width: 60px;
    text-align: right;
}
/* responsive table */
@media only screen and (max-width: 767px) {
    .wrap-as-detail-report .align-right {
        text-align: left;
    }
    .cr-table.asdr-table .row-asdr-date:before,
    .cr-table.asdr-table .row-asdr-participation:before,
    .cr-table.asdr-table .row-asdr-item:before,
    .cr-table.asdr-table .row-asdr-activity:before,
    .cr-table.asdr-table .row-asdr-amout:before,
    .cr-table.asdr-table .row-asdr-balance:before {
        font-weight: 600;
        margin-top: 10px;
        display: block;
    }
    .cr-table.asdr-table .crt-col:first-child:before {
        margin-top: 0px;
    }
    .cr-table.asdr-table .row-asdr-date:before {
        content: "Date";
    }
    .cr-table.asdr-table .row-asdr-participation:before {
        content: "Participant(s)";
    }
    .cr-table.asdr-table .row-asdr-item:before {
        content: "Item (# - ID - Section)";
    }
    .cr-table.asdr-table .row-asdr-activity:before {
        content: "Activity";
    }
    .cr-table.asdr-table .row-asdr-amout:before {
        content: "Amount";
    }
    .cr-table.asdr-table .row-asdr-balance:before {
        content: "Balance";
    }

    .cr-table.asdr-table .crt-col {
        padding-right: 0px;
        width: 100% !important;
        text-align: left;
    }
}
/* .responsive table */
.aging-detail {
    width: 250px;
    font-size: 12px;
    float: right;
    padding: 0px 0px 0px 20px;
}
.aging-detail .adaa-row {
    display: flex;
    margin-top: 2px;
}
.aging-detail .adaa-row .adr-left {
    width: calc(100% - 60px);
}
.aging-detail .adaa-row .adr-right {
    width: 60px;
    text-align: right;
}
.line-ad {
    width: 100%;
    margin-top: 40px;
    border-bottom: 5px solid #a2a2a2;
}
.ad-total {
    width: 250px;
    font-size: 12px;
    padding: 0px 0px 0px 20px;
    margin: 20px auto;
    font-weight: 700;
}
.ad-total .adaa-row {
    display: flex;
    margin-top: 2px;
}
.ad-total .adaa-row .adr-left {
    width: calc(100% - 60px);
}
.ad-total .adaa-row .adr-right {
    width: 60px;
    text-align: right;
}

/* 99835 #51 */
@media only screen and (max-width: 767px) {
    .cc-detail.form-participant-info div[style="visibility: hidden;"] {
        display: none;
    }
    .cc-detail.form-participant-info
        .ccd-row
        .ccdr-right
        div[style="display : inline-block; height: 200px;"] {
        height: auto !important;
    }
    .dt-table {
        margin-top: 10px;
    }
}
@media only screen and (max-width: 375px) {
    .dt-table .dtt-row .dttr-right {
        padding: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .cc-detail.form-participant-info .ccd-row .ccdr-left {
        width: 150px;
    }
}
.cc-detail.form-participant-info .ccd-row .ccdr-right fieldset {
    margin-bottom: 8px;
}
.cc-detail.form-participant-info .ccd-row .ccdr-left {
    align-items: normal !important;
}
.cc-detail.form-participant-info
    .ccd-row
    .ccdr-right
    #other_info_list
    label.checkbox-container.mb-2 {
    margin-top: 3px;
}
.cc-detail.form-participant-info .ccd-row .ccdr-left {
    align-items: normal;
}
.cc-detail.form-participant-info .font-weight-bold {
    margin-bottom: 20px;
    display: block;
    margin-top: 20px;
}
.cc-detail.form-participant-info {
    margin-top: 20px;
}
.cc-detail.form-participant-info
    .ccd-row
    .ccdr-right
    .uxpin.vertical
    .checkbox-container.mb-2 {
    margin-bottom: 0px !important;
    margin-top: 3px;
}
.cc-detail.form-participant-info .ccd-row .ccdr-left:empty {
    display: none;
}
.cc-detail.form-participant-info .ccd-row .ccdr-right .btn {
    padding: 0px 0px;
}
.cc-detail.form-participant-info .ccd-row .ccdr-right fieldset {
    margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
    #frmShoppingCart .group-button button {
        width: 150px;
    }
    #frmShoppingCart .group-button {
        max-width: 340px;
        margin: 0 auto;
    }
    .cc-detail.form-participant-info .card {
        border: 0px solid #333333;
    }
    .cc-detail.form-participant-info .ccd-row .ccdr-right.row-block .ccdr-wide {
        width: calc(100% - 5px);
    }
    .cc-detail.form-participant-info {
        margin-bottom: 0px !important;
    }
    .cc-detail.form-participant-info .card-body.px-0 {
        padding-bottom: 0px !important;
    }
    .cc-detail.form-participant-info #buttonAddAnother {
        margin-bottom: 30px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .cr-table.table_cart .crt-col {
        font-size: 12px;
    }
}

/* style for RSPD-1957 */
.cc-option-main {
    width: 690px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.cc-option-label, .cc-option-value, .cc-option-addnew, .cc-option-info {
    display: inline-block !important;
    vertical-align: middle;
    margin-bottom: 10px;
}

.cc-option-label {
    margin-right: 153px;
}

.cc-option-value {
    width: 269px;
    margin-right: 5px;
}

.cc-option-value .select2-group {
    width: 269px;
}

.cc-option-addnew {
    margin-right: 5px;
}

.membership-info {
    width: 1110px;
    background-color: #fafafa;
    border: 1px solid #e2e2e2;
    padding: 20px 15px 15px 20px;
    margin-top: 20px !important;
}

/* .select2-group {
    display: inline-block;
}

.fa-info-circle {
    cursor: pointer;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
    .middle-form .form-row {
        margin-left: 0px;
    }
    .cc-option-main {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .cc-option-label, .cc-option-value, .cc-option-addnew, .cc-option-info {
        display: block;
        width: 100%;
        margin-right: 0;
        text-align: left;
    }

    .cc-option-label {
        margin-right: 0;
    }

    .cc-option-value, .cc-option-addnew, .cc-option-info {
        margin-bottom: 10px;
    }

    .cc-option-info {
        text-align: left;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .middle-form .form-row {
        margin-left: calc(70% - 450px);
    }
    
    .membership-info {
       max-width: 720px;
       margin: auto;
    }
 }

 @media (min-width: 1024px) {
    .membership-info {
       max-width: 960px;
    }
 }

 @media (min-width: 1200px) {
    .membership-info {
       max-width: 1110px;
    }
 }
/* style for RSPD-1957 */