/* Customized CSS */
.flex-col {
  flex-direction: column;
}

.font-big {
    font-size: 35px;
}

.social-font {
    font-size: 20px;
}

.social-font:hover {
    color: #0077b5;
    transition: 0.3s;
}

.uil-heart-alt:hover {
    color: #b50018;
    transition: 0.3s;
}

.uil-github:hover {
    color: #140350;
    transition: 0.3s;
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gap-2 {
    gap: 2rem;
}

@media (max-width: 527px) {
    .xs\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xs\:grid-cols-3 > div.form-group:last-child {
        grid-column-start: 2;
        grid-column-end: 4;
    }
}

.form-group {
    min-width: 80%;
    max-width: 100%;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select.form-control {
    width: 100%;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 12, 25, 0.04);
}

.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}
.text-right {
    text-align: right;
}

.form-control::placeholder {
    color: #cecece;
}

.btn, .btn:focus {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #2d3748;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #a0aec0;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.border-1 {
  border: 1px solid #718096;
  border-radius: 15px;
}

.padding-1 {
  padding: 1rem;
}

.error {
    border: 1px solid red;
}

.error:focus {
  border-color: red;
}

button:disabled {
  cursor: not-allowed;
}