/**************************** Variables *****************************/
/* These are used throughout the CSS to keep color declarations in one spot */
:root {
    --green: #019C4F;
    --forest: #225442;
    --lime: #B1CD0A;
    --orange: #FFAC12;
    --blue: #0087C8;
    --white: #ffffff;
    --black: #000000;
    --lightgrey: #cfcfcf;
    --almostwhite: #f2f2f2;
    --darkgrey: #272727;
    --purple: #0A1929;
    --red: #BE2828;

    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 25px;
}
/**************************** Site Color Classes *****************************/

/************* Background Classes *************/
/* These classes change the background of an element */
.bg-green{
    background-color: var(--green);
    color:var(--white);
}
.bg-orange{
    background-color: var(--orange);
    color:var(--white);
}
.bg-forest{
    background-color: var(--forest);
    color:var(--white);
}
.bg-lime{
    background-color: var(--lime);
    color:var(--white);
}
.bg-blue{
    background-color: var(--blue);
    color:var(--white);
}
.bg-white{
    background-color: var(--white);
    color:var(--black);
}
.bg-black{
    background-color: var(--black);
    color:var(--white);
}
.bg-purple{
    background-color: var(--purple);
    color:var(--white);
}
.bg-darkgrey{
    background-color: var(--darkgrey);
    color:var(--white);
}
.bg-lightgrey{
    background-color: var(--lightgrey);
    color:var(--white);
}
.bg-red{
    background-color: var(--red);
    color:var(--white);
}

/* the .bg-has-image class gives a semi-transparent overlay above the background image */
/* See HTML Example:
    <section class="two-col-callouts">
        <div class="container bg-darkgrey bg-has-image" style="background-image: url(...);">
            ... Content ... 
        </div>
    </section>
*/
.bg-has-image {
    position: relative;
    overflow: hidden;
    background-size: cover;
}
.bg-has-image::before {
    content:" ";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: .92;
    z-index: 0;
}
.bg-has-image * {
    position: relative;
    z-index: 1;
}

/* the .bg-has-image color classes determine the overlay color of the background image */
.bg-has-image.bg-darkgrey::before {
    background-color: var(--darkgrey);
}
.bg-has-image.bg-green::before{
    background-color: var(--green);
}
.bg-has-image.bg-orange::before{
    background-color: var(--orange);
}
.bg-has-image.bg-forest::before{
    background-color: var(--forest);
}
.bg-has-image.bg-lime::before{
    background-color: var(--lime);
}
.bg-has-image.bg-blue::before{
    background-color: var(--blue);
}
.bg-has-image.bg-white::before{
    background-color: var(--white);
}
.bg-has-image.bg-black::before{
    background-color: var(--black);
}
.bg-has-image.bg-purple::before{
    background-color: var(--purple);
}
.bg-has-image.bg-darkgrey::before{
    background-color: var(--darkgrey);
}
.bg-has-image.bg-lightgrey::before{
    background-color: var(--lightgrey);
}
.bg-has-image.bg-red::before{
    background-color: var(--red);
}

/************* Font Color Classes *************/
/* These classes change font colors */
.green{
    color: var(--green);
}
.forest{
    color: var(--forest);
}
.lime{
    color: var(--lime);
}
.orange{
    color: var(--orange);
}
.red{
    color: var(--red);
}
.blue{
    color: var(--blue);
}
.white{
    color: var(--white);
}
.black{
    color: var(--black);
}
.purple{
    color: var(--purple);
}
.darkgrey{
    color: var(--darkgrey);
}
.lightgrey{
    color: var(--lightgrey);
}
.red{
    color: var(--red);
}

/************* Rounded Corner Classes *************/
/* These classes change the rounded corner of objects */
/* See HTML Example:
    <div class="radius-md">
        ... Content ... 
    </div>
*/
.radius-sm {border-radius: var(--radius-sm);}
.radius-md {border-radius: var(--radius-md);}
.radius-lg {border-radius: var(--radius-lg);}

/************* Margin/Padding Classes *************/
/* These classes change spacing of elements *
m = margin
p = padding
t = top
b = bottom
v = vertical (top/bottom)
h = horizontal (left/right)
sm = small
md = medium
lg = large
xl = extra large
*/
.m-sm {margin:15px;}
.m-md {margin:25px;}
.m-lg {margin:35px;}
.m-xl {margin:50px;}
.m-t-sm {margin-top: 15px;}
.m-t-md {margin-top: 25px;}
.m-t-lg {margin-top: 35px;}
.m-t-xl {margin-top: 50px;}
.m-b-sm {margin-bottom: 15px;}
.m-b-md {margin-bottom: 25px;}
.m-b-lg {margin-bottom: 35px;}
.m-b-xl {margin-bottom: 50px;}
.m-v-sm {margin-top: 15px;margin-bottom: 15px;}
.m-v-md {margin-top: 25px;margin-bottom: 25px}
.m-v-lg {margin-top: 35px;margin-bottom: 35px}
.m-v-xl {margin-top: 50px;margin-bottom: 50px}
.m-h-sm {margin-left: 15px;margin-right: 15px;}
.m-h-md {margin-left: 25px;margin-right: 25px;}
.m-h-lg {margin-left: 35px;margin-right: 35px;}
.m-h-xl {margin-left: 50px;margin-right: 50px;}

.p-sm {padding:15px;}
.p-md {padding:25px;}
.p-lg {padding:35px;}
.p-xl {padding:50px;}
.p-v-sm {padding-top: 15px;padding-bottom: 15px;}
.p-v-md {padding-top: 25px;padding-bottom: 25px}
.p-v-lg {padding-top: 35px;padding-bottom: 35px}
.p-v-xl {padding-top: 50px;padding-bottom: 50px}
.p-h-sm {padding-left: 15px;padding-right: 15px;}
.p-h-md {padding-left: 25px;padding-right: 25px;}
.p-h-lg {padding-left: 35px;padding-right: 35px;}
.p-h-xl {padding-left: 50px;padding-right: 50px;}


/* General styles for the text and headlines */ 
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6em;
    font-size: 16px;
    font-weight: 300;
    color: var(--darkgrey);
    background-color: var(--almostwhite);
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.2em;
    margin:0px 0px .6em 0px;
    color: inherit;
    font-weight: 600;
    margin-bottom: .2em;
}

h1 {font-size: 60px;}
h2 {font-size: 54px;}
h3 {font-size: 40px;}
h4 {font-size: 32px;}
h5 {font-size: 25px;}
h6 {font-size: 16px;}

ul{
    padding-left: 20px;
}
a {
    transition: all .3s ease;
    color: var(--lime);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    color: var(--forest);
}

p {
    margin-top: 0px;
    margin-bottom: 1em;
}
p:last-child {
    margin-bottom: 0px;
}

div, 
section {
    background-size: cover;
}

img {max-width: 100%;}

/************* Layout Classes *************/

/* "<section>" tags are used around each layout */
section {
    padding: 35px 0px;
}

/* The "container" class sets the width of the content globally */
.container {
    max-width: calc(100% - 50px);
    width: 1280px;
    margin: auto;
}

/* These align the text in a container */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/* Loading Spinner Styles */
/* See HTML Example: 
    <div id="loading-modal">
        <div class="loading-modal-inner bg-white radius-md p-xl">
            <div class="text-center m-b-md">
                <h4>Please Wait</h4>
            </div>
            <div class="spinner"></div>
        </div>
    </div>
*/
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lime);
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Wrap all tables in a div with a "table-container" class so it scrolls on mobile */
/* These allow for nice styling of tables. See example HTML Below */
/*
<div class="table-container">
    <table class="styled">
        <thead>
            <tr>
                <th>.../th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>...</td>
            </tr>
        </tbody>
    </table>    
</div>
*/
.table-container {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
}

.table-container::-webkit-scrollbar {
    width: 10px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,.4);
    border-radius: 50px;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.7);
    border-radius: 50px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.9);
}

/* Add a "styled" class to achieve the well-designed look and feel */
table.GridView,
table.styled {
    background-color: var(--white);
    color: var(--purple);
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0px 1px 1px #ccc;
}

table.GridView .GridViewHeader,
table.styled thead {
    background-color: var(--blue);
    color: var(--white);
}

table.GridView td,
table.GridView th,
table.styled td,
table.styled th {
    text-align: center;
    border: 1px solid rgba(175,175,175,.15);
    padding: 5px;
    font-size: 14px;
    line-height: 1.3em;
}

table.styled .GridViewAlternatingRow,
table.GridView .GridViewAlternatingRow {
    background-color: #f9f9f9;
}

table.GridView th,
table.styled th {
    border-top:none;
}

table.GridView th:first-of-type,
table.styled th:first-of-type {
    border-left:none;
}

table.GridView th:last-of-type,
table.styled th:last-of-type {
    border-right:none;
}

table.GridView tr:first-child td,
table.styled tr:first-child td {
    border-top: none;
}

table.GridView tr:last-child td,
table.styled tr:last-child td {
    border-bottom: none;
}

table.GridView td:first-child,
table.styled td:first-child {
    border-left: none;
}

table.GridView td:last-child,
table.styled td:last-child {
    border-right: none;
}

.GridViewSelectedRow {
    background:var(--lime);
    color:var(--white)
}

.GridViewSelectedRow a {
    color:var(--black);
}


/************* Column Classes *************/
/* See HTML Example: 
    <div class="row">
        <div class="col col-8"> ... Content ... </div>
        <div class="col col-4"> ... Content ... </div>
    </div>
*/
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    margin-left: -20px;
    margin-right: -20px;
}

/* This will center the content in columns vertically in the middle */
/* See HTML Example: 
    <div class="row center-vertically">
        <div class="col col-8"> ... Content ... </div>
        <div class="col col-4"> ... Content ... </div>
    </div>
*/
.row.center-vertically{
    align-items: center;
}

/* This will center the content in the row horizontally */
/* See HTML Example: 
    <div class="row center-content">
        <div class="col col-8"> ... Content ... </div>
        <div class="col col-4"> ... Content ... </div>
    </div>
*/
.row.center-content{
    justify-content: center;
}

.col {
    flex: 1; /* Equal-width columns by default */
    padding-left: 20px;
    padding-right: 20px;
}

/* Columns are based on a 12 column grid */
/* NOTE! You need to have the column numbers add up to 12 per row */
/* See HTML Example for 50/50 grid: 
    <div class="row center-content">
        <div class="col col-6"> ... Content ... </div>
        <div class="col col-6"> ... Content ... </div>
    </div>
*/
.col-1 {
    flex: 0 0 8.33%; /* 1/12 width (12 columns) */
}

.col-2 {
    flex: 0 0 16.67%; /* 2/12 width (12 columns) */
}

.col-3 {
    flex: 0 0 25%; /* 3/12 width (12 columns) */
}

.col-4 {
    flex: 0 0 33.33%; /* 4/12 width (12 columns) */
}

.col-5 {
    flex: 0 0 41.67%; /* 5/12 width (12 columns) */
}

.col-6 {
    flex: 0 0 50%; /* 6/12 width (12 columns) */
}

.col-7 {
    flex: 0 0 58.33%; /* 7/12 width (12 columns) */
}

.col-8 {
    flex: 0 0 66.67%; /* 8/12 width (12 columns) */
}

.col-9 {
    flex: 0 0 75%; /* 9/12 width (12 columns) */
}

.col-10 {
    flex: 0 0 83.33%; /* 10/12 width (12 columns) */
}

.col-11 {
    flex: 0 0 91.67%; /* 11/12 width (12 columns) */
}

.col-12 {
    flex: 0 0 100%; /* Full-width (12/12) */
}

/* Sets gaps between columns, this way you can reduce the spacing between columns */
/* See HTML Example: 
    <div class="row gap-sm">
        <div class="col col-3"> ... Content ... </div>
        <div class="col col-9"> ... Content ... </div>
    </div>
*/
.row.gap-sm .col {
    padding-left: 10px;
    padding-right: 10px;
}
.row.gap-lg .col {
    padding-left: 50px;
    padding-right: 50px;
}
.row.gap-sm .col:first-of-type,
.row.gap-lg .col:first-of-type {
    padding-left: 20px;
}
.row.gap-sm .col:last-of-type,
.row.gap-lg .col:last-of-type {
    padding-right: 20px;
}


/**************************** Global Styles *****************************/

/* Add a class "form-element-wrapper" around all form inputs, checkboxes, radio buttons and all other form elements */
/* See HTML Example, here is a full widht and 50/50 column example on how to nest form inputs in a grid: 
    <div class="row">
        <div class="col col-12">
            <div class="form-element-wrapper">
                <label>Club Name</label>
                <input type="text" name="club-name" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col col-6">
            <div class="form-element-wrapper">
                <label>Default Sport</label>
                <select type="text" name="default-sport" >
                    <option value="sport1">Sport 1</option>
                    <option value="sport2">Sport 2</option>
                    <option value="sport3">Sport 3</option>
                </select>
            </div>
        </div>
        <div class="col col-6">
            <div class="form-element-wrapper">
                <label>Country</label>
                <select type="text" name="country" >
                    <option value="country1">Country 1</option>
                    <option value="country2">Country 2</option>
                    <option value="country3">Country 3</option>
                </select>
            </div>
        </div>
    </div>
*/
.form-element-wrapper {
    margin-bottom: 7px;
}
.form-element-wrapper:not(.form-choose) label {
    margin-bottom: 5px;
    display: block;
}

/* This will style form inputs so they look good. Nothing for you to do, this simply styles inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
    padding: 8px 10px;
    border: 1px solid var(--lightgrey);
    border-radius:  var(--radius-sm);
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
    color: var(--darkgrey);
}

/* The "form group" class gives you the ability to combine elements together in a form element, such as an "eye" on a password input */
/* See HTML Example:
    <div class="row">
        <div class="col col-12">
            <div class="form-element-wrapper">
                <label>Password</label>
                <div class="form-group">
                    <input type="text" name="email" />
                    <a href="#" class="form-group-text"><img src="assets/image/eye.svg"/></a>
                </div>
            </div>
        </div>
    </div>
*/ 
.form-group{
    display: flex;
}
.form-group > *,
.form-group > input,
.form-group > input[type="text"],
.form-group > input[type="password"],
.form-group > input[type="email"],
.form-group > input[type="number"],
.form-group > input[type="tel"],
.form-group > input[type="date"],
.form-group > select,
.form-group > textarea  {
    border-radius: 0px;
}
.form-group input{
    margin: 0px;
}
.form-group .form-group-text{
    padding:7px;
    background-color: var(--lightgrey);
    color: var(--black);
    display: flex;
    align-items: center;
}
.form-group .form-group-text img,
.form-group .form-group-text input {
    vertical-align: middle;
    display: inline-block;
    max-height: 20px;
}
.form-group > *:first-child,
.form-group > input:first-child,
.form-group > input[type="text"]:first-child,
.form-group > input[type="password"]:first-child,
.form-group > input[type="email"]:first-child,
.form-group > input[type="number"]:first-child,
.form-group > input[type="tel"]:first-child,
.form-group > input[type="date"]:first-child,
.form-group > select:first-child,
.form-group > textarea:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}
.form-group > *:last-child,
.form-group > input:last-child,
.form-group > input[type="text"]:last-child,
.form-group > input[type="password"]:last-child,
.form-group > input[type="email"]:last-child,
.form-group > input[type="number"]:last-child,
.form-group > input[type="tel"]:last-child,
.form-group > input[type="date"]:last-child,
.form-group > select:last-child,
.form-group > textarea:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* Style the buttons. Add class of "btn" to anything you need to look like a button */
/* See HTML Examples of buttons: 
    <a href="#" class="btn">Create club and admin accounts</a>
    <button type="submit" class="btn">Create club and admin accounts</button>
*/
input[type="submit"],
button[type="submit"],
button,
.btn {
    position: relative;
    background-color: var(--blue); 
    padding: 13px 35px;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--white);
    text-decoration: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 18px;
    white-space: wrap;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
button:hover,
.btn:hover {
    background-color: var(--lime);
    color: var(--white);
}

input[type="submit"]::after,
button[type="submit"]::after,
button::after,
.btn::after {
    content: "";
    position: absolute;
    top: 3px;
    right: -4px;
    bottom: -4px;
    left: 3px;
    border-right: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    border-radius: var(--radius-sm);
    transition: all .3s ease;
}

input[type="submit"]:hover::after,
button[type="submit"]:hover::after,
button:hover::after,
.btn:hover::after {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-color: var(--lime);
}

/**** Added 2024/08/22 ****/
.ajax__calendar_container {
    z-index: 9;
}

button:disabled,
input:disabled,
textarea:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}  

/**************************** Navigation *****************************/
/* See HTML Examples:
    <header class="bg-white"> 
        <div class="container">
            <nav class="navbar row no-mobile-change">
                <div class="logo">
                    <a href="/"><img src="..." /></a>
                </div>
                <div class="text-right">
                    <a class="menu-icon mobile-show btn">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </a>
                    <ul class="nav-links">
                        <li class="mobile-controls">
                            <a href="#" class="mobile-close">&times;</a>
                        </li>
                        <li class="has-dropdown">
                            <a href="#">Dropdown Label</a>
                            <ul class="dropdown">
                                <li><a href="#">...</a></li>
                                <li><a href="#">...</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About</a></li>  
                    </ul>
                </div>
            </nav>
        </div>
    </header>
*/
/* Style the navigation bar */
header {
    border-bottom: 1px solid var(--lightgrey);
    box-shadow: 2px 2px 10px rgba(0,0,0,.1);
}

header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
}

header .logo {
    flex:1
}

/* Style the logo link */
header .logo a {
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

header .logo img,
header .logo input {
    width: 270px;
    display: block;
}

/* Style the navigation links */
header .menu-icon {
    display: inline-block;
    padding: 10px 20px;
    display: none;
}
header .menu-icon > .line {
    background-color: var(--white);
    height: 6px;
    display: block;
    width: 30px;
    border-radius: 3px;
}

header .menu-icon > .line + .line {
    margin-top: 4px;
}

header ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
header ul li {
    padding: 0px;
    margin: 0px;
}
header ul.nav-links > li {
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
header ul.nav-links > li.mobile-controls {
    display: none;
    text-align: right;
    background-color: var(--black);
}

header ul.nav-links > li.mobile-controls > a,
header ul.nav-links > li.mobile-controls > a:not(.btn) {
    font-size: 35px;
    display: inline-block;
    border-bottom: none;
}
header ul.nav-links li a {
    white-space: nowrap;
}

header ul.nav-links > li > a:not(.btn) {
    text-decoration: none;
    color: var(--darkgrey); /* Text color for the links */
    font-size: 16px;
    font-weight: 600;
    padding: 5px 6px;
    display: inline-block;
}

header ul.nav-links > li.has-dropdown > a::after {
    content: '\25BE'; 
}

header ul.nav-links > li.has-dropdown .mobile-dropdown-toggle::after {
    content: '\25BE'; 
    display: block;
    position: absolute;
    right: 25px;
    top:10px;
    color: var(--white);
    border: 1px solid var(--white);
    padding: 10px 20px;
    border-radius: 10px;
    line-height: 14px;
    text-align: center;
    font-size: 31px;
    display: none;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 9;
}
header ul.nav-links > li.has-dropdown.mobile-active .mobile-dropdown-toggle::after {
    content: ' \25B4'; 
}

header ul.nav-links > li.has-dropdown .mobile-dropdown-toggle:hover::after {
    background-color: var(--lime);
}

header ul.nav-links > li > a:not(.btn).active,
header ul.nav-links > li > a:not(.btn):hover {
    color: var(--lime)
}

header ul.nav-links > li > ul.dropdown {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 160px;
    text-align: left;
    z-index: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    right: 0px;
    transition: all .3s ease;
    border: 1px solid var(--lightgrey);
    box-shadow: 2px 2px 10px rgba(0,0,0,.1);
}

header ul.nav-links > li:hover > ul.dropdown {
    display: block;
}

header ul.nav-links > li > ul.dropdown li {
    display: block;
}

header ul.nav-links > li > ul.dropdown li a,
header ul.nav-links > li > ul.dropdown li div {
    padding: 6px 20px;
    display: block;
    border-bottom: 1px solid var(--lightgrey);
    color: var(--darkgrey);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}


header ul.nav-links > li > ul.dropdown li a:hover {
    background-color: var(--lime);
}

header ul.nav-links > li > ul.dropdown li:last-of-type a {
    border-bottom: 0px;
} 

/* ********* Footer Styles ********* */
/* See HTML Examples:
    <footer>
        <div class="container">
            <div class="row center-content">
                <div class="col col-12 text-center">
                    <img class="footer-logo" src="assets/image/logo-balls.png" />
                </div>
                <div class="col col-12 text-center">
                    <ul class="nav-links purple">
                        <li><a href="#">Features</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Sign Up</a></li>
                    </ul>
                </div>
            </div>
            <div class="row center-content">
                <div class="col col-8">
                    <div class="footer-bar bg-darkgrey radius-md p-md">
                        <div class="row center-vertically mobile-col-space-md">
                            <div class="col col-9 text-left mobile-text-center">
                                Copyright. BoxLeague.net
                            </div>
                            <div class="col col-3 text-right mobile-text-center">
                                <img class="footer-social-icon" src="assets/image/Facebook.png" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
*/
footer {
    margin-top: 10px;
    margin-bottom: 50px;
}
footer ul.nav-links {
    display: block;
    list-style: none;
    text-align: center;
    padding: 0px;
    margin: 0px 0px 20px 0px;
}
footer ul.nav-links > li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    list-style: none;
}

footer .nav-links a {
    text-decoration: none;
    color: var(--darkgrey); /* Text color for the links */
    font-size: 16px;
    font-weight: 600;
    padding: 5px 6px;
    display: inline-block;
}
footer .nav-links a.active,
footer .nav-links a:hover {
    color: var(--lime)
}
footer .footer-logo {
    width: 110px;
    margin-bottom: 5px;
    display:inline-block;
}

footer .footer-social-icon {
    display: inline-block;
    height: 40px;
}


footer .footer-bar {
    position: relative;
}
footer .footer-bar > .row {
    position: relative;
    z-index: 2;
}
footer .footer-bar::after {
    content: "";
    position: absolute;
    top: 3px;
    right: -8px;
    bottom: -8px;
    left: 3px;
    border-right: 1px solid var(--darkgrey);
    border-bottom: 1px solid var(--darkgrey);
    border-radius: var(--radius-sm);
    transition: all .3s ease;
}

.wizard-nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    padding: 3px 10px;
    /*border-radius: var(--radius-sm);*/
    z-index: 24;    /* So under the alert panel */
    background-color: var(--lightgrey);
    align-items: center;
    color: var(--white);
}

.auto-logout-bar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    padding: 3px 10px;
    z-index: 24; /* So under the alert panel */
}


/************* Alert Banner *************/
/* See HTML Examples:
    <div class="alert info">
        <div>
            <h5>Please enter your full name</h5>
        </div>
        <a href="#" class="alert-close"><span>&times;</span> Close</a>
    </div>
*/
.alert {
    position: fixed;
    bottom:10px;
    left:10px;
    right:10px;
    display: flex;
    padding: 10px 35px;
    border-radius: var(--radius-sm);
    z-index: 25;
    background-color: var(--red);
    align-items: center;
    color: var(--white);
}

.alert h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
}

.alert .alert-close {
    padding: 7px 20px;
    font-size: 20px;
    font-weight: 600;
    background-color: var(--white);
    color: var(--red);
    border-radius: 100px;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.alert .alert-close:hover {
    opacity: .8;
}
.alert .alert-close span {
    font-size: 30px;
    font-weight: 700;
    margin-right: 9px;
    margin-bottom: -2px;
}

.alert.info {
    color: var(--white);
    background-color: var(--green); 
}
.alert.info .alert-close {
    color: var(--blue);
}

.alert.success { 
    color: var(--white);
    background-color: var(--green); 
}
.alert.success .alert-close {
    color: var(--green);
}

.alert.error { 
    color: var(--white);
    background-color: var(--red); 
}
.alert.error .alert-close {
    color: var(--red);
}
/**************************** Mobile Styles *****************************/
/* These styles are automatically appplied. They are style overwrites for mobile. */

@media (max-width: 900px) {
    body {
        font-size: 15px;
    }

    h1 {font-size: 37px;}
    h2 {font-size: 33px;}
    h3 {font-size: 28px;}
    h4 {font-size: 24px;}
    h5 {font-size: 18px;}
    h6 {font-size: 15px;}

    /************* Margin/Padding Classes *************/
  
    .m-sm {margin:10px;}
    .m-md {margin:15px;}
    .m-lg {margin:20px;}
    .m-xl {margin:25px;}
    .m-t-sm {margin-top: 10px;}
    .m-t-md {margin-top: 15px;}
    .m-t-lg {margin-top: 20px;}
    .m-t-xl {margin-top: 25px;}
    .m-b-sm {margin-bottom: 10px;}
    .m-b-md {margin-bottom: 15px;}
    .m-b-lg {margin-bottom: 20px;}
    .m-b-xl {margin-bottom: 25px;}
    .m-v-sm {margin-top: 10px;margin-bottom: 10px;}
    .m-v-md {margin-top: 15px;margin-bottom: 15px}
    .m-v-lg {margin-top: 20px;margin-bottom: 20px}
    .m-v-xl {margin-top: 25px;margin-bottom: 25px}
    .m-h-sm {margin-left: 10px;margin-right: 10px;}
    .m-h-md {margin-left: 15px;margin-right: 15px;}
    .m-h-lg {margin-left: 20px;margin-right: 20px;}
    .m-h-xl {margin-left: 25px;margin-right: 25px;}
    
    .p-sm {padding:10px;}
    .p-md {padding:15px;}
    .p-lg {padding:20px;}
    .p-xl {padding:25px;}
    .p-v-sm {padding-top: 10px;padding-bottom: 10px;}
    .p-v-md {padding-top: 15px;padding-bottom: 15px}
    .p-v-lg {padding-top: 20px;padding-bottom: 20px}
    .p-v-xl {padding-top: 25px;padding-bottom: 25px}
    .p-h-sm {padding-left: 10px;padding-right: 10px;}
    .p-h-md {padding-left: 15px;padding-right: 15px;}
    .p-h-lg {padding-left: 20px;padding-right: 20px;}
    .p-h-xl {padding-left: 25px;padding-right: 25px;}

    .mobile-text-left {text-align: left;}
    .mobile-text-center {text-align: center;}
    .mobile-text-right {text-align: right;}

    .container {
        max-width: calc(100% - 30px);
    }
    
    header .logo {
        max-width: 70%;
    }

    header ul.nav-links {
        position: fixed;
        top: 0;
        left: 0;
        right: 100%;
        bottom: 0;
        background: var(--purple);
        z-index: 100;
        transition: all .5s ease;
        overflow: hidden;
    }
    header ul.nav-links.mobile-open {
        right: 0%;
        overflow:auto
    }
    header .menu-icon  {
        display: inline-block;
    }
    header ul.nav-links > li.mobile-controls {
        display: block;
        border-bottom: 1px solid var(--darkgrey);
    }

    header ul.nav-links > li {
        display: block;
        text-align: left;
        margin-left: 0px;
    }

    header ul.nav-links > li > a:not(.btn) {
        display: block;
        padding:15px 25px;
        border-bottom: 1px solid var(--darkgrey);
        color: var(--almostwhite)
    }

    header ul.nav-links > li > a.btn {
        display: block;
        text-align: center;
        margin: 15px 25px;
    }

    header ul.nav-links > li > ul.dropdown {
        position: static;
        border-radius: 0px;
        display: block;
        max-height: 0px;
    }
    header ul.nav-links > li > ul.dropdown li a, 
    header ul.nav-links > li > ul.dropdown li div {
        padding: 15px 20px;
    }
    header ul.nav-links > li.has-dropdown > a::after {
        content:none;
        display: none; 
    }

    header ul.nav-links > li.has-dropdown.mobile-active > .dropdown {
        max-height: 780px;
    }

    header ul.nav-links > li.has-dropdown .mobile-dropdown-toggle::after {
        display: block;
    }

    section {
        padding: 25px 0px;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    /* The "no-mobile-change" class stops the mobile CSS from adjsuting the padding on the columns */ 
    .row:not(.no-mobile-change) > .col-1,
    .row:not(.no-mobile-change) > .col-2,
    .row:not(.no-mobile-change) > .col-3,
    .row:not(.no-mobile-change) > .col-4,
    .row:not(.no-mobile-change) > .col-5,
    .row:not(.no-mobile-change) > .col-6,
    .row:not(.no-mobile-change) > .col-7,
    .row:not(.no-mobile-change) > .col-8,
    .row:not(.no-mobile-change) > .col-9,
    .row:not(.no-mobile-change) > .col-10,
    .row:not(.no-mobile-change) > .col-11,
    .row:not(.no-mobile-change) > .col-12,
    .row:not(.no-mobile-change) > .col,
    .row.gap-sm:not(.no-mobile-change) > .col,
    .row.gap-md:not(.no-mobile-change) > .col,
    .row.gap-lg:not(.no-mobile-change) > .col  {
        width: 100%;
        flex: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .row.mobile-col-space-sm > .col {
        margin-bottom: 10px;
    }

    .row.mobile-col-space-md > .col {
        margin-bottom: 20px;
    }

    .row.mobile-col-space-lg > .col {
        margin-bottom: 35px;
    }

    .row.mobile-col-space-xl > .col {
        margin-bottom: 50px;
    }
    
}