/*================================================================================
	Item Name: Frest HTML Admin Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.pointer {
	cursor:pointer;
}


/* ------ ANIMASI ------ */
.flip-vertical-right {
	-webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

.rotate-diagonal-br {
	-webkit-animation: rotate-diagonal-br 0.4s linear both;
	        animation: rotate-diagonal-br 0.4s linear both;
}
/**
 * ----------------------------------------
 * animation rotate-diagonal-br
 * ----------------------------------------
 */
@-webkit-keyframes rotate-diagonal-br {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  50% {
    -webkit-transform: rotate3d(-1, 1, 0, -180deg);
            transform: rotate3d(-1, 1, 0, -180deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, -360deg);
            transform: rotate3d(-1, 1, 0, -360deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}
@keyframes rotate-diagonal-br {
  0% {
    -webkit-transform: rotate3d(-1, 1, 0, 0deg);
            transform: rotate3d(-1, 1, 0, 0deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  50% {
    -webkit-transform: rotate3d(-1, 1, 0, -180deg);
            transform: rotate3d(-1, 1, 0, -180deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: rotate3d(-1, 1, 0, -360deg);
            transform: rotate3d(-1, 1, 0, -360deg);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
  }
}

.swing-in-right-fwd {
	-webkit-animation: swing-in-right-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-right-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
/**
 * ----------------------------------------
 * animation swing-in-right-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-right-fwd {
  0% {
    -webkit-transform: rotateY(-100deg);
            transform: rotateY(-100deg);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 1;
  }
}
@keyframes swing-in-right-fwd {
  0% {
    -webkit-transform: rotateY(-100deg);
            transform: rotateY(-100deg);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 1;
  }
}

.swing-in-right-bck {
	-webkit-animation: swing-in-right-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-right-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
/**
 * ----------------------------------------
 * animation swing-in-right-bck
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-right-bck {
  0% {
    -webkit-transform: rotateY(70deg);
            transform: rotateY(70deg);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 1;
  }
}
@keyframes swing-in-right-bck {
  0% {
    -webkit-transform: rotateY(70deg);
            transform: rotateY(70deg);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: right;
            transform-origin: right;
    opacity: 1;
  }
}

.slide-in-fwd-center {
	-webkit-animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
 * ----------------------------------------
 * animation slide-in-fwd-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

.slide-in-fwd-bottom {
	-webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
 * ----------------------------------------
 * animation slide-in-fwd-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
.image-area {
	border: 1px solid #dfe3e7;
	border-radius: 4px;
	margin-bottom: 20px;
	text-align: center;
	background-color: #394c620f;
}
.image-area embed {
	height:368px;
	padding: 7px;
}
.image-area label {
	background-color: #fdac41;
	padding: 5px;
	color: white;
	border-radius: 2px;
	width: 100%;
	margin-bottom: 0px;
	cursor: pointer;
}
.image-area .image-name {
	background-color: white;
	border-bottom: 1px solid #fdac41;
}
.image-area:hover {
	border: 2px solid #fdac41;
}
.hidden-berkas {
	opacity: 0;
	width: 0;
	float: left;
}
.background-school{
	background: url("../../app-assets/images/elements/background.jpg");
	background-repeat: no-repeat;
	background-size: auto;
}
.myceckbox{
	transform: scale(1.4);
	margin: 0 10px 0 10px;
}