.w-full {
    width: 100% !important;
}

.w-screen {
    width: 100vw !important;
}

.w-auto {
    width: auto !important;
}

.w-min {
    width: min-content !important;
}

.w-max {
    width: max-content !important;
}

@media screen and (min-width: 576px) {
    .sm\:w-full {
        width: 100% !important;
    }

    .sm\:w-screen {
        width: 100vw !important;
    }

    .sm\:w-auto {
        width: auto !important;
    }

    .sm\:w-min {
        width: min-content !important;
    }

    .sm\:w-max {
        width: max-content !important;
    }
}

@media screen and (min-width: 768px) {
    .md\:w-full {
        width: 100% !important;
    }

    .md\:w-screen {
        width: 100vw !important;
    }

    .md\:w-auto {
        width: auto !important;
    }

    .md\:w-min {
        width: min-content !important;
    }

    .md\:w-max {
        width: max-content !important;
    }
}

@media screen and (min-width: 992px) {
    .lg\:w-full {
        width: 100% !important;
    }

    .lg\:w-screen {
        width: 100vw !important;
    }

    .lg\:w-auto {
        width: auto !important;
    }

    .lg\:w-min {
        width: min-content !important;
    }

    .lg\:w-max {
        width: max-content !important;
    }
}

@media screen and (min-width: 1200px) {
    .xl\:w-full {
        width: 100% !important;
    }

    .xl\:w-screen {
        width: 100vw !important;
    }

    .xl\:w-auto {
        width: auto !important;
    }

    .xl\:w-min {
        width: min-content !important;
    }

    .xl\:w-max {
        width: max-content !important;
    }
}


.cursor-pointer {
    cursor: pointer !important;
}

:root {
    --surface-a: #ffffff;
    --surface-b: #f8f9fa;
    --surface-c: #e9ecef;
    --surface-d: #dee2e6;
    --surface-e: #ffffff;
    --surface-f: #ffffff;
    --text-color: #495057;
    --text-color-secondary: #6c757d;
    --primary-color: #2196F3;
    --primary-color-text: #ffffff;
    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --surface-0: #ffffff;
    --surface-50: #FAFAFA;
    --surface-100: #F5F5F5;
    --surface-200: #EEEEEE;
    --surface-300: #E0E0E0;
    --surface-400: #BDBDBD;
    --surface-500: #9E9E9E;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --content-padding: 1rem;
    --inline-spacing: 0.5rem;
    --border-radius: 3px;
    --surface-ground: #f8f9fa;
    --surface-section: #ffffff;
    --surface-card: #ffffff;
    --surface-overlay: #ffffff;
    --surface-border: #dee2e6;
    --surface-hover: #e9ecef;
    --maskbg: rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 0.2rem #a6d5fa
}

* {
    box-sizing: border-box
}

.p-component {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: normal
}

.p-component-overlay {
    background-color: rgba(0, 0, 0, .4);
    transition-duration: .2s
}

.p-disabled, .p-component:disabled {
    opacity: .6
}

.p-error {
    color: #f44336
}

.p-text-secondary {
    color: #6c757d
}

.pi {
    font-size: 1rem
}

.p-link {
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    border-radius: 3px
}

.p-link:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 .2rem #a6d5fa
}

.p-input-filled .p-cascadeselect {
    background: #f8f9fa
}

.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
    background-color: #f8f9fa
}

.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
    background-color: #fff
}

.p-input-filled .p-checkbox .p-checkbox-box {
    background-color: #f8f9fa
}

.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
    background: #2196f3
}

.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
    background-color: #f8f9fa
}

.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
    background: #0b7ad1
}

.p-input-filled .p-dropdown {
    background: #f8f9fa
}

.p-input-filled .p-dropdown:not(.p-disabled):hover {
    background-color: #f8f9fa
}

.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
    background-color: #fff
}

.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
    background-color: transparent
}

.p-inputgroup-addon {
    background: #e9ecef;
    color: #6c757d;
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    padding: .5rem .5rem;
    min-width: 2.357rem
}

.p-inputgroup-addon:last-child {
    border-right: 1px solid #ced4da
}

.p-inputgroup > .p-component, .p-inputgroup > .p-element, .p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext, .p-inputgroup > .p-float-label > .p-component {
    border-radius: 0;
    margin: 0
}

.p-inputgroup > .p-component + .p-inputgroup-addon, .p-inputgroup > .p-element + .p-inputgroup-addon, .p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext + .p-inputgroup-addon, .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
    border-left: 0 none
}

.p-inputgroup > .p-component:focus, .p-inputgroup > .p-element:focus, .p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus, .p-inputgroup > .p-float-label > .p-component:focus {
    z-index: 1
}

.p-inputgroup > .p-component:focus ~ label, .p-inputgroup > .p-element:focus ~ label, .p-inputgroup > .p-inputwrapper > .p-component > .p-inputtext:focus ~ label, .p-inputgroup > .p-float-label > .p-component:focus ~ label {
    z-index: 1
}

.p-inputgroup-addon:first-child, .p-inputgroup button:first-child, .p-inputgroup input:first-child, .p-inputgroup > .p-inputwrapper:first-child > .p-component, .p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.p-inputgroup .p-float-label:first-child input {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.p-inputgroup-addon:last-child, .p-inputgroup button:last-child, .p-inputgroup input:last-child, .p-inputgroup > .p-inputwrapper:last-child > .p-component, .p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.p-inputgroup .p-float-label:last-child input {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.p-fluid .p-inputgroup .p-button {
    width: auto
}

.p-fluid .p-inputgroup .p-button.p-button-icon-only {
    width: 2.357rem
}

p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
    border-color: #f44336
}

p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
    border-color: #f44336
}

.p-inputswitch {
    width: 3rem;
    height: 1.75rem
}

.p-inputswitch .p-inputswitch-slider {
    background: #ced4da;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    border-radius: 30px
}

.p-inputswitch .p-inputswitch-slider:before {
    background: #fff;
    width: 1.25rem;
    height: 1.25rem;
    left: .25rem;
    margin-top: -0.625rem;
    border-radius: 50%;
    transition-duration: .2s
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
    transform: translateX(1.25rem)
}

.p-inputswitch.p-focus .p-inputswitch-slider {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 .2rem #a6d5fa
}

.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
    background: #b6bfc8
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
    background: #2196f3
}

.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
    background: #fff
}

.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
    background: #0d89ec
}

p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
    border-color: #f44336
}

.p-inputtext {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    color: #495057;
    background: #fff;
    padding: .5rem .5rem;
    border: 1px solid #ced4da;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    appearance: none;
    border-radius: 3px
}

.p-inputtext:enabled:hover {
    border-color: #2196f3
}

.p-inputtext:enabled:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 .2rem #a6d5fa;
    border-color: #2196f3
}

.p-inputtext.ng-dirty.ng-invalid {
    border-color: #f44336
}

.p-inputtext.p-inputtext-sm {
    font-size: .875rem;
    padding: .4375rem .4375rem
}

.p-inputtext.p-inputtext-lg {
    font-size: 1.25rem;
    padding: .625rem .625rem
}

.p-input-icon-left > i:first-of-type {
    left: .5rem;
    color: #6c757d
}

.p-input-icon-left > .p-inputtext {
    padding-left: 2rem
}

.p-input-icon-left.p-float-label > label {
    left: 2rem
}

.p-input-icon-right > i:last-of-type {
    right: .5rem;
    color: #6c757d
}

.p-input-icon-right > .p-inputtext {
    padding-right: 2rem
}

::-webkit-input-placeholder {
    color: #6c757d
}

:-moz-placeholder {
    color: #6c757d
}

::-moz-placeholder {
    color: #6c757d
}

:-ms-input-placeholder {
    color: #6c757d
}

.p-input-filled .p-inputtext {
    background-color: #f8f9fa
}

.p-input-filled .p-inputtext:enabled:hover {
    background-color: #f8f9fa
}

.p-input-filled .p-inputtext:enabled:focus {
    background-color: #fff
}

.p-inputtext-sm .p-inputtext {
    font-size: .875rem;
    padding: .4375rem .4375rem
}

.p-inputtext-lg .p-inputtext {
    font-size: 1.25rem;
    padding: .625rem .625rem
}

.p-input-filled .p-radiobutton .p-radiobutton-box {
    background-color: #f8f9fa
}

.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
    background-color: #f8f9fa
}

.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
    background: #2196f3
}

.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
    background: #0b7ad1
}

.field {
    margin-bottom: 1rem;
}

.field > label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.p-button {
    margin: 0;
    display: inline-flex;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    vertical-align: bottom;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.p-button {
    font-family: Inter;
    color: #fff;
    background: #0099CC;
    border: 1px solid #0099CC;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    border-radius: 3px;
}
