html, body {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.8rem;
    /*letter-spacing: 0.5px;*/
}

body, .sticky-footer-wrapper {
    min-height:100vh;
 }

 /* BACKGROUNDS */
.bg-poly {
    background: url("../img/bg-polygon.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* FONTS */
.fnt-arial {
    font-family: Arial, sans-serif !important;
}

.fnt-roboto-ligth {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
}

.fnt-roboto-normal {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
}

.fnt-roboto-bold {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
}

.fnt-roboto-extrabold {
    font-family: 'Roboto' sans-serif !important;
    font-weight: 900 !important;
}

.fnt-anton {
    font-family: 'Anton', sans-serif !important;
}

@media only screen and (max-width: 500px) {
    .fnt-s1 {
        font-size: 0.8rem;
    }
    
    .fnt-s2 {
        font-size: 0.9rem;
    }
    
    .fnt-s3 {
        font-size: 1rem;
    }
}
@media only screen and (min-width: 900px) {
    .fnt-s1 {
        font-size: 1.1rem;
    }

    .fnt-s2 {
        font-size: 1.2rem;
    }

    .fnt-s3 {
        font-size: 1.3rem;
    }
}

/* TEXT */
.txt-Bold { font-weight: bold !important; }

.txt-Centered { text-align: center !important; }

.txt-Upper { text-transform: uppercase !important; }

.txt-Lower { text-transform: lowercase !important; }

.txt-Justify { text-align: justify !important; }

.txt-Shadow { text-shadow: 2px 2px 3px #888888 !important; }

.txt-Link { text-decoration: none !important; cursor: pointer !important; }

.txt-Nolink { text-decoration: inherit !important; cursor: default !important;}

/* TEXT COLOR */
.txt-Black { color: Black !important; }

.txt-Gray { color: Gray !important; }

.txt-Silver { color: Silver !important; }

.txt-LightGray { color: LightGray !important; }

.txt-WhiteSmoke { color: WhiteSmoke !important; }

.txt-White { color: White !important; }

.txt-Cyan { color: Cyan !important; }

.txt-DarkCyan { color: DarkCyan !important; }

.txt-LightBlue { color: LightBlue !important; }

.txt-LightSteelBlue { color: LightSteelBlue !important; }

.txt-SteelBlue { color: SteelBlue !important; }

.txt-Blue { color: Blue !important; }

.txt-Navy { color: Navy !important; }

.txt-LightSkyBlue { color: LightSkyBlue !important; }

.txt-Purple { color: Purple !important; }

.txt-Magenta { color: magenta !important; }

.txt-Maroon { color: Maroon !important; }

.txt-Red { color: Red !important; }

.txt-Tomato { color: Tomato !important; }

.txt-Orange { color: Orange !important; }

.txt-Gold { color: Gold !important; }

.txt-Yellow { color: Yellow !important; }

.txt-Green { color: Green !important;}

.txt-LimeGreen { color: LimeGreen !important; }

.txt-LightGreen { color: LightGreen !important; }

.txt-GreenYellow { color: GreenYellow !important;}

/* BORDER */
.border2-Red { border: 2px solid Red !important;}

.border2-Orange { border: 2px solid Orange !important;}

.border2-OrangeRed { border: 2px solid OrangeRed !important;}

.border2-Green { border: 2px solid Green !important;}

.border2-Blue { border: 2px solid Blue !important;}

.border2-Silver { border: 2px solid Silver !important;}

.border2-White { border: 2px solid White !important;}

/* BUTTON */
.btn-Enabled { cursor: pointer !important; }

.btn-Disabled { cursor: not-allowed !important; }

/* INPUTS */ 
.inpt-Txtlike { border: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; outline: none !important; background: transparent !important; width: 100% !important; }

/* COLORS */
.bg-SteelBlue { background-color: SteelBlue !important; }

.bg-Gainsboro { background-color: Gainsboro !important; }

.bg-Orange { background-color: Orange !important; }

.bg-Green { background-color: Green !important; }

.bg-Gray { background-color: Gray !important; }

.bg-WhiteSmoke { background-color: WhiteSmoke !important; }

/* IMAGES */
.wmark25 { opacity: .25 !important; }

.wnark50 { opacity: .50 !important; }

.wmark75 { opacity: .75 !important; }

/* INPUTS */
.select-sm {
    padding: 0 !important;
    height: 25px !important;
    margin: 0 !important;
    font-size: smaller !important;
}

.form-control-sm {
    height: 25px !important;
}


/* layout.html */
.flex-fill {
    flex:1 1 auto;
 }
 
.img-logoST {
    min-width: 70px;
    max-width: 90px;
}

.usrInfo:hover {
    text-decoration: none;
}

.usr-Photo {
    max-width: 30px;
    max-height: 30px;
}

.alertBadge {
    position: relative !important;
    bottom: 10px !important;
    right: 23px !important;
    width: 20px !important; 
    height: 20px !important;
}

.breadcrumb {
    background-color: rgba(0,0,0,0) !important;
}

/* default.html */
.bg-header {
    background: url("../img/bg-medical.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-bottom: 1px solid Silver;
    box-shadow: 0px 0px 5px Gray;
}

#card-login {
    max-width: 350px;
    min-width: 250px;
}


/* home.html */

a.link-card,
a.link-card:hover {
    color: inherit;
    text-decoration: none;
}

.app-card {
    border: 2px solid LightSkyBlue !important;
    border-color: LightSkyBlue !important;
    box-shadow: 0px 0px 5px Silver;
}
.app-card:hover {
    border: 2px solid LightGreen !important;
    border-color: LightGreen !important;
    cursor: pointer !important;
}


/* LOADER */

.loader {
    position: relative;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
    background: url("../img/logo-sst2.png") no-repeat center center;
    background-size: 30px;
  }
  
  .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;  
  }
  
  .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid SteelBlue;
  }
  
  .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid SteelBlue;
  }
  
  .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid SteelBlue;
  }
  
  @keyframes rotate-one {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }
  
  @keyframes rotate-two {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }
  
  @keyframes rotate-three {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }