@charset "utf-8";
/* CSS Document */

.panel_m h3 {text-align:center; margin-top:20px; font-size:20px}


label[for=tab-1], label[for=tab-1] {border-top-left-radius: 0.8rem; /*border-bottom:1px solid #3200BE0D;*/}
/*label[for=tab-2], label[for=tab-2] {background: #ff96ff}
label[for=tab-3], label[for=tab-3] {background: #3200be;    color: #fff}*/
label[for=tab-4], label[for=tab-4] {/*background: #c8fafa;*/ border-top-right-radius:0.8rem; border-right-color: #ffffff }

.main_tabs {
  display: flex;
  flex-wrap: wrap; 
  box-shadow: none;
   }

	.main_tabs .input {
  position: absolute;
  opacity: 0;
}
		
		.label {
  width: 25%!important;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
   transition: background 0.1s, color 0.1s;
  white-space: normal;
  margin:0 !important; 
  box-shadow:none;
  text-align:center;
  display: flex;
  padding:5px 2px;
  align-items: center;
  justify-content: center;
  border-right:3px solid #f5d2fa;
 opacity:0.7

}

.label.three {width:33.33%!important}

.label h5 {font-size: 0.8rem; text-align:center; font-weight:normal!important}
.input:focus + .label {
  box-shadow:none;
  z-index: 1;
}

.input:checked + .label {font-weight:800; opacity:1; background:#ffffff}

.input:checked + .label h5{font-weight:800!important}
.panel_m {width:100%}
@media (min-width: 600px) {
  .label {
    width: auto;
  }
}
		.panel_m {
  display: none;
  padding: 20px 30px 30px;
  background:#ffffff;
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
   
}

@media (min-width: 600px) {
  .panel_m {
    order: 99;
  }
}

.input:checked + .label + .panel_m {
  display: block;
}

.left_t {text-align: left!important; }

@media (max-width: 767px){ 
.panel_m {padding: 0 }
.label {
    width: 99%!important;
    margin: 20px 0!important;
    border-radius:0.8rem
	}
}