/*Big form*/
FORM.bigform {margin: 0px; padding: 0px; /*font-family: Georgia, serif;*/ font-size: 14px;}
FORM.framedform {
    padding: 10px;
    /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    border: 2px solid #FFB944;
    border-radius: 4px;*/
}
FORM.bigform H2 {color: #1E3665; font-weight: normal; margin: 20px 0px 10px 0px; font-size: 120%; padding-bottom: 5px; border-bottom: 1px dotted;}
FORM.bigform DIV.form_introduction {margin-bottom: 20px; font-style: italic;}
FORM.bigform DIV.introduction {margin-bottom: 20px; font-style: italic;}
FORM.bigform DIV.hint {margin-left: 200px; text-align: right; font-style: italic; font-size: 80%; color: #696969; margin-top: -5px; margin-bottom: 10px;}
FORM.bigform DIV.formline {position: relative; padding-left: 200px; margin-bottom: 10px; text-align: right;}
FORM.bigform SPAN.caption {position: absolute; top: 0px; left: 0px; width: 200px; text-align: left;}
FORM.bigform DIV.noninput {width: 95%; border: 0px inset; padding: 5px; font-family: Verdana, sans-serif; font-size: 90%; background-color: #FFF8DC; text-align: left; font-style: italic;}
FORM.bigform INPUT.textbox {width: 95%; border: 1px inset; padding: 5px; font-family: Verdana, sans-serif; font-size: 90%; background-color: #FFF8DC;}
FORM.bigform TEXTAREA.textbox {width: 95%; border: 1px inset; padding: 5px; font-family: Verdana, sans-serif; font-size: 90%; background-color: #FFF8DC;}
FORM.bigform INPUT.button {border: 1px outset; padding: 2px 5px; font-family: Verdana, sans-serif; font-size: 95%;}
FORM.bigform DIV.submitline {position: relative; margin-bottom: 10px; text-align: right;}
FORM.bigform DIV.submitline A {margin-right: 10px; color: #696969;}
FORM.bigform DIV.result {margin-top: 30px; margin-bottom: 25px; margin-left: 30px; padding-left: 30px; font-style: italic; position: relative;}
FORM.bigform DIV.result IMG {position: absolute; top: -5px; left: 0px;}
FORM.bigform DIV.error_goback {margin-bottom: 10px; margin-left: 60px; }
FORM.bigform DIV.backlink {margin-bottom: 100px; margin-left: 60px; }
FORM.bigform DIV.pozor {background-color: #E2E2E2; margin: 0px -10px; padding: 10px 10px 1px 10px; font-size: 80%;}
FORM.bigform DIV.pozor_item {position: relative; margin-bottom: 10px; padding-left: 40px;}
FORM.bigform DIV.pozor_item IMG {position: absolute; left: 5px; top: 0px;}
FORM.bigform DIV.pozor_title {font-weight: bold; margin-bottom: 3px; color: #454545;}
FORM.bigform DIV.checkboxline {position: relative; margin-bottom: 12px; text-align: left;}

div.framedform {padding: 10px; margin: 10px 0; border: 2px solid #FFB944;}
div.highlighted
{
    padding: 10px;
    margin: 10px -10px 20px -10px;
    background-color: #EEEEEE;
}

/*Big arrow*/
.bigarrow {background-image: url(../Nabytek/arrow-yellow.gif); background-position: right; background-repeat: no-repeat; height: 38px;
	padding-top: 19px; margin-top: 30px; text-align: right; padding-right: 50px; margin-right: -8px;}
.bigarrow A.click {display: block; font-size: 120%; color: #696969; font-weight: bold;}

.green {background-image: url(../Nabytek/arrow-green.gif); background-position: right; background-repeat: no-repeat; height: 38px;
	padding-top: 19px; margin-top: 30px; text-align: right; padding-right: 50px; margin-right: -8px;}
.green A.click {display: block; font-size: 120%; text-decoration: none; color: #000000; font-weight: bold;}
.green A.click:hover {color: #696969; font-weight: bold; text-decoration: underline;}


/*Images on the test pages*/
FORM.framedform IMG {float: right;}
FORM.bigform H1 {margin: 0px 0px 1.0em 0px;}


/*Test styles*/
div#pagecount {float: right; margin-top: 0px; margin-left: 10px;}

div.questionblock {margin: 22px 0px 0px 0px; font-family: "Trebuchet MS";}
div.questionblock H1 {font-size: 0.9em; margin: 6px 10px 4px 10px; color: #6F98CC; border-bottom: solid 1px #6F98CC;}

div.questionblock div.question {font-size: 1.1em; font-weight: bold; color: #1E3665; margin-top: 6px; margin-left: 10px;}

div.questionblock div.question div.options {font-size: 0.95em; font-weight: normal; color: #000000; margin-top: 6px; 
	margin-left: 40px; line-height: 1.4em;}

div.questionblock div.question div.options label {padding-left: 6px;}
	
FORM.bigform div.buttons {margin: 20px 0px 0px 0px;}
	
/*Statistics and score*/
DIV#teststats {padding-bottom: 0px; margin-top: 30px; margin-bottom: 10px; padding: 0px 10px 0px 10px; border: 2px solid #FFB944;}
DIV#teststats DIV.formline {position: relative; padding-left: 210px; margin-bottom: 10px; text-align: right;}
DIV#teststats SPAN.caption {position: absolute; top: 4px; left: 10px; width: 210px; text-align: left;}
DIV#teststats DIV.noninput {width: 95%; border: 0px inset; padding: 5px; font-family: Verdana, sans-serif; font-size: 100%; background-color: #FFF8DC; text-align: left; font-style: italic;}

DIV#teststats H2 {color: #1E3665; font-weight: normal; margin: 10px 0px 10px 0px; font-size: 120%; padding-bottom: 5px; border-bottom: 1px dotted; text-align: center; }

DIV#teststats DIV.scoremeter{text-align: center; margin-bottom: 10px;}
DIV#teststats IMG {float: none;}


/*Results styles*/
div.testresults {margin: 22px 0px 0px 0px; font-family: "Trebuchet MS";}
div.testresults H1 {font-size: 0.9em; margin: 6px 10px 4px 10px; color: #6F98CC; border-bottom: solid 1px #6F98CC;}

div.testresults div.question {font-size: 1.0em; font-weight: bold; color: #000000; padding: 5px;}

div.testresults div.question div.options {font-size: 0.95em; font-weight: normal; color: #000000; margin-top: 6px; 
	margin-left: 60px; line-height: 1.4em;}
div.testresults div.question div.options li.neutral {font-weight: normal; color: #000000;}
div.testresults div.question div.options li.answer {font-weight: bold; color: #009900;}
div.testresults div.question div.options li.right {font-weight: bold; color: #009900;}
div.testresults div.question div.options li.wrong {font-weight: normal; color: #CC0000; text-decoration: line-through;}
div.testresults div.question span.qgroup {color: #666666; font-weight: normal; }

div.testresults div.rightFalse { background-color: #FFE2D7;}

div#eolas .roghanna {
	margin-top: 28px;
	margin-bottom: 7px;
	border-top: 1px solid #10509E;
	background-color: #E5EEFD;
	padding: 2px 5px;
	color: #0F315A; /*font-weight: bold;*/
	min-height: 120px;
}
div#eolas .rogha {margin: 0px;font-size: 1.2em;color: #10509E;font-weight: bold;}
div#eolas .mode {margin-bottom: 0px;text-transform: uppercase;color: Maroon;font-weight: bold;}
div#eolas .col1 {width: 385px;float: left;}
div#eolas .col2 {margin-left: 410px;}	

div#eolas TABLE {font-family: "Trebuchet MS"; border-collapse: collapse;empty-cells: show;margin-bottom: 1em;background-color: #FFFFFF;border-top: 1px solid #8AAFE1;border-left: 1px solid #8AAFE1;border-right: 1px solid #8AAFE1;}
div#eolas THEAD {background-color: #E5EEFD; font-weight: bold;}
div#eolas TD {border-bottom: 1px solid #8AAFE1; padding: 4px 4px 4px 4px; vertical-align: top;}

div#evaluation {padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px; padding: 10px;}
div#evaluation li {margin-top: 22px; margin-left: -16px;}


div#blurbafter {padding-bottom: 0px; margin-top: 0px; margin-bottom: 10px; margin-left: 0px; padding: 10px; width: 600px;}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1000px or less */
@media screen and (max-width: 1000px) {

	div#eolas .col1 {
		width: auto;
		float: left;
	}

	div#eolas .col2 {
		margin-left: 0px;
	}	

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	div#eolas .col1 {
		width: auto;
		float: left;
	}

	div#eolas .col2 {
		margin-left: 0px;
	}

	DIV#teststats DIV.scoremeter {
		display: none;
	}

	div#blurbafter {
		padding-bottom: 0px;
		margin-top: 0px;
		margin-bottom: 10px;
		margin-left: 0px;
		padding: 10px;
		width: auto;
	}

}

/************************************************************************************
LEVEL PROGRESS BAR & SKIP PROMPT  (append to tastail.css)
*************************************************************************************/


/* Level dot Bootstrap colour overrides */
.level-dot.btn-primary  { background-color: #0d6efd; }
.level-dot.btn-warning  { background-color: #ffc107; color: #000; }
.level-dot.btn-danger   { background-color: #dc3545; }
.level-dot.btn-info     { background-color: #0dcaf0; color: #000; }
.level-dot.btn-success  { background-color: #198754; }

/* Active step always shows its level colour */
.level-step.active .level-dot.btn-primary  { background-color: #0d6efd; }
.level-step.active .level-dot.btn-warning  { background-color: #ffc107; color: #000; }
.level-step.active .level-dot.btn-danger   { background-color: #dc3545; }
.level-step.active .level-dot.btn-info     { background-color: #0dcaf0; color: #000; }
.level-step.active .level-dot.btn-success  { background-color: #198754; }

.level-dot.bg-soft-primary { background-color: rgba(13, 110, 253, 0.1);   color: #0d6efd; }
.level-dot.bg-soft-warning  { background-color: rgba(255, 193, 7, 0.1);   color: #ffc107; }
.level-dot.bg-soft-danger   { background-color: rgba(220, 53, 69, 0.1);   color: #dc3545; }
.level-dot.bg-soft-info     { background-color: rgba(13, 202, 240, 0.1);  color: #0dcaf0; }
.level-dot.bg-soft-success  { background-color: rgba(25, 135, 84, 0.1);   color: #198754; }

/* Description text under the label */
.level-desc {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 10px;
    color: #aaaaaa;
    text-align: center;
    max-width: 80px;
    line-height: 1.3em;
    margin-top: 2px;
}

.level-step.active .level-desc {
    color: #555555;
}

/* Container sits below h1, above the first question block */
.level-progress-container {
    margin: 0 0 22px 0;
    clear: both;
    background-color: #ffffff;
    padding: 10px 0px 8px 0px;
}

.level-progress-container.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    margin: 0;
    padding: 8px 20px 6px 20px;
}

/* Row of numbered steps connected by horizontal lines */
.level-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.level-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 54px;
}

/* The numbered circle */
.level-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #cccccc;
    color: #ffffff;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    margin-bottom: 5px;
    transition: background-color 0.2s;
}

.level-label {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}

/* Horizontal connector bar between steps */
.level-connector {
    flex: 1;
    height: 2px;
    background-color: #cccccc;
    margin-top: 15px;   /* vertically aligns with circle centre */
    min-width: 8px;
    transition: background-color 0.2s;
}

/* Completed steps (pages already submitted) */
.level-step.done .level-dot {
    background-color: #4a8a4a;
}
.level-step.done .level-label {
}
.level-connector.done {
    background-color: #4a8a4a;
}

/* Active (current) step */
.level-step.active .level-dot {
    background-color: #1E3665;
    box-shadow: 0 0 0 3px #4a8a4a;
}
.level-step.active .level-label {
    color: #1E3665;
    font-weight: bold;
}

/* Thin amber bar showing how many questions on this page have been answered */
.page-progress-bar {
    height: 5px;
    background-color: #e8e8e8;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.page-progress-fill {
    height: 100%;
    background-color: #FFB944;
    border-radius: 3px;
    width: 0%;
    transition: width 0.25s ease;
}

/* ---- Skip prompt ---- */
.skip-prompt {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 560px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    background-color: #FFFBEF;
    border: 2px solid #6eb33f;
    border-radius: 4px;
    padding: 12px 16px;
    font-family: "Trebuchet MS", sans-serif;
}

.skip-prompt p {
    margin: 0 0 8px 0;
    /*color: #1E3665;*/
    font-size: 1.0em;
}

.skip-button {
    background-color: #1E3665;
    color: #ffffff;
    border: none;
    padding: 6px 14px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 0.92em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
}

.skip-button:hover {
    background-color: #6F98CC;
}


/************************************************************************************
MEDIA QUERIES - progress bar additions
*************************************************************************************/
/* Narrow screens: hide text labels, shrink dots */
@media screen and (max-width: 480px) {

    .level-desc {
        display: none;
    }

    .level-dot {
        width: 26px;
        height: 26px;
        font-size: 12px;
        line-height: 26px;
    }

    .level-connector {
        margin-top: 12px;
    }

    .skip-prompt {
        top: 65vh;
        bottom: auto;
        transform: translateX(-50%);
        width: 96%;
        max-width: none;
        padding: 10px 12px;
        font-size: 0.9em;
    }

}

/************************************************************************************
TEST RESULTS - teststats & evaluation redesign
Append to tastail.css
*************************************************************************************/

/* ---- teststats card ---- */
DIV#teststats {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    padding: 0;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 24px;
}

DIV#teststats H2 {
    background-color: #1E3665;
    color: #ffffff;
    margin: 0;
    padding: 14px 20px;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: none;
    text-align: left;
}

/* Large score display */
.score-highlight {
    text-align: center;
    padding: 28px 20px 10px 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef2fb 100%);
    border-bottom: 1px solid #e0e6f0;
}

.score-number {
    font-size: 4em;
    font-weight: 800;
    color: #1E3665;
    line-height: 1;
    font-family: "Trebuchet MS", sans-serif;
}

.score-label {
    font-size: 0.85em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Level badge */
.level-result {
    text-align: center;
    padding: 12px 20px 16px 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #eef2fb 100%);
    border-bottom: 3px solid #FFB944;
}

.level-result-badge {
    display: inline-block;
    background-color: #1E3665;
    color: #ffffff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 1.0em;
    font-weight: 700;
    font-family: "Trebuchet MS", sans-serif;
    letter-spacing: 0.02em;
}

/* Stats grid - 4 boxes in a row */
.stats-grid {
    display: flex;
    border-bottom: 1px solid #e8e8e8;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    border-right: 1px solid #e8e8e8;
}

.stat-item:last-child {
    border-right: none;
}

.stat-value {
    font-size: 1.8em;
    font-weight: 800;
    color: #1E3665;
    line-height: 1;
    font-family: "Trebuchet MS", sans-serif;
}

.stat-item.correct .stat-value { color: #198754; }
.stat-item.wrong   .stat-value { color: #dc3545; }

.stat-label {
    font-size: 0.72em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    font-family: "Trebuchet MS", sans-serif;
}

/* Progress bar area */
.stats-progress-bar {
    padding: 12px 20px 16px 20px;
    border-bottom: 1px solid #e8e8e8;
}

.score-bar-track {
    height: 10px;
    background-color: #e8e8e8;
    border-radius: 5px;
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background-color: #FFB944;
    border-radius: 5px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.score-bar-label {
    text-align: right;
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
    font-family: "Trebuchet MS", sans-serif;
}

/* Action button area */
DIV#teststats DIV.submitline {
    padding: 16px 20px;
    text-align: right;
    margin-bottom: 0;
}


/* ---- Evaluation / recommendations section ---- */
div#evaluation {
    padding: 0;
    margin-top: 24px;
}

/* Level callout box */
.level-callout {
    background: linear-gradient(135deg, #eef2fb 0%, #e5eefd 100%);
    border-left: 5px solid #1E3665;
    border-radius: 0 6px 6px 0;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.level-callout p {
    margin: 0 0 8px 0;
    color: #555;
    font-size: 0.95em;
}

.level-callout-level {
    font-size: 1.15em;
    font-weight: 700;
    color: #1E3665;
    font-family: "Trebuchet MS", sans-serif;
}

/* Course recommendation cards */
.course-card {
    border: 1px solid #e0e6f0;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    background-color: #ffffff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.course-card h2 {
    font-size: 1.05em;
    font-weight: 700;
    color: #1E3665;
    margin: 0 0 10px 0 !important;
    padding: 0;
    border: none;
    font-family: "Trebuchet MS", sans-serif;
}

.course-card h2 i {
    color: #FFB944;
    margin-right: 6px;
}

.course-card p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.6;
}

.course-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.course-links a {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid #1E3665;
    border-radius: 4px;
    color: #1E3665;
    font-size: 0.88em;
    font-weight: 700;
    font-family: "Trebuchet MS", sans-serif;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.course-links a:hover {
    background-color: #1E3665;
    color: #ffffff;
}

/* Intro text before course cards */
div#evaluation > p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 16px;
}


/************************************************************************************
MEDIA QUERIES - results page
*************************************************************************************/
@media screen and (max-width: 600px) {

    .score-number {
        font-size: 3em;
    }

    .stats-grid {
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 1 1 50%;
        border-bottom: 1px solid #e8e8e8;
    }

    /* Remove right border on every second item */
    .stat-item:nth-child(2),
    .stat-item:nth-child(4) {
        border-right: none;
    }

    /* Remove bottom border on last two */
    .stat-item:nth-child(3),
    .stat-item:nth-child(4) {
        border-bottom: none;
    }

    .course-card {
        padding: 16px;
    }

}