fieldset {
    background-color: #f6f8fa;
    margin-top:1rem;
    padding:2rem;
    border:1px solid var(--nc-bg-3);
    border-radius:4px
}
input.error {
    border: 1px dashed #f58025;
    background-color: #fff5e6;
}

#chargecard{ 
    margin-top: 40px; 
    margin-bottom: 50px
}

#paid{
    padding-bottom: 500px; 
    margin-top: 100px;
}

#goback{
    margin-left: 10px;
    margin-top: 30px;
    float: left;
}

#solinstPlan{
    padding-bottom: 25px;
    float: center
}

select #selectCurrency{
    height: 31px;
}

.firebase-auth{
    background-color: #fff;
    padding: 2%;
    width: 50%;
    margin: 1% auto;
    border: 1px solid #efefef;
}
@media all and (max-width: 1024px) {
    .firebase-auth{
        width: 90%;
    }
}

#firebaseui-auth-container{
    padding: 10%;
    margin: auto;
    float: center;
    height: 50%;
    width: 50%;
}

details{
    padding:.6rem 1rem;
    background:var(--nc-bg-2);
    border:1px solid var(--nc-bg-3);
    border-radius:4px;
}

summary{
    cursor:pointer;
    font-weight:700;
}
    
details[open]{padding-bottom:.75rem}details[open] 
    
summary{ margin-bottom:6px }

hr{
    border:0;
    border-bottom:1px solid var(--nc-bg-3);
    margin:1rem auto
}

details[open]>:last-child{margin-bottom:0}dt{font-weight:700}dd::before{content:'→ '}

legend{ padding:auto .5rem }

table{ 
    border-collapse:collapse;
    width:100%;
}

td,th{
    border:1px solid var(--nc-bg-3);
    text-align:left;
    padding:.5rem
}

th{ background:var(--nc-bg-2) }

#signin{
    margin-top: 50px;
    margin-bottom: 20px;
}

html,select{ font-family:var(--nc-font-sans) }
    
a button[disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{
    cursor:default;
    opacity:.5;
    cursor:not-allowed
}
    
code,kbd,pre,samp{
    font-family:var(--nc-font-mono)
}

code,kbd,pre,samp{
    background:var(--nc-bg-2);
    border:1px solid var(--nc-bg-3);
    border-radius:4px;
    padding:3px 6px;
    font-size:.9rem
}

input,select,textarea{
    padding-left: 8px;
    margin: 8px 0;
    line-height: 20px;
    color:var(--nc-tx-2);
    border: 1px solid #ccc;
    border-radius:4px;
}
select.country, select.state, select.province {
    width: 100%;
}

pre{
    padding:1rem 1.4rem;
    max-width:100%;
    overflow:auto
}

pre code{
    background:inherit;
    font-size:inherit;
    color:inherit;
    border:0;
    padding:0;
    margin:0
}
    
code pre{
    display:inline;
    background:inherit;
    font-size:inherit;
    color:inherit;
    border:0;
    padding:0;
    margin:0
}

table caption{
    font-weight:700;
    margin-bottom:.5rem
}

abbr:hover{ cursor:help }

abbr{ cursor:help }

header{
    background:var(--nc-bg-2);
    border-bottom:1px solid var(--nc-bg-3);
    padding:2rem 1.5rem;
    margin:-2rem calc(0px - (50vw - 50%)) 2rem;
    padding-left:calc(50vw - 50%);
    padding-right:calc(50vw - 50%)
}


/* Full-width input fields */
input[type=email], input[type=password], input[type=text], input[type=tel] {
    width: 100%;
    padding: 4px 10px;
    margin: 8px 0;
    display: inline-block;
    box-sizing: border-box;
}

#signinform, #registerform, #terms, #pmtconfirmed{
    font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
}

span.psw {
    float: right;
  }

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
  }

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
  }
  
  @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
  }
    
  @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
  }

  .popupcontainer {
    padding: 16px;
  }

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 50%; /* Full width */
    height: 100%; /* Full height */
    margin-left: 20%;
    margin-top: 5%;
    vertical-align: middle;
    overflow: auto; /* Enable scroll if needed */
    padding-top: 60px;
    padding-left: 10px;
    padding-right: 10px
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
  }

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}


.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

header h1,header h2,header h3{ padding-bottom:0;border-bottom:0 }

header>:first-child{ margin-top:0;padding-top:0 }

header>:last-child{ margin-bottom:0 }

::selection{
    background:var(--nc-ac-1);
    color:var(--nc-ac-tx)
}

@media (prefers-color-scheme:dark){
    :root{
        --nc-tx-1:#333333;
        --nc-tx-2:#333333;
        --nc-bg-1:#000000;
        --nc-bg-2:#efefef;
        --nc-bg-3:#cccccc;
        --nc-lk-1:#f58025;
        --nc-lk-2:#666666;
        --nc-lk-tx:#FFFFFF;
        --nc-ac-1:#7928CA;
        --nc-ac-tx:#FFFFFF
    }
}*{ margin:0;padding:0 }

@media (prefers-color-scheme:light){
    :root{
        --nc-tx-1:#333333;
        --nc-tx-2:#333333;
        --nc-bg-1:#000000;
        --nc-bg-2:#efefef;
        --nc-bg-3:#cccccc;
        --nc-lk-1:#f58025;
        --nc-lk-2:#666666;
        --nc-lk-tx:#FFFFFF;
        --nc-ac-1:#7928CA;
        --nc-ac-tx:#FFFFFF
    }
}*{ margin:0;padding:0 }

address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,/*form,*/iframe,/*img,*/input,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{ margin-bottom:1rem }

textarea{ max-width:100% }

ol,ul{ padding-left:2rem }

li{ margin-top:.4rem }

ol ol,ol ul,ul ol,ul ul{ margin-bottom:0 }

mark{
    padding:3px 6px;
    background:var(--nc-ac-1);
    color:var(--nc-ac-tx)
}

h1,h2,h3,h4,h5,h6{
    line-height:1;
    color:var(--nc-tx-1);
    padding-top:.875rem
}

h1,h2,h3{
    color:var(--nc-tx-1);
    padding-bottom:2px;
    margin-bottom:8px;
}

h4,h5,h6{ margin-bottom:.3rem } 

h1{ font-size:2.25rem }

h2{ font-size:1.85rem }

h3{ font-size:1.55rem }

h4{ font-size:1.25rem }

h5{ font-size:1rem }

h6{ font-size:.875rem }

/****** Custom radio buttons for plan selection table ******/
#plan_form input[type="radio"] , #plan_form label {
    cursor: pointer;
}

input[type="radio"]  {
    height: 16px;
    width: 16px;
  }

.custom-radio {
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid #fff;
    background-color: #e8e8e8;
    border-radius: 50%;
    margin: 10px 5px -3px;
}

.custom-radio:focus-visible {
    outline-offset: 0;
}

.box-shadow {
    box-shadow: 0 0 0 1px #999;
}

.box-shadow:hover {
    border-width: 0;
}

.box-shadow:checked {
    box-shadow: 0 0 0 1px #f58025;
    background-color: #f58025;
    border-width: 3px;
}
/****** End Custom radio buttons ******/