body{
position: absolute;
width: 100%
}
html {
background-color: #fafafa;
}
#body {
position: absolute;
top: 60px;
width: 100%;
height: calc(100% - 60px);
background-color: #fafafa;
}
.body_container{
position: absolute;
top: 0;
left:0;
width: 100%;
}
.title{
font-size: 25px;
display: inline;
color: #34495e;
}
.beta-label {
font-style: italic;
margin: 0;
}
#lessonNameTitle{
margin-left: 1%;
font-size: 20px;
}
.titleContainer{
width: 40%;
display: inline-block;
}
.viewPrintableContainer{
display: inline-block;
width: 60%;
text-align: right;
}
.logout-link {
color: #B92C26;
}
.logout-link:hover, .logout-link:active {
color: #ec7063;;
}
#show-side-nav-link {
display: inline-block;
width: 40px;
padding: 5px 0;
cursor: pointer;
}
#show-side-nav-link:hover {
color: #3498db;
}
.sentence_input_container{
min-height: 20px;
padding: 10px 0;
width: 100%;
}
.body_container.freeplay .sentence_input_container{
margin-bottom: 24px;
}
.input_append, .sentence_container{
display: block;
margin: 0 1%;
}
.viewPrintableContainer .help-videos {
padding: 0 10px;
margin-right: 10px;
}
.form-control.add_sentence_input{
width : 84%;
display:inline-block;
font-size: 18px;
margin-top: 2px;
margin-right: 1%;
}
.add_sentence_button{
display: inline;
height: 40px;
width: 15%;
}
.sentence_container{
position: relative;
display: block;
width: 94%;
max-height: 85px;
overflow: auto;
}
.word, .word-identification{
display: inline-block;
font-size: 25px;
cursor: pointer;
z-index: 50;
color:#34485D;
margin: 4px 8px 4px 0;
}
.word:hover, .word-identification:hover, .word-identification.selected{
color:#2694E7;
}
.word.ui-draggable-disabled {
color: #ddd;
cursor: not-allowed;
}
.optionalWord{
font-size: 20px;
}
.clear_button, .edit_button{
position: relative;
display: inline-block;
cursor: pointer;
top: -2px;
color: gray;
font-size: 18px;
opacity:50%;
margin-left: 10px;
}
.edit_button {
top: -3px;
font-size: 16px;
}
.clear_button:hover, .edit_button:hover{
opacity:100%;
color: #2694E7;
}
.content_container{
display: block;
margin: 0 1%;
}
.left_container{
position:relative;
display: inline-block;
width: 340px;
}
.o_sentence_input{
display: inline;
font-size: 20px;
width: 65%;
height: 43px;
margin-right: 5%;
}
.o_sentence_button{
display: inline;
font-size: 16px;
height: 40px;
width: 30%;
margin-top: -2px;
}
.o_input_append{
display: block;
}
.dipper_container{
width: 65px;
height: 65px;
border-radius: 7px;
background: white;
display:inline-block;
text-align: center;
cursor: pointer;
margin: 0px 20px 15px 0;
-webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.6);
}
.dipper_container.not-draggable {
cursor: no-drop;
}
.right_container{
position:relative;
display: inline-block;
vertical-align: top;
}
.p_container{
width: 100%;
background-color: #E8E8E8;
border-style: solid;
border-width: 1px;
border-radius: 7px;
}
#sentenceUtilitiesContainer {
width: calc(100% - 20px);
}
#sentenceUtility, .utility, #download-diagram-button{
width: 100%;
font-size: 16px;
height: 40px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
margin-bottom: 16px;
}
.dropAvailable{
border-color : rgba(183, 245, 233, 0.4);
}
.p_container.dropAvailable{
box-shadow: 0px 1px 10px rgba(183, 245, 233, 0.4);
}
.dipper.dropAvailable {
background:rgba(183, 245, 233, 0.2);
}
.dropUnavailable {
border-color : #e74c3c;
background: rgba(231, 76, 60, 0.2);
}
.dipper.dropOver{
box-shadow: 0px 1px 20px #1abc9c;
border-color : rgba(183, 245, 233, 1);
background: rgba(183, 245, 233, 1);
}
.p_container.dropOver {
box-shadow: 0px 1px 20px #1abc9c;
}
.hoverOver{
opacity : .4
}
#controllerContainer{
display: block;
width: 100%;
font-size: 20px;
padding: 0 1% 15px;
}
#controllerView{
display: inline;
}
#controllerView div, span
{
display: inline;
}
#controllerView span{
cursor: pointer;
}
#controllerView p {
display: inline-block;
font-weight: bold;
font-size: 20px;
}
#controllerView span:hover{
cursor: pointer;
color: #2594E7;
}
#controllerView .decrement, #controllerView .increment {
padding: 8px;
}
#controllerView div{
font-weight: bold;
margin: 0;
}
#controllerView #sentenceCount{
cursor: default;
}
#controllerView .skip-sentence-container {
display: block;
font-size: 18px;
font-style: italic;
color: #e74c3c;
}
#viewExercise{
display: none;
}
#viewAnswer{
display: none;
}
#exerciseFunctionsView{
position: absolute;
bottom: 7%;
font-size: 16px;
text-align: center;
width: 100%;
}
.changeExercise{
display: block;
margin-top: 8px;
margin-left: auto;
margin-right: auto;
padding:2px 10px;
width: 80%;
}
.selectedWord, .selectingWord{
color: #2694E7;
}
.wordGroup{
display: inline;
}
#legend{
margin-bottom: 0;
padding: 10px 1%;
}
#topContainer{
padding-top: 1%;
}
#impliedTextContainer .inputContainer {
margin-bottom:0;
}
#impliedTextContainer input {
margin: auto;
margin-top: 20px;
text-align: center;
width: 30%;
}
#impliedTextContainer #saveSplitWords, #impliedTextContainer a {
width: 20%;
margin: 0;
}
.ui-selectable-helper {
z-index: 9999999;
}
textarea::selection {
background: #B3D7FE;
}
select.form-select {
border: 2px solid #bdc3c7;
color: #34495e;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
padding: 8px 12px;
height: 41px;
border-radius: 6px;
min-width: 250px;
}
section.ui-switch {
display: flex;
align-items: center;
}
.ui-switch input {
display: none;
opacity: 0;
}
.ui-switch label {
width: 40px;
height: 20px;
cursor: pointer;
display: inline-block;
position: relative;
background: rgb(189, 189, 189);
border-radius: 30px;
margin: 0;
transition: background-color 0.4s;
-moz-transition: background-color 0.4s;
-webkit-transition: background-color 0.4s;
}
.ui-switch label:after {
left: 0;
width: 10px;
height: 10px;
margin: 5px;
content: '';
position: absolute;
background: #FFF;
border-radius: 10px;
}
.ui-switch input:checked + label {
background: #16a085;
}
.ui-switch input:checked + label:after {
left: auto;
right: 0;
}
.ui-switch p {
font-size: 14px;
color: rgb(189, 189, 189);
display: none;
line-height: 14px;
margin: 0;
margin-left: 8px;
}
.ui-switch input:checked ~ p:nth-of-type(1) {
color: #16a085;
display: block;
}
.ui-switch input:not(:checked) ~ p:nth-of-type(2) {
display: block;
}
@media (max-width: 1300px)
{
#sentenceUtilitiesContainer {
width: 100%;
}
}
select {
border: 2px solid #bdc3c7;
color: #34495e;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 15px;
padding: 8px 12px;
height: 41px;
border-radius: 6px;
min-width: 120px;
}