/*Plan List Page*/
div.card_list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap:10px;
}

div.card_list .card-list__item {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    padding-left: 6px;
    color: #444;
    border: 1px solid #ccd2de;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .3s;
    max-width: 370px;
    width: 320px;
}

h1.card-basic__title.js-mdn,
h1.section-header__title {
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 500;
}

header.card-basic__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px 5px 10px;
}

header .plan-status {
    display: flex;
    gap: 2px;
}

li.card-basic__list-item {
    list-style: none;
    display: flex;
    gap: 5px;
    font-size: 14px;
}

span.status-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    opacity: .75;
    background: currentColor;
}

ul.card-basic__list {
    padding-left: 15px;
    margin: 10px 0;
}

span.card-basic__value {
    font-weight: 500;
    color: #646464;
}

p.card-basic__label {
    font-weight: 400;
    color: #646464;
}

span.status-bar.status-bar--value--active {
    background: #5abb53;
}

span.status-bar.status-bar--value--inactive {
    background: #acb1bb;
}

span.status-bar.status-bar--value--dispatched {
    background: rgba(72, 129, 234, 0.73);
}

span.status-badge {
    border: 1px solid;
    padding: 1px 10px;
    border-radius: 100px;
    font-size: 12px;
}

span.status-badge.status-badge--value--active {
    border-color: #84cc7e;
    color: #84cc7e;
}

span.status-badge.status-badge--value--inactive {
    border-color: #acb1bb;
    color: #acb1bb;
}

span.status-badge.status-badge--value--dispatched {
    border-color: rgba(72, 129, 234, 0.73);
    color: rgba(72, 129, 234, 0.73);
}

a.button.card_btn {
    background-color: #61CE7000;
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    fill: #e12f67;
    color: #e12f67;
    border-style: solid;
    border-width: 1px;
    border-color: #e12f67;
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

a.button.card_btn:hover {
    background-color: #e12f67;
    color: #fff;
    border-color: #e12f67;
}

footer.card-basic__footer {
    padding: 0 10px 10px 10px;
}

.menu-container {
    position: relative;
    display: inline-block;
}

.dots {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
}

.dot {
    width: 4px;
    height: 4px;
    background-color: #333;
    border-radius: 50%;
}

.context-menu {
    position: absolute;
    top: 30px;
    right: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    overflow: hidden;
    display: none;
    min-width: 150px;
    z-index: 10;
}

.context-menu.active {
    display: block;
}

.context-menu a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.context-menu a:hover {
    background-color: #f0f0f0;
}

.context-menu a:last-child {
    border-bottom: none;
}

.customer-d-menu .account-main-cont p.card-basic__label {
    font-family: Montserrat Medium, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    padding: 0px !important;
    margin-bottom: 0;
}
/*Plan List Page End*/

/* Plan Detail */
.line {
    margin-bottom: 15px;
}

.customer-d-menu .account-main-cont p.details-list__info {
    padding-top: 0px !important;
}

header.section-header {
    display: flex;
    align-items: center;
    min-height: 3.125rem;
    padding: .625rem .9375rem;
    background: #FAFAFA;
    border: 1px solid #e2e2e2;
}

dl.details-list__item {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

dl.details-list__item dd.details-list__cell {
    margin: 0px;
    width: 100%;
}

dd.details-list__cell p.details-list__label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #646464;
}

.details-list {
    margin-top: 15px;
    padding: 0 5px;
}

.subscriber-account-info__cell address.js-address-block,
.details-list__cell address.js-address-block {
    border: none;
    padding: 0px;
    margin: 0;
}

dl.line-usage-summary__list {
    display: flex;
}

dd.line-usage-summary__item {
    flex: 1;
    text-align: center;
    margin: 0;
    background: #efefef;
    border-left: 1px solid #ffffff;
}

dd.line-usage-summary__item:first-child {
    border: none;
}

dd.line-usage-summary__item p {
    margin-bottom: 5px;
}

.line-service__plan-item.js-service-bucket.ember-view {
    display: flex;
    justify-content: space-between;
    background: #efefef;
    padding: 5px 10px;
    border-bottom: 1px solid #fff;
}

.line-service__plan-action {
    text-align: right;
    font-size: 14px;
}

.line-service__plan-info h1.line-service__plan-title.js-plan-name {
    font-size: 20px;
    margin-bottom: 0px;
}

p.line-service__plan-meta-item {
    margin-bottom: 0px;
    font-size: 14px;
}
/* Plan Detail End */


span.status-bar.status-bar--value--cancelled {
    background: #d7482f;
}

span.status-bar.status-bar--value--draft {
    background: #ebb02c;
}

span.status-bar.status-bar--value--error {
    background: #ff1200;
}

/* Start:: Custom Modal Style*/
.custom-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 9999;
}

.custom-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 40px 2.5rem;
    width: calc(50% - 200px);
    border-radius: 0.5rem;
    max-height:calc(100% - 265px);
    overflow-y: auto;
}

.custom-modal-content.custom-modal-sm {
    width: calc(30% - 200px);

    .custom-model-ajax-message {
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }

    .custom-model-ajax-icon {
        width: 60px;
        height: 60px;
        margin: 25px auto 1rem;
        display: flex;
    }
}

.close-button {
    width: 1.5rem;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 .2em .15em;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: #ddd;
    color: #333;
    transition: color 0.12s ease-in-out;
    position: absolute;
    right: 10px;
    top: 10px;
}

.close-button:hover {
    color: #d75b4c;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}


.form-groups-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
    justify-content: space-between;
}

.form-groups-wrapper .form-group {
    width: calc(50% - 15px);
}

.custom_model_header {
    text-align: left;
}

.custom_model_header h1 {
    font-size: 26px;
    font-weight: 600;
}

.req-star {
    color: red;
}

.custom-modal input:disabled {
    background-color: #ebebeb;
}

.custom-modal-footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.custom-modal label.error {
    color: red;
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

.custom-modal input.error {
    border-color: red !important;
}
.custom-modal input {
    width: 100%;
    border-color: #df1e5a !important;
    border-radius: 10px !important;
}

.custom-modal-footer button {
    background: #df1e5a;
    border-radius: 10px;
}

/* End:: Custom Modal Style*/

.mt-0{
    margin-top: 0px !important;
}


/* BYOD POPUP  */
.wizard-action button.btn-next-step {
    background-color: #DF1E5A;
    font-family: "Roboto", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #DF1E5A;
    border-radius: 10px 10px 10px 10px;
    padding: 10px 25px 10px 25px;
}

.wizard-action {
    justify-content: center;
    display: flex;
    gap:25px;
}
.wizard-action button {
    min-width: 150px;
}
.wizard-action button.btn-previous-step {
    background-color: #FFFFFF;
    font-family: "Roboto", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    fill: #DF1E5A;
    color: #DF1E5A;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #DF1E5A;
    border-radius: 10px 10px 10px 10px;
    padding: 10px 0px 10px 0px;
}
.wizard-title {
    text-align: center;
    padding-bottom: 15px;
}

.wizard-title.with_border{
    border-bottom: 1px solid #e5e5e5;
}

.wizard-title p {
    margin-bottom: 0;
}


    .wizard-progress-bar {
      margin-bottom: 20px;
    }

    .wizard-progress-bar h4 {
      color: #1baf5d;
      margin-bottom: 8px;
    }

    .wizard-progress-bar-track {
      background: #eee;
      border-radius: 6px;
      height: 10px;
      overflow: hidden;
    }

    .wizard-progress-bar-fill-20 {
      background: #1baf5d;
      width: 20%;
      height: 10px;
      border-radius: 6px;
    }

    .wizard-progress-bar-fill-40 {
      background: #1baf5d;
      width: 40%;
      height: 10px;
      border-radius: 6px;
    }

    .wizard-progress-bar-fill-60 {
      background: #1baf5d;
      width: 60%;
      height: 10px;
      border-radius: 6px;
    }

    .wizard-progress-bar-fill-80 {
      background: #1baf5d;
      width: 80%;
      height: 10px;
      border-radius: 6px;
    }

    .wizard-progress-progress-desc {
      font-size: 14px;
      color: #999;
      margin-top: 10px;
      text-align: center;
    }

.switch-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-weight: 600;
      padding: 40px 0px;
    }

    .label {
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 30px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #e91e63;
  border-radius: 30px;
  transition: 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 2px;
  background-color: #e91e63;
  border-radius: 50%;
  transition: 0.3s;
}

.switch-container input:checked + .slider::before {
  transform: translateX(30px);
}

.label-left {
  color: #e91e63;
}

.label-right {
  color: #888;
}

.switch-container input:checked ~ .label-left {
  color: #888;
}

.switch-container input:checked ~ .label-right {
  color: #e91e63;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.simtype_info p {
    margin-bottom: 0;
    color: #878787;
}

.simtype_info div {
    margin-bottom: 5px !important;
}

.simtype_info {
    border-top: 1px solid #e5e5e5;
    padding: 15px 65px;
}

.form_wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 2px;
    margin-bottom: 40px;
}

.form_wrapper .form_field_group-half {
    width: 48%;
}

.form_wrapper .form_field_group-full {
    width: 100%;
}

.form_wrapper .form_field_group-half input,
.form_wrapper .form_field_group-full input {
    padding: 5px 15px;
}
.message_wraper {
    text-align: center;
}
/* Optional: Hide checkbox outline on focus */