@font-face {
    font-family: 'Proxima Nova';
    src: url('/themes/custom/apigee_custom/css/../fonts/Proxima Nova Font.otf');
}

/* Remove only this css padding style when we enable Account profile Sub menu */

.path--apigee-monetization-plans .user-profile-menu {
    padding-top: 42px;
}

/* Removed main container width because here no need of container */

.path--apigee-monetization-plans main {
    width: initial;
    margin: initial;
}

/* Sidebar first content and Main content class 30-70 Layout style  */ 

@media (min-width: 992px) {
    .path--apigee-monetization-plans .main-content-class {
      flex: 0 0 100%;
      max-width: calc(100% - 464px) !important;
      width: 100%;
      margin: 15px 62px 0 62px;
    }
}

.path--apigee-monetization-plans .sidebar-first-content {
    flex: 0 0 25%;
    max-width: 294px !important;
    padding-right: 0px;
    padding-left: 32px;
}

/* Sidebar Menu Styles */

.path--apigee-monetization-plans  #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav {
    display: block;
    background-color: #F7F7F7 !important;
}

.path--apigee-monetization-plans  #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav .nav-item a {
    color: var(--text-black-text-black-100, #000) !important;
    font-family: Proxima Nova;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    border: initial !important;
    width: auto;
    text-align: left;
}

.path--apigee-monetization-plans  #quicktabs-tabpage-quicktab_app_page_sidebar_menus-0 .nav .nav-item .dropdown-menu.show {
	position: relative !important;
    float: none !important;
    transform: none !important;
    border: 0px solid rgba(0, 0, 0, 0.15) !important;
    background-color: #F7F7F7 !important;
}

.path--apigee-monetization-plans.dropdown-item.active {
    background-color: initial;
}

/* Quick Tab Sidebar Menu Hided for Tablet and Mobile devices */

@media (max-width: 992px) {
    .path--apigee-monetization-plans div#quicktabs-container-quicktab_app_page_sidebar_menus {
      display: none;
    }
}

/* Menu Hided for Desktop and Larger devices */

@media (min-width: 993px) {
    .path--apigee-monetization-plans .block--dataservicessubnavigation {
        display: none;
    }
}

/* Section:1 Message style */

.path--apigee-monetization-plans .messages--warning {
    display: flex;
    justify-content: center;
    padding: 0px 8px;
    gap: 8px;
    /*background: #F7F7F7; */
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 0.044em;
    text-transform: uppercase;
    color: #FF0000;
}

/* Section:2 Build with zebra styles */
 
.path--apigee-monetization-plans .plans-title h2 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.16px;
    color: #30343B;
    padding-top: 18px;
}

.path--apigee-monetization-plans .plans-title p {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.24px;
    color: #30343B;
}

/* Section:3 Tabs styles */

.path--apigee-monetization-plans .pricing-and-plans {
    margin-left: 2px;
}

.path--apigee-monetization-plans .management-solution-devices ul#settingsTabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    border: none;
    border-bottom: 1px solid #CDCED0 !important;
}

.path--apigee-monetization-plans ul#settingsTabs button {
    color: var(--text-slate-text-slate-64, rgba(48, 52, 59, 0.64));
    font-family: Proxima Nova;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.026px;
    padding: 12px 0px 0px;
}

.path--apigee-monetization-plans ul#settingsTabs li {
    padding-right: 42px;
}

.path--apigee-monetization-plans .management-solution-devices button.nav-link.active {
    color: var(--zebra-purple-purple-4, #3D41DD) !important;
    background-color: none !important;
    font-family: Proxima Nova;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.026px;
    border-bottom: 4px solid #3D41DD !important;
}

.path--apigee-monetization-plans .management-solution-devices button.nav-link {
    border: none !important;
}

.path--apigee-monetization-plans .management-solution-devices .nav-tabs .nav-link.active:after {
    background: none !important;
}

.path--apigee-monetization-plans .management-solution-devices .nav-tabs .nav-link {
    background: none !important;
}

.path--apigee-monetization-plans .card .card-body {
    padding: 42px 32px 32px 32px !important;
}

/* Section:4.1 Management Tab Styles */

.path--apigee-monetization-plans .management-card .card .card-body .field__item {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #1E3DAA;
}

.path--apigee-monetization-plans .banner-management-content {
    height: 210px;
    background: #1E3DAA;
    margin-top: 32px;
    padding: 32px;
}

.path--apigee-monetization-plans .banner-management-content h4 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.0032em;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-management-content p.platform {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-management-content p.act {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .management-card .card {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 444px;
    height: 255px;
    background-color: rgba(228, 232, 245, 0.48);
}

.path--apigee-monetization-plans .management-card .card .card-body .card-title a {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #1E3DAA !important;
}

.path--apigee-monetization-plans .management-card .card .card-body  a.btn.btn-primary.btn-block.mt-5 {
    background-color: initial !important;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    letter-spacing: -0.16px;
    color: #1E3DAA;
    padding-left: 0px;
}

.path--apigee-monetization-plans .management-card .card .card-body a.btn.btn-primary.btn-block.mt-5.text-uppercase {
    background-color: #1E3DAA;
}

.path--apigee-monetization-plans .management-card .card span.active-rate-plan {
    display: flex;
    align-items: flex-start;
    padding: 4px 16px;
    gap: 10px;
    position: absolute;
    width: 76px;
    height: 32px;
    left: 360px;
    top: 12px;
    background: #1E3DAA;
    border-radius: 34px;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.0016em;
    color: #FFFFFF;
}

.path--apigee-monetization-plans .management-card .card .card-body a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666992 5.33306V6.66639H8.66699L5.00033 10.3331L5.94699 11.2797L11.227 5.99973L5.94699 0.719727L5.00033 1.66639L8.66699 5.33306H0.666992Z" fill="%231E3DAA"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 296px) center;
}

/* Section:4.2 Solution Tab Styles */

.path--apigee-monetization-plans .solution-card .card .card-body .field__item {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #5CAA1E;
}

.path--apigee-monetization-plans .banner-solution-content {
    height: 210px;
    background: #5CAA1E;
    margin-top: 32px;
    padding: 32px;
}

.path--apigee-monetization-plans .banner-solution-content h4 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.0032em;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-solution-content p.platform {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-solution-content p.act {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .solution-card .card {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 444px;
    height: 255px;
    background-color: #EBF5E4;
}

.path--apigee-monetization-plans .solution-card .card .card-body .card-title a {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #5CAA1E !important;
}

.path--apigee-monetization-plans .solution-card .card .card-body  a.btn.btn-primary.btn-block.mt-5 {
    background-color: initial !important;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    letter-spacing: -0.16px;
    color: #5CAA1E;
    padding-left: 0px;
}

.path--apigee-monetization-plans .solution-card .card .card-body a.btn.btn-primary.btn-block.mt-5.text-uppercase {
    background-color: #5CAA1E;
}

.path--apigee-monetization-plans .solution-card .card span.active-rate-plan {
    display: flex;
    align-items: flex-start;
    padding: 4px 16px;
    gap: 10px;
    position: absolute;
    width: 76px;
    height: 32px;
    left: 360px;
    top: 12px;
    background: #5CAA1E;
    border-radius: 34px;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.0016em;
    color: #FFFFFF;
}

.path--apigee-monetization-plans .solution-card .card .card-body a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666992 5.33306V6.66639H8.66699L5.00033 10.3331L5.94699 11.2797L11.227 5.99973L5.94699 0.719727L5.00033 1.66639L8.66699 5.33306H0.666992Z" fill="%235CAA1E"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 296px) center;
}

/* Section:4.3 Devices Tab Styles */

.path--apigee-monetization-plans .devices-card .card .card-body .field__item {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #AA1E61;
}

.path--apigee-monetization-plans .banner-devices-content {
    height: 210px;
    background: #AA1E61;
    margin-top: 32px;
    padding: 32px;
}

.path--apigee-monetization-plans .banner-devices-content h4 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.0032em;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-devices-content p.platform {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-devices-content p.act {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .devices-card .card {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 444px;
    height: 255px;
    background-color: #AA1E614D;
}

.path--apigee-monetization-plans .devices-card .card .card-body .card-title a {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #AA1E61 !important;
}

.path--apigee-monetization-plans .devices-card .card .card-body  a.btn.btn-primary.btn-block.mt-5 {
    background-color: initial !important;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    letter-spacing: -0.16px;
    color: #AA1E61;
    padding-left: 0px;
}

.path--apigee-monetization-plans .devices-card .card .card-body a.btn.btn-primary.btn-block.mt-5.text-uppercase {
    background-color: #AA1E61;
}

.path--apigee-monetization-plans .devices-card .card span.active-rate-plan {
    display: flex;
    align-items: flex-start;
    padding: 4px 16px;
    gap: 10px;
    position: absolute;
    width: 76px;
    height: 32px;
    left: 360px;
    top: 12px;
    background: #AA1E61;
    border-radius: 34px;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.0016em;
    color: #FFFFFF;
}

.path--apigee-monetization-plans .devices-card .card .card-body a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666504 5.33306V6.66639H8.6665L4.99984 10.3331L5.9465 11.2797L11.2265 5.99973L5.9465 0.719727L4.99984 1.66639L8.6665 5.33306H0.666504Z" fill="%23AA1E61"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 296px) center;
}

/* Section:4.4 Others Tab Styles */

.path--apigee-monetization-plans .others-card .card .card-body .field__item {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
    color: #546F8C;
}

.path--apigee-monetization-plans .banner-other-content {
    height: 210px;
    background: #546F8C;
    margin-top: 32px;
    padding: 32px;
}

.path--apigee-monetization-plans .banner-other-content h4 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: -0.0032em;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-other-content p.platform {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .banner-other-content p.act {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #E4E8F5;
}

.path--apigee-monetization-plans .others-card .card {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    width: 444px;
    height: 255px;
    background-color: aliceblue;
}

.path--apigee-monetization-plans .others-card .card .card-body .card-title a {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    letter-spacing: -0.16px;
    text-decoration-line: underline;
}

.path--apigee-monetization-plans .card .card-body h2.card-title.mt-1 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.path--apigee-monetization-plans .others-card .card .card-body  a.btn.btn-primary.btn-block.mt-5 {
    background-color: initial !important;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    letter-spacing: -0.16px;
    color: #546F8C;
    padding-left: 0px;
}

.path--apigee-monetization-plans .others-card .card .card-body a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666504 5.33306V6.66639H8.6665L4.99984 10.3331L5.9465 11.2797L11.2265 5.99973L5.9465 0.719727L4.99984 1.66639L8.6665 5.33306H0.666504Z" fill="%23546F8C"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 296px) center;
}

.path--apigee-monetization-plans .others-card .card .card-body a.btn.btn-primary.btn-block.mt-5.text-uppercase {
    background-color: #546F8C;
}

.path--apigee-monetization-plans .rate-plan__products .field__label {
    display: none;
}

.path--apigee-monetization-plans a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
    border: none;
    outline: none;
}

.path--apigee-monetization-plans a.btn.btn-primary.btn-block.mt-5.redesign-price-details:hover {
    border: none;
    outline: none;
    box-shadow: none;
}

.path--apigee-monetization-plans .others-card .card span.active-rate-plan {
    display: flex;
    align-items: flex-start;
    padding: 4px 16px;
    gap: 10px;
    position: absolute;
    width: 76px;
    height: 32px;
    left: 360px;
    top: 12px;
    background: #546F8C;
    border-radius: 34px;
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.0016em;
    color: #FFFFFF;
}

.path--apigee-monetization-plans .card .field.field--above.rate-plan__products {
    width: 296px;
}

@-moz-document url-prefix() {
    .path--apigee-monetization-plans .card .card-body a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
      background-position: calc(100% - 290px) center !important;
    }
  }
  

/* Tablet Styles start here */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .path--apigee-monetization-plans .management-card .card {
        width: 340px;
    }
    .path--apigee-monetization-plans .solution-card .card {
        width: 340px;
    }
    .path--apigee-monetization-plans .devices-card .card {
        width: 340px;
    }
    .path--apigee-monetization-plans .others-card .card {
        width: 340px;
    }
    .path--apigee-monetization-plans .management-card .card span.active-rate-plan {
        left: 250px;
    }
    .path--apigee-monetization-plans .solution-card .card span.active-rate-plan {
        left: 250px;
    }
    .path--apigee-monetization-plans .devices-card .card span.active-rate-plan {
        left: 250px;
    }
    .path--apigee-monetization-plans .others-card .card span.active-rate-plan {
        left: 250px;
    }
    .path--apigee-monetization-plans .management-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 212px) center;
    }
    .path--apigee-monetization-plans .solution-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 212px) center;
    }
    .path--apigee-monetization-plans .devices-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 212px) center;
    }
    .path--apigee-monetization-plans .others-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details{
        background-position: calc(100% - 212px) center;
    }
}

/* Mobile Styles start here */

@media only screen and (max-width: 767px) {
    .path--apigee-monetization-plans .management-card .card {
        width: 380px;
    }
    .path--apigee-monetization-plans .solution-card .card {
        width: 380px;
    }
    .path--apigee-monetization-plans .devices-card .card {
        width: 380px;
    }
    .path--apigee-monetization-plans .others-card .card {
        width: 380px;
    }
    .path--apigee-monetization-plans ul#settingsTabs li {
        padding-right: 12px;
    }
    .path--apigee-monetization-plans .management-card .card span.active-rate-plan {
        left: 280px;
    }
    .path--apigee-monetization-plans .solution-card .card span.active-rate-plan {
        left: 280px;
    }
    .path--apigee-monetization-plans .devices-card .card span.active-rate-plan {
        left: 280px;
    }
    .path--apigee-monetization-plans .others-card .card span.active-rate-plan {
        left: 280px;
    }
    .path--apigee-monetization-plans .management-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 232px) center;
    }
    .path--apigee-monetization-plans .solution-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 232px) center;
    }
    .path--apigee-monetization-plans .devices-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 232px) center;
    }
    .path--apigee-monetization-plans .others-card .card .card-body  a.btn.btn-primary.btn-block.mt-5.redesign-price-details {
        background-position: calc(100% - 232px) center;
    }
}

/* Active Plans List Pop-up Styles start here */

.path--apigee-monetization-plans .apps-lightbox-modal .ui-dialog-titlebar .ui-dialog-title {
    align-self: stretch;
    color: var(--text-slate-text-slate-100, #30343B);
    text-align: center;
    font-family: "Proxima Nova";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.068px;
}

.path--apigee-monetization-plans #drupal-modal .mr-5 h5 {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    letter-spacing: 0.044em;
    text-transform: uppercase;
    color: rgba(48, 52, 59, 0.8);
}

.path--apigee-monetization-plans #drupal-modal .container .btn.btn-primary.btn-info {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.0016em;
    color: #FFFFFF;
    border-radius: 0;
    background: #1E22AA;
}