.title-font {font-family: 'Fredoka One', cursive;}
.sub-title-font { font-family: 'Varela Round', sans-serif; } 
.logo-font {font-family: 'Fredoka One', cursive;}

.mouse-hover-pointer { cursor: pointer!important; }

.marker-font {font-family: 'Permanent Marker', cursive;}
blockquote {font-style: italic;  margin-left: 32px; font-family: Georgia, "Times New Roman", serif;}

.body-pt-60px { padding-top: 60px; }
.no-decoration { text-decoration: none !important; }
.strike { text-decoration: line-through; }

.table-fit { white-space: nowrap; width: 1%; }


.rounded-0 { border-radius:0!important; }
.rounded-top-right-0 { border-top-right-radius:0!important; }
.rounded-top-left-0 { border-top-left-radius:0!important; }
.rounded-bottom-right-0 { border-bottom-right-radius:0!important; }
.rounded-bottom-left-0 { border-bottom-left-radius:0!important; }

.shadow { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19)!important; }

.msg-icon { position: fixed; bottom: 20px; right: 20px; z-index:800; }
.msg-box { position: fixed; bottom: 100px; right: 0px; width: 400px; z-index:1040; } 
.msg-box-fullscreen { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; z-index:1040;}


/* #007bff */
.bg-primary-l50 { background-color: #ffffff!important; }
.bg-primary-l40 { background-color: #cce5ff!important; }
.bg-primary-l30 { background-color: #99caff!important; }                    
.bg-primary-l20 { background-color: #66b0ff!important; }
.bg-primary-l10 { background-color: #3395ff!important; }
.bg-primary-d10 { background-color: #0062cc!important; }
.bg-primary-d20 { background-color: #004a99!important; }
.bg-primary-d30 { background-color: #003166!important; }
.bg-primary-d40 { background-color: #001933!important; }


/* #868e96 */
.bg-secondary-l40 { background-color: #f3f4f5!important; }
.bg-secondary-l30 { background-color: #d8dadd!important; }                    
.bg-secondary-l20 { background-color: #bdc1c5!important; }
.bg-secondary-l10 { background-color: #a1a7ae!important; }
.bg-secondary-d10 { background-color: #6c747d!important; }
.bg-secondary-d20 { background-color: #555b61!important; }
.bg-secondary-d30 { background-color: #3d4146!important; }
.bg-secondary-d40 { background-color: #25282b!important; }
.bg-secondary-d50 { background-color: #0d0e10!important; }

.text-secondary-l40 { color: #f3f4f5!important; }
.text-secondary-l30 { color: #d8dadd!important; }                    
.text-secondary-l20 { color: #bdc1c5!important; }
.text-secondary-l10 { color: #a1a7ae!important; }
.text-secondary-d10 { color: #6c747d!important; }


/* #28a745 */
.bg-success-l50 { background-color: #d8f6df!important; }
.bg-success-l40 { background-color: #afecbd!important; }
.bg-success-l30 { background-color: #86e29b!important; }                    
.bg-success-l20 { background-color: #5dd879!important; }
.bg-success-l10 { background-color: #34ce57!important; }
.bg-success-d10 { background-color: #1e7e34!important; }
.bg-success-d20 { background-color: #145523!important; }
.bg-success-d30 { background-color: #0a2c12!important; }
.bg-success-d40 { background-color: #010201!important; }

/* #dc3545 */
.bg-danger-l40 { background-color: #fae3e5!important; }
.bg-danger-l30 { background-color: #f3b7bd!important; }                    
.bg-danger-l20 { background-color: #eb8c95!important; }
.bg-danger-l10 { background-color: #e4606d!important; }
.bg-danger-d10 { background-color: #bd2130!important; }
.bg-danger-d20 { background-color: #921925!important; }
.bg-danger-d30 { background-color: #66121a!important; }
.bg-danger-d40 { background-color: #3b0a0f!important; }
.bg-danger-d50 { background-color: #0f0304!important; }

/* #ffc107 */
.bg-warning-l40 { background-color: #fff4d3!important; }
.bg-warning-l30 { background-color: #ffe7a0!important; }                    
.bg-warning-l20 { background-color: #ffda6d!important; }
.bg-warning-l10 { background-color: #ffce3a!important; }
.bg-warning-d10 { background-color: #d39e00!important; }
.bg-warning-d20 { background-color: #a07800!important; }
.bg-warning-d30 { background-color: #6d5200!important; }
.bg-warning-d40 { background-color: #3a2b00!important; }
.bg-warning-d50 { background-color: #070500!important; }


/* #343a40 */
.bg-dark-l50 { background-color: #b2b9c1!important; }
.bg-dark-l40 { background-color: #96a0aa!important; }
.bg-dark-l30 { background-color: #7a8693!important; }
.bg-dark-l20 { background-color: #626d78!important; }
.bg-dark-l10 { background-color: #4b535c!important; }

/* #17a2b8 */
.bg-info-l25 { background-color: #63d9eb!important; }
.bg-info-l10 { background-color: #1fc8e3!important; }
.bg-info-d10 { background-color: #117a8b!important; }
.bg-info-d25 { background-color: #093e47!important; }

.wmax-1280 { max-width: 1280px; }
.wmax-1024 { max-width: 1024px; }
.wmax-800 { max-width: 800px; }
.wmax-600 { max-width: 600px; }
.wmax-550 { max-width: 550px; }
.wmax-500 { max-width: 500px; }
.wmax-400 { max-width: 400px; }
.wmax-300 { max-width: 300px; }
.wmax-200 { max-width: 200px!important; }
.wmax-150 { max-width: 150px; }
.wmax-100 { max-width: 100px; }

.wmin-800 { min-width: 800px; }
.wmin-600 { min-width: 600px; }
.wmin-400 { min-width: 400px; }
.wmin-350 { min-width: 350px; }
.wmin-300 { min-width: 300px; }
.wmin-200 { min-width: 200px; }
.wmin-160 { min-width: 160px; }
.wmin-110 { min-width: 110px; }
.wmin-100 { min-width: 100px; }
.wmin-50 { min-width: 50px; }


.hmax-100 { max-height: 100px; }

.vh-100{ min-height: 100vh; }
.vh-90{ min-height: 90vh; }
.vh-85{ min-height: 85vh; }
.vh-80{ min-height: 80vh; }
.vh-50{ min-height: 50vh; }

.vh-max-80{ max-height: 80vh; }
.vh-max-50{ max-height: 50vh; }

.op-0 { opacity: 0.0; }
.op-20 { opacity: 0.2; }
.op-40 { opacity: 0.4; }
.op-60 { opacity: 0.6; }
.op-80 { opacity: 0.8; }
.op-100 { opacity: 1.0; }


.algo { white-space:pre-wrap; font-family: "Lucida Console", Monaco, monospace; line-height: 300%;}


input:required:invalid { border: 1px solid red; }
input:required:valid { border: 1px solid green; }
select:required:invalid { border: 1px solid red; }
select:required:valid { border: 1px solid green; }
textarea:required:invalid { border: 1px solid red; }
textarea:required:valid { border: 1px solid green; }

/* Extra small device ( less than 576px) */
h1{ font-size: 1.4rem; }
h2{ font-size: 1.3rem; }
h3{ font-size: 1.2rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1.05rem; }
h6{ font-size: 1.0rem; }
.font-lg { font-size: 2.0rem; }
.font-md { font-size: 1.0rem; }
.font-sm { font-size: 0.8rem; }
.MathJax { font-size: 1.2rem!important; }
.MathJax_Display { font-size: 0.6rem; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    h1{ font-size: 2.2rem; }
    h2{ font-size: 1.5rem; }
    h3{ font-size: 1.4rem; }
    h4{ font-size: 1.3rem; }
    h5{ font-size: 1.2rem; }
    h6{ font-size: 1.0rem; }
    .font-lg { font-size: 2.2rem; }
    .font-md { font-size: 1.1rem; }
    .font-sm { font-size: 0.82rem; }
    /*.MathJax { font-size: 1.8rem!important; }*/
    .MathJax_Display { font-size: 1.0rem; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    h1{ font-size: 2.6rem; }
    h2{ font-size: 2.2rem; }
    h3{ font-size: 2.0rem; }
    h4{ font-size: 1.8rem; }
    h5{ font-size: 1.6rem; }
    h6{ font-size: 1.2rem; }
    .font-lg { font-size: 2.6rem; }
    .font-md { font-size: 1.4rem; }
    .font-sm { font-size: 0.85rem; }
/*    .MathJax { font-size: 2.0rem!important; } */
    .MathJax_Display { font-size: 1.6rem; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    h1{ font-size: 2.4rem; }
    h2{ font-size: 2.2rem; }
    h3{ font-size: 2.0rem; }
    h4{ font-size: 1.8rem; }
    h5{ font-size: 1.6rem; }
    h6{ font-size: 1.2rem; }
    .font-lg { font-size: 2.8rem; }
    .font-md { font-size: 1.4rem; }
    .font-sm { font-size: 0.88rem; }
/*    .MathJax { font-size: 2.2rem!important; } */
    .MathJax_Display { font-size: 2.0rem; }
    .card-columns{ column-count: 3; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    h1{ font-size: 2.6rem; }
    h2{ font-size: 2.2rem; }
    h3{ font-size: 2.0rem; }
    h4{ font-size: 1.8rem; }
    h5{ font-size: 1.6rem; }
    h6{ font-size: 1.1rem; }
    .font-lg { font-size: 3.4rem; }
    .font-md { font-size: 1.4rem; }
    .font-sm { font-size: 0.9rem; }
/*    .MathJax { font-size: 2.4rem!important; } */
    .MathJax_Display { font-size: 2.4rem; }
    .card-columns{ column-count: 3; }
}


.overlay 
{
    /*
    position: fixed;
    background: #e9e9e9; 
    display: none;
    position: absolute;
    top: 0;            
    right: 0;          
    bottom: 0;
    left: 0;
    opacity: 0.5;
    z-index: 1100;
    */
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background: #c0c0c0; 
    opacity: 0.5;
    /*background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1500; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.absoluteCenter 
{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

.btn-no-blue-border {
  outline: none !important;
  box-shadow: none !important;
}

.ui-autocomplete 
{
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}