@font-face {
    font-family: 'Aileron';
    src: url("../fonts/aileron/Aileron-Regular.otf");
  }

  @font-face {
    font-family: 'Aileron-Bold';
    src: url("../fonts/aileron/Aileron-Bold.otf");
  }

.logo{
  width:70px;
  margin:0px 0px 45px 0px;
}

.box{
  width:250px;
  text-align:center;
  padding:30px;
  float:left;
  margin:10px;
  background:#A1CD95!important;
  border:#4C7043;
  color:#fff;
}

.box:hover{
  background:#4C7043 !important;
}

.check-group:hover{
  background:#A1CD95;
  cursor:pointer;
}
.check-group{
  padding:5px;
  border:#f0f0f0 1px solid;
}

.box h2{
  color:#fff;
}

.box i{
  font-size:40px;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica !important;}

h1{
  color:#1E4875 !important;
}
h1.service{
  color:#CC9F86 !important;
  font-size:43px;
}

.colorlib-quote{
  background: #A1CD95;
}

.nav-item .nav-link{
  color:#333;
}
.nav-item.active .nav-link{
  color:#A1CD95 !important;
}

.allpad{
  padding:40px 40px 0 40px;
}

.white{
  color:#fff;
}

.italic{
  font-style: italic;
}

.center{
  text-align:center;
}


.fixed{
  padding:10px;
  position: fixed;
  bottom:5%;
  right:10%;
  background-color: #A1CD95;
  z-index: 10001;
  text-align:center;
}

.fixed a{
  color:#fff;
  padding:10px;
}

.fixed a.active{
  color:#4C7043;
}

.top-menu{
  background-color:#A1CD95;
  color:#fff;
}
.top-menu a{
  margin-top:5px;
  font-size: 11px;
  color:#fff;
}
.action{
  background-color:#4C7043;
}
.action a{
  margin-top:5px;
  color:#fff;
  text-transform: capitalize;
}

.link-active{
  color:#4C7043 !important;
}
#filter .panel-body{
  padding:20px;
}

@media screen and (max-width: 460px) {
  .fixed{
    display: flex;
    justify-content: space-between;
    width:100%;
    bottom:-20px;
    left:0px;
  }
  .fixed .border{
    border-right:0.5px solid #fff;
  }
}

.order{
  opacity: 1 !important;
  border:1px solid #1E4875 !important;
}
.order span{
  background:#1E4875 !important;
  color:#fff !important;
}

.helpme {
  position: fixed;
  bottom: 80px;
  right: 30px;
  margin: 0.5em;
  z-index: 1000;
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

.animated-btn {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.btn-wa {
  border-radius: 50%;
  height: 60px;
  width: 60px;
  background-color: #4DC247;
  color: #ffffff;
  border: none;
  color: white;
  /* padding: 20px; */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

#singlemonth{
  position: absolute;
  top:0px;
  width:100%;
  height:100%;
  background-color: #f0f0f0;
  display: none;
}

.flex{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.flex img{
  margin:10px;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  width:150px;
}

.flex img:hover{
  margin:10px;
  box-shadow: 4px 4px #dadada;
}

.absolute-area{
  position: absolute;
  top:10px;
  right:20px;
  z-index:1001;
}

.snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #A1CD95;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 30%;
  bottom: 100px;
  font-size: 17px;
}

#lihat{
  background-color: #1E4875;
}

#peserta{
  background-color: #F2C36B;
}

#task{
  background-color: #F2C36B;
}

.snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 100px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 100px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 100px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 100px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
.arrow{
  display:none;
}
#mobile-action{
  display: none;
}
.mobile-view{
  display: none;
}
.window-view{
  display: block;
}
.slide-action{
  text-align:right;
  background-color: #fff;
}
.thislist{
  height: 35px;
  overflow: hidden;
  -webkit-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}
.up{
  display: none;
}

.project .desc span{
  color:#F3E8D0;
}

@media screen and (max-width: 460px) {
  .arrow{
    display: block;
    background-color:#FDC32F ;
    padding:12px;
    width:50px;
    height:50px;
    text-align: center;
    border-radius:100%;
    position: absolute;
    z-index:1001;
    bottom:150px;
    right:30px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }
  .blog-entry{
    text-align: center;
  }
  .text-menu{
    display: none;
  }
  #window-action{
    display: none;
  }
  #mobile-action{
    display: block;
  }
  .mobile-view{
    display: flex;
    justify-content: center;
  }
  .small-img{
    width:100px;
  }
  .window-view{
    display: none;
  }

  .window-only{
    display: none;
  }

  .list-article{
    border-bottom:2px solid #dadada;
  }

  .colorlib-nav-toggle{
    background-color: rgba(255,255,255,0.5);
  }

  .box {
    float: none;
    margin: 10px auto;
  }
}

li.done{
  background-color: #dadada;
}
li.done .list{
  text-decoration: line-through;
}

.btn-info{
  background:#1E4875;
  border:2px solid #1E4875;
}

.btn-green{
  background:#A1CD95;
  border:2px solid #A1CD95;
  color:#fff;
}

.btn-grey{
  background:#f0f0f0;
  border:2px solid #f0f0f0;
  color:#dadada;
}
.btn-green-dark{
  background:#4C7043;
  border:2px solid #f0f0f0;
  color:#fff;
}
.list{
  color:#333;
}
.panel-heading a.collapsed.bg-cream{
  background:#F5E6C6;
}


.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
  background:#1E4875;
  border:2px solid #1E4875;
}

.text-primary{
  background:#4C7043 !important;
}

a.text-primary:hover, a.text-primary:focus {
  color: #A1CD95;
}

.todo{
  padding:5px!important;
  height:30px !important;
  font-size:12px !important;
  text-transform: capitalize !important;
}
label{
  margin-top:10px;
}
.select2-container--default .select2-selection--single{
  border-color:#dadada !important;
  border-radius:0px !important;
}
.blog-entry .desc h3.article {
  max-height:50px;
}