.twoway-toggle {
    position:           relative;
    display:            flex;
    justify-content:    center;
    align-items:        center;
    margin-top:         8px;
    margin-bottom:      8px;
}
.toggle-input {
    display:            none;
}
.toggle-switch {
    display:            flex;
    align-items:        center;
    background-color:   var(--toggle-bg);
    border:             3px solid var(--toggle-border);
    border-radius:      30px;
    padding:            5px;
    cursor:             pointer;
    transition:         background-color 0.3s;
}
.toggle-option {                    /* Individual toggle options */
    padding:            10px 20px;
    border-radius:      30px;
    border:             2px solid var(--toggle-border);
    color:              var(--toggle-text);
    transition:         background-color 0.3s, color 0.3s;
}
.toggle-option#monthlyOption,
.toggle-option#yearlyOption  {      /* Default state: both options off */
    background-color:   var(--toggle-off-bg)                !important;
    border:             2px solid var(--toggle-off-border)  !important;
    color:              var(--toggle-off-text)              !important;
}
/* When monthly is selected (toggle unchecked) */
.toggle-input:not(:checked) + .toggle-switch .toggle-option#monthlyOption {
    background-color:   var(--toggle-on-bg)                 !important;
    border:             3px solid var(--toggle-on-border)   !important;
    color:              var(--toggle-on-text)               !important;
}
 
/* When yearly is selected (toggle checked) */
.toggle-input:checked + .toggle-switch .toggle-option#yearlyOption {
    background-color:   var(--toggle-on-bg)                 !important;
    border:             3px solid var(--toggle-on-border)   !important;
    color:              var(--toggle-on-text)               !important;
}
/*
.toggle-input:checked + .toggle-switch #yearlyOption {
    background-color:   var(--toggle-on-bg);
    color:              var(--toggle-on-text);
}
.toggle-input:not(:checked) + .toggle-switch #monthlyOption {
    background-color:   var(--toggle-off-bg);
    color:              var(--toggle-off-text);
}
.toggle-input:not(:checked) + .toggle-switch #yearlyOption {
    background-color:   var(--toggle-off-bg);
}
.toggle-input:checked + .toggle-switch #monthlyOption {
    background-color:   var(--toggle-off-bg);
}
*/
.wrapper .container {
    min-height:         60vh;
    display:            flex;
    justify-content:    space-between;
    width:              100%;
    max-width:          1200px;
    align-items:        stretch;
}
.centerBox {
    display:            flex;
    height:             100%;
    text-align:         center;
    justify-content:    stretch;
    flex:               1;
    align-items:        stretch;
}
.planBox {
    background:         var(--content-bg);
    width:              100%;
    max-width:          420px;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    align-items:        center;
    text-align:         center;
    border:             3px solid var(--content-border);
    border-radius:      5%;
    position:           relative;
    margin:             4px;
    box-sizing:         border-box;
    flex:               1;
    opacity:            0;
    transition:         opacity 0.2s ease-in;
}
 
.planBox.heights-set {
    opacity:            1;
}
 
.h1-container {
    width:              100%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    text-align:         center;
    min-height:         60px;
    padding:            8px;
    box-sizing:         border-box;
}
 
.h1-container h1 {
    margin:             0;
    padding:            8px;
    line-height:        1.3;
    word-wrap:          break-word;
}
 
.buttonElement {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    width:              100%;
    padding-top:        4%;
    padding-bottom:     4%;
}
.btn.btn-primary.btn-lg {
    background-color:   var(--loud-btn-bg)     !important;
    border-color:       var(--loud-btn-border) !important;
    color:              var(--loud-btn-text)   !important;
}
.most-popular-label {
    background-color:   var(--label-bg);
    color:              var(--label-text);
    font-size:          14px;
    font-weight:        bold;
    width:              100%;
    border-radius:      14px 14px 0 0;
    white-space:        nowrap;
    text-align:         center;
}
.blank-label {
    background-color:   none;
    color:              var(--body-bg);
    font-size:          14px;
    font-weight:        bold;
    border-radius:      14px 14px 0 0;
    white-space:        nowrap;
    text-align:         center;
}
 
.planBoxList {
    list-style-type:    none;
    text-align:         left;
    padding-left:       4%;
    padding-right:      4%;
    margin:             0;
    flex-grow:          1;
    word-wrap:          break-word;
    overflow-wrap:      break-word;
}
 
.planBoxList li {
    margin-bottom:      8px;
    word-wrap:          break-word;
    overflow-wrap:      break-word;
    line-height:        1.4;
    max-width:          100%;
    box-sizing:         border-box;
}
 
.planBoxList li .fa-question-circle {
    margin-left:        5px;
    font-size:          12px;
    color:              var(--muted-text, #666);
    display:            inline-block;
    vertical-align:     middle;
}
#subscribeFreeButton, #unauthSubscribeCoreEnterpriseButton, #unauthSubscribePlusEnterpriseButton, #unauthSubscribePremiumButton, #authSubscribeCoreEnterpriseButton, #authSubscribePlusEnterpriseButton, #authSubscribePremiumButton {
    background-color:   var(--toggle-bg2);
    margin-bottom:      15px;
}
#subscribePremiumButton,
#buy_now_btn {
    background-color:   var(--toggle-bg2);
    margin-top:         15px;
    margin-bottom:      15px;
}
 
@media only screen and (min-width: 769px) and (max-width: 1000px) {
    .wrapper {
        height:         auto;
        min-height:     100vh;
    }
    .wrapper .container {
        display:        flex;
        flex-direction: column;
        height:         auto;
        min-height:     auto;
        align-items:    center;
    }
    .centerBox {
        width:          100%;
        max-width:      420px;
        height:         auto;
        margin-bottom:  20px;
        align-items:    center;
    }
    .planBox {
        height:         auto;
        min-height:     auto;
        justify-content: flex-start;
    }
    .planBoxList {
        margin-top:     20px;
        padding-right:  8%;
        flex-grow:      0;
    }
    .planBoxList li {
        margin-bottom:  8px;
        font-size:      14px;
        line-height:    1.3;
    }
    .col-sm:first-child {
        margin-top:     15px;
    }
    .col-sm {
        margin-bottom:  15px;
    }
}
@media only screen and (max-width: 768px) {
        .wrapper .container {
        display:            flex;
        flex-wrap:          wrap;
        justify-content:    center;
        align-items:        flex-start;
        gap:                15px;          /* Space between boxes */
        padding:            0 10px;       /* Container padding */
    }
 
    .centerBox {
        margin-top:     10px;
        width:          95%;
    }
    .planBox {
        margin-bottom:  0px;
        max-width:      100%;
        width:          100%;
    }
    .planBoxList {
        padding-left:   6%;
        padding-right:  6%;
    }
    .planBoxList li {
        font-size:      13px;
        line-height:    1.3;
        margin-bottom:  6px;
    }
}
@media only screen and (max-width: 480px) {
    .wrapper {
        height:         auto;
        min-height:     100vh;
    }
    .wrapper .container {
        height:         auto;
        min-height:     auto;
    }
    .centerBox {
        margin-top:     10px;
        width:          98%;
    }
    .planBox {
        max-width:      100%;
        width:          100%;
    }
    .planBoxList {
        padding-left:   8%;
        padding-right:  8%;
    }
    .planBoxList li {
        font-size:      12px;
        line-height:    1.2;
        margin-bottom:  4px;
        word-break:     break-word;
    }
}
#cancelButton {
    background-color: var(--toggle-bg2);
    margin-top:         15px;
    margin-bottom:      15px;
}
#loginButton {
    background-color:   var(--toggle-bg2);
/*  margin-top:         15px; */
/*  margin-bottom:      15px; */
}
 
[data-tip] {
    position:           relative;
}
[data-tip]:before {
    content:            '';
    display:            none;   /* hides the tooltip when not hovered */
    border-left:        5px solid transparent;
    border-right:       5px solid transparent;
    border-bottom:      5px solid var(--tooltip-bg);
    position:           absolute;
    top:                30px;
    left:               35px;
    z-index:            8;
    font-size:          0;
    line-height:        0;
    width:              0;
    height:             0;
}
[data-tip]:after {
    display:            none;
    content:            attr(data-tip);
    position:           absolute;
    top:                35px;
    left:               0px;
    padding:            5px 8px;
    background:         var(--tooltip-bg);
    color:              var(--input-text);
    z-index:            9;
    font-size:          0.7em;
    width:              170px;
    line-height:        15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius:      3px;
    white-space:        pre-wrap;
    word-wrap:          normal;
}
[data-tip]:hover:before, [data-tip]:hover:after {
    display:            block;
}
.tooltip {
    font-size:          12px !important;
}

.emptySpaceButton {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    width:              100%;
    padding-top:        4%;
    padding-bottom:     4%;
}