@ -6474,750 +6474,6 @@ select.ui.dropdown {
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * !
* # Fomantic-UI - Input
* http : / / github . com / fomantic / Fomantic-UI /
*
*
* Released under the MIT license
* http : / / opensource . org / licenses / MIT
*
* /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Standard
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Inputs
--------------------- * /
. ui . input {
position : relative ;
font-weight : normal ;
font-style : normal ;
display : inline-flex ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
}
. ui . input > input {
margin : 0 ;
max-width : 100 % ;
flex : 1 0 auto ;
outline : none ;
-webkit-tap-highlight-color : rgba ( 255 , 255 , 255 , 0 ) ;
text-align : left ;
line-height : 1 . 21428571em ;
font-family : var ( --fonts-regular ) ;
padding : 0 . 67857143em 1em ;
background : # FFFFFF ;
border : 1px solid rgba ( 34 , 36 , 38 , 0 . 15 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
border-radius : 0 . 28571429rem ;
transition : box-shadow 0 . 1s ease , border-color 0 . 1s ease ;
box-shadow : none ;
}
/ * --------------------
Placeholder
--------------------- * /
/* browsers require these rules separate */
. ui . input > input :: -webkit-input-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
. ui . input > input :: -moz-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
. ui . input > input : -ms-input-placeholder {
color : rgba ( 191 , 191 , 191 , 0 . 87 ) ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
States
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Disabled
--------------------- * /
. ui . disabled . input ,
. ui . input : not ( . disabled ) input [ disabled ] {
opacity : var ( --opacity-disabled ) ;
}
. ui . disabled . input > input ,
. ui . input : not ( . disabled ) input [ disabled ] {
pointer-events : none ;
}
/ * --------------------
Active
--------------------- * /
. ui . input > input : active ,
. ui . input . down input {
border-color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
background : # FAFAFA ;
color : rgba ( 0 , 0 , 0 , 0 . 87 ) ;
box-shadow : none ;
}
/ * --------------------
Loading
--------------------- * /
. ui . loading . loading . input > i . icon : before {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -0 . 64285714em 0 0 -0 . 64285714em ;
width : 1 . 28571429em ;
height : 1 . 28571429em ;
border-radius : 500rem ;
border : 0 . 2em solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. ui . loading . loading . input > i . icon : after {
position : absolute ;
content : '' ;
top : 50 % ;
left : 50 % ;
margin : -0 . 64285714em 0 0 -0 . 64285714em ;
width : 1 . 28571429em ;
height : 1 . 28571429em ;
animation : loader 0 . 6s infinite linear ;
border : 0 . 2em solid # 767676 ;
border-radius : 500rem ;
box-shadow : 0 0 0 1px transparent ;
}
/ * --------------------
Focus
--------------------- * /
. ui . input . focus > input ,
. ui . input > input : focus {
border-color : # 85B7D9 ;
background : # FFFFFF ;
color : rgba ( 0 , 0 , 0 , 0 . 8 ) ;
box-shadow : none ;
}
. ui . input . focus > input :: -webkit-input-placeholder ,
. ui . input > input : focus :: -webkit-input-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
. ui . input . focus > input :: -moz-placeholder ,
. ui . input > input : focus :: -moz-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
. ui . input . focus > input : -ms-input-placeholder ,
. ui . input > input : focus : -ms-input-placeholder {
color : rgba ( 115 , 115 , 115 , 0 . 87 ) ;
}
/ * --------------------
States
--------------------- * /
. ui . input . error > input {
background-color : # FFF6F6 ;
border-color : # E0B4B4 ;
color : # 9F3A38 ;
box-shadow : none ;
}
/* Placeholder */
. ui . input . error > input :: -webkit-input-placeholder {
color : # e7bdbc ;
}
. ui . input . error > input :: -moz-placeholder {
color : # e7bdbc ;
}
. ui . input . error > input : -ms-input-placeholder {
color : # e7bdbc ! important ;
}
/* Focused Placeholder */
. ui . input . error > input : focus :: -webkit-input-placeholder {
color : # da9796 ;
}
. ui . input . error > input : focus :: -moz-placeholder {
color : # da9796 ;
}
. ui . input . error > input : focus : -ms-input-placeholder {
color : # da9796 ! important ;
}
. ui . input . info > input {
background-color : # F8FFFF ;
border-color : # A9D5DE ;
color : # 276F86 ;
box-shadow : none ;
}
/* Placeholder */
. ui . input . info > input :: -webkit-input-placeholder {
color : # 98cfe1 ;
}
. ui . input . info > input :: -moz-placeholder {
color : # 98cfe1 ;
}
. ui . input . info > input : -ms-input-placeholder {
color : # 98cfe1 ! important ;
}
/* Focused Placeholder */
. ui . input . info > input : focus :: -webkit-input-placeholder {
color : # 70bdd6 ;
}
. ui . input . info > input : focus :: -moz-placeholder {
color : # 70bdd6 ;
}
. ui . input . info > input : focus : -ms-input-placeholder {
color : # 70bdd6 ! important ;
}
. ui . input . success > input {
background-color : # FCFFF5 ;
border-color : # A3C293 ;
color : # 2C662D ;
box-shadow : none ;
}
/* Placeholder */
. ui . input . success > input :: -webkit-input-placeholder {
color : # 8fcf90 ;
}
. ui . input . success > input :: -moz-placeholder {
color : # 8fcf90 ;
}
. ui . input . success > input : -ms-input-placeholder {
color : # 8fcf90 ! important ;
}
/* Focused Placeholder */
. ui . input . success > input : focus :: -webkit-input-placeholder {
color : # 6cbf6d ;
}
. ui . input . success > input : focus :: -moz-placeholder {
color : # 6cbf6d ;
}
. ui . input . success > input : focus : -ms-input-placeholder {
color : # 6cbf6d ! important ;
}
. ui . input . warning > input {
background-color : # FFFAF3 ;
border-color : # C9BA9B ;
color : # 573A08 ;
box-shadow : none ;
}
/* Placeholder */
. ui . input . warning > input :: -webkit-input-placeholder {
color : # edad3e ;
}
. ui . input . warning > input :: -moz-placeholder {
color : # edad3e ;
}
. ui . input . warning > input : -ms-input-placeholder {
color : # edad3e ! important ;
}
/* Focused Placeholder */
. ui . input . warning > input : focus :: -webkit-input-placeholder {
color : # e39715 ;
}
. ui . input . warning > input : focus :: -moz-placeholder {
color : # e39715 ;
}
. ui . input . warning > input : focus : -ms-input-placeholder {
color : # e39715 ! important ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variations
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * --------------------
Transparent
--------------------- * /
. ui . transparent . input > textarea ,
. ui . transparent . input > input {
border-color : transparent ! important ;
background-color : transparent ! important ;
padding : 0 ;
box-shadow : none ! important ;
border-radius : 0 ! important ;
}
. field . ui . transparent . input > textarea {
padding : 0 . 67857143em 1em ;
}
/* Transparent Icon */
: not ( . field ) > . ui . transparent . icon . input > i . icon {
width : 1 . 1em ;
}
: not ( . field ) > . ui . ui . ui . transparent . icon . input > input {
padding-left : 0 ;
padding-right : 2em ;
}
: not ( . field ) > . ui . ui . ui . transparent [ class * = "left icon" ] . input > input {
padding-left : 2em ;
padding-right : 0 ;
}
/ * --------------------
Icon
--------------------- * /
. ui . icon . input > i . icon {
cursor : default ;
position : absolute ;
line-height : 1 ;
text-align : center ;
top : 0 ;
right : 0 ;
margin : 0 ;
height : 100 % ;
width : 2 . 67142857em ;
opacity : 0 . 5 ;
border-radius : 0 0 . 28571429rem 0 . 28571429rem 0 ;
transition : opacity 0 . 3s ease ;
}
. ui . icon . input > i . icon : not ( . link ) {
pointer-events : none ;
}
. ui . ui . ui . ui . icon . input > textarea ,
. ui . ui . ui . ui . icon . input > input {
padding-right : 2 . 67142857em ;
}
. ui . icon . input > i . icon : before ,
. ui . icon . input > i . icon : after {
left : 0 ;
position : absolute ;
text-align : center ;
top : 50 % ;
width : 100 % ;
margin-top : -0 . 5em ;
}
. ui . icon . input > i . link . icon {
cursor : pointer ;
}
. ui . icon . input > i . circular . icon {
top : 0 . 35em ;
right : 0 . 5em ;
}
/* Left Icon Input */
. ui [ class * = "left icon" ] . input > i . icon {
right : auto ;
left : 1px ;
border-radius : 0 . 28571429rem 0 0 0 . 28571429rem ;
}
. ui [ class * = "left icon" ] . input > i . circular . icon {
right : auto ;
left : 0 . 5em ;
}
. ui . ui . ui . ui [ class * = "left icon" ] . input > textarea ,
. ui . ui . ui . ui [ class * = "left icon" ] . input > input {
padding-left : 2 . 67142857em ;
padding-right : 1em ;
}
/* Focus */
. ui . icon . input > textarea : focus ~ i . icon ,
. ui . icon . input > input : focus ~ i . icon {
opacity : 1 ;
}
/ * --------------------
Labeled
--------------------- * /
/* Adjacent Label */
. ui . labeled . input > . label {
flex : 0 0 auto ;
margin : 0 ;
font-size : 1em ;
}
. ui . labeled . input > . label : not ( . corner ) {
padding-top : 0 . 78571429em ;
padding-bottom : 0 . 78571429em ;
}
/* Regular Label on Left */
. ui . labeled . input : not ( [ class * = "corner labeled" ] ) . label : first-child {
border-top-right-radius : 0 ;
border-bottom-right-radius : 0 ;
}
. ui . labeled . input : not ( [ class * = "corner labeled" ] ) . label : first-child + input {
border-top-left-radius : 0 ;
border-bottom-left-radius : 0 ;
border-left-color : transparent ;
}
. ui . labeled . input : not ( [ class * = "corner labeled" ] ) . label : first-child + input : focus {
border-left-color : # 85B7D9 ;
}
/* Regular Label on Right */
. ui [ class * = "right labeled" ] . input > input {
border-top-right-radius : 0 ! important ;
border-bottom-right-radius : 0 ! important ;
border-right-color : transparent ! important ;
}
. ui [ class * = "right labeled" ] . input > input + . label {
border-top-left-radius : 0 ;
border-bottom-left-radius : 0 ;
}
. ui [ class * = "right labeled" ] . input > input : focus {
border-right-color : # 85B7D9 ! important ;
}
/* Corner Label */
. ui . labeled . input . corner . label {
top : 1px ;
right : 1px ;
font-size : 0 . 64285714em ;
border-radius : 0 0 . 28571429rem 0 0 ;
}
/* Spacing with corner label */
. ui [ class * = "corner labeled" ] : not ( [ class * = "left corner labeled" ] ) . labeled . input > textarea ,
. ui [ class * = "corner labeled" ] : not ( [ class * = "left corner labeled" ] ) . labeled . input > input {
padding-right : 2 . 5em ! important ;
}
. ui [ class * = "corner labeled" ] . icon . input : not ( [ class * = "left corner labeled" ] ) > textarea ,
. ui [ class * = "corner labeled" ] . icon . input : not ( [ class * = "left corner labeled" ] ) > input {
padding-right : 3 . 25em ! important ;
}
. ui [ class * = "corner labeled" ] . icon . input : not ( [ class * = "left corner labeled" ] ) > i . icon {
margin-right : 1 . 25em ;
}
/* Left Labeled */
. ui [ class * = "left corner labeled" ] . labeled . input > textarea ,
. ui [ class * = "left corner labeled" ] . labeled . input > input {
padding-left : 2 . 5em ! important ;
}
. ui [ class * = "left corner labeled" ] . icon . input > textarea ,
. ui [ class * = "left corner labeled" ] . icon . input > input {
padding-left : 3 . 25em ! important ;
}
. ui [ class * = "left corner labeled" ] . icon . input > i . icon {
margin-left : 1 . 25em ;
}
. ui . icon . input > textarea ~ i . icon {
height : 3em ;
}
: not ( . field ) > . ui . transparent . icon . input > textarea ~ i . icon {
height : 1 . 3em ;
}
/* Corner Label Position */
. ui . input > . ui . corner . label {
top : 1px ;
right : 1px ;
}
. ui . input > . ui . left . corner . label {
right : auto ;
left : 1px ;
}
/* Labeled and action input states */
. ui . form . field . error > . ui . action . input > . ui . button ,
. ui . form . field . error > . ui . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui . action . input . error > . ui . button ,
. ui . labeled . input . error : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-top : 1px solid # E0B4B4 ;
border-bottom : 1px solid # E0B4B4 ;
}
. ui . form . field . error > . ui [ class * = "left action" ] . input > . ui . button ,
. ui . form . field . error > . ui . labeled . input : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui [ class * = "left action" ] . input . error > . ui . button ,
. ui . labeled . input . error : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-left : 1px solid # E0B4B4 ;
}
. ui . form . field . error > . ui . action . input : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . form . field . error > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > input + . ui . label ,
. ui . action . input . error : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . right . labeled . input . error : not ( [ class * = "corner labeled" ] ) > input + . ui . label {
border-right : 1px solid # E0B4B4 ;
}
. ui . form . field . error > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child ,
. ui . right . labeled . input . error : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child {
border-left : 1px solid # E0B4B4 ;
}
. ui . form . field . info > . ui . action . input > . ui . button ,
. ui . form . field . info > . ui . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui . action . input . info > . ui . button ,
. ui . labeled . input . info : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-top : 1px solid # A9D5DE ;
border-bottom : 1px solid # A9D5DE ;
}
. ui . form . field . info > . ui [ class * = "left action" ] . input > . ui . button ,
. ui . form . field . info > . ui . labeled . input : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui [ class * = "left action" ] . input . info > . ui . button ,
. ui . labeled . input . info : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-left : 1px solid # A9D5DE ;
}
. ui . form . field . info > . ui . action . input : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . form . field . info > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > input + . ui . label ,
. ui . action . input . info : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . right . labeled . input . info : not ( [ class * = "corner labeled" ] ) > input + . ui . label {
border-right : 1px solid # A9D5DE ;
}
. ui . form . field . info > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child ,
. ui . right . labeled . input . info : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child {
border-left : 1px solid # A9D5DE ;
}
. ui . form . field . success > . ui . action . input > . ui . button ,
. ui . form . field . success > . ui . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui . action . input . success > . ui . button ,
. ui . labeled . input . success : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-top : 1px solid # A3C293 ;
border-bottom : 1px solid # A3C293 ;
}
. ui . form . field . success > . ui [ class * = "left action" ] . input > . ui . button ,
. ui . form . field . success > . ui . labeled . input : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui [ class * = "left action" ] . input . success > . ui . button ,
. ui . labeled . input . success : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-left : 1px solid # A3C293 ;
}
. ui . form . field . success > . ui . action . input : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . form . field . success > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > input + . ui . label ,
. ui . action . input . success : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . right . labeled . input . success : not ( [ class * = "corner labeled" ] ) > input + . ui . label {
border-right : 1px solid # A3C293 ;
}
. ui . form . field . success > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child ,
. ui . right . labeled . input . success : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child {
border-left : 1px solid # A3C293 ;
}
. ui . form . field . warning > . ui . action . input > . ui . button ,
. ui . form . field . warning > . ui . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui . action . input . warning > . ui . button ,
. ui . labeled . input . warning : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-top : 1px solid # C9BA9B ;
border-bottom : 1px solid # C9BA9B ;
}
. ui . form . field . warning > . ui [ class * = "left action" ] . input > . ui . button ,
. ui . form . field . warning > . ui . labeled . input : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label ,
. ui [ class * = "left action" ] . input . warning > . ui . button ,
. ui . labeled . input . warning : not ( . right ) : not ( [ class * = "corner labeled" ] ) > . ui . label {
border-left : 1px solid # C9BA9B ;
}
. ui . form . field . warning > . ui . action . input : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . form . field . warning > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > input + . ui . label ,
. ui . action . input . warning : not ( [ class * = "left action" ] ) > input + . ui . button ,
. ui . right . labeled . input . warning : not ( [ class * = "corner labeled" ] ) > input + . ui . label {
border-right : 1px solid # C9BA9B ;
}
. ui . form . field . warning > . ui . right . labeled . input : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child ,
. ui . right . labeled . input . warning : not ( [ class * = "corner labeled" ] ) > . ui . label : first-child {
border-left : 1px solid # C9BA9B ;
}
/ * --------------------
Action
--------------------- * /
. ui . action . input > . button ,
. ui . action . input > . buttons {
display : flex ;
align-items : center ;
flex : 0 0 auto ;
}
. ui . action . input > . button ,
. ui . action . input > . buttons > . button {
padding-top : 0 . 78571429em ;
padding-bottom : 0 . 78571429em ;
margin : 0 ;
}
/* Input when ui Left*/
. ui [ class * = "left action" ] . input > input {
border-top-left-radius : 0 ;
border-bottom-left-radius : 0 ;
border-left-color : transparent ;
}
/* Input when ui Right*/
. ui . action . input : not ( [ class * = "left action" ] ) > input {
border-top-right-radius : 0 ;
border-bottom-right-radius : 0 ;
border-right-color : transparent ;
}
/* Button and Dropdown */
. ui . action . input > . dropdown : first-child ,
. ui . action . input > . button : first-child ,
. ui . action . input > . buttons : first-child > . button {
border-radius : 0 . 28571429rem 0 0 0 . 28571429rem ;
}
. ui . action . input > . dropdown : not ( : first-child ) ,
. ui . action . input > . button : not ( : first-child ) ,
. ui . action . input > . buttons : not ( : first-child ) > . button {
border-radius : 0 ;
}
. ui . action . input > . dropdown : last-child ,
. ui . action . input > . button : last-child ,
. ui . action . input > . buttons : last-child > . button {
border-radius : 0 0 . 28571429rem 0 . 28571429rem 0 ;
}
/* Input Focus */
. ui . action . input : not ( [ class * = "left action" ] ) > input : focus {
border-right-color : # 85B7D9 ;
}
. ui . ui [ class * = "left action" ] . input > input : focus {
border-left-color : # 85B7D9 ;
}
/ * --------------------
Fluid
--------------------- * /
. ui . fluid . input {
display : flex ;
}
. ui . fluid . input > input {
width : 0 ! important ;
}
/ * --------------------
Size
--------------------- * /
. ui . input {
font-size : 1em ;
}
. ui . mini . input {
font-size : 0 . 78571429em ;
}
. ui . tiny . input {
font-size : 0 . 85714286em ;
}
. ui . small . input {
font-size : 0 . 92857143em ;
}
. ui . large . input {
font-size : 1 . 14285714em ;
}
. ui . big . input {
font-size : 1 . 28571429em ;
}
. ui . huge . input {
font-size : 1 . 42857143em ;
}
. ui . massive . input {
font-size : 1 . 71428571em ;
}
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Theme Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Site Overrides
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /