/* 
    Popupi - splosno
*/


@mixin popup_general() {
    /*max-height: 90vh;
    overflow-y: scroll;*/
    max-width: 90vw;

    padding: 20px;

    /*font-size: 13px;
    line-height: 20px;*/

    background-color: white;
    border-left: 6px $strong_blue solid !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.34);

    .popup_close{
        position: absolute !important;
        top: 20px;
        right: 20px;
        z-index: 9999;

        font-size: 32px !important;
        line-height: 25px;
        color: $grey_very_light;

        &:hover{
            color: $strong_blue;
        }

        a{
            color: $grey_very_light;
            
            &:hover{
                color: $strong_blue;
            }
        }
    }

    h2,
    .divPopUp_top{
        max-width: 95%;
        margin-top: 0px;
        margin-bottom: 20px;

        font-size: 20px;
        line-height: 27px;
        font-weight: 500;
        color: $main_text;
    }

    p{
        line-height: 20px;
    }


    &.popup_violet{
        border-left: 6px $violet solid !important;

        div.buttonwrapper a {
            background-color: $violet;
            border: 1px $violet solid;
    
            &:hover{
                background-color: $violet_light;
                border: 1px $violet_light solid;
            }
        }
        div.buttonwrapper a.ovalbutton_gray{
            color: $violet !important;
            background-color: white !important;
    
            &:hover{
                color: white !important;
                background-color: $violet !important;
            }
        }
    }

    &.popup_orange{
        border-left: 6px $orange solid !important;

        div.buttonwrapper a {
            background-color: $orange;
            border: 1px $orange solid;
    
            &:hover{
                background-color: $orange_lighten;
                border: 1px $orange_lighten solid;
            }
        }
        div.buttonwrapper a.ovalbutton_gray{
            color: $orange !important;
            background-color: white !important;
    
            &:hover{
                color: white !important;
                background-color: $orange !important;
            }
        }
    } 

    &.popup_red{
        border-left: 6px $red solid !important;

        div.buttonwrapper a {
            background-color: $red;
            border: 1px $red solid;
    
            &:hover{
                background-color: $red_lighten;
                border: 1px $red_lighten solid;
            }
        }
        div.buttonwrapper a.ovalbutton_gray{
            color: $red !important;
            background-color: white !important;
    
            &:hover{
                color: white !important;
                background-color: $red !important;
            }
        }
    } 
}



#fade {
	display: none;
	position: fixed;
    z-index: 79;
    
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

    background-color: rgba(0, 0, 0, 0.75);

    .popup_holder{
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        #fullscreen {
            display: none;
            position: relative;
            z-index: 81;
        }
    
        /* basic popup */
        .divPopUp {
            @include popup_general();

            position: relative;
                        
            .buttons_holder{
                position: absolute;
                bottom: 20px;
                right: 20px;
            }

            div.divPopUp_top {
                display: inline-block;
                height: auto;
                top: 0;
                left: 0;
                right: 0;
            }
            div.divPopUp_content {
                height: 100%;
            }
            div.divPopUp_btm {
                display: inline-block;
                bottom: 0;
                left: 0;
                right: 0;
                
                width: 100%;
                height: auto;

                padding: 20px 0px 0px 0px !important;
                margin-right: 0;
                margin-bottom: 0;
            }
        }
    }    
}

/* Generic popup */
#popup_note {
    display: none;
    max-width: 600px !important;

    .popup_content{
        margin-bottom: 40px;
        line-height: 24px;
    }
}

#clipboard {
	position: fixed;
	top: 10px;
	left: 50%;
	margin-left: -180px;
	width: 340px;
	background-color: $strong_blue;
	color: white;
	padding: 5px 10px 5px 10px;
	z-index: 1000;
	display: none;
	p {
		margin: 0;
	}
	a {
		color: white;
	}
}
#request_help_content {
	a {
		padding-left: 0 !important;
		font-weight: 600 !important;
		color: $strong_blue !important;
		
		&:hover {
			color: $orange !important;
		}
	}
}
/*active editors*/
.active-alert {
	position: fixed;
	top: 0;
	right: 0;
	background-color: $grey_super_light;
	padding: 1px 10px;
	border-left: 1px solid $red_error;
	border-bottom: 1px solid $red_error;
	z-index: 10;
}
span.active-editors {
	color: $grey_normal;
	font-weight: normal;
}


#div_float_editing {
	display: none;
	
	min-height: 350px;
	max-height: 600px;
	overflow: auto;
	width: 702px;
}
#div_float_editing_inner {
	border: 1px solid yellow;
	overflow: auto;
	min-height: 150px;
	height: 489px;
	max-height: 650px;
}


#div_error {
	ul {
		list-style: square inside;
	}
	li {
		padding-bottom: 5px;
	}
	padding: 10px;
	margin: 3px;
	background-color: $soft_blue_very_lighten;
        border: 1px solid $soft_blue;
	img {
		margin-right: 5px;
	}
}
.alert_authors {
	display: block;
	text-indent: 30px;
}
.alert_textarea {
	border: 1px solid silver;
	background-color: $grey_normal;
}
#invisible-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999999;
}
#invisible-close {
	z-index: 99999999;
	cursor: pointer;
	top: 15px;
	right: 20% !important;
	position: absolute;
	
	width: auto;
	padding: 5px 25px;

	font-size: 15px !important;
	font-weight: 500 !important;
	color: $strong_blue;
	text-transform: uppercase;
	
	background-color: $soft_blue_very_lighten;
	background-image: none;
	border: 2px solid $strong_blue;
	
	&:hover{
		color: $orange;
		border-color: $orange;
	}
}
#cookie_alert {
	position: absolute;
	right: 10px;
	top: 80px;
	width: 300px;
	
	background-color: $orange_super_lighten !important;
	border: 1px solid $orange;
	
	span {
		display: block;
		padding-bottom: 7px;
	}
	a{
		font-weight: 500;
	}
}
#ie_alert {
	position: absolute;
	top: -30px;
	width: 100%;
	padding: 7px 0;
	z-index: 9999;
	background-color: $orange_super_lighten;
	border-top: $orange_very_darken 1px solid;
	border-bottom: $orange_very_darken 1px solid;
	text-align: center;
	font-weight: bold;
}
#pasteFromWordAlert {
	display: none;
	bottom: 15%;
	left: 50%;
	z-index: 99999;
	position: fixed;
	margin-left: -100px;
	padding: 3px 15px;
	text-align: center;
	font-weight: normal;
	font-size: 13px;
	line-height: 30px;
	color: $grey_super_dark;
	background-color: $orange_very_lighten;
	border: 1px solid $orange;
}
#alternativno-obvestilo.error {
	color: $orange_darken;
}
#alternativno-obvestilo.success {
	color: $strong_blue;
}