/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .foursides_menu_class_title{
	width:100%;
	font-size: xx-large;
	font-weight: bold;
	text-align: center;
}

 .foursides_menu_section_title{
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 3.5rem;
 }

 .foursides_menu_section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
 }

 .foursides_menu_item_container {
    width: 25%;
    max-width: 25%;
    padding: 1em;
    font-size: large;
 }
 
 .foursides_menu_item_img {
	width: 100%;
 }

 .foursides_menu_item_name{
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: larger;
 }

/* LOW-RES DESKTOPS */
@media only screen 
  and (min-device-width: 741px) 
  and (max-device-width: 1280px) /* 1024 ? */
{
	.foursides_menu_item_container{
		width:33%;
		max-width:33%;
	}
}

/* NORMAL MOBILE PHONES */
@media only screen 
   and (min-device-width: 200px) 
   and (max-device-width: 740px) 
{
    .foursides_menu_section_title{
        font-size: 3.2rem;
     }
    .foursides_menu_item_container {
        width: 100%;
        max-width: 100%;
        padding: 2.0rem;
    }
    .foursides_menu_item_name{
        font-size: 2.8rem;
    }
    .foursides_menu_item_description{
        font-size: 1.3rem;
    }
}

/* FOURSIDES DMS full-screen display */
html.foursides-dms-display,
html.foursides-dms-display body.foursides-dms-display {
   height: 100%;
   margin: 0;
   overflow: hidden;
}

.bmgr_custom_menu_container{
   padding:1em;
}

.foursides-dms-display #bmgr_custom_menu_container {
   display: flex;
   flex-direction: column;
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
}


.foursides-dms-display .dms_block {
   flex: 0 0 auto;
}

.foursides-dms-display .dms_block--dss {
   flex: 1 1 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

.foursides-dms-display .dms_dss {
   flex: 1 1 0;
   min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

/* FOURSIDES MENU CSS */
.dms_category_name {
   text-align: center;
   font-family: "Source Code Pro", monospace;
   font-weight: 700;
   font-size: 85px;
   color: blue;
   height: 110px;
   padding-top: 2px;
   border-bottom: 2px dashed rgb(86, 86, 86);
}
.dms_category_item {
   border-bottom: 2px dashed rgb(86, 86, 86);
}

.dms_category_item_line1 {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-family: "Source Code Pro", monospace;
   font-weight: 600;
   font-size: 60px;
   color: white;
   text-shadow: rgb(143, 134, 134) 3px 3px 2px;
} 

.dms_category_item_line2 {
   font-family: "Source Code Pro", monospace;
   font-weight: 600;
   font-size: 28px;
   color: white;
}

.dms_block .img_ad {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

.foursides-loyalty-enrollments {
   margin: 2em 0;
   max-width: 960px;
}

.foursides-loyalty-enrollments__scroll {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border: 1px solid #ddd;
   border-radius: 6px;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.foursides-loyalty-enrollments__table {
   width: 100%;
   min-width: 520px;
   border-collapse: collapse;
   font-family: "Source Sans Pro", sans-serif;
   font-size: 1rem;
   line-height: 1.4;
   color: #333;
}

.foursides-loyalty-enrollments__table thead th {
   padding: 0.85em 1em;
   background: #1a1a1a;
   color: #fff;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   text-align: left;
   border-bottom: 3px solid #f1d204;
   white-space: nowrap;
}

.foursides-loyalty-enrollments__table tbody td {
   padding: 0.9em 1em;
   border-bottom: 1px solid #ebebeb;
   vertical-align: middle;
}

.foursides-loyalty-enrollments__table tbody tr:last-child td {
   border-bottom: none;
}

.foursides-loyalty-enrollments__table tbody tr:nth-child(even) {
   background: #f9f9f9;
}

.foursides-loyalty-enrollments__table tbody tr:hover {
   background: #fffbe6;
}

.foursides-loyalty-enrollments__member {
   font-weight: 600;
   color: #111;
}

.foursides-loyalty-enrollments__member--generic {
   font-weight: 400;
   font-style: italic;
   color: #888;
}

.foursides-loyalty-enrollments__phone {
   font-family: "Source Code Pro", "Consolas", monospace;
   font-size: 0.92rem;
   color: #666;
   white-space: nowrap;
}

.foursides-loyalty-enrollments__enrolled time {
   display: flex;
   flex-direction: column;
   gap: 0.15em;
}

.foursides-loyalty-enrollments__date {
   font-weight: 600;
   color: #222;
   white-space: nowrap;
}

.foursides-loyalty-enrollments__time {
   font-size: 0.85rem;
   color: #888;
   white-space: nowrap;
}

.foursides-loyalty-enrollments__col-points,
.foursides-loyalty-enrollments__points {
   text-align: right;
   white-space: nowrap;
}

.foursides-loyalty-enrollments__points {
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: #111;
}

.foursides-loyalty-enrollments__notice {
   margin: 1em 0;
   padding: 0.85em 1em;
   border-left: 4px solid #f1d204;
   background: #f9f9f9;
   color: #555;
}

@media only screen and (max-width: 640px) {
   .foursides-loyalty-enrollments__table thead th,
   .foursides-loyalty-enrollments__table tbody td {
      padding: 0.75em 0.85em;
   }

   .foursides-loyalty-enrollments__table {
      font-size: 0.95rem;
   }
}