@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');


html, body{ margin:0; padding:0; font-family: 'Roboto', sans-serif; scroll-behavior:smooth !important; }

#orderForm { background-color: #fff;     font-family: "Dosis", sans-serif !important; font-optical-sizing: auto;  }

#wrapper{ width: 100%; max-width:768px; margin:0 auto !important; padding:0; }


#orderFormWrapper{ padding:15px 0; }

.orderForm-title h1 { text-align: center; font-weight: 800; font-size: 2.4rem; margin: 3% 0 4% 0; color:#EA2027; }
.sayacbaslik { text-align: center; font-weight: 800; font-size: 1.2rem; margin: 3% 0 4% 0; color:#1B1464; }

.quata  { float:left; width: 100%; text-align: center; font-weight: 800; font-size: 1.2rem;  color:#EA2027;border: 4px solid #1B1464; border-radius: 5px; padding: 10px 0px; margin: 1% 1%; }
#vals #timer div , #vals #labels div { float:left; width: 30%; text-align: center; font-weight: 800; font-size: 1.2rem;  color:#EA2027; border: 4px solid #1B1464; border-radius: 5px; padding: 10px 0px; margin: 1% 1%;}
#vals #labels {display: none !important;}

.orderForm-title small { padding:0; margin:0; font-size:.7rem; font-weight: 700; text-transform: uppercase; }

#orderForm .form-check { font-size:.95rem; position: relative; display: block; padding-left: 1.75rem; padding-top: 7.5px; padding-bottom: 7.5px; border: 1px solid #ccc; background-color: #fff; margin:5px 0; border-radius:4px; }

#orderForm .form-check  .form-check-input { margin-top: 13px !important; }

#orderForm .form-check  .form-check-label { margin-left: 5px !important; font-weight: 700; }

#orderForm .form-check.checked { background-color: #ccf3cd !important; }

#orderForm .form-check.last { margin-bottom: 20px; }

#orderForm .topic { font-weight: 700; font-weight: 1.5rem; color:grey; margin: 10px 0; }

#orderForm .minilabel label { padding: 0; margin: 0; font-weight: 700; font-size: .7rem; text-transform: uppercase;  }

.form-label {display: none !important;}

#orderForm .form-control { padding: 0.7rem; height: auto; font-weight: 700; margin-bottom: 5px; }

#orderForm .input-group-text { height: 48.38px; padding: 0 0.75rem; line-height: 1rem; border-radius: 0.25rem 0 0 0.25rem; border-right: none; font-weight: 700; }

#orderForm label.contract {font-size: .9rem; line-height: 1rem; margin:10px 3px; }

#orderForm .orderFormBtn { font-weight: 800; margin: 20px 0; background-color: #4cd137; text-transform: uppercase; text-shadow: 2px 2px #000; }

footer { background-color: #DDD; color:#000; padding:15px 0 30px 0;  }

footer .footer{ padding:0 0; font-size:.75rem; line-height: 1.3rem; }

footer h6 { font-weight:700; font-size:.9rem; border-bottom:1px solid rgba(0,0,0,0.1); padding:15px 5px; }

footer ul, footer ul li { list-style: none; padding: 0; margin:0; }

footer ul li { list-style: none; padding: 3px 0; margin:0; }

footer ul li a { color:#1a1a1a; font-size:.75rem; }

footer ul li a:hover, footer ul li a:focus { color:#000; }

.modal-body{ height: 450px; overflow: hidden; overflow-y: scroll; }

.orderThanksPage { padding-top:30px; padding-bottom: 30px; font-size:.9rem!important }

.orderThanksPage .list-group-item{ font-size:.9rem !important; }

.mgb {margin-bottom:10px;}
.form-image { margin:5px 0; cursor:pointer; }
.form-image img:last-child{ display:none; }

.form-image.checked img:first-child{ display:none !important; }
.form-image.checked img:last-child{ display:block; }