label{
    color:#324148
}
img-crop{
    width:100%;
    height:100%;
    display:block;
    position:relative;
    overflow:hidden
}
main{
    display:block;
    margin:100px auto 0;
    padding:0 20px;
    text-align:center;
    height: 100vh;
}
h1 sup{
    font-size:14px;
    margin-left:-20px;
    display:inline-block;
    line-height:1
}
.tabButton{
    font-size:15px;
    font-weight:700;
    padding:15px 20px
}
.tab{
    padding:20px;
    text-align:left
}
@-webkit-keyframes showTab{
    from{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes showTab{
    from{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
.tabsy{
    width:800px;
    margin:80px auto;
}
.tabsy>button{
    width:100%;
    font-family:inherit;
    font-size:100%;
    margin:0;
    outline:0;
    border:0;
    vertical-align:baseline;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background:0 0
}
.tabsy>.tabButton{
    display:block;
    margin-top:1px;
    background:#2c2e3e;
    color:#f5f5f5;
    text-align:center;
    border-bottom:2px solid transparent;
    border-right:1px solid #fff;
    -webkit-transition:all 250ms ease-in-out;
    transition:all 250ms ease-in-out
}
.tabsy>input{
    display:none
}
.tabsy>input:checked+label+.tab{
    display:block;
    width:100%;
    border-radius:0 0 10px 10px
}
.tabsy>input:checked+label+.tab>.content{
    -webkit-animation:showTab 250ms ease-in-out;
    animation:showTab 250ms ease-in-out
}
.tabsy>.tab{
    background:#fff;
    display:none;
    font-size:16px
}
@media screen and (min-width:768px){
    .tabsy{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
    .tabsy>.tabButton{
        -webkit-box-ordinal-group:2;
        -webkit-order:1;
        -ms-flex-order:1;
        order:1;
        -webkit-box-align:start;
        -webkit-align-items:flex-start;
        -ms-flex-align:start;
        align-items:flex-start;
        cursor:pointer
    }
    .tabsy>input:checked+label{
        background:#fff;
        color:#2c2e3e;
        border-bottom:2px solid #2c2e3e;
    }
    .tabsy>.tab{
        -webkit-box-ordinal-group:3;
        -webkit-order:2;
        -ms-flex-order:2;
        order:2
    }
    main{
        width:100%;
        float:left;
    }
}
.tabsy .form-control{
    font-size:14px;
    padding:10px 12px;
    height:40px;
    width:400px
}
.tabsy .form-group{
    margin-bottom:15px
}
img-crop canvas{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    outline:0;
    -webkit-tap-highlight-color:rgba(255,255,255,0)
}
img-crop .loading{
    width:100%;
    height:100%;
    font-size:16px;
    font-weight:700;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-justify-content:center;
    color:#fff;
    background-color:rgba(0,0,0,.75);
    position:absolute
}
.nav-tabs>li>a{
    cursor:pointer!important
}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{
    border-bottom:3px solid #5e6db3!important
}
blinking{
    animation:blinkingText .8s infinite
}
@keyframes blinkingText{
    0%{
        color:#000
    }
    49%{
        color:transparent
    }
    50%{
        color:transparent
    }
    99%{
        color:transparent
    }
    100%{
        color:#000
    }
}
.testtitle{
    position:relative;
    bottom:120px;
    right:23px;
    color:#005166;
    font-weight:700;
    font-size:15px
}
.cropArea{
    background:#e4e4e4;
    overflow:hidden;
    width:500px;
    height:350px;
    float:left
}
.cropd{
    float:left;
    margin-left:50px
}
.form-control::-webkit-input-placeholder{
    color:#1e4768
}
.form-control::-moz-placeholder{
    color:#1e4768
}
.form-control:-ms-input-placeholder{
    color:#1e4768
}
.form-control:-moz-placeholder{
    color:#1e4768
}
input.form-control{
    color:#1e4768!important
}
.sbbtn{
    font-size:14px;
    font-weight:700;
    border-color:transparent!important;
    background-color:#324148!important;
    color:#fff!important;
    transition:.3s all ease
}
.sbbtn:hover{
    background-color:#fff!important;
    color:#324148!important;
    border-color:#324148!important
}
input[type=file]{
    display:block;
    border:1px solid #1e4768;
    margin-bottom:10px;
    padding:5px
}
.cropArea{
    background:#e4e4e4;
    overflow:hidden;
    width:440px;
    height:250px;
    float:left
}
.profile-img h4{
    color:#1e4768;
    margin-top:0
}
.copied-img{
    margin-bottom:10px;
    font-weight:700;
    color:#324148;
}
.crop-img{
    float:right
}
.tabsy .content{
    min-height:auto
}
@media (max-width:1023px){
    .tabsy{
        width:100%
    }
    .crop-img{
        float:left
    }
    .cropArea{
        width:100%;
        height:200px
    }
    .copied-img{
        margin-top:10px
    }
    main{margin-top:70px;}
}
@media (max-width:767px){
    .tabsy .form-control{
        width:100%
    }
    .cropArea{
        width:100%;
        height:200px
    }
    .cropd{
        float:left;
        margin-left:0;
        margin-top:50px
    }
    .tabsy{
        width:100%
    }
    .crop-img{
        float:none;
    }
    .copied-img{
        margin-top:10px;display: inline-block;
    }
    main{
        padding:0;margin-top: 0px;
    }
    input[type=file]{
        width:100%
    }
    .tabsy>.tabButton{
        border-right:0
    }
    .tabsy {margin-top:125px;}
}