@font-face {
   font-family: 'NN Dagny';
   src: url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyTextWeb.eot");
   src: url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyTextWeb.eot?#iefix") format("embedded-opentype"), url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyTextWeb.woff") format("woff");
   font-weight: normal;
   font-style: normal
 }
 
 @font-face {
   font-family: 'NN Dagny';
   src: url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyDisplayWebPro.eot");
   src: url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyDisplayWebPro.eot?#iefix") format("embedded-opentype"), url("https://opinio.ittelmondhatod.hu/opinio/upload/file/common/NNDagnyDisplayWebPro.woff") format("woff");
   font-weight: bold;
   font-style: normal
 }
 
 HTML {}
 
 BODY {
   font-family: 'NN Dagny', verdana, helvetica, arial, sans-serif;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   margin-top: 25px;
   padding: 50px;
   line-height: 1.6em;
       background: #FAF6ED !important;
 }
 
body:not(.tablet):not(.mobile) {

    background-image:  url(https://opinio.ittelmondhatod.hu/opinio/upload/images/common/youth-bg.png) !important;
    background-position: 0 -70px !important;
    background-repeat: no-repeat !important; 
}
 
 body.tablet {
   background-image:  url(https://opinio.ittelmondhatod.hu/opinio/upload/images/common/youth-bg-mobile.png) !important;
   background-position: center top !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
 }
 
 body.mobile {
   background-image:  url(https://opinio.ittelmondhatod.hu/opinio/upload/images/common/youth-bg-mobile.png) !important;
   background-position: center top !important;
   background-repeat: no-repeat !important;
 }
 
 body:not(.mobile):not(.tablet) #op_all {
    margin-top: 130px !important;
 }
 
  
 body.tablet #op_all {
     margin-top:85px !important;
 }
 
 body.mobile #op_all {
     margin-top: 75px !important;
 }
 
body:not(.mobile):not(.tablet) #page-div {
    margin: auto;
    padding: 0 !important;
    background: #FAF6ED;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

 TABLE {
   margin: 0px;
   padding: 0px;
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */

 }
 
 TD {
   padding: 0px;
   margin: 0px;
   font-family: 'NN Dagny', verdana, helvetica, arial, sans-serif !important;
   font-size: 17px;
   line-height: 1.6em;

   /* text-align: center; */
 }
 /* Survey page (all survey content is contained in this table) */
 
 TABLE.page {
   border: 0px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   border-radius: 0;
   box-shadow: none !important;
 }
 
 TABLE.sections {
   text-align: center;
   margin: 0px;
   width: 100%;
   border: 0px;
 }
 
 TD.sections {
   border: 0px;
   text-align: left;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
 TD.topLeftCorner {
   width: 10px;
   height: 35px;
 }
 
 TD.topRightCorner {
   width: 10px;
   height: 35px;
 }
 
 TD.leftSide {
   width: 10px;
 }
 
 TD.rightSide {
   width: 10px;
 }
 
 TD.bottomLeftCorner {
   width: 10px;
   height: 30px;
 }
 
 TD.bottomRightCorner {
   width: 10px;
   height: 30px;
 }
 /* survey header */
 
 TABLE.header {
   width: 100%;
 }
 
 TD.header {
   text-align: center;
 }
 /* Login screen */
 
 TD.login {
   padding-left: 20px;
   text-align: left;
 }
 /* Survey title */
 
 TD.title {
   background: url(https://opinio.ittelmondhatod.hu/opinio/upload/images/common/ittelmondhatod-logo.png) no-repeat center center;
   background-size: auto 40px;
   font-size: 0 !important;
   height: 75px;
   color: #ea650d;
   font-weight: bold;
   text-align: left;
   vertical-align: middle;
   padding: 0;
   margin-bottom: 40px;
   font-family: arial, geneva, helvetica, sans-serif;
 }
 
  body:not(.mobile):not(.tablet) td.title {
       background-size: auto 60px;
    height: 70px;
 }
 
 
 body.mobile td.title {
     height: 45px;
 }
 
 /* Language selection */
 
 TD.langSelector {
   font-size: 10px;
   padding: 2px;
   text-align: right;
 }
 
 SELECT.langSelector {
   font-size: 9px;
   font-family: verdana, arial;
 }
 /* Survey introduction */
 
 TD.introduction {
   font-size: 17px; /* base 12 */
   color: #5d5d5d;
   padding: 5px;
 }
 /* Section title */
 
 TD.sectionText {
   font-size: 17px; /* base 12 */
   font-weight: normal;
   padding: 2px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align: left;
 }
 /* Section title */
 
 TD.sectionTitle {
   background-color: #DDDDDD;
   color: #8d8d8d;
   font-size: 17px; /* base 12 */
   font-weight: bold;
   padding: 0px;
   height: 17px;
 }
 
 SPAN.sectionTitle {
   width: 100%;
 }
 /* Question table */
 
 TABLE.questionTbl {
   color: #033771;
   margin: 0px;
   padding: 0px;
   /* background: #F1EDEB;*/
 }
 
 TD.question {
   padding: 0px;
 }
 
 TD.questionNo {
   background-color: none;
   font-family: arial;
   font-size: 17px; /* base 12 */
   color: #414141;
   padding: 2px;
   padding-left: 3px;
   font-weight: bold;
 }
 
 TD.questionText {
   background-color: none;
   font-family: arial;
   vertical-align: middle;
   padding: 2px;
   color: #414141;
   font-size: 17px; /* base 12 */ /* base 12 */
   font-weight: bold;
 }
 
 TD.questionText div {
   bacground-color: #D0F2F7!important;
 }
 
 TD.questionInput {
   padding-bottom: 10px;
   padding-top: 5px;
 }
 
 TD.questionFreeText {
   padding-bottom: 5px;
   color: #5d5d5d;
 }
 
 TD.textBefore {
   padding: 5px;
 }
 
 TD.textAfter {}
 
 .afterLastQuestion,
 .spaceAfterFirstSectionText,
 .beforeFirstQuestion,
 .spaceBeforeSectionText,
 .spaceAfterSectionText {
   margin: 0px;
   border: 0px;
   height: 0px;
 }
 
 .spaceBeforeFirstSectionText {
   padding: 8px;
 }
 
 .betweenQuestions {
   padding: 6px;
   height: 12px;
 }
 
 SELECT,
 TEXTAREA {
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 /* Essay */
 
 INPUT.essayText {
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 /* Essay */
 
 INPUT.questionFreeText {
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 
 SELECT.essayDropdown {}
 
 INPUT.essayCheckbox {}
 /* Rating question */
 
 TABLE.rating {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.ratingMinMax {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.ratingNumbers {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.ratingNA {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.ratingRadio {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.ratingEmpty {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 INPUT.ratingRadio {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 /* Numeric question */
 
 TABLE.numeric {
   margin-left: 5px;
 }
 
 TD.numericPrefix {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.numericPostfix {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.numericInput {}
 
 INPUT.numericInput {
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 /* Dropdown question */
 
 TABLE.dropdown {
   margin-left: 5px;
 }
 
 TD.dropdown {}
 
 SELECT.dropdown {}
 /* question */
 
 TABLE.Choice {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.Button {
   border: none;
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 input.Button {
   /*border: none;
		padding-left: 5px;
		margin-left: 5px;
		color:#5d5d5d;
		font-size: 17px; /* base 12 */
		padding:0px;*/
 }
 
 TD.Text {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 TD.Image {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
 }
 
 INPUT.multipleOther {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 5px;
   border: #BBBBBB 1px solid;
 }
 
 INPUT.multipleButton {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   margin-left: 2px;
   margin-top: 5px;
 }
 
 td.multipleText {
   font-family: arial;
   color: #5d5d5d;
   font-size: 17px; /* base 12 */
   vertical-align: text-top;
 }
 
 td.multipleButton {
   vertical-align: top;
 }
 /* Matrix question */
 
 TABLE.matrix {
   border-collapse: collapse;
   margin: 10px;
   margin-left: 5px;
   margin-bottom: 10px;
   /* border-collapse:separate; */
 }
 
 TD.matrixHeading {
   border: 0px;
   font-weight: bold;
 }
 
 TD.matrixCell {
   border: #DDDDDD 1px solid;
   color: #5d5d5d;
   padding: 2px;
   font-size: 17px; /* base 12 */
 }
 
 TD.matrixEmpty {
   border: none;
 }
 
 INPUT.matrixCheckbox {}
 
 INPUT.matrixRadio {}
 
 INPUT.matrixText {
   text-align: left;
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 
 SELECT.matrixDropdown {
   text-align: left;
 }
 /* Upload files screen */
 
 Table.uploadPage {
   padding: 0px;
   margin: 0px;
   width: 100%;
   background-image: url(images/bg.gif);
 }
 
 TD.uploadTitle {
   padding: 5px;
   color: #5d5d5d;
   font-weight: bold;
   text-align: center;
 }
 
 TD.uploadHelp {
   padding: 5px;
 }
 
 TD.upload {
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 0px;
 }
 
 SELECT.uploadSelectImage {}
 
 TD.uploadPreview {}
 
 TD.uploadButtons {
   padding: 5px;
   padding-bottom: 0px;
   text-align: right;
 }
 
 Input.uploadField {
   width: 100%;
   border: #BBBBBB 1px solid;
   color: #5d5d5d;
   padding: 1px;
 }
 /* ProgressBar */
 
 TD.progressBar {
   /*
	controls position of the progress bar, f.exp:
	TEXT-ALIGN: center;
 */
 }
 
 TABLE.progressBar {
   /*
	controls width of the progress bar, f.exp:
	width: 50%;
 */
 }
 
 TD.progressBarFill {
   /*
	controls the filled part of the progress bar f.exp:
	BACKGROUND-COLOR: #000000;
 */
   BACKGROUND-COLOR: #919191;
 }
 
 TD.progressBarBlank {
   /*
	controls the blank part of the progress bar f.exp:
	BACKGROUND-COLOR: #FFFFFF;
 */
 }
 
 TD.progressBarText {
   /*
	controls the text(percentage) of the progress bar
 */
 }
 
 TD.buttons {
   /*
	controls the table cell where survey buttons are located
 */
   background-image: url(images/bottom.gif);
   padding: 2px;
   padding-bottom: 3px;
   padding-top: 1px;
   height: 30px;
   text-align: right;
   vertical-align: top;
 }
 
 TD.thankYouNote {
   /*
	controls the table cell where survey thank-you note is displayed
 */
   padding: 5px;
   padding-top: 20px;
   padding-bottom: 20px;
 }
 /* survey footer */
 
 Table.footer {
   width: 100%;
   margin: 10px auto;
 }
 
 TD.footer {
   text-align: center;
 }
 /* Save and come back */
 
 TD.saveAndComeBack {
   padding: 10px;
 }
 /* Dialog */
 
 TD.dialog {
   padding: 5px;
   padding-top: 20px;
   padding-bottom: 20px;
 }
 
 .disabled {
   background-color: #DDD
 }
 
 .readonly {
   background-color: #F5F5F5
 }
 /* Lehet ez a button túlzás mindenhez */
 
 .button {
    padding: 8px 20px !important;;
    background: #24BFEF !important;
    font-size: 17px !important;
    line-height: 17px !important;
    color: #fff;
    font-weight: normal;
    white-space: nowrap;
    border-radius: 0 !important;
    border: 3px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s;
 }
 
 .button:hover {
   background: #24BFEF !important;
   border: 3px solid rgba(0, 0, 0, 0.25) !important;
 }
 
 #page-div {
   margin: auto;
   padding: 0 !important;
 }
 
 table.page {
   background: none;
   padding: 10px 0;
   -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
   -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
   box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);
 }
 
 form {
   margin-bottom: 0;
 }
 
 .buttons .button {
   margin-left: 10px;
 }
 
input[type="text"],
select,
textarea {
   font-size: 17px !important;;
   padding: 4px 8px !important;
}