.fsp-fc {
    display: inline-block;
}
.fsp-fc[data-component] {
    position : relative;
    max-width: 100%;
    width    : 100%;
}
.fsp-fc[data-component]>[data-selector] {
    position   : relative;
    background-color: #fff;
    border     : 2px solid #eee;
    display    : flex;
    align-items: center;
    padding    : 0 0rem 0 1rem;
}
.fsp-fc[data-component]>label {
    font-size  : .88rem;
    font-weight: 600;
    color      : #909294;
    position   : relative;
}
.fsp-fc.required[data-component]>label::after {
    content  : '*';
    color    : #dc3545;
    position : absolute;
    left     : 100%;
    padding  : 0 .2rem;
    font-size: 1.05rem;
}
.fsp-fc[data-component]>[data-selector]>span {
    padding-right: .35rem;
    font-size    : 108%;
    display: flex;
}
.fsp-fc[data-component]>[data-selector]>input {
    background   : #fff;
    padding      : 0;
    min-height   : unset;
    height       : unset;
    line-height  : 2.75rem;
    border-radius: 0;
    border       : 0;
    color        : #24292f;
    margin       : 0;
    max-width    : 100%;
    width        : 16rem;
    font-size    : 1.075rem;
    font-weight  : 600;
}
.fsp-fc[data-component]>[data-selector]>input::placeholder {
    color: rgba(var(--fsp-c-pr), 60%);
}
.fsp-fc[data-component]>[data-selector]>input:focus {
    box-shadow: none;
    border    : 0;
    outline   : 0;
}
.fsp-fc[data-component]>[data-selector]>input:focus::placeholder {
    color: transparent;
}
.fsp-fc[data-component]>[data-selector]:hover {
    border-color: #cbcbcb;
}
.fsp-fc[data-component].is-valid>[data-selector] {
    border-color: #14a800!important;
}
.fsp-fc[data-component].not-valid>[data-selector] {
    border-color: #ff0000!important;
    padding-right: 2.8rem;
}
.fsp-fc[data-component].not-valid>[data-selector]::after {
    content: '';
    display: block;
    height: 100%;
    aspect-ratio: 1/1;
    background: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23ff0000' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
}
/**
* TEXTAREA
*/
.fsp-fc[data-component]>[data-selector]>textarea {
    background   : #fff;
    padding      : 0.44rem 0;
    min-height   : unset;
    height       : unset;
    line-height  : 1.62rem;
    border-radius: 0;
    border       : 0;
    color        : #24292f;
    margin       : 0;
    max-width    : 100%;
    width        : 100%;
    font-size    : 1.075rem;
    font-weight  : 600;
}
.fsp-fc[data-component]>[data-selector]>textarea::placeholder {
    color: rgba(var(--fsp-c-pr), 60%);
}
.fsp-fc[data-component]>[data-selector]>textarea:focus {
    box-shadow: none;
    border    : 0;
    outline   : 0;
}
.fsp-fc[data-component]>[data-selector]>textarea:focus::placeholder {
    color: transparent;
}
/**
* SELECT 2
*/
.fsp-fc[data-component=select2]>[data-selector]::after {
    content            : '';
    display            : block;
    height             : .95rem;
    aspect-ratio       : 2/1.75;
    background-image   : url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z'/%3E%3C/svg%3E");
    background-repeat  : no-repeat no-repeat;
    background-position: center center;
    background-size    : contain;
    position           : absolute;
    right              : .5rem;
    top                : 50%;
    transform          : translateY(-50%) rotateZ(0);
    transition         : ease transform .25s;
    pointer-events     : none;
}
.fsp-fc[data-component=select2] ul[data-list] {
    background   : #fff;
    position     : absolute;
    top          : 100%;
    left         : 0;
    z-index      : 1;
    width        : -webkit-fill-available;
    width        : -moz-available;
    margin       : 0;
    border-radius: 0;
    border       : 1px solid #cbcbcb;
    border-top   : 0;
    padding      : .25rem 0;
    display      : none;
    list-style   : none;
    max-height   : 24.8rem;
    overflow-y   : scroll;
}
.fsp-fc[data-component=select2]:not([data-options]) ul[data-list]>li {
    margin     : 0;
    padding    : 0 1rem;
    line-height: 2rem;
    cursor     : pointer;
    font-size  : 1.04rem;
    color      : #000;
    width      : -moz-available;
    display    : flex;
    align-items: center;
}
.fsp-fc[data-component=select2]:not([data-options]) ul[data-list]>li>span {
    margin-right: .3rem;
}
.fsp-fc[data-component=select2]:not([data-options]) ul[data-list]>li[data-selected] {
    font-weight   : 600;
    pointer-events: none;
}
.fsp-fc[data-component=select2]:not([data-options]) ul[data-list]>li:hover {
    background: #0667b45e;
}
.fsp-fc[data-component=select2].active>[data-selector] {
    border: 1px solid #cbcbcb;
}
.fsp-fc[data-component=select2].active>[data-selector]::after {
    transform: translateY(-50%) rotateZ(-180deg);
}
.fsp-fc[data-component=select2].active>ul[data-list] {
    display: block;
}
.fsp-fc[data-component=select2]:not(.active)>[data-selector]>input {
    cursor: pointer;
}
.fsp-fc[data-component=select2][data-size=lg]>[data-selector]>input {
    line-height: 2.7rem;
    font-size  : 1.1rem;
}

.fsp-fc[data-component=select2] input:placeholder-shown + button.clear {
    display: none;
}
.fsp-fc[data-component=select2] input:not(:placeholder-shown) + button {
    background: #fff;
    border: 1px solid #eee;
    border-radius: .15rem;
    color: #6a6a6a;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .5rem;
    margin-right: 2rem;
    position: absolute;
    right: 0;
}

.fsp-fc[data-component=select2] input:not(:placeholder-shown) + button:hover {
    background: #eee;
}

.fsp-fc.sp[data-component]>[data-selector] {background: #0667b4;color: #fff;border-color: #0667b4!important;}
.fsp-fc.sp[data-component]>[data-selector]>input {background: #0667b4;color: #fff;}
.fsp-fc.sp[data-component=select2]>[data-selector]::after {background-image: url("data:image/svg+xml,%3Csvg width='24' fill='white' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z'/%3E%3C/svg%3E");}
.fsp-fc.not-valid[data-component=checkbox] label {color: red;}


/**
 * Button
 */
.at365-button {
    border     : 0;
    padding    : 0 1rem;
    line-height: 2.1rem;
    font-size  : 1rem;
    background : #000;
    color      : #fff;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
}
.at365-button[disabled] {
    pointer-events: none;
    opacity: .75;
    filter: grayscale(1);
}
.at365-button.lg {
    font-size  : 1.2rem;
    padding    : 0 1.25rem;
    line-height: 2.7rem;
}
.at365-button.primary {
    background: #00b0ea;
}
.at365-button.loading {
    color: transparent;
}
.at365-button.loading::after {
    content: '';
    color: #fff;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: .75s linear infinite spinner-border;
    animation: .75s linear infinite spinner-border;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
@-webkit-keyframes rotating {
    from {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
        -o-transform     : translateX(-50%) translateY(-50%) rotate(0deg);
        transform        : translateX(-50%) translateY(-50%) rotate(0deg);
    }
    to {
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
        -o-transform     : translateX(-50%) translateY(-50%) rotate(360deg);
        transform        : translateX(-50%) translateY(-50%) rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform    : translateX(-50%) translateY(-50%) rotate(0deg);
        -moz-transform   : translateX(-50%) translateY(-50%) rotate(0deg);
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg);
        -o-transform     : translateX(-50%) translateY(-50%) rotate(0deg);
        transform        : translateX(-50%) translateY(-50%) rotate(0deg);
    }
    to {
        -ms-transform    : translateX(-50%) translateY(-50%) rotate(360deg);
        -moz-transform   : translateX(-50%) translateY(-50%) rotate(360deg);
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(360deg);
        -o-transform     : translateX(-50%) translateY(-50%) rotate(360deg);
        transform        : translateX(-50%) translateY(-50%)rotate(360deg);
    }
}