* / @ font-face { font-family : Icons ; src : url ( . . / themes / default / assets / fonts / icons . eot ) ; src : url ( . . / themes / default / assets / fonts / icons . eot ? # iefix ) format ( 'embedded-opentype' ) , url ( . . / themes / default / assets / fonts / icons . woff2 ) format ( 'woff2' ) , url ( . . / themes / default / assets / fonts / icons . woff ) format ( 'woff' ) , url ( . . / themes / default / assets / fonts / icons . ttf ) format ( 'truetype' ) , url ( . . / themes / default / assets / fonts / icons . svg # icons ) format ( 'svg' ) ; font-style : normal ; font-weight : 400 ; font-variant : normal ; text-decoration : inherit ; text-transform : none } i . icon { display : inline-block ; opacity : 1 ; margin : 0 .25 rem 0 0 ; width : 1.18 em ; height : 1 em ; font-family : Icons ; font-style : normal ; font-weight : 400 ; text-decoration : inherit ; text-align : center ; speak : none ; font-smoothing : antialiased ; -moz- osx-font-smoothing : grayscale ; -webkit- font-smoothing : antialiased ; -webkit- backface-visibility : hidden ; backface-visibility : hidden } i . icon : before { background : 0 0 !important } i . icon . loading { height : 1 em ; line-height : 1 ; -webkit- animation : icon - loading 2 s linear infinite ; animation : icon - loading 2 s linear infinite } @ -webkit-keyframes icon-loading { from { -webkit- transform : rotate ( 0 ) ; transform : rotate ( 0 ) } to { -webkit- transform : rotate ( 360 deg ) ; transform : rotate ( 360 deg ) } } @ keyframes icon-loading { from { -webkit- transform : rotate ( 0 ) ; transform : rotate ( 0 ) } to { -webkit- transform : rotate ( 360 deg ) ; transform : rotate ( 360 deg ) } } i . icon . hover { opacity : 1 !important } i . icon . active { opacity : 1 !important } i . emphasized . icon { opacity : 1 !important } i . disabled . icon { opacity : .45 !important } i . fitted . icon { width : auto ; margin : 0 !important } i . link . icon , i . link . icons { cursor : pointer ; opacity : .8 ; -webkit- transition : opacity .1 s ease ; transition : opacity .1 s ease } i . link . icon : hover , i . link . icons : hover { opacity : 1 !important } i . circular . icon { border-radius : 500 em !important ; line-height : 1 !important ; padding : .5 em 0 !important ; -webkit- box-shadow : 0 0 0 .1 em rgba ( 0 , 0 , 0 , .1 ) inset ; box-shadow : 0 0 0 .1 em rgba ( 0 , 0 , 0 , .1 ) inset ; width : 2 em !important ; height : 2 em !important } i . circular . inverted . icon { border : none ; -webkit- box-shadow : none ; box-shadow : none } i . flipped . icon , i . horizontally . flipped . icon { -webkit- transform : scale ( -1 , 1 ) ; transform : scale ( -1 , 1 ) } i . vertically . flipped . icon { -webkit- transform : scale ( 1 , -1 ) ; transform : scale ( 1 , -1 ) } i . clockwise . rotated . icon , i . right . rotated . icon , i . rotated . icon { -webkit- transform : rotate ( 90 deg ) ; transform : rotate ( 90 deg ) } i . counterclockwise . rotated . icon , i . left . rotated . icon { -webkit- transform : rotate ( -90 deg ) ; transform : rotate ( -90 deg ) } i . bordered . icon { line-height : 1 ; vertical-align : baseline ; width : 2 em ; height : 2 em ; padding : .5 em 0 !important ; -webkit- box-shadow : 0 0 0 .1 em rgba ( 0 , 0 , 0 , .1 ) inset ; box-shadow : 0 0 0 .1 em rgba ( 0 , 0 , 0 , .1 ) inset } i . bordered . inverted . icon { border : none ; -webkit- box-shadow : none ; box-shadow : none } i . inverted . bordered . icon , i . inverted . circular . icon { background-color : #1b1c1d !important ; color : #fff !important } i . inverted . icon { color : #fff } i . red . icon { color : #db2828 !important } i . inverted . red . icon { color : #ff695e !important } i . inverted . bordered . red . icon , i . inverted . circular . red . icon { background-color : #db2828 !important ; color : #fff !important } i . orange . icon { color : #f2711c !important } i . inverted . orange . icon { color : #ff851b !important } i . inverted . bordered . orange . icon , i . inverted . circular . orange . icon { background-color : #f2711c !important ; color : #fff !important } i . yellow . icon { color : #fbbd08 !important } i . inverted . yellow . icon { color : #ffe21f !important } i . inverted . bordered . yellow . icon , i . inverted . circular . yellow . icon { background-color : #fbbd08 !important ; color : #fff !important } i . olive . icon { color : #b5cc18 !important } i . inverted . olive . icon { color : #d9e778 !important } i . inverted . bordered . olive . icon , i . inverted . circular . olive . icon { background-color : #b5cc18 !important ; color : #fff !important } i . green . icon { color : #21ba45 !important } i . inverted . green . icon { color : #2ecc40 !important } i . inverted . bordered . green . icon , i . inverted . circular . green . icon { background-color : #21ba45 !important ; color : #fff !important } i . teal . icon { color : #00b5ad !important } i . inverted . teal . icon { color : #6dffff !important } i . inverted . bordered . teal . icon , i . inverted . circular . teal . icon { background-color : #00b5ad !important ; color : #fff !important } i . blue . icon { color : #2185d0 !important } i . inverted . blue . icon { color : #54c8ff !important } i . inverted . bordere