﻿

/**********HTML ELEMENTS******/
body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
    font-size: 14px;
}

.body-content {
    min-height: 1000px !important;
}

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover {
    cursor: default;
}

h6 {
    font-size: large;
}

h3 {
    font-size: 26px;
}

a {
    text-decoration: none;
    color: #488bc2;
}

    a:hover {
        text-decoration: none;
    }


ul > li {
    font-size: 14px;
}

td {
    font-size: 14px !important;
}

    td > p {
        font-size: 14px !important;
    }

span {
    display: inline-block;
}
/*  span > a {
        color: #e5eaef;
    }

        span > a:hover {
            color: #0f2d4d;
            text-decoration: none;
        }*/

/*#body {
    background-color: var(--body-back-color);
    color: var(--body-text-color);
}*/

/*p {
    line-height: var(--line-height);
    word-spacing: var(--word-spacing);
}*/

/***********CUSTOM CLASSES************/
/*.contain {
    max-width: 1300px;
}*/
.contain {
    /*max-width: 1570px !important;*/
    max-width: 1650px !important;
}

.content-headers {
    border-bottom: none;
    color: var(--textColor);
    /* border-bottom: solid 1px #cccccc; */
    font-weight: normal;
    padding-bottom: 0.2em;
    font-size: 3.3em;
}

.content-header-color {
    color: rgb(12, 61, 111);
    padding-bottom: 0.2em;
}

.subheader {
    line-height: 1.4;
    color: #6f6f6f;
    font-weight: normal;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-size: 2.375rem;
}

.light-grey-panel {
    /*background-color: rgba(240,240,240,1);*/
    margin-bottom: 1.25em;
    padding: 0.9em;
    /*color: #787878;*/
    color: var(--textColor);
    font-size: calc(var(--font-size-mod) * 13px);
}

    .light-grey-panel > h3 {
        color: #488bc2;
    }

    .light-grey-panel > h4 {
        margin-bottom: 10px;
    }

        .light-grey-panel > h4 > a {
            color: #404040;
        }

.bright-blue-panel {
    /*background-color: #F0F8FF;*/
    background-color: var(--side-menu-back);
    margin-bottom: 1.25em;
    padding: 0.9em;
    /*margin-top: 15px;*/
}

    .bright-blue-panel > h4 {
        /*font-size: 2.4em;*/
        font-size: calc(var(--font-size-mod) * 2.4em);
        margin-bottom: 10px;
        color: var(--text-color);
    }

    .bright-blue-panel > p {
        /*font-size: 16px;*/
        font-size: calc(var(--font-size-mod) * 16px);
    }

    .bright-blue-panel > h3 {
        /*font-size: 2.4em;*/
        font-size: calc(var(--font-size-mod) * 2.4em);
        margin-bottom: 10px;
        /*color: #6f6f6f;*/
        color: var(--text-color);
        text-decoration: none;
    }

        .bright-blue-panel > h3 :hover {
            /* color: #404040; */
            color: #6f6f6f;
        }

        .bright-blue-panel > h3 > a {
            text-decoration: none;
            color: #488bc2;
            /* color: #6f6f6f; */
        }



    .bright-blue-panel > p > a {
        text-decoration: none;
        color: #488bc2;
        line-height: 1em;
    }

    .bright-blue-panel > ul {
        line-height: 1.5em;
        font-size: small;
    }


    .bright-blue-panel > div > p {
        font-size: small;
    }

    .bright-blue-panel > .subheader {
        font-size: 24px;
        color: #6f6f6f;
    }

.blue-panel-link:hover {
    text-decoration: none;
    color: #58585b;
}

.bright-blue-panel > h5 > a:hover {
    text-decoration: none;
    color: #58585b;
}

/*.Title {
    color: #0C3D6F;*/
    /*text-align: center;*/
    /*margin-top: 20px;
    margin-bottom: 10px;
}*/

hr {
    margin-top: 10px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #413a3a
}

.mr-t-0 {
    margin-top: 0 !important;
}

.mr-t-5 {
    margin-top: 5px;
}

.mr-t-10 {
    margin-top: 10px;
}

.mainpagedisplay {
    display: inline-flex;
}

.vertical-line {
    display: inline-block;
    border-left: 1px solid #ccc;
    margin: 0 10px;
    height: 125px;
    width: 1%;
    padding-left: 8px;
    padding-right: 8px;
}

.mr-b-15 {
    margin-bottom: 15px
}

.mr-b-10 {
    margin-bottom: 10px
}

.mr-b-20 {
    margin-bottom: 20px
}

.form label {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-bottom: 1px solid white;
}

    .form label::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0px;
        width: 100%;
        height: 100%;
        border-bottom: 3px solid #fce38a;
        transform: translateX(-100%);
        transition: all 0.3s ease;
    }

.content-name {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.form input:focus {
    outline: none;
}

    .form input:focus + .label-name .content-name,
    .form input:valid + .label-name .content-name {
        transform: translateY(-150%);
        font-size: 14px;
        left: 0px;
        color: #fce38a;
    }

    .form input:focus + .label-name::after,
    .form input:valid + .label-name::after {
        transform: translateX(0%);
    }

.mediumchkbx {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.chkbxdiv {
    padding-top: 25px;
    padding-bottom: 20px;
}

    .chkbxdiv input.mediumchkbx {
        margin-top: 0px;
    }

.ResType {
    font-size: 20px;
}
/*.detailsblock {
    border: 1px solid #0C3D6F;
    border-radius: 4px;
    padding: 12px 10px 12px 10px;
    
    margin-right: 6px;
    margin-left: 9px;
    margin-bottom: 20px;
    margin-left: 0px !important;
    margin-right: 0px !important;
}*/

.detailsblock {
    margin: 0 auto;
    padding: 25px;
    background-color: #fefefe;
    box-shadow: 0 0.06em 0.1em;
    border-radius: 16px;
}

.field-validation-error {
    color: #b94a48;
    font-style: italic;
    font-size: 14px;
}

input.input-validation-error, select.input-validation-error {
    background-color: rgba(236,88,64,.1);
    border-color: #ec5840;
}

.evalmsg {
    display: block;
    min-height: 25px
}

.socials-link > .fab {
    font-size: x-large !important;
    margin-left: 5px;
    color: #95bddf
}

    .socials-link > .fab:hover {
        color: #fff;
    }

.fa-lt2em {
    font-size: 1.20em;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

    .btn-primary:focus {
        color: #fff;
        background-color: #1583cc;
        border-color: #1583cc;
    }

    .btn-primary:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0069d9;
    }

label {
    font-weight: normal;
    color: rgba(12, 61, 111,1) !important;
}

.pd-l-0 {
    padding-left: 0px !important;
}

.pd-r-0 {
    padding-right: 0px !important;
}

.form-select {
    height: 34px;
}

#divschedule.detailsblock {
    min-height: 990px;
}

#divwalkin.detailsblock {
    min-height: 340px;
}

#message {
    text-align: center;
    width: 100%
}

.w-50 {
    width: 50%;
}

.noresize {
    resize: none;
}

.btnactive {
    color: #fff;
    background-color: #1583cc;
    border-color: #1583cc;
}

    .btnactive:hover, .btn:focus, .btn.focus {
        color: #fff;
        background-color: #1583cc;
        border-color: #1583cc;
    }

.pd-r-8 {
    padding-right: 8px;
}

.test {
    color: red;
    margin-bottom: 1%;
    margin-top: 1%
}

/*.btn-large {
    width: 100%;
    padding: 3%;
}*/
.btn-large {
    width: 50%;
    padding: 3%;
}

.btn-medium {
    width: 40%;
    padding: 2%;
}

.btn-larger {
    width: 40%;
    padding: 5%;
    background-color: #205493 !important;
    border: #205493 !important;
}

.mr-b-2pr {
    margin-bottom: 2%;
}

.mr-t-6 {
    margin-top: 12%;
}

.pd-2pr {
    padding: 1.5rem;
}

.pd-3pr {
    padding: 0% 1.5rem;
}

.ul-custom {
    list-style-type: none;
    padding-left: 0px !important;
}

.heading {
    margin: 1% 0%;
    font-size: 1.75em;
    text-align: center;
}

/* Start Web Grid CSS */
.gridview {
    width: 100%;
    /*border: 1px solid #dddddd;*/
    border-radius: 5px;
    /*font-family: 'Helvetica';*/
}

    .gridview th {
        color: black;
        background-image: linear-gradient(to bottom, #rgb(32, 167, 139), #rgb(32, 167, 139));
        background-color: #95bddf;
        border-style: solid;
        border-width: 1px;
        border-color: #dddddd;
        padding: 5px;
        text-align: center;
        vertical-align: top;
        /*font-family: Helvetica;*/
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
        text-decoration: none;
    }

        .gridview th a {
            color: #FFF;
            text-decoration: none;
        }

    .gridview tr {
        color: #121112;
        /*font-family: 'Helvetica';*/
        font-size: 14px;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
    }

        .gridview tr:hover td {
            color: grey;
        }

    .gridview td {
        padding: 3px 5px;
        vertical-align: middle;
        border-style: solid;
        border-width: 1px;
        border-color: #dddddd;
    }

    .gridview th:first-child {
        border-top-left-radius: 5px;
    }

    .gridview th:last-child {
        border-top-right-radius: 5px;
    }

    .gridview tr:last-child td:first-child {
        border-bottom-left-radius: 5px;
    }

    .gridview tr:last-child td:last-child {
        border-bottom-right-radius: 5px;
    }

    .gridview tr:nth-child(odd) {
        background-color: #FFF;
    }

    .gridview tr:nth-child(even) {
        background-color: #FFF;
    }

/* End */

.space {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-bottom: 15px;
}

#Data {
    resize: none;
    width: 100%;
}

.light-grey-form {
    margin: 0 auto;
    padding: 25px;
    background-color: #fefefe;
    box-shadow: 0 0.06em 0.1em;
    border-radius: 16px;
}

.login-form {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0.125em 0.2em;
    border-radius: 8px;
}

/* Form Inputs */
.grey-form-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#resbydate.light-grey-form {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
}

#tcmsg {
    font-size: 14px;
}

.nowidth {
    width: 0% !important;
}

.fullscreen {
    width: 100%;
}

#divReservationSchedules tr td span:nth-child(2n+1) {
    color: #fefefe;
    margin-top: 8px;
    /*background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);*/
    background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    padding: 0.55rem;
    border-radius: 5px;
}

#divReservationSchedules tr td span:nth-child(2n+2) {
    color: #fefefe;
    margin-top: 8px;
    background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
    /*background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
    padding: 0.55rem;
    border-radius: 5px;
}

#divReservationSchedules tr td span a {
    text-decoration: none;
    color: black;
}

.myborder {
    content: "";
    margin: 0px;
    padding: 0px;
    /*position: absolute;
    top: 100%;*/
    width: 100%;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%)
}


/*.clnform_lbl {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
    color: #212529;
}*/

/* Add at the end of your Site.css */

.container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.panel-custom-public {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
}

body-content {
    background-color: white;
    width: 100%;
    padding: 20px;
}

/* Override any Bootstrap container restrictions */
.container {
    width: 100% !important;
    max-width: 100% !important;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.blue-links-section {
    margin-top: 60px;
}
