@import "declaration";

/* Hide modal windows by default */
#loadingFrame,
#importPanel,
#exportPanel{
    display:none;
}

/* loadingFrame */
#loadingFrame{
    text-align:center;
    .loading48Grey{
        margin:auto;
    }
}
#importPndPanel{
    @fileH: 30px;
    .fileList {
        .radius();

        clear:both;
        /*height:@fileH;*/
        margin: 5px 0;

        .fileInfo{
            left:0;
            border:1px solid #bbb;
            padding:5px 5px 5px 10px;
            margin-bottom: 5px;
            position:relative;
            top:0;
            vertical-align:baseline;
            border-radius: 5px;
            overflow: hidden;

            .fileName,
            .fileTime,
            .fileSize,
            .fileDelete{
                display: inline-block;
                vertical-align:middle;
            }
            .fileName,
            .fileTime,
            .fileSize{
                margin:0 10px 0 0;
            }

            .fileName{
                .font(13px, bold);

                max-width:320px;
                overflow:hidden;
                height:20px;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .fileTime,
            .fileSize{
                color:#999;
            }
            .fileDelete{
                .dimension(18px, 18px);
                .font(10px, bold);
                .transition(background,0.2s);
                /*.radius();*/

                background:#999;
                color:#fff;
                cursor:pointer;
                float:right;
                line-height:18px;
                text-align:center;
                border-radius: 50%;

                position: absolute;
                right: 5px;
                top: 50%;
                margin-top: -9px;
            }
            .fileDelete:hover{
                background:#666;
            }

            .progressBar{
                background-color:#FCF2DB;
                width:0px;
                height:@fileH;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: -1;
            }

            .preview {
                max-height: @fileH - 10px;
                max-width: 40px;
                margin-right: 5px;
            }
        }


    }
}
.modal-body > .button{
    .radius(2px);
    background-color:#eee;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    border:1px solid #ddd;
    cursor: pointer;
    font-size: 13px;
    margin:0 0 15px 0;
    min-height: 72px;
    padding:10px 10px 10px 100px;

    &:last-child{
        margin: 0;
    }

    &:hover{
        .boxshadow(3px 3px 3px rgba(0,0,0,0.1) inset);
    }

    h3{
        margin: 0 0 5px 0;
    }

    &.syncFacebook{
        background-image:url(../images/facebook.png);
        background-position: 10px 10px;
        color:#415897;
    }
    &.exportPnd,
    &.syncPnd{
        background-image:url(../images/pnd.png);
        min-height: 60px;
    }
    &.exportM11{
        background-image:url(../images/m11.png);
    }
    &.exportM10{
        background-image:url(../images/android.png);
    }
    &.exportSamsung{
        background-image:url(../images/samsung.png);
    }
    &.exportKml{
        background-image:url(../images/kml.png);
    }	    
}

#importPndPanel{
    .btnPndFileUploader{
        position: relative;
        input[type='file']{
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
    }

    .reminder{
        @themeColor: #FDF2B3;
        .radius(5px);
        background: @themeColor;
        border:1px solid darken(@themeColor, 20%);
        color:darken(@themeColor, 70%);
        margin: 0 0 10px 0;
        padding: 5px;
    }

    .select{
        padding: 0 0 5px 0;

        input,
        .options{
            vertical-align: top;
        }

        input{
            margin: 0;
        }

        .options{
            display: inline-block;
            position: relative;
            width: 200px;

            .arrow{
                .dimension(15px, 1em);
                .radius(2px);
                background:#eee url(../images/arrowDown.png) center center no-repeat;
                border:1px solid #ddd;
                cursor: pointer;
                display: block;

                &:hover{
                    background-color: #ddd;
                    border-color: #ccc;
                }

            }

            ul{
                .boxshadow(2px 2px 1px rgba(0,0,0,0.4));
                .radius(0 2px 2px 2px);
                border:1px solid #ddd;
                background-color: #f2f2f2;
                display:none;
                margin: 0;
                position: absolute;
                top:1em;

                li{
                    cursor: pointer;
                    display: block;
                    list-style: none;
                    padding: 5px 8px;

                    &:hover{
                        background-color: #ddd;
                    }
                }
            }
        }
    }

    .importedItem{
        border-top:1px solid #ccc;
        padding: 5px 0;

        &:hover{
            background: #eee;
            cursor: default;
        }

        > input,
        > div{
            display: inline-block;
            font-size: 13px;
        }
        > div{
            margin:0 0 0 0.5em;
        }

        .name{
            font-weight: bold;
        }
    }

    .summary{
        margin:0 5px 0 0;

        .total,
        .selected{
            font-weight: bold;
        }
    }
}