.toastjs-container{position:absolute;position:fixed;bottom:30px;right:34px;width:calc(100% - 60px);max-width:400px;transform:translateX(150%);transition:transform 1s;z-index:999999}.toastjs-container[aria-hidden=false]{transform:translateX(0)}.toastjs{background:#fff;padding:10px 15px 0;border-left-style:solid;border-left-width:5px;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.2);min-height: 64px;display: flex;align-items: center;}.toastjs.default{border-left-color:#AAA}.toastjs.success{border-left-color:#2ECC40}.toastjs.warning{border-left-color:#FF851B}.toastjs.danger{border-left-color:#FF4136}.toastjs-btn{background:#f0f0f0;padding:5px 10px;border:0;border-radius:4px;font-family:'Source Sans Pro',sans-serif;font-size:14px;display:inline-block;margin-right:10px;margin-bottom:10px;cursor:pointer}.toastjs-btn--custom{background:#323232;color:#fff}.toastjs-btn:focus,.toastjs-btn:hover{outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.2)}

.footer2{
    /* bottom: 70px */;
    padding: 20px 12px;
    /* position: absolute */;
    color: #a6b0cf;
}

.page-content{
    /*padding: calc(70px + 12px) 24px 300px 24px !important;*/
}

.avatar-change-input{
    position: absolute;
    font-size: 0px;
    opacity: 0;
    right: 0;
    top: 0;
}

.page-title-box .page-title {
    line-height: 15px;
}
.page-title-box h4 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px !important;
}
.page-title-right{
    font-size: 12px;
}

.form-group {
    margin-bottom: 0.6rem !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f0f0f0;
    opacity: 1 !important;
}

.text-underline{
    text-decoration: underline !important;
    color: initial !important;
}
.form-check-input{
    /* margin-top: 0.3rem; */
    margin-left: -1.0rem;
    transform: scale(1.5) !important;
    margin-right: 10px !important;
    margin-top: 0.3rem !important;
}
.form-check-label {
    margin-left: 8px;
}
.portlet {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.3125rem;
    -webkit-transition: background-color .3s,border-color .3s;
    -o-transition: background-color .3s,border-color .3s;
    transition: background-color .3s,border-color .3s;
    border: none;
    padding: 1.875rem 1.25rem;
    font-size: .875rem;
    text-align: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}
.portlet__body {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    padding-top: 1.25rem;
}
.h-54px {
    height: 54px;
}


.vod {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .1));
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.3125rem;
    -webkit-transition: background-color .3s,border-color .3s;
    -o-transition: background-color .3s,border-color .3s;
    transition: background-color .3s,border-color .3s;
    padding: 1.875rem 0;
}
.vod__content {
    padding: 0 1.875rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.vod__footer {
    font-size: .75rem;
    font-weight: 500;
    padding: 1.875rem 1.875rem 0;
    border-top: 1px solid #dee2e6;
}
.vod-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.vod-item__label {
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.vod-item__content {
    margin-bottom: 1.875rem;
}

.swal2-confirm {
    margin-left: 25px;
}


/** PAYMENT AREA **/

.tdRight {
    font-size: 14.4px;
    text-align: right;
    font-weight: 600;
}

.tdLeft {
    font-size:14.4px;
    text-align: left;
}

.cardFooter {
    background-color: #8ec641;
    color : #fff;
    width: 100%;
    text-align: center;
    margin :0 auto;

}

.tdButton td {
    padding : 10px 0 10px 0!important;
}





.input-icons i {
    position: absolute;
}

.input-icons {
    width: 100%;
}

.icon {
    padding: 18px 14px 18px 13px;
    min-width: 50px;
    text-align: left;
    color: #a2a8af;
    font-family: FontAwesome,"Basier Circle", Roboto, -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-size: 14.4px;
}

.name-field {
    width: 100%;
    padding: 10px 30px;
    text-align: left;
    height: 52px;
    color: #383737;
    border: 1px solid #858585;
    border-radius: 13px;
    outline: none;
    font-family: "Basier Circle", Roboto, -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-size: 14.4px;

}

.name-field::placeholder {
    color: #a2a8af;
    font-family: FontAwesome,"Basier Circle", Roboto, -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-size: 14.4px;
}


.card-field {
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 52px;
    margin: 0.5rem 0;
    padding: 0.9rem 0.75rem;
    color: #383737;
    border: 1px solid #858585;
    border-radius: 13px;
    outline: none;
    font-family: "Basier Circle", Roboto, -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-size: 14.4px;
    font-weight: 400;
}


/** END PAYMENT AREA **/



/** for customer education page */
.removeTextUnderline:focus { box-shadow:none;  }

.eduHeader {
    padding: 20px 15px 15px;
}

.eduContent {
    border-top:1px solid #f3f5f7;
}
/** end for customer education page */



.btn-primary {
    color: #fff;
    background-color: #8ec641;
    border-color: #8ec641;
}


.btn-info, .btn-outline-info:hover {
    color: #fff;
    background: #8ec641;
    border: none;
}


.darkHeader {
    /*background-color : #26354a;*/
}