@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    --xon-form-body-bg: #F2F4F8;
    --xon-form-body-color: hwb(150 19% 79%);
    --xon-form-bg-blue: #007bff;
    --xon-form-bg-white: #fff;
    --xon-form-text-red: #f15e4f;
    --xon-form-border-color: #BCC6D0B2;
    --xon-form-header-bg: #fff;
    --xon-form-header-color: #303633;
    --xon-form-header-border: #BCC6D0B2;
    --xon-form-btn-website-bg: #0061EB;
    --xon-form-btn-website-color: #fff;
    --xon-form-btn-website-hover-bg: #0050d2;
    --xon-form-card-border: #BCC6D0B2;
    --xon-form-btn-bg: #007bff;
    --xon-form-btn-color: #fff;
    --xon-form-btn-hover-bg: #0f62fe;
    --xon-form-input-bg: #fff;
    --xon-form-input-height: 40px;
    background-color: var(--xon-form-body-bg);
    color: var(--xon-form-body-color);
}
.text-body { color: var(--xon-form-body-color); }
.text-red { color: var(--xon-form-text-red); }
.bg-blue { background-color: var(--xon-form-bg-blue); }
.bg-white { background-color: var(--xon-form-bg-white); }
.border-bottom, .border-bottom, .border { border-color: var(--xon-form-border-color); }
.header { background-color: var(--xon-form-header-bg); color: var(--xon-form-header-color); margin-bottom: 40px; }
.header .btn-website { color: var(--xon-form-btn-website-color); background-color: var(--xon-form-btn-website-bg); border-radius: .15rem; transition: all .15s linear; outline: 0; border: none; padding: .35rem 1.5rem;}
.header .btn-website:hover { background-color: var(--xon-form-btn-website-hover-bg); box-shadow: 0 4px 14px 0 rgb(0 0 0 / 5%);}
.rounded-md { border-radius: 1rem; }
.form-card {
    display: flex;
    flex-direction: column;
    background-color: var(--xon-form-bg-white);
    border: 1px transparant var(--xon-form-card-border); 
    padding: 20px 30px;
    min-height: 1196px;
    border-radius: .2rem;    
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0px 0px 5px rgb(211, 222, 245); 
}

.success-form-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--xon-form-bg-white);
    border: 1px transparant var(--xon-form-card-border); 
    padding: 20px 30px;
    border-radius: .2rem;    
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0px 0px 5px rgb(211, 222, 245); 
}

footer {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed #ccc;
    width: 100%;
    background-color: #fff;
    margin-top: auto;
    color: #000;
    padding: 20px;
    align-items: center;
}


.footer-left {
    display: flex;
    align-items: center;
    text-align: center;
    align-content: center;
    justify-content: center;
}

.footer-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-title{
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}

.font-weight-normal {
    font-weight: 300 !important;
}

#record-form input, #record-form select, .file-label {
    background-color: var(--xon-form-input-bg);
    color: var(--xon-form-body-color);
    height: var(--xon-form-input-height);
    font-size: .875rem;
    outline: none!important;
    box-shadow: none!important;
    border-radius: .25rem;
    border: 1px solid #d2d2d2; 
}

#record-form textarea {
    background-color: var(--xon-form-input-bg);
    color: var(--xon-form-body-color);
    font-size: .875rem;
    outline: none!important;
    box-shadow: none!important;
    border-radius: .4rem;
}

#record-form input[type="file"] { height: auto; }
#record-form .custom-file, #record-form .custom-file .custom-file-input .custom-file-label {
    height: var(--xon-form-input-height);
    display: flex; align-items: center;
    box-shadow: none!important;
    outline: none!important;
}

.custom-file-label{
    border-radius: 0.4rem!important;
    background-color: rgb(249 250 251);
}
#record-form input:hover, #record-form select:hover { box-shadow: 0 4px 14px 0 rgb(0 0 0 / 5%)!important; }
#record-form input:focus, #record-form select:focus { border: 1px solid var(--xon-form-bg-blue) !important;}
#record-form input[type="file"] { height: auto; }
#record-form .custom-file, #record-form .custom-file .custom-file-label {
    height: var(--xon-form-input-height);
    font-size: .875rem;
    display: flex; align-items: center;
    box-shadow: none!important;
    outline: none!important;
}

#record-form .btn[type="submit"], .success-wrapper .btn {
    background-color: var(--xon-form-btn-bg);
    color: var(--xon-form-btn-color);
    border-radius: .25rem;
    transition: all .15s linear;
    outline: 0;
    border: none;
    box-shadow: none!important;
}

.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    max-width: 4rem;
}

#record-form .btn[type="submit"]:hover, .success-wrapper .btn:hover { background-color: var(--xon-form-btn-hover-bg); }
#record-form .custom-file .custom-file-label:after {
    height: var(--xon-form-input-height);
    display: flex; align-items: center;
}

.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before,.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--xon-form-border-color)!important;
}

.custom-file-input.is-valid~.custom-file-label,.was-validated .custom-file-input:valid~.custom-file-label {
    border-color: var(--xon-form-border-color)!important;
}

.custom-file-input.is-valid:focus~.custom-file-label,.was-validated .custom-file-input:valid:focus~.custom-file-label {
    border-color: var(--xon-form-border-color)!important;
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.25)
}

#record-form .required-star { color: var(--xon-form-text-red); font-weight: bold; margin-left: 0.25rem; }
#record-form .form-group { margin-top: 1.5rem; margin-bottom: 0;}
#record-form .form-group .iti { width: 100%; }
#record-form button { border-radius: .25rem; }

.success-wrapper img {
    max-width: 150px;
}

.submit-button{
    border-radius: 0.25rem!important;
}

.success-screen{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 160px;

}
.info-img{
    width: 18px; 
    height: 18px;
    margin-bottom: 3px;
}

.project-logo-div {
    margin-top: 1rem!important;
    margin-left: 0px!important;
    margin-bottom: 1.5rem;
    max-height: 150px;
    max-width: 150px;
}

.logo-style {
    margin-left: 0px!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 50px;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--xon-form-bg-blue)!important;
    outline: 0;
    box-shadow: none!important;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--xon-form-border-color)!important;
    padding-right: calc(1.5em + .75rem)!important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23007bff" class="bi bi-check-lg" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/></svg>');
    background-repeat: no-repeat;
    background-position: right calc(.375em + 1rem) center;
    background-size: calc(.8em + .5rem) calc(.8em + .5rem);
}

.form-control.is-invalid,.was-validated .form-control:invalid {
    border-color: #dc3545;
    margin-right: calc(1.5rem + .75rem)!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + 1rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 10"%3E%3Cpath fill="currentColor" d="M4 4l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4A1 1 0 1 1 .707.707L4 4z" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right calc(0 + .375rem) center;
    padding-right: 20px;
}

.clickable-text {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    margin-bottom: 75px;
}

.clickable-text:hover {
    color: #0056b3;
}

.success-footer{
    top:0;
}

.success-image{
    margin-top: 75px;
}
    
@media (max-width: 768px) {
    .container-fluid { padding-left: 0; padding-right: 0; }
    .form-card{
        border: none;
        box-shadow: none;
        padding: 10px 0;
        min-height: unset;
    }

    .success-form-card{
        border: none;
        box-shadow: none;
        padding: 10px 0;
        min-height: unset;
    }

    .footer-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .logo-link{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    body{
        background-color: var(--xon-form-bg-white);
    }
}

.input-container {    
    background-color: rgb(249 250 251)!important;
    position: relative!important;
    width: 100%!important;
}

.input-container input {
    width: 100%;
    padding-left: 30px; 
    padding-right: 50px; 
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 0.4rem!important;
    outline: none;
}

.input-container select {
    padding-left: 30px; 
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 0.4rem!important;
    outline: none;
}

.input-container .icon {
    z-index: 5;
    position: absolute;
    left: 10px; 
    top: 53%;
    transform: translateY(-50%);
    pointer-events: none; 
}

.input-container label {
    padding-left: 30px; 
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 0.4rem!important;
    outline: none;
    position: relative;
}

.input-container-custom {
    height: 40px;
    background-color: rgb(249 250 251);
    border-radius: 0.4rem!important;
    position: relative;
    width: 100%!important;
}

.input-container-custom input{
    height: 40px;
    background-color: rgb(249 250 251);
    border-radius: 0.4rem!important;
    position: relative;
    width: 100%!important;
}


.input-container-custom label {
    padding-left: 30px; 
}

.input-container-custom .icon {
    z-index: 5;
    position: absolute;
    left: 10px; 
    top: 43%;
    transform: translateY(-50%);
    pointer-events: none; 
}

.icon-down{
    margin-top: 3px;
}

.file-label {
    position: relative;
    margin-bottom: 0; 
}

.custom-size{
    max-width: 100px;
}