/* *************************************************************************
****************** EXERCISES **********************************************
************************************************************************* */
#fo #quizContainer { margin: 0px 0 150px 0; float:left; }
#fo .exerciseWrapper {
/*overflow: auto;*/
font-size:14px;
color:#000;
float:left;
padding:0px;
margin:0px;
width: 100%;
}

/* SALVATTORE - la chiamata al js deve essere prima della chiusura del body ==> inclusa in wp_footer */
#fo .exerciseWrapper[data-columns]::before { content: "2 .column.size-1of2"; }
/* These are the classes that are going to be applied: */
#fo .column { float: left; }
#fo .size-1of2 {
width: 50%;
max-width: 650px;
}

#fo .exerciseWrapper .exercise {
background-color: white;
box-shadow: 1px 1px 5px #999;
float: left;
height: auto;
margin: 30px 20px 0px 12px;
min-height: 200px;
min-width: 230px;
padding: 10px;
/*width: 430px;*/
}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {
margin: 0px;
color: #000000;
font-weight: bold;
padding: 2px;
text-align: center;
}
#fo .green #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {background-color: #01ABC5;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise div.questionTitle {background-color: #005BB7;}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile img,
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer img {
border-radius: 10px;
box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8);
}

#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile { text-align: center; }
#fo #ww4_printFilter .exerciseWrapper .exercise div.questionFile img {
width: 80%;
margin-top: 10px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer img { margin-top: 5px; }

#fo .exerciseWrapper .exercise table { padding: 10px; }
#fo .exerciseWrapper .exercise .mbMiniPlayerBig table { padding: 0px; }  /* inline player */
#fo .exerciseWrapper .exercise .mbMiniPlayerBig table img { width: 30px; }  /* inline player */
#fo .exerciseWrapper .exercise table tr.alternateTrue, #fo .exerciseWrapper .exercise table tr.alternateFalse { height: 45px; }
#fo .exerciseWrapper .exercise table tr.alternateTrue { background-color: #ebebeb; }
#fo .exerciseWrapper .exercise table td { vertical-align: top; }
#fo #ww4_printFilter .exerciseWrapper .exercise p { margin-top: 2px; }
#fo .exerciseWrapper .exercise input[type="text"] {
background-color: white;
padding: 4px;
border: 1px solid #CCCCCC;
font-size: 10pt;
/*  questa forzatura inibisce l'allargamento automatico dell'input*/
/*width: 300px !important;*/
/*max-width: 380px;*/
margin-top: 10px;
}

#fo .exerciseWrapper .exercise .ok {
color: #53C21A;
font-weight: bold;
}

#fo .exerciseWrapper .exercise .ko {
color: #C20000;
font-weight: bold;
}

#fo .exerciseWrapper .exercise .background-ok { background-color: #53C21A; }
#fo .exerciseWrapper .exercise .background-ko { background-color: #C20000; }
#fo .exerciseWrapper .exercise td.imageRecognition input { width: 100%; }
/* free sentence completion span soluzione */
#fo .exercise .quiz-sol { text-decoration:underline; display: block;}

/* OPT_SENTENCE_COMPLETION starts */
/* Main content area */
#fo #ww4_printFilter .exerciseWrapper .exercise .generalContainer {
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
}

#fo .exerciseWrapper .exercise img.draggableImage { width: 50%; }
/*#fo .exerciseWrapper .exercise table tr td span:not(.button),*/
/*#fo .exerciseWrapper .exercise table tr td span:not(.buttonSelected) { font-size: 90%; font-style: italic; }*/
#fo .exerciseWrapper .exercise table tr td span:not(.button):not(.buttonSelected) { font-size: 90%; font-style: italic; }

#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer,
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer {
padding: 5px;
/* display: inline-table; */  
display: inline-block;        
vertical-align: bottom;
margin-top: 10px;
}

/* Individual cards and slots */
#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer div,
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div {
border: 2px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 10px 0px;
background: #fff;
width: 115px; /*  todo responsive */
position: relative;
height: 100px;
/*max-height: 100px;*/
/*overflow: auto;*/
text-align: center;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .questionsContainer div p,
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div p ,
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div p {
font-size: 12px;
width: 100%;
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

/* Slots for final card positions */
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
#fo .green #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {background: #01ABC5;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise .droppableContainer {background: #005BB7;}

#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div.hovered { background: #aaa; }
#fo #ww4_printFilter .exerciseWrapper .exercise .droppableContainer div { border-style: dashed; }

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div { background: #666; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer .ui-draggable p {
color: #fff;
text-shadow: 0 0 3px #000;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.ui-draggable{ cursor: pointer; }
#fo .exerciseWrapper .exercise .draggableContainer div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.correct { background: #DAF28C; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.correct p {
color: #000000;
text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.uncorrect { background: #EF8B8B; }
#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.uncorrect p {
color: #FFF;
text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer div.incorrect {
background: #FFD4CC;
color: #000000;
text-shadow: 0 0 0px;
}

#fo #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {font-size: 80%;}
#fo .green #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {color: #01ABC5;}
#fo .blue #ww4_printFilter .exerciseWrapper .exercise .draggableContainer span.help {color: #005BB7;}
/* OPT_SENTENCE_COMPLETION end */

#fo #quizzesList { padding-top: 10px; clear: both;}
#fo #quizzesList h2 { padding-top: 20px; }

/* controlla le innerlabel in mozilla */
*::-moz-placeholder {
color: #000;
font-weight: 300;
}

/* hidden text */
#fo .hiddentext {
width: 100%;
height: 100%;
}

#fo .hiddentext h1 {
padding: 0px 0 20px 0;
text-align: center;
}

#fo .monospace {
font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;
/*font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;*/
margin-left: 30px;
margin-right: 30px;
margin-bottom: 20px !important;
}

#fo .right { float: right; }
#fo .buttonhide {cursor: pointer;border-radius: 10px;padding: 8px;}
#fo .green .buttonhide {border: 1px solid #01ABC5;}
#fo .blue .buttonhide {border: 1px solid #003366;}

/* FIELDS */
#fo .userCell {
width: 45%;
display: table-cell;
padding: 0 30px;
position: relative;
text-align: center;
vertical-align: middle;
}

#fo .left { text-align: left; }

#fo .userMiddleCell {
width: 10%;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#fo .userMiddleCell span {
background-image: url("/applications/webwork/site_retinoblastoma/media/arrowRight.png");
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
height: 24px;
width: 40px;
}

#fo .exerciseWrapper  textarea.userInput {
/*height: 100px !important;*/
min-height: 100px;
border: 1px solid #8E8E8E;
border-radius: 10px;
font-size: 18px;
padding: 10px 12px;
width: 100%;
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
color: #3C3C3C;
display: block;
vertical-align: top;
}

#fo .exerciseWrapper  input.userInput  {
min-height: 25px;
border: 1px solid #8E8E8E;
border-radius: 2px;
font-size: 14px;
width: 100%;
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
color: #3C3C3C;
display: block;
}

#fo .green .exerciseWrapper textarea.userInput:focus, #fo .green input.userInput:focus { border: 2px solid #01ABC5; }
#fo .blue .exerciseWrapper textarea.userInput:focus, #fo .blue input.userInput:focus { border: 2px solid #003366; }

#fo #questionButtons {
margin: 10px;
float: right;
}

#fo .inlineExercise .button {
border: medium none;
border-radius: 10px;
color: #FFF;
cursor: pointer;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
padding: 3px;
float: right;
margin: 7px 5px;
}
#fo .green .inlineExercise .button {background: none repeat scroll 0 0 #01ABC5;}
#fo .blue .inlineExercise .button {background: none repeat scroll 0 0 #003366;}

/* MULTIPLE CHOICE start */
#fo .multichoiceContainer { width: 100%; }
/*#fo .singlechoiceContainer { font-size: 80%; }*/

#fo .singlechoiceContainer {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 95%;
padding: 5px 0 5px 0;
border: 1px dotted #AAA;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#fo .singlechoiceContainer .multiquestion {
width: 50%;
vertical-align: top;
padding: 0 5px 0 10px;
display: inline-block;
}

#fo .singlechoiceContainer .multianswer {
width: 40%;
padding-right: 10px;
display: inline-block;
}

#fo .singlechoiceContainer .multianswer .singleanswer div {
text-align: right;
right: 0px;
}

#fo .singleanswer { font-style: italic; }
/* MULTIPLE CHOICE end */

/****************** TINY IMAGES **********************************************/
#fo .floatRight {
float: right;
margin:0px 0px 0px 10px;
width: 200px;
max-width: 200px;
}
#fo .floatLeft {
float: left;
margin:0px 10px 0px 0px;
width: 200px;
max-width: 200px;
}
#fo .centered {
float: none;
display: block;
margin:10px auto;
width: 460px;
max-width: 460px;
}
/****************** DIVAS COOKIES **********************************************/
/*main container*/
#fo .divascookies {  padding: 2px;}
#fo .green .divascookies {background: #01ABC5 none repeat scroll 0 0;}
#fo .blue .divascookies {background: #003366 none repeat scroll 0 0;}
/*banner container*/
#fo .divascookies > .divascookies-banner-container { padding: 0px; }
/*banner text*/
#fo .divascookies p.divascookies-banner-text { font-size: 12px; }
/*link to the extended policy page*/
#fo span.divascookies-policy-link a {font-weight: bold;}
#fo .green span.divascookies-policy-link a {color: #01ABC5;}
#fo .blue span.divascookies-policy-link a {color: #005BB7;}
/*container of the accept button*/
#fo .divascookies-banner-container > .divascookies-accept-button-container {  }
/*container of the accept button img*/
#fo .divascookies-accept-button-container > .divascookies-accept-button-img { }
/*accept button text*/
#fo .divascookies-accept-button-container > .divascookies-accept-button-text {
padding: 5px 7px;
font-size: 12px;
}

  /* BUTTONS */
#fo .button, #fo .buttonSelected, #fo .button:hover, #fo .buttonSelected:hover {
  padding:4px 7px;
  margin-left: 10px;
  text-decoration:none;
  border-radius:5px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
#fo .button,#fo .button a, #fo .buttonSelected:hover {
  border: 1px solid #FFF;
  color: #000;
  text-shadow:none;
}
#fo .green .buttonSelected:hover {color:#FFF;}
#fo .green .button,#fo .green .button a, #fo .green .buttonSelected:hover {background-color: #01ABC5;}
#fo .blue .button,#fo .blue .button a, #fo .blue .buttonSelected:hover {background-color: #003366;}
#fo .buttonSelected, #fo .button:hover {background:none #FFF;text-shadow:none;}
#fo .green .buttonSelected, #fo .green .button:hover {border:1px solid #01ABC5;color: #01ABC5;}
#fo .blue .buttonSelected, #fo .blue .button:hover {border:1px solid #003366;color: #003366;}
@media (max-width: 1024px) {
  #fo #quizzesList { clear: both; }
  /*#fo .exerciseWrapper .exercise { width: 100%; } *//* TODO fare meglio */

  /* exercises */
  /*#fo .exerciseWrapper .exercise { max-width: 300px; }*/


  /* exercises */

  /* SALVATTORE - la chiamata al js deve essere prima della chiusura del body ==> inclusa in wp_footer */
  #fo .exerciseWrapper[data-columns]::before { content: "1 .column.size-1of1"; }

}