/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    max-width: 71.5rem;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* =======================================
    Generic Modifications to Stucture
   ======================================= */

header {
    position: relative;
    width: 100%;
    z-index: 99;
}

body {
    background-color: #fff;
    font-family: Nudista;
}

a, a:hover {
    color: #000;
}

ul {
    list-style: none;
    margin: 0;
    color: #000;
    font-size: 1em;
}

h1, h2, h3, h4, h5, h6 {
    color: #000;
    text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-weight: 900;
    font-size: 30px;
}

h2 {
    font-size: 17px;
    font-family: NudistaSemiBold;
    font-weight: 700;
}

table {
    width: 100%;
}

tbody, tfoot, thead {
    border: 0px;
}

table tbody tr:nth-child(even) {
    background: rgb(255, 255, 255);
}

footer {

    background-image: linear-gradient(to right, rgb(241, 94, 74), rgb(237, 20, 91) 100%);
    margin-bottom: 0;
    bottom: 0;
    width: 100%;
    left: 0;
    position: absolute;
    height: 51px;
}

footer .footer-bottom ul {
    padding: 8px 0;
}

footer .footer-bottom ul li a {
    color: #fff;
    font-size: 13px;
}

/* Nudista font family */
.NudistaLight-Italic {
    font-family: NudistaLight-Italic;
    font-weight: normal;
    font-style: normal;
}

.Nudista {
    font-family: Nudista;
    font-weight: normal;
    font-style: normal;
}

.NudistaSemiBold {
    font-family: NudistaSemiBold;
    font-weight: normal;
    font-style: normal;
}

.Nudista-Italic {
    font-family: Nudista-Italic;
    font-weight: normal;
    font-style: normal;
}

.NudistaThin {
    font-family: NudistaThin;
    font-weight: normal;
    font-style: normal;
}

.Nudista-Bold {
    font-family: Nudista-Bold;
    font-weight: normal;
    font-style: normal;
}

.NudistaLight {
    font-family: NudistaLight;
    font-weight: normal;
    font-style: normal;
}

.NudistaSemiBold-Italic {
    font-family: NudistaSemiBold-Italic;
    font-weight: normal;
    font-style: normal;
}

.NudistaThin-Italic {
    font-family: NudistaThin-Italic;
    font-weight: normal;
    font-style: normal;
}

.Nudista-BoldItalic {
    font-family: Nudista-BoldItalic;
    font-weight: normal;
    font-style: normal;
}

/* =======================================
    Foundation Modifications
   ======================================= */

.row {
    max-width: 73.5rem;
}

.top-bar {
    padding: 20px 58px;
}

.top-bar, .top-bar ul {
    background-color: #fff;
}

.top-bar ul {
    margin-top: 15px;
}

.top-bar ul li a, .content h1 {
    text-transform: uppercase;
}

.top-bar .desktop-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
}

.top-bar .mobile-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar .mobile-menu .ellipsis {
    font-size: 1.5em;
}

.top-bar .mobile-menu .main-item {
    padding: 0px;
}

.top-bar ul li a {
    color: black;
    padding: 0 1rem;
}

.desktop-menu .logo {
    width: 212px;
}

.mobile-menu .logo {
    width: 150px;
}

.top-bar-nav.resident-corporate {
    font-size: 1.1em;
    font-family: NudistaSemiBold;
    align-self: baseline;
    margin-right: 87px;
}

.top-bar-nav.portal-account {
    font-size: 14px;
    align-self: baseline;
}

.top-bar-nav.portal-account ul.menu li a:hover,
.top-bar-nav.portal-account ul.menu li a.active {
    color: #f04b56;
}

/* The side navigation menu */
.mobile-menu .side-nav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #fff;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.mobile-menu .side-nav li {
    padding: 8px 8px 8px 32px;
    display: block;
    transition: 0.3s;
}

.mobile-menu .side-nav li a {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}

/* When you mouse over the navigation links, change their color */
.mobile-menu .side-nav a:hover {
    color: #f04b56;
}

/* Position and style the close button (top right corner) */
.mobile-menu .side-nav .btn-close {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .mobile-menu .side-nav {
        padding-top: 15px;
    }

    .mobile-menu .side-nav a {
        font-size: 18px;
    }
}

.button {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    background-image: none;
    border-color: #000;
    margin-bottom: 22px;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 900;
    padding: 0.7em;
    text-transform: uppercase;
    color: #000;
}

.button:hover, .button:active, .button:focus {
    background-color: #000;
    color: #fff;
}

.button.premium-button {
    border-color: #000;
    color: #fff;
    background-color: #000;
    font-weight: normal;
    font-family: Nudista-Bold;
}

.button.premium-button:hover, .button.premium-button:active, .button.premium-button:focus {
    opacity: 0.8;
    -webkit-transition: .1s opacity linear;
    -moz-transition: .1s opacity linear;
    -o-transition: .1s opacity linear;
    transition: .1s opacity linear;
    -webkit-backface-visibility: hidden;
}

.button.premium-hollow-button {
    border: 0px solid transparent;
    color: dimgrey;
}

.button.premium-hollow-button:hover, .button.premium-hollow-button:active, .button.premium-hollow-button:focus {
    background-color: #fff;
    color: dimgrey;
}
.button.secondary-button{
    color: #f04b56;
    border: 1px solid #f04b56;
    background-color: #fff;
}
.button.secondary-button:hover, .button.secondary-button:active, .button.secondary-button:focus{
    color: #fff;
    background-color: #f04b56;
}

/* =======================================
    Custom Modifications
   ======================================= */

.wrapper {
    min-height: 100%;
    position: relative;
}

.container {
    /*padding: 10px; */
    /*padding-bottom: 51px;*/ /* Height of the footer */
}

.zero-margin-left {
    margin-left: 0 !important;
}

.zero-margin-right {
    margin-right: 0 !important;
}

.zero-margin-top {
    margin-top: 0 !important;
}

.zero-margin-bottom {
    margin-bottom: 0 !important;
}

.gutter {
    padding-left: 1.8rem !important;
    padding-right: 1.8rem !important;
}

.bold {
    font-weight: bold;
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.required-fields span {
    font-size: .8em;
}

.back-to-account {
    margin-top: 21px;
}

.autobill {
    margin-top: 20px;
}

.autobill span {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    padding-top: 5px;
    display: block;
}

.autobill input:checked ~ .switch-paddle {

    background-image: linear-gradient(to right, rgb(241, 94, 74), rgb(237, 20, 91) 100%);
}

.autobill .switch-paddle::after, .autobill input + .switch-paddle {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.account-information {
    font-size: .8rem;
}

.unactivatedPlan-information {
    font-size: 17px;
    font-weight: 700;
}

.progress-wrapper {
    position: relative;
    margin: 20px auto;
    font-size: 40px;
}

.progress {
    color: #333;
    font-weight: 700;
    background-color: transparent;
    height: auto;
    top: 50% !important;
    bottom: auto;
    left: 50% !important;
    font-size: 17.8571px;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
}

.progress-information {
    font-size: 23px;
    margin-top: 20px;
}

.autobill span.autobill-information {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
}

.usage-information {
    margin-top: 12px;
    margin-bottom: 14px;
}

/* =======================================
    Main Content
   ======================================= */

.content {
    margin-bottom: 50px;
    padding-top: 100px;
}

.content.short {
    padding-top: 20px;
}

.content .header {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 24px;
    padding-top: 20px;
}

.content .header-left {
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 24px;
    padding-top: 6px;
}

.content .header h1, .content .header-left h1 {
    font-size: 25px;
}

.content .header-left h3 {
    font-size: 22px;
}

.content .button-collection {
    margin-top: 24px;
}

.content .main-container {
    padding-top: 30px;
}

.content .main-container.long {
    padding-top: 25px;
}

.content .main-container.long h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.content .main-container.long h2 {
    font-size: 19px;
}

.content .main-container-dual {
    padding-top: 12px;
}

.content .main-container-dual .button-collection {
    margin-top: 56px;
}

.content .main-container-dual .button-collection button {
    margin-top: 26px;
}

.content .main-container form {
    margin-top: 24px;
    margin-bottom: 5px;
}

.content .main-container form:nth-child(n+3) {
    margin-top: 8px;
}

.content .main-container form label {
    font-size: .8rem;
}

.content .main-container p {
    line-height: 34px;
    font-size: .8rem;
}

.content .main-container-dual a {
    margin-top: 26px;
}

.content .main-container a {
    font-weight: 900;
}

.content .main-container h5 a {
    font-weight: 400;
}

.content .account-admin {
    line-height: 20px;
}

.content .account-admin span {
    font-size: 12px;
}

.content .account-admin span a {
    color: #000000;
    text-transform: uppercase;
    font-weight: bold;
}

.content .margin-button {
    margin-top: 30px;
}

.content span.account-small {
    font-size: 11px;
    text-align: right;
    text-transform: uppercase;
}

.content form h2, .content form label {
    text-transform: none;
    font-weight: bold;
    font-size: 1.1em;
}

.content form .form-background, .content .form-background {
    background-color: #fff;
    padding: 2.4rem 1.9375rem;
}

.content table thead tr {
    background-image: linear-gradient(to right, rgb(241, 94, 74), rgb(237, 20, 91) 100%);
}

.content table thead tr th {
    color: rgb(255, 255, 255);
    font-weight: normal;
    text-transform: uppercase;
    padding: .2rem;
}

.content table tbody tr td, .content table thead tr th {
    text-align: center;
}

.content table thead tr th {
    font-size: 14px;
    font-weight: bold;
}

.content table tbody tr td {
    font-size: 13px;
}

/* =======================================
    Login Pages
   ======================================= */
.login .content {
    padding-top: 0px;
}

.login-error .content .main-container .error-message-heading {
    font-family: Nudista-Bold;
    font-size: 1.2em;
    text-transform: uppercase;
    margin: 1.5em auto;
    text-align: center;
}
.login-error .content .main-container .error-message {
    text-transform: none;
    text-align: center;
}
.login-error .content .main-container .back-button{
    width: 150px;
}

.login .content .main-container form {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e0e0e0;
}

.login .content .main-container form input.username {
    margin: 0rem;
}

.login .content .main-container form .small-notes {
    font-size: 0.8em;
    color: darkgrey;
}

.login .content form .forgot-password-link {
    float: right;
    font-weight: bold;

}

.login .content form .forgot-password-link a {
    color: #8a8a8a;
}

.login .content form .login-button-row {
}

.login .content form .login-button {
    width: 100%;
}

.login .content .need-help {
    text-align: center;
    margin-top: 2.5em;
}

.login .content .need-help .need-help-text {
    text-transform: uppercase;
}
.login .content .need-help .site-contact {
    margin-top: 0.7em;
}
.login .content .sign-up-top-up-row{
    margin-top: 1.2em;
}
.login .content .signup-button, .login .content .topup-button{
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.login .content .small-note{
    font-size: 0.8em;
    text-align: center;
}
/* =======================================
    Surfing Page
   ======================================= */

.surfing .content {
    padding-top: 155px;
}

.surfing .content h1.skinny {
    font-size: 28px;
    font-weight: 500;
    text-transform: none;
    margin-bottom: 0;
}

.surfing .content h1 {
    font-weight: 500;
    font-size: 30px;
}

.surfing .content h6 {
    font-size: 13px;
}

.surfing .content form {
    margin-top: 0px;
}

.surfing .content form .form-background {
    padding-top: 2.5rem;
}

/* =======================================
    Usage History Page
   ======================================= */

.usage-history .main-container table {
    table-layout: fixed;
}

.usage-history .main-container table td.upload {
    width: 118px;
}

.usage-history .main-container table td.download {
    width: 137px;
}

.usage-history .main-container table td.total {
    width: 198px;
}

.usage-history .main-container table td.time {
    width: 218px;
}

.usage-history .main-container table td.session {
    width: 210px;
}

.usage-history .main-container table td.device {
    width: 166px;
}

.usage-history .main-container, .change-plan .main-container {
    padding-top: 53px;
}

.usage-history .main-container h1 {
    padding-top: 25px;
}

.usage-history .main-container a {
    font-size: 16px;
    font-weight: 400;
}

/* =======================================
    Change Plan Page
   ======================================= */

.change-plan .header {
    padding-top: 0px;
}

.change-plan .payment-details span.credit-card {
    font-size: 0.8rem;
}

.change-plan .plan-details span {
    font-size: 0.9rem;
    padding-right: 10px;
}

.change-plan .content table.billing thead tr th:first-child {
    padding-left: 0.6rem;
}

.change-plan .content table.billing tbody tr td:first-child, .change-plan .content table.billing thead tr th:first-child {
    text-align: left;
}

.change-plan .content table.billing tbody tr td {
    vertical-align: top;
}

.change-plan .content table tbody tr td button {
    font-size: 0.7rem;
    font-weight: 500;
    width: 100%;
    padding: .3rem .9rem;
}

.change-plan span.date {
    font-size: .7rem;
}

/* =======================================
    Top up / Purchase Page
   ======================================= */

.top-up h1, .purchase h1 {
    margin-top: 40px;
}

.top-up .header, .purchase .header {
    padding-top: 0px;
}

.top-up .header h4, .purchase .header h4 {
    font-size: 17px;
}

.top-up label.terms-and-conditions, .purchase label.terms-and-conditions {
    font-size: .8rem;
    display: block;
}

.top-up .terms-and-conditions, .purchase .terms-and-conditions {
    margin-top: 20px;
}

.top-up .payment-details span.credit-card {
    font-size: 0.8rem;
}

.top-up .plan-details span {
    font-size: 0.9rem;
    padding-right: 10px;
}

.top-up .content table tbody tr td button {
    font-size: 0.7rem;
    font-weight: 500;
    width: 100%;
    padding: .3rem .9rem;
}

/* =======================================
    Contact Page
   ======================================= */

.help .content .main-container form {
    margin-top: 0px;
}

.help .contact-form h3 {
    font-size: 22px;
    text-transform: none;
    font-weight: 700;
    margin-bottom: 20px;
}

.help h4 {
    font-size: 18px;
    margin-bottom: 0px;
}

.help .header-left {
    margin-bottom: 0;
}

.help .help-background {
    background-color: #F1F2F2;
}

.help .help-questions, .help .help-background {
    padding: 1rem;
}

.help input.search {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.help .content .main-container p {
    line-height: 17px;
}

.help .contact-information {
    margin-top: 30px;
}

.help .contact-information span, .help .contact-information ul li {
    color: #000;
    text-transform: uppercase;
}

.help .contact-information ul li.phone {
    color: #333;
    line-height: 14px;
}

.help .contact-information .locations {
    font-size: 12px;
    margin-top: 20px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 64em) {
    .small-text-center {
        text-align: center !important;
    }

    .small-text-left {
        text-align: left !important;
    }

    .small-padding-header {
        padding-top: 30px !important;
    }

    .no-padding {
        padding: 0;
    }

    .autobill span {
        margin-bottom: 20px;
        display: block;
    }

    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (max-width: 40em) {

    .top-bar {
        padding: 20px;
    }

    .top-bar ul {
        margin-top: auto;
    }

    .change-plan .header {
        padding-top: 30px;
    }

    .content .main-container p {
        line-height: 20px;
    }

}

@media print,
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                          http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* adjust type submit button to be more width*/
button.button {
    width: 100%;
}

.text-red {
    color: #ed145b;
}

.fullWidth {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
}

.has-feedback {
    position: relative;
}

.form-control-feedback {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: block;
    text-align: center;
    pointer-events: none;
}

form input.ng-dirty.ng-valid[required] {

}

form .ng-dirty.ng-valid[required] + .form-control-feedback {
    color: #c60f13;
}

form .ng-dirty.ng-invalid[required] {
    border: 1px solid #00CCFF;
}

form .ng-dirty.ng-invalid + .form-control-feedback {
    color: #00CCFF;
}

form .intl-tel-input {
    margin: 0 0 1rem;
    display: inline-block;
    position: relative;
}

form .intl-tel-input + .form-control-feedback {
    right: 35px;
}

.text-bold {
    font-weight: bold;
}

.highlightwords {
    color: #000;
    font-weight: 600;
    font-size: 1.5em;
}

/* MODAL STYLES
-------------------------------*/
modal {
    /* modals are hidden by default */
    display: none;
}

modal .modal {
    /* modal container fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* z-index must be higher than .modal-background */
    z-index: 1000;
    /* enables scrolling for tall modals */
    overflow: auto;
}

modal .modal .modal-body {
    padding: 20px;
    background: #fff;
    /* margin exposes part of the modal background */
    margin: 40px;
}

modal .modal-background {
    /* modal background fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* semi-transparent black  */
    background-color: #000;
    opacity: 0.75;
    /* z-index must be below .modal and above everything else  */
    z-index: 900;
}

body.modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}

.login .benefits {
    margin-top: 1.0em;
    font-size: 1.1em;
    color: #000;
}

.intl-tel-input {
    display: block !important;
}

.intl-tel-input .flag-container {
    z-index: 4;
}

#cardportal-visa {
    display: inline-block;
    background-image: url(../assets/img/creditcard_visa_w_greyscale.png);
}

#cardportal-mastercard {
    display: inline-block;
    background-image: url(../assets/img/creditcard_master_w_greyscale.png);
}

.creditcards span {
    margin-left: 6px;
    margin-bottom: 7px;
}

.cardimage {
    width: 51px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: top;
}

/* Premium plus booking styles */
.content.premium-plus form label {
    text-transform: none;
}

.content.premium-plus .main-heading {
    font-weight: bold;
    font-size: 1.1em;
}

.line-break {
    width: 100%;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #ed145b;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#confirmDetails:checked,
#confirmDetails:not(:checked),
#termsstep1:checked,
#termsstep1:not(:checked) {
    position: absolute;
    left: -9999px;
}

#confirmDetails:checked + label,
#confirmDetails:not(:checked) + label,
#termsstep1:checked + label,
#termsstep1:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

#confirmDetails:checked + label:before,
#confirmDetails:not(:checked) + label:before,
#termsstep1:checked + label:before,
#termsstep1:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

#confirmDetails:checked + label:after,
#confirmDetails:not(:checked) + label:after,
#termsstep1:checked + label:after,
#termsstep1:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    background: #ed145b;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#confirmDetails:not(:checked) + label:after,
#termsstep1:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

#confirmDetails:checked + label:after,
#termsstep1:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}