@font-face {
    font-family: PromptRegular;
    src: url("../fonts/Prompt-Regular.ttf") format("truetype");
}
@font-face {
    font-family: PromptLight;
    src: url("../fonts/Prompt-Light.ttf") format("truetype");
}
@font-face {
    font-family: Montserrat-Regular;
    src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
}

body {
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.nav-item {
    padding-right: 1.5em;
}
.navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
    color: rgba(242,141,44, 1.0);
}
.navbar-nav {
    font-size: 1.1em;
}
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.beair_content {
    /* background-image: url("images/"); */
}

legend {
    font-size: 1.3rem;
}

h1, .h1 {
    font-size: 2rem;
}

.badge-secondary {
    color: #fff;
    background-color: #878787;
}
.badge-warning {
    color: #fff;
    background-color: #ea530a;
}

.progressive-image {
    /*
    // login
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url(../images/2.jpg) no-repeat center center;
    min-height: 800px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 4em;
    */

    position:relative;
    overflow: hidden;
    min-height: 800px;
    background-size: cover;

    background-color: #10438c;
}

.progressive-image div {
    background-size: cover!important;
    background-position: center center!important;
}
.progressive-image .loadingImage {
    filter: blur(13px);
    transform: scale(1.1);
    transition: background 0.5s ease-in;
}
.progressive-image .overlay {
    position: absolute;
    top: 0;
    /*transition: opacity 200ms ease-in;*/
    transition: background 0.5s ease-in;
    min-height: 800px;
    padding-top: 2em;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.overlay {
    width: 100%;
}


/* light backgrounds */
.login-background-sm {
    background: url(../images/7_small.jpg) no-repeat center center;
    min-height: 800px;
}
.register-background-sm {
    background: url(../images/2_small.jpg) no-repeat center center;
    min-height: 800px;
}
.game-background-sm {
    background: url(../images/4_small.jpg) no-repeat center center;
    min-height: 800px;
}
.modules-background-sm {
    background: url(../images/6_small.jpg) no-repeat center center;
    min-height: 800px;
}




.login_background {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url(../images/7.jpg) no-repeat center center;
    /* background-color: #022c64; */
    min-height: 800px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 4em;

}
.register_background {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url(../images/7.jpg) no-repeat center center;
    /* background-color: #022c64; */
    min-height: 800px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 4em;

}

.game_background {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url(../images/4.jpg) no-repeat center center;
    background-color: #022c64;
    min-height: 800px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 2em;
}
.modules_background {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(255,255,255,1) 100%),url(../images/6.jpg) no-repeat center center;
    background-color: #022c64;
    min-height: 800px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    padding-top: 2em;
}


.card-body-modules {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.8rem;
}

.card-body {

}

.beair_score_title {
    border-bottom: 5px solid rgba(242,141,44, 1.0);
}
.beair_card {
    border-radius: 10px;
    margin-left: 15px;
    border:none;
    /* background-color: #00000069;*/
    background: #2e4c73;
    background: linear-gradient(#051c2b91,#0000);
    color: #FFF;
}
.beair_card_flat {

    /* font-family: "PromptLight"; */
    border-radius: 20px;
    border:none;
    /* background-color: #00000069;*/

    background: #36465a;
    background: rgba(42, 55, 74, 0.69);
    color: #FFF;

    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2),0 10px 30px 0 rgba(0,0,0,0.19) !important;
}

.breadcumb_card_flat {
    /* border-radius: 10px; */
    margin-left: 15px;
    border:none;
    /* background-color: #00000069;*/
    background: #2e4c73;
    background: #051c2b91;
    color: #FFF;
}

.ba-flat-list {
    background: #2e4c73;
    background: #213a4a7d;
    color: #FFF;
}

.btn {
    border-radius: 10px;
}

.modulelink { text-decoration: none; }
.module_element {
    display: inline-table;
    width: 131px;
    height: 126px;
    padding-top: 8px;
    padding-right: 2px;
    padding-left: 2px;
    margin: 7px;
    text-align: center;
    color: #FFF;
    background: #2e4c73;
    background: #051c2b59;
    border-radius: 10px 10px 10px 10px;
    border: none;
}
.module_element_disabled {
  display: inline-table;
  width: 131px;
  height: 126px;
  padding-top: 8px;
  padding-right: 2px;
  padding-left: 2px;
  margin: 7px;
  text-align: center;
  background: #2e4c73;
  background: #051c2b59;
  border-radius: 10px 10px 10px 10px;
  border: none;
  color: grey;
  opacity: 90%;
}
.module_element:hover {
    background-color: rgb(73, 135, 187);
    font-style: normal;
}
.module_element_selected {
    /*  background-color: rgba(242,141,44, 1.0); */
    background-color: rgba(125, 162, 214, 0.55);
    font-style: normal;
}

.chapter_element {
    display: inline-table;
    width: 131px;
    height: 60px;
    padding-top: 7px;
    padding-right: 2px;
    padding-left: 2px;
    margin: 7px;
    text-align: center;
    color: #FFF;
    background: #2e4c73;
    background: #051c2b59;
    border-radius: 10px 10px 10px 10px;
    border: none;
}
.chapter_element:hover {
    background-color: rgb(73, 135, 187);
    font-style: normal;
}
.chapter_description {
    font-style: normal;
    font-weight: 100;
    font-size: 0.9em;
    padding: 8px;
}

.chapter_description_difficulty {
  font-style: normal;
  font-size: 0.8em;
}

.module_name {
    font-size: 0.8em;
}
.module_description {
    font-style: normal;
    font-weight: 100;
    font-size: 0.65em;
}


.navbar {
}

.custom_qcm_choices {
    min-height: 2.5rem;
    font-size: 1.2em;
}

.form-control {
    border-radius: 10px 10px 10px 10px;
    border: none;
    transition: box-shadow 0.3s, border 0.3s;
    text-align: left;

    background: #2e4c73;
    background: linear-gradient(to bottom, rgba(180,190,210,0.4), rgba(180,190,210,0.5), rgba(180,190,210,0.5), rgba(180,190,210,0.4));
    /*font-weight: bold;*/
    color: #fff;
    font-family: PromptLight, sans-serif;
}

.connection_inputs
{
    border-radius: 10px 10px 10px 10px;
    border: none;
    transition: box-shadow 0.3s, border 0.3s;
    text-align: left;

    background: #2e4c73;
    background: linear-gradient(to bottom, rgba(180,190,210,0.4), rgba(180,190,210,0.5), rgba(180,190,210,0.5), rgba(180,190,210,0.4));
    /*font-weight: bold;*/
    color: #fff;
    font-family: PromptLight, sans-serif;
}


.beair_images
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}


label {
    color: #eeeeee;
}

::-webkit-input-placeholder {
    color: #eeeeee !important;
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

::-moz-placeholder {
    color: #eeeeee !important;
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

::-ms-placeholder {
    color: #eeeeee !important;
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

::placeholder {
    color: #eeeeee !important;
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

input {
    font-family: PromptRegular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
    color: rgba(242,141,44, 1.0);
}

.form-control:focus {
    color: #fff;
    /* font-weight: 400; */
    background-color: #003772;
    /* border-color: #7ba1d8; */
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.51);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.51);
}

.btn-primary {
    background-color: rgba(242,141,44, 1.0);
    border-color: rgba(242,141,44, 1.0);
}
.btn-primary:hover {
    color: #fff;
    background-color: #ce4414;
    border-color: #c34113;
}
.btn-secondary {
    color: #fff;
    background-color: #7ba1d8;
    border-color: #7ba1d8;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #9c948a;
    border-color: #978e83;
}

.good_answers {
    font-size: 0.8em;

}
.text-circle {
    font-size: 3em;
    font-family: Montserrat-Regular;
}
.level-text {
    color: #FFF;
    font-size: 0.7em;
    font-family: Montserrat-Regular;
    margin-top: -7px;
}

.game_title_chapter {
    border-bottom: 5px solid rgba(242,141,44, 1.0);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: rgba(242,141,44, 1.0);
    /* border-radius: 10px 10px 10px 10px; */
}

/* Game */
.circle {
    width: 100px;
    height: 100px;
    border: 6px solid;
    border-radius: 50%;
    margin: 30px;
    color: rgba(242,141,44, 1.0);
    text-align: center;
}

.nav-tabs {
    border-bottom: 2px solid rgba(242,141,44, 1.0);
}

.nav-tabs .nav-link.active {
    border-color: transparent;
    color: #ffffff;
    background: #2e4c73;
    background: rgba(242, 141, 44, 0.9);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: rgba(242, 141, 44, 0.9);
}

fieldset {
    font-family: PromptLight, "Helvetica Neue", Helvetica, serif;
}



@media (max-width: 992px) {
    .container {
        width: 100%;
        max-width: none;
    }
}

.ba-progress-img {
    max-width: 150px;
}

@media (max-width: 992px) {
    .ba-progress-img {
        max-width: 110px;
    }

}

.progress-bar {
    background-color: #f18d2d;
}















/* PROGRESS CIRCLE */

.progress-circle {
    font-size: 20px;
    margin: 20px;
    position: relative; /* so that children can be absolutely positioned */
    padding: 0;
    width: 5em;
    height: 5em;


    background-color: #0f31635c;
    border-radius: 50%;
    line-height: 5em;
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;

    content: " ";
}
/* Text inside the control */
.progress-circle span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #f18d2d;
    z-index: 2;
    font-family: Montserrat-Regular;
    font-size: 1em;

}
.left-half-clipper {
    /* a round circle */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    position: absolute; /* needed for clipping */
    clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
}
.value-bar {
    /*This is an overlayed square, that is made round with the border radius,
    then it is cut to display only the left half, then rotated clockwise
    to escape the outer clipping path.*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 2.5em, 5em, 0);
    width: 5em;
    height: 5em;
    border-radius: 50%;
    border: 6px solid #f18d2d; /*The border is 0.35 but making it larger removes visual artifacts */
    /*background-color: #4D642D;*/ /* for debug */
    box-sizing: border-box;

}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
    /*Progress bar for the first 50%, filling the whole right half*/
    position: absolute; /*needed for clipping*/
    clip: rect(0, 5em, 5em, 2.5em);
    border: 6px solid #f18d2d;
    border-radius: 50%;
    width: 5em;
    height: 5em;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }


/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }


.goodAnswerLabel {
  color: #5ec751 !important;
}
.badAnswerLabel {
  color: #f55454 !important;
}