a {
    list-style: none;
    text-decoration: none;
}
a:hover {
    color: rgb(14, 8, 70);
}

.nav-back-button {
    background-color: rgb(13 110 253 / 14%);
    padding: 0 14px;
    border-radius: 50px;
}
.nav-back-button:hover{
    background-color: #578df7a4;
}

.icon-home hr {
    margin: 5px;
}
.icon-home h4 {
    font-size: 12px;
    color: #adadad;
}
.opnam-progress progress#file {
    width: 56px;
}

.icon-home i {
    font-size: 28px;
    color: #334678;
}


.icon-home p {
    font-size: 12px;
    color: gray;
}
.bg-icon-home {
    background-color: #0055ff2e;
    width: 52px;
    margin: 6px auto;
    height: 52px;
    border-radius: 20px;
}
.bg-icon-home:hover {
    background-color: #578df7a4;
}



/* Spinner Loading  */

.loading {
    z-index: 9999;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.loading-content {
    position: absolute;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 40%;
    margin: 0 auto;
    left: 43%;
    right: 43%;
    animation: spin 2s linear infinite;
}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

.maintenance img {
    max-width: 100%;
    margin: 48px 0;
}

a li:hover{
    background-color: #ebebeb;
}

.form-label {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

input.form-zw-checkbox {
    width: 38px;
    height: 20px;
}


.account-icon-home img {
    width: 39px;
    height: 39px;
    border-radius: 50px;
    margin-top: -10px;
}

.account-icon-home {
    width: 39px;
    height: 39px;
    border-radius: 50px;
}

.my-profile-img img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
    width: 200px;
}

.bg-icon-edit.text-center {
    margin-top: -38px;
    margin-left: 149px;
}


.modal-body img {
    margin: 0 auto;
    display: grid;
}

.badge:hover {
    background-color: gray !important;
}

.text-light-gray {
    color: #cccccc;
}

.my-bg-light-primary{
    background-color: #47B5FF;
}
.my-bg-very-light{
    background-color: #e1edff;
}

.top-section{
    border-radius: 0 0 10px 10px;
}

.feature-section-1{
    margin-top: -80px;
}


/* Minimalis preloader */

.linePreloader {
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,#578df7a4,#0d6efd);
    background-color: #ccc;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 4px;
    background-size: 20%;
    background-repeat: repeat-y;
    background-position: -25% 0;
    animation: scroll 1.2s ease-in-out infinite;
    z-index: 9999;
    }
  
  @keyframes scroll{
    50%{background-size:80%}
    100%{background-position:125% 0;}
  }


  .updated-container {
    position: fixed;
    z-index: 2000;
    min-height: 100%;
    background-color: white;
    width: 100%;
}

.project-folder img {
    width: 90%;
    display: block;
    margin: auto;
    filter: hue-rotate(25deg);
}
.project-folder img:hover{
    cursor: pointer;
    transform: scale3d(.9, .9, 1.9);
    opacity: 0.7;
}

.project-folder-sm img {
    width: 32px;
    filter: hue-rotate(25deg);
}

.tr-hover:hover{
    background-color: #ebebeb;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  /* display: inline-block; */
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

img.img-preview {
    min-width: 100%;
    margin-bottom: 14px;
}



/* Clear floats after the columns */
.myrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Create two equal columns that floats next to each other */
.col2 {
  float: left;
  width: 50%;
}
.col3 {
  float: left;
  width: 33.33%;
}
.col4 {
  float: left;
  width: 25%;
}


.input-material-keluar button {
    width: 100%;
    margin: 0 28px;
}