body {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}
h1{
  font-size:20px !important;
  text-align: center;
   padding: 2px;
}
h2{
  font-size:22px !important;
  color:#0a3c61;
  margin-block-start: 0;
  margin-block-end: 0;
}
h3{
  font-size:16px !important;
  color:#0a3c61;
  margin:0 0 -5px 0;
}
h5{
  margin:2% 0 0 2%;
  font-size:30px !important;
  color:#0a3c61;
}

.container {
  margin: 0 auto;
  width: 100%;
  /*height: 100%;*/
  max-width:960px;
  background-color: rgba(255,255,255,1.00);/*border: thin solid rgba(102,101,101,1.00);*/
  border: solid thin #ccc;
}

.row {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.ro_w {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.row_select {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-content: center;
}


.w-10 {
  width: 9%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-21 {
  width: 20.5%;
}

.w-22 {
  width: 22%;
}


.w-25 {
  width: 25%;
}

.w-30 {
  width: 29%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 39%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.completa{
  width:100%;
}

.cintilloblue{
 background-color: #0a3c61;
 color: #fff;

}

input{
 width:95%;
}

.input_layout{
  margin: 5px 0;
}

.ttalignr{
 text-align:right;
 float:right;
 margin-right:10px;
}

.ttcenter{
 text-align:center;
}

.tbmarg20{
  margin: 20px 0;
}
.elegant-input {
  width: 100%;
  /*max-width: 400px;*/
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 12px; /* Rounded corners */
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.elegant-input:focus {
  border-color: #3b82f6; /* Light blue border on focus */
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); /* Subtle glow */
  outline: none;
}

.elegant-input2 {
  width: 60%;
  /*max-width: 400px;*/
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 12px; /* Rounded corners */
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.elegant-input2:focus {
  border-color: #3b82f6; /* Light blue border on focus */
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); /* Subtle glow */
  outline: none;
}


.elegant-select {
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Segoe UI', sans-serif;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  appearance: none;           /* Remove default arrow (cross-browser) */
  -webkit-appearance: none;   /* Safari */
  -moz-appearance: none;      /* Firefox */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpolygon fill='%23333' points='5,7 10,12 15,7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.elegant-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  outline: none;
}


.radio-group {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 16px;
  color: #333;
  /*max-width: 320px;*/
  margin: 1.5em 0;
}

.radio-label {
  font-weight: 500;
  margin-bottom: 0.75em;
  color: #2c2c2c;
}

.radio-option {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 32px;
  margin-bottom: 1em;
  cursor: pointer;
  transition: all 0.3s ease;
  width:15%;
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio {
  position: absolute;
  top: 3px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1.5px solid #aaa;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.2s ease;
}

.radio-option input:checked ~ .custom-radio {
  border-color: #00796b;
  background-color: #00796b;
}

.custom-radio::after {
  content: "";
  position: absolute;
  display: none;
}

.radio-option input:checked ~ .custom-radio::after {
  display: block;
}

.custom-radio::after {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  transition: background 0.2s ease;
}

.green-button {
  background-color: #28a745; /* Bootstrap green, or use 'green' */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width:100%;
  transition: background-color 0.3s ease;
}

.green-button:hover {
  background-color: #218838; /* Darker green on hover */
}


.blue-button {
  background-color: #2958E6; /* Bootstrap green, or use 'green' */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width:20%;
  margin-left:78%;
  transition: background-color 0.3s ease;
}

.blue-button:hover {
  background-color: #4973F2; /* Darker green on hover */
}

.red-button {
  background-color: #FF0000; /* Bootstrap green, or use 'green' */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width:20%;
  margin-left:78%;
  transition: background-color 0.3s ease;
}

.red-button:hover {
  background-color: #FF4242; /* Darker green on hover */
}


.border-top {
  border-top: 1px solid #000; /* You can change the color and width */
}

.border-right {
  border-right: 1px solid #000;
}

.border-bottom {
  border-bottom: 1px solid #000;
}

.border-left {
  border-left: 1px solid #000;
}

.ptb{
 padding: 5px 0 5px 0;
 margin-bottom: 10px;
}

.equipos{
  display:none;
}

.add_more{
  display:none;
}

.hideAll{
 display:none;
}

.is-invalid { border-color:#e53935 !important; outline: none; }
.error-msg { color:#e53935; font-size:12px; margin-top:4px; }