/* import open sans font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/* Reset CSS style setting */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
body{
    color: #232323;
    font-size: 16px;
    font-family: 'Open Sans', Arial,  Helvetica, 'sans-serif';
    line-height: normal;
    background-color: #ffffff;
}
a{
    color: #232323;
    text-decoration: underline;
}
*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Header Settings */
header.header,  footer.footer{
    background-color: #243E8B;
}
header.header{
 display: flex;
 justify-content: space-between;
    flex-wrap: nowrap;
}
.logo{
margin-left:5%;
}
.logo a{
 display: inline-block;
}
.logo svg{
 width:200px;
}
.consumer-logo{
 background: #E5F5FF;
    width: 130px;
    padding: 12px 17px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #003595;
    font-weight: 600;
}
h1{
 font-size: 2.4761904761904763rem;
 line-height: 105%;
 font-weight: lighter;
 margin-bottom: 1rem;
}
.form-control{
 border-radius: 2rem;
 background: white;
 border: 1px solid #D5D5D5;
 padding: 0.6666666666666666rem 1.1428571428571428rem;
 height: calc(1.5em + 1.1428571428571428rem + 2px);
 margin: 1rem 0 1.5rem;
}
.btn-primary{
 background: #003595;
 border-radius: 2rem;
 border-color: #003595;
 color: white;
 font-weight: 400;
 text-decoration: none;
}
.btn-ctn{
 text-align: right;
 margin-top: 2.761904761904762rem;
}
.thankyou .btn-ctn{
 margin-top:0
}
label, .wearer-title{
 font-size: 0.5714285714285714rem;
 line-height: 125%;
}
/* Main Body setting */
.main-body{
 width: 60%;
 margin: 0 auto 4.142857142857143rem;
}
.wearer-wrp .wearer-title{
 display: block;
}
main header .header-ctn-wrp{
 position: relative;
 margin-bottom: 6.9523809523809526rem;
}
main header .header-ctn-wrp.thankyou{
 margin-bottom: 0rem;
}
main header .header-ctn-wrp .header-img img{
 width: 100%;
 display: block;
}
main header .header-ctn-wrp .header-cten-ctn{
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
 background: linear-gradient(90deg, rgba(0, 53, 149, 0.59) 26.25%, rgba(0, 53, 149, 0) 78.33%);
 color: white;
 display: flex;
 align-items: center;
 flex-direction: column;
    justify-content: space-between;
}
main header .header-ctn-wrp .header-cten-ctn div > div{
 width: 44%;
 text-shadow: 0px 0 1px black;
}
.t30-logo{
 align-self: flex-start;
 margin-top: 1rem;
}
.scroll-logo-wrp{
 text-align: center;
 margin-bottom: 1.9523809523809523rem;
 font-size: 0.7619047619047619rem;
}
main header .header-ctn-wrp .header-cten-ctn div.scroll-logo-wrp > div{
 width: 100%;
}
/* Bootstrap select dropdown setting */
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
 width: 100%;
}
.bootstrap-select .dropdown-toggle .filter-option{
 overflow: visible;
}
.btn-light{ 
 border-radius: 2rem;
 background: white;
 border: 1px solid #D5D5D5;
 padding: 0.6666666666666666rem 1.1428571428571428rem;
 height: calc(1.5em + 1.1428571428571428rem + 2px);
 margin: 1rem 0 1.5rem;
}
.wearer-btn{
 border-radius: 0.14285714285714285rem;
 background: white;
 border: 1px solid #C4C4C4;
 text-indent: -9999px;
 overflow: hidden;
 width: 25px;
 height: 25px;
 position: relative;
}
button.wearer-btn:before {
    content: '';
    height: 2px;
    background: #232323;
    width: 12.5px;
    display: block;
    position: absolute;
    top: 50%;
    transform: rotate(90deg);
    left: 50%;
    margin-left: -5.8px;
}
button.wearer-btn:after {
    content: '';
    height: 2px;
    background: #232323;
    width: 12.5px;
    display: block;
    position: absolute;
    top: 50%;
}
.form-check{
 padding-left: 2rem;
 font-size: 0.5714285714285714rem;
 margin-bottom: 1.5rem;
}
.form-check-label{
 cursor: pointer;
}
.form-check-input{
 margin-left: -2.25rem;
    height: 20px;
    width: 20px;
 border-radius: 3px;
 margin-top: 0;
}
/* footer setting */
.footer .row{
 align-items: center;
 padding: 10px 0;
}
.footer ul{
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 justify-content: space-between;
}
.footer ul li{
 display: flex;
 align-items: center;
}
.footer ul li .circle{
 display: inline-block;
 width: 5px;
 height: 5px;
 background: white;
 border-radius: 50%;
 margin-left: 20px;
}
.footer ul li a{
 color: white;
 text-decoration: none;

}
.footer ul li a:hover{
 text-decoration: underline;
}
.footer-logo{
 text-align: right;
}
.footer-logo img{
 width: 63px;
}

/* Rating setting */
.rate-wrp{
 display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
 position: relative;
}
.rate:not(:checked) > input {
    position:absolute;
    opacity: 0;
 visibility: hidden;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:2.5rem;
    color:rgb(0, 0, 0);
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
.rate > input:checked ~ label {
    color: #b9a358;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #5484dd;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #b9a358;
}


/* Mobile Setting */
@media only screen and (max-width: 767px){
 body{
  font-size: 14px;
 }
 h1{
  font-size: 1.3rem;
  line-height: normal;
  margin-bottom: .5rem;
 }
 .main-body{
  width: 100%;
 }
 main header .header-ctn-wrp{
  margin-bottom: 4rem;
 }
 main header .header-ctn-wrp .header-cten-ctn div > div{
  width: 100%;
 }
 main header .header-ctn-wrp .header-cten-ctn{
  flex-direction: row;
 }
 .t30-log-ctn, .scroll-logo-wrp{
  display: none;
 }
 .footer ul{
  flex-direction: column;
 }
 .footer ul li{
  margin-bottom: .5rem;
 }
 .footer ul li .circle{
  display: none;
 }
 .footer-logo{
  text-align: left;
 }
}