/* Square Icon */
.socmed-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    padding: 0px;
}
.socmed-icon.fb {
    background-color: #3B5998;
    background-image: url('/images/socmed_icon_fb.png');
}
.socmed-icon.tw {
    background-color: #55ACEE;
    background-image: url('/images/socmed_icon_tw.png');
}
.socmed-icon.go {
    background-color: #FFFFFF;
    background-image: url('/images/socmed_icon_go.png');
}
.socmed-icon.li {
    background-color: #007BB5;
    background-image: url('/images/socmed_icon_li.png');
}
.socmed-icon.has-shadow {
    box-shadow:0px 0px 4px #CCC;
}
.socmed-icon.has-border {
    border: 1px solid #C2C2C2;
}
.socmed-icon.is-rounded {
    border-radius: 4px;
}
.socmed-icon.is-large {
    background-size: 64px 64px;
    width: 64px;
    height: 64px;
}
.socmed-icon.is-medium {
    background-size: 48px 48px;
    width: 48px;
    height: 48px;
}
.socmed-icon.is-small {
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
}

/* Login Button */
.socmed-login-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.socmed-login-buttons > * {
    margin: 5px;
}
.socmed-login-buttons.is-vertical {
    flex-direction: column;
}
.socmed-login-button {
    display: inline-block;
    border-radius: 2px;
    font-size: 12.5px;
    width: 134px;
    text-align: left;
    font-weight: normal;
    background: white;
    color: #676869;
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden;
    vertical-align: middle;
}
.socmed-login-button:hover {
    color: #17212C;
}
.socmed-login-button.is-compact {
    width: 114px;
}
.socmed-login-button.is-compact:before {
    margin-right: 10px;
}
.socmed-login-button.has-shadow {
    box-shadow: 0px 2px 2px #C2C2C2;
}
.socmed-login-button.has-border {
    border: 1px solid #C2C2C2;
}
.socmed-login-button.has-border:hover {
    border: 1px solid #B8B8B8;
}
.socmed-login-button:before {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    width: 40px; 
    height: 40px;
    content:"";
    vertical-align: middle;
    margin-right: 20px;
    border-right: 1px solid #C2C2C2;
}
.socmed-login-button.fb:before {
    background-color: #3B5998;
    background-image: url('/images/socmed_icon_fb.png');
}
.socmed-login-button.tw:before {
    background-color: #55ACEE;
    background-image: url('/images/socmed_icon_tw.png');
}
.socmed-login-button.go:before {
    background-color: #FFFFFF;
    background-image: url('/images/socmed_icon_go.png');
}
.socmed-login-button.li:before {
    background-color: #007BB5;
    background-image: url('/images/socmed_icon_li.png');
}

/* User Profile Picture */
.socmed-profilepic {
    border-radius:48px;
    -webkit-border-radius:48px;
    -moz-border-radius:48px;
    box-shadow:0px 0px 2px #AAA;
    -webkit-box-shadow:0px 0px 2px #AAA;
    -moz-box-shadow:0px 0px 2px #AAA;
    border:2px solid #FFF;
    width:48px;
    height:48px;
    position:relative;
    padding:0px;
}
.socmed-profilepic-icon {
    position:absolute;
    top:-4px;
    left:-4px
}

/* Follow Bar */
.socmed-followbar {
    width:100%;
    margin-bottom:10px;
}

.socmed-followbar-head {
    color:#384354;
    padding:4px 0px;
    font-size:15px;
    background-color:#F1F1F1;
    float:left;
    text-align:center;
    width:99%;
    border:1px solid #D0D1D5;
}
.socmed-followbar-body table {
    width:100%;
}
.socmed-followbar-btn {
    border:1px solid #D0D1D5;
    text-align:center;
    padding:0px;
    background-color:#FAFAFA;
    vertical-align:bottom;
}

.socmed-followbar-btn div {
    padding:10px 0px;
    border-bottom:6px solid #DDD;
    transition:all .1s linear;
}
.socmed-followbar-btn div.fb:hover {
    border-bottom:6px solid #3b5998;
}
.socmed-followbar-btn div.tw:hover {
    border-bottom:6px solid #00aced;
}
.socmed-followbar-btn div.li:hover {
    border-bottom:6px solid #007bb6;
}
.socmed-followbar-btn div.ig:hover {
    border-bottom:6px solid #8a3ab9;
}
.socmed-followbar-logo {
    font-size:30px;
    color:#2B3444;
    opacity:0.9;
}
.socmed-followbar-popup-head {
    position:relative;
    background-color:#17212C;
    text-align:center;
    padding:10px 10px 20px 10px;
}
.socmed-followbar-popup-head:before {
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    z-index:99999;
    top:0;
    left:0;
    background:radial-gradient(top center,ellipse cover,rgba(255,255,255,0.03) 0%,rgba(0,0,0,0) 90%);
    background:-webkit-radial-gradient(top center,ellipse cover,rgba(255,255,255,0.03) 0%,rgba(0,0,0,0) 90%);
    background:-moz-radial-gradient(top center,ellipse cover,rgba(255,255,255,0.03) 0%,rgba(0,0,0,0) 90%);
    background:-ms-radial-gradient(top center,ellipse cover,rgba(255,255,255,0.03) 0%,rgba(0,0,0,0) 90%);
}
.socmed-followbar-popup-icon {
    opacity:0.25;
}
.socmed-followbar-popup-title {
    font-size:26px;
    color:#FFF;
}
.socmed-followbar-popup-subtitle {
    font-size:14.5px;
    color:#ED8F49;
}
.socmed-followbar-popup-content {
    padding: 10px;
}

/* Enable Social Login Button */
.socmed-enablebtn:hover {
    border-color:#C9C9CD;
    background-color:#F1F1F1;
    box-shadow:0px 0px 4px #EEEEEE;
}
.socmed-enablebtn {
    position:relative;
    margin-bottom:10px;
    background-color:#F4F4F4;
    border-color:#D0D1D5;
    border-style:solid;
    padding:8px;
    border-radius:4px;
    text-align:left;
    border-width:1px 1px 4px 1px;
    font-weight:300;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
}
.socmed-enablebtn div {
    max-width:167px;
}
.socmed-enablebtn-head {
    font-size:18px;
    color:#384354;
}
.socmed-enablebtn-desc {
    font-size:11px;
    color:#676869;
}
@media screen and (min-width: 1080px) {
    .socmed-followbar-head {
        max-width:74px;
        padding:8px 10px;
    }
    .socmed-followbar-body {
        overflow:hidden;
    }
    .socmed-enablebtn div {
        margin-left:45px;
    }
    .socmed-enablebtn:before {
        content:'';
        position:absolute;
        top:50%;
        margin-top:-20px;
        left:6px;
        background:transparent url('/images/socmed_gear.png') no-repeat scroll center center / 40px 40px;
        width:40px;
        height:40px;
        opacity:0.45;
        transition:all .4s ease-in-out;
        -webkit-transition:all .4s ease-in-out;
        -moz-transition:all .4s ease-in-out;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        transform:translateZ(0) scale(1,1);
        -webkit-transform:translateZ(0) scale(1,1);
        -moz-transform:translateZ(0) scale(1,1);
        -ms-transform:translateZ(0) scale(1,1);
    }
    .socmed-enablebtn:after {
        content:'\e080';
        font-family:'Glyphicons Halflings';
        position:absolute;
        top:50%;
        font-size:20px;
        margin-top:-10px;
        right:2px;
        color:#C5C5C5;
        transition:all .2s linear;
        -webkit-transition:all .2s linear;
        -moz-transition:all .2s linear;
    }
    .socmed-enablebtn:hover::before {
        transform:rotate(10deg);
        -webkit-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        -ms-transform:rotate(10deg);
        opacity:0.5;
    }
    .socmed-enablebtn:hover::after {
        color:#ED8F49;
    }
}

/* Find Out More */
.socmed-findoutmore-box {
    display:none;
    position:relative;
    background-color:#EEE;
    margin:6px 0px 6px 0px;
}
.socmed-findoutmore-close-container {
    position:absolute;
    top:10px;
    right:10px;
}
.socmed-findoutmore-close div {
    height:20px;
    width:20px;
}
.socmed-findoutmore-content {
    width:91%;
}
.socmed-findoutmore-content ul {
    font-size:12px;
    color:#676869;
    font-style:italic;
    text-align:left;
    list-style:none !important;
    margin:0px !important;
    padding:10px !important;
}
.socmed-findoutmore-content li {
    text-indent:-14px;
    line-height:1.7em;
}
.socmed-findoutmore-content li:before {
    content:'\e013';
    font-family:'Glyphicons Halflings';
    font-size:10.5px;
    display:inline-block;
    padding-right:14px;
}
.socmed-findoutmore-btn {
    cursor:pointer;
    font-size:13px;
    background-color:#F2F2F2;
    color:#868788;
    padding:2px 28px;
    border:1px solid #D4D4D4;
    border-radius:4px;
}
.socmed-findoutmore-btn:hover {
    background-color:#EAEAEA;
}

/* Social Account Connection */
.socmed-connection-list {
    width:85%;
    table-layout:fixed;
}
.socmed-connection-list td {
    padding:10px;
    border-bottom:1px solid #DDD;
}
.socmed-connection-list-title {
    font-size:20px;
}
.socmed-connection-list-status {
    vertical-align:top;
}
.socmed-connection-list-tooltip-value {
    color:#ED8F49;
}
.socmed-connection-list-tooltip-desc {
    color:#BBB;
}
.ui-iconPlus {
    display:inline-block !important;
    vertical-align:top;
}
.ui-tooltip, .ui-tooltip-arrow:after {
    background:black;
    border:2px solid white;
}
.ui-tooltip {
    padding:10px 20px;
    color:white;
    border-radius:5px;
    font:13px Proxima-Nova,Sans-Serif;
    box-shadow:0 0 7px black;
}
.ui-tooltip-arrow {
    width:70px;
    height:16px;
    overflow:hidden;
    position:absolute;
    left:50%;
    margin-left:-35px;
    bottom:-16px;
}
.ui-tooltip-arrow.top {
    top:-16px;
    bottom:auto;
}
.ui-tooltip-arrow.left {
    left:20%;
}
.ui-tooltip-arrow:after {
    content:'';
    position:absolute;
    left:20px;
    top:-20px;
    width:25px;
    height:25px;
    box-shadow:6px 5px 9px -9px black;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}
.ui-tooltip-arrow.top:after {
    bottom:-20px;
    top:auto;
}
.socmed-promosec {
    position:relative;
}
.socmed-promosec-close {
    position:absolute;
    top:-20px;
    right:0px;
}