@import url("misc.css");
@import url("section.css");
@import url("select.css");
@import url("time-block.css");
@import url("validation.css");


:root {
    --dynamic-form-grey: #4A4A4A;
    --dynamic-form-light-grey: #F5F5F5;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--dynamic-form-light-grey);
    color: var(--dynamic-form-grey);
    display: flex;
    align-items: center;
}

@media only screen and (min-width: 600px) {
    .dynamic-form-read-only-view-file-div {
        margin-top: 5px;
    }
}

.read-only-dynamic-form .form-group {
    margin-bottom: 0px;
}

.form-group .btn-group .active {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.ace_editor.fullScreen {
    height: auto !important;
    width: auto;
    border: 0;
    margin: 0;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

body.fullScreen {
    overflow: hidden;
    /*transform breaks position fixed*/
    transform: none!important;
}


/*
Remove up/down arrow in number field
*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}


/* Properly align message with input field */
.uppy-Informer {
    bottom: 0px !important;
    top: 0;
}
.uppy-Webcam-video {
    position: relative !important;
}

.uppy-fileinput, .take-photo, .uppy{
    display: inline-block;
}

.imageeditor-controls {
    margin-bottom: 10px;
}

.form-container {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}
.form-container:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}
.form-label {
    font-size: large;
    color: var(--brightlink-blue);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}
.form-select, .form-control {
    border: 2px solid var(--dynamic-form-light-grey);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    background-color: var(--dynamic-form-light-grey);
}
.form-select:focus, .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 119, 179, 0.25);
    border-color: var(--brightlink-blue);
    background-color: white;
}
/* Textarea, radio, and file input labels should wrap */
.bl-form-group > div:not(.form-floating) label {
    word-wrap: anywhere;
}
/* Add some spacing for hints */
.form-floating label:has(~ [data-bl-hint]) {
    padding-right: 3rem !important;
}
.form-floating > .form-select {
    height: auto;
}
.form-floating > .form-control {
    height: calc(4rem + 4px);
}
.form-floating > .form-control,
.form-floating > .form-select {
    line-height: 1.25;
    padding: 1.5rem 0.75rem 0.5rem;
    transition: padding-top 0.2s ease-out;
}
.form-floating > label {
    padding: 1.25rem 0.75rem;
    --bs-body-bg: var(--dynamic-form-light-grey);
    width: 100%;
    border-radius: 8px;
    white-space: normal;
    overflow: visible;
    height: auto;
    word-wrap: break-word;
    color: var(--brightlink-blue);
}
.form-floating > .has-long-label {
    padding-bottom: 1.625rem !important;
}
.form-floating > label a {
    /* Enable clicking links within floating labels */
    pointer-events: auto;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: translateY(-1.25rem) translateX(0.15rem);
    --bs-body-bg: transparent;
    z-index: 1;
    color: var(--brightlink-blue);
    font-size: large;
}
label.floating {
    font-size: large;
    border-radius: 8px 8px 0 0;
    background-color: #EEE;
    padding-top: 0.1em;
}
label.floating:empty {
    white-space: pre-line;
}
label.floating:empty::before {
    /* non-breaking space so that empty labels still take up a line*/
    content: "\00a0";
}

/* Read-only field styling */
.form-control:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    background-color: var(--dynamic-form-light-grey) !important;
    border-color: var(--dynamic-form-light-grey) !important;
}

/* Read-only floating label */
.form-floating > .form-select[disabled] ~ label,
.form-floating > .form-control.bl-readonly ~ label,
.form-floating > .form-control:disabled ~ label {
    color: var(--dynamic-form-grey) !important;
    opacity: 0.7 !important;
}

/* Position text-input placeholder to the right */
.form-floating > .form-control::placeholder {
    text-align: right;
    opacity: 0.70;
}

/* Ensure placeholder remains visible */
.form-floating > .form-control:focus::placeholder,
.form-floating > .form-control:not(:placeholder-shown)::placeholder {
    color: var(--dynamic-form-grey);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #005a8c; /* dark blue */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 119, 179, 0.3);
}
.btn-outline-primary.bl-radio-btn-checked {
    background-color: var(--brightlink-blue);
    color: white;
}
.bl-radio-btn-option {
    /* Hide indicator circle on radio buttons because we indicate selection through the label/btn */
    position: absolute;
    clip: rect(0,0,0,0);
}
/* Used by radio buttons and time-block breakdowns */
.btn-outline-primary {
    color: var(--brightlink-blue);
    border-color: var(--brightlink-blue);
    border-radius: 20px;
    transition: all 0.3s ease;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--brightlink-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 119, 179, 0.3);
}
.form-check-input:checked {
    background-color: var(--brightlink-blue);
    border-color: var(--brightlink-blue);
}
.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input {
    width: 2em;
    height: 1em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380bdff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.bl-radio-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0.5rem;
}
.bl-radio-btn-group .btn-outline-primary {
    flex: 1;
    min-width: 100px;
}

.btn {
    flex: none !important;
}

/* Textarea styling */
textarea.form-control {
    padding: 0.75rem !important;
    min-height: 100px !important;
    line-height: 1.5 !important;
    background: var(--dynamic-form-light-grey) !important;
    border: 2px solid var(--dynamic-form-light-grey) !important;
    border-radius: 8px !important;
}

/* Hover state */
textarea.form-control:hover:not(:disabled) {
    border-color: var(--brightlink-blue) !important;
}

/* Focus state */
textarea.form-control:focus {
    background: white !important;
    border-color: var(--brightlink-blue) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 119, 179, 0.25) !important;
}

/* Disabled state */
textarea.form-control:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.bl-readonly {
    color: var(--dynamic-form-grey) !important;
    cursor: not-allowed;
}

form .uploaded-file,
form input[type=text],
form input[type=password],
form input[type=tel],
form input[type=email],
form textarea,
form .ace_editor
{
    display:inline-block;
}

span[data-hint] {
    vertical-align: top;
}


/*
 * Classic radio button styling
 */
.classic-radio-style .btn {
    min-width: 1rem;
    border: none;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    text-align: left;
}

.classic-radio-style .btn:hover,
.classic-radio-style .btn:focus,
.classic-radio-style .btn.bl-radio-btn-checked {
    background: transparent;
    box-shadow: none;
    color: var(--brightlink-blue);
}
.classic-radio-style .btn:hover {
    filter: brightness(0.85)
}

/* Show the actual radio input for classic style */
.classic-radio-style .bl-radio-btn-option {
    position: static;
    clip: auto;
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    margin-right: 0.5rem;
    background-color: var(--dynamic-form-light-grey);
    border: 1px solid rgba(0, 0, 0, 0.25);
    appearance: none;
    border-radius: 50%;
}

.classic-radio-style .bl-radio-btn-option:checked {
    background-color: var(--brightlink-blue);
    border-color: var(--brightlink-blue);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    background-position: center;
}

.classic-radio-style .bl-radio-btn-option:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 119, 179, 0.25);
}