.bg-darkteal
{
    background-color: #007062 !important;
}

.bg-lightteal
{
    background-color: #00eacd !important;
}

.bg-midteal
{
    background-color: #009885 !important;
}

/* Buttons */
.btn-lightteal
{
    background-color: #00eacd;
    color: #000;
}

.btn-lightteal:hover
{
    background-color: #00dbc0;
    color: #000;
}

.btn-darkteal
{
    background-color: #009885;
    color: #fff;
}

.btn-darkteal:hover
{
    background-color: #007062;
    color: #fff;
}

.attendanceform-container .btn, .login-container .btn
{
    padding: 12px;
    font-size: 1rem;
    width: 100%;
}

table.calendar { width:100%; border-collapse: collapse; }
table.calendar th, table.calendar td { border:1px solid #ddd; text-align:center; padding:10px; }
table.calendar th { background:#f4f4f4; }
table.calendar td.empty { background:#f9f9f9; }
table.calendar a { display:block; color:#ffffff; text-decoration:none; font-weight:bold; }


.ui-autocomplete {
  z-index: 9999 !important;
}

#soa-account-header
{
    top: 72px;
    padding-top: .5rem;
    background-color: #f8f9fa;
}

#soa-account-header button
{
    font-weight: bold;
    padding:16px;
    width:100%;
}


/* Responsive */

/* X-Small devices (portrait phones, less than 576px) */
body
{
  background-color: #fff;
}

.login-container, .attendanceform-container
{
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255,255,255,0);
}

.login-container img, .attendanceform-container img
{
    max-width: 300px;
}

.dashboard-items
{
    margin: 15px 0;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px)
{
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{
    body
    {
      background-color: #f8f9fa;
    }

    .login-container, .attendanceform-container
    {
      max-width: 400px;
      margin: 80px auto;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    .login-container img, .attendanceform-container img
    {
        max-width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px)
{
    
}