.page-help {
    display: none;
}

.question {
    margin: 20px 0px;
}

.breadcrumb {
    padding: 18px 0px 0px;
    float: right;

    background: none;
    margin-right: 20px;
}

.control-label input {
    margin-right: 5px;
}

.control-label {
    cursor: pointer;
}

.thumb_container_problem {
    margin: 10px 0px;
}

.practice-container {
    padding: 0px;
    box-shadow: 0px 0px 2px 1px #bebebe;
    padding-bottom: 100px;
    margin-bottom: 20px !important;
    padding-top: 20px;
}
.alert {
    border-radius: 0px !important;
}
#container-main {
    /*padding-top: 25px;*/
    padding-bottom: 25px;
    padding-left: 20px;
}

nav img {
    height: 40px;
    margin-top: 5px;
    margin-left: -20px;
}

.page-problem {
    display: none;
}

.cp {
    cursor: pointer;
}

.green {
    /*color: #0cff3f;*/
}

.voice-icon {
    max-height: 25px;
    margin-right: 10px
}

#particles {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media screen and (min-width: 1600px) {
    body {
        /*background: url("/images/backgrounds/lines.png") center;*/
        /*background-size: cover;*/
        background-repeat: repeat;
        background-attachment: fixed;
        -webkit-font-smoothing: antialiased;
    }
}
@media screen and (max-width: 1600px) {
    body {
        /*background: url("/images/backgrounds/lines.png") center;*/
        /*background-size: cover;*/
        background-repeat: repeat;
        background-attachment: fixed;
        -webkit-font-smoothing: antialiased;
    }
}


.practice-container {
    background-color: rgb(252,252,252);
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    top: 10px;
    margin: 0 auto;
    min-height: 500px;

}

.navbar {
    position: absolute;
    margin: 0 auto;
    top: 0;
    width: 100%;
    /*z-index: 1000;*/
    border-bottom: 1px #666 solid;
}

@media (max-width: 767px) {
    .star-block {
        text-align: center;
        margin-bottom: 25px;
    }
}

.mt20px, .character_row {
    margin-top: 20px;
}

#review_answer {
    /* margin-left: 15px;*/
}

.page-problem .counter {
    cursor: pointer;
}

.charac_thumb:hover {
    box-shadow: 0px 0px 14px #79809a;
}

#counter-container, #review-counter-container {
    margin-top: 20px;
}


.objects {
    padding-top: 20px;
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

.bold {
    font-weight: bolder !important;
}

h2, .red {
    color: tomato;
}

iframe {
    box-shadow: 1px 1px 10px #7c8074;
    border: 1px solid;
}

.clearit {
    content: "";
    clear: both !important;
    display: table;
}

.ml40px {
    margin-left: 40px;
}
.ml30px {
    margin-left: 30px;
}

.ml20px {
    margin-left: 20px;
}

.ml15px {
    margin-left: 15px;
}

.ml10px {
    margin-left: 10px;
}

.mtb20px {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mtb30px {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.tar {
    text-align: right !important;
}
.m-all-30 {
    margin:30px !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.single-ip {
    margin-left:20px;
    width:60px;
    height: 50px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.lgf {
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    position: relative;
    top: 5px;
    margin: 0px 10px;
}

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 50px 0px hsl(116, 100%, 35%);
        border:2px solid green;
    }

    100% {
        box-shadow: 0px 0px 5px 0px #717171;
        border: 2px #979797 double;
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes shadowRedPulse {
    0% {
        box-shadow: 0px 0px 50px 10px red;
    }

    100% {
        box-shadow: 0px 0px 5px 0px #717171;
    }
}

.shadow-red-pulse {
    animation-name: shadowRedPulse;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}


/* Legacy success modal is hidden — replaced by the floating success chip below.
   We still leave the markup in main.php so external integrations don't break. */
#modalSuccess { display: none !important; }

/* Floating success chip — non-blocking, sits above the question area */
.success-chip {
    position: fixed;
    top: 20px;
    left: 50%;
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 1.15em;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
    transform: translateX(-50%) translateY(-30px) scale(0.85);
}
.success-chip .chip-tick { display: inline-block; margin-right: 8px; font-weight: 900; }
.success-chip .chip-star { margin-left: 10px; opacity: 0.95; }
.success-chip-show { animation: chipPop 1.4s ease-out forwards; }
@keyframes chipPop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.85); }
    18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
    32%  { transform: translateX(-50%) translateY(0) scale(1); }
    82%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.96); }
}

/* Newly-earned star pulse */
.star-block .glyphicon.star-just-earned {
    animation: starPulse 0.85s ease-out;
    transform-origin: center center;
    display: inline-block;
}
@keyframes starPulse {
    0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,213,79,0)); }
    35%  { transform: scale(1.55); filter: drop-shadow(0 0 14px rgba(255,235,59,0.95)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,213,79,0)); }
}
#practice-session-student {
    display: none !important;
}
.loadmask-msg {
    top: 436px;

    left: 40%;

    z-index: 900000;

    position: absolute;

    background: antiquewhite;

    padding: 10px;
}
.page-problem .line {
    cursor: pointer;
}
.slback {
    padding: 10px;
    background: #dedede;
    border: 1px double #b3b3b3;

}
.slback-nb {
    padding: 10px;
    background: #ececec;

}
.highlighted-bg,.hbg {
    background: #e1bee7;
    border: 2px double #E7B4D3;
    padding: 10px;
    font-size: 30px;
    text-align: center;
    width: 400px;
    margin:20px 0px
}
.big-sign {
    font-size: 60px;
    font-weight: bold;
    position: relative;
    top: 15px;
}

.panel-purple  {

    border:1px solid  #694D9F !important;
}
.panel-purple > .panel-heading {
    color: #fff;
    background-color: #694D9F;
}
.panel-info-alt   {

    border:1px solid  #2278e4 !important;
}
.panel-info-alt > .panel-heading {
    color: #fff;
    background-color: #1d9be4;
}
.panel-danger-alt  {

    border:1px solid  #B63E5A !important;
}
.panel-danger-alt > .panel-heading {
    color: #fff;
    background-color: #E26868;
}
.panel-warning-alt {

    border:1px solid  #f3b265 !important;
}
.panel-warning-alt > .panel-heading {
    color: #fff;
    background-color: #e9a453;
}
.panel-success-alt {

    border:1px solid  #19B99A !important;
}
.panel-success-alt > .panel-heading {
    color: #fff;
    background-color: #20A286;
}

.alert-purple { border-color: #694D9F;background: #694D9F;color: #fff; }
.alert-info-alt { border-color: #B4E1E4;background: #81c7e1;color: #fff; }
.alert-danger-alt { border-color: #B63E5A;background: #E26868;color: #fff; }
.alert-warning-alt { border-color: #F3F3EB;background: #E9CEAC;color: #202020; }
.alert-success-alt { border-color: #19B99A;background: #20A286;color: #fff; }

.pow {
    width: 30px;
    position: relative;
    top: -20px;
    padding: 2px;
    height: 28px;
    font-size: 18px;
}

.box-sm {
    width:50px
}
.box-md {
    width:110px
}
.blank {
    background: #d3d1c4;
    border:1px solid #fffbea;
}
.glyphicon-star {
    text-shadow: 1px 2px 3px #000
}