/*================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.0
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================

NOTE:
------
PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/*-----------------------------------------
/* Custom Styles */
/* label{
  text-transform:uppercase !important;
} */

.d-flex{
	display: flex !important;
  }
  
  .justify-content-between{
	justify-content: space-between !important;
  }
  
  .align-items-center{
	align-items: center !important;
  }


      /* FILE UPLOAD STYLES */
	  .file-upload {
        max-width: 100%;
        margin: 0px auto 0 0px;
        padding: 20px;
    }

    .file-upload-btn {
        width: 100%;
        margin: 0;
        color: #fff;
        background: #1FB264;
        border: none;
        padding: 10px;
        border-radius: 4px;
        border-bottom: 4px solid #15824B;
        transition: all .2s ease;
        outline: none;
        text-transform: uppercase;
        font-weight: 700;
    }

    .file-upload-btn:hover {
        background: #1AA059;
        color: #ffffff;
        transition: all .2s ease;
        cursor: pointer;
    }

    .file-upload-btn:active {
        border: 0;
        transition: all .2s ease;
    }

    .file-upload-content {
        display: none;
        text-align: center;
    }

    .file-upload-input {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        outline: none;
        opacity: 0;
        cursor: pointer;
    }

    .image-upload-wrap {
        margin-top: 20px;
        border: 4px dashed #1FB264;
        position: relative;
    }

    .image-dropping,
    .image-upload-wrap:hover {
        background-color: #1FB264;
        border: 4px dashed #ffffff;
    }

    .image-title-wrap {
        padding: 0 15px 15px 15px;
        color: #222;
    }

    .drag-text {
        text-align: center;
    }

    .drag-text h3 {
        font-weight: 100;
        text-transform: uppercase;
        color: #15824B;
        padding: 60px 0;
    }

    .file-upload-image {
        max-height: 100px;
        max-width: 100px;
        margin: auto;
        padding: 20px;
    }

    .remove-image {
        width: 200px;
        margin: 0;
        color: #fff;
        background: #cd4535;
        border: none;
        padding: 10px;
        border-radius: 4px;
        border-bottom: 4px solid #b02818;
        transition: all .2s ease;
        outline: none;
        text-transform: uppercase;
        font-weight: 700;
    }

    .remove-image:hover {
        background: #c13b2a;
        color: #ffffff;
        transition: all .2s ease;
        cursor: pointer;
    }

    .remove-image:active {
        border: 0;
        transition: all .2s ease;
    }




    /* MODAL */
    .modal{
        background-color: transparent !important;
        box-shadow: none !important;
    }


    /*  */
    ul.side-nav.leftside-navigation li.user-details{
        background: #2E3094 !important;
    }

    .navbar-color{
        background-color: #fff;
        color: #00A54F;
    }

    .input.header-search-input{
        background: #00a54f45 !important;
    }





    /* Custom notificaions */

    .icon-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	color: #333333;
	background: #dddddd;
	border: none;
	outline: none;
	border-radius: 50%;
}

.material-icons {
	font-size: 25px !important;
}

.icon-button:hover {
	cursor: pointer;
	background: #cccccc;
}

.icon-button:active {
	background: #6a6a6a;
}

.icon-button__badge {
	font-size: 10px;
	position: absolute;
	top: -5px;
	right: -10px;
	width: 20px;
	height: 20px;
	background: red;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}




.dropdown-menu{
  position: absolute;
  width: 265px;
  max-height: 500px;
  overflow-y: scroll;
  inset: 0px auto auto -131px;
  margin: 0px;
  transform: translate3d(-96px, 52px, 0px);
}





.top-text-block{
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: inherit !important;
  border-bottom:1px solid #f4f4f4;
  position:relative;
  &:hover {
        &:before {
        content: '';
        width: 4px;
        background: #f05a1a;
        left: 0;
        top: 0;
        bottom: 0;
        position: absolute;
    }
  }
  &.unread {
    background:#ffc;
    
     &:hover {
      background:#ffd;
    }
  }
  
  .top-text-light {
     color:#ccc;
    color: #999;
    font-size: 0.8em;
  }
}   

.top-head-dropdown {
  .dropdown-menu {
   width: 350px;
    height:300px;
    overflow:auto;
  }
  
  li:last-child{
    .top-text-block {
      border-bottom:0;
    }
  }
}
.topbar-align-center {
  text-align: center;
}


.loader-topbar {
  margin: 5px auto;
  border: 3px solid #ddd;
  border-radius: 50%;
  border-top: 3px solid #666;
  width: 22px;
  height: 22px;
  -webkit-animation: spin-topbar 1s linear infinite;
  animation: spin-topbar 1s linear infinite;
}

@-webkit-keyframes spin-topbar {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin-topbar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}