/* 
    Loading okna
*/

body.wait {
	#loading {
		display: block;
	}
}

body.waitlong {
	#loading {
        bottom: auto;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
	}
}

/*loading word at bottom left*/
#loading {
    display: none;
	z-index: 900;
	position: fixed;
	bottom: 16px;
    left: 16px;

    box-sizing: border-box;
    width: 275px;
    height: 38px;

	background-color: $white;
	border: 1px solid $black;
    border-radius: 2px;
    

    span.spinner{
        position: absolute;
        top: 10px;
        left: 16px;

        font-size: 14px;

        &::before{
            font-size: 14px;
        }
    }

    span.text{
        position: absolute;
        top: 8px;
        left: 40px;

        font-size: 14px;
    }
}


// Popupi spodaj levo
.bottom_left_popup_holder{
    display: flex;
    flex-direction: column-reverse;

    z-index: 78;
    position: fixed;
    bottom: 16px;
    left: 16px;  


    /* Action spodaj levo (npr. uspesno kopiranje...) */
    #action_note_holder {
        display: flex;
        flex-direction: column-reverse;
    }

    .action_note_box{
        display: flex;
        align-items: center;

        position: relative;
        box-sizing: border-box;
        width: 275px;
        height: 38px;
        padding: 0 16px;
        margin-top: 16px;

        font-size: 14px;

        background-color: $white;
        border: 1px solid $blue;
        border-radius: 2px;
        
        &.success,
        &.active-users{
            border-color: $blue;

            .faicon:before{
                color: $blue;
            }
        }

        &.error{
            border-color: $red;

            .faicon:before{
                color: $red;
            }
        }

        span.faicon{
            margin-right: 8px;

            &::before{
                font-size: 15px;
            }
        }

        span.text{
            font-size: 14px;
        }

        .close{
            cursor: pointer;
            
            position: absolute !important;
            top: 10px;
            right: 10px;
            z-index: 9999;

            font-size: 12px !important;
            color: $very-dark-gray;

            &:hover{
                color: $black;
            }

            span{
                color: $very-dark-gray;
                text-decoration: none;
                
                &:hover{
                    color: $black;
                }
            }
        }
    }
}