.errorMsg{
	color:red;
}
.pageList{
	margin-bottom: 20px;
}
/* fileupload */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
.file-container {
    width: 100%;

    .file-upload {
        width: 100%;
        display: flex;
        background-color: #eeeeee;
        border-radius: 15px;
        transition: all 0.3s;

        &:hover {
            box-shadow: 0px 8px 15px -8px rgba(0, 0, 0, 0.5);
        }

        >div {
            width: 100%;
            background-color: #f8f8f8;
            padding: 25px;
            margin: 25px;
            border-radius: 10px;
            border: 1px dashed #606060;
            text-align: center;
            cursor: pointer;

            >i {
                font-size: 3.125em;
                color: #2b2b2b;
            }

            >p,
            span,
            div {
                font-size: 0.875em;
                line-height: 30px;
                color: #2b2b2b;
            }

            >div {
                width: max-content;
                padding: 0 10px;
                margin: 0 auto;
                border: 1px solid #606060;
                border-radius: 8px;
            }
        }
    }

    >table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875em;
        margin-top: 20px;

        & th,
        td {
            border-bottom: 1px solid #dbdbdb;
            padding: 8px;
            text-align: left;
			width:25%;
        }

        >tbody {
            >tr {
                >td {
                    &:nth-child(1) {
                        font-weight: bold;
                    }

                    &:nth-child(2) {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        max-width: 1px;
                    }

                    &:nth-child(3) {
                        text-align: center;
                    }

                    >img {
                        border-radius: 5px;
                        box-shadow: 0px 8px 15px -8px rgba(0, 0, 0, 0.5);
						width:60%;
                    }

                    &.no-file {
                        text-align: center;
                        font-weight: normal;
                    }

                    > i{
                        font-size: 1.125em;
                    }
					.fileSize{
						font-size: 16px;
						color: #666;
					}
                }
            }
        }

        & button {
            background-color: #f53636;
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            &:hover {
                box-shadow: 0px 8px 15px -8px rgba(0, 0, 0, 0.5);
            }

            >i {
                color: #ffffff;
                font-size: 1.125em;
            }
        }
    }
}
/* 20250122 */
.forMobile{
	display:none;
}
.hero{
	background-color: var(--metroRed);
}
.hero h1{
	text-shadow: 2px 2px 8px #000;
}
.hero#hero_login > .wrapper{
	background:none !important;
}
.hero#hero_landing > .wrapper,
.hero#hero_vote > .wrapper,
.hero#hero_success > .wrapper{
	 background-image:none;
}
.hero p:not(.pre_title) {
  text-shadow: 2px 2px 8px #000;
}
.bgImg{
  background-size: cover !important;
  max-width: 100% !important;
  background-repeat: no-repeat;
  background-position: center;
}
.hero .btn,
.callout .btn{
	color:#000;
}
.hero .btn:hover,
.callout .btn:hover{
	background-color: var(--metroRed);
  color: white;
  /*border-color: var(--metroRed);*/
}
.callout{
	background-color: #d1001a;
}
.callout > .wrapper{
	background-size: 100% auto !important;
	background-position: right bottom;
}
@media (max-width: 768px){
	.forMobile{
		display:block;
	}
	.hero h1{
		font-size: calc(clamp(4.4rem, 2.143vw + 3.174rem, 7.7rem));
	}
	.hero#hero_landing > .wrapper{
		 background-image:none !important;
	}
}
/* 20250602 */
#hero_login .red_bar{
	background: #d0001a;
  width: 100%;
  height: 250px;
  position: absolute;
  top: 10%;
  z-index: 1;
}
#hero_landing .red_bar{
	background: #d0001a;
  width: 100%;
  height: 250px;
  position: absolute;
  top: 16%;
  z-index: 1;
}
#hero_vote .red_bar{
	background: #d0001a;
  width: 100%;
  height: 180px;
  position: absolute;
  top: 20%;
  z-index: 1;
}
.hero .content{
	z-index: 1;
  position: relative;
}
@media (min-width: 768px) {
	.grid_panel .grid_panel__body .image:nth-child(6) {
		grid-row: 3;
		grid-column: 3 / 4;
	  }
	.grid_panel .grid_panel__body .image:nth-child(7) {
		grid-row: 3;
		grid-column: 4 / 4;
	  }  
}
@media (max-width: 768px){
	.hero .pre_title .underline{
		padding-bottom: 4rem;
	}
	.red_bar{
		display:none;
	}
	
}