My Subscriptions
.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 16px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
border: 2px solid #ddd;
border-radius: 5px;
padding-left: 0;
margin-top: 20px;
}
.accordion:first-child {
margin-top: 0;
}
.appstle_accordian_line_1 {
width: 18px;
border-bottom: 2px solid #ddd;
}
.appstle_accordian_line_2 {
flex-grow: 1;
border-bottom: 2px solid #ddd;
margin-right: 10px;
}
.text-center {
text-align: center!important;
}
/* .accordion:hover {
background-color: #eee;
} */
/* .accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
} */
.accordion.active {
padding-left: 0;
border-color: #444;
}
.appstle_subscription_contract_detail_toggle_wrapper {
cursor: pointer;
}
.appstle_subscription_contract_detail_toggle_wrapper.active .appstle_contract_see_more {
display: none;
}
.appstle_subscription_contract_detail_toggle_wrapper.active .appstle_contract_hide_more {
display: block !important;
}
.appstle_subscription_contract_detail_toggle_wrapper.active .lnr-chevron-right {
transform: rotate(90deg);
}
.accordion div {
opacity: 0;
}
/* .accordion.active div {
opacity: 1;
} */
.lnr-chevron-right {
transition: all 0.5s;
}
.accordion.active .lnr-chevron-right {
transform: rotate(90deg);
color: #444 !important;
}
.panel {
/* padding: 0 18px; */
background-color: white;
overflow: hidden;
}
.appstle_myProduct {
visibility: hidden;
}
/* .appstle_preloader {
width: 60px;
height: 60px;
position: absolute;
top: 70px;
left: calc(50% - 15px);
z-index: 98765;
}*/
.appstle_statusBadge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
}
.appstle_status_ACTIVE {
padding: 5px 15px;
color: #fff;
background-color: #28a745;
}
.appstle_status_CANCELLED {
color: #fff;
background-color: #6c757d;
}
.appstle_status_QUEUED {
color: #fff;
background-color: #28a745;
}
.appstle_status_SKIPPED {
color: #fff;
background-color: #6c757d;
}
.appstle_sub-title {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .1em;
margin: 8px !important;
}
@media screen and (max-width: 1024px) {
.appstle_sub-title {
font-size: 13px;
}
}
.appstle_orderDate_CANCELLED {
display: none;
}
.appstle_upcomingAcc_CANCELLED {
display: none;
}
.appstle_cancelbtn_CANCELLED {
display: none;
}
.appstle_orderFrequency_CANCELLED {
display: none;
}
.hideSkipbtn_SKIPPED {
display: none;
}
.appstle_skipShipmentFlag_false,
.appstle_pauseResumeSubscriptionFlag_false,
.appstle_changeNextOrderDateFlag_false,
.appstle_changeOrderFrequencyFlag_false,
.appstle_createAdditionalOrderFlag_false,
.appstle_cancelSubscriptionFlag_false {
display: none!important;
}
.appstle_order-detail_cancel-button,
.appstle_order-detail_update-button,
.appstle_cancelButton,
.appstle_deleteButton,
.appstle_updateButton,
.appstle_editButton,
.appstle_skipOrderButton,
.appstle_updatePaymentButton,
.appstle_cencelSubscription,
.appstle_show_add_products_button,
.appstle_edit_shipping_cancel-button,
.appstle_edit_shipping_update-button,
.appstle_pause_subscription_button,
.appstle_resume_subscription_button,
.appstle_addProduct_type_next_button,
.appstle_addProduct_type_cancel_button {
padding: 6px 12px;
border: none;
border-radius: 4px;
color: white;
background-color: #242222;
font-size: 12px;
border: 1px solid #242222;
margin: 10px 0;
}
@media screen and (max-width: 1024px) {
.appstle_order-detail_cancel-button,
.appstle_order-detail_update-button,
.appstle_cancelButton,
.appstle_deleteButton,
.appstle_updateButton,
.appstle_editButton,
.appstle_skipOrderButton,
.appstle_updatePaymentButton,
.appstle_cencelSubscription,
.appstle_show_add_products_button,
.appstle_hide_add_products_button,
.appstle_product-search-button,
.ppstle_pause_subscription_button,
.appstle_resume_subscription_button,
.appstle_addProduct_type_next_button,
.appstle_addProduct_type_cancel_button {
font-size: 10px
}
}
.appstle_buttonGroup {
display: flex;
margin-top: 15px;
justify-content: flex-end;
align-items: center;
}
.appstle_form_margin {
margin: 8px;
}
.appstle_ml-10 {
margin-left: 10px;
}
.appstle_deleteButton {
background-color: white;
border: 1px solid #eb3023;
color: #eb3023;
}
.appstle_edit_shipping_cancel-button,
.appstle_order-detail_cancel-button,
.appstle_cancelButton {
background-color: white;
border: 1px solid #242222;
color: #242222;
}
.appstle_skipOrderButton:hover,
.appstle_skipOrderButton,
.appstle_resume_subscription_button,
.appstle_resume_subscription_button:hover {
background-color: #3ac47d !important;
border: 1px solid #3ac47d !important;
color: #fff !important;
}
.appstle_updatePaymentButton:hover,
.appstle_updatePaymentButton {
background-color: #3ac47d !important;
border: 1px solid #3ac47d !important;
color: #fff !important;
}
.appstle_show_add_products_button,
.appstle_show_add_products_button:hover,
.appstle_addProduct_type_next_button,
.appstle_addProduct_type_next_button:hover {
background-color: #545cd8!important;
border: 1px solid #545cd8!important;
}
.appstle_cencelSubscription:hover,
.appstle_cencelSubscription,
.appstle_pause_subscription_button,
.appstle_pause_subscription_button:hover,
.appstle_addProduct_type_cancel_button,
.appstle_addProduct_type_cancel_button:hover {
background-color: #d92550!important;
border: 1px solid #d92550!important;
}
.appstle_form_group {
margin-top: 15px;
}
.appstle_form_group select, .appstle_form_group input {
width: 100%;
}
.appstle_product_search_wrapper {
margin: 30px 0;
display: flex;
flex-direction: column;
}
.appstle_product-search-select {
flex-grow: 1;
}
.appstle_delete_model_nobtn {
padding: 5px 20px;
background: #0d4f0d;
border: none;
border-radius: 8px;
color: #fff;
font-size: 12px;
}
.appstle_delete_model_yesbtn {
padding: 5px 20px;
background: #a13333;
border: none;
border-radius: 8px;
color: #fff;
font-size: 12px;
}
.appstle_order-detail-edit-button{
padding: 5px 15px;
border: none;
border-radius: 4px;
color: white;
background-color: #242222;
}
.appstle_hide_add_products_button,
.appstle_hide_add_products_button:hover,
.appstle_product-search-button {
padding: 0 12px;
border: none;
border-radius: 4px;
color: white;
background-color: #545cd8;
font-size: 12px;
}
.appstle_hide_add_products_button:active,
.appstle_hide_add_products_button:focus,
.appstle_hide_add_products_button,
.appstle_hide_add_products_button:hover {
background-color: #d92550 !important;
}
.select2-container, .select2-container--default {
flex-grow: 1;
}
.appstle_input_error {
color: #eb3023;
font-size: 10px;
margin-top: 5px;
}
.appstle_order_detail_header {
padding: 20px;
background-color: #eee;
margin-top: 34px;
display: flex;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
.appstle_order_detail_row {
display: flex;
justify-content: space-between;
padding: 10px 0px;
align-items: center;
}
.appstle_loadersmall {
border: 5px solid green!important;
-webkit-animation: appstle_spin 1s linear infinite;
animation: appstle_spin 1s linear infinite;
border-top: 5px solid #555;
border-radius: 50%;
width: 60px;
height: 60px;
margin: 0 auto;
}
.appstle_loaderTiny {
border: 2px solid red!impotant;
-webkit-animation: appstle_spin 1s linear infinite;
animation: appstle_spin 1s linear infinite;
border-top: 2px solid red!impotant;
border-radius: 50%;
width: 18px;
height: 18px;
margin: 0 auto;
}
@keyframes appstle_spin_tiny {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* The Modal (background) */
.appstle_delete_modal {
text-align: center;
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 20; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.appstle_delete_modal-content {
text-align: center;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 27rem;
border-radius: 0.5rem;
}
/* The Close Button */
.appstle_model_close {
margin: 1px;
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
text-align:right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.appstle_model_close:hover,
.appstle_model_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
@-webkit-keyframes appstle_spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes appstle_spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media screen and (max-width: 767px) {
.appstle_product_wrapper {
flex-direction: column;
}
}
.appstle_product_wrapper {
display: flex;
margin-top: 16px;
/* background-color: #eeeeee; */
box-shadow: 0 0px 4px 0 rgb(0 0 0 / 15%);
padding: 15px;
border-radius: 5px;
align-items: center;
border: 2px solid #ddd;
}
.appstle_SKIPPED_status,
.appstle_CANCELLED_status,
.appstle_QUEUED_status,
.appstle_SCHEDULED_status,
.appstle_ACTIVE_status,
.appstle_PAUSED_status {
background-color: #3ac47d;
color: white;
padding: 3px 10px;
border-radius: 4px;
font-size: 10px;
letter-spacing: 0.3px;
margin-left: 5px;
line-height: 1;
}
.appstle_QUEUED_status,
.appstle_SCHEDULED_status,
.appstle_PAUSED_status {
background-color: #f7b924!important;
}
.appstle_SKIPPED_status,
.appstle_CANCELLED_status {
background-color: #d92550!important;
}
.appstle_edit_wrapper {
margin-top: 20px
}
.appstle_edit_wrapper form {
display: flex;
justify-content: space-between;
}
.appstle_edit_wrapper .appstle_form_group {
width: calc(50% - 10px);
}
.appstle_edit_total {
margin-right: 30px;
font-size: 21px;
letter-spacing: 0.5px;
}
.appstle_subscription_image_wrapper {
display: flex;
flex-wrap: wrap;
}
.appstle_subscription_image_wrapper img {
flex-basis: 46%;
margin: 2%;
display: flex;
align-items: center;
justify-content: center;
}
.appstle_subscription_detail {
padding-right: 30px;
min-height: 200px;
}
.grid {}
.appstle_subscription_image_wrapper {
display: flex;
flex-wrap: wrap;
}
.appstle_subscription_image_wrapper img {
flex-basis: 46%;
margin: 2%;
display: flex;
align-items: center;
justify-content: center;
}
.appstle_subscription_detail {
padding-right: 30px;
min-height: 200px;
display: flex;
flex-direction: column;
}
.grid {}
.appstle_order_detail_row {
margin: 0 8px 0px 8px;
padding: 0;
justify-content: flex-start;
min-height: 30px;
}
@media screen and (max-width: 1024px) {
.appstle_order_detail_row {
min-height: 15px;
}
}
.appstle_font_size {
font-size: 13px !important;
}
@media screen and (max-width: 1024px) {
.appstle_font_size {
font-size: 10px !important;
}
}
span {}
.appstle_next_oder_date_wrapper {
display: flex;
align-items: center;
flex-grow: 1;
}
.appstle_ml-auto {
margin-left: auto;
}
.appstle_ml-auto {
margin-left: auto;
}
.appstle_mb-0 {
margin-bottom: 0 !important;
}
.appstle_order-detail-edit-button {
background-color: transparent;
color: black;
}
.appstle_subscription_contract_title {
display: flex;
align-items: center;
/* margin-bottom: 6px !important; */
}
@media screen and (max-width: 767px) {
.appstle_subscription_payment_wrapper {
flex-direction: column;
}
}
.appstle_subscription_payment_wrapper {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 750px) {
.appstle_subscription_contract_content_wrapper_mobile {
padding-left: 0;
padding-right: 0;
}
}
.appstle_subscription_flex_override {
display: flex;
}
@media screen and (max-width: 750px) {
.appstle_subscription_flex_override {
display: flex;
flex-direction: column;
padding-left: 0;
padding: 0 18px;
}
}
.appstle_address_item {
margin-bottom: 20px;
}
.appstle_address_item input {
width: 100%;
}
.appstle_address_header_title {
font-size: 28px;
text-align: left;
align-self: flex-start;
margin-bottom: 10px;
}
.appstle_play_icon {
width: 6px;
height: 6px;
border-top: 4px solid transparent;
border-left: 8px solid #fff;
border-bottom: 4px solid transparent;
position: relative;
left: 1px;
}
.appstle_pause_icon {
width: 7px;
height: 7px;
border-right: 3px solid #fff;
border-left: 3px solid #fff;
display: inline-block;
}
.plans {
display: flex;
justify-content: space-between;
box-sizing: border-box;
background: #fff;
border-radius: 10px;
align-items: center;
flex-wrap: wrap;
}
.plans .plan input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.plans .plan {
cursor: pointer;
width: 49%;
position: relative;
}
.plans .plan .plan-content {
display: flex;
padding: 20px;
box-sizing: border-box;
border: 2px solid #e1e2e7;
border-radius: 10px;
transition: box-shadow .4s;
position: relative;
height: 100%
}
.plans .plan .plan-content img {
margin-right: 20px;
height: 72px
}
.plans .plan .plan-details span {
margin-bottom: 10px;
display: block;
font-size: 16px;
line-height: 24px;
color: #252f42;
font-weight: 700;
}
.plans .plan .plan-details p {
color: #646a79;
font-size: 14px;
line-height: 1.5;
}
.plans .plan .plan-content:hover {
box-shadow: 0 3px 5px 0 #e8e8e8
}
.plans .plan input[type=radio]:checked+.plan-content:after {
content: "";
position: absolute;
height: 12px;
width: 12px;
background: #216fe0;
right: 20px;
top: 20px;
border-radius: 100%;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #06f
}
.plans .plan input[type=radio]:checked+.plan-content {
border: 2px solid #216ee0;
background: #eaf1fe;
transition: .3s ease-in
}
@media screen and (max-width: 991px) {
.plans {
margin:0 20px;
flex-direction: column;
align-items: flex-start;
padding: 40px
}
.plans .plan {
width: 100%
}
.plan.complete-plan {
margin-top: 20px
}
.plans .plan .plan-content .plan-details {
width: 70%;
display: inline-block
}
.plans .plan input[type=radio]:checked+.plan-content:after {
top: 45%;
transform: translate(-50%)
}
}
@media screen and (max-width: 767px) {
.plans .plan .plan-content .plan-details {
width:60%;
display: inline-block
}
}
@media screen and (max-width: 540px) {
.plans .plan .plan-content img {
margin-bottom:20px;
height: 56px;
transition: height .4s
}
.plans .plan input[type=radio]:checked+.plan-content:after {
top: 20px;
right: 10px
}
.plans .plan .plan-content .plan-details {
width: 100%
}
.plans .plan .plan-content {
padding: 20px;
flex-direction: column;
align-items: baseline
}
}
.plansWrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%
}
@media screen and (max-width: 700px) {
.plansWrapper {
flex-direction:column
}
}
.appstle_addProduct_type_button_wrapper {
display: flex;
justify-content: flex-end;
margin-top: 20px;
margin-bottom: 30px;
}
.selectize-control::before {
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
content: " ";
z-index: 2;
position: absolute;
display: block;
top: 50%;
right: 34px;
width: 16px;
height: 16px;
margin: -14px 0 0 0;
background: url('https://ik.imagekit.io/mdclzmx6brh/spinner_CTSXf8R8lXr.gif');
background-size: 16px 16px;
opacity: 0;
}
.selectize-control.loading::before {
opacity: 1;
}
.selectize-input {
background: #fff !important;
}
.selectize-control {
padding-left: 3px;
}
-->
My Subscriptions
Hello Craig Huggins,
Customer Id: 2984225767494
Subscription # 1560969286
