/* Social panel */
.social-panel { position: fixed; left: 0; right: 0; background-color: #ffffff; z-index: 500; }
.social-panel-top { top: 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,.2); height: 34px; }
.social-panel-bottom { bottom: 0; box-shadow: 0 -2px 8px 0 rgba(0,0,0,.1); }

.social-panel .pullout-box:not(.open) { display: none; }
.social-panel .pullout-box { border-bottom: 1px solid #eaeaea; position: relative; }
.social-panel .pullout-box > .close { position: absolute; right: 10px; bottom: 100%; transform: translateY(50%); width: 30px; height: 30px; border: 1px solid #b5b5b5; background-color: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: FontAwesome; color: #333; line-height: 24px; font-size: 20px; }
.social-panel .pullout-box > .close::before { display: inline-block; content: "\f00d"; }
.social-panel .pullout-box > .content:not(.form) { padding: 15px 20px; }

.social-panel .pullout-box > .content.form { display: flex; }
.social-panel .pullout-box > .content.form > TEXTAREA { border: 0; flex-basis: 100%; outline: 0; padding: 5px 7px; overflow: hidden; box-sizing: border-box; min-height: 60px; max-height: 150px; white-space: pre-wrap; font-size: 100%; }
.social-panel .pullout-box > .content.form > BUTTON { border: 0; background-color: #66BB6A; padding: 10px; font-family: FontAwesome; font-size: 20px; color: #ffffff; outline: 0; }
.social-panel .pullout-box > .content.form > BUTTON:hover { background-color: #74d678; }
.social-panel .pullout-box > .content.form > BUTTON:disabled { background-color: #bdbdbd; cursor: not-allowed; }
.social-panel .pullout-box > .content.form > BUTTON::before { content: "\f1d8"; }

.social-panel .pullout-box > .content.form > INPUT[data-teatearea] { display: block; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; }

.social-panel .pullout-box > .content.form > INPUT[data-teatearea]:not(:checked) ~ .answers { display: block; }
.social-panel .pullout-box > .content.form > INPUT[data-teatearea]:not(:checked) ~ TEXTAREA { display: none; }
.social-panel .pullout-box > .content.form > INPUT[data-teatearea]:checked  ~ .answers { display: none; }
.social-panel .pullout-box > .content.form > INPUT[data-teatearea]:checked ~ TEXTAREA { display: block; }

.social-panel .pullout-box > .content.form > .answers { flex-basis: 100%; padding: 5px 10px; font-size: 12px; line-height: 14px; }
.social-panel .pullout-box > .content.form > .answers > DIV { margin: 10px 0; }
.social-panel .pullout-box > .content.form > .answers > DIV > INPUT { display: block; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; }
.social-panel .pullout-box > .content.form > .answers > DIV > LABEL::before { display: inline-block; content: ''; width: 8px; height: 8px; background-color: transparent; border: 2px solid #509453; border-radius: 50%; margin-right: 5px; }
.social-panel .pullout-box > .content.form > .answers > DIV > INPUT:checked ~ LABEL { font-weight: 700; }
.social-panel .pullout-box > .content.form > .answers > DIV > INPUT:checked ~ LABEL::before { background-color: #509453; }


.social-panel .popup-box:not(.open) { display: none; }
.social-panel .popup-box { display: flex; overflow: hidden; position: absolute; max-width: 340px; background-color: #ffffff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.2); white-space: nowrap; text-align: left; }
.social-panel .popup-box > .close { display: flex; justify-content: center; align-items: center; font-family: FontAwesome; line-height: 24px; font-size: 24px; background-color: #f44336; padding: 0 10px; color: #ffffff; }
.social-panel .popup-box > .close:hover { background-color: #d32f2f; }
.social-panel .popup-box > .close::before { display: inline-block; content: "\f00d"; }
.social-panel .popup-box.position-top { bottom: 100%; border-radius: 6px 6px 0 0; }
.social-panel .popup-box.position-bottom { top: 100%; border-radius: 0 0 6px 6px; }
.social-panel .popup-box.align-left { left: 0; }
.social-panel .popup-box.align-right { right: 0; }

.social-panel .popup-box > .content:not(.form) { margin: 12px 10px; }

.social-panel .popup-box > .content.form { display: flex; margin: 0; }
.social-panel .popup-box > .content.form > TEXTAREA { border: 0; flex-basis: 100%; outline: 0; padding: 5px 7px; overflow: hidden; box-sizing: border-box; min-height: 60px; max-height: 150px; white-space: pre-wrap; font-size: 100%; }
.social-panel .popup-box > .content.form > BUTTON { border: 0; background-color: #66BB6A; padding: 10px; font-family: FontAwesome; font-size: 20px; color: #ffffff; outline: 0; cursor: pointer; }
.social-panel .popup-box > .content.form > BUTTON:hover { background-color: #74d678; }
.social-panel .popup-box > .content.form > BUTTON:disabled { background-color: #bdbdbd; cursor: not-allowed; }
.social-panel .popup-box > .content.form > BUTTON::before { content: "\f1d8"; }

.social-panel .popup-box > .content.form > INPUT[data-teatearea] { display: block; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; }

.social-panel .popup-box > .content.form > INPUT[data-teatearea]:not(:checked) ~ .answers { display: block; }
.social-panel .popup-box > .content.form > INPUT[data-teatearea]:not(:checked) ~ TEXTAREA { display: none; }
.social-panel .popup-box > .content.form > INPUT[data-teatearea]:checked  ~ .answers { display: none; }
.social-panel .popup-box > .content.form > INPUT[data-teatearea]:checked ~ TEXTAREA { display: block; }

.social-panel .popup-box > .content.form > .answers { flex-basis: 100%; padding: 5px 10px; font-size: 12px; line-height: 14px; }
.social-panel .popup-box > .content.form > .answers > DIV { margin: 10px 0; }
.social-panel .popup-box > .content.form > .answers > DIV > INPUT { display: block; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; }
.social-panel .popup-box > .content.form > .answers > DIV > LABEL::before { display: inline-block; content: ''; width: 8px; height: 8px; background-color: transparent; border: 2px solid #509453; border-radius: 50%; margin-right: 5px; }
.social-panel .popup-box > .content.form > .answers > DIV > INPUT:checked ~ LABEL { font-weight: 700; }
.social-panel .popup-box > .content.form > .answers > DIV > INPUT:checked ~ LABEL::before { background-color: #509453; }



.social-panel .fields { display: flex; justify-content: space-around; max-width: 1020px; margin-left: auto; margin-right: auto; padding-bottom: calc(env(safe-area-inset-bottom)); }
.social-panel .field-type-button { box-sizing: border-box; /*height: 50px;*/ min-width: 35px; /*padding: 10px 10px;*/ /*background-color: rgba(0,0,0,.1);*/ text-align: center; vertical-align: middle; /*line-height: 50px;*/ cursor: pointer; position: relative; }
.social-panel .field-type-button:hover { color: #455a64; }
.social-panel .field-type-button.open { color: #07f; }
.social-panel.pullout-box-open .button:not(.open) { color: #c8c8c8; }
.social-panel .field-type-button .icon,
.social-panel .field-type-button .icon-custom { display: inline-block; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

BODY.content-wide .social-panel-top .fields { max-width: 1310px; }
@media only screen and (max-width: 1310px) {
    BODY.content-wide .social-panel-top .fields { padding: 0 15px; }
}
.social-panel-top .fields { margin-top: 4px; }
.social-panel-top .fields > .field { height: 30px; }
.social-panel-top .field-type-button .icon,
.social-panel-top .field-type-button .icon-custom { margin: 5px 10px; font-size: 20px; }

.social-panel-bottom .field-type-button .icon,
.social-panel-bottom .field-type-button .icon-custom { margin: 10px 10px; font-size: 30px; }


HTML.fontface-fontawesome .social-panel .icon { font-family: FontAwesome; }
HTML.fontface-fontawesome .social-panel .icon::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }

HTML.fontface-fontawesome .social-panel .icon-share::before { content: "\f1e0"; }
HTML.fontface-fontawesome .social-panel .icon-like::before { content: "\f087"; }
HTML.fontface-fontawesome .social-panel .icon-deslike::before { content: "\f088"; }
HTML.fontface-fontawesome .social-panel .icon-like-already::before { content: "\f087"; /*content: "\f164";*/ }
HTML.fontface-fontawesome .social-panel .icon-deslike-already::before { content: "\f088"; /* content: "\f165"; */ }

HTML.fontface-fontawesome .social-panel .icon-like.chosen,
HTML.fontface-fontawesome .social-panel .icon-deslike.chosen,
HTML.fontface-fontawesome .social-panel .icon-like-already.chosen { color: #07f; }

HTML.fontface-fontawesome .social-panel .icon-deslike-already.chosen { color: #e53935; }

HTML.fontface-fontawesome .social-panel .icon-like.not-chosen,
HTML.fontface-fontawesome .social-panel .icon-deslike.not-chosen,
HTML.fontface-fontawesome .social-panel .icon-like-already.not-chosen,
HTML.fontface-fontawesome .social-panel .icon-deslike-already.not-chosen { color: #c8c8c8; }

.social-panel .field-id-logo { margin-left: 0; margin-right: auto; display: flex; align-items: center; cursor: pointer; }
.social-panel .field-id-logo .title { display: inline-block; margin-left: 13px; margin-bottom: 1px; font-size: 15px; max-width: 600px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-panel .field-id-logo DIV .title { color: #222; border-bottom: 1px dashed #222; }
.social-panel .field-id-logo:hover DIV .title { border-bottom: 1px solid #222; }

@media only screen and (max-width: 900px) {
    .social-panel-top .field-id-logo .title { max-width: 500px; }
}

.social-panel .field-id-share-top { display: flex; align-items: center; }
HTML.fontface-fontawesome .social-panel .field-id-share-top .icon::before { content: "\f1e0"; }


.social-panel .field-id-comments .icon-comments { display: inline-block; border: 2px solid black; border-radius: 8px 8px 0 8px; font-weight: 700; min-width: 20px; max-width: 60px; overflow: hidden; text-align: center; text-overflow: ellipsis; }
.social-panel .field-id-comments:hover .icon-comments { border-color: #455a64; }
.social-panel-top .field-id-comments { padding-top: 4px; width: 60px; }
.social-panel-top .field-id-comments .icon-comments { font-size: 12px; line-height: 16px; min-height: 16px; padding: 0 1px; margin: 0px 10px; }
.social-panel-bottom .field-id-comments { padding-top: 2px; }
.social-panel-bottom .field-id-comments .icon-comments { font-size: 14px; line-height: 20px; min-height: 20px; padding: 2px 4px; }
.social-panel .field-id-comments .icon-comments:empty::before { font-family: FontAwesome; content: "\f040"; }
.social-panel.pullout-box-open .field-id-comments:not(.open) .icon-comments { border-color: #c8c8c8; }