/* Site level settings go here */


.container-fluid {
    min-height:100vh;
    width:800px;
    padding:2px;
}

.container-pop-su {
    min-height: 100vh;
    min-width: 240px;
    padding: 2px;
}

.container-pop-mv {
    min-height: 100vh;
    min-width: 240px;
    padding: 2px;
}

.container-pop-mg {
    min-height: 100vh;
    min-width: 260px;
    padding: 2px;
}

.container-login {
    
    width: 500px;
    position: relative;
    min-height: 80vh;
}

body {
    background-color:white; 
    padding:2px;
    margin:2px;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding:2px;
    margin: 2px;
}

.jumbotron {
    background-color: mintcream;  /*#faf9f9;*/
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 1000px;
}

.selected {
    background: red;
}


.td-nowrap {
    white-space: nowrap;
}

.td-nowrap-center {
    white-space: nowrap;
    text-align:center;
}
.td-wrap-center {
    word-wrap: break-word;
}

.ui-dialog-titlebar {
    /* Same as bg-primary */     
    background: #425664; 
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 100;
    font-family: Verdana,Arial,sans-serif;
}


/* aligning buttons*/
button.right {
    float:right;
    display: inline-block;
}


button.btn-primary {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #d99a30; /* Button color */
    color: #fff; /* White text */
    font-weight: 600;
    border: none;
    transition: background 0.3s ease, transform 0.2s ease;
}

button.btn-secondary {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #486BEA; /* Button color */
    color: #fff; /* White text */
    font-weight: 600;
    border: none;
    transition: background 0.3s ease, transform 0.2s ease;
}

/*
button.btn-primary {
    color: #ffffff;
    background-color: #d99a30;
}

button.btn-secondary {
    color: #ffffff;
    background-color: #486BEA; /*#846D83; 
}
*/

.btn .btn-primary .btn-lg {
    color: #ffffff;
    background-color: #d99a30;
}

/* modal settings */
.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-header {
  background-color:#425664;
  text-decoration-color: #ffffff;
  text-emphasis-color: #ffffff;
  color:#ffffff;
}

.modal-lg {
    max-width: 600px;
}

.modal-md {
    max-width: 400px;
}

.modal-sm {
    max-width: 200px;
}


/* foooter settings */
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
    font-style: italic;
    font-size: x-small;
    width: 100%;
    height: 2.5rem; /* Footer height */
    /* JO 2/9/25 */
    text-align: center;
    padding: 10px;
}

#siteseal {
  display: block;
  text-align: center;
  margin: 0 auto;
  width: fit-content;

}


#blink {
    font-weight: bold;
    color: red;
    font-family: sans-serif;
}


.blinking {
    animation: blinkingText 1.2s infinite;
    font-weight: bold;
    color: red;
}

@keyframes blinkingText {
    0% {
        color: red;
    }

    49% {
        color: red;
    }

    60% {
        color: transparent;
    }

    99% {
        color: transparent;
    }

    100% {
        color: red;
    }
}

/* Web grid designer */
/*
.webgrid-table {
    font-size:smaller;
    width: 90%;
}



.webgrid-header th
{
    background-color: #82E0AA;
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: left;
    font-size:smaller;
}
.webgrid-footer
{
    text-align: center;
}
.webgrid-row-style 
{
    padding: 2px;
    font-size: smaller;
}
.webgrid-alternating-row
{
    background-color: #EAF2D3;
    padding: 2px;
    font-size: smaller;
}

.webgrid-selected-row {
  background-color: antiquewhite;
}
*/

.webgrid {
    width: 500px;
    border: 0px;
    border-collapse: collapse;
    overflow: scroll auto;
    font-size: smaller;
}

.webgrid a {
    color: #000;
}

.webgrid-header {
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-bottom: 2px solid #3966A2;
    //height: 40px;
    border-top: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    font-size: smaller;
}

.webgrid-footer {
    padding: 6px 5px;
    text-align: center;
    background-color: #e8eef4;
    border-top: 2px solid #3966A2;
    //height: 30px;
    border-bottom: 2px solid #D6E8FF;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    font-size: smaller;
}

.webgrid-alternating-row {
    //height: 30px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    font-size: smaller;
}

.webgrid-row-style {
    //height: 30px;
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #D6E8FF;
    border-right: 2px solid #D6E8FF;
    font-size: smaller;
}

.webgrid-selected-row {
    font-weight: bold;
    font-size: smaller;
}


msgstrong {
    font-weight: bolder;
    font-size: x-large;
}

msg {
    font-size: medium;
}

h5.gqpghead {
    text-decoration-color:red;
    font-weight:bold;
}


tr.gqhead {
    border:hidden;
    font-size:small;
    padding: 1px;
}

td.gqheadlbl {
    text-align:left;
    font-size:small;
    padding:1px;
}

td.gqheadvar {
    text-align: right;
    font-size: smaller;
    font-style: italic;
    padding: 1px;
}

td.gqheadval {
    text-align: left;
    font-size: smaller;
    font-style: italic;
    padding: 2px;
}

tr.gqtabhead {
    background-color:lightgray;
    border-top:solid;
    border-bottom:solid;
    font-size:small;
    padding: 5px;
}

tr.gqtabdet {
    padding: 5px;
    font-size:x-small;
}

/*
.navnavbar-inverse {
    background-color: #003c4b !important;
}
*/

.navbar-custom {
    background-color: #003c4b;
}

.nav-link {
    color: #ffffff;
}


.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffffff;
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
    color: #d99a30; 
}

#nav-toggle-button span {
    background-color: #ffffff;
}

/* cards for social media*/

.card {
    position: relative;
    border-radius: 20px;
    padding: 24px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}

/* TikTok gradient */
.card.tiktok {
    background: linear-gradient(135deg, #000 0%, #ff0050 50%, #00f2ea 100%);
}

/* Instagram gradient */
.card.instagram {
    background: linear-gradient(135deg, #feda75, #d62976, #962fbf, #4f5bd5);
}

/* Facebook gradient */
.card.facebook {
    background: linear-gradient(135deg, #1877f2, #3b5998);
}

.card.youtube {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: #fff;
}


.card .title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}



/*
.card a.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    color: #111;
    font-weight: 600;
    transition: background 0.3s ease;
}

.card a.btn:hover {
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.6);
}
*/

.card a.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #d99a30; /* Button color */
    color: #fff; /* White text */
    font-weight: 600;
    border: none;
    transition: background 0.3s ease, transform 0.2s ease;
}

.card a.btn:hover {
    background: #cc5500; /* Darker orange on hover */
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}


.basictop {
    display: flex;
    gap: 20px; /* spacing between cards */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin-top: 20px;
}

.basicbottom {
    display: flex;
    gap: 20px; /* spacing between cards */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin-top: 5px;
}

.social {
    display: flex;
    background: aliceblue;
    justify-content: center; /* centers the cards */
    gap: 10px; /* spacing between cards */
    flex-wrap: wrap; /* allows wrapping on smaller screens */
    margin-top: 5px;
    margin-bottom: 5px;
}

.social-heading {
    text-align: center; /* centers the heading */
    display: block; /* ensures it sits on its own line */
    margin-top: 10px;
    margin-bottom: 10px; /* space before the cards */
    font-size: 2rem; /* adjust size as needed */
    font-weight: bold;
    flex: 0 0 100%;
}


bmh2a.social-heading {
    display: block;
    flex: 0 0 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 2rem;
    font-weight: 800;
    color: darkgreen;
    text-transform: uppercase;
    letter-spacing: 1px;
}




.card {
    flex: 1 1 280px; /* each card grows/shrinks, min width 300px */
    max-width: 350px; /* optional: limit card width */
}

bmh2 {
    font-size: 2rem;
    font-weight: 800;
    color: darkgreen; /* matches your motif */
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 3px solid orange; /* accent underline */
    display: inline-block;
    padding-bottom: 6px;
}

bmh3 {
    font-size: 2rem;
    font-weight: 600;
    color: darkgreen; /* matches your motif */
    text-transform: uppercase;
    letter-spacing: 1px;
    /* border-bottom: 1px solid orange; /* accent underline */
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 6px;
}



/*


.navbar-nav .nav-link {
    margin-right: auto; !important;
    margin-left: auto; !important;
}


.navbar a {
    font-size: 1em !important;
}

.navbar-custom .navbar-brand, 
.navbar-custom .navbar-nav .nav-link {
    color: #FFDE59;
}



nav .navbar-nav.ml-auto.mt-2 .nav-item .nav-link {
    color: #ffffff; !important;
}

nav .navbar-nav.mr-auto.mt-2 .nav-item .nav-link {
    color: #ffffff;
    !important;
}




   this works on Fontawesome fa-bars ONLY
    but background is no good
.navbar .navbar-toggle span:hover i {
    color: #d99a30;
}

.iconColor {
    color: #9933CC !important;
}

.navbar .navbar-toggler:focus {
    color: #ff4444;
}


#nav-toggle-button {
    background-color: #d99a30;
}

.navbar-custom button.navbar-toggler.collapsed span.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(108, 99, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
    

a:visited {
    color: #d99a30 !important; 
}

*/