// main: ga-fabricfarm.less

.myfabric {
    .myfabric-uploard {
        margin-top: 50px;
        .full-width{
            float:left;width:100%;min-height:100px;position:relative;
            margin-top: 20px;
        }
        .well {
            min-height: inherit;
            padding: 30px 30px 50px;
            margin-bottom: 20px;
            background-color: #f5f5f5;
            border: 1px solid @box-border;
            border-radius: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .form-style-fake {position:absolute;top:0px;}
        .form-style-base {position:absolute;top:0px;z-index:999;opacity:0;}
        .form-control {padding:10px 50px;}
        .form-input {height:50px;border-radius:0px;margin-top:20px;}
        .form-style-fake {background: #fff;padding-right:0;font-size:16px;line-height:28px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .input-place {
            position: absolute;top:35px;left: 20px;font-size:23px;color:#5F9EA0;}
        .form-control::-webkit-input-placeholder {
            color:#999;
            font-size:15px;
        }
        .form-control:-moz-placeholder {
            color:#999;
            font-size:15px;
        }
        .form-control::-moz-placeholder {
            color:#999;
            font-size:15px;
        }
        .form-control:-ms-input-placeholder {
            color:#999;
            font-size:15px;
        }
        .uploard-exp {
            p {text-align: center;margin:0;font-size:14px;}
        }

        .progress {
            display:none;
            height:50px;
            border-radius:0px;
            margin-top:20px;
        }

        /* media */
        .media-guide {
            width:100%;
            margin:0 auto 10px auto;
            .media-left {
                vertical-align: middle;
                .glyphicon {
                    font-size: 24px;
                    color: #5F9EA0;
                }
            }
            .media-body {
                padding-left:10px;   
                position:relative;
                vertical-align: middle;
                h5 {
                    margin: 0 0 5px 0;
                    font-size: 15px;
                }
                p {
                    margin-bottom:5px;
                    font-size:14px;
                }
            }
        }
        .myfabric-title {
            text-align: center;
            font-size: 17px;
            margin-top: 20px;
            span b {
                color: #5F9EA0;
            }
        }
    }
    .uploard-list {
        .uploard-img-header {
            border-top:1px solid @divider;
            border-bottom:1px solid @divider;
            padding: 10px;
            margin: 30px 0 20px 0;
            h4 {
                margin:0;padding:0;font-size:15px;
            }
        }
        .thumbnail-list {
            .thumbnail {
                position: relative;
                img {width: 100%;}
                .caption {
                    .poA;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    top:0;
                    left:0;
                    opacity:0;
                    .overbox {.poA;.w100p;.taC;
                        z-index:10;
                        background:transparent;
                        top: 40%;
                        left: 50%;
                        margin-left: -50%;
                        & .btn {
                            text-align: center;
                        }
                        & .btn-circle.btn-xl {
                            width: 70px;
                            height: 70px;
                            font-size: 24px;
                            border-radius: 50%;
                            background: rgba(0, 0, 0, 0.8);
                            color: #fff;
                            padding: 10px 0 0 0;
                            margin: 0 10px;
                            &:hover {
                                background: rgba(0, 0, 0, 1); 
                            }
                        }
                        & span {
                            display: block;
                            font-size: 12px;
                            margin-top: 5px;
                        }
                    }
                    &:hover {
                        opacity:1;
                        .transition(all 200ms ease-in);
                    }
                }
            }
        }
    }
    .tab .nav-tabs {
        border-bottom:0 none;
        background: #ededed;
        border-radius: 0;
    }
    .tab .nav-tabs li a {
        background: transparent;
        border-radius: 0;
        font-size: 15px;
        border: none;
        color: #333;
        padding: 12px 30px;
    }
    .tab .nav-tabs li a i {
        margin-right:10px;
        color:#5F9EA0;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a i {
        border: 0 none;
        background:#5F9EA0;
        color:#fff;
    }
    .tab .nav-tabs li.active a:after{
        content: "";
        position: absolute;
        left: 45%;
        bottom: -14px;
        border: 7px solid transparent;
        border-top: 7px solid #5F9EA0;
    }
    .tab .tab-content {
        padding:12px;
        color:#5a5c5d;
        font-size: 14px;
        line-height:24px;
        margin-top: 25px;
    }
    .printing-guide {
        margin-top: 30px;
        /* 프린팅제작과정 */
        .printing-process {
            border: 1px solid @box-border;
            padding: 20px;
            .f1-steps {
                overflow: hidden;
                position: relative;
                text-align: center;
                margin: 0 auto;
            }
            .f1-step { 
                position: relative;
                display: inline-block;
                vertical-align: middle;
            }
            .f1-step-icon {
                display: inline-block; 
                margin-top: 4px; 
                background: @99;
                color: #fff; 
                line-height: 50px;
                -moz-border-radius: 50%; 
                -webkit-border-radius: 50%; 
                border-radius: 50%;
            }
            .f1-step.divi {
                color: #cbcbcb;
            }
            .f1-step p { 
                color: #ccc;
                text-align: center
            }
            .f1-step p {
                color: @font-color-base;
            }
        }
        p.orange {
            color: #FC5407
        }
    }
}
.wrap-fabric-canvas {
	position: relative
}

.wrap-fabric-canvas .ruler-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #000000;
}

.wrap-fabric-canvas .fabric-canvas {
    position: absolute;
    top: 15px;
    left: 15px;
    border: 1px solid #000000;
}

.buttons {
	margin-top: 15px;
}
@media only screen and (max-width: 480px) {
    .tab .nav-tabs,
    .tab .nav-tabs li{
        width:100%;
        background:transparent;
    }
    .tab .nav-tabs li.active a{
        border-radius:10px 10px 0 0;
    }
    .tab .nav-tabs li:first-child a{
        border-bottom-left-radius:0;
    }
    .tab .nav-tabs li a{
        margin-bottom:10px;
        border:1px solid lightgray;
    }
    .tab .nav-tabs li.active a:after{
        border:none;
    }
}
@media (max-width: 767px) {
    .uploard-list {
        .uploard-img-header {
            h4 {
                display: block;
            }
            span {margin-top: 5px; display: block;}
        }
    } 
    .myfabric {
        .tab-menu .nav .nav-tabs li a {
            width: 150px;
        }
        .tab-menu .nav .nav-tabs.nav-tabs-md-wide {
            display: inline-block;
        }
        .tab-menu .nav .nav-tabs.nav-tabs-md-wide li {
            width: inherit;
        }
    }
    .printing-guide {
        .printing-process {
            .f1-step { 
                width: 30%;
                padding: 0 0;
            }
            .f1-step-icon {
                width: 50px; 
                height: 50px; 
                font-size: 24px;
            }
            .f1-step.divi {
                width: 10%;
                font-size: 24px;
            }
        }
    }  
}

@media (min-width: 768px) {
    .uploard-list {
        .uploard-img-header {
            h4 {
                display:inline-block;
            }
            span {float:right;}
        }
    }
    .myfabric {
        .tab-menu .nav .nav-tabs li a {
            width: 200px;
        }
    }
    .printing-guide {
        .printing-process {
            .f1-step { 
                width: 20%;
                padding: 0 5px;
            }
            .f1-step-icon {
                width: 50px; 
                height: 50px; 
                font-size: 24px;
            }
            .f1-step.divi {
                width: 4%;
                font-size: 24px;
            }
        }
    }   
}

@media (min-width: 992px) {
    .myfabric {
        .tab-menu .nav .nav-tabs li a {
            width: 200px;
        }
    }
    .printing-guide {
        .printing-process {
            .f1-step { 
                width: 10%;
                padding: 0 5px;
            }
            .f1-step-icon {
                width: 50px; 
                height: 50px; 
                font-size: 24px;
            }
            .f1-step.divi {
                width: 4%;
                font-size: 24px;
            }
        }
    }
}