/*
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 : 13-Aug-2018, 12:32:48
    Author     : podkrizniku
*/

#branching{
    li.if,
    li.block,
    li.loop{
        display: flex;

        .if_remove{
            display: none;
            
            z-index: 5;
            position: absolute;
            top: 0;
            right: 0;

            a{
                margin-left: 16px;
            }

            .faicon:before{
                line-height: 28px;
                font-size: 16px;
            }
        }

        .pm.faicon{
            padding: 3px 8px 0 0;
            margin-left: -20px;
        }

        .if_content {
            width: 100%;

            strong{
                font-weight: 600;
            }

            span.conditions_display {
                cursor: pointer;
                display: block;
                line-height: 28px;
            }
            
            .clr_if,
            .clr_bl,
            .clr_lp{
                color: $blue;
                font-weight: 600;
            }

            .colorif,
            .colorblock,
            .colorif{
                color: $blue;
                font-weight: 400;
            }
        }

        .if_warning{
            margin-left: 16px;

            color: $red;
            font-size: 14px;

            span.faicon{
                margin-right: 4px;

                &:before{
                    color: $red;
                    font-size: 14px;
                }
            }
        }

        &:hover {
            div.if_remove {
                display: block;
            }
        }
    }

    li.if.if_editing,
    li.block.if_editing,
    li.loop.if_editing{

        div.if_remove {
            display: block;
            padding: 10px 12px;
        }

        .if_content {
            padding: 12px;

            background-color: $medium-blue;

            border: 1px #CCE4F9 solid;
            border-left: 1px $blue solid;
            border-radius: 1px 2px 2px 1px;
        }
    }

    li.endif,
    li.endblock,
    li.endloop,
    li.inout{
        &:hover {
            cursor: pointer;
        }

        .clr_if,
        .clr_bl,
        .clr_lp{
            color: $blue;
            font-weight: 600;
        }

        .colorif,
        .colorblock,
        .colorif{
            color: $blue;
            font-weight: 400;
        }
    }

    li.endif_editing {
        padding: 12px;

        background-color: $medium-blue;
            
        border: 1px #CCE4F9 solid;
        border-left: 1px $blue solid;
        border-radius: 1px 2px 2px 1px;
    }

    ul.if_editing{

        div.spr,
        li.spr,
        li.if,
        li.endif,
        li.block,
        li.endblock,
        li.loop,
        li.endloop{
            border-left: 1px $blue solid;
        }
    }


    // Float z nastavitvami na desni
    #div_condition_editing_float {
        display: flex;
        flex-direction: column;

        box-sizing: border-box;
        position: absolute;
        top: 0;
        right: -389px;

        width: 325px;

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

        // Naslovna vrstica
        .condition_header{
            height: 45px;
            padding: 0 7px;
            margin-bottom: 16px;

            color: $black;
            font-weight: 600;
            font-size: 14px;
            line-height: 45px;
            text-transform: uppercase;

            background-color: $medium-blue;
            border-bottom: 1px solid #CCE4F9;

            .faicon{
                margin-right: 8px;

                &:before{
                    color: $blue;
                }
            }
        }

        // Glavna vsebina
        .condition_edit {
            margin: 0 12px;

            background-color: white;

            // Fieldset znotraj urejanja
            fieldset {
                display: flex;
                flex-direction: column;
        
                margin-bottom: 16px;
                padding: 0;
        
                border: 0;
                border-top: 1px solid $dark-gray2;
        
        
                legend {
                    margin: 0;
                    padding: 0 10px 0 0;
        
                    color: $black;
                    font-weight: 700;
                    font-size: 14px;
                    text-transform: none;
                    
                    background-color: transparent;
                }
            }  
            
            // Posamezen blok nastavitve
            .condition_setting_holder{
                display: flex;
                flex-direction: column;

                margin-top: 8px;

                &.space_bottom{
                    margin-top: 0;
                    margin-bottom: 16px;

                    .condition_setting_line{
                        margin-top: 0px;
                    }
                }

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

                    min-height: 20px;
                    margin-top: 8px;

                    line-height: 20px;
                    color: $black;
                    font-size: 14px;

                    &.half-half{
                        justify-content: space-between;

                        label{
                            width: 50%;
                            margin: 0;
                        }

                        .content{
                            width: 50%;

                            input[type="text"],
                            input[type="number"],
                            select,
                            textarea{
                                width: 100%;
                            }
                        }
                    }

                    &.with-icon{

                        span{
                            display: flex;
                            align-items: center;

                            cursor: pointer;
                            color: $blue;
    
                            &:hover{
                                color: $dark-blue;
                                
                                .faicon::before{
                                    color: $dark-blue;
                                }
                            }
                        }
                        
                        .faicon{
                            margin-right: 8px;
    
                            &:before{
                                color: $blue;
                                font-size: 18px;
                            }
                        }
                    }
                }
            }

            p, 
            span,
            label{
                line-height: 20px;
                color: $black;
                font-size: 14px;
            }

            .jquery-selectbox {
                background-color: white;

                background: #FFFFFF;
                border: 1px solid $dark-gray2;
                box-sizing: border-box;
                border-radius: 2px;
            }

            select{
                cursor: pointer;
                
                box-sizing: border-box;
                height: 30px;
                padding: 0 8px;

                background-color: $white;

                border: 1px solid $dark-gray2;
                border-radius: 2px;
            }

            input[type="text"],           
            input[type="number"]{            
                box-sizing: border-box;
                padding: 8px;
                height: 30px;

                background-color: $white;

                border: 1px solid $dark-gray2;
                border-radius: 2px;
            }

            textarea{            
                box-sizing: border-box;
                padding: 8px;
                min-height: 30px;

                font-size: 14px;

                background-color: $white;

                border: 1px solid $dark-gray2;
                border-radius: 2px;
            }
        }

        // Gumbi na dnu
        .button_holder {
            flex-direction: column;

            margin: 0 16px 10px 16px;
            padding-top: 8px;

            border-top: 1px $dark-gray2 solid;

            button{
                margin-bottom: 8px;

                &:last-of-type{
                    margin-bottom: 0;
                }
            }
        }

        .remove_condition_holder{
            margin: 0 16px;
            padding: 16px 0;

            border-top: 1px $dark-gray2 solid;

            div{
                cursor: pointer;
                margin-bottom: 16px;

                color: $blue;
                font-size: 14px;

                transition: 0.2s;

                .faicon{
                    margin-right: 8px;

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

                &:last-child{
                    margin-bottom: 0;
                }

                &:hover{
                    color: $dark-blue;

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




    
    // Naslov popupa, črta pod naslovom
    span.IF_title_start {
        font-weight: $heavy;
        color: $blue;
        margin-right: 8px;
    }

    span.IF_title {
        font-weight: $semi-bold;
        text-transform: uppercase;
    }

    span.IF_title_line {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-top: 8px;
        border-top: 1px solid $dark-gray;
    }

    select.spremenljivka_select {
        option {
            max-width: 500px;
        }
    }
    .condition {
        position: relative;
        left: -21px;
    }
    span.endif {
        position: relative;
        left: -29px;
        font-weight: bold;
    }

    
    .error_display {
        display: block;
        line-height: 24px;
    }
    .tbl_ce_bck_blue {
        background-color: $blue;
    }
    .tbl_ce_lol {
        border-top: 1px solid $gray;
        border-bottom: 1px solid $gray;
        border-left: 1px solid $gray;
    }
    .tbl_ce_tb {
        border-top: 1px solid $gray;
        border-bottom: 1px solid $gray;
    }
    .tbl_ce_lor {
        border-top: 1px solid $gray;
        border-bottom: 1px solid $gray;
        border-right: 1px solid $gray;
    }

    .endif {
        a.surveycomment {
            padding-right: 15px;
            font-size: 10px;
        }
    }
    .endblock {
        a.surveycomment {
            padding-right: 15px;
            font-size: 10px;
        }
    }
    #condition_editing_bottom_placeholder {
        display: block;
        height: 1px;
        margin-bottom: 15px;
        border-top: 1px solid $blue;
    }

}


#div_condition_editing {
    display: none;

    height: auto;
    width: 800px;
    
    div#div_condition_editing_container {
        margin-bottom: 44px;
    }

    .error_display {
        background-color: transparent;
    }

    .condition_editing_vrednost_title {
        margin: 8px 0;
        font-size: 14px;
        font-weight: 600;
    }
}


//IF - vsebina pogoja, kalkulacije, kvote
#div_condition_editing_inner,
#quota_editing_inner,
#calculation_editing_inner{

    .condition_editing_preview {

    }

    .condition_editing_body,
    .quota_editing_body,
    .calculation_editing_body{
        max-height: 70vh;
        overflow-y: auto;

        margin: 32px 0 0 0;            

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

            box-sizing: border-box;
            width: 100%;
            margin-bottom: 8px;

            &.conjunction{
                padding-left: 22px;
            }
                
            .move_holder{
                cursor: pointer;

                margin-right: 12px;

                .faicon:before{
                    font-size: 20px;
                    color: $blue;
                }
            }

            .white_holder{
                display: flex;
                flex-grow: 1;
                align-items: center;
                justify-content: space-between;

                padding: 32px 0;

                font-size: 14px;

                background-color: $white;

                span,
                label{
                    font-size: 14px;
                }

                .column{
                    display: flex;
                    align-items: baseline;

                    padding: 0 16px;

                    &.bracket{
                        flex-direction: column;

                        .bracket_icons{
                            display: flex;
                            align-items: baseline;
                            justify-content: space-evenly;

                            width: 100%;

                            .faicon{

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

                                &.icon-grey_normal:before{
                                    line-height: 22px;
                                    color: $very-dark-gray2;
                                }
                            }
                        }

                        .bracket_text{
                            font-size: 12px;
                            line-height: 15px;
                        }
                    }

                    &.variable{
                        flex-direction: column;
                    }

                    &.operator{
                        flex-grow: 1;

                        .fill_vrednost,
                        .ostanek{
                            display: flex;
                            align-items: center;

                            input,
                            select,
                            a{
                                margin-right: 32px;

                                &.operator{
                                    width: 50px;
                                }

                                &[type="text"]{
                                    width: 100px;
                                }

                                &:last-child{
                                    margin-right: 0;
                                }

                                .faicon.edit{
                                    margin-left: 8px;
                                }
                            }

                            .edit_fill_value,
                            .preview_fill_value{
                                display: flex;
                                flex-direction: column;

                                label,
                                span{
                                    display: flex;
                                    margin-bottom: 8px;

                                    &:last-child{
                                        margin-bottom: 0;
                                    }
                                }

                                input[type="checkbox"].enka-admin-custom + span.enka-checkbox-radio::before {
                                    color: $very-dark-gray;
                                }
                                input[type="checkbox"].enka-admin-custom:checked + span.enka-checkbox-radio::before {
                                    color: $blue;
                                }
                            }
                        }
                    }
                }
            }

            .delete_holder{
                margin-left: 12px;

                .faicon:before{
                    font-size: 16px;
                    color: $blue;
                }
            }

            select{
                margin: 0;
                width: auto;
            }

            input[type="text"]{
                margin: 0;
                width: auto;
            }
        }
    }

    .div_condition_bottom,
    .div_quota_bottom,
    .div_calculation_bottom {
        margin: 8px 0 0 22px;

        font-size: 14px;
        font-weight: 400;

        &.loop_bottom{
            margin: 12px 0 0 0;
        }
    }
}

//Inline komentarji pri IF in BLOK
.comment_inline {
    margin-left: 16px;
}