@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
    box-shadow:none !important;
}

input, textarea {
    outline: none;
    box-shadow:none !important;
    border:1px solid #014e86 !important;
}

body
{
	font-family:"Calibri";
}
.bg-custom
{
  background-color: #efefef;
}

.ic
{
	border:1px solid #e6e6e6;
}

.icn
{
	border:1px solid #afadae;
}

.username
{
	font-size:12px;
	width:10%;
	margin-left:10px;
    cursor: pointer;
}

hr.style1{
	border-top: 2px solid #014e86;
	margin-top:0;
}

.text-fitur
{
	margin-top:1rem;
	font-size:20px;
	color:#014e86;
	font-weight:bold;
	font-family:"Calibri";
	margin-bottom:0px;
	border-bottom-style:solid;
	width:52px;
}

.text-data
{
    margin-top:7px;
    font-size:25px;
    color:#014e86;
    font-weight:bold;
    font-family:"Calibri";
    margin-bottom:0px;
    border-bottom-style:solid;
    width:60px;
}

.text-hasil-pencarian
{
    margin-top:7px;
    font-size:16px;
    color:#014e86;
    font-style: italic;
    font-family:"Calibri";
    margin-bottom:0px;
}

.text-hasil-entri
{
    margin-top:7px;
    font-size:16px;
    color:#014e86;
    font-style: italic;
    font-family:"Calibri";
    border-left: 1px solid #014e86;
    margin-bottom:0px;
}

.text-terapkan
{
    margin-top:5px;
    font-size:16px;
    background-color: #014e86;
    font-family:"Calibri";
    margin-bottom:0px;
    color: #fff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.text-terapkan:hover{
    color: #fff;
}

.text-diskusi
{
    margin-top:7px;
    font-size:25px;
    color:#014e86;
    font-weight:bold;
    font-family:"Calibri";
    margin-bottom:0px;
    border-bottom-style:solid;
}

.text-terbaru
{
	margin-top:1rem;
	font-size:20px;
	color:#014e86;
	font-weight:bold;
	font-family:"Calibri";
	margin-bottom:0px;
	border-bottom-style:solid;
	width:80px;
}

.catpro
{
	color:#014c85;
	font-weight:bold;
}

.id-twiter
{
	font-style:italic;
	color:#066cb6;
}

.text-footer-index
{
	border-right:2px solid #066cb6;
}

.card
{
	border-radius:10px;
	border-color:transparent;
}

.cate
{
	margin-bottom:8px;
}

.card-title
{
	margin-bottom:0px;
}

.ft
{
	color:#4f4f4f;
	font-size:19px;
	border-right:2px solid #066cb6;
}

.fts
{
	font-size:14px;
	border-right:2px solid #c2c2c2;
}

.fts-col
{
	color:#4c4a4d;
}

.mbnol
{
	margin-bottom:0px;
}

.oleh
{
	margin-bottom:-2px;
}

.gmbr
{
	margin-left:12%;
	margin-bottom:120%;
}

.badge-user {
  position: absolute;
  top: 23px;
  right:125px;
  padding: 4px 7px;
  border-radius: 50%;
  background-color: #be0000;
  color: white;
  border: 1px solid #afadae;
}

.badges {
  position: absolute;
  top: -15px;
  right:15px;
  padding: 7px 7px;
  border-radius: 50%;
  background-color: #ffffff;
  font-size:11px;
  text-align:center;
  color: #0099d2;
  border: 1px solid #0099d2;
}

#circle
{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
}

#circle li
{
    display:inline-block;
    vertical-align:top;
}

#circle li a
{
    display:block;
    width:120px;
    min-height:145px;
    border:1px solid #ccc;
    background:#fff;
    text-align:center;
    margin:0 2.5px 5px 2.5px;
    padding:10px 5px 0;
    color:#004E86;
}

#circle li a span
{
    display:block;
    margin-top:10px;
}

#circle-js
{
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    width:730px;
    margin:0 auto;
}

#circle-js li
{
    position:absolute;
}

#circle-js li a span
{
    display:none;
}

.sidenav{
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    height:100%;
    left:0;
    overflow-x:hidden;
    padding-top:60px;
    position:fixed;
    top:0;
    transition:.5s;
    width:0;
    z-index:1021;
}

.mySideMenu{
    background-color:#9edfdb;
    height:100%;
    overflow-x:hidden;
    padding-top:60px;
    position:fixed;
    left:0;
    top:0;
    transition:.5s;
    width:0;
    z-index:1022;
}

.mySideMenu .content-menu{
    color:#818181;
    display:block;
    font-size:25px;
    padding:8px 50px 8px 50px;
    text-decoration:none;
    transition:.3s;
}

.sidenavR{
    background-color:#9edfdb;
    height:100%;
    overflow-x:hidden;
    padding-top:60px;
    position:fixed;
    right:0;
    top:0;
    transition:.5s;
    width:0;
    z-index:1022;
}

.sidenavR .content-login{
    color:#818181;
    display:block;
    font-size:25px;
    padding:8px 50px 8px 50px;
    text-decoration:none;
    transition:.3s;
}

.sidenavR .closebtn:hover, .offcanvas a:focus{
    color:#f1f1f1;
    text-decoration: none;
}

.sidenavR .closebtn{
    position: absolute;
    top: 0px;
    right: 45px;
    font-size: 60px;
    color: #014e86;
}

.mySideMenu .closebtn:hover, .offcanvas a:focus{
    color:#f1f1f1;
    text-decoration: none;
}

.mySideMenu .closebtn{
    position: absolute;
    top: 0px;
    right: 45px;
    font-size: 60px;
    color: #014e86;
}

.item{
    border-radius:20px;
    padding-left: 5%;
    background-color: #e6f6f5;
    color:#4b4b4b;
    border-color: transparent;
}

.btnMasuk{
    border-radius:20px;
    background-color: #014e86;
    color:#ffffff;
    border-color: transparent;
}

.btnBantuan{
    border-radius:20px;
    background-color: transparent;
    color:#717171;
    border-color: #717171;
}

.btnBantuan:hover{
    color:#717171;
}

.btnDaftar{
    border-radius:20px;
    background-color: transparent;
    color:#024d87;
    border-color: #024d87;
}

.btnDaftar:hover{
    color:#024d87;
}

.btnKeluar{
    border-radius:20px;
    background-color: #014e86;
    color:#ffffff;
    border-color: transparent;
}

.btnKeluar:hover{
    color: #ffffff;
}

.imgs{
    display:inline-block;
    position:relative;
}

.imgs .sunting-foto{
    position: absolute;
    top: 30px;
    right: 40px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border: none;
    cursor: pointer;
    text-align: center;
}

.imgs .lup-foto{
    position: absolute;
    top: 30px;
    right: 0px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    border: none;
    cursor: pointer;
    text-align: center;
}

.card{
    width:100%;
}

.scroll{
    max-height: 500px;
}

.diskusi .list-group-item{
    border-color: transparent;
    background-color: transparent;
    padding:0px;
}

.diskusi .card-body{
    padding: 0px;
}

.card-footer{
    border-color: transparent;
    background-color: #efefef;
}

.card-footer:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.field{
    background-color: #f1f1f1;
    border-color: transparent;
    border-radius:10px;
}

.combo{
    margin-top: 7px;
}

.page-item .pej{
    border-color:transparent;
    background-color: #014e86;
    color: #7f8c94;
    padding-left: 0px;
}

.page-item a:hover{
    border-color:transparent;
    background-color: #014e86;
    color: #fff;
    text-decoration: underline;
}

.page-item .aktif{
    color: #fff;
    text-decoration: underline;
}

.page-item:nth-child(3) a{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 10px;
}

.page-item:nth-last-child(3) a{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-right: 10px;
}

.asd{
    background-color: #7c7c7c;
    border-color:transparent;
    color: #e2e2e2;
    border-radius:6px;
}

.semi-square {
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.styled-select {
    background: url("../img/app/cmb.png") no-repeat 100%;
    height: 24px;
    overflow: hidden;
    width: 200px;
    color: #e2e2e2;
    font-style: italic;
    background-size: 30px;
    margin-top:5px;
}

.styled-select select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 29px;
    padding: 5px; /* If you add too much padding here, the options won't show in IE */
    width: 240px;
    color: #e2e2e2;
    font-style: italic;
    padding-top: 1px;
}

.grey{
    background-color: #7c7c7c;
}

.flex-column {
    max-width: 260px;
}

.img {
    margin: 6px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

.d-flex .flex-column .la .hovereffect:last-child{
    display: none;
}