/*
@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?11489864');
    src: url('../font/fontello.eot?11489864#iefix') format('embedded-opentype'),
    url('../font/fontello.woff?11489864') format('woff'),
    url('../font/fontello.ttf?11489864') format('truetype'),
    url('../font/fontello.svg?11489864#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: "fontello";
    src: url("/assets/fonts/fontello.woff2") format("woff2");
}

body {
    margin: 0;
    font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    text-align: left;
    background-color: #f8f9fc;
    color: #858796;
}

a {
    color: #4e73df;
    text-decoration: none;
    background-color: transparent;
}

/* ============
ICON
============== */
* {
    box-sizing: border-box;
}

.my-icon
{
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* You can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/* ================
Responsive Layout
================= */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5em;
    text-align: center;
}

.flex-item-left {
    /* background-color: #f1f1f1; */
    padding: 0.5em;
    flex: 50%;
}

.flex-item-right {
    /* background-color: dodgerblue; */
    padding: 0.5em;
    flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
    .flex-item-right, .flex-item-left {
        flex: 100%;
    }
}

/* ================
Card
 */
*, ::after, ::before {
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -.75rem;
    margin-left: -.75rem;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}

.mb-auto, .my-auto {
    margin-bottom: auto!important;
}
.mt-auto, .my-auto {
    margin-top: auto!important;
}







.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
}
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.text-gray-300 {
    color: #dddfeb!important;
}
*, ::after, ::before {
    box-sizing: border-box;
}

.border-left-primary {
    border-left: .25rem solid #4e73df!important;
}
.border-left-success {
    border-left: .25rem solid #1cc88a!important;
}
.border-left-info {
    border-left: .25rem solid #36b9cc!important;
}
.border-left-warning {
    border-left: .25rem solid #f6c23e!important;
}
.pb-2, .py-2 {
    padding-bottom: .5rem!important;
}
.pt-2, .py-2 {
    padding-top: .5rem!important;
}
.h-100 {
    height: 100%!important;
}
. {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}
.align-items-center {
    align-items: center!important;
}
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}


.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}
.mr-2, .mx-2 {
    margin-right: .5rem!important;
}

.text-xs {
    font-size: .7rem;
}
.text-primary {
    color: #4e73df!important;
}
.text-success {
    color: #1cc88a!important;
}
.text-info {
    color: #36b9cc!important;
}
.text-warning {
    color: #f6c23e!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.dropdown .dropdown-menu .dropdown-header, .sidebar .sidebar-heading, .text-uppercase {
    text-transform: uppercase!important;
}
.mb-1, .my-1 {
    margin-bottom: .25rem!important;
}
.mb-4, .my-4 {
    margin-bottom: 1.5rem!important;
}
.mr-3, .mx-3 {
    margin-right: 1rem!important;
}
.card-header:first-child {
    border-radius: calc(.35rem - 1px) calc(.35rem - 1px) 0 0;
}
.text-center {
    text-align: center!important;
}
.pb-3, .py-3 {
    padding-bottom: 1rem!important;
}
.pt-3, .py-3 {
    padding-top: 1rem!important;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}
.text-gray-800 {
    color: #5a5c69!important;
}
.text-gray-300 {
    color: #dddfeb!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.mb-0, .my-0 {
    margin-bottom: 0!important;
}
.h5, h5 {
    font-size: 1.25rem;
}
.text-left{
    text-align: left;
}
.m-0 {
    margin: 0!important;
}
.h6, h6 {
    font-size: 1rem;
}
.ml-auto, .mx-auto {
    margin-left: auto!important;
}
.mr-auto, .mx-auto {
    margin-right: auto!important;
}
.d-block {
    display: block!important;
}
.rounded {
    border-radius: .35rem!important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
img {
    vertical-align: middle;
    border-style: none;
}
.biglink {
    color: rgb(18, 89, 207);
    font-weight: bold;
    text-decoration: underline;
    text-shadow: 0px 1px 4px rgb(255 255 255 / 40%);

}
.biglink img {
    width: 80px;
    -webkit-filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.6));
    filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.6));
    margin-bottom: 1em;;
}
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #eaecf4;
    border-radius: .35rem;
}
.progress-sm {
    height: .5rem;
}
.bg-info {
    background-color: #36b9cc!important;
}
.bg-warning {
    background-color: #f6c23e!important;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #4e73df;
    transition: width .6s ease;
}
@media (prefers-reduced-motion: reduce){
    .progress-bar {
        transition: none;
    }
}


footer{
    display: block;
}
.bg-white {
    background-color: #fff!important;
}

footer.sticky-footer {
    padding: 2rem 0;
    flex-shrink: 0;
}

footer.sticky-footer .copyright {
    line-height: 1;
    font-size: .8rem;
}


.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
}

.navbar-expand {
    flex-flow: row nowrap;
    justify-content: flex-start;
}
.topbar {
    height: 4.375rem;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: 400;
    line-height: 1.2;
}
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    /*font-size: 1.25rem;*/
    line-height: inherit;
    white-space: nowrap;
}

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}

.navbar-expand .navbar-nav {
    flex-direction: row;
}

.d-none {
    display: none!important;
}
@media (min-width: 576px){
    .d-sm-block {
        display: block!important;
    }
}


.topbar .topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(4.375rem - 2rem);
    margin: auto 1rem;
}

.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}

.topbar .dropdown {
    position: static;
}

@media (min-width: 576px){
    .topbar .dropdown {
        position: relative;
    }
}

[role=button] {
    cursor: pointer;
}

.dropdown-toggle {
    white-space: nowrap;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}


.navbar-expand .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}


.sidebar .nav-item .nav-link, .topbar .nav-item .nav-link {
    position: relative;
}

.topbar .nav-item .nav-link {
    height: 4.375rem;
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #d1d3e2;
}


img {
    vertical-align: middle;
    border-style: none;
}

.rounded-circle {
    border-radius: 50%!important;
}

.sidebar .nav-item .nav-link .img-profile, .topbar .nav-item .nav-link .img-profile {
    height: 2rem;
    width: 2rem;
}

.small, small {
    font-size: 80%;
    font-weight: 400;
}

@media (min-width: 992px){
    .d-lg-inline {
        display: inline!important;
    }
}


.mr-2, .mx-2 {
    margin-right: .5rem!important;
}

.text-gray-600 {
    color: #858796!important;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: .85rem;
    color: #858796;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    opacity:0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.shadow {
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}

.animated--grow-in, .sidebar .nav-item .collapse {
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-timing-function: transform cubic-bezier(.18,1.25,.4,1),opacity cubic-bezier(0,1,.4,1);
    animation-timing-function: transform cubic-bezier(.18,1.25,.4,1),opacity cubic-bezier(0,1,.4,1);
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none;
}

.dropdown .dropdown-menu {
    font-size: .85rem;
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute;
}

.topbar .dropdown .dropdown-menu {
    width: calc(100% - 1.5rem);
    right: .75rem;
}

@media (min-width: 576px){
    .topbar .dropdown .dropdown-menu {
        width: auto;
        right: 0;
    }

}


.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #3a3b45;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}


form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

/* Style the submit button */
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

/* Clear floats */
form.example::after {
  content: "";
  clear: both;
  display: table;
}