.terms-container {
    font-size: 11px;
    background: #ffffff;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 10px 15px;
}

body.typing {
    background: #badbdd;
}

.w-100 {
    width: 100%;
}

#type-key {
    background: url('../images/new/key-bg.png') no-repeat top center;
    background-size: cover;
    height: 768px;
    width: 960px;
    padding-top: 100px;
    margin: 20px auto;

    position: relative;
}

#line-count, #wpm-container, #accuracy-container {
    font-size: 18px;
    color: #756f9c;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: #3bbcbb !important;
    border: 1px solid #3bbcbb;
}

#line-count { width: 235px; }
#back-button { width: 40px; float:left; margin-top: 3px; }
#back-button:hover { cursor: pointer; }
#wpm-container { width: 175px; }
#accuracy-container { width: 210px; }

.line-input, .wpm-input {
    width: 65px;
    height: 40px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    padding: 5px;
    color: #71719b;
    background: #c7dcdc;
    border: 2px solid #afb4b6;
    border-radius: 10px;
}

.accuracy-input {
    width: 65px;
    height: 40px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    padding: 5px;
    color: #71719b;
    background: #c7dcdc;
    border: 2px solid #afb4b6;
    border-radius: 10px;
}

.type-lower {
    width: 960px;
    margin: 0 auto;
}

.home-container {
    padding-top: 30px;
}

.blue-select {
    background: #c7dcdc;
    border: 2px solid #8c9ea0;
    height: 40px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.home-container .content-select {
    background: url('../images/new/select.png') no-repeat top center;
    background-size: cover;
    border: none;
    height: 40px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.home-container .content-select:disabled {
    color: #ababab;
}

.option-container {
    background: url('../images/new/home-panel.png') no-repeat top center;
    background-size: cover;
    width: 255px;
    height: 358px;
    padding: 30px;
    font-size: 17px;
}

.option-container label {
    font-size: 15px;
}

.option-container .radio {
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo-lower {
    padding-top: 40px;
}

.logo-lower .small-button {
    width: 101px;
    height: 35px;
    padding: 1px 12px;
}

.logo-lower #previous-lesson-navigation {
    width: 150px;
    padding-left: 0;
    padding-right: 0;
}

.logo-lower #lower-logo {
    width: 340px;
}

.logo-lower #lower-logo img {
    max-width: 100%;
}

.logo-lower #home-navigation {
    width: 150px;
    padding-left: 0;
    padding-right: 0;
}

.option-container .form-group { margin-bottom: 20px; }

.module-selector { font-size: 17px; }
.module-selector .form-group { margin-bottom: 30px; }

#type {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word;
}

html, body {
    font-family: Verdana, Arial, sans-serif;
    min-height: 100%;
}

textarea {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
}

textarea[readonly] {
    background: #fffcbc !important;
    resize: none;
}

.small-button {
    background: url('../images/new/small-button.png');
    background-size: cover;
    color: #ffffff;
    width: 129px;
    height: 43px;
}

a.small-button {
    /*padding-top: 9px;*/
    line-height: 28px;
}

.start-button {
    background: url('../images/new/start-button.png');
    background-size: cover;
    color: #ffffff;
    width: 168px;
    height: 60px;
    font-size: 21px;
}

.start-button:hover, .small-button:hover {
    color: #ffffff;
}

/*#type-key .btn-primary, #type-key .btn-primary:active, #type-key .btn-primary:focus, #type-key .btn-primary:focus-within #type-key .btn-primary:visited, #type-key .btn-primary:hover {
	background-color: #bfd6d7 !important;
	color:#436972 !important;
	font-weight: bold !important;
	border-color: transparent !important;

	box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.2),
        inset 0 0 3px 0 rgba(0,0,0,.2),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        -2px 2px 6px 0 rgba(0,0,0,.55) !important;
}*/

.input-area {
    background: #fffcbc !important;
    min-height: 180px !important;
    margin-bottom: 10px;
    border-radius: 20px;
    border: 1px solid #929292;
    padding: 10px 20px;
    font-size: 1.6em;
    font-family: Arial, sans-serif;
}

.input-area:active, .input-area:focus {
    border: 1px solid #929292;
    box-shadow: none;
}

.alert {
    padding: 5px 15px;
    margin-bottom: 15px;
}

#line-selector {
    margin-bottom: 0px !important;
}

span.error {
    color: #ff0000;
}

span.error.space {
    border-bottom: 1px solid #ff0000;
}

.input-value {
    background: #f4fcfd;
    color: #929292;
    border: 1px solid #929292;
    font-size: 18px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.unit-name {
    height: 40px;
    padding: 5px;
    color: #71719b;
    background: #c7dcdc;
    border: 2px solid #afb4b6;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-60 { margin-top: 60px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }

.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }

.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }

#show {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}

.logo { max-width: 500px; }

#unit-completed { height: 380px; }
#unit-completed .alert {
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
}

/*.typing-container {
    background: url('../images/new/typing-bg.png') no-repeat top center;
    background-size: cover;
}*/

.accuracy-alerts { min-height: 60px; }
#accuracy-warning { margin-bottom: 10px; margin-top: 15px; }

#accuracy-warning.alert-warning {
    color: #71719b;
    font-size: 14px;
}

.top-right-fixed-button {
    position: absolute;
    right: 10px;
    top: 10px;
}

.line-selector-button {
    background-size: cover;
    width: 15px;
    height: 20px;
    border: none;
    float: left;
    margin-top: -1px;
}

#previous-line {
    background: url('../images/new/left-arrow.png');
}

#next-line {
    background: url('../images/new/right-arrow.png');
}

#line-selector {
    float: left;
    width: 598px;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 0 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    cursor: pointer;
    box-shadow: none;
    background: #d2e1e2;
    border-radius: 0;
    border: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -2px;
    width: 14px;
    height: 22px;
    background: url('../images/new/slide-bar-controller.png') no-repeat top center;
    background-size: cover;
    border: none;
    cursor: pointer;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 20px;
    cursor: pointer;
    box-shadow: none;
    background: #d2e1e2;
    border-radius: 0;
    border: none;
}
input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 22px;
    background: url('../images/new/slide-bar-controller.png') no-repeat top center;
    background-size: cover;
    border: none;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 20px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #dcf5f8;
    border: 0px solid #010101;
    border-radius: 0px;
    box-shadow: 1px 1px 1px #888888, 0px 0px 1px #959595;
}
input[type=range]::-ms-fill-upper {
    background: #f1fbfc;
    border: 0px solid #010101;
    border-radius: 0px;
    box-shadow: 1px 1px 1px #888888, 0px 0px 1px #959595;
}
input[type=range]::-ms-thumb {
    box-shadow: 0.8px 0.8px 1.9px rgba(172, 168, 153, 0.67), 0px 0px 0.8px rgba(183, 180, 167, 0.67);
    border: 1.9px solid rgba(255, 255, 255, 0.57);
    width: 100px;
    border-radius: 4px;
    background: #ece9d8;
    cursor: pointer;
    height: 20px;
}
input[type=range]:focus::-ms-fill-lower {
    background: #f1fbfc;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}