/*--------------------------------

hermes-dashboard-icons Web Font - built using nucleoapp.com
License - nucleoapp.com/license/

-------------------------------- */
@font-face {
  font-family: 'NucleoIcons';
  src: url('../fonts/nucleo-icons.eot');
  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), url('../fonts/nucleo-icons.woff2') format('woff2'), url('../fonts/nucleo-icons.woff') format('woff'), url('../fonts/nucleo-icons.ttf') format('truetype'), url('../fonts/nucleo-icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*------------------------
    base class definition
-------------------------*/
.ni {
  display: inline-block;
  font: normal normal normal 14px/1 NucleoIcons;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*------------------------
  change icon size
-------------------------*/
.ni-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.ni-2x {
  font-size: 2em;
}

.ni-3x {
  font-size: 3em;
}

.ni-4x {
  font-size: 4em;
}

.ni-5x {
  font-size: 5em;
}

/*----------------------------------
  add a square/circle background
-----------------------------------*/
.ni.square,
.ni.circle {
  padding: 0.33333333em;
  vertical-align: -16%;
  background-color: #eee;
}

.ni.circle {
  border-radius: 50%;
}

/*------------------------
  list icons
-------------------------*/
.ni-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}

.ni-ul>li {
  position: relative;
}

.ni-ul>li>.ni {
  position: absolute;
  left: -1.57142857em;
  top: 0.14285714em;
  text-align: center;
}

.ni-ul>li>.ni.lg {
  top: 0;
  left: -1.35714286em;
}

.ni-ul>li>.ni.circle,
.ni-ul>li>.ni.square {
  top: -0.19047619em;
  left: -1.9047619em;
}

/*------------------------
  spinning icons
-------------------------*/
.ni.spin {
  -webkit-animation: nc-spin 2s infinite linear;
  -moz-animation: nc-spin 2s infinite linear;
  animation: nc-spin 2s infinite linear;
}

@-webkit-keyframes nc-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes nc-spin {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@keyframes nc-spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*------------------------
  rotated/flipped icons
-------------------------*/
.ni.rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.ni.rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ni.rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.ni.flip-y {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.ni.flip-x {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  transform: scale(1, -1);
}

.bg-login-head {
  background-image:linear-gradient(195deg,#4eb496,#057050)
}

.bg-login-btn {
  background-image:linear-gradient(195deg,#f5c172,#ff9900)
}

.bg-login-btn:hover {
  background-image:linear-gradient(195deg,#ffa115,#eb8d00)
}

.bg-gradient-tosca {
  background-image: linear-gradient(195deg, #4eb496 0%, #057050 100%);
}

.bg-gr-pink {
  background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%);
}

.bg-gradient-orange {
  background-image: linear-gradient(195deg, #ffa115 0%, #eb8d00 100%);
}

.bg-gradient-orange2 {
  background-image: linear-gradient(195deg, #ff5125 0%, #ff3300 100%);
}

.nav-link.active {
  background-image: linear-gradient(195deg, #4eb496 0%, #057050 100%);
}

.btn-gr-tosca{
  box-shadow: 0 2px 2px 0 rgba(5,112,80, 0.1), 0 3px 1px -2px rgba(5,112,80, 0.18), 0 1px 5px 0 rgba(5, 112, 80, 0.15);
  background-image: linear-gradient(195deg,  #4eb496 0%, #057050 100%);
  margin: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}
.btn-gr-tosca:hover{
  margin: 2px;
  text-align: center;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
  box-shadow: 0 8px 14px -8px rgba(5,112,80, 0.3), 0 3px 18px 0 rgba(5,112,80, 0.1), 0 7px 8px -4px rgba(5,112,80, 0.18);
}

.btn-gr-dark{
  box-shadow: 0 2px 2px 0 rgba(46,46,46, 0.1), 0 3px 1px -2px rgba(46,46,46, 0.18), 0 1px 5px 0 rgba(46,46,46, 0.15);
  background-image: linear-gradient(195deg,  #c5c5c5 0%, #3b3b3b 100%);
  margin: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}
.btn-gr-dark:hover{
  box-shadow: 0 8px 14px -8px rgba(46,46,46, 0.3), 0 3px 18px 0 rgba(46,46,46, 0.1), 0 7px 8px -4px rgba(46,46,46, 0.18);
  margin: 2px;
  text-align: center;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}

.btn-gr-orange{
  box-shadow: 0 2px 2px 0 rgba(255,153,0, 0.1), 0 3px 1px -2px rgba(255,153,0, 0.18), 0 1px 5px 0 rgba(255,153,0, 0.15);
  background-image: linear-gradient(195deg,  #f5c172 0%, #eb8d00 100%);
  margin: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}
.btn-gr-orange:hover{
  margin: 2px;
  text-align: center;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
  box-shadow: 0 8px 14px -8px rgba(255,153,0, 0.3), 0 3px 18px 0 rgba(255,153,0, 0.1), 0 7px 8px -4px rgba(255,153,0, 0.18);
}


.bg-gradient-lightgreen {
  background-image: linear-gradient(195deg, #4eb45f 0%, #028032 100%);
}
.btn-gr-lightgreen{
  box-shadow: 0 2px 2px 0 rgba(5,112,80, 0.1), 0 3px 1px -2px rgba(5,112,80, 0.18), 0 1px 5px 0 rgba(5,112,80, 0.15);
  background-image: linear-gradient(195deg,  #4eb45f 0%, #028032 100%);
  margin: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}
.btn-gr-lightgreen:hover{
  margin: 2px;
  text-align: center;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
  box-shadow: 0 8px 14px -8px rgba(5, 112, 41, 0.3), 0 3px 18px 0 rgba(5, 112, 41, 0.1), 0 7px 8px -4px rgba(5, 112, 41, 0.18);
}




.bg-gradient-lightgreen {
  background-image: linear-gradient(195deg, #4eb45f 0%, #028032 100%);
}

.btn-gr-lightgreen{
  box-shadow: 0 2px 2px 0 rgba(5,112,80, 0.1), 0 3px 1px -2px rgba(5,112,80, 0.18), 0 1px 5px 0 rgba(5,112,80, 0.15);
  background-image: linear-gradient(195deg,  #4eb45f 0%, #028032 100%);
  margin: 2px;
  text-align: center;
  /* text-transform: uppercase; */
  transition: 0.5s;
  background-size: 200% auto;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
}
.btn-gr-lightgreen:hover{
  margin: 2px;
  text-align: center;
  color: rgb(255, 255, 255);            
  border-radius: 0.5rem;
  box-shadow: 0 8px 14px -8px rgba(5, 112, 41, 0.3), 0 3px 18px 0 rgba(5, 112, 41, 0.1), 0 7px 8px -4px rgba(5, 112, 41, 0.18);
}

/* all icon font classes list here */