:root {
  /*--blue: #6495ed;*/
  --white: #FFF;
  --main-color: #f7cf24;
  --secundary-color: #90c2dc;
  --secundary-shadow: #3c4e57;
  --gray-logo: #665D5B;

  --blue: #3c8dbc;
  --light-gray: #8f8f8f;
  --gray: #444;
  --background: #ecf0f5
}


h3 { font-size: 1.75rem; }

p {
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;
    font-size: 11px;
    color: #666;
    margin: 10px 0; 
}

.row { margin: 0; }

[invisible],
.hidden { visibility: hidden !important }
.show { visibility: visible !important }

.danger { border: solid 1px red !important }


*.danger:focus-visible,
*.danger:focus {
	outline: 1px solid red;
}

.remove:hover,
.error { color: red !important; }

.remove { cursor: pointer; }

#wpform {
	padding: 10px 0;
}

#wpform .small,
#wpform small {
	font-size: 70%;
    font-weight: 400;
    margin-bottom: 2px;
}
/*
#wpform small[hidden] {
    visibility: hidden;
}*/

#wpform label {
	display: inline-block;
    font-weight: bold;
}

label[required]::after {
    content: ' *';
    color: red;
}

button[disabled] {
    background: #dddddd;
    border-color: #dddddd;
    color: var(--secundary-color);
    text-shadow: 1px 1px 1px var(--secundary-shadow);
    cursor: not-allowed !important;
}


input.error {
	border: solid 1px red !important;
}

input.success {
	border: solid 2px green !important;
}

.card-preview {
    width: 450px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -225px;
    border: solid 4px white;
    border-radius: 30px;
}

.link {
    color: #007bff;
    cursor: pointer;
}

    .link:hover {
        color: #0056b3;
        text-decoration: underline;
    }

#wpform select,
#wpform input {
	height: 38px;
}

#wpform select,
#wpform textarea,
#wpform input {
	display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.breadcrumb-form {
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.circle {
    color: #FFFFFF;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border:solid 2px var(--main-color) ;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
}

.circle.selected {
    border-color: var(--secundary-color);
    background-color: var(--secundary-color);
}

.button-form {
    background: var(--main-color);
    color: white;
    text-shadow: 1px 1px 1px #ffebeb;
    border-radius: 4px;
    font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
    cursor: pointer;
    border: none;
    padding: 3px 9px;
}

.button-secundary {
    background: var(--secundary-color);
    color: white;
    text-shadow: 1px 1px 1px #ffebeb;
    border-radius: 4px;
    font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
    cursor: pointer;
    border: none;
    padding: 3px 9px;
}

.modal {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.5);
}

.display {
	display: block;
}

.loader {
	position: relative;
    top: 48%;
	width: 50px;
    margin: auto;
	padding: 8px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #25b09b;
	--_m: 
	conic-gradient(#0000 10%,#000),
	linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	      mask: var(--_m);
	-webkit-mask-composite: source-out;
	      mask-composite: subtract;
	animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}