Custom form CSS - align social sign on icon
Hey everyone,
I'm working on the following form (screenshot / custom CSS below) and having trouble getting the "sign in with LinkedIn" icon to align to the right.
Any suggestions / reference to documentation would be greatly appreciated.
Thanks in advance.
Custom CSS:
#mktoStyleLoaded {
/*css load detection, do not remove*/
color#123456
}
.mktoForm span.mktoButtonWrap.mktoSimple button[type="submit"].mktoButton {
width: auto; !important
border-radius:3px; !important
-moz-border-radius: 3px; !important
-webkit-border-radius: 3px; !important
background-color: #00A7D9; !important
background: #00A7D9; !important
color: #202020 !important
font-size: 18px !important
font-weight: 600; !important
padding: 10px; 35px !important
text-align: right; !important
text-decoration: none;
min-width: 110px; !important
clear: both;
float: right; !important
}
mkto.FormRow {
float: right !important;
}
.mktoButton {
Position: relative !important;
float: right !imporant
font-family: 'Open Sans', 'Helvetic Neue', 'Arial', sans-serif;
letter-spacing: -.02em;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #00A7D9
color: #00A7D9
display: block;
font-size: 18px;
font-weight: 600;
padding: 10px 30px;
margin: auto; !important
text-align: left;
text-decoration: none;
min-width: 110px;
clear: both;
}
.cf_sign_on {
width: 215px !important;
height: 30px !important;
border: none !important;
background: none !important;
float: right !important;
}
.cf_synd_icon_li_sm {
background: url('content.linkedin.com/content/dam/developer/global/en_US/site/img/signin-button.png') !important;
}
.cf_sign_on_caption{
text-indent: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
display: none !important;
}
.cf_icon {
width: 215px !important;
height: 41px !important;
margin-left: auto !important;
margin-right: auto !important;
align-content: flex-end; !important;
}
.cf_sign_on_button {
width: 215px !important;
height: 50px !important;
border: none !important;
background: none !important;
text-indent: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
}
.mktoForm {
font-family:"helvetica", Helvetica, Arial, sans-serif !important;
}