@font-face {
    font-family: 'Heebo';
    font-weight: 400;
    font-style: normal;
    src: url('../../Fonts/Heebo/Heebo-Regular.otf'), url('../../Fonts/Heebo/Heebo-Regular.ttf');
}

@font-face {
    font-family: 'Heebo-Thin';
    font-weight: 400;
    font-style: normal;
    src: url('../../Fonts/Heebo/Heebo-Thin.otf'), url('../../Fonts/Heebo/Heebo-Thin.ttf');
}

@font-face {
    font-family: 'Heebo-Medium';
    font-weight: 400;
    font-style: normal;
    src: url('../../Fonts/Heebo/Heebo-Medium.otf'), url('../../Fonts/Heebo/Heebo-Medium.ttf');
}

@font-face {
    font-family: 'Heebo-Light';
    font-weight: 400;
    font-style: normal;
    src: url('../../Fonts/Heebo/Heebo-Light.otf'), url('../../Fonts/Heebo/Heebo-Light.ttf');
}

@font-face {
    font-family: 'Heebo-Bold';
    font-weight: 700;
    font-style: normal;
    src: url('../../Fonts/Heebo/Heebo-Bold.otf'), url('../../Fonts/Heebo/Heebo-Bold.ttf');
}

@font-face {
    font-family: 'Varela';
    font-weight: 700;
    font-style: normal;
    src: url('../../Fonts/Varela/Varela-Regular.otf');
}

/*General*/

.dd-border {
    border: 1px solid white;
}

.loader {
    width: 50px;
}

a {
    text-decoration: underline !important;
}

.regulations-link {
    font-family: 'Heebo';
    font-size: 29px;
    line-height: 25px;
    cursor: pointer;
    font-weight: 100;
    bottom: 13px;
    position: relative;
}

.hide-show {
    display: none;
}

/*Custom Checkbox*/


.lblForCB {
    position: relative;
    font-family: 'Heebo';
    font-size: 29px;
    line-height: 25px;
    cursor: pointer;
    font-weight: 100;
    bottom: 13px;
    color: #828284;
    padding-right: 50px;
}

    .lblForCB:before {
        font-family: FontAwesome;
        font-size: 33px;
        position: absolute;
        top: 0;
        right: 13px;
        content: '\f096';
    }

    .lblForCB:after {
        font-family: FontAwesome;
        font-size: 33px;
        position: absolute;
        top: 0;
        right: 8px;
        content: '\f046';
        max-width: 0;
        overflow: hidden;
        opacity: 0.5;
        transition: all 0.35s;
    }

/*hiding the original checkboxes*/
input[class="customCheckbox"] {
    display: none !important;
}
    /*when the user checks the checkbox the checked icon will animate in*/
    input[class="customCheckbox"]:checked ~ .lblForCB:after {
        max-width: 26px; /*an arbitratry number more than the icon's width*/
        opacity: 1; /*for fade in effect*/
    }

    input[class="customCheckbox"] + .lblForCB:after {
        color: #828284;
    }

    input[class="customCheckbox"] + .lblForCB:before {
        color: #828284;
    }

/*Radio Button*/

input[type="radio"] {
    display: none;
}

    input[type="radio"] + label {
        font-family: 'Heebo-Bold';
        font-size: 24px;
        line-height: 29px;
    }

        input[type="radio"] + label span:not(.cost-currency) {
            display: inline-block;
            width: 19px;
            height: 19px;
            margin: -1px 2px 0 0;
            vertical-align: middle;
            cursor: pointer;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

        input[type="radio"] + label span:not(.cost-currency) {
            background-color: transparent;
            border: 1px solid #20374f;
        }

    input[type="radio"]:checked + label span:not(.cost-currency) {
        background-color: #20374f;
    }

    input[type="radio"] + label span,
    input[type="radio"]:checked + label span:not(.cost-currency) {
        -webkit-transition: background-color 0.4s linear;
        -o-transition: background-color 0.4s linear;
        -moz-transition: background-color 0.4s linear;
        transition: background-color 0.4s linear;
    }

.custom-radio {
    margin-left: 5px !important;
}

/*Colors*/
.light-blue-color {
    color: #01a9cd;
}

.orange-color {
    color: #f8a913;
}

.dark-blue-color {
    color: #20374f;
}

.error-txt {
    color: red !important;
}

.error-title {
    margin: 45px;
    color: red !important;
    font-family: 'Heebo' !important;
    font-size: 20px !important;
    font-weight: 100!important;
}

.light-blue-bgcolor {
    background-color: #4ba5c8 !important;
}

.light-blue-darker-bgcolor {
    background-color: #357a95;
}

.dark-blue-bgcolor {
    background-color: #20374f;
}

.gray-bgcolor {
    background-color: #e2e2e2;
}

.light-gray-bgcolor {
    background-color: #f0f0f3;
}

.yellow-bgcolor {
    background-color: #f8af24;
}

#payday-logo {
    width: 102px;
}

/*Menu Bar*/

#menu-bar-container {
    box-shadow: 2px 5px 12px 1px rgba(0, 0, 0, 0.09);
    padding-bottom: 15px;
    padding-top: 15px;
}

#menu-bar {
    font-family: 'Heebo';
    color: #20374f;
    font-weight: 400;
    font-size: 19px;
}

.vertical-devider {
    border-right: 1px solid #b7b7b6;
}

.menu-element {
    margin-top: 50px;
    position: relative !important;
    right: 30px;
}

/*Sections*/

.padding-5px-right {
    padding: 0px 5px 0px 0px;
}

.padding-4px-right {
    padding: 0px 4px 0px 0px;
}

.page-section {
    padding-top: 68px;
}

.section-num {
    font-family: 'Heebo-Bold' !important;
    height: 109px;
    color: #ffffff;
    font-family: Heebo;
    font-size: 40px;
    font-weight: 700;
    line-height: 49px;
    padding: 36px;
}

.section-title {
    font-family: 'Heebo-Bold' !important;
    height: 109px;
    color: #ffffff;
    font-family: Heebo;
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
    padding: 40px;
}

.section-two {
    background-color: #f0f0f3;
    font-family: 'Heebo-Bold';
    color: #20374f;
}

.section-three {
    background-color: #f0f0f3;
    font-family: 'Heebo-Bold';
}

.section-col {
    /*padding-top: 15px;
    padding-bottom: 15px;*/
    font-size: 24px;
}

.section-col-text-a {
    margin-top: 65px;
    line-height: 29px;
    left: 60px;
}

.section-col-text-b {
    margin-top: 65px;
    line-height: 29px;
    left: 34px;
}

.section-col-text-2a {
    margin-top: 46px;
    line-height: 29px;
    left: 60px;
}

.section-col-text-2b {
    margin-top: 46px;
    line-height: 29px;
    left: 60px;
}

.section-col-text-3a {
    margin-top: 60px;
    line-height: 29px;
    left: 34px;
}

.section-col-text-3b {
    margin-top: 50px;
    line-height: 29px;
    left: 60px;
}

/*Programs Sections*/
.monthly {
    display: block;
}

.yearly {
    display: none;
}

.btns-container {
    padding-top: 34px;
    font-family: 'Heebo-Medium' !important;
    font-size: 14px;
}

.btn-packages-state {
    width: 90px;
    height: 40px;
}

.packages-state-selected {
    color: white !important;
    background-color: #4ba5c8 !important;
}

.packages-state-not-selected {
    color: black !important;
    background-color: white !important;
}

.cost-comment {
    color: #20374f;
    font-family: Heebo;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    margin-top: 15px;
}

.program-selection {
    font-family: 'Heebo-Bold' !important;
    color: #ffffff;
}

.program-categories-component {
    max-width: 230px;
    margin-top: 262px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.program-component {
    max-width: 230px;
    padding-right: 4px !important;
    padding-left: 0px !important;
}

.program-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    margin-top: 36px;
    padding-bottom: 9px;
    max-height: 122px !important;
}

.program-img {
    padding-top: 10px;
    padding-bottom: 10px;
}

.program-description {
    width: 127px;
    margin-left: auto;
    margin-right: auto;
}

.coins-img {
    background-image: url("/Content/Images/PayDay/coins.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.triangle {
    position: absolute;
    height: 0;
    width: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid #f8af24;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #f8af24;
    font-size: 10px;
}

.triangle-txt {
    font-family: 'Heebo-Bold' !important;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    bottom: 12px;
    left: 21px;
    transform: rotate(45deg);
}

.program-content {
    background-color: #f0f0f3;
}

.program-cost {
    font-family: 'Heebo-Bold' !important;
    background-color: #f8af24;
    margin-top: 15px;
    margin-bottom: 15px;
}

.cost-main-txt-monthly {
    font-size: 30px;
    font-weight: 700;
    text-indent: 37px;
}

.cost-main-txt {
    font-size: 26px;
    font-weight: 700;
}

.cost-sub-txt {
    font-family: 'Heebo' !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative;
    bottom: 5px;
    line-height: 11px;
}

.cost-currency-sub-txt {
    font-family: 'Heebo' !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.cost-currency-top {
    font-family: 'Varela' !important;
    font-weight: 400 !important;
    font-size: 34px !important;
}

.cost-currency {
    font-family: 'Varela' !important;
    font-weight: 400 !important;
}

.cost-currency-lbl {
    font-family: 'Heebo' !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-indent: 27px;
    display: block;
}

.checkmark {
    display: inline-block;
    width: 22px;
    height: 22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ffffff;
    left: 11px;
    top: 6px;
}

.checkmark_kick {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #ffffff;
    left: 8px;
    top: 12px;
}

.program-category {
    font-family: 'Heebo-Medium' !important;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.program-category-three {
    font-family: 'Heebo-Medium' !important;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 17px;
}

.program-item {
    max-height: 60px;
}

.program-info {
    font-family: 'Heebo-Medium' !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.program-select-btn {
    font-family: 'Heebo' !important;
    font-size: 21px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

/*Extras Section*/

.invoice-details-element {
    margin-bottom: 30px;
}

#mobile-img {
    margin-top: 36px;
    margin-bottom: 36px;
}

#woo-commerce-img {
    margin-top: 40px;
    margin-bottom: 40px;
}

#invoice-img {
    margin-top: 44px;
    margin-bottom: 44px;
}

.extra-select-btn-container {
    font-size: 29px;
    color: #ffffff;
}

.extra-select-btn {
    width: 100%;
    padding: 14px 0px 14px 0px;
    margin-top: 44px;
    cursor: pointer;
}


.section-cost-container {
    font-family: 'Heebo-Bold' !important;
    font-size: 28px;
    top: 55px;
    left: 40px;
}

.section-cost {
    line-height: 35px;
    padding-bottom: 23px;
}

.cost-txt {
    font-family: Verdana;
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
}

.section-comment-container {
    padding-bottom: 80px !important;
    padding-right: 80px !important;
    margin-top: 80px;
    top: 25px;
}

.section-comment {
    font-family: 'Heebo' !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}

/*Details Section*/

.details-body {
    margin: 30px;
}

.details-title {
    background-color: #747475;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 28px;
}

.details-title-txt {
    padding: 16px;
}

.details-subtitles {
    font-size: 22px;
    line-height: 28px;
}

.details-subtitle {
    margin-bottom: 17px;
}

.details-textboxes input, select, select option {
    height: 60px;
    font-family: 'Heebo' !important;
    font-size: 22px !important;
    color: #828284 !important;
    line-height: 28px !important;
    text-indent: 30px;
    border: none;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .details-textboxes select, select option, input:not(.yearInput):not(.monthInput) {
        width: 100%;
    }

.monthInput, .yearInput {
    width: 100%;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-y: 10px;
}

.dropdown-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

/*.dropdown-container:before
{
    content: "";
    position: absolute;
    left: 50px;
    top: 68px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #828284;
}*/

/*.dropdown-container:after
{
    content: "";
    position: absolute;
    left: 50px;
    top: 66px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid transparent;
}*/

.details-textboxes-divider {
    margin-bottom: 50px;
}

.accept-btn {
    color: #ffffff;
    font-family: 'Heebo-Bold';
    font-size: 32px;
    line-height: 28px;
    text-align: center;
    margin: 0px 45px 45px 45px;
}

.terms-accept-txt {
    margin: 50px;
}

.submit-btn {
    padding-top: 21px;
    padding-bottom: 21px;
    background: none;
    border: none;
}

/*Tablet + Mobile*/
@media (max-width: 1024px) {

    .cost-currency-sub-txt {
        font-family: 'Heebo' !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    .display-none {
        display: none;
    }

    input[type="radio"] + label {
        font-family: 'Heebo-Bold';
        font-size: 18px;
        line-height: 29px;
    }

        input[type="radio"] + label span:not(.cost-currency) {
            display: inline-block;
            width: 13px;
            height: 13px;
            margin: -1px 2px 0 0;
            vertical-align: middle;
            cursor: pointer;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }

    .extra-select-btn-container {
        margin-bottom: 43px;
    }

    .section-col-text-a {
        left: 10px;
    }

    .section-col-text-b {
        left: 3px;
    }

    .section-col-text-2a {
        left: 30px;
    }

    .section-col-text-2b {
        left: 10px;
    }

    .section-col-text-3a {
        left: 10px;
    }

    .section-col-text-3b {
        left: 50px;
    }

    .hide-show {
        display: block;
    }

    .program-component {
        margin-right: 5px;
    }

    .program-item:not(.one-line-item) {
        line-height: 3px;
    }
}

@media (max-width: 768px) {
    .section-col-text-2b {
        left: 10px;
    }

    .cost-currency-sub-txt {
        font-family: 'Heebo' !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-right: 7px;
    }

    .extra-select-btn {
        width: 100%;
    }

    .section-title {
        font-size: 22px;
    }

    .section-num {
        font-size: 34px;
    }

    .details-title {
        font-size: 21px;
    }

    .details-subtitles {
        font-size: 22px;
    }

    .section-col {
        /*font-size: 12px;*/
        line-height: 26px;
    }

    .section-col-text-3b {
        left: 10px;
    }

    .lbl-for-radio {
        width: 100% !important;
    }

    input[type="radio"] + label {
        font-family: 'Heebo-Bold';
        /*font-size: 12px;*/
        line-height: 26px;
    }

    .section-cost-container {
        font-size: 18px;
        left: 20px;
    }

    .cost-txt {
        font-size: 14px;
    }

    .section-comment {
        font-size: 9px;
    }

    .section-comment-container {
        padding-bottom: 40px !important;
        padding-right: 40px !important;
        margin-top: 40px;
        top: 25px;
    }

   

    .details-textboxes input, select, select option {
        font-size: 18px !important;
        text-indent: 15px;
    }

   



    .lblForCB {
        font-size: 17px;
    }

    #regulations-link {
        font-size: 17px;
    }

    .program-component {
        max-width: 100%;
        padding-right: 40px !important;
        padding-left: 40px !important;
    }

    .extra-select-btn {
        margin-top: 15px;
    }

    .hide-show {
        display: block;
    }

    .program-info {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .extra-select-btn-container {
        margin-top: 33px;
    }

    .program-item {
        padding-bottom: 25px;
        padding-top: 10px;
    }

        .program-item:not(.one-line-item) {
            line-height: 8px;
        }

    .cost-comment {
        text-align: center;
    }

    .program-selection {
        display: flex;
        flex-direction: column-reverse;
    }

    .bank-selection {
        display: flex;
        flex-direction: column-reverse;
    }

    .invoice-details-container {
        width: 160px;
    }

    .section-col-text-b {
        left: 10px;
    }
}

.ui-datepicker-calendar {
    background-color: white !important;
}



 .ui-datepicker .ui-datepicker-title select {
        font-size: 15px !important;
    }
.ui-datepicker-year {
    height: 20% !important;
}

.ui-datepicker-month {
    height: 20% !important;
}

@media (max-width: 767px) {
    .section-title {
        font-size: 20px;
    }

    .section-col {
        font-size: 12px !important;
    }

    input[type="radio"] + label {
        font-size: 14px;
    }

    .cost-currency-lbl {
        font-size: 9px !important;
        line-height: 1.7;
    }

    .cost-currency-sub-txt {
        font-size: 9px !important;
        line-height: 1.7;
    }

    .section-col-text-a {
        font-size: 14px !important;
    }

    .section-col-text-b {
        font-size: 14px !important;
    }
}