/* styles for validation helpers */
.validation-summary-errors {
    padding: 10px 10px 2px 15px;
    margin-bottom: 10px;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    font-weight: bold;
}

.field-validation-error {
    color: #a94442;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #a94442;
}

select.input-validation-error {
    border: 1px solid #a94442;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-valid {
    display: none;
}

span.field-validation-error {
    color: #a94442;
}

/* Classes that are used to perform functions.  No formatting. */
.validation-group {
}

.datepicker {
}

/* Styles to work with KUMC layout.  Adjust footer height if necessary. */
#wrap {
    margin: 0 auto -310px;
    padding: 0 0 310px;
}

#footer {
    height: 310px;
}

input[type=text], input[type=password], input[type=submit], input[type=button] {
    padding: 6px 12px 6px 12px;
    margin: 0;
}

.input-group-addon, .input-group-button {
    vertical-align: middle;
}

/* Align radios and checkboxes a little better */
.radio input[type='radio'], .radio-inline input[type='radio'], .checkbox input[type='checkbox'], .checkbox-inline input[type='checkbox'] {
    margin-top: 0;
}

/* Make the Bootstrap dropdown menu a little wider.  You can customize per application. */
.open > .dropdown-menu {
    width: 200px;
}

/* Make a table's width fit its content horizontally instead of going across the entire page. */
.table.table-auto {
    width: auto !important;
}

/* Remove the x next to input fields in Internet Explorer 
   We don't want it, because we handle this ourselves. */
::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

/* Style table captions */
caption {
    font-size: larger;
}

/* Style page headers to have a shorter top margin */
.page-header {
    margin-top: 10px;
}

.navbar {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Put back bottom margin on panels */
.panel {
    margin-bottom: 20px;
}

/* 
    Make plain text align properly with label or other form controls.
    Example: <div class="form-control-static">This is some plain text</div>

*/
.form-control-static {
    padding-top: 7px;
    padding-bottom: 7px;
}

.form-group-condensed {
    margin-bottom: 0;
}

.form-horizontal .control-label {
    text-align: left;
}

/* Styles used for paging-sorting */
.pagination-link {
}

.pagination-previous {
}

.pagination-data-column {
}

.pagination-header-button {
}

.pagination-search-text {
}

.pagination-clear-search-button {
}

.pagination-items-per-page {
}

.pagination-next {
}

.wait-sign {
}

/* styles for admin section*/

.navBackGround {
    background-color: #d6d7d9 !important;
}

.navkumcitempadding {
    padding-left: 20px !important;
}

.flashmessagedisplay {
    display: none !important;
}

.limitresult {
    margin-top: 5px;
    color: lightslategray;
}

.textAlign {
    text-align: left !important;
}

.deletewidth {
    width: auto !important;
}

.CheckboxMargin {
    margin-left: 20px !important;
}

.admintoppadding {
    padding-top: 0 !important;
}

.tablewidthadmin {
    width: 100% !important;
    vertical-align: middle !important;
}

.widthfull {
    width: 100% !important;
}

.widthlimit {
    width: 200px !important;
}

.alertFade {
}

/* Other styles */
.filestyle {
}

.showEntries {
    margin-bottom: 10px !important;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: lightblue;
}

.table-bordered thead td, .table-bordered thead th {
    background-color: #0051ba;
    color: white;
}

.datepicker.dropdown-menu {
    max-height: initial !important;
}

/*///header*/

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

.pb-2, .py-2 {
    padding-bottom: 0.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

@charset "utf-8";
/* CSS Document */
#skip-to-main {
    position: absolute;
    border: solid 1px #dde5ee;
    background: transparent;
    background-color: #fff;
    border-radius: 4px;
    top: -100%;
    padding: 5px 10px;
    -webkit-appearance: none;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-family: "Raleway";
    font-weight: 500;
    font-size: 1.1rem;
    color: #525757;
}

h2, h4, h6, .h2, .h4, .h6 {
    font-family: "Noto Serif", serif;
    font-weight: bold;
}

h2, .h2 {
    color: #004373;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: #000;
}

h1, h3, h5, .h1, .h3, .h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    line-height: 1;
}

/* Header Info */

.header-top {
    background: #003459;
    border-bottom: 2px solid #e8000d;
}

#main-nav {
    background: #0051ba !important;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.mx-2000 {
    /*max-width: 2000px;*/
    margin: 0 auto;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
    line-height: 1.3;
}

h1, .h1 {
    color: #003459;
    height: auto;
    font-size: 2rem;
}

h2 {
    letter-spacing: 0.035em;
    font-size: 1.7rem;
}

h3 {
    font-size: 1.6rem;
}

h1, h3, h5, .h1, .h3, .h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}

img.logo-img {
    height: 40px;
}


footer {
    display: block;
    width: 100%;
    overflow: hidden;
    position: static;
    bottom: 0;
    height: 100%;
}

.tray.tray--footer .background-image-container {
    height: 100%;
}

.background-image-container {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

    .background-image-container .background-image {
        width: 100%;
        height: 105%;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: -1;
    }

footer .center-content {
    display: flex;
    justify-content: center;
}

.tray--footer .logo--footer {
    margin-top: 50px;
    margin-bottom: 40px;
    width: 235px;
}

.tray--footer .address-container, .tray--footer {
    text-align: center;
    font-size: .95rem;
    line-height: 220%;
}

.copywright-ps-cs {
    font-size: .65rem;
}

.tray--footer {
    color: #fff;
    position: relative;
}

    .tray--footer ul {
        text-align: center;
        padding: 0;
        margin: 0;
    }

        .tray--footer ul li {
            color: #fff;
            position: relative;
            display: inline-block;
            margin-right: 16px;
            list-style-type: none;
            font-size: .95rem;
        }

            .tray--footer ul li a {
                color: inherit;
                font-size: .95rem;
            }

            .tray--footer ul li::after {
                position: absolute;
                content: "|";
                right: -13px;
                top: 0;
            }

        .tray--footer ul.social {
            margin: 15px 0;
        }

    .tray--footer ul {
        text-align: center;
        padding: 0;
        margin: 0;
    }

        .tray--footer ul.social li::after {
            content: "";
        }

        .tray--footer ul.social li a {
            display: block;
            border: solid 2px #fff;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            position: relative;
        }

            .tray--footer ul.social li a .fab, .tray--footer ul.social li a .fas {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

        .tray--footer ul li:last-of-type::after {
            content: "";
        }

.social li {
    margin-right: 4px !important;
}

    .social li a {
        font-size: 1.2rem !important;
    }

footer a {
    color: #fff;
}

    footer a:hover {
        text-decoration: none;
        color: #fff;
    }

@media (min-width: 992px) {
    .alt-header header[role=banner], .unit-home header[role=banner], .unit-content header[role=banner], .unit-landing header[role=banner] {
        height: 100px;
    }

    header[role=banner] {
        height: 117px;
        border-bottom: solid 5px #e8000e;
    }

    .tray--footer .logo--footer {
        width: 290px;
        margin-top: 70px;
    }
}

@media (min-width: 768px) {


    .tray--footer .logo--footer {
        width: 270px;
        margin-top: 60px;
        margin-bottom: 50px;
    }

    .tray--footer ul.social {
        margin: 30px 0;
    }

    .tray--footer .address-container, .tray--footer .copywright-ps-cs {
        text-align: center;
        font-size: .95rem;
        line-height: 200%;
    }
}

@media (min-width: 414px) {
    .tray--footer .logo--footer {
        margin-top: 56px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    footer img {
        max-width: 250px;
    }
}







body {
    background-image: url('../images/background-image.png');
    background-repeat: repeat;
    justify-content: center;
    align-items: center;
    /* background: linear-gradient(to bottom, #24a3fb, #15609b, #0c385a 70%);
    height: auto;*/
    margin: 0;
}

.white-card {
    display: inline-block;
    margin: 0 auto;
    padding: 1.25rem; /* 20px */
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    /*border-radius: 0.625rem;*/ /* 10px */
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2); /* 4px 8px */
    font-family: Arial, sans-serif;
/*    border-style: solid;
    border-color: rgb(13, 110, 253);*/
}

/* white card for registration page */
#card4{
    text-align: left;
    width: 100%;
}

#card5 {
    text-align: center;
    width: 100%;
}

/*.display-card {
    margin: 0 auto;
    padding: 1.25rem;
}*/

.button-spacing {
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    
}

.blue-button {
    padding: 0.625rem 1.25rem; 
    font-size: 1rem; 
    border: none;
    border-radius: 0.25rem; 
    color: white;
    text-decoration: none;
    cursor: pointer;
    width: 48%;
    background-color: #0066cc;
    text-align: center;
}

.center-fix {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card-fixed {
    margin: 0.625rem;
    display: flex;
    flex-direction: column;
}

.page-container {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    min-height: 32.5rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-padding {
    padding-left: 1.875rem;
}

.c-card-fixed {
    margin: 0.625rem;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s, background-color 0.3s;
    backdrop-filter: blur(1.25rem);
    height: 100%

}

.admin-card {
    margin: 0.625rem;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s, background-color 0.3s;
    backdrop-filter: blur(1.25rem);
    
}

.card-img-top {
    height: 12.2rem !important;
   
    object-fit: cover;
}

.custom-card {
    width: 100%;
    height: 100%;
    margin: 0.625rem;
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s, background-color 0.3s;
}

/*    .custom-card a {
        text-decoration: none;
    }*/

/*    .custom-card:hover {
        transform: scale(1.05);
        background-color: rgba(173, 216, 230, 0.7);
    }
*/
.text-black {
    color: black !important;
}
.dashboard-card {
    
    flex-direction: column;
    justify-content: center;
    text-align: left;
    text-decoration: none;
    color: black;
}

.bg-transparent {
    background-color: rgba(255, 255, 255, 20%) !important;
}

.head-design {
    background-color: rgba(255, 255, 255, 0.5) !important;
    font-family: Arial, sans-serif;
}

#accordion-style {
    background-color: rgba(255, 255, 255, 10%) !important;
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.75rem 1.25rem;
    font-weight: bold;
}



.design-a {
    background-color: #0d6efd !important;
    color: white;
}

.design-b {
    background-color: rgba(0, 255, 0);
}


/*.button-resize {
    padding: 1.875rem;
}*/

.user-type-right {
    align-content: flex-end;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.admin-type-left {
    align-content: flex-start;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.custom-spc {
    padding-bottom: 1.875rem;
}

.padding-row {
    padding-bottom: 0.625rem;
}

.reply-button {
    margin-top: 0.625rem;
}

.delete-button {
    float: right;
    margin-top: 0.625rem;
}

.no-underline {
    min-height: 6.25rem;
    text-decoration: none;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.exercise-card, .recipe-card, .mindfull-card, .registration-card, .chats-card {
    padding: 1.12rem;
    border-radius: 1.25rem !important;
    margin-bottom: 1.25rem;
    background-color: rgba(255, 255, 255, 0.8);
   /* box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);*/
    text-align: center;
   /* width: 24rem;*/
    display: flex;
    flex-direction: column;
    width: 21.4rem !important;
    border: 0.0625rem solid #ddd;
    border-radius: 0.3125rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

.exercise-content, .recipe-content, .mindfull-content {
    padding-top: 0.9375rem;
    border-top: 0.0625rem solid rgb(15 15 15 / 31%);
    margin-top: 0.9375rem;
    font-size: 1.26rem;
    padding: 0.9375rem;
}
#card7 {
    padding-bottom: 0.9375rem;
    font-size: 1.26rem;
   
}

.exercise-title, .recipe-title, .mindfull-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
    color: #333;
}

@media (min-width: 48rem) {
    .exercise-card, .recipe-card, .mindfull-card, .registration-card, .chats-card {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.dumbbell-container {
    display: flex;
    gap: 0.625rem;
    font-size: 1.5rem;
}

    .dumbbell-container .active-dumbbell {
        color: red;
    }

.video-size {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

    .video-size iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0
    }


.audio-container {
    text-align: center;
    margin-top: 1.25rem;
}

    .audio-container img {
        max-width: 100%;
        height: auto;
        max-height: 400px;
        object-fit: cover;
    }

    .audio-container audio {
        width: 100%;
        height: 3.125rem;
    }


.AdminResponseColor {
    background-color: rgb(179, 255, 198) !important;
}

.page-fix {
    height: 100%;
    min-height: 37.5rem;
}

tr.parent-row td {
    font-weight: bold;
    background-color: #8dd2dd;
}

.NewUserResponseYN {
    background-color: lightgreen !important;
}

.Admin-data-card {
    margin: 0 auto;
    padding: 1.25rem;
    background-color: rgb(255 255 255 / 46%);
    border-radius: 0.625rem;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    
}


#card6 {
    display: inline-table;
}


.custom-back-button {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.exercise-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

/*.exercise-card {
    border: 0.0625rem solid #ddd;
    border-radius: 0.3125rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}*/
/**/
.exercise-img {
    width: 100%;
    height: auto;
    border-bottom: 0.0625rem solid #ddd;
}

/*.exercise-content {
    padding: 0.9375rem;
}
*/
/*.exercise-title {
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
}*/

.dumbbell-container {
    margin-bottom: 0.625rem;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.card-img-top-dash {
    height: 12.2rem !important;
    width: 100%;
    object-fit: cover;
}


@media (max-width: 768px) {
    .modal-body .row {
        flex-direction: column;
    }

    .modal-body .col-md-6 {
        width: 100%;
    }
}
.video-card {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

.text-left-aligned {
    text-align: left;
}

.wrap {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    max-width: 100px;
}

.mindfull-img {
    height: 25rem;
    width: 37.5rem;
}



.card-border-style {
    border-style: solid;
    border-color: rgb(13, 110, 253);
    border-radius: 0.625rem;
}

/*card blur effect*/
/*.row:hover > .col-12:not(:hover) .c-card-fixed {
    filter: blur(3px);
    transform: scale(0.98);
    transition: all 0.3s ease;
}*/

/*.c-card-fixed {
    transition: all 0.3s ease;
   
}*/

    .c-card-fixed:hover {
        transform: scale(1.02);
    }

/* Modify your existing hover rules to include transition */
#card1:hover,
#card2:hover,
#card3:hover {
    transform: scale(1.02);
    transition: all 0.3s ease;
}


/*Registrationj page */


.reg-card {
    border: none;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8); /* 80% opaque white */
    backdrop-filter: blur(10px); /* Adds a blur effect to the background */
}

.reg-title {
    color: #4285f4;
    font-weight: bold;
}

.reg-subtitle {
    color: #666;
}

#button-width {
    width: 100% !important;
}

.floating-label {
    position: relative;
}

    .floating-label input {
        padding: 8px;
        font-size: 16px;
        width: 100%;
    }

    .floating-label label {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #999;
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
        top: -10px;
        font-size: 12px;
        color: green;
    }