@font-face {
  font-family: Monserrat;
  src: url(montserrat/Montserrat-Regular.ttf);
}

.clearfix {
	clear:both;
}
img { width:100%; height:auto }
.login-logo, .register-logo { 
    width: 250px;
    margin: 0 auto 25px;
}
.form-control-feedback { line-height:34px !important; }
.register-wrapper { position:relative; margin-top:10px; text-align:center;  }
.login-reg-left, .login-reg-right { border-top:1px solid #d2d6de; width:30%; position:absolute; top:10px; } 
.login-reg-left { left:0; }
.login-reg-right { right:0; }
.description { margin-top: 5px; display: block; font-size: small; color: #999; }
/* UI Component
======================= */
.callout-flat { border-radius:0; }
/* Menu
======================
*/
.top-menu { 
	color: #fff;
    background-color: transparent;
    background-image: none;
    padding: 15px;
    position: relative;
    top: 12px;
    font-size: 18px;
}
.navbar-nav>.user-menu>.dropdown-menu {
	padding:0;
}
.dropdown-menu { border:none; }
.navbar-nav > .user-menu > .dropdown-menu {
  width: 160px;
}
.logo-lg img { width:150px; }
.logo-mini img { width:30px; }

/* Content
=======================*/

h1, h2, h3, h4, h5, h6 { 
    /*font-family: 'Roboto Slab', serif;*/
  font-family: 'Monserrat', sans-serif;
  font-weight: 700;

}
.box-body { 
    font-family: 'Open Sans', sans-serif;
}
.box-body, .box-header { padding:10px 20px !important; }
.box-body { padding-bottom:20px !important; }
.table { border-bottom: 1px solid #f4f4f4 !important; }
table.dataTable thead th, table.dataTable thead td {border-bottom: 1px solid #f4f4f4 !important;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { border-bottom: 1px solid #f4f4f4; padding: 8px !important; }
.table>tbody>tr>td { color:#777; }
.dataTables_filter input, .dataTables_length select {   
    border-radius: 0;
    box-shadow: none;
    border-color: #d2d6de;
}
.dataTables_filter input, .dataTables_length select {
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}
.action a { margin-left:5px; }
.action .trash { color:#dd4b39; }
.form-image { width: 300px; margin-top: 10px; }
.license-status.btn, .license-site .btn { padding:0 12px !important; font-size:12px !important; text-transform:uppercase; }
.accounting-type.btn { padding:2px 12px !important; font-size:12px !important; text-transform:uppercase; }
.license-site .btn { margin-left:5px; }
.tooltip-inner {
    max-width: 100px !important;
    width: 100px !important;
}
.price-package-default { display:none; }
.custom-price-package {
	border: 1px solid #d2d6de;
	padding:15px;
	margin-bottom:15px;
}
.add-price { margin-bottom:10px; }
.package-wrapper .alert { margin-bottom:10px; }
.package-detail { margin-bottom:10px; }
.package-detail span { margin-left:10px; }
.theme-download, .course-modul, .jasa-type { display:none; }
.package-show { display:block; }
.order-sidebar {
	padding:15px;
	border: solid 1px #ccc;
}
.order-title { margin-top:0; }
.order-thumb { margin-bottom:10px; }
.package-detail { margin-bottom:10px; }
.package-detail span { margin-left:10px; }
.package-error { margin-left:10px; }
.item-detail-wrapper { margin-bottom:10px; }
.hosting-title { line-height: 24px !important; }
.order-sidebar .btn, .cart .btn { width:100% !important; }
.order-package .row{ margin-top:15px; }
.order-package .box{ margin-top:25px; }
.order-package .box-body, .cart.box-body { padding:20px !important; }
.order-package .col-md-8 { padding-left:0 !important; }
.cart .btn-primary { margin-top:15px; }
.cart .col-md-4, .cart .col-md-8, .cart .col-md-6 { padding:0; }
.cart .cart-left { padding-left:10px; }
.cart .cart-right { padding-right:10px; }
.voucher.form-control { width:150px; display:inline-block; }
.cart .voucer-btn { width:120px !important; display:inline-block; margin-top:-1px; margin-left:10px;     padding: 6px 0; }
.coupon-code .voucer-btn { position:relative; top:-2px; }
.cart-delete { color:#dd4b39; margin-right:10px; cursor:pointer; }
.detail-info { margin-top:20px; border-top: 1px solid #f4f4f4; }
.detail-content { margin-top:20px; }
.table-cart { 
	text-align:right; 
	width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.cart .bank-payment .image {
 /*width: 100px; */
 margin-bottom:5px; 
}
.cart .bank-payment .image img { width:auto; }
.cart .bank-payment { margin-top: 20px; }
.cart .box-header { padding-left: 0 !important; }
.cart .bank { margin-bottom:15px; }
.voucher-wrapper { margin-top:20px; }
.cart-login { margin-bottom:20px;}
.checkout-desc { text-align:center; margin-bottom:20px; }
.checkout-desc h2 { margin-top:0 !important; }
.order-cart-right { text-align:right; }
.package-aff img { width:100%; height:auto; margin-top:10px; margin-bottom:15px; }
.square-banner { margin-top:15px; }
.order-description { border-bottom:1px solid #f4f4f4; margin-bottom:10px; }
.sidebar-aff { margin-top:15px; }
.sidebar-aff .text { margin-bottom:5px; }

.order-heading { margin: 0px 30px 0px; }
.order-heading .btn { margin-right:5px; }
.order-heading .btn .fa, .order-heading .btn .fas { margin-right:5px; }
.detail-order { padding-top:20px !important; }
.order-note { margin-bottom:20px; }
.order-heading-left { float:left; }
.order-heading-right { float:right; text-align:right; }
.order-heading-right .btn { margin-top:-5px; }
.order-heading input, .order-heading select, .order-heading button { display:inline-block; width:auto; }
.order-heading select { margin-right:5px; }
.order-header { margin-bottom:20px; }
.detail-order .order-head { background:#222d32; color:#fff; }
.detail-order .order-head th { padding:10px !important; }
.detail-order .text-label {
	display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
	border-bottom:1px solid #dfe4ec;
	padding-bottom:10px;
	width:100%;
}
.detail-order .data-name {
	font-size: 18px;
    margin-bottom: 10px;
    color: #3c8dbc;
}
.detail-order .order-invoice { padding:2px 15px; margin-left:5px; }
.order-detail-status { margin-top:10px; display:block; padding:3px; width:150px; }
.detail-order .logo { width:250px; margin-top:30px; }
.detail-order .invoice-order { margin-bottom:10px; font-size:18px; }
.detail-order .table-order { margin-top:20px; }
.detail-order .quantity { text-align:center; }
.detail-order .total-head, .detail-order .totalprice{ text-align:right; }
.detail-order .note-wrapper {
    margin-top: 20px;
    border: 1px solid #dfe4ec;
    padding: 0 15px 15px;
}


.detail-order .note-wrapper h4 { text-align:center; }
.detail-order .bank-payment { text-align:center; margin-top:20px; border-top:1px solid #dfe4ec; padding-top:5px; } 
.detail-order .bank-payment h4 { margin-bottom:25px; } 
.detail-order .bank-payment .col-md-3 { margin-bottom:15px; }
.detail-order .bank-payment .box-title { margin-bottom:15px; }
.detail-order .bank-payment .desc { margin-top:20px; margin-bottom:20px; }
.detail-order .bank-payment .image { width:100px; margin-bottom:5px; margin:auto;}
.bank-payment { text-align: center; }
.bank-payment .bank { display: inline-block; float: none; width: 49% !important; }
.detail-order-wrap { margin:20px 50px 50px; padding:20px; border:1px solid #eaeaea; }
.detail-order-wrap h4 { font-weight:bold; }
.detail-order-wrap .table-cart { margin-bottom:0 !important; }
.table-order.table>tbody>tr>td, .table-order.table>tfoot>tr>td, .table-order.table>thead>tr>td {
    border-bottom: 1px solid #eaeaea !important;
    padding: 8px !important;
}
.table-order.table>thead>tr>th, .table-order.table>tbody>tr>th, .table-order.table>tfoot>tr>th, .table-order.table>thead>tr>td, .table-order.table>tbody>tr>td, .table-order.table>tfoot>tr>td {
    border-top: 1px solid #eaeaea;
}
.total-order .table-cart { margin-top:20px; }
.button-package-wrap { margin-bottom:15px; }
.add-custom-package { margin-left:10px; }
.package-default, .package-custom { display:none; }
.table > tbody > tr > td { vertical-align:middle !important; }
.order-wrap .dropdown-menu>li>a {
	padding:5px 10px;
}
.order-wrap .dropdown-menu {
	border:1px solid #e6e6e6;
	border-radius: 0;
}
.order-wrap .btn-default { border-radius:0 !important; }
.table-cart .diskon { text-align: right; }
.table-cart .diskon-field {
	-webkit-appearance: textfield;
    -moz-appearance: textfield;
	appearance:textfield;
}
.table-delete { text-align:center; }
.order-delete { color:#dd4b39; margin-right:10px; cursor:pointer; }
.customer-old, .customer-new-wrap { display:none; }
.sort-order-wrap {
	padding: 0 0 10px!important;
    margin-bottom: 20px;
}
.sort-order-wrap .col-md-6 { padding:0; }
.sort-order { float:left; font-size:20px; color:#666; }
.sort-order span { margin:0 20px; }
.sort-order-wrap .fa { margin-right:5px; }

/* Accounting
========================== */
.balance-order {     
	background-color: #f39c12;
	border-top: 1px solid #e08e0b !important; 
	border-bottom: 1px solid #e08e0b !important; 
	color:#fff !important;
}
.balance-billing {     
	background-color: #00a65a;
	border-top: 1px solid #008d4c !important; 
	border-bottom: 1px solid #008d4c !important; 
	color:#fff !important;
}
.balance-expense {     
	background-color: #dd4b39;
	border-top: 1px solid #d73925 !important; 
	border-bottom: 1px solid #d73925 !important; 
	color:#fff !important;
}

/* Nota 
========================== */
.table.no-border tr td, .table.no-border tr th {
  border: 0 !important;
}
.nota-detail-order-wrap { margin:20px 25px 25px; padding:10px; border:1px solid #eaeaea; }
.nota-order-heading { margin: 0px 10px 0px; }
.nota-detail-order table { margin-bottom:0; }
.nota-detail-order { display:table;  margin-top:20px; text-transform:uppercase !important; }
.nota-col-detail { display:table-cell; width:50%; padding:0 10px; position:relative; }
.nota-head .nota-head-logo { width:130px; margin:0 auto 10px; }
.nota-head .nota-head-logo img { width:100%; height:auto; }
.nota-head-info { margin-top:-5px; }
.nota-head { position:relative; text-align:center; color:#000; }
.nota-phone, .nota-website, .nota-other-info { font-size:12px; line-height: 16px; font-family:'Open Sans', sans-serif; font-weight:600; }
.nota-head .nota-website { margin-left:15px; }
.nota-head .nota-border-left { position:absolute; left:15px; top:40px; border-bottom:1px solid #ef4538; width:315px; }
.nota-head .nota-border-right { position:absolute; right:15px; top:40px; border-bottom:1px solid #ef4538; width:315px; }
.nota-head .nota-invoice { position:absolute; left:25px; top:45px; font-size:12px; font-family:'Open Sans', sans-serif; text-transform:uppercase; }
.nota-head .nota-date { position:absolute; right:25px; top:45px; font-size:12px; font-family:'Open Sans', sans-serif; text-transform:uppercase; }
.nota-domain { font-size:8px; }

.nota-detail-info-klien-head { font-size:16px; line-height:16px; padding:5px; background:#ef4538; color:#fff; text-align:center; text-transform:uppercase; font-family:'Open Sans', sans-serif; font-weight:600; }
.nota-detail-wrapper { border:1px solid #ef4538; }
.nota-detail-info table>thead>tr>th { font-size:14px; font-family:'Open Sans', sans-serif; font-weight:600; border-bottom:1px solid #ef4538 !important; padding:5px !important; font-weight:bold; color:#000; }
.nota-detail-info table>tbody>tr>td { font-size:12px; color:#000 !important; border-bottom:1px solid #ef4538 !important; font-family: 'Open Sans', sans-serif; padding:5px !important; }
.nota-border-none { border:none !important; }
.nota-order-total tr td { border:none !important; text-align:right; padding:3px !important; }
.nota-order-note { margin-top:20px; padding:10px; color:#000; }
.nota-order-note ul { margin:0 0 0 -15px;}
.nota-order-note li { font-size:12px !important; line-height:16px; font-family:'Open Sans', sans-serif; }
.nota-order-note li b { line-height:10px; }
.nota-detail-bank { margin-top:20px; color:#000; }
.nota-detail-bank table { margin-top:10px; }
.nota-detail-bank table>tbody>tr>td { font-size:12px; color:#000 !important; border-bottom:1px solid #ef4538 !important; font-family: 'Open Sans', sans-serif; padding:5px !important; }
.nota-bank-desc { font-size:12px !important; line-height:12px; font-family:'Open Sans', sans-serif; text-align:center; margin-top:10px; }
.nota-detail-bank span, .detail-bank p { display:inline-block; margin-top:-2px; font-family:'Open Sans', sans-serif; font-size:12px !important; line-height:12px; }
.nota-detail-bank span:before {
  background:#ef4538;
  content: '';
  display: inline-block;
  width: 7px;
  height: 10px;
  padding:3px 5px;
  margin-right: 5px;
}
.nota-lunas { position:absolute; top:100px; left:30px; width:200px; transform: rotate(-30deg); }
.nota-lunas img { width:100%; height:auto; }
.nota-bank-name { text-align:center; }
.checkout, .payment-confirm { padding:40px 100px !important; }
.checkout-title { text-align:center; margin-top:0; font-size:30px; }
.checkout-invoice,.checkout-status,.checkout-date { font-size:24px; text-align:center; margin-top:0; color:#909090; }
.checkout-status { font-size:20px; }
.checkout-date { font-size:16px; }
.checkout-invoice span { color: #000; }

.checkout .desc { text-align:center; margin-bottom:20px; }
.checkout .box-title { text-align:center; display:block; font-weight:bold; }
.checkout .detail-info { border:none; }
.checkout .detail-payment { border:1px solid #dd4b39; padding:20px; margin-bottom:30px; }
.checkout .detail-payment .desc { margin-bottom:5px; }
.checkout .total-payment { border:1px solid #f39c12; text-align:center; background:#fff8ec; padding:10px; margin-bottom:20px; }
.checkout .total-payment .title { font-size:18px; color:#929292; }
.checkout .total-payment .value { font-weight:bold; font-size:20px; }
.checkout .detail-order, .checkout .detail-pelanggan { border:1px solid #d2d6de; padding:10px 20px 20px; margin-bottom:30px; }
.checkout .detail-order .box-title, .checkout .detail-pelanggan .box-title { margin-bottom:10px; }
.checkout .bank-payment { text-align:center; width: 500px; margin: auto; } 
.checkout .bank-payment .col-md-6 { margin-bottom:15px; }
.checkout .bank-transfer .box-title { margin-bottom:15px; }
.checkout .bank-transfer .btn { width:100%; padding:10px; text-transform:uppercase; font-weight:bold; }
.checkout .bank-transfer .desc { margin-top:20px; margin-bottom:20px; }
.checkout .bank-transfer .image { margin-bottom:5px; }
.checkout .bank-transfer .image img { width:auto; }
.checkout .bank-account { text-align:center; margin-top:5px; }
.checkout .bank-account strong { font-size:18px; }
.checkout .callout, .payment-confirm .callout { margin:0; }
.editor-desc {
	font-size:13px;
	margin-top:10px;
	color:#d73925;
}
h2.doc-title { font-size:24px; margin-top:0; border-bottom:1px solid #f4f4f4; padding-bottom:15px; margin-bottom:15px; }
h3.doc-title { font-size:20px; margin-top:0; border-bottom:1px solid #f4f4f4; padding-bottom:10px; margin-bottom:10px; } 
.media-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.media-video {
	position:relative;
	/*padding-bottom: 56.25%; */
}
.media-thumb img{
	width:auto;
	height:130px;
}
.materi-nav { padding:10px 0; }
.doc-materi { margin:10px 0; }
.doc-materi .materi-sub-title { margin-bottom:10px; }
.materi-wrap {
	padding: 10px;
	border: 1px solid #d2d6de;
	margin-bottom: 10px;
}
.materi-default { display:none; }
.materi-doc-wrap .box-default { margin-left:-8px; margin-right:-8px; }
.materi-doc-wrap .col-md-3, .materi-doc-wrap .col-md-9 { padding-left:8px; padding-right:8px; }
.doc-sidebar { height:100vh; }
.materi-desc { 
	font-size: 18px;
    line-height: 28px;
}
.materi-desc p { margin-bottom:20px; }
.materi-desc img {
	width: 80%;
    height: auto;
    margin: auto;
    display: block;
}
.doc-description ul, .doc-sidebar ul { margin-left: -25px; }
.doc-description ul li, .doc-sidebar ul li { margin-bottom:3px; }
.documentation { padding:15px; }
.documentation .doc-title { margin-top:10px; }
.documentation .btn { width:100%; }
.billing .image { width:300px; margin-top:15px; }
.setting .image { 
	width:200px; 
	margin-top:15px;
	background: #ecf0f5;
    padding: 10px;
    margin-bottom: 10px;
}
.video-embed {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
}
.video-embed video{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.video-content {
    padding-top:55.25%;
}
/* Data Tables
======================= */
.content-wrapper .dataTables_paginate {
	position:relative;
	top:5px;
}
.content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #4285f4 !important; 
	border:none !important; 
	color:#fff !important;
	padding: 5px 13px !important;
}
.table-responsive {
    overflow-x:unset;
}
.table-responsive h3 { font-size:18px; }
.table-responsive .box-header { padding:10px 0 !important; margin-bottom:20px; }

/* Input
======================= */
.btn-full-width { width:100% !important; margin-top:10px; }
.checkbox, .radio { margin-top:0 !important; margin-bottom:5px !important; }
.forgot-password { text-align:right; }
.checkbox span { margin-left:5px; }

/* Error
====================
*/
.help-block {
    display: block;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #737373;
}

.sticky-default {
    border: 0;
    bottom: 30px;
    width: 50px;
    height: 50px;
    border: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    z-index: 730;
    transition: ease-out;
    color: #fff;
    font-size: 26px !important;
    text-align: center;
    background: #3c8dbc;
	border:1px solid #367fa9;
}
.sticky-default:hover { color:#fff; }
.sticky-default:focus { color:#fff; }
.sticky-default i { position:relative; top:6px; }
.sticky-icon {
    right: 30px;
    position: fixed;
    bottom: 80px;
    display: none;
    z-index: 999;
}
.sticky-button {
	display:block;
    width: 50px;
    height: 50px;
    border: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-bottom: 10px;
    z-index: 730;
    transition: ease-out;
    color: #fff;
    font-size: 24px !important;
    text-align: center;
    background: #3c8dbc;
	border:1px solid #367fa9;
}
.sticky-button:hover { color:#fff; }
.sticky-button:focus { color:#fff; }
.sticky-button i { position:relative; top:8px; }
.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;    
}
.wrapper-product{
    display: flex;
    flex-wrap: wrap;
}
.label-mobile{
    display: none;
}
    
.login-page { background: #ecf0f5; }
.login-box-msg { font-size: 18px; }
.row-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.image-background {
    position: relative;
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
}
.image-background.cover {
    background-size: cover;
}
.side-bg {
    height: 747px;
}
.gradient {
    background-image: -webkit-gradient(linear, left bottom, right top, from(#a772ff), to(#161c2d));
    background-image: linear-gradient(to right top, #a772ff, #161c2d);
}
.overlay>.text-content {
    position: relative;
    z-index: 1;
    margin: auto;
}
.overlay:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(39, 51, 62, 0.6);
    opacity: 1;
    z-index: 0;
}
.gradient.overlay:after {
    background-image: -webkit-gradient(linear, left bottom, right top, from(rgb(221, 75, 57, 0.7)), to(rgba(22, 28, 45, 0.7)));
    background-image: linear-gradient(to right top, rgb(221, 75, 57, 0.7), rgba(54, 29, 26, 0.7));
}
.text-contrast { color: #fff; font-size: 50px; line-height: 70px; font-weight: bold; }
.small { font-size: 30px; font-weight: 100; line-height: 30px; }
.visible-lg-block {
    display: none !important;
}

/* Video 
======================= */
.title-video{
  font-weight: normal!important;
  color: #919191!important;
}

.related-product-title.title-video{
    font-size: 18px;
    height: 60px;
}

.embed-container { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed{ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {
    display: none;
}

.addReadMore.showmorecontent .readMore {
    display: none;
}
 
.addReadMore .readMore,
.addReadMore .readLess {
    font-weight: bold;
    margin-left: 2px;
    cursor: pointer;
}
 
.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
}

.readMore,.readLess,.hp-links{
  display: block;
  padding-top: 10px ;
  color: #a7a7a7;
  cursor: pointer;text-decoration: underline;
  font-weight: 600;
}

.readMore:active,.readLess:active,.hp-links:hover,.readMore:hover,.readLess:hover,.hp-links:hover{
  color: #a7a7a7;
  text-decoration: underline;
}

.box-video-content{
    padding: 0 20px 20px 20px;
}

.sidebar-video h4{
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 1em;
}

.sidebar-video .box{
    box-shadow: unset;
}
.sidebar-video .box-title{
  margin-left: -15px;
  padding-top: 5px;
}

.sidebar-video .box-title p{
  color: #585858;
  font-weight: 600;
}

.view-more{
  text-align: center;
}

.view-more a{
    color: #a2a2a2;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
}

.box-video{
    background-color: #fff;
}

.navbar-mobile{
    display: none;
}

.sidebar-menu > li > a > .fas{
    width: 20px; 
}

i.fa.fa-shopping-cart.cart-exist:after {
    content: "";
    position: absolute;
    background: #c44646f5;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 28px;
}

#modal-desc{
    overflow: auto;
    max-height: 450px;
}

.countcart {
    right: unset!important;
    left: 28px;
}
.text-cart{
    padding-left: 8px;
}


.cart-mobile{
    display: none;
}

.product-list-in-box.detail-item>.item{
    padding: 1% 0px!important;
}


.product-list-in-box.detail-item>.item .item-group {
     padding: 0!important; 
}

.product-list-in-box.detail-item>.item .item-group .child-item ul{
    padding: 0!important;
}

.product-list-in-box.detail-item .detail-description{
    padding-left: 18px;
}

.product-list-in-box.detail-item .child-item{
    border-bottom: 1px solid #f1f1f1;
}

/*.custom.detail-item .product-title:before {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}
*/

.background-white{
    background:#fff;
}
.img-video {
    position: relative;
}
.img-video a{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #0909099e;
    padding: 8px 25px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
}

.img-video a:hover{
    background-color: red;
}

.box-video .related-product-title.title-video a,.sidebar-video .box-title a{
    padding-top: 0;
    color: #333;
    font-family: "Monserrat",sans-serif;
}
.product-footer { border-top: 1px solid #f4f4f4; padding-top: 15px;}
.product-price { font-size: 22px; font-weight: 700; }
.footer-price { padding-left: 0; }
.sidebar-video .img-video a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: 0909099e;
    padding: 5px 15px;
    border-radius: 5px;
    color: #fff;
}

.sidebar-video .box-title {
    padding-top: 0;
}

      .page-modul .content{
        padding-top: 0;
      } 

      .page-modul .section-materi,.section-video{
        overflow: auto;
      }
.section-materi {
    padding: 0;
    position: absolute;
    top: 0;
    overflow-y: scroll;
    left: 55px;
    width: 350px;
    height: 100%;
    overflow: scroll;
    background: #fff;
    border-right: 1px solid #ccc;
}
.copy-materi { margin-right: 10px; cursor: pointer; }
.section-video{ margin-left: 410px; }
.section-materi .box-body { padding: 0 !important; }
      .page-modul .video-modul{
         padding-top: 20px;
      }
      .page-modul .content .section-materi .box-header .title{
        padding: 0 5%;
      }

      .page-modul .materi-desc{
         font-size: 16px;
      }

      .page-modul .box-title-video h3{
         margin: 0;
         padding: 10px 0;
      }

      .page-modul .box-title-video h3{
         margin: 0;
         padding: 10px 0;
         border-bottom: 1px solid red;
         border-top: 1px solid red

      }

.page-modul .box-title-video {
    border-bottom: 1px solid red;
    border-top: 1px solid red
}

.unset-shadow{
    box-shadow: unset;
}

.no-padding-mobile{
    display: inline-block;
    width: 100%;
}

.action .dropdown-item {
    display: block;
    padding: 10px 15px;
    margin: 0;
    cursor: pointer;
}

.btn-viewmore{
    padding: 10px 50px!important;
    border-radius: 0!important;
    font-size: 18px!important;
}

/* Project
====================*/
.project-detail {
    margin: 20px auto 0;
}

.project-title {
    text-align: center;
}

.project-detail.col-md-9 {
    float: none;
}

.project-detail-item {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 15px;
}

.project-detail-data-key-title {
    padding: 10px 15px;
    font-weight: bold;
    font-size: 17px;
}

.project-detail-label {
    font-weight: bold;
}

.project-detail-value {
    color: #777;
    font-size: 15px;
}

.table-text-right {
    text-align: right;
}

.project-detail-label-domain {
    font-weight: bold;
    font-size: 18px;
}

#overlay{	
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
  }
  .cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
  }
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
  }


  .card-attendance{
    max-width:400px;
    margin:auto;
    border-radius:5px;
    overflow:hidden;
}

.attendance-header{
    background: #c52b35;
    padding: 15px 20px;
}

.attendance-body{
    background: #fff;
    padding: 20px;
}

.wrapper-log{
    overflow-y:scroll;
    height:300px;
}

.card-attendance-detail{
    padding: 15px;
    background: #fff;
    border-radius: 5px;
}

.attendance-detail{
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
}

.attendance-status{
    text-align: center;
    font-size: 16px;
    color: #c6c6c6;
}

.attendace-footer{
    display:flex;
    justify-content: center;
    margin-top:20px;
}

.attendace-footer-item{
    padding:0 7px;
}

.btn-attendance{
    background: #015fbf;
    min-width: 120px;
    border-radius: 5px;
    font-size: 15px;
    color:#fff;
    min-height: 38px;
    border-color: #015fbf;
}


.btn-attendance:hover{
    background: #015fbf;
}

.attendance-time{
    font-size: 40px;
    color: #fff;
    text-align: center;
    padding-top: 20px;
}

.attendance-date{
    color: #fff;
    text-align: center;
    padding-bottom:20px;
    font-size:16px;
}

.attendance-log{
    display:flex;
    font-size: 16px;
    border-bottom: 1px solid #e4dddd;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.attendance-log > div{
    width:40%;
}

.attendance-log > div:nth-child(3){
    width:20%;
}

.attedance-log-title{
    font-size: 18px;
    color: #000;
    font-weight: 600;
    padding-bottom:15px;
}

.behavior  .label{
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
}

.item-time{
    font-size:14px;
    font-weight:400;
}

.attendance-detail >div{
    padding :0 5px;
}

.label-dark{
    background-color:#000;
}
  @keyframes sp-anime {
    100% { 
      transform: rotate(360deg); 
    }
  }
  .is-hide{
    display:none;
  }
.child-item>ul li.active a { color: #dd4b39; }
.flex{
    display: flex;
}

.space-between{
    justify-content: space-between;
}
.wrapper-saldo{
    background: #ff7963;
    width: 87%;
    margin: auto;
    margin-top: -15%;
    border-radius: 10px;
    padding: 10px 15px;
    color:#fff;
}

.header-saldo{
    min-height: 130px;
}

.wrapper-saldo .amount{
    font-size: 48px;
    font-weight: 600;

    padding: 8px 0;
}

.font-12{
    font-size: 12px;
}

.contract{
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    color: #fff;
}

.contract i{
    color: #fff;
}
@media (min-width: 1024px){
    .visible-lg-block {
        display: flex!important;
    }
}
@media (min-width: 768px) {
    .fullscreen-md {
        min-height: 100vh;
    }
}
@media (max-width: 1366px){
    .section-video{ margin-left: 395px; }
}
@media (max-width: 1024px){
    .course-nav-wrapper { display: none; }
    .section-materi { width: 290px; }
    .section-video { margin-left: 308px; }
}
@media (max-width: 825px) {
    .login-box, .register-box {
        justify-content: center!important;
        height: 100vh !important;
        flex-direction: column!important;
        display: flex;
        width: 90%;
        margin-top: 20px;
    }
    .row-form { display: block; }

    .box-body.cart .box-header{
        padding-left: 0!important;
    }
    .hosting-detail .box-body { padding-top: 0 !important; }
    .hosting-detail .dataTable >thead:first-child>tr:first-child>th {border-top: none !important;}
    .bank-payment{
        padding-top: 10px;
    }

    .news-entry{
        border-bottom: 1px solid #e4e4e4;
        margin-bottom: 10px;
    }

    .products-list.product-list-in-box{
        padding-bottom: 10px;
    }
    
    /* Cart
    ======================= */
    .voucher.form-control {
        width: 100%;
    }

    .cart .voucer-btn {
        margin-top: 10px;
        width:100% !important;
        margin-left: 0;
    }

    .voucher-wrapper {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .table-cart td:nth-child(2n+1) {  
        text-align: left;
    }

    .table-checkout thead th:not(:first-child){display: none;}
    .table-checkout tbody td {display: block;}

    .table-checkout tbody td {  
        width: 100%;
    }

    .quantity.form-control{
        border: none;
        padding: 0;
        height: auto;
        text-align: right;
        width: auto;
        display: initial;
    }
    .table-checkout td:nth-child(5),    
    .table-checkout td:nth-child(4),    
    .table-bordered td:nth-child(3) {  
        text-align: right;
    }

    .table-detail td:nth-child(4),    
    .table-detail td:nth-child(3),    
    .table-detail td:nth-child(2) {  
        text-align: right;
    }

    .label-mobile
    {
        display: block;
        text-align: left;
        float: left;
    }    

    .checkout, .payment-confirm{
        padding: 10px!important;
    }

    .checkout .bank-payment {
        width: 100%;
    }

    .col-md-3{
        width: 100%;
    }

    /* Packages
    ======================= */
    .order-package .col-md-8 {
        padding-left: 15px!important;
    }

    .sidebar-video h4{
        margin-block-start: 1em!important;
        margin-block-end: 0.8em!important;
    }

    /* Video 
    ======================= */
    .box-video-content{
        min-height: auto;
    }

    .box-video-content{
      padding: 0 10px 10px 10px;
    }

    .box-video-content h3{
      font-size: 16px;
    }

    /* DataTable 
    ======================= */
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, 
    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
    content: '\f107'!important;
        font-family: "Font Awesome 5 Free"!important;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-weight: 900;
        float: right;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before{
        content: '\f106'!important;
        font-family: "Font Awesome 5 Free"!important;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-weight: 900;
        float: right;

    }

    table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before{
        color: #9f9f9f!important;
        background:transparent!important;
    }

    table.dataTable thead .sorting_asc{
        width: 8%;
    }

    .table-responsive {
         border: none; 
    }

    table.dataTable >tbody>tr>td{
        border-bottom: 1px solid #f4f4f4;
        padding: 10px 8px !important;
    }

    .dataTables_info{
        display: none;
    }

    .dataTables_length label,.dataTables_filter label{
        text-align: left;
        width: 100%;
    } 

    .dataTables_filter input,.dataTables_length select{
        width: 100%;
        display: block;
        padding: 7px;
    }

    .dataTables_length{
        display: none
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0px!important;
        font-weight: normal!important;
    }

    .dataTable >thead:first-child>tr:first-child>th {
        border-top: 1px solid #e6e6e6;
        text-transform: uppercase;
        color: #666;
    }

    .dataTable{
        margin-top: 20px!important;
    }

    table.dataTable>tbody>tr.child span.dtr-title {
        color: #666;
        font-weight: normal!important;
    }

    .dataTable .course-link{
        /*color: #666;*/
    }

    #Kelas-table.dataTable >thead{
        display: none;
    }



    table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
    }

    /* Menu Mobile 
    ======================= */
    .main-sidebar {
        /* -webkit-transform: translate(-230px, 0); */
        -ms-transform: translate(-230px, 0);
        -o-transform: translate(-230px, 0);
        transform: translate(-230px, 0);
    }
    .content-wrapper, .main-footer {
        margin-left: 0;
    }
    .navbar.navbar-static-top{
        display: none;
    }
    .main-header .logo { float: none; width: 100%; }
    .navbar-mobile {
        box-sizing: border-box;
        display: flex;
        -webkit-box-flex: 0;
        flex-grow: 0;
        flex-shrink: 0;
        min-height: 0pt;
        min-width: 0pt;
        user-select: none;
        flex-direction: row;
        position: sticky;
        bottom: 0px;
        background-color: #fff;
        height: 6.2rem;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        border-width: 0pt;
        border-style: solid;
        margin: 0pt;
        padding: 0pt;
        z-index: 999;
      -webkit-box-shadow: 0px 0px 16px 0px rgb(179, 179, 179);
      -moz-box-shadow: 0px 0px 16px 0px rgb(179, 179, 179);
        box-shadow: 0px 0px 16px 0px rgb(179, 179, 179);
    }

    .container-item-menu-mobile{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        -webkit-box-flex: 0;
        position: relative;
        min-height: 0pt;
        min-width: 0pt;
        user-select: none;
        z-index: 1;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        height: 6.2rem;
        border-width: 0pt;
        border-style: solid;
        margin: 0pt;
        padding: 0pt;
        flex: 1 1 0%;
    }
    .icon-menu-mobile{
        -webkit-box-align: stretch;
        align-items: stretch;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        -webkit-box-flex: 0;
        flex-grow: 0;
        flex-shrink: 0;
        position: relative;
        min-height: 0pt;
        min-width: 0pt;
        user-select: none;
        border-width: 0pt;
        border-style: solid;
        margin: 0pt 0pt 2rem;
        padding: 0pt;
        color: #ffff;
    }

    .icon-mobile-text{
        box-sizing: border-box;
        font-family: "Source Sans Pro", Helvetica;
        font-style: inherit;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        font-size: 1.4rem;
        font-weight: 400;
        display: block;
        color: rgb(255, 255, 255);
        bottom: 0.8rem;
        position: absolute;
        border-width: 0px;
        font-variant: normal;
        margin: 0.8rem 0px 0px;
        padding: 0px;
        text-decoration: none;
        left: 50%;
        transform: translateX(-50%);

    }

    #modal-desc{
    overflow: auto;
    max-height: 400px;
    }

    .fa-1x {
        font-size: 1.2em;
    }

    .navbar-mobile .icon-mobile-text,
    .navbar-mobile .icon-menu-mobile{
        color: #333;
    }    
    .navbar-mobile .active .icon-mobile-text,
    .navbar-mobile .active .icon-menu-mobile{
        /*color: rgb(44, 179, 172)!important;*/
        color: #dd4b39;

    }
    .container-item-menu-mobile.active{
        /*background-color: #0000000f;*/
    }

/*    .product-list-in-box>.item,.product-list-in-box>.item .item-group{
        padding: 0!important;
    }*/

    .box-body, .box-header {
        padding: 10px!important;
    }

    .bank-payment .bank-account{
        margin-bottom: 15px;
    }

    .detail-content {
        margin-top: 0;
    }

    .order-title{
        font-size: 24px;
    }

    .cart-mobile{
        display: block;
        position: absolute;
        display: inline;
        top: 50%;
        transform: translateY(-50%);
        right: 25px;
        color: #fff;
    }

    .cart-mobile .countcart{
        position: absolute;
        top: -8px;
        left: 15px
    }

    .domain-section{
        padding: 0;
    }

    .skin-red .main-header .logo {
        height: 60px;
    }

    .main-header .logo .logo-lg {
        line-height: 60px;
    }
    .sticky-sidebar{
        position: fixed!important;
        padding-top: 0!important;
    }

    .sticky-video{
        position: fixed!important;
        top: 0;
        width: 100%;
    }

    .box-video{
        display: inline-block;
        box-shadow: unset;
    }

    .img-video{
        display:  inline-block;
    }

    .box-video .img-video{
        width: 50%;
        position: relative;
        display: inline-block;
        float: left;
    }

    .img-video a {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: 0909099e;
        padding: 5px 15px;
        border-radius: 5px;
        color: #fff;
    }

    .box-video .related-post-content{
        width: 50%;
        display: inline-block;
    }

    .box-video .related-product-title.title-video{
        font-size: 14px;
        height: unset;
        margin-top: 0; 
        margin-bottom: 0;
    }

    .container-materi{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }

    .section-materi { order: 2; }
    .section-video { order: 1; }

    .page-modul,.section-video{
      max-height: unset;
      overflow: unset;
    }

    .page-modul .content .section-materi .box-header .title {
        padding: 0 ;
    }

      .page-modul .content{
        padding-top: 10px;
        /*padding: 0!important;*/
      } 

      .page-modul .materi-desc p {
        margin-bottom: 5px;
      }

      .page-modul .product-list-in-box>.item {
        padding: 1% 0;
      }

      .page-modul .video-modul{
         padding-top: 5px;
      }

      .page-modul .section-video{
          border-bottom: 10px solid #efefef;
       }

       .page-modul .content .section-materi .box-header .title {
    padding: 0;
    font-size: 18px;
      }

      .page-modul .box-title-materi{
         margin-bottom: 5px;
      }

      .page-modul .box-title-materi h3{
        margin: 0;
        padding: 10px 0;
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
        font-size: 20px;
      }

      .no-padding-mobile{
        margin-right: -15px;
        margin-left: -15px;
        display: initial;
      }
      .course-nav-wrapper { display: none; }
      .section-materi { order:2; position: relative; left: 0; width:auto; padding:0 20px; border:0; height: calc(100vh - 10.5rem);}
      .section-video { order:1; margin-left: 0; }

}

.detail-order .bank-payment{
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #dfe4ec;
    padding-top: 5px;
}

.detail-order .bank-payment .col-md-3 {
    margin-bottom: 15px;
    float: none;
    display: inline-block;
  }

.btn-orange,.btn-orange:hover{
    background-color: #f05657 ;
    color: #fff;
    cursor: pointer;
}

.btn-black,.btn-black:hover{
    background-color: #000 ;
    color: #fff;
    cursor: pointer;
}

.body-user{
    background-color: #ecf0f5;
}

.body-user .sub-sidebar {
    padding: 20px;
    width: 230px;
    background: #fff;
    position: relative;
    height: 95vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    overflow-y: auto;
}

.body-user .content-wrapper, .body-user .main-footer {
    margin-left: 250px;
    padding: 0 10px;
}
.skin-red .wrapper, .skin-red .main-sidebar, .skin-red .left-side {
    background-color: transparent!important;
}

.skin-red .sidebar a {
    color: #7c7c7c;
}

.main-sidebar .logo {
    padding: 5px 15px 15px;
    text-align: center;
    display: block;
}

.skin-red .sidebar-menu > li:hover > a, .skin-red .sidebar-menu > li.active > a, .skin-red .sidebar-menu > li.menu-open > a {
    background: #f05657;
}


/* Panduan */
.wrapper-video iframe{
    width:100%;
    min-height: 450px;;
}

.wrapper-video{
    padding-bottom: 20px;
}

/* Dashboard */
.wrapper-welcome-text .wrapper-image img{
    max-width: 50%;
}

.wrapper-welcome-text{
    text-align: center;
}

.wrapper-welcome-text .wrapper-text{
    font-size: 22px;
}

.button{
    padding: 10px 70px;
    border-radius: 5px;
    font-size: 16px;
}

.wrapper-button{
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.item-btn{
    padding: 0 5px;
}

.content-header{
    margin-top: 15px;
}


.detail-item{
    padding:5px 0;
}

.item-label{
    font-weight:700;
}

.detail-item {
    padding-bottom: 10px;
}

.item-name{
    color:#383838;
}

.font-weight-500{
    font-weight:500!important;
}

@media only screen and (max-width: 768px) {
    /* Dashboard */
    .body-user .content-wrapper{
        margin-left: 0;;
    }

    .body-user .sub-sidebar{
        /* display: none; */
        width: 0;
    }

    .sidebar-open .sub-sidebar{
        /* display: none; */
        width: 200px;
    }

    .wrapper-welcome-text .wrapper-image img {
        max-width: 80%;
    }

    .wrapper-welcome-text .wrapper-text{
        font-size: 18px;
    }

    .wrapper-welcome-text .wrapper-button{
        flex-wrap: wrap;
    }
    .wrapper-welcome-text .button {
        width: 80%;
        margin-bottom: 10px;
    }

    .wrapper-welcome-text .item-btn {
        padding: 0;
        display: flex;
        width: 80%;
        justify-content: center;
    }

    /* Panduan */
    .wrapper-video iframe {
        width: 100%;
        min-height: 200px;
    }
}
@media (max-width: 480px) {
    .bank-payment .bank { width: 100% !important; }
}