.profile-details-header { margin: .5rem 0 2.2rem } .profile-details-header h2 { display: inline; margin: 0; font-size: 2rem; font-family: RobotoMedium } .profile-details-header .divider { width: 1px; height: 1.6rem; margin: 0 1rem; display: inline-block; background-color: #bebebe; position: relative; top: .2rem } .profile-details-header a { font-family: RobotoMedium; font-size: 1.9rem; transition: color .5s ease-in-out } .profile-details-header a:hover { color: #23527c } @media screen and (max-width: 991px) { .profile-details-header { display: none } } .lock-switch-container { display: inline; float: right; position: relative } .lock-switch-container.lock-modal-btn { float: left; margin: 0 0 3.3rem; position: relative; top: -10px } .lock-switch-container .public-container span, .lock-switch-container .private-container span { cursor: pointer; font-family: RobotoRegular; position: relative; top: 4px } .lock-switch-container.public.small-switch, .lock-switch-container.private.small-switch { float: left; display: none } .lock-switch-container.public.small-switch .public-container i, .lock-switch-container.public.small-switch .private-container i, .lock-switch-container.private.small-switch .public-container i, .lock-switch-container.private.small-switch .private-container i { margin: 0 .6rem 0 0 } .lock-switch-container.public.small-switch .toggle-container, .lock-switch-container.private.small-switch .toggle-container { width: 40px; height: 20px; margin: 0 8px } .lock-switch-container.public.small-switch .toggle-container .toggle-btn, .lock-switch-container.private.small-switch .toggle-container .toggle-btn { width: 14px; height: 14px; top: 3px; left: 3px } .lock-switch-container.public .toggle-container { background-color: #000 } .lock-switch-container.private .toggle-container { background-color: #fb0019 } .lock-switch-container.private .toggle-container .toggle-btn { left: 28px } .lock-switch-container.private.small-switch .toggle-container .toggle-btn { left: 23px } .modal-result .lock-switch-container .lock-switch-tooltip { max-width: 220px } .lock-switch-container .lock-switch-tooltip { max-width: 200px; width: 100%; padding: .5rem; color: #fff; background-color: #4b4b4b; font-size: 1.6rem; font-family: RobotoMedium; text-align: center; border-radius: 5px; visibility: hidden; position: absolute; -webkit-transform: translate(8%, -110%); transform: translate(8%, -110%); opacity: 0; z-index: 1; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; -webkit-transition-delay: .5s; transition-delay: .5s } .lock-switch-container:hover .lock-switch-tooltip { visibility: visible; opacity: 1 } .lock-switch-container:hover .lock-switch-tooltip:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: #4b4b4b; bottom: -4px; left: 0; right: 0; margin: auto; -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); border-radius: 3px } .lock-switch-container .public-container, .lock-switch-container .private-container { font-size: 1.6rem } .lock-switch-container .public-container i, .lock-switch-container .private-container i { margin: 0 1rem 0 0; position: relative; top: 2px } .lock-switch-container .public-container i:before, .lock-switch-container .private-container i:before { font-size: 1.6rem; line-height: 1.6rem } .lock-switch-container .public-container { color: #000 } .lock-switch-container .private-container { color: #fb0019 } .lock-switch-container .toggle-container { display: inline-block; width: 48px; height: 24px; border-radius: 24px; padding: 4px 0; position: relative; margin: 0 15px; vertical-align: middle; cursor: pointer } .lock-switch-container .toggle-container .toggle-btn { display: block; width: 16px; height: 16px; border-radius: 16px; background-color: #fff; position: absolute; left: 4px; -webkit-transition: all .1s ease-out; transition: all .1s ease-out } .modal-result .lock-switch-container .public-container i:before, .modal-result .lock-switch-container .private-container i:before { font-size: 2rem; line-height: 21px } .card-footer-lock-modal-btn-container { display: none } .card-footer-lock-modal-btn-container.block-element { display: block } .card-footer-lock-modal-btn-container.block-element .switch-container { display: none } @media screen and (max-width: 991px) { .modal-result .lock-switch-container .public-container i:before, .modal-result .lock-switch-container .private-container i:before { font-size: 1.6rem; line-height: 16px } .lock-switch-container { margin: 2rem 0 0 } .lock-switch-container.public.lock-modal-btn .private-container { opacity: .5 } .lock-switch-container.private.lock-modal-btn .public-container { opacity: .5 } .lock-switch-container.lock-modal-btn { float: none; display: block; margin: 0 0 1.3rem } .lock-switch-container.lock-modal-btn .toggle-container { display: none } .lock-switch-container.lock-modal-btn .public-container { margin: 0 1rem 0 0 } .lock-switch-container.lock-modal-btn .public-container, .lock-switch-container.lock-modal-btn .private-container { text-align: center; display: inline-block } .lock-switch-container.lock-modal-btn .public-container i, .lock-switch-container.lock-modal-btn .private-container i { display: block } .lock-switch-container.lock-modal-btn .public-container span, .lock-switch-container.lock-modal-btn .private-container span { font-size: 1.4rem } .lock-switch-container.public.small-switch, .lock-switch-container.private.small-switch { display: inline-block; float: initial } .card-footer-lock-modal-btn-container { display: block } .card-footer-lock-modal-btn-container.block-element .switch-container { display: block } } @media screen and (max-width: 390px) { .lock-switch-container.public.small-switch .public-container i, .lock-switch-container.public.small-switch .private-container i { margin: 0 } .owl-carousel .lock-switch-container.public.small-switch .toggle-container, .owl-carousel .lock-switch-container.private.small-switch .toggle-container, .photo-card .lock-switch-container.public.small-switch .toggle-container, .photo-card .lock-switch-container.private.small-switch .toggle-container, .swiper .swiper-wrapper .swiper-slide .swiper-slide__footer .lock-switch-container.public.small-switch .toggle-container, .swiper .swiper-wrapper .swiper-slide .swiper-slide__footer .lock-switch-container.private.small-switch .toggle-container { width: 40px; height: 20px; margin: 0 } .lock-switch-container.public.small-switch .toggle-container, .lock-switch-container.private.small-switch .toggle-container { margin: 0 1px; } }