/**************************************************
 * Variables
 **************************************************/
:root {

    /* Body */


    /* Wrapper */
    /*--wrapper--width: 360px;*/
    /*--wrapper--height: 380px;*/
    /*--wrapper-top--height: 90px;*/

    /*--wrapper-middle--padding: 20px;*/

    /* Header */
    /*--header--height: 90px;*/
    /*--header-top--height: 28px;*/
    /*--header-bottom--height: 62px;*/

    /* Footer */
    /*--footer--height: 20px;*/


    /**/
    /*--avatar--diameter: 60px;*/


    /* frm elements */
    --frm-input--width: 100%;
    --frm-input--padding: 12px;
    --frm-input--padding-x: 8px;
    --frm-input--padding-y: 0;

    /*--frm-input--background-color: #ffffff;*/
    /*--frm-input--border-color: #d9d9d9;*/
    /*--frm-input--font-color: #4a6994;*/
    --frm-input--font-color-muted: #506788;

    --frm-input--border-radius: 5px;

    --frm-input--font-weight: 500;
    --frm-input--font-size: 1.2rem;

    --frm-input--transform-scale: 0.70;
    --frm-input--transform-translatey: -30px;
    /*transform: scale(0.65) translateY(-30px);*/


}





/**************************************************
 * Form Controls
 **************************************************/
.frm-input-wrapper{
    position: relative;
    /*left: 0;*/
    margin-bottom: 10px;
    /*width: 100%;*/
    /*width: calc(100% - (var(--frm-input--padding)*2));*/
    /*float: left;*/
    /*border: solid 1px #F00;*/
}


.frm-input-text{
    /*position: relative;*/
    width: var(--frm-input--width);
    /*width: calc()*/
    /*width: 100%;*/
    box-sizing: border-box;

    padding: var(--frm-input--padding);

    border-radius: var(--frm-input--border-radius);
    border: 1px solid var(--frm-input--border-color);
    outline:none;

    font-weight: var(--frm-input--font-weight);
    font-size: var(--frm-input--font-size);
    color: var(--frm-input--font-color);
}


/* Make text always visible when readonly */
.frm-input-text[readonly],
.frm-input-text.readonly-filled {
    color: var(--frm-input--font-color);       /* #4a6994 or whatever your normal text color is */
    background-color: #f8f9fa;                 /* light gray bg – optional but improves readability */
    cursor: default;
}

/* Force the placeholder to act like it's "filled" so it floats up */
.frm-input-text[readonly] ~ .frm-input-placeholder,
.frm-input-text.readonly-filled ~ .frm-input-placeholder {
    transform: scale(0.7) translateY(-30px);   /* adjust to match your "focused/filled" position */
    color: var(--frm-input--font-color-muted);       /* or a slightly muted version */
    font-weight: 500;
}

/* Optional: prevent pointer events on placeholder when readonly */
.frm-input-text[readonly] ~ .frm-input-placeholder {
    pointer-events: none;
}



.frm-input-select{
    /*position: relative;*/
    width: var(--frm-input--width);
    /*width: calc()*/
    /*width: 100%;*/
    box-sizing: border-box;

    padding: var(--frm-input--padding);
    padding-left: calc(var(--frm-input--padding) - 2px);

    border-radius: var(--frm-input--border-radius);
    border: 1px solid var(--frm-input--border-color);
    outline:none;

    font-weight: var(--frm-input--font-weight);
    font-size: var(--frm-input--font-size);
    color: var(--frm-input--font-color);
}

.frm-input-select option{
    color: var(--frm-input--font-color);
}


.frm-select{
    padding: 5px;
    border-radius: 5px;
    border: solid 1px var(--frm-input--border-color);
    font-size: .8rem;
}


.frm-select-dob{
    display: none;
    outline: none !important;
    font-size: 1rem;
    color: #555555;
}


.frm-select-dob:focus{
    border: solid 1px var(--border-color);
}

.frm-select-asi{
    padding: 5px;
    border-radius: 5px;
    border: solid 1px var(--border-color);
    /*font-size: .8rem;*/
    font-size: 0.9em;
    color:  #20558a;
}


.frm-input-placeholder{
    position: absolute;
    /*top: 0px;   !* This position is for Chromium browsers. Mozilla is corrected again below. *!*/
    left: 12px;
    /*margin: 16px 0;*/
    margin: 13px 0;
    padding: 0 0px;
    font-family: Roboto, sans-serif;
    color: var(--placeholder--font-color);
    font-size: 1.2rem;
    background: var(--placeholder--background-color);
}


/*@-moz-document url-prefix() {*/
    /*.frm-input-placeholder{*/
        /*top: 0;*/
    /*}*/
/*}*/





/* Authorization Code */
#frm-wrapper-authcode input:valid + span, #frm-wrapper-authcode input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-authcode input:focus{color: var(--input--font-color); border-color: var(--border-color);}
#frm-wrapper-authcode span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Email */
#frm-wrapper-email input:valid + span, #frm-wrapper-email input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-email input:focus{color: var(--input--font-color); border-color: var(--border-color);}
#frm-wrapper-email span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Email Address */
#frm-wrapper-email-address input:valid:not(:placeholder-shown) + span, #frm-wrapper-email-address input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-email-address input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-email-address span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Phone Label */
/*#frm-wrapper-email-label input:valid + span, #frm-wrapper-email-label input:focus + span{*/
#frm-wrapper-email-label input:valid:not(:placeholder-shown) + span, #frm-wrapper-email-label input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-email-label input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-email-label span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* First Name */
/*#frm-wrapper-fname input:valid + span, #frm-wrapper-fname input:focus + span{*/
#frm-wrapper-fname input:valid:not(:placeholder-shown) + span, #frm-wrapper-fname input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-fname input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-fname span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Middle Name */
/*#frm-wrapper-mname input:valid + span, #frm-wrapper-mname input:focus + span{*/
#frm-wrapper-mname input:valid:not(:placeholder-shown) + span, #frm-wrapper-mname input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-mname input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-mname span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Last Name */
/*#frm-wrapper-lname input:valid + span, #frm-wrapper-lname input:focus + span{*/
#frm-wrapper-lname input:valid:not(:placeholder-shown) + span, #frm-wrapper-lname input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-lname input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-lname span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Preferred Name */
/*#frm-wrapper-pname input:valid + span, #frm-wrapper-pname input:focus + span{*/
#frm-wrapper-pname input:valid:not(:placeholder-shown) + span, #frm-wrapper-pname input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-pname input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-pname span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Login */
#frm-wrapper-login input:valid + span, #frm-wrapper-login input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-login input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-login span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Phone Number */
/*#frm-wrapper-phone-number input:valid + span, #frm-wrapper-phone-number input:focus + span{*/
#frm-wrapper-phone-number input:valid:not(:placeholder-shown) + span, #frm-wrapper-phone-number input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-phone-number input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-phone-number span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Phone Extension */
/*#frm-wrapper-phone-ext input:valid + span, #frm-wrapper-phone-ext input:focus + span{*/
#frm-wrapper-phone-ext input:valid:not(:placeholder-shown) + span, #frm-wrapper-phone-ext input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-phone-ext input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-phone-ext span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Phone Label */
/*#frm-wrapper-phone-label input:valid + span, #frm-wrapper-phone-label input:focus + span{*/
#frm-wrapper-phone-label input:valid:not(:placeholder-shown) + span, #frm-wrapper-phone-label input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-phone-label input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-phone-label span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Password */
#frm-wrapper-password input:valid + span, #frm-wrapper-password input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-password input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-password span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Password New */
#frm-wrapper-passwordn input:valid + span, #frm-wrapper-passwordn input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-passwordn input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-passwordn span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Password Confirm */
#frm-wrapper-passwordc input:valid + span, #frm-wrapper-passwordc input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-passwordc input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-passwordc span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Username */
#frm-wrapper-username input:valid + span, #frm-wrapper-username input:focus + span{
    transform: scale(var(--frm-input--transform-scale)) translateY(var(--frm-input--transform-translatey));
    padding: var(--frm-input--padding-y) var(--frm-input--padding-x);
    background: var(--frm-input--background-color);
    color: var(--border-color);
}
#frm-wrapper-username input:focus{color: var(--frm-input--font-color); border-color: var(--border-color);}
#frm-wrapper-username span{transition: all 0.2s; transform-origin: 0% 0%; pointer-events: none;}


/* Date of Birth */
#frm-wrapper-dob{
    position: relative;
    width: calc(100% - 2px);
    margin-bottom: 10px;

    border: 1px solid var(--input--border-color);
    background-color: #ffffff;
    /*border: solid 1px #ccc;*/
    border-radius: 5px;

    /*font-size: 1.2rem;*/
}


#frm-heading-dob{
    position: relative;
    top: 8px;
    left: 10px;
    margin-bottom: 10px;

    font-size: 1.2em;
    color: var(--placeholder--font-color);
}




/**************************************************
 * Buttons
 **************************************************/

.frm-button{
    padding: 10px 20px;
    background-color: var(--frm-button--background-color);
    border: solid 1px var(--border-color);
    border-radius: 5px;
    outline: none;

    font-size: 1.3em;
    font-weight: bold;
    color: var(--frm-button-font-color);
}

.frm-button:hover{
    background-color: var(--frm-button--background-color-hover);
    color: var(--frm-button-font-color-hover);
    cursor: pointer;
}

.frm-button:disabled{
    background-color: var(--frm-button--background-color-disabled) !important;
    border-color: var(--frm-button--background-color-disabled);
    color: var(--frm-button-font-color-disabled);
    cursor: not-allowed;
}

.frm-button-auth{
    width: 100%;
    padding: 10px;
}

.frm-button-signin{
    /*width: 100%;*/
    margin: 5px;
    padding: 10px;
    float: right;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    white-space: nowrap;
}

.frm-button-submit{
    /*width: 100%;*/
    margin: 5px;
    padding: 10px;
    float: right;
    cursor: pointer;
}





/**************************************************
 * Info Panel
 **************************************************/

/*.frm-info-icon{*/
    /*position: relative;*/
    /*float: right;*/

    /*top: -42px;*/
    /*right: 5px;*/
    /*!*width: 16px;*!*/
    /*cursor: pointer;*/
    /*z-index: 50;*/

    /*!*border: solid 1px;*!*/
/*}*/

.frm-info-icon{
    position: relative;
    float: right;
    top: -42px;
    right: 5px;
    width: 16px;
    height: 16px;

    background: url('/images/icons/info_16x16.png') no-repeat;
    background-repeat: no-repeat;
    background-size: 16px;
    border: none;

    /*width: 16px;*/
    cursor: pointer;
    /*z-index: 70;*/

    /*border: solid 1px;*/
}


/*.frm-info-icon:hover{*/
    /*cursor: pointer;*/
/*}*/

#frm-info-dob{top: -70px;}

/*.frm-info-panel{*/
    /*display: none;*/
    /*position: absolute;*/
    /*!*top: 10px;*!*/
    /*!*right: -10px;*!*/
    /*padding: 10px;*/

    /*background-color: var(--background-color);*/
    /*border: solid 1px var(--border-color);*/
    /*border-radius: 10px;*/
    /*border-top-left-radius: 0;*/

    /*font-size: .8em;*/
    /*z-index: 51;*/
/*}*/

.frm-info-panel{
    display: none;
    position: absolute;
    top: 25px;
    left: 0px;
    /*max-width: 200px;*/
    /*min-width: 150px;*/
    padding: 10px;

    background-color: var(--background-color);
    border: solid 1px var(--border-color);
    border-radius: 10px;
    border-top-left-radius: 0;

    font-size: .8em;
    z-index: 50 !important;
}



.frm-info-panel ul {
    list-style-type: none;
}

.frm-info-panel ul li span{
    font-size: 1.4em;
}

#frm-info-panel-name{
    max-width: 200px;
    cursor: pointer;
}

#frm-info-panel-dob{
    max-width: 200px;
    cursor: pointer;
}

#frm-info-panel-password{
    max-width: 150px;
}




/**************************************************
 * Misc
 **************************************************/

/*#frm-pass-show-hide{*/
    /*!*!*display: block;*!*!*/
    /*position: relative;*/
    /*top: 45px;*/
    /*right: 4px;*/
    /*width: 22px;*/
    /*height: 22px;*/

    /*margin-right: 0;*/
    /*z-index: 999;*/

    /*background-image: url('/images/icons/ico-show-hide_44x22.png');*/

/*}*/

/*#frm-pass-show-hide:hover{cursor: pointer;}*/


/*#frm-pass-show-hide{background-image: url('/images/icons/ico-show-hide_44x22.png');}*/
/*#frm-pass-show-hiden{background-image: url('/images/icons/ico-show-hide_44x22.png');}*/
/*#frm-pass-show-hidec{background-image: url('/images/icons/ico-show-hide_44x22.png');}*/

#frm-pass-show-hide{background-image: url('/images/icons/show-hide_100x50.png');}
#frm-pass-show-hiden{background-image: url('/images/icons/show-hide_100x50.png');}
#frm-pass-show-hidec{background-image: url('/images/icons/show-hide_100x50.png');}

.frm-pass-show-hide{
    /*!*display: block;*!*/
    position: relative;
    top: 40px;
    right: 30px;
    width: 35px;
    height: 35px;

    margin-right: 0;
    z-index: 30;

    /*background-image: url('/images/icons/ico-show-hide_44x22.png');*/
    background-repeat: no-repeat;
    background-size: 70px;
    cursor: pointer;
}

/*.frm-pass-show-hide:hover{cursor: pointer;}*/


.not-valid, .not-valid-or, .not-valid-dup {
    border: 2px solid #ff0000 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-header-setup:hover :not(.link-close) {
    cursor: move;
    z-index: 10;
    position: relative;
}

.link-close,
input.linkRemove {
    display: block;
    float: right;
    margin: -10px -20px 0px 0px; /*top,rt,btm,lft*/
    padding: 0px 0px 35px 40px;
    height: 22px;
    line-height: 22px;
    background-image: url('/images/icons/icon_close.png');
    background-repeat: no-repeat;
    /*cursor: hand;*/
    cursor: pointer;
}

a.link-close {
    position: relative;
    top: 10px;
    /*clear: both;*/
}