/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 23-Jul-2018, 10:43:58
    Author     : podkrizniku
*/

$spremenljivka_info_text: gray;
$warnings_red: red;
$dynamic_count_text: green;
$main_background: #ffffff;
$progress_bar_background: black;

/**
* 
* 1KA template, from which other skins are derived. Every skin usees this template as a base!
* 
*  - always use relative font sizes (em, %)
*  - using relative font sizes, one can adjust all skin font sizes using one options (eg. increase all by 15%)
* 
*/
/*
* USED FROM: template.css
*/

#preview_spremenljivka {
    @include popup_general();

	overflow-x: hidden;
	overflow-y: auto;
    height: auto;
    max-height: 500px;
    width: 60vw;
    
    .buttons_holder{
        margin-top: 30px;
    }

	h1 {
        text-align: center;
        
		span {
			display: none;
		}
    }
    h1, h2, h3{
        font-size: 20px;
        line-height: 27px;
        font-weight: 500;
    }

	input {
		vertical-align: middle;
		padding: 0;
		margin: 0;
	}
	select {
		vertical-align: middle;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}
	textarea {
		vertical-align: middle;
		width: 40%;
		padding: 5px;
		margin: 0;
    }
    input[type="text"]{
        padding: 5px;
    }
	.disabled {
		border: 1px solid silver;
	}
	img {
		border: none;
		max-width: 800px;
	}
	label {
		vertical-align: middle;
		cursor: pointer;
	}
	table.grid_header_table {
		label {
			display: block;
		}
	}
	input[type="radio"] {
		cursor: pointer;
	}
	input[type="checkbox"] {
		cursor: pointer;
	}
	#admin_options {
		position: absolute;
		left: 20px;
		a {
			cursor: pointer;
			display: inline-block;
			width: 16px;
			height: 16px;
			margin: 0 2px;
		}
		a.printView {
			background: url("../../../admin/survey/icons/icons/printer.png");
		}
		a.normalView {
			background: url("../../../admin/survey/icons/icons/pencil_go.png");
			display: none;
		}
		a.pdfExport {
			background: url("../../../admin/survey/icons/icons/page_white_acrobat.png");
		}
		a.embed_out {
			background: url("../../../admin/survey/icons/icons/page_copy.png");
			width: 23px;
		}
	}
	.printDiv {
		border: 1px solid gray;
		padding: 10px;
		margin-right: 10px;
	}
	#logo {
		position: absolute;
		background: url("../../../main/survey/skins/Default/logo-small.png") no-repeat scroll 100% 0 transparent;
		right: 0px;
		a {
			display: block;
			width: 96px;
			height: 45px;
			text-indent: -9999px;
			overflow: hidden;
		}
    }

    .header_settings_holder{
        position: absolute;
        right: 20px;

        .progress_bar {

            span {
                float: left;
            }
            
            div {
                display: inline-block;
                width: 100px;
                height: 16px;
                border: 1px solid black;
                margin: 0 10px;
                float: left;
                
                span {
                    display: inline-block;
                    background-color: $progress_bar_background;
                    height: 16px;
                    float: none;
                }
            }
        }
	}
	#preview {
		position: fixed;
		top: 10px;
		right: 10px;
		width: 200px;
		text-align: center;
		z-index: 100;
		background-color: $main_background;
		border: 1px solid lightgray;
		font-size: 90%;
		select {
			font-size: 100%;
		}
	}
	div.buttons {
		text-align: center;
	}
	#footer_survey {
		text-align: center;
		font-size: 90%;
		p {
			margin: 0;
			padding: 0;
		}
		p.footer_mobile {
			margin-bottom: 10px;
		}
		p.footer_survey_UL {
			display: none;
		}
		p.footer_survey_FDV {
			display: none;
		}
		p.footer_survey_PoweredBy {
			display: none;
		}
	}
	.display_none {
		display: none;
	}
	.clr {
		clear: both;
	}
	.floatLeft {
		float: left;
		display: inline;
	}
	div.spremenljivka {

		p {
			margin: 0;
			padding: 0;
		}
	}
	.spremenljivka_info {
		color: $spremenljivka_info_text;
	}
	.variabla {
		padding: 5px;
	}
	div.spremenljivka.tip_7 {
		.variabla {
			label {
				padding: 5px 10px 5px 0;
			}
		}
	}
	div.spremenljivka.tip_21 {
		.variabla {
			label {
				padding: 5px 10px 5px 0;
			}
		}
	}
	span.reminder {
		position: absolute;
		color: $warnings_red;
		left: -8px;
	}
	div.naslov {
		position: relative;
		float: left;
		width: auto;
		min-width: 100px;
		max-width: 100%;
        padding: 0 0 20px 0;
        
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
    }
    
	p.spremenljivka_info {
		font-size: 80%;
	}
	.variable_holder {
		padding: 0 10px;
	}
	table.grid_table {
		table-layout: fixed;
		width: 100%;
		text-align: center;
		border-spacing: 0;
		td.alignLeft {
			text-align: left !important;
		}
		td.alignRight {
			text-align: right !important;
		}
		td.alignCenter {
			text-align: center !important;
		}
		label {
			display: block;
		}
		td {
			padding: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	thead {
		font-weight: 600;
	}
	td.question {
		text-align: left;
	}
	td.differential {
		text-align: left;
	}
	table {
		td.question {
			input {
				width: 80px;
			}
		}
	}
	table.grid_table.multigriddropdown {
		text-align: left;
	}
	td.category {
		input[type=text] {
			border: 0;
			outline: 1px solid lighten( $soft_blue, 10% );
		}
		textarea {
			border: 0;
			outline: 1px solid lighten( $soft_blue, 10% );
		}
	}
	table.doublegrid {
		thead {
			tr {
				&:first-child {
					height: 30px;
				}
			}
		}
	}
	table.doublecheckgrid {
		thead {
			tr {
				&:first-child {
					height: 30px;
				}
			}
		}
	}
	col.space {
		width: 5%;
	}
	td.double {
		border-left: 1px solid black;
	}
	.width_5 {
		width: 5%;
	}
	.width_10 {
		width: 10%;
	}
	.width_15 {
		width: 15%;
	}
	.width_20 {
		width: 20%;
	}
	.width_25 {
		width: 25%;
	}
	.width_30 {
		width: 30%;
	}
	.width_33 {
		width: 33.3%;
	}
	.width_35 {
		width: 35%;
	}
	.width_40 {
		width: 40%;
	}
	.width_45 {
		width: 45%;
	}
	.width_50 {
		width: 50%;
	}
	.width_55 {
		width: 55%;
	}
	.width_60 {
		width: 60%;
	}
	.width_65 {
		width: 65%;
	}
	.width_70 {
		width: 70%;
	}
	.width_75 {
		width: 75%;
	}
	.width_80 {
		width: 80%;
	}
	.width_85 {
		width: 85%;
	}
	.width_90 {
		width: 90%;
	}
	.width_95 {
		width: 95%;
	}
	.width_100 {
		width: 100%;
	}
	table.text_vrednost {
		table-layout: fixed;
		text-align: left;
		width: 100%;
		border-spacing: 0;
	}
	.limit {
		color: $warnings_red;
		cursor: default;
	}
	table.ranking_table {
		width: 100%;
		table-layout: fixed;
		border-spacing: 0;
		td {
			width: 45%;
			padding: 5px;
			vertical-align: top;
		}
		td.middle {
			width: 10%;
			vertical-align: top;
			text-align: center;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
	td.middle {
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -20px;
		}
	}
	.handle {
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
	}
	.handle_long {
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
	}
	.ime {
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
	}
	.izbran {
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
	}
	.ranking {
		cursor: pointer;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
		position: relative;
		background-color: $main_background;
	}
	.ranking_long {
		cursor: pointer;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 230px;
		padding: 5px;
		margin: 0 auto 10px auto;
		border: 1px solid #000000;
		height: 15px;
		text-align: center;
		overflow: hidden;
		position: relative;
		background-color: $main_background;
	}
	.frame_ranking {
		width: 230px !important;
		padding: 5px;
		margin: 0px auto 10px auto;
		border: 1px dashed #000000;
		height: 15px;
		text-indent: -25px;
		font-weight: bold;
	}
	.dropholder {
		position: relative;
		padding-top: 11px;
		.dropzone {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
	.dropzone {
		border-top: 1px solid black;
		min-height: 100px;
		padding-top: 10px;
	}
	.frame_dropping {
		width: 230px;
		padding: 5px;
		margin: 0px auto 10px auto;
		height: 15px;
		text-indent: -25px;
		background-color: $soft_blue_very_lighten;
		border: 1px solid $soft_blue;
	}
	.frame_dropping_titles {
		width: 230px;
		padding: 5px;
		margin: 0px auto 0px auto;
		height: 15px;
		text-align: center;
		background-color: $main_background;
		border-top: 1px solid $soft_blue;
		border-left: 1px solid $soft_blue;
		border-right: 1px solid $soft_blue;
	}
	.moving {
		cursor: pointer;
		margin-left: auto;
		margin-right: auto;
		width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.frame_moving {
		width: 230px;
		padding: 5px;
		margin: 0px auto 10px auto;
		border: 1px dashed #000000;
		height: 15px;
		text-indent: -25px;
		font-weight: bold;
	}
	ul.sorting {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.sortholder {
		margin: 0 auto;
		width: 250px;
		padding: 5px;
	}
	.sortzone {
		position: absolute;
		margin: 0 auto 0 auto;
		width: 250px;
	}
	.spremenljivka.tip_17 {
		input {
			width: 50px;
		}
	}
	.variabla_sum {
		text-align: right;
		padding: 5px;
		input {
			width: 50px;
		}
	}
	.variabla_sum.sum {
		float: left;
		border-top: 1px solid black;
	}
	.stat {
		float: right;
	}
	#vnos {
		position: absolute;
		top: 10px;
		left: 10px;
		border: 3px solid $grey_light;
		background-color: #eee;
		text-align: center;
		padding: 3px;
	}
	p.vnos {
		width: 100%;
		text-align: center;
	}
	.content_status {
		border: none;
		padding-bottom: 2px;
		span {
			display: inline-table;
		}
	}
	.counter {
		float: left;
		width: auto;
		padding-top: 5px;
		display: block;
	}
	div.comment {
		font-style: italic;
		color: $warnings_red;
		float: left;
		width: 98%;
		padding-top: 5px;
		display: block;
		border-top: 1px dashed #cccccc;
	}
	#edit_warning {
		width: 380px;
		margin: -15px 0 5px 15px;
		padding: 5px;
		border: 2px red solid;
	}
	.arrow {
		cursor: pointer;
		width: 24px;
		height: 24px;
		margin: 0 auto;
	}
	#arrow_up {
		background-image: url('../../../main/survey/skins/Default/arrowU.png');
		&:hover {
			background-image: url('../../../main/survey/skins/Default/arrowU2.png');
		}
	}
	#arrow_down {
		background-image: url('../../../main/survey/skins/Default/arrowD.png');
		&:hover {
			background-image: url('../../../main/survey/skins/Default/arrowD2.png');
		}
	}
	#arrow_left {
		background-image: url('../../../main/survey/skins/Default/arrowL.png');
		&:hover {
			background-image: url('../../../main/survey/skins/Default/arrowL2.png');
		}
	}
	#arrow_right {
		background-image: url('../../../main/survey/skins/Default/arrowR.png');
		&:hover {
			background-image: url('../../../main/survey/skins/Default/arrowR2.png');
		}
	}
	#dynamic_count {
		width: 60px;
		padding: 7px 0;
		font-weight: bold;
		color: $dynamic_count_text;
	}
}
#tip_preview {
	position: absolute;
	display: none;
	z-index: 9999;
	width: auto;
	height: auto;
	pointer-events: none;
}
.tip_preview_sub {
	display: none;
	margin: 10px 10px 10px 10px;
	>span {
		padding: 10px;
	}
}
.inside {
	min-width: 380px;
	background-color: $soft_blue_very_lighten;
	border: 1px $soft_blue solid;
}
.tip_sample {
	padding: 10px;
	overflow: hidden;
	margin-top: 10px;
	div.spremenljivka {
		div.naslov {
			font-weight: bold;
			width: auto;
			padding: 0;
			p {
				margin: 0;
			}
		}
	}
}
.tip_sample_text {
	font-weight: 500;
}
.tip_sample_option {
	padding-left: 5px;
	width: 100%;
	div {
		display: block;
		float: left;
		width: 100px;
	}
	span {
		display: block;
		float: left;
		width: 80px;
		text-align: center;
		margin-bottom: 3px;
	}
}
.tip_sample_option2 {
	padding-left: 5px;
	width: 100%;
	div {
		display: block;
		float: left;
		width: 100px;
	}
	span {
		display: block;
		float: left;
		width: 80px;
		text-align: center;
		margin-bottom: 3px;
		width: 60px;
	}
}