/*
	Vsebina ankete
*/

iframe{
	max-width: 100%;
}

.variable_holder .text_prevAnswers .text_prevAnswers_list .text_prevAnswers_popup, 
#popup {
	position: absolute;
	
	top: 0;
	left: 0;
	
    width: 80%;
    height: auto !important;
    margin: 40px 5%;
    
    .prevAnswers_button{
		float: right;
		margin-top: 15px;
        margin-bottom: 0;
    }
}

#outercontainer{
    
    &.hide_mobile_img p img{
        display: none;
    }

	#container {	
		width: 100%;
		min-width: 240px;
		margin: 0 0 10px -2px;

		background: white;
		
		border: 1px white solid;
		
		#logo {
			display: none;	
		}
		
		h1 {	
			padding: 25px 5px 25px 5px;
			margin: 0 0 10px 0;
			
			font-size: 24px;
			font-weight: 600;
			text-align: center;
			line-height: 30px;
		}
		
		p{ 
			img{
				max-width: 90%;
				height: auto;
				margin-left: 10px;	
			}
			img.always_show{
				display: inline !important;
			}
			img.always_hide{
				display: none !important;
			}
		}
			
		.grupa {
			min-height: 100px;
			padding-top: 0px;
	
			background-color: white;
			
			
			/* POSAMEZNO VPRASANJE */
			.spremenljivka{
				margin: 10px 10px;
				padding: 10px 10px 0 10px !important;
				
				&.required, 
				&.required_require, 
				&.required_limit {
					border: 1px red solid !important;
					outline: 0 !important;
					border-radius: 4px;
				}

				&:after{
					margin-top: 20px;
				}

				.counter {
                    padding-top: 9px;
					font-weight: normal;
					max-width: 50%;
				}
				
				.naslov{    
					margin: 0;
					padding: 5px 0 20px 0;
					
					font-size: 18px;
					color: #333;
					font-weight: 600;
					line-height: 25px;

					.reminder{
						margin-top: 5px;
					}
				}
				
				.spremenljivka_info {
					margin-top: 5px;
				
					font-size: 13px;
					color: #999;
					line-height: 14px;
				}

				h3{
					font-size: 18px;
					color: #333;
					font-weight: 700;
					line-height: 25px;
					
					p{
						padding: 0 10px;
						color: #333333;
					}
				}
				
				span.reminder {
					left: -1px;
				}
				
				table thead,
				table tr.table-header {
					font-weight: normal;
				}

				.variable_holder {      
					/* Tole porusi na mobitelu, ce so v vecih stolpcih */
					/*position: relative;*/

					margin: 0;
					padding: 0;

					border: 0;

					.variabla{
						font-weight: normal;	
					}
					
					.question_comment{

						textarea{
							box-sizing: border-box;
							width: 100%;
						}
					}
				}

				div.variable_holder.clr {
					background: white;	
					overflow: auto;
					margin-bottom: 10px;
				}
				
				input[type="checkbox"] + span.enka-checkbox-radio, input[type="radio"] + span.enka-checkbox-radio {
                    font-size: 18px;
				}
				


				/* TIP RADIO, DROPDOWN IN CHECKBOX */
				&.tip_1,
				&.tip_2,
				&.tip_3{

					.variable_holder {

						div div {
							padding-top: 5px;
						}

						.variabla {
							padding: 1px 0;
				
							input[type='radio'] {
								position: relative;
								top: -3px;
							}
				
							select {
								width: 100%;
								margin-bottom: 5px;
								padding: 10px;
				
								option{
									padding: 5px 5px;
								}
							}
				
							select[size="2"] {
								height: auto !important;
								min-height: 36px;
								padding: 0;
				
								option{
									padding: 5px 5px;

									&:hover{
										background-color: #efefef;
									}
								}
							}
				
							input[type="text"] {
								max-width: 150px !important;	
							}
				
							label {
								box-sizing: border-box;
								width: 100%;
								height: 100%;
						
								padding: 7px 9px;
						
								color: #333333;
				
								border: 1px #fff solid;
								border-radius: 3px;
				
								img{
									width: 85% !important;
									vertical-align: middle;
				
									border: 1px #fff solid;
				
									&:hover{
										border: 1px #efefef solid;
									}
								}
							}
							&:hover label,
							&.checked label{
								border: 1px #E2E2E2 solid;
								background-color: #efefef;
				
								img{
									border: 1px #efefef solid;
								}
							}

							table {
								/*margin-bottom: 10px;*/
				
								&.width_30{
									width: 100% !important;
				
									border: 1px #fff solid;
									border-radius: 3px;
				
									tr{
										line-height: 12px;
										
										td{
											&:first-child{
												width: 80% !important;
											}
					
											label{
												background-color: #fff !important;
												border: 1px #fff solid !important;
											}
										}
									}
									
									&:hover{
										border: 1px #E2E2E2 solid;
										background-color: #efefef;
				
										tr{
											border: 0;
											background-color: #efefef;
				
											td{
												border: 0;
												background-color: #efefef;

												label{
													border: 1px #efefef solid !important;
													background-color: #efefef !important;
												}
											}
										}
									}
								}
							}
							&.checked table{
								&.width_30{
									border: 1px #E2E2E2 solid;
									background-color: #efefef;

									tr{
										border: 0;
										background-color: #efefef;

										td{
											border: 0;
											background-color: #efefef;

											label{
												border: 1px #efefef solid !important;
												background-color: #efefef !important;
											}
										}
									}
								}
							}
						}
						.variabla.custom_radio_picture,
						.variabla.visual-radio-scale{
				
							label{
								padding: 7px 12px;
								text-align: center;
				
								span.enka-custom-radio::before,
								.visual-radio-scale,
								.enka-vizualna-skala {
									letter-spacing: 0px;
								}
							}
				
							&:hover label,
							&.checked label{
								background-color: #fff;
								border: 1px #fff solid;
							}
						}
						
						.hotspot{
							width: 100% !important;
						}
					}
				}
				/* END TIP RADIO, DROPDOWN IN CHECKBOX */


				/* TIP TEXT, NUMBER */
				&.tip_4,
				&.tip_21,
				&.tip_7{

					label{
						padding: 0 !important;

						line-height: 24px;
					}

					input[type="text"],
					input[type="email"]{
						box-sizing: border-box;

						width: 100%;           
						padding: 10px;
					}

					textarea{
						box-sizing: border-box;

						width: 100%;
						max-width: 100% !important;
						padding: 10px;
					}

					.text_vrednost tbody tr{ 
						
						td{
							&.variabla{
								display: flex;
								flex-direction: column;

								margin-bottom: 5px;

								input{
									width: 100%;
									margin-top: 5px;
									margin-bottom: 5px;
								}
				
								textarea{
									width: 100%;
									max-height: 100px;
								}
							}
						}
					}

					&.tip_7 label.limit{
						display: block;
						margin-bottom: 20px;
					}
					
					.upload_foto_result{
						width: 100%;
						height: auto;
						
						margin: 20px 0 0 0 !important;
						padding: 0 !important;
					}

                    .upload_fotoresults_delete{
                        position: absolute;
                        left: 100px;
                        margin: 20px 0 10px 0;
                    }
				}
				/* END TIP TEXT, NUMBER */

				/* TIP DATUM */
				&.tip_8{

					input[type="text"],
					input[type="email"]{
						box-sizing: border-box;

						width: 80%;           
						padding: 10px;
					}

					.ui-datepicker{
						font-size: 13px;
					}
				}
				/* END TIP DATUM */


				/* TIP TABELA */
				&.tip_6,
				&.tip_16,
				&.tip_19,
				&.tip_20,
				&.tip_24{

					.grid_mobile{
						
						.grid_mobile_question{
							margin: 10px 0 15px;
							
							/*line-height: 24px;*/
							
							.grid_mobile_title{
								padding: 7px 9px;
							
								font-weight: 600;
							}
							
							.grid_mobile_variables{
								width: 100%;
								box-sizing: border-box;
								
								.grid_mobile_variable{
									width: 100%;
									height: 100%;
									box-sizing: border-box;
									
                                    padding: 7px 9px;
                                    margin: 2px 0;
									
									color: #333333;
									
									border: 1px #fff solid;
									border-radius: 3px;
																		
									label{
										vertical-align: baseline;
									}
								
									.grid_mobile_variable_title{
									
									}
								}
                            }

                            .grid_mobile_double_subtitle{
                                padding: 5px 8px;
                            }
						}
                    }
                    
                    .grid_mobile.checkbox,
                    .grid_mobile.radio{

                        .grid_mobile_variable{

                            &:hover,
                            &.checked{
                                background-color: #efefef;
                                border: 1px #E2E2E2 solid;						
                            }
                        }
                    }

                    .grid_mobile.radio.visual_scale,
                    .grid_mobile.radio.smiley_scale{

                        .grid_mobile_variables{
                            //width: auto !important;

                            .grid_mobile_variable{
                                display: inline-block;
                                //width: auto !important;

                                border: 0;	

                                &:hover,
                                &.checked{
                                    background-color: #fff;
                                    border: 0;		
                                }

								.visual-radio-table,
								.custom-radio-table{
									display: inline-block !important;
								}
                            }
                        }
                    }

                    .grid_mobile.text,
                    .grid_mobile.number{

                        .grid_mobile_variable{

                            input[type="text"],
                            input[type="email"]{
                                box-sizing: border-box;

                                width: 100%;           
                                padding: 10px;
                            }

                            textarea{
                                box-sizing: border-box;

                                width: 100%;
                                max-width: 100% !important;
                                padding: 10px;
                            }

                            .category > div{
                                max-height: 60px; 
                            }
                        }
                    }
					
					/* Mobilno rzpiranje tabel */
					.grid_mobile.mobile_expanding{
						
						.grid_mobile_title{
                            cursor: pointer;
                            display: flex;
                            justify-content: space-between;
							
							.faicon.mobile_expanding_arrow{
								font-family: $fontawesome;
								font-weight: 700;
                                font-size: 18px;
                                
                                padding-left: 10px;
								
								&.arrow_down::before{
									content: "\f078";
								}
							
								&.arrow_up::before{
									content: "\f077";
								}
							
							}
                        }
                        
                        .grid_mobile_result{
                            display: none;
                            
                            margin: 0px 30px 0 10px;

                            font-size: 13px;
                            color: #999;
                            line-height: 20px;
                            font-weight: 600;
                        }
					}
				
				
                    /* Ce nimamo mobilno prilagojenih tabel */
                    table.grid_table{
                        width: auto;
                        position: relative;

                        td.question{
                            min-width: 150px;
                            padding: 10px;
                        }
                        td.category{
                            min-width: 100px;
                        }
                    }

					.grid_light input, 
					.grid_dark input, 
					.grid_light textarea, 
					.grid_dark textarea, 
					.grid_dark label, 
					.grid_light label{
						max-width: 50px;
					}
					
					td.grid_light, 
					td.grid_dark {
						max-width: 100px;
					}
					
					.grid_dark label, 
					.grid_light label{
						display: inline !important; 
					}

					.grid_dark {
						color: #999;
					}


					.dynamic_mg_vrednost{
						margin-left: 5px;
					}
				}
				/* END TIP TABELA */


				/* TIP VSOTA */
				&.tip_18{

					input[type="text"]{
						box-sizing: border-box;

						width: 98%;           
						padding: 10px;
					}

					.vsota_besedilo {
						
						width: 98%;

						text-align: left;
						line-height: 25px;
					}

					.variabla_vsota {
						width: 98%;
					}

					.variabla_sum {
						width: 98%;
					}

					.variabla_sum:nth-last-child(2){
						margin-bottom: 10px;
					}

					.variabla_sum.sum {
						border-top: 1px solid #505050;
					}
				}
				/* END TIP VSOTA */


				/* TIP RANKING */
				&.tip_17{

					input[type="text"]{
						box-sizing: border-box;

						width: 98%;           
						padding: 10px;
					}
					
					select{
						width: 70px;
					}

					label{
						padding-bottom: 20px;

						line-height: 25px;          
					}

					.ranking{
						color: black;
						width: 90px;
						margin: 15px 0 0 5px;
					}
				
					img .frame_ranking_in{
						margin: -25px 0 0 -30px;
						width: 100px;
					}
				}
				/* END TIP RANKING */

				
				
				/* TIP LOKACIJA */
				&.tip_26{
					/* Iznici .variable_holder div div padding v google maps, ker vse popaci*/
					.map_spremenljivka div div{
						padding-top: 0px;
					}
				}
				/* END TIP LOKACIJA */
				

				/* TIP NAGOVOR */
				&.tip_5{
					&:after{
						margin-top: 10px;
					}
				}
                /* END TIP NAGOVOR */
                

                /* TIP SN */
				&.tip_9{
					.sn_name{

                        input[type="text"]{
                            box-sizing: border-box;
                            width: 90%;

                            margin-top: 5px;
                            margin-bottom: 5px;
                            padding: 10px;
                        }
                    }
                    
                    .sn_add_field{

                    }
				}
				/* END TIP SN */


				.textfield {
					max-width: 100px;
				}

				td img{
					margin-left: -5px;
					padding-right: 19px !important;
					margin-top: 84px !important;  
				}

				td b{
					color: #999;
				}



				#arrow_right, #arrow_left, #arrow_up, #arrow_down {
					background-repeat: no-repeat;
				}
				
				
				
				abbr.mouseover {
					border-bottom: 1px solid #000;
					background: #E2E2E2;
				}
				
				
				/* DRAG AND DROP ZA MOBILNIKE */
				.frame_dropping_mobile{
					width: 100px;
					margin: 0px auto 10px auto;
					height: 15px;

					background-color: #eff2f7;
					border: 1px solid #b9c5d9;
				}

				.frame_dropping_box_mobile{
					width: 100px;
					padding: 5px;
					margin: 10px auto 0px auto;

					height: 15px;
					text-indent: -25px;

					border-left: 4px solid #b9c5d9;
					border-right: 4px solid #b9c5d9;
					border-bottom: 4px solid #b9c5d9;
				}

				.frame_dropping_titles_mobile{
					width: 100px;
					margin: 0px auto 0px auto;
					height: 15px;

					text-align: center;

					background-color: #FFFFFF;

					border-top: 1px solid #b9c5d9;
					border-left: 1px solid #b9c5d9;
					border-right: 1px solid #b9c5d9;
				}

				.frame_dropping_titles_box_mobile{
					width: 100px;
					margin: 0px auto 0px auto;
					height: 15px;

					text-align: center;

					background-color: #FFFFFF;
				}

				.drag_and_drop_box_right{
					top: 15px!important;
					padding-left: 10px !important;
				}

				.drag_and_drop_box_right_after_refresh{
					padding-left: 10px !important;
				}

				.drag_and_drop_box_right_over{
					padding-left: 10px !important;
				}

				.frame_dropping_wider_mobile{
					width: 110px !important;
				}
				
				td.middle_mobile img {
					width: 20px;
					margin-left: 0px!important;
				}

				td.middle_mobile {
					width: 50px !important;
					position: absolute;
					top: 10%;
					left: 50%;
					margin-left: -20px;
				}

				.ranking_mobile, .ranking_long_mobile{
					width: 100px; 
					/*padding: 5px;*/
					margin: 0 auto 10px auto;
					border: 1px solid #000000; 
					/*height: 25px;*/
					height: 50px;
					text-align: center;	
					overflow: hidden;
					background-color: #ffffff;
				}

				.drag_and_drop {
					top: -6px;
					left: -1px;	
				}

				.drag_and_drop_right{
					top: -6px!important;
					left: -1px!important;	
				}
				/* KONEC DRAG AND DROP ZA MOBILNIKE */
				
				/* SLIDER ZA MOBILNIKE */
				.slider_mobile {
					display: inline-block;
					
					width: 95%;
					margin: 10px 10px 0 10px;
					
					background-color: #efefef;
					background-image: none !important;
					
					.ui-slider-handle{
						background-image: none !important;
					}
				}

				.slider_grid_mobile {
					display: inline-block;
					width: 95%;
					margin: 10px 10px 0 10px;
                    background-color: #efefef !important;
                    background-image: none !important;
				}

				.slider_minmaxlabel_mobile{
					width: 100%;	
				}

				.slider_grid_minmaxlabel_mobile{
					width: 100%;	
				}

				.ui-slider-label-mobile{
						position: absolute !important;
						top: 5px !important;
						text-align: center !important;
						/*left: 50% !important;*/
						/*right: 0% !important;*/
						margin-left: -1em !important;
						/*width: 2em !important;*/
						
				}

				.ui-slider-label-mobile-first{
						position: absolute !important;
						top: 5px !important;
						text-align: left;	
				}

				.ui-slider-label-mobile-last{
						position: absolute !important;
						top: 5px !important;
						text-align: right;
						right: 0% !important;	
				}

				/* KONEC SLIDER ZA MOBILNIKE */
				
				
				/* Fotografiranje za mobilnike - 21_7 */
				/* Skrije navadni upload gumb in prikaze lepsi gumb, za foto upload*/
				.upload_foto_file {
					display: none;
				}

				/* skrije div, ki se uporablja samo za desktop*/
				/* potrebno samo zaradi mobile safari, ker ima vgrajen flash (testirano na iPhone)*/
				.fotoparent{
					display: none !important;
				}

				.custom-foto-upload {
					background-image: url("../../main/survey/skins/Default/webcam_record.png");
					background-size: 56px 56px;
					background-repeat: no-repeat;
					background-position: center; 
					height : 56px;
					width: 56px;
					padding: 4px 4px 4px 4px;
					display: inline-block;
					cursor: pointer;
				}
				/* Konec Fotografiranje za mobilnike - 21_7 */
			}
		}

		.buttons{
			display: flex;
			justify-content: space-evenly;
			
			margin-top: 40px;
			margin-bottom: 20px;
			padding-top: 30px;

			border-top: 1px #ddeffd solid;

			input{
				margin: 0;
				padding: 10px 15px;
				
			}
        }
        
        #continue_later{
            margin: 10px 10px;
            padding: 10px 10px 0 10px !important;

            input[type="email"]{
                width: 100%;           
            }
        }
	}
}