tarifs.css

/************* TARIFS *************/
/******* price tab ********/
.headband {
    background-color: var(--ifm-color-frame);
    border-radius: var(--ifm-button-border-radius);
    padding-bottom: 2px;
    padding-top: 10px;
    margin-bottom: -30px;
    width: 170px;
    margin-left: auto;
    margin-right: auto;
}

.headband p {
    font-weight: 600;
    color: var(--ifm-color-success);
}

.price {
    text-align: center;
}

.card_price {
    background-color: var(--ifm-color-secondary-lightest);
    margin-top: 20px;
    margin-bottom: 20px;
}

.tabs-etang .tabs__item {
    line-height: 16px;
    margin: 4px;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

.tabs-etang .tabs__item--active {
    background-color: var(--ifm-color-light-green);
    border: 0;
    border-radius: var(--ifm-global-radius);
    color: var(--ifm-color-white);
}

.tabs-etang-hide {
    display: none;
}  

/******** Monthly & annual buttons********/
.tabs-monthly-annual {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 21rem;
    height: 3.7rem;
    margin-left: auto;
    margin-right: auto;
}
  
.tabs-monthly-annual .tabs__item {
    line-height: 50px;
    margin: 10px;
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: var(--ifm-button-selection);
    color: var(--ifm-color-light-green);
    border: 2px solid var(--ifm-color-light-green);
}
  
.tabs-monthly-annual .tabs__item:hover {
    transition: 0.4s;
    background-color: var(--ifm-color-light-green);
    color: var(--ifm-color-white);
    border: 2px solid var(--ifm-color-light-green);
}
  
.tabs-monthly-annual .tabs__item--active {
    border: 0;
    border-radius: var(--ifm-global-radius);
    color: var(--ifm-color-white);
    background-color: var(--ifm-color-light-green);
}
  
/********Buttons in cards ********/
.button-noclick:not(.button--outline) {
    color: var(--ifm-color-secondary-darkest);
    border: 2px solid var(--ifm-color-secondary-darkest);
}
  
.button--price:not(.button--outline) {
    background-color: var(--ifm-button-selection);
    color: var(--ifm-color-light-green);
    border: 2px solid var(--ifm-color-light-green);
}
  
.button--price:not(.button--outline):hover {
    background-color: var(--ifm-color-light-green);
    color: var(--ifm-color-white);
    border: 2px solid var(--ifm-color-light-green);
}
  
/******** Text in cards ********/
.small_price {
    font-size: 12px;
}

/******** Disabled cards ********/
.disable_col p, .disable_col h2 {
    color: var(--ifm-color-secondary-darkest);
}

.disable_col, .card-demo {
    margin-top: 50px;
    box-shadow: var(--ifm-global-shadow-tl);
    border-radius: var(--ifm-card-border-radius);
}