/* BA forms. Based on Bootstrap 5.3. Jan 2023.  */

/* ************************* */
/* STANDARD		   			 */
/* ************************* */
.form-control, .form-floating > .form-control{font-size: var(--text-lead); font-family: 'Heading'; padding:1rem 0; height:var(--input-height); color:var(--color-base); border-radius:0; border:0;
	background: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 50%, var(--color-black30) 50%, var(--color-black30) 100%) no-repeat right bottom / 200% 1px; transition:background 0.4s ease;}
.form-control:focus{color:var(--color-base); background-position: left bottom; box-shadow: none; background-color: transparent;}
.form-control:not([disabled]):hover{background-position: left bottom;}

.form-floating > label{font-size: var(--text-lead); font-family: 'Heading'; color:var(--color-base); opacity:1; width:auto; right:0; padding:0; line-height: 1.3; top:calc(var(--input-height)/2); height:auto; transform:translateY(-50%); transition: all 0.2s ease;}
.form-floating > .form-control:not(:placeholder-shown){padding-top:1rem; padding-bottom:1rem;}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label{opacity:0.5; font-size: 1rem; transform:scale(1) translateY(calc(-1*var(--input-height)/2 - 0.31rem)) translateX(0);}

.form-label{font-size: var(--text-lead); display: block; font-family: 'Heading'; margin-bottom:var(--margin-small);}

textarea.form-control {resize: vertical; min-height:var(--input-height); }
.form-floating > textarea.form-control:not(:placeholder-shown), .form-floating > textarea.form-control, .form-floating > textarea.form-control:focus{padding-top:calc(var(--input-height)/2 - 0.75rem);}


/* disabled & readonly */
.form-control:disabled{background-image:linear-gradient(90deg, var(--color-black10) 0%, var(--color-black10) 50%, var(--color-black10) 50%, var(--color-black10) 100%); color:var(--color-black30);}
.form-control[readonly]{background-image:linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 50%, var(--color-black10) 50%, var(--color-black10) 100%); color:var(--color-black30);}
.form-floating > .form-control:disabled ~ label, .form-floating > .form-control[readonly] ~ label{opacity:0.3;}
.form-floating > .form-control[readonly]:placeholder-shown ~ label{font-size: 1rem; transform:translateY(-50%);}

/* invalid */
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus{box-shadow: none;}
.SumoSelect.is-invalid > .CaptionCont, .form-control.is-invalid, .was-validated .form-control:invalid{background: url("../../img/bg-input-error.svg") repeat-x left bottom !important;}

/* required */
.required label:after{content: '*';}


/* placeholder */
::-webkit-input-placeholder { opacity: 1 !important; color: var(--color-black50) !important;}
::-moz-placeholder {color: var(--color-black50) !important;	opacity: 1 !important;} 
:-ms-input-placeholder {color: var(--color-black50) !important; opacity:1 !important; }

[placeholder]:focus::-webkit-input-placeholder { color: var(--color-black50) !important;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color: var(--color-black50) !important;}
input:focus:-ms-input-placeholder, textarea:focus::-ms-input-placeholder {color: var(--color-black50) !important;}

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;} 


/* radio & check */
.form-check{display: flex; align-items: flex-start; padding-left:0;}
.form-check.form-check-inline{display: inline-flex;}
.form-check .form-check-label{cursor: pointer; line-height: 1.2; padding-left:0.5rem; transition:color 0.2s ease;}
.form-check .form-check-label:hover{color:var(--color-hover);}
.form-check .form-check-input[disabled] ~ .form-check-label:hover{color:var(--color-black);}
.form-check .form-check-input:checked[disabled] ~ .form-check-label:hover{color:var(--color-black);}
.form-check .form-check-input{border:1px solid var(--color-dark-grey); width:1.125rem; height:1.125rem; cursor: pointer; flex:none; margin-left:0; margin-top:0; transition:background 0.2s ease, border 0.2s ease;}
.form-check .form-check-input[type=checkbox]:not([role='switch']){border-radius: var(--radius-small);}
.form-check .form-check-input:checked{background-color: var(--color-black); border-color:var(--color-black);}
.form-check .form-check-input:focus:not([disabled]), .form-check .form-check-input:hover:not([disabled]){box-shadow: none; border-color:var(--color-hover);}
.form-check .form-check-input:checked:focus:not([disabled]), .form-check .form-check-input:checked:hover:not([disabled]){background-color: var(--color-hover);}
.form-check .form-check-input:checked ~ .form-check-label{color:var(--color-black);}
.form-check .form-check-input:hover:not([disabled]) ~ .form-check-label,
.form-check .form-check-input:focus:not([disabled]) ~ .form-check-label,
.form-check .form-check-input:checked:hover:not([disabled]) ~ .form-check-label,
.form-check .form-check-input:checked:focus:not([disabled]) ~ .form-check-label{color:var(--color-hover);}


/* switch */
.form-switch .form-check-input{width:2rem;}
.form-switch .form-check-input:not(:checked):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='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");}
.form-switch .form-check-input:checked{background-color: var(--color-black); border-color:var(--color-black);}
.form-switch .form-check-input:disabled{opacity:0.65;}


/* autofill blue background fix */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s!important;
	-webkit-text-fill-color: var(--color-base) !important;
}



/* ************************* */
/* CUSTOM		   			 */
/* ************************* */

/* upload */		
.upload-control .form-control{display: flex; align-items: center;}
.upload-control .form-control .btn-delete{color:var(--color-danger); font-size: 1rem; line-height: 1; background: transparent; border:0; padding:0; margin-right:1rem;}
.upload-control .form-control .btn-delete:hover, .upload-control .form-control .btn-delete:focus{color:var(--color-black);}
.upload-control .form-control .file-name{color:var(--color-black50); margin-right:8rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.upload-control .btn input[type="file"] {position: absolute; top: 0; right: 0; height:100%; width:100%; margin: 0; padding: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); font-size: 0;}
.upload-control .btn.btn-select {position: absolute; margin-left:auto; flex:none; right:0; padding:0; width:7rem; margin:0; height:2.3rem;  display:flex; align-items:center; justify-content:center; z-index:4;}
.form-floating > .upload-control ~ label{margin-right:8rem; font-size: 1rem; opacity: 0.5; transform:scale(1) translateY(calc(-1*var(--input-height)/2 - 0.31rem)) translateX(0);}

.upload-control.disabled .form-control{background-image:linear-gradient(90deg, var(--color-black10) 0%, var(--color-black10) 50%, var(--color-black10) 50%, var(--color-black10) 100%); pointer-events: none;}
.upload-control.disabled .form-control .btn-delete{color:var(--color-dark-grey);}
.upload-control.disabled .form-control .file-name{color: var(--color-black30);}
.upload-control.disabled .form-control .btn-select{opacity:0.3;}
.form-floating > .upload-control.disabled ~ label{opacity:0.3;}


/* sumoselect */
.SumoSelect{display: block; width:auto; text-align: left;}
.SumoSelect > .CaptionCont{height:var(--input-height); padding:1rem 0;}
.SumoSelect > .optWrapper > .options li.opt, .SumoSelect .select-all{padding:1rem 1rem;}
.SumoSelect.open > .optWrapper{top:100%;}

.SumoSelect > .CaptionCont{ border-radius:0; border:0; display:flex; align-items:center;
	background: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 50%, var(--color-black30) 50%, var(--color-black30) 100%) no-repeat right bottom / 200% 1px; transition:background 0.4s ease;}
.SumoSelect > .CaptionCont > label{margin-bottom:0; width:auto; cursor: pointer; right:0;}
.SumoSelect > .CaptionCont > span{font-size: var(--text-lead); font-family: 'Heading'; padding-right:2rem; cursor: pointer; color:var(--color-black);}
/* placeholder */.SumoSelect > .CaptionCont > span.placeholder{font-size: var(--text-lead); font-family: 'Heading'; font-style: normal; color:var(--color-black50); background: transparent; opacity:1;}
/* caption hover */.SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont, .open.SumoSelect > .CaptionCont{box-shadow:none; background-position: left bottom;}

.SumoSelect > .CaptionCont > label > i{height:100%; width:auto; position: relative; background-image: none; display: flex; align-items: center; justify-content: flex-end;}
.SumoSelect > .CaptionCont > label > i:after{content:'\f078'; font:var(--font-icon); font-size:1rem; transition: transform 0.4s ease;}
.SumoSelect.open > .CaptionCont > label > i:after{transform: rotateX(180deg);}

.SumoSelect > .optWrapper{border:0; border-radius:0; box-shadow:var(--shadow);}
.SumoSelect > .optWrapper > .options{border-radius:0;}
.SumoSelect > .optWrapper > .options li.opt{border-bottom:0;}
.SumoSelect > .optWrapper > .options > li:first-child.opt, .SumoSelect > .optWrapper > .options > li:last-child.opt{ border-radius: 0;}
.SumoSelect > .optWrapper > .options li label{font-size: var(--text-lead); font-family: 'Heading'; margin-bottom:0; color:var(--color-dark-grey);}
/* option selected */.SumoSelect > .optWrapper > .options li.opt.selected label, .SumoSelect .select-all.selected label{color:var(--color-black);}
/* option hover */.SumoSelect > .optWrapper > .options li.opt:hover, .SumoSelect .select-all:hover, .SumoSelect > .optWrapper > .options li.sel.opt, .SumoSelect .sel.select-all{background-color:var(--color-light-grey);}

.SumoSelect .select-all{height:auto; padding-left:3rem; border-radius:0;}
.SumoSelect .select-all label{color:var(--color-dark-grey); margin-bottom:0; font-size: var(--text-lead); font-family: 'Heading';}

.SumoSelect > .optWrapper.multiple > .options li.opt{padding-left:3rem;}
.SumoSelect > .multiple.optWrapper > .options li.opt span, .SumoSelect .select-all > span{width:1.125rem; margin-left:-2rem;}
.SumoSelect > .optWrapper.multiple > .options li.opt span i, .SumoSelect .select-all > span i{border: 1px solid var(--color-dark-grey); display: flex; align-items: center; justify-content: center; background-color: #fff; width:1.125rem; height:1.125rem; transition: border 0.2s ease; box-shadow: none; border-radius:0;}
.SumoSelect > .optWrapper.multiple > .options li.opt span i:before, .SumoSelect .select-all > span i:before{ content:'\f00c'; font:var(--font-icon); font-size:0.75rem; color:#fff; opacity:0; transform:scale(0.01); display:block; line-height:1.1;  transition:transform 0.2s ease, color 0.2s ease;}

.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i, .SumoSelect .select-all.selected > span i{ border-color: var(--color-black); background-color: var(--color-black); background-image: none;}
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i:before, .SumoSelect .select-all.selected > span i:before {transform:scale(1); opacity:1;}

.SumoSelect .select-all.partial > span i{background-color:var(--color-grey); background-image: none; border-color: var(--color-grey);}
.SumoSelect .select-all.partial > span i:before,.SumoSelect .select-all.partial > span i:after{opacity:1; transform:scale(1); background-color:transparent;}

.SumoSelect > .isFloating.multiple.optWrapper > .options li.opt{padding-left:3rem;}
.SumoSelect > .isFloating.optWrapper{top:0;}
.SumoSelect > .isFloating.optWrapper > .options{box-shadow: none;}
.SumoSelect > .isFloating.optWrapper > .options li.opt{padding:1rem;}

.select-wrap .SumoSelect > .CaptionCont{background-color: transparent;}
.select-wrap .SumoSelect > .CaptionCont > span{top:0.7rem;}
.select-wrap .input-label{z-index:0; padding-right:3rem;}

.open.SumoSelect .search-txt{height:100%; padding:0.7rem 1rem; border-radius:0;}
.SumoSelect .search-txt::-ms-clear{display: none;}
.SumoSelect .no-match{padding:0.7rem 1rem;}

.SumoSelect.disabled{cursor: default; opacity:1;}
.SumoSelect.disabled select:disabled{opacity:0;}
.SumoSelect.disabled .CaptionCont{background-image:linear-gradient(90deg, var(--color-black10) 0%, var(--color-black10) 50%, var(--color-black10) 50%, var(--color-black10) 100%); }
.SumoSelect.disabled > .CaptionCont > span, .SumoSelect.disabled > .CaptionCont > label{color:var(--color-black30); cursor: default;}
.SumoSelect.disabled > .CaptionCont > label > i{ cursor: default;}
.form-floating > .SumoSelect.disabled ~ label{opacity:0.3;}

.form-floating > .SumoSelect ~ label{right:3rem; opacity:0.5; font-size: 1rem; transform:scale(1) translateY(calc(-1*var(--input-height)/2 - 0.31rem)) translateX(0);}


/* check-inline */
.check-inline-wrap{display: flex; align-items: flex-start;}


/* form-footer */
.form-footer{display: flex; align-items: center; gap:var(--margin-normal);}


/* form-indent */
.form-item-indent{margin-left:var(--margin-normal);}


/* search-control */
.search-control .btn-search{border:0; color:var(--color-black); position: absolute; top:0; right:0; width:3rem; height:var(--input-height); background: transparent;}
.search-control .btn-search:hover, .search-control .btn-search:focus{color:var(--color-hover);}
.search-control .btn-search:before{content: '\f002'; font: var(--font-icon); font-size: 1.18rem;}
.search-control .form-control{padding-right:4rem;}
.search-control > label{right:4rem;}



@media (max-width: 767.98px) {
	
}
@media (max-width: 575.98px) {
	.form-footer{flex-direction: column; align-items: center; text-align: center;}
	.form-footer .btn:not(.btn-link){width:100%;}
}