.input-group{
    position: relative;
    max-width: 850px;
    font-size: 16px;
    cursor: pointer;
}

.input{
    display: block;
    width: 100%;
    padding: 16px 14px;
    height: 56px !important;
    border: none;
    background-color: white !important;
    font-size: 16px;
}

.placeholder {
    position: absolute !important;
    color: black;
    background: #fff;
    font-size: 16px;
    font-weight: 400 !important;
    top: -12px !important;
    left: 12px;
    padding: 0 5px;
    margin-left: 10px;
    pointer-events: none;
    transition: 0.3s;
}

.password{
    position: absolute;
    padding: 0;
    top: 15px;
    right: 10px;

    width: 24px;
    height: 24px;

    border: none;
    background-color: transparent;

    cursor: pointer;
}

.input-group:has(input:required) .placeholder::after {
    content: " *" !important;
    color: red !important;

    /* Overriding plugin styles*/
    display: inline !important;
    position: static !important;
    top: auto !important;
    opacity: 1 !important;
}

.input:focus + .placeholder,
.input:placeholder-shown + .placeholder {
    color: var(--text-disabled) !important;
}

.input-group:has(input:focus) .placeholder,
.input-group:has(input:not(:placeholder-shown)) .placeholder {
    top: -8px !important;
    font-size: 14px !important;
    color: #212B36 !important;
    background: #fff;
}

.input.standard:focus,
.input.filled:focus{
    outline: none;
}

.input.standard:focus{
    border-bottom: 1px solid black;
}

.input::placeholder {
    color: #737573;
}

.input.outlined{
    border: 1px solid rgba(145, 158, 171, 0.32);
    border-radius: 8px;
}

.input.standard{
    padding: 16px 5px 4px 5px;
    border-bottom: 1px solid rgba(145, 158, 171, 0.32);
    border-radius: 0;
}

.input.standard + .placeholder{
    left: -10px;
}

/* Filled Rewrite Styles */
.input.filled{
    padding: 24px 14px 8px 16px;
    border: none;
    border-radius: 8px;
    background: rgba(145, 158, 171, 0.08);
}
.input.filled + .placeholder{
    background: transparent;
}

.input.filled::placeholder{
    color: rgba(145, 158, 171, 0.08);
}

.input.filled:focus + .placeholder,
.input.filled:not(:placeholder-shown) + .placeholder {
    top: 5px;
    font-size: 14px;
    color: #212B36;
}

/* Selects */
.select-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    min-width: 150px;
    max-width: 850px;
    height: 56px !important;
    cursor: pointer;
    vertical-align: middle;
    transition: 0.3s ease-in-out;
}

.select-container select{
    padding: 16px 14px;
    border: none;
    appearance: none;
    background: white;
    width: 100%;
    height: 100%;
    font-size: 16px;
    cursor: pointer;
}

.select-container .placeholder {
    position: absolute !important;
    z-index: 2;
    color: black;
    background: #fff;
    font-size: 14px !important;
    font-weight: 400 !important;
    top: -8px !important;
    left: 8px;
    padding: 0 5px;
    margin-left: 10px;
    pointer-events: none;
    transition: 0.3s;
}

.select-container:has(select:required) label::after {
        content: " *" !important;
        color: red !important;
}

.select-container > img {
    position: absolute;
    width: 20px !important;
    width: 20px !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.select-container.open > img {
    transform: translateY(-50%) rotate(270deg);
}

.select-box.outlined {
    padding: 8px 32px 8px 14px;
    border: 1px solid rgba(145, 158, 171, 0.32);
    border-radius: 8px;
}

select.error,
input.error {
    border-color: #dc3545 !important;
}

.input-group label.error{
    display: none !important;
}
.datepicker-group label.error{
    display: none !important;
}

.edit-input {
    height: 38px !important;
    border-radius: 6px !important;
}

/* Checkboxes */
.checkbox-group {
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
}

.checkbox-group label {
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    text-align: left;
}

.chk-primary {
    --chk-color: var(--app-primary);
}

.chk-secondary {
    --chk-color: var(--text-disabled);
}

input[type="checkbox"]:not([class*="chk-"]) {
    --chk-color: var(--app-primary) !important;
}

input[type="checkbox"] {
    position: relative;
    appearance: none;
    margin: 12px;
    height: 20px !important;
    width: 20px !important;
    border: 2px solid #637381 !important;
    border-radius: 4px !important;
    flex-shrink: 0;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: var(--chk-color) !important;
    border: 2px solid var(--chk-color) !important;
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.3 5.7c.4.4.4 1 0 1.4l-11 11c-.4.4-1 .4-1.4 0l-5-5c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l4.3 4.3L18.9 5.7c.3-.4 1-.4 1.4 0z"/></svg>');
    background-size: cover;
}

.checkbox-group label {
    text-transform: capitalize;
}

/* Input Photo */
.input-file-group{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding: 24px;
    max-width: 630px;
    max-height: 100%;

    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: white;

    gap: 24px;
}

.app-file-input-group--multiple{
    flex-direction: column;
    align-items: stretch;
}

.app-file-input-copy{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.app-file-input-title{
    margin: 0;
}

.app-file-input-selection{
    color: #2A3647;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.input-file{
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px !important;
    background-color: transparent;
    height: 100px !important;
    width: 100px !important;

    border: 2px dotted var(--text-disabled);
    border-radius: 50%;

    cursor: pointer;
}

.input-file-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 15px;
    border-radius: 8px;

    color: var(--text-disabled);
    background: rgba(145, 158, 171, 0.08);
    border: 1px dotted rgba(145, 158, 171, 0.48);

    cursor: pointer;
    gap: 3px;
}

.input-file-button > img {
    width: 24px;
}

.app-file-input-group .input-file-button {
    flex: 0 1 240px;
    max-width: 240px;
}

.app-file-input-group--multiple .input-file-button {
    flex-basis: auto;
    width: 100%;
}

.input-file > img{
    position: absolute;
    border-radius: 50%;
    height: 90px !important;
    width: 90px !important;
    filter: brightness(60%);
}

.input-file-group div{
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.upload-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #414b4d;
    height: 90px;
    width: 90px;
    z-index: 999;
    gap: 10px;

    img {
        width: 24px;
        height: 24px;
    }
}


/* Grid Layout*/

.form-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 52px;
    grid-row-gap: 24px;
    grid-column-gap: 16px;

    margin-bottom: 24px;
}

.form-field {
    align-content: center;
}

.error-grid-field {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 8px;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 8px;
    align-items: center;
    gap: 12px;
}

.form-grid-reports {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 52px;
    grid-row-gap: 24px;
    grid-column-gap: 16px;
    margin-bottom: 24px;
}

.list-field {
    max-height: 200px;
    grid-column: 3 / 5;
    grid-row: 1 / span 3;
}

.photo-field {
    grid-column: 3 / 4;
    grid-row: 3 / span 2;
}

.list-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
    grid-column-gap: 15px;
    margin-bottom: 24px;
}

.list-field-reports {
    height: 208px !important;
}

@media (max-width: 990px) {
    .list-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .form-grid{
        grid-template-columns: repeat(2, 1fr); 
    }

    .photo-field {
        grid-column: 2 / 3;
        grid-row: 4 / span 3;
    }
}

@media (max-width: 550px) {
    .form-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .photo-field {
        grid-column: 1 / 2;
        grid-row: 10 / span 3;
    }
}

@media(max-width: 1250px){
    .form-grid-reports {
        grid-template-columns: repeat(2, 1fr);
    }

    .list-field {
        max-height: 200px;
        grid-column: 1 / 3;
        grid-row: 3 / span 3;
    }
}

@media (max-width: 710px) {
    .form-grid-reports {
        grid-template-columns: repeat(1, 1fr);
    }

    .list-field {
        max-height: 200px;
        grid-column: 1 / 2;
        grid-row: 5 / span 3;
    }
}

/* Form List Wrapper */

.list-wrapper {
    position: relative;
    padding: 10px;
    border-radius: 16px;
    background: #ffffff;
    height: 250px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-scrollable {
    overflow-y: auto;
    max-height: 100%;
    padding-right: 8px;
    box-sizing: content-box;
    border: none !important;
}

.list-group-item{
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
    gap: 16px;
}

.list-group-item::before {
    display: none;
}

.list-group{
    border-radius: 12px;
}

.list-group::-webkit-scrollbar {
    width: 8px;
}

.list-group::-webkit-scrollbar-track {
    background: transparent;
}

.list-group::-webkit-scrollbar-thumb {
    background: rgba(99, 115, 129, 0.48);
    border-radius: 12px;
}

.flex-container{
    display: flex;
    flex-direction: row;
}

/* DatePickers */

.datepicker-group {
    position: relative;
    max-width: 650px;
    font-size: 16px;
}

.date-input {
    display: block !important;
    width: 100% !important;
    border: 1px solid rgba(145, 158, 171, 0.32) !important;
    border-radius: 8px !important;
    background-color: white;
    font-size: 16px !important;
    padding: 16px 14px;
    height: 56px !important;
    font-size: 16px;
}

.app-datepicker-container {
    position: relative;
}

.app-datepicker {
    position: absolute;
    z-index: 1100;
    margin-top: 2px;
    background-color: white;
    padding: 10px;
    border-radius: 16px;
    box-shadow: 0 24px 48px 0 rgba(145, 158, 171, 0.16);
}

.app-datepicker button {
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background: transparent;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
}

.app-datepicker select, .app-datepicker .year-input{
    height: 30px !important;
}

.days, .dates {
    display: grid;
    grid-template-columns: repeat(7, 32px);
    gap: 10px;
}

.days span {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.dates button {
    color: black;
    aspect-ratio: 1;
    transition: 0.3s ease-in-out;
}

    .dates button:hover {
        background-color: var(--app-selection) !important;
    }

.dates button.today {
    border: 1px solid slategrey;
}

.dates button.selected {
    background-color: var(--app-primary) !important;
    color: white;
}

.dates button:disabled {
    color: white;
    cursor: default;
}

.dates button.disabled {
    color: slategray;
    cursor: default;
}

.dates button:disabled:hover {
    background-color: transparent;
}

.app-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.app-datepicker-header select, .app-datepicker-header input {
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 4px !important;
}

.app-datepicker-header input {
    max-width: 64px;
}

.app-datepicker-header button {
    color: slategray;
}

.app-datepicker-header button:hover {
    color: mediumpurple;
}

.app-datepicker-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.app-datepicker-footer button {
    padding: 5px;
    border-radius: 0;
    color: var(--app-primary)
}

.app-datepicker-footer button:hover {
    background-color: #eee;
}

.datepicker-group .placeholder {
    background: white;
    top: -8px;
    left: 10px;
    padding: 0 5px;
    margin-left: 10px;
    pointer-events: none;
}

.datepicker-group img {
    position: absolute;
    top: 15px;
    right: 10px;
    margin-left: 10px;
    width: 24px !important;
    pointer-events: none;
    cursor: pointer;
}

.datepicker-extra-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.datepicker-extra-btn {
    padding: 4px 12px;
    font-size: 12px;
    background: #eee;
    border-radius: 3px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.datepicker-extra-btn:hover {
    background: #eee;
}


/* PLugins overrides */

.select2-container.form-control {
    margin-top: 0px;
    height: 56px !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.select2-drop {
    border-radius: 0 0 8px 8px;
}

.select2-container.form-control a .select2-arrow {
    top: 17px;
    width: 24px;
    height: 24px;
    background: url(../Icons/Shared/select-arrow.svg) no-repeat !important;
}

.select2-container .select2-choice .select2-arrow b {
    display: none;
}

.select2-container .select2-choice > .select2-chosen {
    position: relative;
    top: 6px;
}

.select2-container.select2-allowclear .select2-choice abbr {
    display: none;
}

input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search-md]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.md-textarea:focus:not([readonly]) {
    border-bottom: none;
    -webkit-box-shadow: none;
    box-shadow: none; 
}

.datepicker.dropdown-menu {
    display: none !important;
}

.material-paragraph {
    display: flex;
    align-content: center;
    align-items: center;
}

.material-exclamation{
    position: relative !important;
    margin: 0 !important;
}

#announcement_Message p:first-child i {
    margin: 0 !important;
    position: relative !important;
}

.section-rules {
    text-align: left !important;
    margin-bottom: 10px !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

.signature-container {
    display: flex;
    align-items: center;
    align-content: center;
}

#accordian-menu.stick {
    right: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}

#accordian-menu.stick::-webkit-scrollbar {
    width: 8px;
}

#accordian-menu.stick::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    
#accordian-menu.stick::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#accordian-menu.stick::-webkit-scrollbar-track {
    background: transparent;
}

.error-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-container {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}