/* line 1, ../../source/scss/ng-img-crop.scss */
img-crop {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
 
main {
	display: block;
	margin: 100px auto;
	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: bold;
	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: 0 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: transparent
}
.tabsy>.tabButton {
	display: block;
	margin-top: 1px;
	background: #3c8dbc;
	color: #f5f5f5;
	text-align: center;
	-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%;
}
.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;
}
input[type=file]{
    display:block;
    border:1px solid #1e4768;
    margin-bottom:10px;
    padding:5px
}
@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: #5a5243;
  border-bottom:2px solid #3c8dbc;
}
.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;
	display: inline-block;
	width: 100%;
}

.btn-lg.btn-default.sbbtn {
    background-color: #3c8dbc;
    color: #fff;
    font-size: 14px;
}
.cpy-img {
    float: left;
    margin-left: 50px;
}
.cpy-img-cnt {
    margin-bottom: 15px;
}

/* line 7, ../../source/scss/ng-img-crop.scss */
img-crop canvas {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* mobile webkit */
}
/* line 17, ../../source/scss/ng-img-crop.scss */
img-crop .loading {
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  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: white;
  background-color: rgba(0, 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 0.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: bold;
    font-size: 15px;
}

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:60%;
  height:350px;
  float:left;
}
.cropd {
  float:left; 
  margin-left:50px;
}

@media (max-width: 767px) {
.tabsy .form-control {
    width: 100%;
}
.cropArea {
    width: 100%;
    height: 200px;
}
main {margin:15px auto;padding:0;}
.cropd {
  float:left; 
  margin-left:0px;
  margin-top:50px;
}
.tabsy {
    width: 100%;
}
.tabsy .content {padding:0;}
.cpy-img {
    float: none;
    margin-left: 0;
}
.cpy-img-cnt {
    margin-top: 15px;
    display: inline-block;
}
}