.title-text{
    font-size: 2rem;
    font-weight:bold;
}
.bmErrorMsg {
    position: relative;
    font-size: 75%;
    vertical-align: baseline;
    font-style: italic;
    color:dimgrey;
}
.bahasa-text {
    position: relative;
    font-size: 90%;
    vertical-align: baseline;
    font-style: italic;
    color:dimgrey;
}
.bahasa-title-text {
    position: relative;
    font-size: 75%;
    vertical-align: baseline;
    font-style: italic;
    color: white;
}

.bahasa-text-enroldirect {
    position: relative;
    font-size: 90%;
    vertical-align: baseline;
    font-style: italic;
    color:white;
}

.enrol-background {
    padding: 2rem 0 2rem 0;
    background-image: linear-gradient( 180deg, #007CD5 10.26%, rgba(0, 124, 213, 0.4) 123.08%);
    color: white;
    align-items: center;
}
.header-background {
    padding: 2rem 0 2rem 0;
    background-image: linear-gradient( 180deg, #522E90 0%, rgba(82, 46,144, 0.4) 74.48%, rgba(82, 46,144, 0) 100%);
    color: white;
    height: 225px;
    align-items: center;
}
.banner-background {
    padding: 2rem 0 2rem 0;
    color: white;
    min-height:550px;
}
#myTenangBanner {
    background-image: url('../../Areas/MyTenang/Images/homepage-banner.png');
    background-size: cover;
    background-position: 65%;
}
.declaration-notes{
    margin-left: -1.5rem;
}

@media (min-width: 768px) and (max-width:1024px) {
    #myTenangBanner {
        background-image: url('../../Areas/MyTenang/Images/homepage-tablet-banner-landscape.png');
        background-size: cover;
        background-position: center;
        background-position-x:right;
    }

    .btnBlue-enrolredirect {
      width: 200px !important;
      margin-top:15px !important;
    }
}
@media (min-width:568px) and (max-width:767px) {

    .step-card {
        min-height: 210px;
    }

    #myTenangBanner {
        background-image: url('../../Areas/MyTenang/Images/homepage-tablet-banner.png');
        background-size: cover;
        background-position: center;
    }

    .banner-background {
        min-height: 600px;
    }

    .btnBlue-enrolredirect {
      width:auto !important;
      margin-left:-16px !important;
      margin-top:15px !important;
    }
    
}
@media only screen and (max-width:767px) {

    .step-card {
        min-height: 210px;
    }
}

@media only screen and (max-width:567px) {

    #myTenangBanner {
        background-image: url('../../Areas/MyTenang/Images/homepage-mobile-banner.png');
        background-size: cover;
        background-position: center;
    }
    .banner-background {
        min-height: 880px;
    }

    .btnBlue-enrolredirect {
      width:auto !important;
      margin-left:-16px !important;
      margin-top:15px !important;
    }

}
@media only screen and (max-width:380px) {

    .banner-background {
        min-height: 900px;
    }

    .btnBlue-enrolredirect {
      width:auto !important;
      margin-left:-16px !important;
      margin-top:15px !important;
    }
}
/*#region INPUTFIELDS*/

.tn-input {
    border: none;
    border-bottom: solid 1px rgb(180, 180, 180);
    border-radius:0;
    padding-left:0;
}
.tn-input-prepend {
    background: none;
    border: none;
    border-bottom: solid 1px rgb(180, 180, 180);
    border-radius: 0;
}
.tn-input:focus {
    box-shadow: none;
}
.same-address-span{
    font-size:75%;
}
/*#endregion INPUTFIELDS*/

.thanks-note {
    font-weight: bold;
}
.btn-white {
    color: #007CD5;
    border-spacing: 10px 10px;
    padding: 8px;
    border: 2px solid;
    border-color: #007CD5;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
    margin: 5px 0px;
    line-height: 19px;
    letter-spacing: 0;
}
    .btn-white:hover {
        background-color: #007CD5;
        color: white;
    }
.btnBlue {
    color: white;
    background-color: #007CD5;
    border-spacing: 10px 10px;
    padding: 8px;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
    margin: 5px 0px;
    line-height: 19px;
    letter-spacing: 0;
}
    .btnBlue:hover {
        opacity: 0.9;
    }

.btnBlue-enrolredirect {
    color: white;
    background-color: #007CD5;
    border-spacing: 10px 10px;
    padding: 8px;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
    margin-top:30px;
    margin-left: -16px;
    line-height: 19px;
    letter-spacing: 0;
    width:200px;
}

    .btnBlue-enrolredirect:hover {
        opacity: 0.9;
        color:white;
    }

.success-greybg{
    background-color: #E5E5E52b;
    border:none;
    font-weight: bold;
}


[type="checkbox"]:not(:checked) + input[type="hidden"] + label:before, [type="checkbox"]:checked + input[type="hidden"] + label:before {
    width: 1rem;
    height: 1rem;
    box-shadow: none;
    border-radius: 0;
    left: 1px;
    top: 4px;
}


[type="checkbox"]:checked + input[type="hidden"] + label:after {
    background-color: rgb(82,46,144);
    color: white;
    width: 0.95rem;
    height: 1rem;
    box-shadow: none;
    border-radius: 0;
    font-size:0.8rem;
    top:4px;
    text-align:center;
}
    /*not checked*/
    [type="checkbox"]:not(:checked) + input[type="hidden"] + label:before {
        width: 1rem;
        height: 1rem;
        box-shadow: none;
        border-radius: 0;
        /*top:2px;*/
        left:2px;
        top:5px;
    }

.main-title {
    font-weight: bold;
    color: rgb(82,46,144);
}

.modalNoBtn {
    color: rgb(82,46,144);
    border-spacing: 10px 10px;
    padding: 8px;
    border: 2px solid;
    border-color: rgb(82,46,144);
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
    margin: 5px 0px;
    line-height: 19px;
    letter-spacing: 0;
    width: 110px
}
.modalYesBtn {
    background-color: rgb(82,46,144);
    color: white;
    border-spacing: 10px 10px;
    padding: 8px;
    border: 2px solid;
    border-color: rgb(82,46,144);
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    display: block;
    text-align: center;
    margin: 5px 0px;
    line-height: 19px;
    letter-spacing: 0;
    width: 110px
}
.modalYesBtn:hover {
    color: white;
    opacity:0.9;
}
.modalNoBtn:hover {
    color: rgb(82,46,144);
    opacity: 0.9;
}
.step-card {
    background-color: rgba(213,208,214,0.25);
    border-radius: 1rem;
    border: none;
    margin-top: -2rem;
    min-height:270px;
    padding-top:15%;
    color: #757E81;
}

.card-header-icon{
    padding:0;
    border:none;
    background:none;
    z-index:1000;
}
.tenang-faq-modal {
    z-index: 999999;
    border: solid 0.25rem rgb(82,46,144);
    border-radius: 1rem;
}
.faq-modal-title {
    color: rgb(82,46,144);
    font-weight:bold;
}
.title-h5{
    font-size:1.25rem;
}
.sub-text-black{
    color:black;
}
.disclaimer{
    font-size:12px;
    margin-top: 2rem !important;
}
.infoPanel {
    /*background-color: #faff82a1;
    color: red;
    border: solid 2px red;*/
    padding: 2rem;
    text-align: center;
    background-color: #ddeeFF;
    border-radius: 3px;
    border: solid 1px #00E9E9;
    font-weight: bold;
}
.btn:disabled {
    background-color: #c1c1c1;
}
.grey-text{
    color: #757E81;
}

.datepicker-input {
    /*background: url('../Images/ico-calendar.png') no-repeat right;*/
    background-image: url('../../Areas/MyTenang/Images/ICO_Calendar.png');
    background-position-x: 100%;
    cursor: pointer;
    background-size: 4%;
}
@media only screen and (max-width: 320px) {

    input[type=text]:-ms-input-placeholder {
        text-transform: none;
        font-size: 10px;
    }

    input[type=text]:-moz-placeholder {
        text-transform: none;
        font-size: 10px;
    }

    input[type=text]::-moz-placeholder {
        text-transform: none;
        font-size: 10px;
    }

    input[type=number]::-moz-placeholder {
        text-transform: none;
        font-size: 10px;
    }

    input[type=text]::-webkit-input-placeholder {
        text-transform: none;
        font-size: 10px;
    }
    input[type=number]::-webkit-input-placeholder {
        text-transform: none;
        font-size: 10px;
    }

    input[type=email]::-webkit-input-placeholder {
        text-transform: none;
        font-size: 10px;
    }
}