@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

.bg-gradient {
    background: linear-gradient(
                 -35deg, 
                 transparent 40%,
                 #fff 40%,
                 #039be5 60%,
                 transparent 60%);
}


.hoverable {
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
}

.hoverable:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.z-depth-0 {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/* 2dp elevation modified*/
.z-depth-1, nav, .card-panel, .card-, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

/* 6dp elevation modified*/
.z-depth-2 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* 12dp elevation modified*/
.z-depth-3 {
  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

/* 16dp elevation */
.z-depth-4 {
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
}

/* 24dp elevation */
.z-depth-5, .modal {
  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}

.gold-color{

   color: #EEE8AA!important;
}

a{
  text-decoration: none;

}

.color {
   color: #039be5     !important;
}
.bg{
  background-color: #039be5    !important;
  color: white;
}

.text.with-icon i {
  vertical-align: middle;
  font-size: inherit;
}
.scale-on-hover:hover{
  transform: scale(0.98);
  transition: all 0.5s ease-in;
}

.center{
  align-items: center;
  align-content: center;
  text-align: center;
}
.no-shadow{
  box-shadow: none!important;
}

.text-shadow {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  text-rendering: optimizeLegibility;
}
.elegantshadow {
  color: #131313;
  background-color: #e7e5e4;
  letter-spacing: 0.15em;
  text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
.deepshadow {
  color: #e0dfdc;
  background-color: #333;
  letter-spacing: 0.1em;
  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
.insetshadow { 
  letter-spacing: 0.1em;
  text-shadow: -1px -1px 1px #009688, 2px 2px 1px #666;
}
.retroshadow {
  color: #2c2c2c;
  background-color: #d5d5d5;
  letter-spacing: 0.05em;
  text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
}
.gradient-1 {
  background: rgb(0,150,136);
  background: linear-gradient(19deg, rgba(50,212,255,1) 0%, rgba(90,150,121,1) 35%, rgba(0,212,255,1) 100%)!important;
}
.bold{
   font-weight: bold!important;
}
.border.px-1{
  border: 1px solid teal;
}

.text-large{
   font-size: 60px!important;
}

.text-medium{
   font-size: 40px!important;
}


.text-extra-large{
   font-size: 90px!important;
}

.text-success {
   color: #00c853!important;
}

.text-pending {
   color: #f9a825   !important;
}

.text-error {
   color: #e64a19   !important;
}

.text-justify, .justify {
   text-align: justify   !important;
}

.border-pending{
   border: 2px solid #f57f17 !important;
}

.border-success{
   border: 2px solid #00c853 !important;
}
.bg-transparent {
   background-color: transparent!important;
}

.bg-white {
   background-color: white!important;
}
.white-text {
   color: white!important;
}
.bg-light {
   background-color: #eee!important;
}
.no-border{
  border: none!important;
}
.margin-bottom{
  margin-bottom: 10px;
}
.underline{
  text-decoration: underline;
}
.text-shadow{
  text-shadow: 1px 1px 1px rgb(80,80,80);
}

.force-left *{
   text-align: left!important; 
}

.no-radius{
   border-radius: 0px!important;
}
 

/* DEMO-SPECIFIC STYLES */
.typewriter .animate { 
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid black; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */ 
  animation: 
    typing 2.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield!important;
}

.no-outline {
   outline: none!important;
}

.no-border:focus{
  border: none!important;
}

.no-outline:focus{
  outline: none!important;
}

::-webkit-input-placeholder { /* Edge */
  color:#039be5!important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #039be5!important;
}

::placeholder {
  color: #039be5!important;
}

.iti > * {
  border: 0px solid white!important;
}

.swal2-container {
  background: #fff!important;
  overflow: hidden;
}

.swal2-container:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #039be5;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
  transform-origin: bottom;
}