@import url('https://fonts.googleapis.com/css?family=Nunito+Sans');

.kit-body {
    /*background: #fc2561;*/
    /*font-family: 'Nunito Sans', sans-serif;*/
}

/*custom class*/

.mod-img {
    height: 150px;
    border: 2px solid;
    color: #fc2561;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}

.mod-img:active {
    box-shadow: none;
}

/*tools-button*/
.tools-btn {
    background: #fc2561 none repeat scroll 0 0;
    border: 0;
    color: #fff;
    margin-left: 4px;
    padding: 3px 15px;
    border-radius: 0;
    cursor: pointer;
}

.tools-btn:active {
    box-shadow: none;
}

.slider-lable {
    top: 15px;
    position: relative;
}

.custom-sub-tabs {
    padding-left: 10px;
    padding-top: 10px;
}

.tools-top {
    padding-top: 15px;
    height: 50px;
}

.tools-bottom {
    top: 20px;
    position: relative;
    right: 8px
}

.edit-Wrapper {
    border: 3px solid #fc2561;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

#zoom-slider {
    width: 50%;
}

@media only screen and (max-width: 768px) {
    #zoom-slider {
        width: 30%;
    }
}

#makeoverkit-work-area {
    display: none;
}

.orgimg-canvas {
    display: none;
}

/*helping class*/
/*container*/
.makeover-container {
    background: #fff;
    min-height: 290px;
}

/* centered columns styles */
.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
    text-align: center;
}

.padding-5px {
    padding: 5px;
}

.padding-rl-10px {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-25px {
    padding: 25px;
}

.crop-image-container {
    max-height: 360px;
    min-height: 200px;
    overflow: hidden;
}

#web_camera {
    width: 400px;
    height: 300px;
    text-align: center;
}

#web_result {
    display: none;
}

/** Makeoverkit zoom slider and change default jqury ui styles **/
.ui-slider.ui-corner-all.ui-slider-horizontal.ui-widget.ui-widget-content {
    display: inline-block;
    width: 90%;
    vertical-align: middle;
    margin-left: 10px;
    background: #fc2561 none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 20px;
    height: 7px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.ui-slider-handle.ui-corner-all.ui-state-default {
    background: #fc2561 none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 18px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    height: 15px;
    width: 15px;
    top: -6px;
    cursor: pointer;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable {
    z-index: 99999 !important;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

/** change default bootstrab styles **/

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: rgb(255, 255, 255);
    background-color: #4fe6b6;
}

.tab-content {
    background: #fff;
}

.nav > li > a {
    color: #737373;
}

.disabled {
    background: #dedede none repeat scroll 0 0 !important;
    pointer-events: none !important;
}

#web_result,
#web_camera {
    width: auto!important;
    max-width: 100%!important;
    height: auto!important;
    text-align: center;
}

#web_result img,
#web_camera video {
    width: auto!important;
    height: auto!important;
    max-width: 100%!important;
    max-height: 100%!important;
}

.web-re-tack,
.web-re-tack:hover,
.web-re-tack:active {
    background: #fc2561 none repeat scroll 0 0;
    border: 0;
    color: #fff;
    margin-left: 4px;
    padding: 11px 15px;
    border-radius: 0;
    cursor: pointer;
    font-family: "Helvetica Neue LT W01_77 Bd Cn";
    font-size: 20px;
}
.icon-upload-home,
.camera-icon {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#zoom-slider {
    display: none!important;
}

body.modal-open {
    overflow: hidden;
}

@supports (-webkit-overflow-scrolling: touch) {
    .camera-icon {
        display: inline-block!important;
    }
    .upload-icon {
        display: none!important;
    }
}

@media (max-width:767px) {
    #web_result,
    #web_result img {
        max-width: 300px!important;
        /*max-height: 300px!important;*/
    }

    #web_camera-ios_div,
    #web_result,
    #web_camera-ios_div {
        max-width: 300px!important;
        /*max-height: 300px!important;*/
    }

    #web-cam-modal .modal-title {
        width: 100%;
    }
}
@media (max-width: 568px) {
    /*.cropper-canvas {
        transform: rotate(90deg) translateX(28.1px)!important;
    }
    .cropper-crop-box {
        transform: rotate(90deg) translateX(39.895px) translateY(-39.895px) !important;
    }*/
}