/******************* * Reset style * ***************** */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,800;0,900;1,800&display=swap'); html, body { height: 100%; } li { list-style:none; } input, button, textarea { outline: none; border: none; } select, button:focus, button:active, input, .page-link:focus { outline: none; box-shadow: none !important; } textarea { resize: none; box-shadow: none !important; } .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, .btn.focus, .btn:focus { box-shadow: none !important; } a { outline: none; } body { font-family: 'Barlow', Helvetica, Arial, sans-serif; color: #5f5f5f; } h1, h2, h3, h4, h5, h6 { font-weight: 800 !important;; } .navbar-absolute { position: absolute; z-index: 1010; width: 100%; } iframe { border: 0; outline: 0; width: 100% !important; } [type='search'] { outline-offset: -2px; -webkit-appearance: none; } .btn:hover:not(.e-none) { transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08); } input[type='file'] { opacity:0; position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; outline: none; cursor: inherit; font-size: 100px; } /* Carousel base class */ .carousel { margin-bottom: 4rem; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { bottom: 7rem; z-index: 10; } /* Declare heights because of positioning of img element */ .carousel-item { height: 38rem; background-color: #777; } .carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 32rem; } @media (min-width: 40em) { /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; } } .card { border: 1px solid rgba(111, 111, 111, 0.125); } .noscroll { overflow-x: hidden; overflow-y: hidden; } .progress-xs { height: 8px; } /** NEW **/ .lh-inherit { line-height: inherit !important; } input[type='file'] { opacity: 0; position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; outline: none; cursor: inherit; font-size: 100px; } .text-featured { color: #ffc107 !important; } .popout { cursor: pointer; display: none; padding: 14px 10px; background: #000; color: rgb(255, 255, 255); font-size: 16px; position: fixed; z-index: 1100; overflow: hidden; width: 100%; text-align: center; left: 0; top: 0; } .popout-error { background: #f00 !important; } .fa-spin { -webkit-animation: fa-spin 1s infinite linear !important; animation: fa-spin 1s infinite linear !important; } .wrap-full-image { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000000; /*background: #2C2C2C;*/ width: 100%; height: 100%; text-align: center; display: none; padding: 10px 20px 20px 20px; overflow: auto; } img.imageFull { -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8); -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.8); cursor: zoom-in; margin: 0 auto; position: relative; } .details-full-image { padding: 10px 0; color: #FFF; text-align: right; margin-bottom: 30px; font-size: 25px; } .icon-close { font-size: 40px; line-height: 17px; width: 1.25rem; height: 1.25rem; transition: all .15s ease; color: #FFF; border-radius: 50%; background-color: transparent; cursor: pointer; position: relative; } .viewFull { cursor: zoom-in; } .container-image { left: 0; position: fixed; width: 100%; height: 100%; top: 0; background: #252525a6; } .content-locked { background: #ececec; } .showBanner { position: fixed; z-index: 9999; background: rgba(0, 0, 0, 0.9); color: #FFF; bottom: 0; padding: 10px; } .icon-equis { font-size: 25px; line-height: normal; width: 1.25rem; height: 1.25rem; transition: all .15s ease; border-radius: 50%; background-color: transparent; vertical-align: middle; margin-right: 5px; } .readmore-js-collapsed:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: hsla(0,0%,100%,0); background-image: linear-gradient(hsla(0,0%,100%,0),#fff 95%); z-index: 40; } .text-word-break { word-break: break-word; } .counterLike { font-size: 14px; } .post-options { font-size: 7px; margin-top: 15px; } .actionDelete { cursor: pointer;; } a.active > i.fas.fa-heart { color: #F00; } .li-group { border-top: 1px solid rgba(0, 0, 0, .05); } .notify { z-index: 10; top: 0; right: 0; position:absolute; padding: 3px 8px; background: #F00; color: #FFF; line-height: normal; font-weight: bold; border-radius: 100px; -webkit-border-radius: 100px; border-bottom: 1px solid #DADADA; font-size: 11px; } #noti_notifications, #noti_msg { display: none; } .c-pointer { cursor: pointer !important; } .animated-ellipsis-container { display: inline-block; height: 16px; width: 16px; transform: translateZ(0); } .animated-ellipsis { animation: ellipsis 1s infinite; display: inline-block; overflow: hidden; vertical-align: bottom; } @keyframes ellipsis { 0% { width:2px } to { width:16px } } .cover-user:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(5,5,5,.4); left: 0; top: 0; } .video-responsive { position: relative; height: 0; overflow: hidden; } .video-responsive iframe, .video-responsive object, .video-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .readmore-js-toggle { text-align: center; } .verify-notice { display: block; padding: 14px 10px; background: #F00; color: rgb(255, 255, 255); font-size: 16px; z-index: 1100; overflow: hidden; width: 100%; text-align: center; left: 0; bottom: 0; } .verified { color: #3897f0; } .border-dashed { border-style: dashed !important; } .video-js { width: 100%; } .StripeElement { box-sizing: border-box; height: calc(2.75rem + 2px); padding: 14px 18px; background-color: white; transition: box-shadow .15s ease; border: 1px solid #ced4da; margin-bottom: 10px; border-radius: .25rem; } .StripeElement--focus { border-color: #3c8dbc; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; } .avatar-modal { border: 3px solid #FFF; background-color: #FFF; } .modal-offset { margin-top: -90px; } .display-none { display: none; } .display-block { display: block; } .blocked { position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); z-index: 300; } .blocked span { display: flex; justify-content: center; align-items: center; } .button-search { color: #DDD; background: none; position: absolute; right: 0; cursor: pointer; outline: none; border: none; } button:hover.button-search, button:focus.button-search, button:active.button-search { box-shadow: none !important; background: none !important; color: inherit !important; transform: none } .input-search { border-radius: 60px; padding: 12px 20px !important; height: 40px !important; } .carousel-cover:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(5,5,5,.2); left: 0; top: 0; } .dropdown-toggle::after { margin-left: 0.1em; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .dropdown-toggle[aria-expanded="true"]:after { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .p-nav a.nav-link:not(.btn) { color: #FFF; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .nav-link:hover:not(.search):not(.btn):not(.link-nav), .nav-link:active:not(.search):not(.btn):not(.link-nav), .nav-link:focus:not(.search):not(.btn):not(.link-nav) { color: #FFF; } .link-scroll a.nav-link:not(.btn) { color: #3a3a3a; } .link-scroll a.nav-link:hover:not(.search):not(.btn), .link-scroll a.nav-link:active:not(.search):not(.btn), .link-scroll a.nav-link:focus:not(.search):not(.btn) { color: #969696; } .nav-link.search:hover, .nav-link.search:active, .nav-link.search:focus { color: white; } .dropdown-menu { padding-top: 0.5rem; padding-bottom: 0.5rem; border: 0; box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.15); border-radius: 0.125rem; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; -ms-transition: all 150ms linear; transition: all 150ms linear; font-size: 13px; line-height:18px; } .dd-menu:before { display: inline-block; position: absolute; width: 0; height: 0; vertical-align: middle; content: ""; top: -5px; left: 10px; right: auto; color: #FFFFFF; border-bottom: .4em solid; border-right: .4em solid transparent; border-left: .4em solid transparent; } .dd-menu-user:before { display: inline-block; position: absolute; width: 0; height: 0; vertical-align: middle; content: ""; top: -5px; right: 10px; left: auto; color: #FFFFFF; border-bottom: .4em solid; border-right: .4em solid transparent; border-left: .4em solid transparent; } .dropdown .dropdown-menu { -webkit-transform: translate3d(0, -25px, 0); -moz-transform: translate3d(0, -25px, 0); -o-transform: translate3d(0, -25px, 0); -ms-transform: translate3d(0, -25px, 0); transform: translate3d(0, -25px, 0); visibility: hidden; opacity: 0; filter: alpha(opacity=0); display: block; } .dropdown.show .dropdown-menu, .dropdown-menu.open { opacity: 1; filter: alpha(opacity=100); visibility: visible; -webkit-transform: translate3d(0, 0px, 0); -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); } .dropdown.show .dropdown-menu { -webkit-transform: translate3d(0, 7px, 0); -moz-transform: translate3d(0, 7px, 0); -o-transform: translate3d(0, 7px, 0); -ms-transform: translate3d(0, 7px, 0); transform: translate3d(0, 7px, 0); } .dropdown-toggle::after { margin-left: 0.1em; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .dropdown-toggle[aria-expanded="true"]:after { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .dropdown-toggle::after, .dropup .dropdown-toggle::after { font-weight: 400; font-style: normal; font-family: "Font Awesome 5 Free"; font-weight: 900; border: none; content: "\f107"; font-size: 14px; top: 50%; right: 24px; margin-top: -5px; vertical-align: baseline; } .text-shadow-trans { text-shadow: 0 1px 4px #333333b3; } .navbar .nav-item { margin-left: 2px; margin-right: 2px; } .sidebar-overlay .navbar .navbar-collapse { z-index: 100; } @media (min-width: 768px) { .py-large {padding-top:6rem!important;} .py-large {padding-bottom: 6rem!important;} } /*** max-width 991 ***/ @media (max-width: 991px) { .navbar .navbar-collapse { position: fixed; right: -100%; width: 100%; top: 0; height: 100%; background: #FFF; z-index: 999999; overflow-y: scroll; -webkit-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; padding: 15px; } .navbar .navbar-collapse .close-menu { color: #000; padding: 2px 4px; background: transparent; display: inline-block; cursor: pointer; font-size: 25px; text-align: center; font-weight: 100; text-decoration: none; } .dd-menu:before, .dd-menu-user:before {border: none;} .carousel-caption .display-4 {font-size: 3.1rem;} .item h5 {line-height: 1.2 !important;} .social-links {text-align: center !important;margin-top: 10px;} .list-social {float: none !important;} .copyright {text-align: center;} .btn-create {margin-top: 10px;} .navbar .navbar-collapse.show {right: 0;} .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:not(.btn) {color: #000000;} .input-search {border: 1px solid #c1c1c1 !important;} .navbar .navbar-nav .nav-item {display: block;width: 100%;margin-right: 0;margin-bottom: .25rem;} .navbar .navbar-nav .nav-item .nav-link {display: block;padding: .625rem;} .dropdown .dropdown-menu {display: none;} .dropdown.show .dropdown-menu, .dropdown-menu.open {display: block;box-shadow: none;} .home, .homepage {padding-bottom: 50px !important;} .homepage {padding-top: 100px !important;} .img-post {height: 250px !important;} .btn-w { width: 100%; } .btn-w-mb { width: 100%; margin-bottom: 10px; } .first{ order: 1;} .second{order: 2;} .link-border {float:none !important;} .btn-profile { margin-bottom: .5rem!important; } .btn-profile, .w-small-100 { width: 100%; } .d-flex-user { display: inherit !important; } .navbar-collapse .navbar-toggler { position: relative; display: inline-block; width: 20px; height: 20px; padding: 0; cursor: pointer; } .navbar-collapse .navbar-toggler span { position: absolute; display: block; width: 100%; height: 2px; opacity: 1; border-radius: 2px; background: #283448; } .navbar-collapse .navbar-toggler :nth-child(1) { transform: rotate(135deg); } .navbar-collapse .navbar-toggler :nth-child(2) { transform: rotate(-135deg); } .section-sm {padding-bottom: 48px !important;} .avatar-chat {width: 25px; height: 25px;} .loading-name {width: 60% !important;} .loading-time {width: 40% !important;} } /* End 991px */ .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar .navbar-nav .nav-item .nav-link:not(.btn).active { background: rgba(0, 0, 0, 0.2); border-radius: 50px; } .dropdown-item:focus, .dropdown-item:hover { color: white; background-color: #007bff; } [class^="ribbon-"] { position: absolute; margin-bottom: 80px; } [class^="ribbon-"]:before, [class^="ribbon-"]:after { content: ""; position: absolute; } .ribbon-1 { width: 30px; height: 40px; background: #ff9800; top: -6px; left: 25px; } .ribbon-1:before { height: 0; width: 0; border-bottom: 6px solid #d07e05; border-right: 6px solid transparent; right: -6px; } .ribbon-1:after { height: 0; width: 0; border-left: 15px solid #ff9800; border-right: 15px solid #ff9800; border-bottom: 10px solid transparent; bottom: -10px; } .ribbon-1 i { position: absolute; top: 40%; left: 30%; color: #FFF; } .item > a::after { content: ""; display: block; background: rgba(0,0,0,.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .item h5 { line-height: 3.0; text-align: center; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -30px; color: #fff; z-index: 5; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: transparent !important; transform: scale(.9); } .owl-theme .owl-dots .owl-dot span { display: inline-block; width: .9375rem; height: .9375rem; box-sizing: border-box; border: 3px solid transparent; border-radius: 50%; transform: scale(.6); transition: all .3s ease-in-out; opacity: .7; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .bg-dark-2 { background-color: #1b1b1b; } .bg-dark-3 { background-color: #212121; } .link-footer, .ico-social { color: #999; } .btn-main:hover i { -webkit-transform: translateX(6px); transform: translateX(6px); } .btn-main i { -webkit-transform: translateX(0); transform: translateX(0); transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease,-webkit-transform .3s ease; } .btn { padding: .625rem 1.25rem; } .btn-sm, .btn-group-sm > .btn { font-size: .875rem; line-height: 1.5; padding: .25rem .5rem; border-radius: .25rem; } .jumbotron-cover:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(5,5,5,.3); left: 0; top: 0; } .custom-select { background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23a5a5a5' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px } main>div.section:nth-child(odd){ background-color:white; } main>div.section:nth-child(even){ background-color:#fbfafd!important; } .fixed-top { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .home { padding: 150px 0; } .homepage { padding: 180px 0; } .p-nav { padding: 1rem; } .p-nav-scroll { padding: .7rem !important; } .jumbotron { border-radius: 0 !important; } .img-user { width: auto !important; border-radius: 50%; margin: 0 auto; border: 5px solid #FFF; } .ico-social { font-size: 20px; } a:hover.link-border { text-decoration: none; } a.link-border { border-bottom: 1px solid; } .card-cover { border-top-left-radius: .25rem; border-top-right-radius: .25rem; height: 125px; padding: 1rem; } .card-avatar { left: 50%; margin-left: -45px; position: absolute; top: 80px; background-color: #FFF; border-radius: 50%; } .section-sm { padding: 78px 0; } .facebook-btn { color: #3e5c9b !important; } .twitter-btn { color: #1da1f2 !important; } .alert-success { background-color: #00a65a; border-color: #00a65a; color: #FFF; } .alert-danger { color: #FFF; background-color: #FF0000; border-color: #FF012A; } .alert-primary { color: #fff; border-color: #7889e8; background-color: #7889e8; } .alert-warning { color: #1f2d3d; background: #ffc107; border-color: #edb100; } .alert-dismissible .close { color: #FFF; text-shadow: none; } .close { float: right; font-size: 15px; font-weight: 700; line-height: 1.5; color: #fff; text-shadow: none; opacity: .9; } .page-link:hover { color: #FFF; } .page-link { border-radius: 35px !important; border: none; margin-right: 2px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; height: 35px; min-width: 35px; text-align: center; } .nav-scroller { position: relative; z-index: 2; height: 3.5rem; overflow-y: hidden; } .nav-scroller .nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-bottom: 1rem; margin-top: -1px; overflow-x: auto; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; } .nav-scroller-2::before { content: ""; position: absolute; bottom: 0; left: 0; width: 2%; height: 100px; background-color: hsla(0,0%,100%,0); background-image: linear-gradient(90deg, white, transparent); z-index: 40; } .nav-scroller-2::after { content: ""; position: absolute; bottom: 0; right: 0; width: 2%; height: 100px; background-color: hsla(0,0%,100%,0); background-image: linear-gradient(-90deg, white, transparent); z-index: 40; } .btn-category { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .btn-category:hover, .active-category { border-color: #333 !important; } .input-group-text { font-size: 1rem; font-weight: 400; line-height: 1.5; display: flex; margin-bottom: 0; padding: .625rem .75rem; text-align: center; white-space: nowrap; color: #adb5bd; border: 1px solid #cad1d7; border-radius: .25rem; background-color: #fff; align-items: center; } .input-group-alternative .form-control, .input-group-alternative .input-group-text { border: 0; box-shadow: none; } .input-group-alternative { transition: box-shadow .15s ease; border: 0; box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); } .form-control { height: calc(2.75rem + 2px); padding: .625rem .75rem; } .custom-control-input:not(:disabled):focus~.custom-control-label::before { box-shadow: none; } .custom-checkbox .custom-control-input ~ .custom-control-label, .custom-control-label { font-size: .875rem; cursor: pointer; } .custom-control-label:not(.switch)::before { position: absolute; top: .125rem; left: -1.75rem; display: block; width: 1.25rem; height: 1.25rem; content: ''; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; background-color: #fff; box-shadow: none; } .custom-control-label::after { position: absolute; top: .125rem; left: -1.75rem; display: block; width: 1.25rem; height: 1.25rem; content: ''; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } .custom-control-label::before { box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02); } .input-group .form-control:not(:first-child) { padding-left: 0; border-left: 0; } .form-control:focus, .custom-select:focus { border-color: #ced4da !important; outline: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 0 rgba(50, 151, 211, .5); } .btn-facebook, .btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus { background: #3b579d; color: #ffffff; } .btn-google, .btn-google:hover, .btn-google:active, .btn-google:focus { background: #fff; border-color: #ccc; color: #333; } .shadow-custom { box-shadow: 0 5px 16px rgba(0,9,128,.05); } .btn-danger { color: #fff; border-color: #f5365c; background-color: #f5365c; } .nav-wrapper { padding: 1rem 0; border-top-left-radius: .25rem; border-top-right-radius: .25rem; } .nav-pills .nav-link { font-size: .875rem; font-weight: 500; padding: .75rem 1rem; transition: all .15s ease; color: #5e72e4; background-color: #fff; box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); } .nav-pills .nav-item:not(:last-child) { padding-right: 1rem; } .dropdown-item.balance:hover { background: #FFF !important; color: #212529; } .page-item.disabled .page-link { color: #9daebd; } .img-profile-user { margin-top: -100px !important; } .modal-danger .modal-content { color: #fff; background-color: #f5365c; } .modal-danger .modal-header, .modal-danger .modal-footer { border-color: rgba(255, 255, 255, .075); } .focused .form-control { border-color: rgba(50, 151, 211, .25); } .btn-white { color: #212529; border-color: #fff; background-color: #fff; box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); } .btn-white:hover { color: #212529; border-color: white; background-color: white; } .text-muted { color: #8898aa !important; } .btn-sm, .btn-group-sm > .btn { font-size: .875rem; line-height: 1.5; padding: .50rem 1.8rem; border-radius: .25rem; } .btnLike:hover { text-decoration: none !important; } .bg-success { background-color: #2dce89 !important; } .nav-profile { border-bottom: 3px solid rgba(159, 163, 177, 0.07); } .nav-profile a, .nav-profile li.active a:hover, .nav-profile li.active a:active, .nav-profile li.active a:focus { color: #333; } .nav-profile a:hover { text-decoration: none; } .sm-btn-size { color: #333; font-weight: bold; font-size: 17px !important; line-height: 15px; text-align: center; } .font-icon-lg { font-size: 120px; } .d-flex-user { display: flex; } .link-share { font-size: 16px; } @media (min-width: 576px) { .modal-sm { max-width: 380px; } } .pb-lg, .py-lg { padding-bottom: 6rem !important; } .pt-lg, .py-lg { padding-top: 6rem !important; } .ico-no-result { color: #c5c5c5; border: 3px solid #c5c5c5; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; font-size: 60px; width: 150px; height: 150px; display: block; line-height: 150px !important; margin: 0 auto; } .popout-success { background-color: #2dce89 !important; } .headerModalOverlay:before { content: ''; position: absolute; width: 100%; background: rgba(5,5,5,.4); left: 0; top: 0; display: block; bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; } .avatar-wrap { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; margin: 0 auto; background-color: #FFF; } .button-avatar-upload { color: #FFF; width: 100%; padding: 8px; background: rgba(0, 0, 0, 0.3); bottom: 0; } a:hover.button-avatar-upload { color: #FFF; background: rgba(0, 0, 0, 0.6); } .progress-upload { position: absolute; top: 0; background: rgba(0, 0, 0, 0.7); border-radius: 50%; width: 100%; height: 100%; z-index: 2; color: #FFF; line-height: 150px; display: none; } .btn-cover-upload { position: absolute; color: #FFF; padding: 8px 25px; background: rgba(0, 0, 0, 0.5); left: 10px; bottom: 10px; z-index: 100; } .btn-cover-upload:hover, .btn-cover-upload:disabled { color: #FFF; background: rgba(0, 0, 0, 0.8) !important; } .progress-upload-cover { position: absolute; bottom: 0; left: 0; height: 4px; background-color: #28a745; transition: width .6s ease; } .avatar-user-home { margin-top: -25px; border: 2px solid #FFF; background-color: #FFF; } .btn-upload { padding: 10px 12px; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .btn-upload:hover { background-color: #f3f3f3; } .share-btn-user { font-size: 18px; } .user-online::before { background: #4caf50; position: absolute; border: 3px solid #fff; display: block; bottom: -3px; right: 0; content: ""; border-radius: 50%; height: 30%; min-height: 30%; width: 30%; min-width: 30% } .user-offline::before { background: #adadad; position: absolute; border: 3px solid #fff; display: block; bottom: -3px; right: 0; content: ""; border-radius: 50%; height: 30%; min-height: 30%; width: 30%; min-width: 30% } .user-online-profile::before { background: #4caf50; position: absolute; border: 3px solid #fff; display: block; bottom: 10px; right: 15px; content: ""; border-radius: 50%; height: 12%; width: 12%; } .user-offline-profile::before { background: #adadad; position: absolute; border: 3px solid #fff; display: block; bottom: 10px; right: 15px; content: ""; border-radius: 50%; height: 12%; width: 12%; } .overflow-visible { overflow: visible !important; } .message { padding: 6px 14px 7px !important; border-radius: 25px !important; } .message.media-container { padding-left: 0 !important; padding-right: 0 !important; } .message.bg-primary > a { color: #FFF !important; text-decoration: underline !important; } .content::-webkit-scrollbar { display: none; } .d-scrollbars { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .input-new-msg { padding: 8px 34px !important; height: 40px !important; } .btn-new-msg { color: #DDD; background: none; position: absolute; outline: none; border: none; padding: 8px 0 8px 10px; left: 0; } .btn-cancel-msg { cursor: pointer; position: absolute; top: 4px; right: 0; } .rounded-bottom-left-0 { border-bottom-left-radius: 0 !important; } .rounded-bottom-right-0 { border-bottom-right-radius: 0 !important; } .btn-removeMsg { position: absolute; top: 20%; right: -18px; z-index: 3; } .container-media-img { background-position: center center; background-size: cover; max-width: 250px; max-height: 280px; width: 280px; height: 280px; border-radius: 6px; } .container-media-music { width: 100%; max-width: 400px; height: auto; border: 1px solid #DDD; border-radius: 6px; } .container-media-msg { width: 100%; max-width: 400px; max-height: 280px; height: 280px; } .img-user-small { width: auto !important; border-radius: 50%; margin: 0 auto; border: 3px solid #FFF; } .icon-notifications { font-size: 19px; color: #c3c3c3; } .table thead th { vertical-align: bottom; border: none; padding-right: 1.5rem; padding-left: 1.5rem; color: #afafaf; font-size: 14px; } .table td, .table th { padding: .75rem; vertical-align: top; border: none; padding-right: 1.5rem; padding-left: 1.5rem; font-size: 14px; } .error-page h1 { font-size: 10rem; line-height: 9rem; font-weight: 700; color: #ec2522; } .wrap-center { position:absolute; width:100%; top:50%; left:0; z-index:20; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .error-link { color: #ec2522; } .wrap-container { max-width: 450px; margin: 0 auto; } .wrap-container-lg { width: 650px; margin: 0 auto; } .font-tiny { font-size: 65% !important; } .item-loading::before { background-color: #f5f6f7; background-image: url('../img/loadpost.gif'); background-repeat: repeat-y; background-size: 100% 1px; content: ' '; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; border-radius: 50%; } .loading-avatar { width:60px; height:60px; display:block; background-color:#f5f6f7; border-radius: 50%; } .loading-name { width: 25%; height: 10px; display: block; background-color: #f5f6f7; } .loading-time { width: 15%; height: 10px; display: block; margin-top: 8px; background-color: #f5f6f7; } .loading-text-1 { width: 85%; height: 10px; display: block; margin-top: 8px; background-color: #f5f6f7; } .loading-text-2 { width: 75%; height: 10px; display: block; margin-top: 8px; background-color: #f5f6f7; } .loading-text-3 { width: 55%; height: 10px; display: block; margin-top: 8px; background-color: #f5f6f7; } /* Large toggl switches */ .custom-switch-lg .custom-control-label::before { left: -2.25rem; width: 3rem; border-radius: 1.5rem; } .custom-switch-lg .custom-control-label::after { top: calc(.25rem + 3px); left: calc(-2.25rem + 4px); width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 1.5rem; } .custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1.4rem); } .custom-switch-lg .custom-control-label::before { height: 1.5rem; } .custom-switch-lg .custom-control-label { padding-left: 1.5rem; line-height: 1.7rem; } .content-p img { max-width: 100% !important; height: auto !important; } .content-p li { list-style: inherit; } .content-p ol, .content-p ul { margin-top: 1rem; margin-bottom: 1rem; } .img-post { height: 430px; } .max-w-100 { max-width:100px; } .max-w-125 { max-width:125px; } .visibility-hidden { visibility: hidden; } .f-size-25 { font-size:25px; } .f-size-20 { font-size:20px; }