@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
html {font-family:'bri_digital_textregular', Arial, sans-serif; /* 1 */-ms-text-size-adjust:none; /* 2 */-webkit-text-size-adjust:none; /* 2 */font-size:16px; line-height:26px; -webkit-font-smoothing: antialiased;color:#000;margin:0 auto;}
div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0; outline:none;}
article,aside,details,time,caption,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}
audio,canvas,progress,video {display: inline-block; /* 1 */vertical-align: baseline; /* 2 */}
audio:not([controls]) {display: none;height: 0;}
[hidden],template {display: none;}
abbr[title] {border-bottom: 1px dotted;}
b,strong {font-weight:700;}
dfn {font-style: italic;}
mark {background: #ff0;color: #111;}
small {font-size: 80%; line-height:80%;}
sub,sup {font-size:60%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;left:1px;}
sub {bottom: -0.25em;}
img {border: 0; display:block;}
i{font-style:normal;}
/*svg:not(:root) {overflow: hidden;}*/
figure {margin:0;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
pre {overflow: auto;}
code,kbd,pre,samp {font-size: 1em;}
button,input,optgroup,select,textarea {color: inherit; /* 1 */font: inherit; /* 2 */margin: 0; /* 3 */}
button {overflow: visible;}
button,select {text-transform: none;}
button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {-webkit-appearance: button; /* 2 */cursor: pointer; /* 3 */}
button[disabled],html input[disabled] {cursor: default;}
button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */ }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
legend {border: 0; /* 1 */padding: 0; /* 2 */}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-collapse: collapse;border-spacing: 0;}
td,th {padding: 0;}
::placeholder { color: #9f9f9f;}

/*base*/
.videoframe{position:relative;padding-bottom:56.25%;padding-top:25px;height:0; margin:0;}.videoframe iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.chatframe{position:relative;padding-bottom:120%;padding-top:25px;height:0; margin:0;}.chatframe iframe{position:absolute;top:0;left:0;width:100%;height:395px;}
@keyframes fade-in-up {
0% {opacity: 0;}
100% {transform: translateY(0);opacity: 1;}
}
.videoframe.stuck { position: fixed; bottom: 20px; right: 20px; width: 320px; height: 240px; transform: translateY(100%); animation: fade-in-up 0.75s ease forwards;z-index:5;padding:0;}
.fade{-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
body{margin:0 auto; padding:0; display:block; background:#fff url(../images/background.svg) top center no-repeat; color:#000;min-height: 100vh; background-size:cover;}
.cl-black{color:#000000 !important;}
.cl-white{color:#fff !important;}
.cl-soft{color:#D3D4D4 !important;}
.cl-gray{color:#777777 !important;}
.cl-orange{color:#F87304 !important;}
.cl-yellow{color:#fab617 !important;}
.cl-red{color:#ce1f43 !important;}
.cl-purle{color:#6360aa !important;}
.cl-blue {color:#00549B !important;}
.cl-blue2{color:#176FB2 !important;}
.cl-blue3{color:#138CEC !important;}
.cl-blue4{color:#1078CA !important;}
.cl-green{color:#27AE60 !important;}
.bg-black{background:#000000 !important;}
.bg-white{background:#FFFFFF !important;}
.bg-soft{background:#D3D4D4 !important;}
.bg-clean {background:transparent !important;}
.bg-orange{background:#F87304 !important;}
.bg-yellow{background:#fab617 !important;}
.bg-red{background:#ce1f43 !important;}
.bg-purle{background:#6360aa !important;}
.bg-blue {background:#00549B !important;}
.bg-blue2 {background:#176FB2 !important;}
.bg-green{background:#27AE60 !important;}
.bg-gray{background:#777777 !important;}
.bg-f9{background:#f9f9f9 !important;}
.bg-soft-white{background:#F8F9F9 !important;}
.bg-soft-blue{background:#DDEFFC !important;}
.bg-trans{background:transparent !important;}
.bg-grad{background: linear-gradient(to right, rgba(16,126,211,0.1) 0%, rgba(255,255,255,0.1) 50%, rgba(238,111,33,0.1) 100%) !important;}
/*cmd*/
.dblock{display:block;}
.centering{display: flex !important;align-items: center !important;justify-content: center !important;}
.centering.column{flex-direction:column;}
.centering.row{flex-direction:row;}
.clear{clear:both;}
.centering.j-end{justify-content:flex-end !important;}
.centering.ai-start{align-items:flex-start !important;}
.centering.j-sb{justify-content:space-between !important;}
.overflow{overflow:hidden;}
.hide_desktop{display:none !important; visibility:hidden;}
.hide_mobile{display:block; visibility:visible;}
.radius2{border-radius:2px !important;}
.radius4{border-radius:4px !important;}
.radius6{border-radius:6px !important;}
.radius8{border-radius:8px !important;}
.radius10{border-radius:10px !important;}
.radius18{border-radius:18px !important;}
.radius20{border-radius:20px !important;}
.radius0{border-radius:0 !important;}
.fw4{font-family: 'bri_digital_textlight' !important;}
.fw5{font-family:'bri_digital_textmedium' !important;}
.fw6{font-family: 'bri_digital_textbold' !important;}
.fw7{font-family: 'bri_digital_textheavy' !important;}
h1{font-size:32px; line-height:40px; margin:0 0 16px 0; font-weight:700;}
h2{font-size:24px; line-height:32px; margin:0 0 16px 0; font-weight:700;}
h3{font-size:18px; line-height:26px; margin:0 0 16px 0; font-weight:700;}
h4{font-size:16px; line-height:24px; margin:0 0 16px 0; font-weight:700;}
h5{font-size:14px; line-height:22px; margin:0 0 16px 0; font-weight:700;}
h6{font-size:12px; line-height:20px; margin:0 0 16px 0; font-weight:700;}
a {color: #000;text-decoration: none;transition: all .2s ease-in-out}
a:hover, a:focus {color:#F87304;transition: all .2s ease-in-out}
a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

.padding-no {padding:0 !important;}.padding-ss{padding:4px !important;}.padding-xs{padding:8px !important;}.padding-sm{padding:16px !important;}.padding-lg{padding:24px !important;}.padding-xl{padding:32px !important;}.padding-top-no {padding-top:0 !important;}.padding-top-ss {padding-top:5px !important;}.padding-top-xs {padding-top:8px !important;}.padding-top-sm {padding-top:16px !important;}.padding-top-lg {padding-top:24px !important;}.padding-top-xl {padding-top:32px !important;}.padding-bottom-no {padding-bottom:0 !important;}.padding-bottom-ss {padding-bottom:4px !important;}.padding-bottom-xs {padding-bottom:8px !important;}.padding-bottom-sm {padding-bottom:16px !important;}.padding-bottom-lg {padding-bottom:24px !important;}.padding-bottom-xl {padding-bottom:32px !important;}.padding-left-no {padding-left:0 !important;}.padding-left-ss {padding-left:4px !important;}.padding-left-xs{padding-left:8px !important;}.padding-left-sm {padding-left:16px !important;}.padding-left-lg {padding-left:24px !important;}.padding-left-xl {padding-left:32px !important;}.padding-right-no {padding-right: 0 !important;}.padding-right-ss {padding-right:4px !important;}.padding-right-xs {padding-right:8px !important;}.padding-right-sm {padding-right:16px !important;}.padding-right-lg {padding-right:24px !important;}.padding-right-xl {padding-right:32px !important;}
.padding-top-xxl{padding-top:80px !important;}.padding-bottom-xxl{padding-bottom:80px !important;}.padding-left-xxl{padding-left:80px !important;}.padding-right-xxl{padding-right:80px !important;}
.margin-no {margin:0 !important;}.margin-xs{margin:8px !important;}.margin-ss{margin:4px !important;}.margin-sm{margin:16px !important;}.margin-lg{margin:24px !important;}.margin-xl{margin:32px !important;}.margin-top-no {margin-top:0 !important;}.margin-top-ss {margin-top:4px !important;}.margin-top-xs {margin-top:8px !important;}.margin-top-sm {margin-top:16px !important;}.margin-top-lg {margin-top:24px !important;}.margin-top-xl {margin-top:32px !important;}.margin-bottom-no {margin-bottom:0 !important;}.margin-bottom-ss {margin-bottom:4px !important;}.margin-bottom-xs {margin-bottom:8px !important;}.margin-bottom-sm {margin-bottom:16px !important;}.margin-bottom-lg {margin-bottom:24px !important;}.margin-bottom-xl {margin-bottom:32px !important;}.margin-left-no {margin-left:0 !important;}.margin-left-ss {margin-left:4px !important;}.margin-left-xs {margin-left:8px !important;}.margin-left-sm {margin-left:16px !important;}.margin-left-lg {margin-left:24px !important;}.margin-left-xl {margin-left:32px !important;}.margin-right-no {margin-right:0 !important;}.margin-right-ss {margin-right:4px !important;}.margin-right-xs {margin-right:8px !important;}.margin-right-sm {margin-right:16px !important;}.margin-right-lg {margin-right:24px !important;}.margin-right-xl {margin-right:32px !important;}
.margin-top-xxl{margin-top:80px !important;}.margin-bottom-xxl{margin-bottom:80px !important;}.margin-left-xxl{margin-left:80px !important;}.margin-right-xxl{margin-right:80px !important;}
.bg-twitter{background:#77cbef !important;}.bg-facebook{background:#537abd !important;}.bg-google{background:#ea5d4b !important;}.bg-linkedin{background:#1384c8 !important;}.bg-daily{background:#0064dc !important;}.bg-youtube{background:#c8302a !important;}.bg-instagram{background:#e3008b !important;}.bg-whatsapp{background:#2ab200 !important;}.bg-line{background:#4ecd00 !important;}.bg-tumblr{background:#395976 !important;}.cl-twitter{color:#77cbef !important;}.cl-facebook{color:#537abd !important;}.cl-google{color:#ea5d4b !important;}.cl-linkedin{color:#1384c8 !important;}.cl-daily{color:#0064dc !important;}.cl-youtube{color:#c8302a !important;}.cl-instagram{color:#e3008b !important;}.cl-whatsapp{color:#2ab200 !important;}.cl-line{color:#4ecd00 !important;}.cl-tumblr{color:#395976 !important;}.f10{font-size:10px !important; line-height:140% !important;}.f11{font-size:11px !important; line-height:140% !important;}.f12{font-size:12px !important; line-height:140% !important;}.f14{font-size:14px !important; line-height:140% !important;}.f16{font-size:16px !important; line-height:140% !important;}.f18{font-size:18px !important; line-height:140% !important;}.f22{font-size:22px !important; line-height:140% !important;}
*, *::after, *::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.t-center{text-align:center !important;}.t-right{text-align:right !important;}.t-left{text-align:left !important;}
.left {float: left !important;} .right {float: right !important;}
.hidden{opacity: 0;}.visible{opacity: 1;}.left{float:left !important;}.right{float:right !important;}
.square {position: relative;width:100%;display:flex; align-items:center; justify-content: center;}
.square:after {content: "";display: block;padding-bottom: 100%;}
.square-img {position: absolute;width: 100%;height:100%; overflow: hidden; border-radius:4px;display:flex; align-items:center; justify-content: center; flex-direction:column; padding:0;}
.square-img a{display:flex; align-items:center; justify-content: center; height:100%; width:100%;}
.square-img img{width:auto; height:100%; margin:0;}
.square-img.flat{border-radius:0;}
.square.lines{border:1px solid #eeeeee; border-radius:6px;}
.square-img .play-icons.fotos{display:flex; justify-content:center; align-items:center;position:absolute; right:0; bottom:0; left:0; top:0; color:rgba(255,255,255,0.5); margin:auto; z-index:3; text-shadow:1px 1px 1px rgba(0,0,0,0.1);font-size:30px;width:56px; height:56px; border-radius:28px; border:none;overflow:hidden;}
/*element*/
.element-box button{background:transparent; border:none;}
label.small{font-size:12px; display:inline-flex; min-height:14px; line-height:14px;}
label.medium{font-size:14px; display:inline-flex; font-weight:600; min-height:30px;}
.element-box{margin:0; position:relative; height:auto;}
/*icons*/
.element-box .icons{width:40px; height:40px; position:absolute; left:0; top:0; z-index: 2;border-right: 1px solid #D3D4D4; display: flex; align-items:center; justify-content: center;}
.element-box .icons.small{width:32px; height:32px;}
.element-box .icons.right{right:0; left:inherit; border:none; width:48px;}
/*input*/
.element-box input.element-input{width:100%; height:40px; padding:12px 20px; background:#fff; border:1px solid #D3D4D4;font-size:14px; color:#202020; border-radius:20px;}
.element-box input.element-input.small{height:32px; font-size:12px; padding-left:40px; padding:8px;}
.element-box input.element-input.medium{height:36px; font-size:14px; padding-left:40px; padding:8px;}
.element-box input.element-input.minimalis{min-width:146px; width:auto;}
.element-box.pass input.element-input{padding-right:48px;}
.element-box.icons-left input.element-input{padding-left:46px;}
.element-box.icons-left .icons{border:none;}
.element-box.icons-left.medium .icons{height:36px;}
.wjb{display:inline-flex; justify-content:center; align-items:center; font-size:11px; padding:0 4px; border-radius:10px; color:#27AE60; background:#E1F8EB; margin-left:4px;}
/*upload*/
.element-box .input-field{margin:0;}
.element-box .file-field{position:relative;}
.element-box .file-field .btn.upload{background:#c9c9c9;border-radius:2px 0px 0 2px !important;cursor: pointer;display: inline-flex;align-items:center;justify-content:center;height:36px;width:36px; float:none; padding:0; position:absolute; top:0; left:0; z-index:2;}
.element-box .file-field .btn.upload i{font-size:16px;color:#424242; line-height:normal;}
.element-box .file-field input[type=file]{position: absolute;top: 0;right: 0;left: 0;bottom: 0;width: 100%;margin: 0;padding: 0;font-size: 20px;cursor: pointer;opacity:0;filter: alpha(opacity=0); z-index:3;}
.element-box .file-field .file-path-wrapper{text-align:left;background: #fff;padding:0;width: 100%;position: relative;border:1px solid #D3D4D4;height:36px; overflow:hidden; border-radius:2px;}
.element-box .file-field .file-path-wrapper label{width: 100%;height:36px;display:flex;padding-left: 46px;align-items: center;justify-content: flex-start; font-size:14px;}
.element-box .file-field input.file-path {width: 100%;height:36px;border: none;padding-left: 50px;font-size:16px;}
/*textarea*/
.element-box textarea.element-area{width:100%; min-height:120px; padding:12px 16px; background:#fff; border:1px solid #D3D4D4;font-size:14px; color:#202020;border-radius:20px;}
.element-box textarea.element-area.small{font-size:12px; padding-left:32px;}
/*select*/
.element-box .element-select{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;}
.element-box select.element-select, .select2-container--default .select2-selection--single {
color:#292929;width:100%; height:40px; padding:5px 5px 5px 50px; background:#fff; border:1px solid #D3D4D4;font-size:14px; font-weight:600;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #D3D4D4 50%),
linear-gradient(135deg, #D3D4D4 50%, transparent 50%),
linear-gradient(to right, #D3D4D4 , #D3D4D4 );
background-position:
calc(100% - 19px) calc(50% + 1px),
calc(100% - 14px) calc(50% + 1px),
calc(100% - 36px) 0px;
background-size:
5px 5px,
5px 5px,
0px 36px;
background-repeat: no-repeat;
}
.element-box .element-select.big{height:48px;}
.select-radius8 + .select2-container .select2-selection {border-radius:10px !important;}
.w-auto + .select2-container--open .select2-dropdown--above{width:auto !important; min-width:120px !important;}
.select2-container {
min-width: 10em!important;}
.element-box .select2-container--default .select2-selection--single{background-image:none; padding-left:16px;border-radius:20px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{width:30px; height:40px;}
.select2-container .select2-selection--single .select2-selection__rendered{padding-left:0;font-weight:400;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #d3d4d4 transparent transparent transparent;}
.element-box select.element-select:disabled{
border-color:#9e9e9e; color:#9e9e9e; background-image:
linear-gradient(45deg, transparent 50%, #9e9e9e 50%),
linear-gradient(135deg, #9e9e9e 50%, transparent 50%),
linear-gradient(to right, #9e9e9e , #9e9e9e );}
.element-box select.element-select:focus{
background-image:
linear-gradient(135deg, transparent 50%, #424242 50%),
linear-gradient(45deg, #424242 50%, transparent 50%),
linear-gradient(to right, #424242 , #424242 );
background-position:
calc(100% - 19px) calc(50% + 1px),
calc(100% - 14px) calc(50% + 1px),
calc(100% - 36px) 0px;
background-size:
5px 5px,
5px 5px,
0px 36px;
background-repeat: no-repeat;
color:#292929;
}
.element-box select.element-select.medium {
color:#202020;width:100%; height:36px; padding:5px 5px 5px 50px; background:#fff; border:1px solid #424242;font-size:14px; font-weight:600;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #424242 50%),
linear-gradient(135deg, #424242 50%, transparent 50%),
linear-gradient(to right, #424242 , #424242 );
background-position:
calc(100% - 19px) calc(50% + 1px),
calc(100% - 14px) calc(50% + 1px),
calc(100% - 36px) 0px;
background-size:
5px 5px,
5px 5px,
0px 36px;
background-repeat: no-repeat;
}
.element-box select.element-select.minimalis{min-width:120px; width:auto;padding-right:46px;}
.element-box select.element-select.small{height:32px; font-size:12px;background-position:
calc(100% - 15px) calc(1em + -1px),
calc(100% - 10px) calc(1em + -1px),
calc(100% - 2.5em) 0.3em;
background-size:
5px 5px,
5px 5px,
0px 1.5em; padding-left:40px;
background-repeat: no-repeat;}
/*
.element-box select.element-select.fw400{font-weight:400;}
.element-radio {cursor:pointer; font-size:12px;}
.element-radio.jawaban{display:inline-flex;}
.element-radio input[type="radio"]{opacity:1;border:2px solid #424242;background:#fff;height:20px;width:20px;position:relative;top:5px;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:10px;display:inline-flex; margin-right:5px;}
.element-radio input:checked{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #424242;}
.element-radio input:checked:before{position:absolute; width:8px; height:8px;top:4px; left:4px;background:#424242; border-radius:8px; content:''; z-index:2;}
.element-radio input:disabled{opacity:1; background:#fff; -webkit-appearance:none;-moz-appearance: none;appearance: none; border:2px solid #424242; cursor: not-allowed;}
.element-radio input:disabled:before{font-family:'FontAwesome'; position:absolute; width:16px; height:16px;top:0px; left:0;content:'\f00d'; color:#424242; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;margin:0 auto;}
.element-radio > label {display: inline-flex !important;margin-left:30px;cursor:pointer;}
*/
.element-radio {cursor:pointer;}
.element-radio .radiotext{padding-left:30px; min-height:20px;}
.element-radio input[type="radio"]{opacity:1;border:2px solid #424242;background:#fff;height:20px;width:20px;position:relative;top:0;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:10px;display:inline-flex; margin-right:5px;}
.element-radio input[type="radio"].abs{position:absolute;}
.element-radio input:checked{opacity:1; background:#fff; border:2px solid #00549B;-webkit-appearance:none;-moz-appearance: none;appearance: none;}
.element-radio input:checked:before{font-family:'FontAwesome'; position:absolute; width:17px; height:17px;top:-1px; left:0;content:'\f00c'; color:#00549B; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-radio input:disabled{opacity:1; background:#fff; border:2px solid #424242;-webkit-appearance:none;-moz-appearance: none;appearance: none;cursor: not-allowed;}
.element-radio input:disabled:before{font-family:'FontAwesome'; content:'\f00d'; position:absolute;width:17px; height:17px;top:0px; left:0; color:#000000; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check > label {display: inline-flex !important;margin-left:30px;cursor:pointer;}


.element-check {cursor:pointer;}
.element-check .checktext, .element-radio .checktext{padding-left:30px; min-height:20px;}
.element-check input[type="checkbox"]{opacity:1;border:2px solid #424242;background:#fff;height:20px;width:20px;position:relative;top:5px;cursor:pointer;-webkit-appearance:none;-moz-appearance: none;appearance: none;border-radius:4px;display:inline-flex; margin-right:5px;}
.element-check input[type="checkbox"].abs{position:absolute;}
.element-check input:checked{opacity:1; background:#fff; border:2px solid #424242;-webkit-appearance:none;-moz-appearance: none;appearance: none;}
.element-check input:checked:before{font-family:'FontAwesome'; position:absolute; width:17px; height:17px;top:0px; left:0;content:'\f00c'; color:#424242; font-size:12px; font-weight:normal; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check input:disabled{opacity:1; background:#fff; border:2px solid #424242;-webkit-appearance:none;-moz-appearance: none;appearance: none;cursor: not-allowed;}
.element-check input:disabled:before{font-family:'FontAwesome'; content:'\f00d'; position:absolute;width:17px; height:17px;top:0px; left:0; color:#000000; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2;}
.element-check > label {display: inline-flex !important;margin-left:30px;cursor:pointer;}
/*button*/
button.sign-btn{width:100%;height:40px;background:#1078CA; color:#fff;transition: all 0.3s ease-in-out;opacity:1;border:none;display:flex; align-items:center; justify-content: center; font-size:14px; line-height:normal; font-weight:500; padding:0 30px;}
button.sign-btn.medium{height:36px; font-size:14px;}
button.sign-btn.minimalis{width:auto; padding:0 30px;}
button.sign-btn.small{height:32px;font-size:14px;}
button.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.8;}
button.sign-btn.line{background:transparent; border:1px solid #202020; color:#202020;}
button.sign-btn.line.blue{border-color:#1078CA; color:#1078CA;}
button.sign-btn.line.orange{border-color:#F87304; color:#F87304;}
button.sign-btn.line.soft{border-color:#EAEBEB; color:#777; padding:0 10px; white-space:nowrap}
button.sign-btn.line.soft .icons{float:left; width:24px; height:24px; margin-right:2px;}
button.sign-btn.line.soft .icons img{width:auto; height:24px;}
a.sign-btn{width:100%; height:40px; background:#1078CA; color:#fff;transition: all 0.3s ease-in-out;opacity:1; display:flex; align-items:center; justify-content: center; border:none; text-align:center; font-weight:500;font-size:14px; line-height:normal; padding:0 30px;}
a.sign-btn.minimalis{width:auto; padding:0 30px; display: inline-flex; margin:0; text-align:center;}
a.sign-btn.medium{height:36px; font-size:14px;}
a.sign-btn.small{height:32px; font-size:14px;padding:0 15px;}
a.sign-btn.big{height:56px; font-size:18px;}
a.sign-btn.line{background:transparent; border:1px solid #202020; color:#202020;}
a.sign-btn.line.orange{border-color:#F87304; color:#F87304;}
a.sign-btn.line.soft{border-color:#EAEBEB; color:#777; padding:0 10px; white-space:nowrap;}
a.sign-btn.line.gray{border-color:#777; color:#777;}
a.sign-btn.line.dark{border-color:#000000; color:#000000;}
a.sign-btn.line.fb{border-color:#537abd; color:#537abd;}
a.sign-btn.line.clean{border-color:transparent; color:#202020;}
a.sign-btn:hover{transition: all 0.3s ease-in-out; opacity:0.8;}
a.sign-btn.disable{cursor:not-allowed; background:#eeeeee;}
a.sign-btn .xs-icon{width:22px; height:22px; border-radius:11px; float:left; background:#DDEFFC; color:#1078CA; margin-right:8px; display:flex; justify-content:center; align-items:center; font-size:14px;}
.element-box select.element-select.noicons, .element-box input.element-input.noicons, .element-box textarea.element-area.noicons{padding-left:16px !important; min-width:10px;}
/*element upload file*/
.imagePreview{width: 100%;height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;margin-right: 0;position: absolute;background-color: #fff;top: 0;left: 0;aspect-ratio: 1/1;display: flex;justify-content: center;align-items: center;}
.file-upload{display:flex;}
.file-select{position: relative;overflow: hidden;display: flex;align-items: center;}
.file-select.file-select-box {width: 100%;height: 100%;display: flex;border-radius: 10px;border: 2px dashed #d3d4d4;aspect-ratio: 1/1;justify-content: center;align-items: center;}
.file-upload-custom-btn {width: 100%;height: 100%;border: none;color: #d3d4d4;z-index: 1;position: relative;display:flex;flex-direction:column;justify-content:center;font-size:12px;align-items:center;}
.file-upload-custom-btn i{font-size:30px;}
.file-select-name{margin-left: 15px;}
.file-select input[type=file] {position: absolute;left: 0;top: 0;opacity: 0;width: 100%;height: 100%;}
.file-select.file-select-box input[type=file]{z-index: 2;}
.file-upload + .file-upload{margin-left: 10px;}
.element-box.wide .imagePreview{height:160px; aspec-ration:inherit;}
.element-box.wide .file-select.file-select-box{height:160px;}
.element-box.wide .file-upload-custom-btn {height:160px;}
ul.row-list{list-style: none; list-style-position: inside; margin:0 -8px; padding:0; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap;}
ul.row-list li{width:100%; padding:0 8px;}
ul.row-list.row2 li{width:50%; padding:0 8px;}
ul.row-list.row3 li{width:33.333%; padding:0 8px;}
ul.row-list.row4 li{width:25%; padding:0 8px;}
ul.row-list.row5 li{width:20%; padding:0 8px;}
ul.row-list.row6 li{width:16.666%; padding:0 8px;}
ul.row-list.row7 li{width:14.28571428571429%; padding:0 8px;}
ul.row-list.row8 li{width:12.5%; padding:0 8px;}
ul.row-list.row4.pad2, ul.row-list.row3.pad2, ul.row-list.row2.pad2, ul.row-list.row5.pad2,ul.row-list.row6.pad2,ul.row-list.row7.pad2, ul.row-list.row8.pad2{margin:0 -2px;}
ul.row-list.row4.pad2 li, ul.row-list.row3.pad2 li, ul.row-list.row2.pad2 li, ul.row-list.row5.pad2 li, ul.row-list.row6.pad2 li, ul.row-list.row7.pad2 li, ul.row-list.row8.pad2 li{padding:0 2px;}
ul.row-list.row4.pad4, ul.row-list.row3.pad4, ul.row-list.row2.pad4, ul.row-list.row5.pad4,ul.row-list.row6.pad4,ul.row-list.row7.pad4, ul.row-list.row8.pad4{margin:0 -4px;}
ul.row-list.row4.pad4 li, ul.row-list.row3.pad4 li, ul.row-list.row2.pad4 li, ul.row-list.row5.pad4 li, ul.row-list.row6.pad4 li, ul.row-list.row7.pad4 li, ul.row-list.row8.pad4 li{padding:0 4px;}
ul.row-list.row4.pad16, ul.row-list.row3.pad16, ul.row-list.row2.pad16, ul.row-list.row5.pad16,ul.row-list.row6.pad16, ul.row-list.row7.pad16, ul.row-list.row8.pad16{margin:0 -16px;}
ul.row-list.row4.pad16 li, ul.row-list.row3.pad16 li, ul.row-list.row2.pad16 li, ul.row-list.row5.pad16 li, ul.row-list.row6.pad16 li, ul.row-list.row7.pad16 li,ul.row-list.row8.pad16 li{padding:0 16px;}
/*card box*/
.shadow{box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1);}
.card-box{height:auto; overflow:hidden;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.shadow{box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1);}
.card-box .img-card{position:relative;width:100%;overflow:hidden;height:auto;margin:0 auto 12px auto; padding:0;opacity:1; border-radius:6px;}
.card-box .img-card .play-icons{display:flex; justify-content:center; align-items:center;width:24px; height:24px; position:absolute; right:0; bottom:0; left:0; top:0; color:rgba(255,255,255,0.5); margin:auto; z-index:3; text-shadow:1px 1px 1px rgba(0,0,0,0.1);font-size:30px;}
.card-box .img-card .play-icons.fotos{width:56px; height:56px; border-radius:28px; border:none;overflow:hidden;}
.card-box .img-card .play-icons.fotos img{width:auto; height:56px;}
.card-box .img-card .right-icons{display:flex; justify-content:center; align-items:center;width:24px; height:24px; position:absolute; right:0; bottom:0; background:rgba(0,0,0,0.5); color:#fff; font-size:12px;z-index:2;}
.card-box .img-card .right-icons.foto{width:auto; padding:0 8px; border-radius:4px; top:4px; bottom:inherit; right:4px;font-size:12px}
.card-box .img-card .play-icons.big i{font-size:90px;}
.card-box .img-card .play-icons.medium i{font-size:60px;}
.card-box .img-card .play-icons.small i{font-size:30px;}
.card-box .img-card img{width:100%; height:auto; display:block;transition: all .3s ease-in-out; opacity:1;}
.card-box:hover .img-card img{transition: all .3s ease-in-out; opacity:0.95;}
.card-box .text-card{height:auto; width:auto; overflow:hidden; padding:0; position:relative;}
.card-box .text-card h1.title{transition: all .2s ease-in-out;font-size:32px;line-height:40px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card h2.title{transition: all .2s ease-in-out;font-size:24px;line-height:32px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card h3.title{transition: all .2s ease-in-out;font-size:18px;line-height:26px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card h4.title{transition: all .2s ease-in-out;font-size:16px;line-height:24px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card h5.title{transition: all .2s ease-in-out;font-size:14px;line-height:22px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card h6.title{transition: all .2s ease-in-out;font-size:12px;line-height:20px;margin: 0; font-weight:600; font-family:'bri_digital_textbold';}
.card-box .text-card p{font-weight:400;margin:0; letter-spacing: normal; font-size:14px; line-height:20px;}
.card-box .text-card p.rek, .card-box .text-card .rek{font-size:10px; font-weight:500; background:#DDEFFC; color:#1078CA; min-height:20px; border-radius:10px; padding:0 8px 0 6px; display:inline-flex; justify-content:center; align-items:center;}
.card-box .text-card p.rek span.iconsmall, .card-box .text-card .rek span.iconsmall{float:left; width:12px; height:12px; margin-right:2px; display:inline-flex;}
.card-box .text-card p.rek span.iconsmall img, .card-box .text-card .rek span.iconsmall img{width:auto; height:12px;}
.card-box .hovertext{padding:10px; background:rgba(0,0,0,0.7); text-align:center; position:absolute; top:-100px; left:0; right:0; z-index:2; color:#fff; font-size:14px; opacity:0;transition: all .3s ease-in-out; border-radius:4px 4px 0 0;}
.card-box:hover .hovertext{padding:10px; background:#e74c4c; text-align:center; position:absolute; top:0; left:0; right:0; z-index:2; color:#fff; font-size:14px; opacity:1;transition: all .3s ease-in-out; font-weight:600;}
.line1{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}
.line2{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.line3{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;}
.line4{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical;}
.line5{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical;}
.line6{word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp:6; -webkit-box-orient: vertical;}
/*top title*/
.card-box.toptitle{border-radius:6px;}
.card-box.toptitle .img-card{margin:0 auto;}
.card-box.toptitle .text-card{position:absolute; bottom:0; left:0; right:0; z-index:2; padding:32px;
display:flex; justify-content:flex-end; flex-direction:column;}
.card-box.toptitle .text-card a{color:#fff;}
.card-box.toptitle .text-card a:hover{color:#b3e3ff;}

/*big slider*/
.card-box.topslider{border-radius:0;}
.card-box.topslider .img-card{margin:0 auto;border-radius:0;}
.card-box.topslider .text-card{position:absolute; bottom:0; left:0; right:150px; z-index:2; padding:32px 0 32px 130px;
display:inline-flex; justify-content:center; flex-direction:column;background: linear-gradient(to right, rgba(14,105,177,1) 0%, rgba(255,255,255,0) 100%); align-items:flex-start;}
.card-box.topslider .text-card h2.title{font-size:32px;line-height:40px;margin: 0; font-weight:700;}
.card-box.topslider a{color:#fff;}
.card-box.topslider a:hover{color:rgba(255,255,255,0.9);}
/*card box 110*/
.card-box.ftsmall{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.ftsmall .img-card{float:left;position:relative;width:90px; height:auto; overflow:hidden;margin:0; padding:0; display:flex; justify-content:center; align-items:center;}
.card-box.ftsmall .img-card img{width:100%; height:auto; display:block;}
.card-box.ftsmall .text-card{padding:0 0 0 12px; min-height:133px;display: flex;flex-direction: column;justify-content: center;}
.card-box.ftsmall.badge .img-card{width:auto; height:55px;}
.card-box.ftsmall.badge .img-card img{width:auto; height:55px;}
.card-box.ftsmall.badge .text-card{min-height:55px;}
.card-box.ftsmall.badge .text-card {padding-right:200px; position:relative;}
.card-box.ftsmall.badge .text-card .right-button{position:absolute; top:0; right:0; bottom:0; text-align:right; display:inline-flex; justify-content:center; align-items:center;}
/*card box 150*/
.card-box.ft150{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.ft150 .img-card{float:left;position:relative;width:170px; height:140px; overflow:hidden;margin:0; padding:0; display:flex; justify-content:center; align-items:center;}
.card-box.ft150 .img-card img{width:auto; height:100%; display:block;}
.card-box.ft150 .text-card{padding:0 0 0 16px; min-height:140px;display: flex;flex-direction: column;justify-content: center;}
/*card box kotak*/
.card-box.ft90{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.ft90 .img-card{float:left;position:relative;width:90px; height:90px; overflow:hidden;margin:0; padding:0; display:flex; justify-content:center; align-items:center;}
.card-box.ft90 .img-card img{width:auto; height:100%; display:block;}
.card-box.ft90 .text-card{padding:0 0 0 16px; min-height:90px;display: flex;flex-direction: column;justify-content: center;}
.card-box.inline{border-radius:10px; border:1px solid #d3d4d4;}
.card-box.inline .text-card{padding:8px;}
.card-text{background:#56ADF2; padding:16px; border-radius:16px; width:80%; max-width:300px;}
.card-text.w90p{width:90%; max-width:360px;}
.card-text p{color:#fff; font-size:18px; line-height:140%;}
/*card box kotak 150*/
.card-box.sq150{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.sq150 .img-card{float:left;position:relative;width:150px; height:150px; overflow:hidden;margin:0; padding:0; display:flex; justify-content:center; align-items:center;}
.card-box.sq150 .img-card img{width:auto; height:100%; display:block;}
.card-box.sq150 .text-card{padding:0 0 0 16px; min-height:90px;display: flex;flex-direction: column;justify-content: center;}
.card-box.inline{border-radius:10px; border:1px solid #d3d4d4;}
.card-box.inline .text-card{padding:8px;}
/*card box kotak 128*/
.card-box.sq128{overflow:hidden;height:auto;width:100%; position:relative; margin:0;opacity:1;transition: all .3s ease-in-out;}
.card-box.sq128 .img-card{float:left;position:relative;width:128px; height:128px; overflow:hidden;margin:0; padding:0; display:flex; justify-content:center; align-items:center;}
.card-box.sq128 .img-card img{width:auto; height:100%; display:block;}
.card-box.sq128 .text-card{padding:0 0 0 16px; min-height:128px;display: flex;flex-direction: column;justify-content: center;}
.card-box.inline{border-radius:10px; border:1px solid #d3d4d4;}
.card-box.inline .text-card{padding:8px;}
/*card box cover*/
.bg-cover{width:100%; height:auto; overflow:hidden;background: linear-gradient(270.18deg, #EDF7FF 22.82%, #FDFDFD 90.77%); padding:180px 0 180px 0;}
.card-box.cover .img-card{float:right; width:50%; border-radius:20px;}
.card-box.cover .text-card {float:left; width:50%; padding-right:32px;}
.card-box.cover .text-card h2.title{font-size:58px; line-height:120%; letter-spacing:-1px;}
.card-box.cover .text-card p{font-size:19px; line-height:140%;}
.card-box.cover .text-card .button-pos{display:flex; justify-content:flex-start; margin-top:16px;}
/*base*/
.cd-main-content{min-height: 100%;position: relative;z-index: 2;padding:0; -webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;margin:0 auto; padding-top:68px;}
.cd-main-content.w-banner{display:flex; flex-direction:row; flex-flow:wrap; max-width:1366px;}
.sticky-ad{position:sticky; overflow:hidden;z-index:3;top:80px; width:120px; height:600px; margin:0 auto; margin-bottom:16px;}
.cd-main-content .inside-main{max-width:1366px; position:relative; margin:0 auto;display:flex; flex:2;flex-direction:row;}
.cd-main-content .inside-main.no-adskin{display:block;}
.cd-main-content.loginpage{min-height:100vh;display:flex; padding:0; position:relative;}
.cd-main-content.loginpage .logo-l{width:auto; height:auto; position:fixed; top:32px; left:32px; z-index:3;}
.cd-main-content.loginpage .logo-l img{width:auto; height:24px;}
.cd-main-content.loginpage .img-cover{width:35%; position:fixed; top:0; left:0; bottom:0; z-index:2; overflow:hidden;}
.cd-main-content.loginpage .img-cover_referral{width:45%; position:fixed; top:0; left:0; bottom:0; z-index:2; overflow:hidden;}
.cd-main-content.loginpage .img-cover img{width:auto; height:100vh; position:relative; opacity:0.6;}
.cd-main-content.loginpage .img-cover_referral img{width:auto; height:100vh; position:relative; opacity:0.6;}
.overflow-hidden {overflow: hidden;}
.container{margin:0 auto; width:100%; max-width:1148px; padding:0 16px; position:relative;}
.container.big{padding:0 46px;}
.container.full{max-width:100%;}
.container.medium{max-width:1080px;}
.container.small{max-width:880px;}
.container.lainnya{padding-left:175px; max-width:1200px;}
.container.login{width:100%; max-width:none; padding:40px 0 40px 35%; height:100%; min-height:100vh; display:flex; flex-direction:row;align-items: center;}
.container.login_referral{width:100%; max-width:none; padding:40px 0 40px 45%; height:100%; min-height:100vh; display:flex; flex-direction:row;align-items: center;}
.container.login.center{padding:40px 16px; align-items:flex-start;}
.container.login .boxreg{width:300px; margin:0 auto;}
.container.login_referral .boxreg{width:auto; margin:0 auto;}
.container.login .boxreg.syarat{width:600px;}
.container.login .boxreg h2.title{font-size:24px; line-height:36px;}
.container.cover{position:relative; max-width:1300px;}
.container.cover .bullet-orange{width:36px; height:36px; overflow:hidden; border-radius:50%; border:6px solid #f8f9f9; background:#F87304; position:absolute; right:16px; top:-50px; z-index:2;}
.container.cover .bullet-blue{width:65px; height:65px; overflow:hidden; border-radius:50%; border:6px solid #f8f9f9; background:#1078CA; position:absolute; left:47%; bottom:-20px; z-index:2;}
.container.cover .panah-icon{width:87; height:45px; overflow:hidden; position:absolute; left:46%; top:-50px; z-index:1;}
.syaratbox{width:100%; height:350px; padding:32px; background:#F3F5F8; overflow-y:scroll;}
.container-col{margin-left:-16px; margin-right:-16px;}
.container-col.medium-col{margin-left:-8px; margin-right:-8px;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding:0 16px;
}
[class*="medium8"] {
float: left;
padding:0 8px !important;
}
.block-all{position:fixed; background:rgba(0,0,0,0.7); top:0; left:0; right:0; bottom:0; z-index:21;}
/*nav menu
.menu {margin:0 auto; padding:0; height:68px;width:auto; font-size:14px;}
.menu ul li > a:after { content:' \f107'; font-family: 'FontAwesome'; font-size:12px; margin-left:10px; top:0; position:relative;}
.menu ul li > a:only-child:after { content: ''; margin:0;}
.menu ul ul {display: none;}

.menu ul li:hover > ul {display: block;}

.menu ul {list-style:none; list-style-position:inside; margin:0 auto; padding:0; height:68px; max-width:1148px;position: relative;display:flex; justify-content:space-between; width:100%;}
.menu ul:after {content: ""; clear: both; display: block;}
.menu ul li {float: left; position:relative;}
.menu ul li:hover {color:#777;}
.menu ul li:hover a {color:#000000;}
.menu ul li a {color:#000000;font-weight:600;position:relative;padding:0 12px; height:68px;display:flex; align-items:center; justify-content:center;white-space: nowrap;}
.menu ul li a:hover{color:#777;}
.menu ul li a.selected {color:#000000; position:relative;}
.menu ul li a.selected::before{content:''; position:absolute; left:12px; right:12px; bottom:16px; height:4px; background:#F87304; z-index:2;}
.menu ul ul {background: #193c62; border-radius: 0px; padding: 0;position: absolute; top: 100%;width: auto;max-width: none;right:0;z-index: 3; min-width:150px;}
.menu ul ul li {float: none;}
.menu ul ul li a {padding:8px 16px;color: #000000;background: #151546 ;justify-content:flex-start;height:auto;}
.menu ul ul li a:hover {background: #000000 ; color:#777;}
.menu ul ul ul {position: absolute; left: 100%; top:0;}
*/
/*nav menu baru*/
nav.menu {margin:0 auto; padding:0; height:68px;width:auto;font-size:14px; font-weight:600;}
nav.menu ul li > a:after { content:' \f107'; font-family: 'FontAwesome'; font-size:12px; margin-left:10px; top:0; position:relative;}
nav.menu ul li > a:only-child:after { content: ''; margin:0;}
nav.menu ul ul {display: none;}
nav.menu ul li:hover > ul {display: block;}
nav.menu ul {list-style:none; list-style-position:inside; margin:0 auto; padding:0; height:68px; max-width:1200px;position: relative;display:flex; align-items:center; justify-content:flex-end; width:100%;}
nav.menu ul:after {content: ""; clear: both; display: block;}
nav.menu ul li {float: left;}
nav.menu ul li:hover{background:#fff;}
nav.menu ul li:hover a {color:#b4c2cc;}
nav.menu ul li a {color:#000;font-weight:600;position:relative;padding:0 10px; height:68px;display:flex; align-items:center; justify-content:center; white-space:nowrap;}
nav.menu ul li.nologin a .warning{display:none;}
nav.menu ul li.nologin:hover a .warning{display:block;position:absolute;top:100%; width:150px; left:auto; right:auto;padding:15px; background:#e74c4c; color:#fff; text-align:center; margin:auto; z-index:5; text-transform:none !important; font-size:12px;}
nav.menu ul li.nologin:hover a .warning:before {content:'';width:20px;position:absolute; left:0; right:0; margin:0 auto; top:-10px;
height: 0;border-style: solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #e74c4c transparent;}
nav.menu ul li a.search {border:1px solid #000; padding:5px 8px; border-radius:4px; color:#000; height:30px;}
nav.menu ul li a.selected {color: #000000;position: relative;}
nav.menu ul li a.selected::before {content: '';position: absolute;left: 10px;right: 10px;bottom: 16px;height: 4px;background: #F87304;z-index: 2;}
nav.menu ul li:hover a.selected {background: transparent;}
nav.menu ul ul, nav.menu ul ul.submenus{background: #fff; border-radius: 0px; padding: 0;position: absolute; top: 100%; left:0; right:0; z-index:4; width:100%;overflow:hidden; height:auto; box-shadow:1px 1px 3px rgba(0,0,0,0.1);}
nav.menu ul ul li {float: none; width:184px; color:#000;}
nav.menu ul ul li a {padding:10px 15px;color: #fff;background:#fff !important;justify-content:flex-start;flex-direction:row;height:auto;text-transform:none; font-weight:500; font-size:14px;}
nav.menu ul ul li a:hover {color:#b4c2cc !important;}
nav.menu ul ul ul {position: absolute; left: 100%; top:0;}
nav.menu ul li.search2:hover, nav.menu ul li.notif:hover {background:none !important;}
nav.menu ul li.daftar2:hover{background:none !important;}
nav.menu ul li.login2:hover{background:none !important;}
nav.menu ul li.login2 a span.username{word-break: break-word;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
height: 16px;
max-width:90px; text-transform:none;}
nav.menu ul li a.search:hover {border:1px solid #cecece; color:#b4c2cc;}
nav.menu ul ul.submenus li{width:25%; float:left; background:#fff;display:block; padding:15px;}
nav.menu ul ul.submenus li .box-sub h4.title{font-size:14px; line-height:16px; margin:0 010px 0; text-transform:uppercase;}
nav.menu ul ul.submenus li .box-sub p.title{margin:0;position:relative;}
nav.menu ul ul.submenus li .box-sub p.title a{color:#000; background:none !important; padding:5px 0; margin:0; font-size:14px; font-weight:400;position:relative;}
nav.menu ul ul.submenus li .box-sub p.title a:hover{color:#b4c2cc !important;}
nav.menu ul ul.submenus li .box-sub h4.title a, nav.menu ul ul.submenus li .box-sub h4.title a:hover{background:none !important;text-transform:uppercase; padding:0; margin:0 0 10px 0; font-weight:500;font-size:14px; line-height:16px; color:#000 !important;}
nav.menu ul li:hover a.login,nav.menu ul li a.login:hover{background:#fff !important;}
nav.menu ul li.login2{position:relative;}
nav.menu ul ul.submenus.single{width: 190px;right: inherit !important;left: inherit !important; padding:12px 0;}
nav.menu ul ul.submenus.single li{width:100%; float:none; background:#fff; padding:0;}
nav.menu ul ul.submenus.single li a{color:#000; padding:4px 16px;}
nav.menu ul li.notif{position:relative;}
nav.menu ul li.notif > a:after{display:none;}
nav.menu ul li.notif .number{min-width:20px; height:20px; padding:0 3px; display:flex; align-items:center; justify-content:center; font-size:10px; background:#e74c4c; color:#fff; position:absolute; top:-5px; right:-5px; border-radius:10px;}
nav.menu ul li.notif .notif-box{width:300px; height:auto; max-height:85vh; overflow-y:auto; border-radius:0 0 4px 4px; position:absolute; top:45px; right:0; background:#fff; border:1px solid #ddd; z-index:5;}
nav.menu ul li.notif .notif-box a{height:auto; padding:0;}
p.title a .warning2{display:none;}
nav.menu ul ul.submenus li .box-sub p.title a:hover .warning2{display:block;position:absolute;bottom:100%; width:150px; left:auto; right:auto;padding:5px; background:#e74c4c !important; color:#fff; text-align:center; margin:auto; z-index:5; font-size:12px;}
nav.menu ul ul.submenus li .box-sub p.title a:hover .warning2:before {content:'';width:20px;position:absolute; left:10px;margin:0 auto; bottom:-10px; height: 0;border-style: solid;border-width:10px 10px 0 10px;border-color:#e74c4c transparent transparenttransparent;}
/*nav right*/
nav.menu.right{float:right; background:#e74c4c ; border:none; height:25px; border-radius:0;}
nav.menu.right ul, nav.menu.right ul li a{height:25px;}
nav.menu.right ul li{margin:0 3px;}
nav.menu.right ul li:last-child{margin-right:0;}
nav.menu.right ul li a{color:#fff; font-size:12px;}
nav.menu.right ul li a.selected, nav.menu.right ul ul li a.selected{background:transparent;height:25px; border-bottom:none;}
nav.menu.right ul li:hover{background:rgba(0,0,0,0.5);}
nav.menu.right ul li:hover a {color:#e7b652; background:rgba(0,0,0,0.5); border-color:#e7b652;}
nav.menu.right ul ul.submenus.single li{width:100%; float:none; background:#cecece;}


/*nav user*/
nav.menu ul li.login2 a.user{height:40px !important; padding:4px !important; border-radius:20px; border:1px solid #EAEBEB; color:#777;font-weight:400; width:148px;font-size:12px; justify-content:flex-start;}
nav.menu ul li.login2 a.user .avatar{width:30px; height:30px; overflow:hidden; border-radius:15px; display:flex; justify-content:center; align-items:center; float:left; margin-right:4px;}
nav.menu ul li.login2 a.user .avatar img{width:auto; height:30px; margin:0 auto;}
nav.menu ul li.login2 a.user span{word-wrap: break-word; width:83px; white-space:nowrap; font-weight:600; overflow:hidden;}
/*mulai*/
.header{height:68px;margin:0 auto; left:0; right:0; top:0; position:fixed; background:#fff; z-index:5; box-shadow:0 8px 20px rgba(119, 119, 119, 0.1);}
.header .header-in{width:100%;padding:0 16px; margin:0 auto;display: flex;justify-content: space-between; max-width:1148px;}
h1.logo{height:68px; margin:0; float:left; padding:19px 19px 19px 0;}
h1.logo img{width:auto; height:30px;}
/*search*/
.box-search {height:68px;width:100%;margin:0; position:fixed; top:68px; left:0; right:0; padding:16px; background:#D3D4D4; z-index:6;}
.box-search-in{position:relative; height:auto; width:100%; max-width:1148px; padding:0; margin:0 auto;}
.box-search-in input.search {width: 100%;height:36px;padding: 5px 40px 5px 10px;background: #fff;border:1px solid #ddd;border-radius: 4px;font-size:14px;}
.box-search-in button.search-btn {width:36px;height:36px;border: 1px solid transparent;position: absolute;right:0;top:0;background: 0 0; color:#202020;}
.box-search-in input.search:focus{color:#000;}
a.sign-btn.show-search{width:36px; height:36px; display:inline-flex; justify-content:center; align-items:center;}
/*blockbox*/
.kanalname {overflow:hidden; margin-bottom:32px;}
.kanalname h2.titlecenter {font-size:24px;line-height:36px;font-weight:700;position: relative; margin: 0 auto;text-align: center;padding:20px 0; color:#000; font-family:'bri_digital_textbold';}
.blockbox{display:block; position:relative; margin:0; padding:0; margin-bottom:80px;}
.blockbox h2.titlebox{min-height:24px; font-size:20px; line-height:24px; font-weight:700; display:flex; align-items:center; margin-bottom:24px; position:relative;font-family:'bri_digital_textbold';}
.blockbox p.capt{font-size:22px; line-height:32px; max-width:750px; font-weight:500;}
.subbody{margin-bottom:56px; position:relative;}
.subbody a{font-size:14px; line-height:140%; display:inline-flex; padding-bottom:8px; margin:0 8px; position:relative;}
.subbody a.selected:before{content:''; position:absolute; bottom:0; height:4px; background:#F87304; left:0; right:0;}
.blockbox.inline-flex{display:inline-flex;}
.wborder{position:relative; padding-right:12px; margin-right:12px;}
.wborder:before{content:''; position:absolute; right:0; top:0; bottom:0; width:1px; background:#D3D4D4;}
.wborder.noborder:before{display:none;}
.blockbox.inline{border:1px solid #EAEBEB; border-radius:16px;}
.blockbox.inline.p24{padding:24px;}
.blockbox.inline.bluetoorange{background: linear-gradient(90deg, rgba(16, 125, 211, 0.1) 0%, rgba(255, 255, 255, 0.1) 53.44%, rgba(238, 111, 33, 0.1) 100%); border:none;}
.boxline{border:1px solid #d3d4d4; border-radius:6px;}
.boxline .headbox{padding:16px; border-bottom:1px solid #d3d4d4;}
.boxline .bodybox{padding:16px;}
.boxline .bodybox.wpad{padding:24px 16px;}
.boxline .bodybox.wpad p{font-size:14px; line-height:140%;}
.double-btn{display:flex; justify-content:space-between;}
.left-button{margin-right:4px; margin-bottom:8px;}
.right-button{margin-left:4px; margin-bottom:8px;}
.double-btn.more2{flex-flow:wrap; justify-content:flex-start;}
.double-btn.more2 button{margin-right:8px; margin-bottom:8px;}
.box-copy{height:40px; padding-right:50px; position:relative; margin-bottom:32px;}
.box-copy .box-address{border-radius:6px; background:#F8F9F9;height:40px; padding:12px 16px;}
.box-copy button.copy-btn{width:40px; height:40px; border-radius:6px; display:flex; justify-content:center; align-items:center; border:1px solid #F87304; color:#F87304;position:absolute; top:0; right:0; background:#fff;}
/*detail*/
.col-3.detail-sticky{height:100vh;}
.detail-artikel{width:100%;min-height: 10px; padding:0 16px 40px 16px;}
.detail-artikel .detail-in{padding:24px 0 0 0;}
.detail-artikel p{font-size:16px; line-height:24px; margin:0 0 30px 0; font-weight:300;}
.detail-artikel p:last-child{margin-bottom:0;}
.detail-artikel p a{font-weight:700; color:#1078CA;}
.detail-artikel p a:hover{color:#9f9f9f;}
.detail-artikel h1{margin:0;font-size:32px; line-height:140%; font-family: 'bri_digital_textbold';}
.detail-artikel h2{margin:0;font-size:20px; line-height:30px;}
.detail-artikel ul, .detail-artikel ol{margin:0 0 30px 0; padding-left:20px;}
.detail-artikel ul li, .detail-artikel ol li{font-size: 18px;line-height: 28px; margin:15px 0; padding-left:5px;}
.box-title-detail{padding:15px 0 0 0; overflow: hidden; margin-bottom:32px;}
ul.share{padding:8px; margin:0 auto; list-style:none; list-style-position:inside; text-align:center; overflow:hidden; display:inline-flex; align-items:center; justify-content:flex-start; width:100%;}
ul.share li{margin:0 0 0 5px; width:40px; padding:0;}
ul.share li a{width:40px; height:40px;color:#fff; border-radius:6px; text-align:center; font-size:16px;display:flex; align-items:center; justify-content:center;}
ul.share li.title{width:auto; font-size:14px; font-weight:600; padding-right:12px;}
ul.share li a:hover{opacity:0.9;}
ul.share li.cp-link {width:auto;}
ul.share li.cp-link a{width:auto; padding:0 12px; font-size:12px;}
ul.share li:first-child{margin-left:0;}
ul.share li:last-child{margin-right:0;}
/*detail - baca juga*/
.detail-artikel .detail-in .baca-juga{padding-left:16px; margin:0 0 24px 0;}
.detail-artikel .detail-in .baca-juga h5.title{font-size:16px; line-height:20px; font-weight:700; margin:0 0 8px 0;}
.detail-artikel .detail-in .baca-juga h4.title{border-left:4px solid #aab9b9; font-size:18px; line-height:22px; font-weight:600; padding:4px 8px; margin-bottom:8px; background:#f9f9f9;}
.detail-artikel .detail-in .baca-juga a{color:#323C9F; font-size:18px; line-height:29px; margin:16px 0; font-weight:600;}
.detail-artikel .detail-in .baca-juga a:hover{opacity:0.7;}
/*detail - foto utama */
.box-foto-detail{margin:0 0 15px 0; overflow:hidden;}
.box-foto-detail .foto-detail{width:100%; height:auto;overflow:hidden; margin:0; border-radius:8px;}
.box-foto-detail .foto-detail img{width:100%; height:auto;}
.box-foto-detail .caption{font-size:12px; line-height:20px; color:#9f9f9f; padding:12px 0; border-bottom:1px solid #ddd;}
/*detail judul */
.judul-artikel{padding:0; overflow: hidden;margin:0 0 30px 0;}
.judul-artikel h1.title{margin:0; font-size:32px; line-height:40px;font-weight:700;}
.judul-artikel h3.title{font-size:14px; line-height:20px;margin:0; font-weight:700; color:#9E9E9E;}
.judul-artikel h4.date{font-size:12px; line-height:18px;margin:0; font-weight:400; color:#9E9E9E;}
/*detail - tag*/
.box-tag{display:block;}
.box-tag a{display:inline-flex; align-items:center; justify-content:center;border-radius:4px; padding:4px 8px; margin:0 5px 5px 0; color:#fff; font-size:16px; line-height:22px; font-weight:600; border:1px solid #fff;}
.box-tag a:hover{color:#9E9E9E; border-color:#9E9E9E;}
.breakpage{height:32px; width:100%; display:flex; justify-content:center; align-items:center; position:relative;}
.breakpage::before{content:''; position:absolute; height:2px; left:0; right:0; top:15px; background:#D3D4D4;}
.breakpage h6.title{position:absolute; height:32px; background:#fff; text-align:center; display:inline-flex; justify-content:center; align-items:center; font-size:12px; padding:0 16px; z-index:2; margin:0; color:#9f9f9f; font-weight:500;}
/*top istilah*/
.top-istilah{display:block;}
.top-istilah a{display:inline-flex; align-items:center; justify-content:center; background:#f9f9f9; border-radius:4px; padding:3px 12px; margin:0 5px 5px 0; border:1px solid #292929; color:#292929; font-size:14px; font-weight:400;}
.top-istilah a:hover{border-color:#1078CA; color:#1078CA; background:#fff;}
/*breadcrumbs*/
ul.breadcrumbs{list-style:none; list-style-position:inside; margin:0; padding:0 0 24px 0; display:inline-flex; align-items:center; flex-flow:wrap;}
ul.breadcrumbs li{float:left;padding:0 32px 0 0;position:relative; font-size:14px; font-weight:500; color:#777; margin:0;}
ul.breadcrumbs li:before{position:absolute;font-family: 'FontAwesome';content: '\f054'; top:1px; right:10px; font-size:12px; color:#292929;}
ul.breadcrumbs li a{color:#292929;} ul.sitemap li a:hover{color:#00549B; }
ul.breadcrumbs li a.selected{color:#777;}
ul.breadcrumbs li:last-child{padding-right:0;}
ul.breadcrumbs li:last-child:before{display:none;}
/*sumber / penulis */
.box-sumber{background:#fff; padding:10px 0; overflow:hidden; position:relative;display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap; z-index:2;}
.box-sumber .avatar-sumber{width:40px; height:40px; overflow:hidden; float:left; margin-right:10px; border-radius:25px; border:1px solid #ddd;}
.box-sumber .avatar-sumber img{width:auto; height:40px;}
.box-sumber .text-sumber{min-height:40px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column;}
.box-sumber .text-sumber h5.title{font-size:14px; line-height:18px; margin:0;}
/*footer*/
.footer{background:#fff; padding:0; overflow:hidden;font-size:14px; color:#fff; position:relative; height:auto;}
.footer img.footer-bg{width:100%; height:auto;}
.footer .footer-in{padding:40px 16px 24px 16px; max-width:1148px; width:100%; margin:0 auto; overflow:hidden; bottom:0; left:0; right:0; height:auto; border-top:3px solid #BBDEFA;}
.footer a.link{font-size:12px; line-height:20px;color:#00549B; display:flex; padding-right:8px; margin-right:8px; min-height:40px; margin:8px 0;}
.footer a.link.icon i{display:flex; justify-content:center; align-items:center;}
.footer .footer-in .col-08{width:12.5%; float:left; padding:0 16px;}
ul.row-menu-footer{list-style: none; list-style-position: inside; margin:0 -8px; padding:0; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow:wrap;}
ul.row-menu-footer li{width:11%;padding:0 8px;}
.footer .footer-bot{background:#00549B; padding:80px 0;}
.footer a.link:hover{color:#000;}
.footer .logo-footer{width:auto; height:32px; display:flex; margin-bottom:40px;}
.footer .logo-footer p.by{font-size:12px; margin:0 16px;display: flex;justify-content: center;align-items: center;}
.footer .logo-footer img{width:auto; height:32px;}
.footer .bottom-footer{border-top:1px solid #ededed; overflow:hidden; padding:16px 0 0 0;}
.footer .footer-bot .footer-apps{display:flex; align-items:center; justify-content:flex-start;}
.footer .footer-bot .footer-apps a{width:50%;}
.footer .footer-bot .footer-apps a img{width:100%; height:auto; margin:0;}
ul.sosmed{padding:0; margin:0; list-style:none; list-style-position:inside; display:flex; justify-content:flex-start; align-items:flex-start; overflow:hidden;}
ul.sosmed li{display:inline-flex;margin:0 3px;width:40px; height:40px;}
ul.sosmed li a{ width:40px; height:40px; color:#000; border-radius:20px; text-align:center; line-height:34px; font-size:22px; display:inline-flex; justify-content:center; align-items:center;}
ul.sosmed li a:hover{opacity:0.7;}
ul.sosmed li:first-child{margin-left:0;}

.footer p.copy{padding:0; margin:0;color:#fff; font-size:12px; color:#999;}
/*pagging*/
ul.pagging {list-style: none;list-style-position: inside;margin: 0 0 64px 0;padding: 0;display: flex;align-items: center;justify-content: flex-start;min-height:24px}
ul.pagging.shadow{box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1); padding:16px; border-radius:12px;}
ul.pagging li {min-width: 24px;height: 24px;text-align: center;line-height:24px;margin:2px;color: #292929;}
ul.pagging li a {min-width:24px; height: 24px;display:inline-flex; justify-content:center; align-items:center;padding:0;color: #292929;background: #fff;border-radius: 4px; font-size:14px; font-weight:600;border: 1px solid #fff;}
ul.pagging li a:hover {background: #fff;color: #F87304;border: 1px solid #F87304;}
ul.pagging li.selected a {background: #CCE8FF;color: #1078CA;border: 1px solid #CCE8FF; }
ul.pagging.centerpos {justify-content: center}
ul.pagging li.outline a{border-color:#d3d4d4;color:#d3d4d4;}
ul.pagging li.outline a:hover{border-color:#F87304; background:transparent; color:#F87304;}
ul.pagging li.outline-paging a{border-color:#F87304; background:transparent; color:#F87304;}

/*avatar*/
.block-avatar{overflow:hidden; display:flex; justify-content:flex-start; align-items:center;}
.box-avatar{display:block;}
.box-avatar .avatar{width:36px; height:36px; overflow:hidden; background:#fefefe; display:block;float:left;border-radius:18px;}
.box-avatar .avatar img{height:36px; width:auto;}
.box-avatar .text-avatar{min-height:36px; padding-left:12px; display:flex;flex-direction:column; justify-content:center;}
.box-avatar .text-avatar h3.title{margin:0; font-size:16px; line-height:21px; color:#fff; font-weight:600;}
.box-avatar .text-avatar h4.title{margin:0; font-size:12px; line-height:16px; color:#9f9f9f; font-weight:400;}
.box-avatar .text-avatar h4.title.bold{font-weight:600;}
.box-avatar .text-avatar a{color:#9f9f9f;}
.box-avatar .text-avatar a:hover{opacity:0.7;}
.box-avatar.s40 .avatar{width:40px; height:40px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:20px;}
.box-avatar.s40 .avatar img{height:40px; width:auto;}
.box-avatar.s80 .avatar{width:80px; height:80px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:40px;}
.box-avatar.s80 .avatar img{height:80px; width:auto;}
.box-avatar.s80 .text-avatar{min-height:80px;}
.box-avatar.s48 .avatar{width:48px; height:48px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:24px;}
.box-avatar.s48 .avatar img{height:48px; width:auto;}
.box-avatar.s48 .text-avatar h4.title{font-size:16px; line-height:21px;}
.box-avatar.s48 .text-avatar{min-height:48px;}
.box-avatar.s48.wbtnprofile .text-avatar{padding-right:100px; position:relative;}
.box-avatar.s48.wbtnprofile .text-avatar .btn-buka-profile{position:absolute; top:0; bottom:0; right:0;}
.box-komentar .box-avatar.s80 .text-avatar{padding-left:52px;}
.box-komentar .box-avatar.s80 .text-avatar h2.title{font-size:20px; line-height:120%;}
.box-avatar.s64 .avatar{width:64px; height:64px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:32px;}
.box-avatar.s64 .avatar img{height:64px; width:auto;}
.box-avatar.s64 .text-avatar h4.title{font-size:16px; line-height:21px;}
.box-avatar.s64 .text-avatar{min-height:64px; padding-left:16px;}
.box-avatar.s78 .avatar{width:78px; height:78px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:39px;}
.box-avatar.s78 .avatar img{height:78px; width:auto;}
.box-avatar.s78 .text-avatar h4.title{font-size:16px; line-height:21px;}
.box-avatar.s78 .text-avatar{min-height:78px; display:inline-flex; flex-direction:row; padding-left:16px;}
.box-avatar.s32 .avatar{width:32px; height:32px; overflow:hidden; background:#fefefe; display:inline-flex; justify-content:center; align-items:center; border-radius:20px;}
.box-avatar.s32 .avatar img{height:32px; width:auto;}
.box-avatar.s100 .avatar{width:100px; height:100px; border-radius:50px;display:inline-flex; justify-content:center; align-items:center;}
.box-avatar.s100 .avatar img{height:100px; width:auto;}
.box-avatar.s100 .text-avatar h4.title{font-size:16px; line-height:21px;}
.box-avatar.s100 .text-avatar{min-height:100px; display:inline-flex; flex-direction:row; padding-left:16px;}
.box-avatar.head-avatar{background: linear-gradient(90deg, rgba(16, 125, 211, 0.1) -1.2%, rgba(255, 255, 255, 0.1) 100%);padding:16px; border-radius:16px;}
.box-avatar.head-avatar .text-in-avatar{position:relative; display:inline-flex; flex-direction:column; min-height:46px; justify-content:center; align-items:flex-start; padding-right:16px; margin-right:16px;}
.box-avatar.head-avatar .text-in-avatar:before{content:''; position:absolute; width:1px; top:0; bottom:0; right:0; background:#A3A3A3;}
/*komentar*/
.box-komentar{display:block; position:relative; margin-bottom:32px; overflow:hidden;}
.box-komentar.balas{border-bottom:none; padding-bottom:0;}
.box-komentar .isi-komentar{padding-left:132px; padding-right:30%;}
.box-komentar .isi-komentar p{font-size:14px; line-height:24px; margin:0 0 16px 0; font-weight:300;}
.box-komentar .isi-komentar .box-balas{display:flex; justify-content:flex-end; align-items:center;}
.box-komentar .isi-komentar .box-balas button.balas{display:inline-flex;justify-content: flex-start;align-items: center; border:none; background:transparent;padding:0;}
.box-komentar .isi-komentar .box-balas button.balas:hover{opacity:0.7;}
.box-komentar .isi-komentar .box-balas .icon-balas{width:16px; height:16px; display:inline-flex; justify-content:center; align-items:center;}
.box-komentar .isi-komentar .box-balas p{font-size:12px; line-height:20px; margin:0 0 0 8px; font-weight:600;}
.box-komentar .isi-komentar .box-balas p.balasan{position:relative;font-size:12px; line-height:20px;font-weight:600; margin:0; padding:0;}
.all-balasan-komentar{overflow:hidden;}
.all-balasan-komentar.active{display:block;}
.box-komentar a.click-balasan{ cursor:pointer;}
.box-komentar .box-balasan{display:none;width:100%; min-height:auto; overflow:hidden;}
.box-komentar .box-balasan.active{display:block;}
.box-komentar a.click-input-balasan{cursor:pointer; display:flex; align-items:center; justify-content:center;}
.box-komentar .box-input-balasan{display:none;width:100%; min-height:auto; overflow:hidden;}
.box-komentar .box-input-balasan.active{display:block;}
/*chat*/
.all-box-chat .bottom_chat{position:absolute;bottom: 0;left: 0;right:0;z-index: 3;height:auto;margin: 0;padding:8px;height:80px; border-radius:0 0 20px 20px; padding:16px 20px; display:flex; justify-content:space-between; flex-wrap:no-wrap;}
.bottom_chat .element-box textarea.element-area{min-height:48px; height:48px; padding:8px; font-size:14px; line-height:18px; border-radius:6px; border:1px solid #D3D4D4;}
.bottom_chat .btn_left{width:48px; height:48px; border-radius:6px; display:inline-flex; justify-content:center; align-items:center; border:1px solid #D3D4D4; background:#fff;}
.textarea-chat{min-height:10px !important; height:50px;overflow:auto;}
.chatbox{width:100%; max-width:800px; margin:0 auto; height:auto; padding:0 39px 0 0; position:relative;}
.chatbox .send-btn{width:40px; height:40px; position:absolute; top:0; right:0; z-index:2; border:1px solid rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; border-radius:4px; background:#fff; border-radius:0 4px 4px 0 !important;background:#f8f8f8 !important;}
/*chat*/
.all-box-chat{position:relative;padding:100px 20px; border-radius:20px; height:auto;margin:0 auto;background:#fff; box-shadow:0px 8px 20px rgba(119, 119, 119, 0.1); border:1px solid #EAEBEB;}
.all-box-chat .header_chat{position:absolute; top:0; left:0; right:0; height:80px; background:#00549B; border-radius:20px 20px 0 0; padding:16px 76px 16px 20px;}
.all-box-chat .header_chat .srch_chat{border:none; background:transparent; position:absolute; right:0; top:0; bottom:0; display:flex; justify-content:center; align-items:center; width:60px; color:#fff; padding:0;}
.all-box-chat .header_chat .srch_chat_input{position:absolute; right:12px; height:40px; top:20px; bottom:20px; z-index:3;}
.all-box-chat .box-chat-inside{ overflow-y:scroll; height:375px; padding-right:20px;}
.box-chat-inside::-webkit-scrollbar {width:6px; background:#D3D4D4; border-radius:6px;}
.box-chat-inside::-webkit-scrollbar-track { border-radius:0 6px 6px 0;}
.box-chat-inside::-webkit-scrollbar-thumb {background-color:#555555; border-radius:4px;}
.box-chat-inside::-webkit-scrollbar:horizontal {height:6px;}
.box-chat-inside::-webkit-scrollbar:vertical {width:6px;}
.all-box-chat.video-chat{padding:15px; border-radius:4px;border: 1px solid #ddd; height:60vh; overflow-y:scroll; margin:0 auto; max-width:800px;}
.box-chat{display:block; position:relative; min-height:48px; padding:0; margin-bottom:16px; overflow:hidden; width:100%;}
.box-chat .text-chat{border-radius:8px; border:1px solid #D3D4D4; background:#fff; padding:16px; position:relative; font-size:14px; line-height:18px; margin:0 0 6px 0; min-height:42px; max-width:48%; left:0;}
.text-chat p.left-text{margin:3px 0 20px 0;word-break:break-word;overflow: hidden;}
.text-chat.left-chat{position:relative;}
.text-chat .date{position:absolute; z-index:2; bottom:8px; right:8px; font-size:12px; color:#999;}
.text-chat .date span{margin-left:4px;}
.text-chat .username{font-size:12px; font-weight:600;}
.box-chat .text-chat.right-chat{ position:relative; background:#F8F9F9; left:inherit; right:0; float:right;}

.date-chat{display:inline-block; border-radius:4px; padding:4px 8px; background:#fff; border:1px solid #000000 ; font-size:11px; line-height:13px; margin:5px 0 10px 0; color:#000000 ;}

ul.row-list.list_artikel_front li .card-box{border-radius:16px;box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1); background:#fff;}
ul.row-list.list_artikel_front li .card-box .text-card{padding:24px 16px;}
ul.row-list.list_artikel_front.kanals li{margin-bottom:16px;}
ul.row-list.list_pelatihan_kanal li {margin-bottom:16px;}
ul.row-list.list_pelatihan_kanal li .card-box{border-radius:12px;border:1px solid #EAEBEB; background:#fff;}
ul.row-list.list_pelatihan_kanal li .card-box .text-card{padding:8px;}
ul.row-list.list_pelatihan_kanal li .card-box .square-img{border-radius:0;}
ul.row-list.list_pelatihan_kanal li .card-box .text-card p{font-size:12px; line-height:140%;}
ul.row-list.list_cc_pakar li{margin-bottom:16px;}
ul.row-list.list_cc_pakar li .card-box{border-radius:12px; box-shadow:0px 8px 20px rgba(119, 119, 119, 0.1);}
ul.row-list.list_cc_pakar li .card-box .img-card{border-radius:0; margin:0 auto;}
ul.row-list.list_cc_pakar li .card-box .text-card{padding:12px 16px;}
ul.row-list.list_cc_pakar li .card-box .text-card h2.title{position:relative; padding-bottom:12px;}
ul.row-list.list_cc_pakar li .card-box .text-card h2.title::before{content:''; width:80px; height:4px; position:absolute; left:0; right:0; bottom:0; background:#F87304; margin:auto;}
ul.row-list.list_etalase li .square{background:#fff;box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1); border-radius:24px;}
ul.row-list.list_etalase li .square-img{ padding:12px;}
ul.row-list.list_etalase li .square-img img{height:70%; width:auto;}
ul.row-list.list_etalase li p{font-size:14px; line-height:18px; text-align:center;}
ul.row-list.list_etalase.mid{justify-content:center;}
ul.row-list.list_tiga li{margin-bottom:16px;}
ul.row-list.list_tiga li:nth-child(1){width:27.5%;}
ul.row-list.list_tiga li:nth-child(2){width:27.5%;}
ul.row-list.list_tiga li:nth-child(3){width:45%;}
ul.row-list.list_tiga li .card-box{height:287px;border-radius:16px;box-shadow: 0px 8px 20px rgb(119 119 119 / 10%); background: #fff; padding:16px;}
ul.row-list.list_tiga li .card-box.med{height:144px;}
ul.row-list.list_tiga li .card-box.small{height:125px;}
ul.row-list.list_tiga li .card-box .text-card h3.title{font-size:16px; line-height:24px; margin-bottom:24px;}
ul.row-list.list_artikel_front.list_komunitas li .card-box {padding:16px; min-height:190px;}
ul.row-list.list_artikel_front.list_komunitas li .card-box .square{width:70%; margin:0 auto;}
ul.row-list.list_artikel_front.list_komunitas li .card-box .text-card{padding:16px 0 0 0;}
.blockbox .bg-etalase{position:relative;}
.blockbox .bg-etalase::before{content:''; position:absolute; bottom:-10%; right:0; width:90%; height:95%; background:#F8F9F9; border-radius:40px;}
.box-popup {height:90vh;max-width:800px;margin: 0 auto;padding:0;background: 0 0;position: fixed;z-index: 35;left:0;right:0;bottom:5vh;top:5vh;display:flex; align-items:center; justify-content:center;}
.box-popup .box-popup-in{overflow-y:auto; height:100%; width:100%; background:#fff; padding:88px 16px 16px 16px; border-radius:8px; position:relative;font-size:14px; line-height:20px; font-weight:500;}
.box-popup .box-popup-in .element-check input[type="checkbox"]{top:0; border-color:#B5B6B6;}
.box-popup .box-popup-in .element-check input:checked:before{color:#fff; background:#00549B;}
.box-popup .box-popup-in .element-check input:checked{border-color:#00549B;}
.box-popup .header-popup{width:100%; height:72px; background:#00549B; z-index:2; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; padding:10px 76px 10px 15px; font-size:14px; font-weight:500; position:absolute; top:0; left:0; right:0; color:#fff; border-radius:8px 8px 0 0;}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {width:6px; background:#D3D4D4; border-radius:6px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {background-color:#555555; border-radius:6px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar:horizontal {height:6px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar:vertical {width:6px;}

.box-popup-in::-webkit-scrollbar {width:6px; background:#D3D4D4; border-radius:0 6px 6px 0;}
.box-popup-in::-webkit-scrollbar-track { border-radius:0 0 0 0;}
.box-popup-in::-webkit-scrollbar-thumb {background-color:#555555; border-radius:0 6px 6px 0;}
.box-popup-in::-webkit-scrollbar:horizontal {height:6px;}
.box-popup-in::-webkit-scrollbar:vertical {width:6px;}
 [data-icon]:after {font-family: "entypo";content: attr(data-icon);speak: none;}input[type="search"] {width: 196px;height: 36px;padding: 0;line-height: 32px;background: #f8f8f8;color: #999;border: 0;font: normal 14px/20px;text-indent: 12px;outline: none;-webkit-appearance: textfield;border-radius:4px;}input[type="search"]::-webkit-input-placeholder {color: transparent;}input[type="search"]::-moz-input-placeholder {color: transparent;}input[type="search"]:-ms-input-placeholder {color: transparent;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration {-webkit-appearance: none;width: 32px;height: 32px;line-height: 30px;color: white;text-align: left;cursor: pointer;}input[type="search"]::-webkit-search-cancel-button:before,input[type="search"]::-webkit-search-results-button:before,input[type="search"]::-webkit-search-results-decoration:before {position: absolute;content: "x";font-style: normal;}input[type="search"]:invalid {border: 0 !important;}input[type="search"]:invalid::-webkit-search-cancel-button:before,input[type="search"]:invalid::-webkit-search-results-button:before,input[type="search"]:invalid::-webkit-search-results-decoration:before {font-family: "entypo";content: attr(data-icon);}input[type="search"] + label {position: absolute;margin: 8px 0 0 -30px;cursor: pointer;}input[type="search"] + label:before {position: absolute;content: "Choisir";left: -152px;width: 180px;color: #fff;font: bold 14px/20px ;text-align: left;}input[type="search"] + label:after {margin-left: 7px;color: #fff;content: "\25BE";}input[type="search"]:focus::-webkit-input-placeholder {font-weight: normal;color: #fff;}input[type="search"]:focus::-moz-input-placeholder {font-weight: normal;color: #fff;}input[type="search"]:focus:-ms-input-placeholder {font-weight: normal;color: #fff;}input[type="search"]:focus:invalid + label:before {display: none;}input[type="search"]:focus:invalid + label:after {margin-left: 4px;content: attr(data-icon);}input[type="search"]:valid + label {display: none;}.ui-autocomplete {width: 190px;max-height: 180px;padding: 0;margin: 0;overflow-y: auto;overflow-x: hidden;background: #2ec5aa;color: #fff;border-width: 4px 4px 4px 0;border-style: solid;border-color: #2ec5aa;}.ui-autocomplete ul {list-style: none;}.ui-autocomplete li {height: 36px;margin: 0;font: bold 14px/36px Arial, Helvetica, sans-serif;white-space: nowrap;}.ui-autocomplete li:hover {-moz-transition: background 0.3s ease-in;-o-transition: background 0.3s ease-in;-webkit-transition: background 0.3s ease-in;transition: background 0.3s ease-in;background: #3ed1b7;}
.ui-autocomplete li a {display: block;padding: 0 12px;cursor: pointer;}
.select2-dropdown,.select2-container--default .select2-search--dropdown .select2-search__field{border-color:#d3d4d4;}
.box-select-search{display:flex; justify-content:space-between;}
.box-select-item{display:flex; justify-content:flex-start; flex-wrap:wrap;}
.box-select-item a.sign-btn, .box-select-item button.sign-btn{margin:0 4px; font-weight:600;}
.box-select-item a.sign-btn.selected, .box-select-item button.sign-btn.selected{background:#DDEFFC;border-color:#DDEFFC; color:#1078CA;}
.box-select-item a.sign-btn i.fa-arrow-right{transform: rotate(-45deg);margin-top: -3px;}
.box-select-item .element-box{margin:0 4px;}
.box-select-search label.select-lab{height:40px; display:flex; justify-content:center;align-items: center;font-size: 14px;}
.select2-dropdown{z-index:3;}
.select2-container{min-width:200px !important;}
.box-select-search.filters{justify-content:flex-start;}
.box-select-search.filters label.select-lab{margin-right:4px;min-width:94px;}
.box-select-search.filters button{margin:0 4px 8px 4px;}
ul.row-list.list-artikel-peta li .card-box{min-height:289px;}
ul.row-list.list-artikel-peta li{margin-bottom:16px;}
ul.row-list.list-item-etalase li {margin-bottom:16px;}
ul.row-list.list-item-etalase li .card-box{min-height:289px;}
ul.row-list.list-item-etalase li:hover .card-box{box-shadow: 0px 8px 20px rgba(119, 119, 119, 0.1);}
.card-box.wait_confirm .square{background:#fff;}
.card-box.wait_confirm .square-img img{opacity:0.2;}
.card-box.wait_confirm .square .text_confirm{position:absolute; left:0; right:0; bottom:0; background:#F87304; color:#fff; padding:8px 12px; text-align:center; font-size:12px; line-height:16px; z-index:1;}
.slider-menu-etalase .slider-item .square{background:#fff; border-radius:12px;}
.slider-menu-etalase .slider-item .square .square-img{padding:4px;}
.slider-menu-etalase .slider-item .square .square-img img{width:auto; height:50px;}
.slider-menu-etalase .slider-item .square .square-img p{font-size:14px; line-height:16px; text-align:center;}
#popup-filter .element-check input[type="checkbox"]{top:0; border-color:#d3d4d4; color:#101C3C;}
#popup-filter .element-check input:checked:before{color:#00529D; background:#fff;}
#popup-filter .element-check input:checked{border-color:#00529D;}
#popup-filter .element-check .checktext{line-height:120%;}
ul.row-list.list_anggota li{margin-bottom:16px;}
ul.row-list.list_anggota.in-popup li{padding-bottom:16px; border-bottom:1px solid #d4d3d3;}
ul.row-list.list_anggota.in-popup li:last-child{border-bottom:none;}
ul.row-list.list_forum_diskusi li{margin-bottom:16px;}
ul.row-list.list_forum_diskusi li .card-box{padding:16px;}
ul.row-list.list_forum_diskusi li .box-avatar.s64 .text-avatar{padding-right:220px; position:relative;}
ul.row-list.list_forum_diskusi li .box-avatar.s64 .text-avatar .users-right{position:absolute; top:0; right:0; bottom:0; width:195px; margin-right:4px;}
ul.row-list.list_forum_diskusi li .box-avatar.s64 .text-avatar .users-right .avatar{margin-right:-4px;}
.box-progress{width:100%; height:10px; border-radius:5px; background:#EAEBEB; position:relative; margin-top:60px;}
.box-progress .on-progress{width:auto; height:10px; border-radius:5px; background:#56ADF2; position:absolute; left:0; top:0; bottom:0; z-index:2;}
.box-progress .on-progress::before{content:''; width:16px; height:16px; background:#56ADF2; position:absolute; top:-3px; right:0; border-radius:50%;}
.box-progress .on-progress::after{content:''; width:10px; height:10px; background:#EAEBEB; position:absolute; top:0; right:3px; border-radius:50%;}
.box-progress .on-progress .number-progress{width:auto; height:28px; padding:2px 6px; border-radius:6px; position:absolute; right:0; top:-40px; font-size:12px; display:inline-flex; justify-content:center; background:#1078CA; color:#fff;align-items:center;transform: translate(30%, 0);}
.box-progress .on-progress .number-progress::before{content:'';position:absolute; bottom:-5px; width: 0;height: 0;border-style: solid;border-width: 5px 5px 0 5px;border-color: #1078CA transparent transparent transparent;}
ul.row-list.list_assesment{position:relative;}
ul.row-list.list_assesment::before{content:''; width:1px; position:absolute; top:12px; bottom:12px; left:19px; background:#B5B6B6; z-index:-1;}
ul.row-list.list_assesment li {min-height:24px; margin-bottom:32px; color:#B5B6B6;}
ul.row-list.list_assesment li .number{width:24px; height:24px; border-radius:50%; display:inline-flex; justify-content:center; align-items:center; background:#B5B6B6; color:#fff; font-size:12px; margin-right:8px; float:left; border:2px solid #fff;}
ul.row-list.list_assesment li .text{padding-left:30px; font-size:16px; line-height:22px;}
ul.row-list.list_assesment li a{min-height:24px; color:#B5B6B6;}
ul.row-list.list_assesment li a:hover{color:#292929;}
ul.row-list.list_assesment li a.selected .number{background:#F87304; color:#fff;}
ul.row-list.list_assesment li a.selected .text{color:#F87304;}
ul.row-list.list_assesment li:last-child{margin-bottom:0;}
ul.row-list.list_pilihan li{margin-bottom:16px;}
.assesment-tanya{padding:0; margin-bottom:32px;}
.assesment-tanya .number{font-size:14px; line-height:18px; width:20px; height:20px; display:inline-flex; justify-content:center; align-items:center;float:left; margin-right:32px; font-weight:600;}
.assesment-tanya .box-tanya{padding-left:52px; min-height:85px;}
.assesment-tanya .box-tanya p{margin-bottom:16px; font-size:14px; line-height:140%; font-weight:600;}
ul.row-list.list_pilihan li .box-pilihan{border:1px solid #d4d3d3; border-radius:8px; padding:10px 16px; overflow:hidden;display: table-cell;}
/* .box-pilihan .element-check input[type="checkbox"], .box-pilihan .element-check input[type="radio"]{border-radius:10px; top:0; border:1px solid #777777;} */
.box-pilihan .element-check input[type="checkbox"]{top:0; border:1px solid #777777;}
.box-pilihan .element-check input[type="radio"]{border-radius:10px; top:0; border:1px solid #777777;}
.box-pilihan .element-check input:checked, .box-pilihan .element-radio input:checked{background:#1078CA; border-color:#1078CA;}
.box-pilihan .element-check input:checked:before, .box-pilihan .element-radio input:checked:before{width:18px; height:18px; color:#fff;}
.pilih-tanya{position:relative; width:100%; padding:16px; overflow:hidden; margin-bottom:16px;}
.pilih-tanya:before{content:''; position:absolute; z-index:-1; top:0; left:0; right:51%; bottom:0; border:1px solid #d4d3d3; border-radius:8px;}
.pilih-tanya:after{content:''; position:absolute; z-index:-1; top:0; right:0; left:51%; bottom:0; border:1px solid #d4d3d3; border-radius:8px;}
.pilih-tanya.single-left:after{display:none;}
ul.row-list.list_modul li{margin-bottom:16px;}
.rating-bar{position:relative; padding-left:32px; height:24px; display:flex; align-items:center;}
.rating-bar .rating-num{position:absolute; top:0; left:0; bottom:0; width:24px; display:flex; justify-content:center;color:rgba(0,0,0,0.6)}
.rating-bar .bar-box{height:8px; border-radius:2px; background:rgba(0,0,0,0.06); width:100%; position:relative;}
.rating-bar .bar-box .active-bar{height:8px; position:absolute; left:0; top:0; bottom:0; background:#1078CA; width:auto;}
/*star rating*/
.wrapper {width:100%; padding:24px;}
.star-container{margin:0 16px;}
.star-container .fa-star {  font-size:32px;  color: #ffd700;}
.star-container .fa-star-o {  font-size:32px;  color: #ddd;}
.star-container i{font-size:30px; cursor:pointer;}
.number {display: block;text-align: center;}
#submit {}
#submit:disabled {cursor: not-allowed;}
#message {text-align: center;margin:24px auto;}
#submit-section {position: absolute;height: 100%;width: 100%;background-color: #ffffff;top: 0;left: 0;place-items: center;border-radius: 0.5em;}
.hide {display: none;}
.show {display: grid;}
.box-komen{padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #EAEBEB;}
.box-komen .top-komen{display:flex; justify-content:space-between;}
.box-komen .top-komen p.dates{height:32px; display:inline-flex; justify-content:center; align-items:center;}
.box-komen .teks-komen{padding-left:44px;}
.box-komen .teks-komen p{font-size:14px; line-height:140%; margin:16px 0; color:#777;}
.box-komen .bot-komen{display:flex; justify-content:flex-end;}
.box-pilihan .element-radio input[type="radio"] {border-radius: 10px;top: 0;border: 1px solid #777777;}
.box-pilihan .element-radio input:checked {background: #1078CA;border-color: #1078CA;}
.box-pilihan .element-radio input:checked:before {width: 18px;height: 18px;color: #fff;}
ul.row-list.list-modul-sc li{padding-top:16px; padding-bottom:16px; border-bottom:1px solid #EAEBEB;}
ul.row-list.list-modul-sc li:last-child{border-bottom:none;}
ul.row-list.list-piala li{margin-bottom:16px;}
ul.row-list.list-piala li .square .square-img{background:#EAEBEB; border-radius:16px;}
ul.row-list.list-piala li.selected .square .square-img{background:#1078CA;}
ul.row-list.list-piala li.selected p{color:#fff;}
.blue-table{padding:0 16px; border-radius:14px; overflow:hidden; background:#DDEFFC; margin-bottom:16px;}
.blue-table .table-in{display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid #fff;}
.blue-table .table-in p{color:#777;}
.blue-table .table-in:last-child{border-bottom:none;}
.w-box{display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 24px 48px;
gap: 48px;
top:-80px;
position: relative;
width:100%;
height:auto;
max-width:1068px;
margin:0 auto;
background: #FFFFFF;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
border-radius: 24px;}
.mikrobox i{margin:0 6px;}
ul.list-star{position:relative; margin:0;}
ul.list-star:before{content:'';position:absolute; top:0; left:0; right:0; height:35%; background: linear-gradient(180deg, #FFFFFF 27%, rgba(255, 255, 255, 0) 100%); z-index:1;}
ul.list-star:after{content:'';position:absolute; bottom:0; left:0; right:0; height:35%; background: linear-gradient(180deg, #FFFFFF 27%, rgba(255, 255, 255, 0) 100%); z-index:1;transform: rotate(-180deg);
}
ul.list-star li{margin:8px 0; padding:0;}
ul.list-star li .icon-cek{width:20px; height:20px; position:relative;float:left; margin-right:8px; font-size:24px; display:flex; justify-content:center; align-items:center;}
ul.list-star li .icon-cek .cek {fill:#EAEBEB;}
ul.list-star li p.title{margin:0; color:#EAEBEB; padding-left:30px;}
ul.list-star li.selected .icon-cek .cek{fill:#F87304;}
ul.list-star li.selected p{color:#F87304; font-weight:700;}
.box-rbumn h2{font-size:28px; line-height:140%;}
.box-rbumn .col-8, .box-rbumn .col-7{padding-right:60px;}
.partner-menu{position:relative; z-index:3;}
.partner-menu .sub-partner{width:100%; min-height:50px; border-radius:6px; position:absolute; top:100%; background:#fff; border:1px solid #EAEBEB; overflow:hidden;white-space:normal; display:none; padding:4px;}
.partner-menu:hover .sub-partner{display:block;background:#fff;}
.sub-partner .element-box{margin:8px;}
.sub-partner .element-check .checktext {padding-left:25px;text-align: left;display: flex;justify-content: flex-start;align-items: center; min-height:22px;}
.sub-partner .element-check input[type="checkbox"].abs{top:0; left:0;}
.sub-partner .element-check input:checked:before{color:#fff; background:#1078CA; width:16px; height:16px;}
.sub-partner .element-check input:checked{border-color:#1078CA;}
.cmd-etalase{display:flex; justify-content:center; align-items:center; margin-bottom:8px;}
ul.row-list.list-sertifikasi li{margin-bottom:32px;}
.element-box.inline{border-radius:6px; padding:16px; border:1px solid #d4d3d3; min-height:20px;}
.element-box.inline .element-radio input[type="radio"].abs{top:15px;}
.element-box.inline .element-radio input[type="radio"] {border-color:#7F56D9;}
.element-box.inline .element-radio input:checked {border-color:#7F56D9;}
.element-box.inline .element-radio input:checked:before{content: '\f111'; color:#7F56D9;font-size: 8px;top: -1px;left: -0.5px; height:18px;}
.element-box.sq-check{min-height:20px;}
.element-box.sq-check .element-check input[type="checkbox"].abs{top:0;}
.element-box.sq-check .element-check input[type="checkbox"] {border-color:#7F56D9;}
.element-box.sq-check .element-check input:checked {border-color:#7F56D9;}
.element-box.sq-check .element-check input:checked:before{color:#7F56D9;font-size:11px;top: -1px;left: -0.5px; height:18px;}

ul.row-list.list_cup li{display:flex; justify-content:center; align-items:center;}
ul.row-list.list_cup li .square{max-width:120px; background:#EAEBEB; border-radius:6px; padding:8px; box-shadow:0px 3px 9px rgba(0, 0, 0, 0.2);}
ul.row-list.list_cup li .square .square-img img{height:80px;}
ul.row-list.list_cup li p{font-size:12px; color:#777777; font-weight:600;}
ul.row-list.list_cup li.selected .square{background:#1078CA;}
ul.row-list.list_cup li.selected p{color:#fff;}
.notes_cup{margin:32px auto 0 auto; max-width:600px;}
.notes_cup p{font-size:24px; line-height:140%; text-align:center; font-weight:300;}
ul.row-list.list_medal li .square .square-img img{height:200px;}
.medal_timeline{width:100%; height:70px; position:relative; margin:16px auto;max-width:840px}
.medal_timeline .timeline{width:100%; height:30px; background:#EAEBEB; border-radius:15px; position:relative;}
.medal_timeline .timeline .timeline-in{width:98.8%; height:20px; position:absolute; top:5px; bottom:5px; left:5px; right:5px; border-radius:10px;}
.medal_timeline .timeline .timeline-in .blueline{width:auto; height:20px; position:absolute; background:#1078CA; top:0; bottom:0; left:0; right:0; border-radius:10px;}
.medal_timeline .timeline .point_box{position:absolute; top:-5px; padding-top:48px; width:120px;}
.medal_timeline .timeline .point_box::before{content:''; position:absolute; width:40px; height:40px; border-radius:20px; background:#A3A3A3; top:0; left:50%;transform: translate(-50%, 0); border:5px solid #f8f9f9;}
.medal_timeline .timeline .point_box::after{content:''; position:absolute; width:16px; height:16px; border-radius:8px; background:#fff; top:12px; left:50%;transform: translate(-50%, 0)}
.medal_timeline .timeline .point_box.selected::before{background:#F87304;}
.medal_timeline .timeline .point_box.bronze{left:-55px;}
.medal_timeline .timeline .point_box.silver{left:26%;}
.medal_timeline .timeline .point_box.gold{left:59%;}
.medal_timeline .timeline .point_box.platinum{left:inherit; right:-55px;}
.card-box .text-card p.badge_point{display:inline-flex; justify-content:center; align-items:center; height:36px; border-radius:18px; font-size:22px; line-height:24px; background:#7AC2FF; color:#fff; min-width:60px; padding:0 12px;}
.medal_timeline .timeline .timeline-in .blueline .info_medal{position:absolute; top:-50px; left:50%;transform: translate(-0, 0); padding:8px 8px; font-size:12px; line-height:16px; color:#fff; background:#292929; border-radius:4px; width:auto; z-index:2; display:none; white-space:nowrap;}
.medal_timeline .timeline .timeline-in .blueline .info_medal::before{content:'';width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 10px;border-color: #292929 transparent transparent transparent; position:absolute; left:6px; bottom:-10px; text-align:center;}
.medal_timeline .timeline .timeline-in .blueline:hover .info_medal{display:block;}
ul.row-list.list_badge li .card-box{overflow:inherit;}
ul.row-list.list_badge li .card-box .tooltips{position:absolute; top:-100%;left:50%;transform: translate(-50%, 0); width:400px; min-height:200px; overflow:hidden;z-index:3; background:#fefefe; border-radius:8px; padding:12px; border:1px solid #efefef; box-shadow:0px 3px 9px rgba(0, 0, 0, 0.2);display:none;}
ul.row-list.list_badge li .card-box:hover .tooltips{display:block;}
ul.row-list.list_badge li .card-box .tooltips h4.title{font-size:16px; line-height:20px; border-bottom:1px solid #D3D4D4; padding-bottom:12px; text-align:center;}
ul.row-list.list_badge li .card-box .tooltips p{font-size:14px; line-height:18px; text-align:center;}
ul.row-list.list_badge li:first-child .card-box .tooltips{left:0; transform:none;}
ul.row-list.list_badge li:last-child .card-box .tooltips{left:inherit; right:0; transform:none;}
ul.row-list.list_badge li .card-box .tooltips .col-7{min-height:146px; display:flex; justify-content:center; align-items:center;}
/*dv table*/
div.unstyledTable {
	width:100%;
	margin:32px auto;
	border-radius:10px 10px 0 0;
	overflow:hidden;
	font-size:16px;
}
.divTable.unstyledTable .divTableCell, .divTable.unstyledTable .divTableHead {
	padding:4px 8px;
	color:#777777;
	text-align:center;
}
.divTable.unstyledTable .divTableHeading {
  background: #EAEBEB;
}
.divTable.unstyledTable .divTableHeading .divTableHead {
  font-weight:600;
  padding:8px;
  color:#000;
  text-align:center;
}
.unstyledTable .tableFootStyle {
  font-weight: bold;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
.divTableCell.btn_area{display:flex; justify-content:center;}
.divTableCell.btn_area .sign-btn{margin:0 2px; height:20px; border-radius:4px; padding:0 6px;}
.mini_survey.card-box .text-card{padding:20px;}
.mini_survey.card-box .head_survey{padding:20px;background: #00549B; color:#fff;}
/*alert*/
.alert {padding: 20px;background-color: #e74c4c;color: white;margin-bottom: 15px;position:fixed;left:30px;right:30px;top:90px;z-index:10;  max-width:400px;margin:0 auto;}
.alert-registrasi {padding: 20px;background-color: #ef0808;color: white;}
.alert-success {padding: 20px;background:#1ccf1c !important;color: white;}
.closebtn {  margin-left: 15px;  color: white;  font-weight: bold;  float: right;  font-size: 22px;  line-height: 20px;  cursor: pointer;  transition: 0.3s;}
.closebtn-alert-form {  margin-left: 15px;  color: white;  font-weight: bold;  float: right;  font-size: 22px;  line-height: 20px;  cursor: pointer;  transition: 0.3s;}
.closebtn:hover {  color: black;}
/*kartu anggota*/
.kartu-out{max-width:430px; padding:15px 0; margin:0 auto; position:relative;}
.box-kartu{width:100%; padding:15px; overflow:hidden; height:auto; margin:0 auto;}
.kartu{width:100%; height:auto;margin:0 auto; background:transparent;position:relative; overflow: hidden;}
.kartu .bg-kartu{width:100%; height:auto; margin:0 auto;}
.kartu.blurs{  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);}
.kartu-out .block-kartu{background:rgba(255,255,255,0.8); position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding:15px; display:flex; align-items:center; justify-content:center; flex-direction:column;  -webkit-filter:none;
  -moz-filter:none;
  -o-filter:none;
  -ms-filter:none;
  filter:none}
.kartu .bg-kartu img{width:100%; height:auto;}
.kartu .box-nama{position:absolute; bottom:6px; left: 8px; padding:10px;}
.kartu .box-nama .foto-square{float:left; width:56px; height:56px; overflow: hidden; display:flex; align-items:center; justify-content: center; background: #fff; margin:0 auto; border-radius:50%;}
.kartu .box-nama .foto-square img{width:auto; height:100%; display: block;}
.kartu .box-nama .colnama{padding-left:10px;min-height:56px;display:flex; align-items:flex-start; justify-content: center; flex-direction:column;}
.kartu .head-logo{height:40px; padding:10px;background:transparent; position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; flex-direction:column; flex-flow: wrap;}
.kartu .head-logo .left-logo{float:left;}
.kartu .head-logo .right-logo{float:right;}
.kartu .head-logo img{width:auto; height:16px;}
.kartu .box-nama .colnama h3.title-nama{font-size:14px;line-height:16px;font-weight:500;margin:0;position:relative; color:#fff;}
.kartu .box-kop{left:0; top:35px; position:absolute;padding:0 10px;}
.kartu .box-kop .logo-kop{width:40px; height:40px;overflow:hidden; position:absolute; right:0;}
.kartu .box-kop .logo-kop img{width:40px; height:40px;}
.kartu .box-kop h3.title-kop{min-height:20px; display:flex; align-items:flex-start; justify-content:center; flex-direction: column; margin:0 auto;font-size:14px; line-height:16px; color:#fff; text-transform:uppercase; font-weight:500;padding:0; text-align:center;}
.kartu .logo-card{width:100%; height:auto; overflow: hidden;}
.kartu .logo-card img{width:100%; height:auto; display: block;}
.kartu .qr-code{position:absolute; top:40px; right:10px; width:40px; height:40px; z-index:2; overflow:hidden; margin:0 auto;}
.kartu .qr-code img{width:40px; height:40px;}

/* button floating wa */
#whatsapp-popup {
  display: none;
  position: absolute;
  top: calc(-140% - 100%);
  left: -260px;
  width: 290px;
  background-color: white;
  padding: 20px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: opacity 0.3s ease;
}

#whatsapp-popup p {
  margin: 0;
  line-height: 1.5;
}

#close-popup { 
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}

#draggable-button {
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 1000;
  cursor: grab;
  user-select: none;
}

#draggable-button:hover #whatsapp-popup {
  display: block;
}

.img-label {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  /* font-weight: bold; */
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 3;
  text-align:center;
}

.img-modul {
  width:100% !important;
  height:318px !important;
  object-fit:cover
}

.category-modul-slider {
  display: flex;
  align-items: center;
  padding-bottom:0px;
  padding: 24px 48px;
}

.category-modul-slider .slick-slide {
  margin-right: 12px;
}

.category-modul-btn {
  border: 1px solid #ddd;
  padding: 8px 16px;
  margin-right: 10px !important;
  border-radius: 12px;
  background-color: #fff;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.category-modul-btn:hover {
  background-color: #f0f0f0;
}

/* Kustom panah Slick */
.category-modul-slider .category-modul-prev,
.category-modul-slider .category-modul-next {
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  z-index: 1;
}

.category-modul-slider .category-modul-prev::before,
.category-modul-slider .category-modul-next::before {
  color: #333;
  font-size: 20px;
}

/* Hilangkan margin kanan terakhir */
.category-modul-btn:not(:last-child) {
  margin-right: 12px;
}

.category-modul-btn.active {
  background-color: #e6f3ff;     /* Biru muda */
  color: #2b6cb0;                /* Biru teks */
  font-weight: 600;              /* Tebal */
  border-color: #e6f3ff;
}

@media (max-width: 768px) { /* Untuk layar mobile & tablet */
  .img-label {
      display: none;
  }
  .img-modul{
    width:100% !important;
    height:159px !important;
    object-fit:cover
  }
  .category-modul-btn {
    font-size: 13px;
    padding: 6px 12px;
  }
  .category-modul-slider{
    padding-bottom:0px;
    padding: 16px;
  }
}