/****************** FONTS ******************/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-latin-300.woff') format('woff'),
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-latin-300italic.woff') format('woff'), 
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-latin-regular.woff') format('woff'), 
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-latin-italic.woff') format('woff'), 
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-latin-500.woff') format('woff'), 
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('../fonts/roboto-latin-500italic.woff') format('woff'), 

}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-latin-700.woff') format('woff'), 

}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('../fonts/roboto-latin-700italic.woff') format('woff'), 
}


/* cousine-regular - latin-ext_latin */
@font-face {
  font-family: 'MonospaceFont';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/cousine-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* cousine-italic - latin-ext_latin */
@font-face {
  font-family: 'MonospaceFont';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/cousine-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* cousine-700 - latin-ext_latin */
@font-face {
  font-family: 'MonospaceFont';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/cousine-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* cousine-700italic - latin-ext_latin */
@font-face {
  font-family: 'MonospaceFont';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('../fonts/cousine-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/***************** FONT ICON *****************/
@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialdesignicons-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.fontIcon {
	font-family: 'Material Design Icons';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 150%;
}


/***************** TEXT *****************/
body {
	margin: 0px; 
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 12pt;
    max-width: 100%;
    overflow-x: hidden;
}

h1 {
	font-size: 210%;
	font-weight: 600;
	padding-top: 40px;
    margin-top: 20px;
    margin-bottom: 15px;
}

h2 {
	font-size: 170%;
	font-weight: 700;
	padding-top: 35px;
    margin-top: 20px;
    margin-bottom: 15px;
}
  
h3 {
	font-size: 140%;
	font-weight: 600;
	padding-top: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
}

h4 {
	font-size: 120%;
	font-weight: 600;
	padding-top: 25px;
    margin-top: 15px;
    margin-bottom: 10px;
}

h5 {
    font-size: 100%;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #e1e4ea;
    display: table;
}

h6 {
    font-size: 100%;
    font-weight: 600;
    padding-top: 25px;
    margin-top: 0;
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 120%;
}

p, dd {
	text-align: justify;
}

li {
	margin-bottom: 4px;
}

p, li, dd {
	line-height: 130%;
}

dt {
	font-weight: 700;
}

strong {
    font-weight: 700;
}

.cntpage {
	margin-top: 115px;
	margin-bottom: 30px;
	margin-left: 25px;
	margin-right: 25px;
}

.cntpage a {
	text-decoration: none;
}

.cntpage a:hover {
	text-decoration: underline;
}

.cntpage a:active {
	border-radius: 3px;
}

.maintitle {
    page-break-before: right;
}

.img_label, .video_label, .audio_label, .table_label {
    margin-top: 3px;
    font-size: 90%;
    font-style: italic;
    text-align: center;
}

li .img_label, li .audio_label {
	text-align: left;
}

.img_container, .video_container, .audio_container, .table_container {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%;
    display: inline-block;
    margin-left: 50%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
}

li .table_container {
    margin-left: 0;
    margin-right: 0;
    transform: none;
    width: auto;
}

.video_container {
	max-width: 80%;
}

.cont_no_resize {
    width: auto;
}

.img_container img, .video_container video, .audio_container audio {
	display:block;
	position: relative;
}

.video_container video, .audio_container audio, .table_container table {
    position: relative;
    margin: auto;
}

.resizeimg {
    max-width: 100%;
    height: auto;
    margin: auto;
}

video, audio {
	margin-top: 5px;
}


/***************** PRE/CODE *****************/
pre, code {
  font-family: 'MonospaceFont', monospace;
}

code {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
  font-size: 90%;
}

pre>code, .quiz p>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 95%;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
}

pre code {
  background-color: transparent;
  border: none;
}


/***************** SECTIONS *****************/
.info, .example, .warning {
    margin-left: 20px;
    margin-right: 50px;
	margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 20px;
    padding-right: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.info {
    background-color: #e4f0f5;
    border: 1px solid hsla(198, 45%, 45%, 0.1);
    border-left: 5px solid #3f87a6;
}

.example {
    font-size: 106%;
    background-color: #f8f8f8;
    border: 1px solid hsla(0, 0%, 60%, 0.1);
    border-left: 5px solid #999999;
}

.warning {
    background-color: #ffedcc;
    border: 1px solid hsla(28, 79%, 72%, 0.1);
    border-left: 5px solid #f0b37e;
}

.marginnote {
    float: right;
    width: 150px;
    left: 750px;
    font-size: 80%;
    margin: 15px;
}

.marginnote p {
    text-align: right;
}

.callout {
    float: right;
    width: 200px;
    background-color: lightyellow;
    margin: 10px;
    padding: 10px;
}

.callout p {
    text-align: right;
}

.expand,
.collapsing,
.chapters_collapsed .chapIcon,
.chapters_expanded .chapIcon {
	cursor: pointer;
	font-weight: bold;
	font-size: 180%;
}

.expand:before,
.chapters_collapsed .chapIcon:after {
	content: "\F140"; /*mdi-chevron-down*/
}

.collapsing:before,
.chapters_expanded .chapIcon:after {
	content: "\F143"; /*mdi-chevron-up*/
}

.contextualNote {
    display: none; /*initially hidden*/
    font-size: 92%;
    padding-left: 20px;
}


/***************** SCREEN *****************/
@media screen {
	.cover {
		margin: 24px 50px 200px 50px;
		text-align:center;
		cursor: pointer;
	}
    
    .cover_singlepage {
        margin: 70px 40px 100px 20px;
        text-align:center;
    }
	
	.quizprint {
		display:none;
	}
}


/***************** PRINT *****************/
@media print {
	
	body {/* Nel PDF corrispondono a circa 11pt */
        font-size: 11px;
	}
	
	.printtoc {
	    font-size: 11px !important;
	}
	
    img {
        max-width: 100% !important;
        height: auto !important;
    }
	
    pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }
	
	.cover, .cover_singlepage {
		margin: 200px 40px 0px 40px;
		text-align:center;
		page-break-after:always;
	}
	
	.quizeval, .solutions_title, .spotArea {
		display:none !important;
	}
	
    .spotText {
        border: 0 !important;
    }
    
    .contextualNote {
        display: block !important;
    }
    
	.cntpage {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.footnotes {
		display: block !important;
	}
	
	.ftnoteref {
		display: inline-block !important;
	}
	
	.ftnoteNotxt {
		display: none;
	}
}

@page {
  margin-left: 2cm;
  margin-right: 2cm;
  margin-top: 2.5cm;
  margin-bottom: 2.5cm;
}


/***************** COVER *****************/
.title_section {
	display: inline-block;
}

.title {
  font-size: 250%;
  font-weight: 400;
  margin: 10px 0px 5px 0px;
  line-height: 100%;
}

.titlesec_graphic {
	display: table;
    width: calc(100% + 20px);
    padding-top: 3px;
    margin-left: 50%;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
}

.titlesec_graphic_a,
.titlesec_graphic_b,
.titlesec_graphic_c {
	height: 7px;
	width: 33.333%;
	display: table-cell;
}

.undertitle {
	display:block;
	border-bottom: 1pt solid #dbdbdb;
	margin-left: auto;
	margin-right: auto;
	line-height: 5px;
	margin-bottom: 15px;
}

.subtitle {
  font-size: 120%;
}

.author {
  margin-bottom:3px;
  color: #999999;
  font-weight: 300;
  font-size: 100%;
}

.titledate {
	padding-top: 10px;
}

.abstract {
    margin-top: 20px;
    display: block;
    white-space: pre;
}

.coverimg {
	margin-top: 40px;
    max-width: 100%;
    height: auto;
}

/************** FOOTNOTE / TOOLTIP ***************/
.tooltip {
    position: relative;
    font-weight: 400;
}

.tooltip:hover {
    text-decoration: underline;
}

.ftnoteref {
    color: white !important;
    font-weight: 600 !important;
    border-radius: 1em;
    text-align: center;
    vertical-align: super;
    font-size: 0.7em;
    min-width: 1em;
    height: 1em;
    line-height: 1em;
    padding: 2px;
    margin-left: 1px;
	display: none;
}

.footnotes {
	position: relative;
	margin-top: 3em;
	border-top: 1px solid #b3b3b3;
	display: none;
}

.footnotes ul {
	list-style-type: none;
	margin-left: 2em;
    padding-left: 0;
}

.footnotes li {
	padding-top: 1em;
}

.ftnoteref_cont {
	margin-left: -1.7em;
	display: inline-block;
}

.footnotes .ftnoteref {
    vertical-align: baseline;
}

.glosslayer {
	position: absolute;
    background-color: white;
    z-index: 990;
    -webkit-box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0 0 2px #a2a9b1;
    box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3), 0 0 2px #a2a9b1;
	border-color: #a2a9b1;
	border-radius: 2px;
	padding: 4px 4px 0px 4px;
    opacity: 0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
}

.tooltip .glosslayer {
	width: 250px;
	min-height: 100px;
	text-align: left;
}

.glosslayer_after1 {
    position: absolute;
	border: 15px solid transparent;
    margin-left: -15px;
}

.glosslayer_after2 {
    position: absolute;
	border: 14px solid transparent;
    margin-left: -14px;
}

.tool_content {
	display: none;
	color: black;
	padding: 5px 4px 4px 4px !important;
	font-size: 93% !important;
	font-weight: 300 !important;
}

.glosslayer h1 {
	font-size: 158% !important;
	font-weight: 400 !important;
	padding-top: 2px !important;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding-left: 5px !important;
}

.ftnoteNotxt:before {
	content: '\F6C3'; /*mdi-asterisk*/
    font-size: 60%;
    vertical-align: super;
    font-weight: bold;
}

/***************** TABLE *****************/
.stb, .btb, .b2tb {
  border-spacing:0px;
  margin: 10px;
}

.btb {
  border:solid 1px #666666;
}

.b2tb {
  border:solid 3px #666666;
}

.ruledtr td,
.ruledtr th {
	border-bottom-color: #666666;
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
}

.ruled2tr td,
.ruled2tr th {
	border-bottom-color: #666666;
	border-bottom-width: 3px !important;
	border-bottom-style: solid !important;
}

table.btb tr.ruledtr:last-child td,
table.b2tb tr.ruledtr:last-child td,
table.btb tr.ruled2tr:last-child td,
table.b2tb tr.ruled2tr:last-child td {
	border-bottom-width: 0 !important;
}

td,
th {
  padding:5px;
}

.rbtd {
  border-right:solid 1px #666666;
}

.lbtd {
  border-left:solid 1px #666666;
}

.leftalign {
	text-align: left;
}

.centeralign {
	text-align: center;
}

.rightalign {
	text-align: right;
}

td.leftalign p,
th.leftalign p {
	text-align: left;
}

td.centeralign p,
th.centeralign p {
	text-align: center;
}

td.rightalign p,
th.rightalign p {
	text-align: right;
}

.topalign {
    vertical-align: top;
}

.bottomalign {
    vertical-align: bottom;
}

.middlealign {
    vertical-align: middle;
}

.table_container p {
    margin:0;
}

.table_container p ~ p {
    margin-top: 0.5em;
}


/*********** PERSONALIZZAZIONI TABELLE **********/
.tb_light_border {
    box-shadow: 2px 1px 16px 0px rgb(0 0 0 / 20%);
}

.tb_light_border.btb,
.tb_light_border.b2tb,
.tb_light_border .ruledtr td,
.tb_light_border .ruledtr th,
.tb_light_border .ruled2tr td,
.tb_light_border .ruled2tr th,
.tb_light_border .rbtd,
.tb_light_border .lbtd { /* custom */
    border-color: #9e9e9ea6 !important;
}


/***************** RICERCHE *****************/
.highlight {
    background-color: yellow;
}

.highlight_title {
	background-color: rgba(255, 255, 0, 0.2);
	box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.2);
	padding: 5px 20px 10px 20px;
}


/***************** OTHER *****************/
.appendix {
  page-break-before:right;
}

.glossary dd {
  margin-bottom: 20px;
}

.empty_page {
    display: none;
}


/****************** QUIZ *****************/
.quiz {
  padding-bottom: 10px;
}

.quiztitle {
  font-weight: 700;
  color: white;
  padding: 10px;
  text-align: left;
  margin-top: 10px;
}

.quiz p {
    line-height: 18px;
    font-weight: 400;
    padding: 15px 25px 30px 20px;
    background-color: #f8f8f8;
    margin: 0 0 10px -20px;
}

.quiz form {
    margin-left: 20px;
}

.answercomment, .anspos_ok, .anspos_ko {
    background-color: hsla(54, 100%, 80%, 0.75);
}

.answercomment {
  color: #1A1AA6;
  font-style: italic;
  font-weight: 400;
  border: 1px solid #FFEB3B;
  border-radius: 3px;
  padding: 5px;
  margin: 0;
  line-height: normal;
}

.answercomment p {
    margin: 0;
    line-height: normal;
    padding: 5px;
    background-color: transparent;
}

.s_pos .answercomment {
    background-color: transparent;
    border: 0;
}

.answer_ok, .anscmt_ok, .anspos_ok, .txt_exact, .txt_1respok, .txt_respok {
    color: green !important;
    border-color: green !important;
}

.answer_ko, .anscmt_ko, .anspos_ko, .txt_wrong, .txt_1respno, .txt_respno {
    color: red !important;
    border-color: red !important;
}

.answer_ok, .answer_ko {
    font-weight: bold;
}

.anscmt_ok, .anscmt_ko {
    display: block !important;
}

.anspos_ok, .anspos_ko {
    border-style: solid !important;
    border-width: 1pt !important;
    border-radius: 3px;
}

#quizbtn {
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    color: white;
    cursor: pointer;
    margin: 0;
    height: 40px;
	border-style: solid;
    border-width: 1px;
    border-radius:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    text-transform: uppercase;
}

#quizbtn:hover {
	border-style: solid;
    border-width: 1px;
    color: black;
}

#quizresult {
    font-weight: 400;
    margin-top: 20px;
}

.quizeval {
    padding-top: 10px;
}


/*****************  MAPPE ****************/
.mapArea, .spotArea {
	display: block;
    z-index: 5;
}

.mapArea:active, .spotTextHoover, .spotAreaHoover, .spotArea, .spotText {
	border-radius: 5px;
}

.spotTextHoover {
    background-color: lightpink;
}

.spotAreaHoover {
    background-color: hsla(349, 86%, 50%, 0.2);
}

.spotArea {
    border: 2px solid hsla(0, 68%, 42%, 0.2);
    cursor: pointer;
}

.spotText {
	border: 1px dotted FireBrick;
    cursor: help;
}


/***************** TEXT-TO-SPEECH *****************/
span.playpause,
span.replay,
a.voiceLink {
	cursor: pointer;
}

span.playpause:before {
	content: "\F5CB"; /*mdi-voice*/
}
	
span.replay:before {
	content: "\F459"; /*mdi-replay*/
}

span.playpause.running:before {
	color: #F73F3F !important;
}

.textToSpcData {
	display: none;
}

.customTooltip {
	position: relative;
}

.customTooltip:after {
	position: absolute;
    opacity: 0;
    background-color: lightyellow;
    color: black;
    z-index: 99;
    font-size: 55%;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    padding: 5px;
    border: 1px solid black;
    box-shadow: 6px 0 12px rgba(0,0,0,0.2);
    top: 1.5em;
    width: max-content;
    max-width: 400px;
    text-align: center;
}

.customTooltip:hover:after {
	opacity: 1;
}


/************** COMBO CAPITOLI VIDEO *************/
.chapters_select {
	position: relative;
	float: right;
	margin-bottom: 1px;
}

.media_chapters {
	text-align: right;
	cursor: pointer;
	font-weight: 600;
}

.media_chapters .chapTitle {
    line-height: 24px;
    vertical-align: top;
}

.media_chapters .chapIcon {
	padding-left: 3px;
}

.chapter_dropdown {
	position: absolute;
	top: 25px;
	right: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	background-color: white;
	z-index: 1;
}

.chapters_collapsed .chapter_dropdown {
	display: none;
}

.chapters_expanded .chapter_dropdown {
	display: block;
}

.chapter_dropdown span {
	display: block;
	text-align: right;
	white-space: nowrap;
	padding: 4px 16px;
	min-height: 20px;
	cursor: pointer;
}


/************** ZOOM IMMAGINI *************/
.zoom_image {
    cursor: pointer;
	-webkit-transition: opacity 0.3s, max-width 1s;
    transition: opacity 0.3s, max-width 1s;
	width: auto !important;
	height: auto !important;
}

.zoom_image:hover {
	opacity: 0.8;
}

.zoom_image.zoomed {
    max-width: 100% !important;
}


/****************** TABS ******************/
.tabs-container {
	padding-top: 10px;
	padding-bottom: 20px;
}

.tabs-buttons {
	display: inline-block;
}

.tabs-button {
	display: inline-block;
	padding: 6px 10px 6px 10px;
	font-weight: 600;
	color: #737373;
	cursor: pointer;
}

.tabs-button.active {
	border-top-style: solid;
	border-top-width: 5px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid white;
    margin-bottom: -1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	color: black;
	cursor: auto;
	pointer-events: none;
}

.tabs-button:hover {
	color: black;
}

.tabs-pages {
	padding: 5px 10px 5px 10px;
	border: 1px solid #ccc;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
	box-shadow: 7px 5px 20px 0px rgb(0 0 0 / 5%)
}

.tabs-page {
	display: none;
}

.tabs-page.active {
	display: block;
}


/************** SAM.CSS SKIN STANDARD *************/
.cntpage a,
.tooltip,
.fontIcon {
  color: #0067c7;
}
.cntpage a:active {
  background-color: rgba(190, 218, 244, 0.3);
}
.titlesec_graphic_a {
  background-color: #bedaf4;
}
.titlesec_graphic_c,
.ftnoteref,
.quiztitle,
#quizbtn {
  background-color: #347fc5 ;
}
#quizbtn {
  border-color: #255b8d ;
}
.titlesec_graphic_b,
#quizbtn:hover {
  background-color: #87bef2 ;
}
#quizbtn:hover {
  border-color: #347fc5 ;
}
.table_container th,
.table_header_bkcol {
  background-color: #e4edf6;
}
::-moz-selection {
  background: #bedcf8 ;
}
::selection {
  background: #bedcf8 ;
}
.tabs-button.active {
  border-top-color: #347fc5;
}