@import "~/app-resources/less/theme.less";

@header-height: 55px;

@keyframes collapsMenuBar {
    0% {
        height: 28px;
        width: 28px;
    }

    50% {
        top: -80px;
        left: -120px;
        height: 120px;
        width: 120px;
        background-color: @color-light-red;
    }

    100% {
        height: 28px;
        width: 28px;
    }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, -@header-height, 0);
    transform: translate3d(0, -@header-height, 0);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translate3d(0, -@header-height, 0);
    transform: translate3d(0, -@header-height, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

#vat-container {
    //background: @color-white-smoke;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .right {
        text-align: right;
    }

    .slideup {
        animation: slideUp 1s;
    }

    .slidedown {
        animation: slideDown 1s;
    }

    .red-color {
        color: @color-light-red;
    }

    .vat-header {
        background: @color-background;
        position: relative;
        height: @header-height;
        border-bottom-width: 1px;
        border-bottom-color: @color-light-gray;
        border-bottom-style: solid;
        box-shadow: 0 1px 9px @color-light-gray;
        z-index: 100;

        &.collapsed {
            height: 0;
            display: none;
        }

        > div {
            padding-top: 10px;
        }

        input {
            width: 150px;
            padding-right: 13px;
            background: url(/app-resources/images/vat/down.png) no-repeat scroll right center transparent;
        }

        .vat-title {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            vertical-align: middle;
            border: none;
            padding-left: 20px; 
            font-size:16px;
            font-weight: 600;
            margin:0px 10px 0px 10px;
            font-weight:bold;
        }

        .vat-subheader {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            vertical-align: middle;
            border: none;
            padding-left: 20px;


            select {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                background: transparent;
            }
        }


        select::-ms-expand {
            display: none;
        }

        #vat-menu-buttons {
            margin-left: 0px;
            padding-left: 10px;


            a {
                color: #2f2f2f;
                display: inline-block;
                font-size: 14px;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 20px;
                padding-right: 20px;
                text-align: center;
                text-transform: none;
                text-decoration: none;
                border-bottom: 3px solid white;
                outline: none;


                span {
                    border: @thin-border solid @color-gray;
                    display: inline-block;
                    height: 20px;
                    margin-right: 10px;
                    width: 20px;
                    border-radius: 50%;
                    background: none;
                    vertical-align: middle;
                    font-size: 12px;
                }
            }


                a:hover {
                    text-decoration: none;
                    border-bottom: @thick-border solid @color-light-red;
                }

                a.active {
                    border-bottom: 3px solid @color-light-red;


                    span {
                        border: 0;
                        display: inline-block;
                        height: 20px;
                        margin-right: 10px;
                        width: 20px;
                        border-radius: 50%;
                        color: #FFF !important;
                        background: @color-light-red;
                        padding-top: 0.5px;
                    }
                }
        }
    }


    .btnAnimation {
        animation: collapsMenuBar 1s;
    }

    #menuCollapseBtn {
        float: right;
        position: relative;
        right: 50px;
        z-index: 100;

        a {
            position: absolute;
            border: @thin-border solid @color-light-gray;
            display: inline-block;
            height: 24px;
            width: 24px;
            text-align: center;
            border-radius: 50%;
            background: @color-white;
            font-size: 20px;
            text-transform: none;
            text-decoration: none;
            outline: none;


            i {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                vertical-align: middle;
                color: @color-light-gray;
            }
        }

        #a-up {
            top: -16px;

            i {
                top: 0;
            }
        }

        #a-down {
            top: -10px;

            i {
                top: 3px;
            }
        }

        #a-up:hover {
            top: -18px;
            height: 28px;
            width: 28px;
            color: @color-white;
            background-color: @color-light-red;
            border-width: 0;

            i {
                top: 2px;
            }
        }

        #a-down:hover {
            top: -10px;
            height: 28px;
            width: 28px;
            color: @color-white;
            background-color: @color-light-red;
            border-width: 0;

            i {
                top: 4px;
            }
        }
    }

    .vat-content {
        //background: @color-white-smoke;
        height: calc(~"100% - @{header-height}");
        margin-top: 0;
        position: relative;
        transition: height 1s linear;
        -webkit-transition: height 1s linear;
        /*z-index: 99;*/
        &.expanded {
            height: 100%;
        }
    }

}


.project-statuts-title {
    i {
        color: #CF2D1B;
        display: inline-block;
        font-size: 15px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .project-statuts-title-i-inactive {
        color: gray;
    }
}



.model-project-status {
    width: 320px;
    /*height: 800px;*/
    max-height:800px;


    .modal-dialog {
        width: 100%;
        height: 90%;
        margin: 20px auto;
        overflow-x:auto;
        overflow-y:auto;

        .modal-content {
            width: 100%;
            /*height: 100%;*/

            .modal-body {
                height: 90%;
            }
        }
    }

    .ul-status {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            /*height: 50px;*/
            line-height: 20px;

            i {
                color: #CF2D1B;
                display: inline-block;
                font-size: 15px;
                vertical-align: middle;
                margin-right: 5px;
            }

            ul {
                width: 100%;
                list-style: none;
                margin: 5px;
                /*padding: 5px;*/
                padding-left:25px;

                li {
                    margin-top:-20px;
                    margin-bottom: 15px;
                    i {                   
                        font-size: 12px;                    
                    }
                }
            }
        }


        .verticalLine {
            border-left: thin dashed #CF2D1B;
            border-left-width: 2px;
            height: 25px;
            margin-top: -3px;
            margin-left: 5px;
        }

        .verticalLine-add-bottom-line {
            border-bottom:thin dashed #CF2D1B;
            border-bottom-width:2px;
            width:20px;
        }

        .vertical-bottom-line {
            border-left: thin dashed #CF2D1B;
            border-left-width: 2px;
            height: 25px;
            margin-top: -3px;
            margin-left: 5px;
        }

        .i-inactive {
            color: lightgray;
        }

        .verticalLine-inactive {
            border-left-color: lightgray;
            border-bottom-color:lightgray;
        }

        .approve-detail-data {
            color:gray;
        }
    }
}




/*
    #vat-menu-buttons :not(.active) span {
        border: 0;
        display: inline-block;
        height: 20px;
        padding-right: 0px;
        margin-right: 10px;
        width: 20px;
        border-radius: 50%;
        background: #c7c8ca;
    }

    #vat-menu-buttons a.active ~ a span {
        border: 1px solid gray;
        display: inline-block;
        height: 20px;
        padding-right: 0px;
        margin-right: 10px;
        width: 20px;
        border-radius: 50%;
        background: none;
        vertical-align: middle;
    }

    #vat-menu-buttons a span {
        font-size: 12px;
    }
    */