/* Reset */
/*
*{margin:0;padding:0;border:0;font-family:Arial, Helvetica, Verdana, sans-serif;}
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
button, input, select, textarea{font-size:100%;vertical-align:middle;}
button::-moz-focus-inner, input::-moz-focus-inner{ border: none;}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:button; outline: none;}
input[type="search"] {-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
audio, canvas, video{display:inline;zoom:1;}
html, button, input, select, textarea{}
\:section, \:article, \:figure, \:figcaption{display: block;}
*/

/* General Typography */
body {
    line-height:1.2;
    font-family:'Roboto', Arial, Helvetica, Verdana, sans-serif;
}
.roboto-light{
    font-weight: 300;
}
.roboto-regular{
    font-weight: 400;
    font-size: 14px;
    color: #666;
}
.roboto-medium{
    font-weight: 500;
}
.roboto-bold{
    font-weight: 700;
}

h1.v-h1 {
    font-size:20px;
    color: #333;
}
h2.v-h2, h3.v-h3, p.roboto-light, p.v-p1 {
    font-size: 16px;
    color: #333;
}
h4.v-h4, h5.v-h5, h6.v-h6{
    font-size: 15px;
    color: #333;
}
h5.v-h5{
    color: #666;
}
h6.v-h6{
    color: #999;
}
.v-h7{
    font-size: 12px;
    font-weight: 200;
    color: #333;
}
p.v-p1{
    font-weight: 300;
}
p.v-p2, .injected-point p {
    font-size: 14px;
    color: #666;
}

.label-error{
    color: #dc3545;
}

.rem-110{
    font-size: 1.10rem !important;
}

.rem-090{
    font-size: 0.9rem !important;
}

.rem-085{
    font-size: 0.85rem !important;
}

/* h* icon */
.title-icon {
    margin-right:.25rem;
}

/* added typography classes */
.heading {
    margin-bottom: .5rem;
}
.heading h1 {
    display:inline-block;
    vertical-align:bottom;
    margin-bottom:0;
    line-height: 22px;
    /*min-width: 75%;*/
}
.heading .heading-icon {
    font-size: 24px;
    line-height: 22px;
    vertical-align:middle;
}
.heading .small {
    line-height: 22px;
}

.flag {
    color:#fff;
    font-size:12px;
}
.color-mandated {
    background-color:red;
}
.color-exam_passed {
    background-color:green;
}

/* bootstrap extensions */
.text-faint {
    color:#bebebe!important;
}
.underline {
    text-decoration:underline;
}
.no-text-decoration, .no-text-decoration:hover {
    text-decoration:none;
}
.hidden {
    display: none;
}

/* brand colors */
.brand-color,
.brand-color-hover:hover,
.brand-color-focus:focus,
.brand-color-focus:active,
.active.brand-color-active,
.active .brand-color-active {
    color:#2a7ad0!important;
}
.brand-background,
.brand-background-hover:hover,
.brand-background-focus:focus,
.brand-background-focus:active,
.active.brand-background-active,
.active .brand-background-active {
    background-color:#2a7ad0!important;
}
.brand-border,
.brand-border-hover:hover,
.brand-border-focus:focus,
.brand-border-focus:active,
.active.brand-border-active,
.active .brand-border-active {
    background-color:#2a7ad0!important;
}

/* icon modifiers */
.icon-big {
    font-size:2rem;
    line-height:2rem;
    vertical-align:middle;
}

/* border */
.border {
    border:solid 1px #ccc!important;
}

/* bootstrap extensions */
.display-5, .display-6, .display-7 {
    line-height: 1.2;
}
.display-5 {
    font-size: 2.5rem;
}
.display-6 {
    font-size: 1.7rem;
}
.display-7 {
    font-size: 1.4rem;
}

/* Links and buttons */
.link{
    color: #333;
    font-size: 14px;
}
.link.action{
    color: #0080FF
}
.link.big{
    font-size: 16px;
}
button[type=submit]{
    min-width: 10rem;
}
.btn {
    font-size: 0.95rem;
    line-height: 1rem;
    padding:.32rem .6rem;
    height: calc(2.25rem + 2px);
}
a.btn{
    line-height: 2.1rem;
}
.btn-link.text-muted {
    text-decoration:underline;
}
.btn-link-dark {
    color:#16181b;
}
.btn-link-dark.active,
.btn-link-dark:focus,
.btn-link-dark:active {
    color:#007bff;
    background-color:transparent;
}
.btn-link-dark:hover {
    background-color:#e8e9ea;
}
.btn-link-dark i {
    color:#007bff;
    font-size: 17px;
}

/* spin */
@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.spin {
    -webkit-animation: spin .75s linear infinite;
    animation: spin .75s linear infinite;
}


/* Images */
img.desaturate {
    filter: grayscale(100%);
}


/* Sticky footer styles
-------------------------------------------------- */
html, body {
    position: relative;
    height: 100%;
    margin:0;
    padding:0;
}
body {
    min-width:366px; /* 366px because of recaptcha, otherwise it would be 320px */
    display: flex;
    flex-direction: column;
}
main {
    flex:1 1 auto;
}

/* Forms */
.form-control, .custom-select{
    font-size: 0.85rem;
    color:#999;
}
input.text-field{
    height: 40px;
}
input.form-radio-input{
    width: 1.25em;
    height: 1.25em;
}
input.form-check-input{
    width: 1.25em;
    height: 1.25em;
}


.input-group-append{
    height: calc(2.25rem + 2px);
}

.datepicker-calendar-group-append{
    width: 2em;
    padding-top: 0.6em;
    padding-left: 0.5em;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.control-group label{
    text-align: left;
}
.form-group.error label.form-check-label{
    color: #dc3545;
    font-size: 0.85rem;
}
.form-control.first-option-muted {
    color:#6c757d;
}
.form-control.first-option-muted option {
    color:#495057;
}
.form-check {
    padding-left: 2.25rem;
}
.form-check .form-check-input {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.2rem;
    margin-left: -2.25rem;
}
.row > .form-group.row {
    margin-left:0;
    margin-right:0;
    padding-right:0;
    padding-left:0;
    /*
    align-items: center;
    -ms-flex-align: center;
    */
}
form .row label{
    font-size: 14px;
    line-height: 1rem;
}
.row label .mandatory-start{
    font-size: 10px;
    line-height: 1rem;
}
ul.select2-choices:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.select2-container-multi .select2-choices .select2-search-field input{
    height: calc(1.25rem + 2px);
}

/* hours picker arrows */
.form-control-hours-spinner .ui-spinner {
    border:none;
    background:none;
    width: 100%;
}
.form-control-hours-spinner .ui-spinner input {
    font-size: 1rem;
    padding: .375rem calc(.2rem + 18px) .375rem .75rem;
    margin: 0;
}
.form-control-hours-spinner .ui-spinner a {
    margin-right: 3px;
}

/* select2 */
.form-control.select2-container {
    height:auto;
    padding:0;
    margin:0;
    border:none;
}
.form-control .select2-choices {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background: none;
    border-radius: .25rem;
    border-color:#ced4da;
}
.form-control .select2-search-field {
    line-height:17px;
}
.form-control.select2-dropdown-open .select2-choices {
    border-color:#5897fb;
    border-radius: 0;
}

/* evil statement form*/
.evaluation_statement_fields table{
    font-size: 14px;
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
}
.evaluation_statement_fields table .black.label{
    word-break: break-word;
    /*max-width:20%;*/
}
.evaluation_statement_fields .row .form-group .form-radio .container .row .form-control{
/*    height: calc(4.25rem + 2px);*/
}

@media (max-width: 450px) {
    #evaluationStatementFields th{
        font-size: 0.7rem;
    }

    #evaluationStatementFields tr.row-field td:first-child{
        min-width: 100px;
    }

    #evalStatementSection button{
        width: min-content;
        margin-top: -30px;
    }
}
    /* assesment form*/
.assesment_form_fields table{
    font-size: 14px;
    width: 100%;
    table-layout: fixed;
    overflow: hidden;
}
.assesment_form_fields table .black.label{
    word-break: break-word;
}

/* welcome form */
.welcome-form {
    max-width:24rem;
    margin-left:auto;
    margin-right:auto;
}

.welcome-form.registration{
    max-width:40rem;
}

.bullet-points.registration{
    color: #999;
}

.bottom-boxes .text-nowrap{
    font-size: 0.85rem;
}

.registration-terms-conditions-check{
    font-size: 0.9rem;
}

.welcome-form.registration .form-radio{
    display: inline-flex;
}

/* Modals */
.overlay {
    display:none;
}
.modal {
    display:none;
}
.modal-content.registration-modal{
    background-color: #eee;
}

/* Portal layout style */
.portal {
    background-color:#eee;
}
header {
    background-color: #444;
    color: #fff;
}
header .navbar-brand a, header .navbar-brand a:hover, header .navbar-brand a:visited{
    color: #ffffff;
    text-decoration:none;
}
header .row {
    min-height: 80px;
}
header .navbar {
    min-height:initial;
    align-self: stretch;
}
header .navbar-nav,
header .dropdown {
    position:static; /* show dropdown menu relative to full height parent */
}
.navbar-brand {
    font-weight:200;
    font-size:1.5rem;
    margin: 0.82rem 0;
    margin-right: 1rem;
}
.navbar-brand strong {
    white-space:normal;
}
.navbar-nav .dropdown-menu {
    position:absolute;
    min-width:255px;
}
.navbar-nav .nav-item.active .nav-link {
    color:#007bff;
}
.navbar-nav .nav-item.active .nav-link:hover {
    color:#3d9aff;
}
footer {
    background-color: #444;
    color: #fff;
    font-size:0.9rem;
    min-height: 130px;
}
footer a {
    color:#fff!important;
}
footer a.active {
    color:#007bff!important;
}
footer .copyright,
footer .copyright a {
    font-size:0.8rem;
    color:#999!important;
}

/* dropdown button */
.dropdown-button {
    white-space:nowrap;
}
header .dropdown-menu {
    border-top:solid 5px #007bff;
}

/* Utilities */
/* clear */
.wrap::after {  /* contain floats */
    content:'';
    display:block;
    clear:both;
}
.clear::after {
    content:'';
    display:block;
    clear:both;
}

/* span */
.span6 {
    min-width:50%;
    display:inline-block;
    float:left;
}

/* Modules */

/* box */
.box {
    background-color:#fff;
    border:solid 1px #ccc;
    padding:15px;
}

/* card box */
.card.box {
    width:254px;
    margin:15px;
}
.card.box .summary {
    min-height: 120px;
}
.card.box .card-body {
    padding:0;
}
.card.box .cover {
    max-height:145px;
    overflow:hidden;
}
.card.box .cover img {
    width:100%;
}

/* media box */
.media.box {
    margin:15px 0;
}
.media.box .media-body {
    display:flex;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -ms-flex-direction: column;
    flex-direction: column;
    flex: 1 0 40%;
}
.media.box .summary {
    flex:1 1 auto;
    /*max-height:85px;*/
    overflow:hidden;
}
.box .cover {
    background-color:#333;
    justify-content: center;
    align-items:center;
    display: flex;
}
.media.box .cover {
    order:-10;
}
.media.box .summary:not(.training-list-full .summary) {
    margin-bottom: 1rem;
}
.media.box .summary :last-child {
    margin-bottom: 0;
}
.media.box .cover.article{
    order: 0;
}
@media (max-width: 576px) {
    .media.box .cover {
        width:100%;
        margin-left:0!important;
        margin-right:0!important;
        margin-bottom:10px;
    }
    .media.box .cover img {
        width:100%;
    }
    .media.box .media-body {
        margin-top:1rem;
    }
    .media.box {
        width:254px;
        display:block;
    }
}
@media (max-width: 768px) {
    .media.box .info-top {
        order:-1;
    }
}

/* casing (similar to jumbotron) */
.casing {
    padding: 1rem 15px;
    margin-bottom: 2rem;
    border-radius: 0.3rem;
}
@media (min-width: 576px) {
    .casing {
        padding:2rem calc(1rem + 15px);
    }
}
.casing-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

/* course covers horizontal results */
.image-container-horizontal{
    width:160px;
}
.image-container-horizontal a.cover{
    background-color: #FFF;
}
.img-cover-horizontal{
    max-width: 160px;
    max-height: 100px;
}

/* rating */
.rating {
    color: #ffcc00;
    font-size:0.75rem;
    overflow:hidden; /* contain the floats */
}
.rating .fa-star {
    float:left;
    margin-right:0.2rem;
    line-height: 1.2rem;
}

/* progressbar */
.ui-progressbar .ui-progressbar-value {
    background:#0080FF;
}
.overallprogress .label{
    display:inline;
}
.overallprogress .percentage{
    display:inline;
    float:right;
}
.catProgress{
    width: 100%;
}
td.progress{
    width: 200px;
}
.overallprogress .progress{
    height: 1.5rem;
}

/* responsive content hiding */
.hide, .hide-sm, .hide-md, .hide-lg, .hide-xl {
    display:none;
}
@media (max-width: 576px) {
    .hide {
        display:initial;
    }
}
@media (min-width: 576px) {
    .hide-sm {
        display:initial;
    }
}
@media (min-width: 768px) {
    .hide-md {
        display:initial;
    }
}
@media (min-width: 992px) {
    .hide-lg {
        display:initial;
    }
}
@media (min-width: 1200px) {
    .hide-xl {
        display:initial;
    }
}
@media print {
    .hide-print {
        display:none!important;
    }
    .border-print-0 {
        border:none!important;
    }
}

/* ellipsis */
.ellipsis div {
    display:flex;
    flex-wrap:wrap;
}
.ellipsis h2,
.ellipsis p {
    width:100%;
    flex:1 1 auto;
}

/* icon settings */
.icon-heading-menu {
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    line-height: 2rem;
    vertical-align:middle;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
i.big {
    font-size: 1.4rem;
}

/* alerts */
.alert{
    color: #FFF;
}

.alert a{
    color: #FFF;
}

.alert.alert-primary{
    background-color: #007bff;
    border-color: #007bff;
}

.alert.alert-success{
    background-color: #008C23;
    border-color: #008C23;
}

.alert.alert-danger{
    background-color: #D90000;
    border-color: #D90000;
}

.alert.alert-warning{
    background-color: #FFBF00;
    border-color: #FFBF00;
}

/* homepage */
.homepage-content .heading .v-p2.text-muted{
    display: inline;
    margin-left: 5px;
    line-height: 15px;
}

.homepage-content .heading{
    margin: 70px 0 0;
}

.homepage-content .heading:first-child{
    margin: 40px 0 0;
}

.homepage-content .heading a.action{
    margin-top: 5px;
}

.homepage-content .summary p.media-text{
    margin-top: 3px;
}

.homepage-content .training-box-action .v-h6{
    margin-top: 5px;
}

.homepage-content img, .training-list-full img, .course-article .article-main-info img:not(.packageInfoImage){
    border: solid 1px #DDD;
}


/* article page */
div.requirements{
    display: inline;
}

.course-article .box.casing{
    padding-bottom: 0 !important;
}

ul.training-accreditors{
    color: #666;
}

/* cpd cycle widget && cpd requirements */
.cpd-category-progress-bar .progress{
    width: 200px;
}
.user-categories-table td, .user-categories-table thead th, .user-cpd-categories td, .user-cpd-categories thead th{
    border: none;
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}
.user-categories-table td:first-child, .user-cpd-categories td:first-child{
    min-width: 150px;
}
.user-categories-table tr:not(:first-child), .user-cpd-categories tr:not(:first-child){
    border-top: 1px solid #dee2e6;
}

.cpd-cycle-widget .btn-secondary{
    margin-top: -80px;
    margin-left: 95px;
}

/* article main info sponsors stuff */
.trainingSponsors{
    vertical-align: bottom;
}
.sponsorInfoContainer{
    width: 20%;
    height: 110px;
    display: inline-table;
    margin: 5px;
    padding: 5px;
    text-align: center;
    /*border: solid 1px #bebebe;*/
    /*border-radius: 5px;*/
}

.sponsorInfoContainer span{
    font-size: 12px;
    color: #bebebe;
    height: 10px;
    display: inline-block;
}

.sponsorInfoContainer img{
    max-width: 90%;
    max-height: 80px;
}

/* results page */
.training-list-full .training_available.training-count{
    margin-left: 5px;
}

.training-list-full .training .price .training-icons, .course-article .training-icons{
    display: inline;
}

.training-list-full .training .price .training-icons i.training-icon, .article-main-info i.training-icon{
    font-size:20px;
}

.training-list-full .training-box-horizontal-action-container{
    margin-top: -22px;
}

.training-list-full .training-box-horizontal-action-container .rating-container{
    min-width: 50%;
}

.training-list-full .training-box-horizontal-action-container .flag{
    min-height: 14px;
    line-height: 14px;
}

.training-list-full .training-box-horizontal-action-container .flag.color-exam_passed, .training-list-full .training-box-horizontal-action-container .flag.color-self_verified, .training-list-full .training-box-horizontal-action-container .flag.color-recommended,
.course-article .flag.color-exam_passed, .course-article .flag.color-self_verified, .course-article .flag.color-recommended{
    background-color: #008C23;
}

.training-list-full .training-box-horizontal-action-container .flag.color-in_progress .course-article .flag.color-in_progress{
    background-color: #FFBF00;
}

.training-list-full .training-box-horizontal-action-container .flag.color-exam_failed, .training-list-full .training-box-horizontal-action-container .flag.color-mandated
.course-article .flag.color-exam_failed, .course-article .flag.color-mandated, .course-article .flag.color-exam_failed, .course-article .flag.color-exam_failed{
    background-color: #D90000;
}

.training-list-full .training-box-horizontal-action-container .flag.color-in_progress:before, .course-article .flag.color-in_progress:before{
    content: 'IN PROGRESS';
}

.training-list-full .training-box-horizontal-action-container .flag.color-exam_passed:before, .course-article .flag.color-exam_passed:before{
    content: 'EXAM PASSED';
}

.training-list-full .training-box-horizontal-action-container .flag.color-self_verified:before, .course-article .flag.color-self_verified:before{
    content: 'SELF VERIFIED';
}

.training-list-full .training-box-horizontal-action-container .flag.color-exam_failed:before, .course-article .flag.color-exam_failed:before{
    content: 'EXAM FAILED';
}

.training-list-full .training-box-horizontal-action-container .flag.color-mandated:before, .course-article .flag.color-mandated:before{
    content: 'MANDATED';
}

.training-list-full .training-box-horizontal-action-container .flag.color-recommended:before, .course-article .flag.color-recommended:before{
    content: 'RECOMMENDED';
}

.training-list-full .searchListModeContainer{
    margin-bottom: -15px;
    margin-top: -15px;
    border-bottom: solid 1px #ccc;
}

.training-list-full .searchListMode{
    margin:20px 5px 0 0;
    color: #FFFFFF;
}

.training-list-full .searchListMode.selected{
    background-color: #57B6AD;
}

.training-list-new{
    padding-top: 15px;
}

.results-description{
    padding: 20px 0;
}

.specialties a{
    color: #666;
}

/* ribbon */
/* HTML: <div class="ribbon">Your text content</div> */
.free-ribbon {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}
.free-ribbon {
    --f: .5em; /* control the folded part */

    position: absolute;
    width: 165px;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
            100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background-color: #99cc00;
}
.free-ribbon-vertical {
    --f: .5em; /* control the folded part */
    font-weight: bold;
    text-align: center;
    color: #fff;
    left: 0;
    top: 0;

    position: absolute;
    width: 165px;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
            100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background-color: #99cc00;
}

/* training tracker */
.education-tracker-actions{
    margin-top: -10px;
}

/* wcea verified table */
.vtable td{
    padding:10px;
}

/* accreditor widget */
#accreditor-list{
    width: 100%;
}
#accreditor-list .form-group.row{
    margin: 10px 0;
}
#accreditor-list div.input-group-btn{
    position: absolute;
    margin-left: 90%;
    margin-top: 0.3%;
    width:10%;
    text-align: right;
}

/* welcome background overlay */
.welcome-background {
    position:relative;
    background-color: #242424;
}
.welcome-background::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    z-index:0;
    opacity:0.5;
    background-image: url("images/neutral_welcome_bg.png");
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
.welcome-background .container {
    position:relative;
}
.btn.welcome-filter-submit{
    margin-left: -80px;
    background-color: #fff;
    border: 1px solid #ced4da;
    z-index: 9999;
}

.specialties .training-specialties {
    display:inline-block;
}
.specialties .training-specialties span {
    display:inline-block;
    padding-right:5px;
}
.specialties .training-specialties span:not(:last-child)::after {
    content:' - ';
}

/* TODO: TIMO: do not apply on portal */
#authorIdentViewer {
    display:none;
}
#google_translate_element {
    position:absolute;
}

/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .6rem .75rem;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    color: #999;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.ElementsApp .InputElement{
    font-size: 0.85rem;
    color: #999;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.StripeElement--invalid~.invalid-feedback{
    display: block;
}
.lock  {
    padding-left:30px;
}

.lock::before{
    position:absolute;
    left: 0px;
    top:6px;
    content: '';
    display: inline-block;
    width: 25px;
    height: 20px;
    background: url('../images/credit_card.png') no-repeat scroll 4px;
    background-size:  20px 20px;
    opacity: 0.5;
}
.lock::after {
    position:absolute;
    right: 0px;
    top: 5px;
    content: '';
    display: inline-block;
    width: 19px;
    height: 20px;
    background: url('../images/lock_icon.png') no-repeat scroll right 3px;
    background-size:  23px 18px;
    opacity: 1;
}

.lock.visa::before {
    background:  url('registration-simple/credit_cards.png') no-repeat scroll 0px 2px;
    background-size:  80px 20px;
    width: 27px;
    height: 50px;
    opacity: 1;
    top:4px;
    left: 5px;
}

.lock.mastercard::before {
    background:  url('registration-simple/credit_cards.png') no-repeat scroll -26px 2px;
    background-size: 80px 20px;
    width: 27px;
    height: 50px;
    opacity: 1;
    left: 5px;
}

.lock.amex::before {
    background:  url('registration-simple/credit_cards.png') no-repeat scroll -53px 2px;
    background-size: 80px 20px;
    width: 29px;
    height: 50px;
    opacity: 1;
}
.bottom-boxes .card-flags{
    background:  url('registration-simple/credit_cards.png') no-repeat;
    height: 22px;
    width: 110px;
}
.bottom-boxes .ssl {
    height:30px;
    background:url('registration-simple/ssl.png') no-repeat right top;
}

/* select app page */
.select-app-logo-container{
    width: 310px;
    height: 240px;
    background: white;
    text-align: center;
    display: inline-block;
    margin: 50px 50px;
    padding: 15px 0;
    border-radius: 5px;
}
.select-app-logo-container img{
    max-width: 300px;
    max-height: 170px;
    margin: auto;
    vertical-align: bottom;
}
.select-app-org-name{
    padding: 10px 20px;
}
.accept-terms-condition-error{
    color: #dc3545;
}

/* integrated player */
#course-player{
    width: 1110px;
    height: 80%;
    z-index: 9999;
    position: absolute;
    top: 10%;
}

@media (max-width: 1199px) {
    #course-player {
        height: calc(100% - 10%);
        top: 5%;
        width: 100%;
        max-width: calc(100% - 20px);
        left: 10px;
    }
}

@media (min-width:360px) and (max-width: 365px) {
    #course-player {
        max-width: calc(100% - 25px);
    }
}

@media (max-width: 359px) {
    #course-player {  
        max-width: 82%;
        width: calc(100% - 70px);
    }
}

#course-player iframe{
    border: none;
    width: 100%;
    height: 100%;
}
#course-player body{
    background: none;
}
#overlayBlocker{
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    top:0;
    left:0;
    visibility: hidden;
    background-color: black;
    opacity: 0.8;
}

/* Api documentation */
h1, h2, h3, h4, h5{
    color: #0080c5;
    font-family: droid_sansregular, Arial,"Helvetica Neue",Helvetica,sans-serif;
}
#api_documentation_container{
    color: #333;
}
#api_documentation_container #example_selector{
    text-align: right;
}

/* Injection Points in article page */
.injected-point .clearfix .inj-logo{
    /*float:left;*/
    margin:10px 10px 5px 0;
    /*border:1px solid #ccc;*/
    /*border-radius:5px;*/
    padding:3px;
    /*width:17%;*/
    text-align:center;
    display:table;
    min-height:120px;
}
/*.injected-point .clearfix .inj-logo p{*/
/*    padding: 20px 0 ;*/
/*}*/
.injected-point .clearfix{
    padding: 0 0 30px 0;
}
.injected-point .clearfix  .inj-logo .inner{
    display:table-cell;
    vertical-align:middle;
}
.injected-point .clearfix  .inj-logo img{
    max-width:100%;
}

.injection-processed-text .bitContent ul{
    margin: 3px 0px 8px 0px;
}
.injection-processed-text .bitContent li{
    text-indent: 0;
}