/* Import Semantic UI */
@import (inline) 'semantic.min.css';
@import (inline) 'ionicons/ionicons.min.css';
@import (inline) 'pikaday.css';
@import (inline) 'owfont-regular.min.css';
@import (inline) 'growl/jquery.growl.css';
// @import (inline) '../../node_modules/react-categorized-tag-input/categorized-tag-input.css';

/* Color Variable */
@white     : #FFFFFF;
@grey      : #EBE9EA;
@border    : #DDDDDD;
@shadow    : #C6C6C6;
@black     : #121212;
@orange    : #FD3700;
@yellow    : #DFEA5F;
@lightgreen: #AFDDDA;
@green     : #32B1B7;
@darkgreen : #01848C;
@blue      : #22A7F0;

/* Function Variable */
.transition(@time) {
	-webkit-transition: all @time ease-in-out;
	   -moz-transition: all @time ease-in-out;
	    -ms-transition: all @time ease-in-out;
	     -o-transition: all @time ease-in-out;
	        transition: all @time ease-in-out;
}
.blurs(@size) {
	-webkit-filter: blur(@size);
	   -moz-filter: blur(@size);
	    -ms-filter: blur(@size);
	     -o-filter: blur(@size);
	        filter: blur(@size);
}

/* Global Section */
body {
	background-attachment: fixed;
	background-size: cover;
	background-image: none;
	box-shadow: none;
	border-radius: 0;
    font-size: 10pt;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    .transition(.3s);

	&.push {
	    margin-left: -340px !important;
	    padding-right: 340px;
	}
	.ion-small {
		font-size: 16px;
	}
	.ion-medium {
		font-size: 26px;
	}
	.ion-large {
		font-size: 36px;
	}
	.ion-massive {
		font-size: 40px;
	}
	.capital {
		text-transform: uppercase !important;
	}
	.ui.header {
		&.light {
			font-weight: normal;
		}
	}
}

/* Navbar Section */
@keyframes animate {
	0% {width: 0%;}
	25% {width: 25%;}
	50% {width: 50%;}
	75% {width: 75%;}
	100% {width: 100%;}
}
.ui.loaders {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 0%;
	height: 3px;
	background-color: @orange;
	z-index: 999;
	&.active {
	    animation-name: animate;
	    animation-duration: 4s;
	}
}
.ui.navbar {
	position: fixed;
	top: 0;
	left: 48px;
	right: 0;
	background-color: lighten(@black, 100%);
	border-bottom: 1px solid #DDD;
	z-index: 997;
    min-height: 45px;
    .transition(.3s);
    &.blured {
    	.transition(0);
    	.blurs(6px);
    }
	&.push {
	    left: -292px !important;
	    right: 340px !important;
	}
	.ui.menu {
		// box-shadow: none;
		border-radius: 0;
		background-color: lighten(@black, 100%);
		border: none;
        box-shadow: rgb(198, 198, 198) 0px 0px 5px;
        min-height: 45px;
		.item {
			padding: 5px 10px;
			color: @black;
			opacity: 0.8;
			&:before {
				background: none;
			}
			&:hover {
				// background-color: rgba(0, 0, 0, 0.1);
			}
			&:first-child, &:last-child {
				border-radius: 0;
			}
			::-webkit-input-placeholder {
			  	color: @black;
				opacity: 1;
			}
			::-moz-placeholder {
			  	color: @black;
				opacity: 1;
			}
			:-ms-input-placeholder {
			  	color: @black;
				opacity: 1;
			}
			:-moz-placeholder {
			  	color: @black;
				opacity: 1;
			}
			&.sidebars {
				padding: 12px 16px;
				background-color: @black;
				color: @white;
				display: none;
			}
			&.sideOff {
				display: block;
			}
			&.sideOn {
				display: none;
			}
			@media (max-width: 1080px) {
				&.sidebars {
					display: block;
				}
				&.sideOff {
					display: none;
				}
				&.sideOn {
					display: block;
				}
			}

			.ui.header{
				font-size:1.1em;
				font-weight: bold;
				.sub.header{
					font-size: .7em;
					font-weight: normal;
				}
			}
			.ui.icon.input {
				input {
					line-height: 1;
					width: 250px;
					// border-bottom: 1.5px solid @white !important;
					padding: 6.5px 10px !important;
					color: @black;
					border: 1px solid rgba(38,38,38,.35);
					@media (max-width: 768px) {
						width: 150px;
					}
				}
				i {
					color: @black;
					opacity: 1;
				}
			}
            .ui.button{
                padding-bottom: 8px;
                padding-top: .7em;
                padding-left: 1em;
                padding-right: 1em;
                // color: @black;
                //font-weight: normal;
            }
            .ui.button:not(.blue):not(.green):not(.red):not(.primary):not(.orange):not(.black){
                color:@black;
            }
            .ui.basic.button{
                // box-shadow: none;
                // border: 1px solid #CCC;
                background: inherit;
                font-weight: bold;

                box-shadow: 0 0 0 1px rgba(38,38,38,.35) inset,0 0 0 0 rgba(38,38,38,.15) inset;
            }
            .ui.basic.button:not(.blue):not(.green):not(.red){
                color: @black !important;
            }
            .ui.button:not(.blue):not(.green):not(.red):not(.primary):not(.orange):not(.black):hover{
                //border-color: #AAA;
                box-shadow: 0 0 0 1px rgba(22,22,22,.35) inset,0 0 0 0 rgba(22,22,22,.15) inset;
            }
            .ui.buttons{
                .button{
                    //border: 1px solid #CCC;
                    margin-left: -1px;
                    //padding-bottom: .7em;
                    //padding-top: .7em;
                    padding-top: .7em;
                    padding-bottom: 8px;
                    padding-left: 1.5em;
                    padding-right: 1.5em;
                    background: inherit;
                    font-weight: normal;
                    box-shadow: 0 0 0 1px rgba(38,38,38,.35) inset,0 0 0 0 rgba(38,38,38,.15) inset;
                }
                .ui.button:first-child{
                    margin-left:0;
                }
                .ui.button:hover{
                    z-index: 808;
                    border-color: #AAA;
                    box-shadow: 0 0 0 1px rgba(22,22,22,.35) inset,0 0 0 0 rgba(22,22,22,.15) inset;
                }
                .ui.active.button{
                    z-index: 808;
                    background: #EEE;
                    font-weight: bold;
                }
            }
			&.toggle {
				cursor: pointer;
			}
            .ui.basic.compact.icon.button{
                padding: 6px 8px;
                text-align: center;
                i, span{
                    font-size: 20px;
                    vertical-align: middle;
                    line-height: 1;
                }
            }
		}
        .item.sidebar.toggle{
        	padding: 10px 15px;
        	i {
        		font-size: 23px;
        		color: lighten(@black, 10%);
        	}
            img{
                border-radius: 6px;
            }
        }
        .item.sidebar.toggle:hover{
            background: rgba(0,0,0,.1);
        }
		.ui.notification {
		    position: fixed;
		    top: 0;
		    right: 0;
		    bottom: 0;
		    width: 340px;
		    height: 100%;
		    color: @white;
		    background-color: lighten(@black, 5%);
		    padding: 16px;
		    margin-right: -340px;
		    .transition(.3s);
		    -webkit-box-shadow: inset 15px 0 14px -7px rgba(0,0,0,1);
		    -moz-box-shadow: inset 15px 0 14px -7px rgba(0,0,0,1);
		    -ms-box-shadow: inset 15px 0 14px -7px rgba(0,0,0,1);
		    -o-box-shadow: inset 15px 0 14px -7px rgba(0,0,0,1);
			box-shadow: inset 15px 0 14px -7px rgba(0,0,0,1);
			text-align: center;
			.top.contents {
				height: 57vh;
				width: 100%;
				display: block;
				position: relative;
			}
			.bottom.contents {
				height: 43vh;
				width: 100%;
				display: block;
				position: relative;
				.inner.contents {
					position: absolute;
					left: 0;
					bottom: 35px;
					right: 0;
				}
			}
			.header {
				text-transform: uppercase;
				color: @white;
				opacity: 0.7;
				&:hover {
					opacity: 0.9;
				}
				&.clear {
					font-size: 11px;
					color: @orange;
					cursor: pointer;
				}
			}
			.items {
				padding: 5px;
				position: absolute;
				left: 0;
				right: 0;
				top: 5px;
				bottom: 0;
				.item {
					padding: 10px 15px;
					background-color: rgba(255, 255, 255, 0.05);
					border: 1px solid rgba(255, 255, 255, 0.05);
					cursor: pointer;
					margin: 5px 0;
					&:hover {
						border-color: @orange;
					}
					.content {
						text-align: left;
						.title {
							color: @white;
							font-weight: bold;
							font-size: inherit;
							.time {
								font-weight: normal;
								font-size: 12px;
								text-transform: lowercase;
							}
						}
						.meta {
							color: @white;
							font-size: 12px;
							font-style: italic;
						}
					}
				}
			}
			.segment {
				margin: 0;
				padding: 0;
				text-align: center;
				color: @white;
				.clock {
					font-size: 60px;
					line-height: normal;
					font-weight: 200;
				}
				.date {
					font-size: 15px;
					font-weight: normal;
				}
				.statistic {
					color: @white !important;
					.value {
						font-size: 50px !important;
						sup {
							font-size: 18px;
							vertical-align: super;
							margin-left: -15px;
						}
					}
					.label {
						font-size: 11px;
					}
				}
			}
			.divides {
				margin: 5px -15px;
				border-top: 1px solid rgba(255, 255, 255, 0.2);
                clear:both;
			}
			.buttons {
				border-radius: 0;
				.button {
					border-radius: 0;
					margin: 5px;
					padding: 10px 20px;
					background-color: transparent;
					border: 1px solid transparent;
					color: @white !important;
					font-size: 20px;
					p {
						margin-top: 4px;
						font-size: 12px;
						font-weight: 200;
					}
					&:hover {
						color: @orange !important;
						border-color: @orange !important;
                        background-color: transparent !important;
					}
				}
			}
			.owl-carousel {
				.owl-controls .owl-pagination {
				    display: block;
				    span {
				    	width: 10px;
				    	height: 10px;
				    }
				}
				.owl-controls .owl-buttons .owl-prev {
				    display: none;
				}
				.owl-controls .owl-buttons .owl-next {
				    display: none;
				}
			}

		}
		.ui.notification.active {
		    margin-right: 0;
		}
	}
	.ui.vertical.menu {
		background-color: @white;
		border: none;
		.item {
			padding: 12px 9px;
			color: @black;
			opacity: 1;
			border-radius: 5px;
			&:before {
				background: none;
			}
			&:hover {
				background-color: rgba(235, 235, 235, 0.7);
			}
		}
	}
}

/* Sidebar Section */
.ui.side {
	width: 48px;
	height: 100vh;
	position: fixed;
	z-index: 998;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	background-color: @black;
	border: none;
	overflow-x: hidden;
	.transition(.2s);

	&.push,
	&.push > .vertical.menu.sides .item.brand{
		left: -340px !important;
	}
	.vertical.menu.sides {
		box-shadow: none;
		border-radius: 0;
		background-color: @black;
		margin: 0;
		border: none;
		width: 48px;
		margin-top: 46px;
		.item {
			padding: 10px 0;
            width: 48px;
			color: @white;
			text-align: center;
			&:not(.active), &:not(.brand) {
				opacity: 0.7;
			}
			&:before {
				background: none;
			}
			&:first-child, &:last-child {
				border-radius: 0;
			}
			&:hover {
				color: @white;
				opacity: 1;
				background-color: rgba(255,255,255,.15);
				> img {
					opacity: 1;
				}
			}
			&.active {
				background-color: rgba(255,255,255,.2);
                opacity: 1;
                img{
                    opacity: 1;
                }
			}
			&.brand {
				padding: 10px;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
                background-color: @orange;
				.transition(.2s);
			}
			img {
				padding: 0;
				width: 26px;
				opacity: 0.7;
                max-width: auto;
                margin: 0 auto;
			}
			.ui.popup {
				padding: 0;
			}
		}
	}
}

/* Content Section */
.ui.wrapper {
	padding-top: 46px;
	padding-left: 48px;
	background-color: @white;
    min-height: 100vh;
    .transition(.3s);
    &.blured {
    	.blurs(6px);
    }
	.segment,
    .menu,
    {
        box-shadow: none;
    }
	.ui.menu {
		overflow-y: hidden;
		overflow-x: scroll;
	}
	.contents {
		width: 100%;
		min-height: 100vh;
		float: left;
		display: block;
		background-color: @white;
		padding: 10px;
		padding-left: 280px;
		padding-right: 260px;
		&.games {
			padding-right: 20px;
		}
		&.fluid {
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
		}
		.ui.form {
			width: 80%;
			// margin: 0 auto;
			@media (max-width: 768px) {
				width: 100%;
			}
		}
		.center.striped {
			height: 93vh;
			background: -webkit-repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 3px, #FFFFFF 3px, #FFFFFF 10px);
			background: repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 3px, #FFFFFF 3px, #FFFFFF 10px);
			@media (max-width: 768px) {
				background: none;
			}
		}
		.additional {
			background-color: @white;
			border-left: 1px solid #DDD;
			@media (max-width: 768px) {
				border: none;
				margin-top: 10px;
			}
		}
	}
	.sides.contents {
		width: 270px;
		height: 100vh;
		background-color: @white;
		border-right: 1px solid #DDD;
		padding: 10px;
		position: fixed;
		z-index: 101;
		overflow-x: hidden;
		overflow-y: auto;
		.transition(0.2s);
		&.show {
			left: 46px !important;
		}
		.ui.vertical.menu {
			box-shadow: none;
			border: none;
			overflow: hidden;
			border-radius: 0;
			.item {
				border-radius: 0;
				padding: 17px 15px;
				&:before {
					background: none;
				}
				&:hover {
					background-color: rgba(0, 0, 0, 0.09);
				}
			}
			.item.header {
				cursor: default;
			}
		}
		.ui.segment {
			.ui.header {
				margin: 0;
			}
		}
	}
	.clearer {
		clear: both;
	}
	@media (max-width: 1080px) {
		.contents {
			padding-left: 10px;
		}
		.sides {
			left: -300px;
		}
	}
}

/* Floating Section */
.ui.floatings {
	position: fixed;
	right: 20px;
	bottom: 20px;
	.ui.popup {
		box-shadow: none;
		max-width: 180px;
		margin-right: 5px;
		padding: 10px 0;
	}
	.ui.vertical.menu {
		background-color: @white;
		width: 65px;
		border: none;
		.item {
			padding: 12px 14px;
			color: @white;
			opacity: 1;
			border: none;
			&:before {
				background: none;
			}
			&:first-child, &:last-child {
				border-radius: 0;
			}
		}
	}
}

/* Overlay Section */
.overlay.message {
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	padding-top: 30vh;
	text-align: center;
	display: none;
	.brand {
		font-size: 70px;
		line-height: 1.4;
	}
	.header:not(.ui) {
		font-size: 56px;
		line-height: 1.4;
		&.white {
			color: @white;
		}
	}
	.subheader {
		font-size: 30px;
		line-height: 1.2;
	}
	.description {
		font-size: 16px;
		line-height: 1.2;
	}
	@media (max-width: 768px) {
		padding-top: 20vh;
		.header:not(.ui) {
			font-size: 36px;
			line-height: 1.4;
		}
		.subheader {
			font-size: 21px;
			line-height: 1.2;
		}
		.description {
			font-size: 14px;
			line-height: 1.2;
		}
	}
}
.ui.card>.extra, .ui.cards>.card>.extra{
    color: rgba(0,0,0,.8);
}
.ui.tiny.modal{
    width: 300px;
    left: 50%;
    margin-left: -150px;
}
.ui.dimmer.modals{
    background: transparent;
}

/* Import Dark variant */
@import (inline) 'dark.css';

/* Import Global Search Style */
.global.search {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 48px;
	right: 0;
	bottom: 0;
	padding: 10px;
	color: @white;
	display: none;
    &.show {
		display: block;
    }
	.ui.input {
		input {
			background-color: transparent;
		    border: 1.5px solid @white;
		    color: @white;
			&::-webkit-input-placeholder {
			  	color: @white;
				opacity: 1;
			}
			&::-moz-placeholder {
			  	color: @white;
				opacity: 1;
			}
			&:-ms-input-placeholder {
			  	color: @white;
				opacity: 1;
			}
			&:-moz-placeholder {
			  	color: @white;
				opacity: 1;
			}
		}
		i {
			color: @white;
		}
	}
}

/* Import Text Editor SDK Style */

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #AAAAAA;
  line-height: normal;
  /* For Firefox */
}

.wysiwyg {
    position: relative;
}

.wysiwyg #precode {
	display: none;
}

.wysiwyg #title {
    outline: none;
    font-size: 18px;
    font-weight: bold;
    line-height: normal;
    padding: 10px 14px;
    border-bottom: none;
}

.wysiwyg .editor {
    outline: none;
    font-size: 14px;
    line-height: 1.8;
    height: 65vh;
    overflow-y: hidden;
    border-top: none;
}

.wysiwyg .editor .tags {
    color: #FFFFFF;
    background-color: #4D9DD9;
    padding: 2px 3px;
    border-radius: 2px;
}

.wysiwyg .editor._precode {
    background-color: #34495E;
    color: #FFFFFF;
    font-family: monospace;
}

.wysiwyg .droper {
    outline: none;
    font-size: 100px;
    overflow-y: hidden;
	background-color: rgba(32, 115, 192, 0.4);
	color: #FFFFFF;
    border-radius: 5px !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wysiwyg .taged {
    outline: none;
    font-size: 13px;
    line-height: normal;
    padding: 7px 10px;
    color: #ADADAD;
}

.wysiwyg .editor a {
	cursor: pointer;
}

.wysiwyg .popover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1900;
    border: 1px solid #D4D4D5;
    line-height: 1.4285em;
    max-width: 220px;
    background: #FFF;
    padding: .633em 0.8em;
    font-weight: 400;
    font-style: normal;
    color: rgba(0,0,0,.87);
    border-radius: .4rem;
    display: none;
}

.wysiwyg .popover button {
    margin: 6px 4px;
}

.wysiwyg .popover:before {
    bottom: -.325em;
    left: 1em;
    top: auto;
    right: auto;
    margin-left: 0;
    position: absolute;
    content: '';
    width: .75em;
    height: .75em;
    background: #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 1px 1px 0 0 #bababc;
}

.wysiwyg .ui.fluid.popup {
    max-width:270px;
    text-align:center;
    padding:0px !important;
    box-shadow:none !important
}

.wysiwyg .ui.fluid.popup:before {
	z-index: -1;
}

.wysiwyg .ui.fluid.popup .ui.basic.button {
	padding: 9px;
	font-size: 14px;
	margin: 4px
}

.wysiwyg .ui.menu .item.active {
	background-color: #22A7F0;
	color: #FFFFFF;
}

.wysiwyg .ui.fluid.popup .ui.basic.button>.right.icon:not(.button) {
    margin: 0;
}

.wysiwyg .right.menu [data-type="_toMD"] {
	background-color: #34495E;
	color: #FFFFFF;
}

.wysiwyg .right.menu [data-type="_toHTML"] {
	background-color: #F26202;
	color: #FFFFFF;
}

.wysiwyg .right.menu [data-type="_toMD"]:hover {
	background: rgba(0, 0, 0, 0.3);
}

.wysiwyg .right.menu [data-type="_toHTML"]:hover {
	background: rgba(0, 0, 0, 0.3);
}

/* Import Ratting SDK Style */
.rating {
	margin: 5;
	text-align: left;
}

.rating ._rate i {
	position: relative;
	font-size: 13px;
}

.rating ._rate i:hover {
	transform: scale(1.3);
}

/* Import Cropper SDK Style */
.cropper {
	width: 100%;
	min-height: 300px;
	background-color: darken(@white, 3%);
	border: 1px solid darken(@white, 10%);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Import Ticket Styling */
.ui.segment.items.ticket {
	.ui.radio.checkbox {
		display: none;
	}
	.ui.item {
		display: flex;
		align-items: center;
		.image {
			display: flex;
			justify-content: center;
			width: 75px;
		}
		.content {
			padding-left: 0.5em;
		}
	}
}
.ui.segment.detail.ticket {
	border: 1px solid rgba(0, 0, 0, 0.09);
	&.reply {
		margin-left: 15px;
	}
	img {
		width: 50px;
	}
	.actions {
		text-align: right;
	}
	.ui.header {
		margin: 5px;
	}
	.heading {

	}
	.content {
		margin-top: 10px;
		border-top: 1px solid rgba(0, 0, 0, 0.10);
		.transition(0.2s);
		&.hide {
			display: none;
		}
	}
}
.ui.attached.segment {
	&.comments {
		outline: none;
		height: 200px;
		border-bottom: none;
	}
	&.image {
		outline: none;
		border-bottom: none;
	}
	&.file {
		outline: none;
	}
}

/* Import CMS Styling */
.ui.card {
    border-radius: 0;
	&.tags .image {
	    background-color: #2185D0;
	    text-align: center;
	    padding: 40px 0px;
	    border-radius: 0px !important;
	}
	&.tags .image .header {
	    color: #FFFFFF;
	    font-size: 40;
	    font-weight: normal;
	}
	&.tags .content .header {
	    font-size: 30;
	    font-weight: normal;
	}
	.extra.content {
	    padding: 0;
	}
	.extra.content .ui.basic.buttons {
	    border-radius: 0;
	    border-left: none;
	    border-right: none;
	    border-bottom: none;
	    box-shadow: none;
	}
	.extra.content .ui.basic.buttons .ui.button {
	    font-weight: bold;
	    border-radius: 0;
	}
	.extra.content .ui.basic.buttons .ui.button:hover {
	    background: rgba(0, 0, 0, 0.07) !important;
	}
}
.ui.segment {
	&.setting {
	    // border: 1px solid transparent;
	    cursor: pointer;
	    padding: 50px;
	    text-align: center !important;
	    -webkit-transition: all .15s ease-in-out;
	    -moz-transition: all .15s ease-in-out;
	    -ms-transition: all .15s ease-in-out;
	    -o-transition: all .15s ease-in-out;
	    transition: all .15s ease-in-out
	}
	&.setting:hover {
	    background-color: rgba(0, 0, 0, 0.030);
	}
	&.setting .header {
	    font-size: 18px;
	    font-weight: normal;
	    margin-top: 15px;
	}
	&.setting .header .icon {
	    font-size: 2.5em;
	}
}
.featured.image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 5px;
	&img {
	    width: 100%;
	    height: auto;
	    margin-top: -25%;
	    -webkit-filter: blur(5px);
	    -webkit-transform: scale(1.1);
	    filter: blur(5px);
	    transform: scale(1.1);
	}
}
.article {
	.title {
	    margin-top: 30px;
	    margin-bottom: 30px;
	    font-size: 40px;
	}
	.content {
	    margin-top: 10px;
	    margin-bottom: 10px;
	    line-height: 2;
	    font-size: 16px;
	}
}
.hastags {
    padding: 1px 4px;
    background-color: rgba(68,147,206,0.5);
    color: #080808;
    border-radius: 2px;
}

/* Import Store Styling */
@keyframes moving {
  0% {
  	height: 20px;opacity: 0.5;
  }
  25% {
  	height: 50px;opacity: 1;
  }
  50% {
  	height: 20px;opacity: 0.5;
  }
  75% {
  	height: 50px;opacity: 1;
  }
  100% {
  	height: 20px;opacity: 0.5;
  }
}
#modal-loading {
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
.loadings .ball {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border-radius: 10px;
	background-color: #22A7F0;
	-webkit-animation: moving 1s infinite;
	/* Chrome, Safari, Opera */
	animation: moving 1s infinite;
	float: left;

	&.one {
	  animation-delay: 0.1s;
	}
	&.two {
	  animation-delay: 0.2s;
	}
	&.three {
	  animation-delay: 0.3s;
	}
	&.four {
	  animation-delay: 0.4s;
	}
	&.five {
	  animation-delay: 0.5s;
	}
}
.sliders {
    width: 100%;
    min-height: 200px;
    background-color: #2D2D2D;
    padding: 65px 20px 20px 70px;
    color: #FFFFFF;
}
.ui.card {
	&.review {
	    border-radius: 0;
	    .title {
		    font-size: 15px;
		}
	}
	&.product {
	    border-radius: 0;
		.image {
		    background-color: #EBEBEB;
		    border-radius: 0 !important;
			img {
			    border-radius: 0;
			}
			.label {
			    position: absolute;
			    bottom: 10px;
			    right: 10px;
			    color: #FFFFFF;
			    text-transform: uppercase;
			    background-color: rgba(0, 0, 0, 0.5);
			    padding: 8px;
			}
		}
		.content {
		    text-align: left;
			.ui.basic.button {
			    box-shadow: none;
			    font-size: 25px;
			    padding-top: 0;
			    i {
				    font-size: 28px;
				}
			}
		}
		.title {
		    font-size: 14px;
		}
		.price {
		    box-shadow: 13.5px;
		    margin: 3px 0;
		}
		.extra.content {
		    padding: 0;
		}
		.progress {
		    height: 5px;
			.bar {
			    background-color: #3E95D6;
			    width: 0;
			    height: 5px;
			}
			.bar.active {
			    width: 100%;
			}
		}
	}
}
.ui.items.product .item {
    padding: 5px;
    cursor: pointer;
	&:hover {
	    background-color: rgba(0, 0, 0, 0.030);
	}
	.image {
	    width: 120px;
	}
	.title {
	    font-size: 14px;
	}
	.price {
	    box-shadow: 13.5px;
	    margin: 3px 0;
	}
}
.product.detail {
	.title {
	    font-size: 22px;
	    font-weight: normal;
	}
	.rate {
	    font-size: 68px;
	    font-weight: normal;
	    line-height: 1;
	    margin-top: 5px;
	}
	.rating a i.yellow.icon {
	    color: #FFFFFF !important;
	    font-size: 15px;
	    line-height: 1;
	}
	.description {
	    margin: 0;
	}
	.ui.light.header {
		margin: 0;
	}
}

/* Owl Carousel Style */
.owl-carousel {
	.item img {
	    display: block;
	    width: 100%;
	    height: auto;
	}
	&.owl-multiple:after {
	    position: absolute;
	    content:"";
	    height:100%;
	    width:90%;
	    bottom:0;
	    right:0;
	    background: linear-gradient(to right, rgba(45,45,45,0) 0%, rgba(45,45,45,1) 100%); /* W3C */
	}
	&.owl-multiple .item {
	    padding: 1rem;
	}
	&.owl-multiple.owl-review .owl-item {
	    width: 300px !important;
	}
	.owl-controls .owl-pagination {
	    display: none;
	}
	.owl-controls .owl-buttons .owl-prev {
	    left: 0;
	}
	.owl-controls .owl-buttons .owl-next {
	    right: 0;
	}
	.owl-controls .owl-buttons .owl-prev,
	.owl-controls .owl-buttons .owl-next {
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    margin: 0;
	    border-radius: 0;
	    height: 100%;
	    background-color: rgba(255, 255, 255, 0);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 4px;
	    font-size: 16px;
	    z-index: 200;
	}
	.owl-carousel .owl-controls .owl-buttons .owl-prev:hover,
	.owl-carousel .owl-controls .owl-buttons .owl-next:hover {
	    background-color: rgba(255, 255, 255, 0.075);
	}
	&.owl-dark .owl-controls .owl-buttons .owl-prev,
	&.owl-dark .owl-controls .owl-buttons .owl-next {
	    background-color: rgba(0, 0, 0, 0.15);
	}
	&.owl-dark .owl-controls .owl-buttons .owl-prev:hover,
	&.owl-dark .owl-controls .owl-buttons .owl-next:hover {
	    background-color: rgba(0, 0, 0, 0.3);
	}
}

/**
 * IOS Style Toggle Button
 * original from: https://codepen.io/mallendeo/pen/eLIiG
 */
 .tgl {
   display: none;
 }
 .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
   box-sizing: border-box;
 }
 .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
   background: none;
 }
 .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
   background: none;
 }
 .tgl + .tgl-btn {
   outline: 0;
   display: block;
   width: 4em;
   height: 2em;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
 .tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
 }
 .tgl + .tgl-btn:after {
   left: 0;
 }
 .tgl + .tgl-btn:before {
   display: none;
 }
 .tgl:checked + .tgl-btn:after {
   left: 50%;
 }

 .tgl-light + .tgl-btn {
   background: #f0f0f0;
   border-radius: 2em;
   padding: 2px;
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
 }
 .tgl-light + .tgl-btn:after {
   border-radius: 50%;
   background: #fff;
   -webkit-transition: all .2s ease;
   transition: all .2s ease;
 }
 .tgl-light:checked + .tgl-btn {
   background: #9FD6AE;
 }

 .tgl-ios + .tgl-btn {
   background: #fbfbfb;
   border-radius: 2em;
   padding: 2px;
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
   border: 1px solid #e8eae9;
 }
 .tgl-ios + .tgl-btn:after {
   border-radius: 2em;
   background: #fbfbfb;
   -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
 }
 .tgl-ios + .tgl-btn:hover:after {
   will-change: padding;
 }
 .tgl-ios + .tgl-btn:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
 }
 .tgl-ios + .tgl-btn:active:after {
   padding-right: .8em;
 }
 .tgl-ios:checked + .tgl-btn {
   background: #86d993;
 }
 .tgl-ios:checked + .tgl-btn:active {
   box-shadow: none;
 }
 .tgl-ios:checked + .tgl-btn:active:after {
   margin-left: -.8em;
 }