body {
  font-family: 'Montserrat', sans-serif!important;
  background-color: #FFFFFF;
}
a {color: #009ff2; text-decoration: none;}
a:hover {color: #347538!important; text-decoration: none;}
p a:hover{color:#51BC58!important;}
a.link-danger {color: #E9473F !important;}
a.link-danger:hover {color: #E21D1D !important;}

.radius-def {border-radius: 10px !important; -moz-border-radius: 10px !important; -webkit-border-radius: 10px !important;}
.radius-btn {border-radius: 25px !important; -moz-border-radius: 25px !important; -webkit-border-radius: 25px !important;}

#loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9998; display: none;}
#loading div.loader {position: relative; width: 200px; top: 200px; left: 50%; margin-left: -100px;}

div.loading {display: none; width: 100%; padding: 5px; margin: 0 auto; text-align: center; border: solid 2px #CCCCCC; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: white; color: black;}
div.loading div.progress_bar {margin-top: 3px;}
div.loading div.progress_bar div.bar_container {width: 100%; height: 8px; padding: 1px; margin-top: 6px;}
div.loading div.progress_bar div.bar_container div.bar {background-color: #CCCCCC; height: 8px; width: 10%;}
div.loading div.progress_bar span.percent {color: #CCCCCC;}

.invisible {margin-bottom: -20px !important;}

/*BACKGROUNDS COLORS*/
.bg-primary {background-color: #12b3e4 !important;}
.bg-gray {background-color: #E0E0E0 !important;}
.bg-gray-2 {background-color: #F7F7F7 !important;}
.bg-danger {background-color: #E9473F !important;}
.bg-success {background-color: #51BC58 !important;}
.bg-blue-1 {background-color: #054860 !important;}
.bg-blue-2 {background-color: #1A7695 !important;}

/*BORDERS-COLORS*/
.border-primary {border-color: #12b3e4 !important;}
.border-success {border-color: #51BC58 !important;}
.border-gray {border-color: #D9D9D9 !important;}

/*BOXES*/
.main-box {padding: 15px; margin: auto;}
.main-box-gray {background-color: #F7F7F7; border: 2px solid #D9D9D9 !important;}
.main-box-selected {border: 2px solid #12b3e4 !important; color: #12b3e4 !important;}
.square-box {position: relative; width: 100%}
.square-box:after {content: ""; display: block; padding-bottom: 100%;}
.square-box .content {position: absolute; width: 100%; height: 100%; text-align: center; padding-top: 10%; font-size: 0.6rem;}
.square-box .content i {font-size: 2rem;}
.box-agg-profilo {font-size: 0.6rem;}
.box-agg-profilo i {font-size: 2rem;}
@media (min-width: 500px) {
  .square-box .content, .box-agg-profilo {font-size: 1rem;}
  .square-box .content i, .box-agg-profilo i {font-size: 3rem;}
}
@media (min-width: 900px) {
  .square-box .content {font-size: 1.2rem;}
}

/*BUTTONS*/
.btn-primary {background-color: #12b3e4 !important; border: 1px solid #12b3e4 !important;}
.btn-primary:hover {color: white !important; background-color: #10A6D1 !important; border: 1px solid #10A6D1 !important;}
.btn-warning {background-color: #FDC745 !important; border: 1px solid #FDC745 !important;}
.btn-warning:hover {background-color: #FDBE2B !important; border: 1px solid #FDBE2B !important;}
.btn-danger {background-color: #E9473F !important; border: 1px solid #E9473F !important;}
.btn-danger:hover {background-color: #E21D1D !important; border: 1px solid #E21D1D !important;}
.btn-success {background-color: #51BC58 !important; border: 1px solid #51BC58 !important;}
.btn-success:hover {color: #FEFEFE !important; background-color: #40A847 !important; border: 1px solid #40A847 !important;}
.btn-light {color: #00B0E3 !important; border: 1px solid #CED4DA !important; background-color: white !important;}
.btn-light:hover {color: #10A6D1 !important;}
.btn-dark:hover {color: white !important;}
button.adv-search {font-size: 0.65rem; line-height: 12px;}
button.adv-search > img {width: 25px; height: 25px; float: left; margin-right: 5px;}
button.custom-close {font-size: 1.2rem; padding: 0rem 0.35rem 0rem 0.35rem !important; line-height: 1.5 !important;}
a.dashboard-button {display: inline-block; width: 65px; height: 65px; /*line-height: 100px;*/ font-size: 0.8rem;}
@media (min-width: 1020px) {
  a.dashboard-button {width: 105px; height: 105px;}
}
a.dashboard-button-mobile {display: inline-block; width: 65px; height: 65px; /*line-height: 100px;*/ font-size: 0.6rem;}
@media (min-width: 576px) {
  a.dashboard-button-mobile {width: 100px; height: 100px; font-size: 0.8rem;}
}
a.dashboard-button:hover, a.dashboard-button-mobile:hover {border: 2px solid #12b3e4 !important; color: #12b3e4;}
a.dashboard-button-profile {display: inline-block; width: 100px; height: 100px; /*line-height: 100px;*/ font-size: 0.7rem;}
a.dashboard-button-profile:hover {border: 2px solid #12b3e4 !important; color: #12b3e4;}
a.post-button {display: inline-block; /*line-height: 100px;*/ font-size: 0.8rem;}
.centered {vertical-align: middle; display: inline-block;}
.centerer {display: inline-block; height: 100%; vertical-align: middle;}
.avatar-edit-btn {top: 6px; right: -13px; font-size: 0.4rem; padding: 0.5rem;}
.header-edit-btn {top: 44px; right: 21px; font-size: 0.8rem;}
.btn-chk-funct {color: #F7F7F7 !important}
a.bg-primary.hover-white:hover {color: white !important; background-color: #1B9FCB !important;}
.btn-circle-48 {width: 30px; height: 30px;}
.btn-circle-65 {width: 40px !important; height: 40px !important;}
.btn-circle-65_border {width: 46px !important; height: 46px !important; padding-top: 1px; border: solid 2px #22B4E2;}
.btn-circle-65-mobile {width: 40px !important; height: 40px !important;}
.btn-circle-65_border-mobile {width: 46px !important; height: 46px !important; padding-top: 1px; border: solid 2px #22B4E2;}
.btn-circle-150 {width: 65px; height: 65px;}
.border-color-primary {border: solid 2px #22B4E2;}
@media (min-width: 500px) {
  .btn-circle-48 {width: 48px; height: 48px;}
  .btn-circle-65-mobile {width: 65px !important; height: 65px !important;}
  .btn-circle-65_border-mobile {width: 73px !important; height: 73px !important; padding-top: 2px;}
}
@media (min-width: 1200px) {
  .btn-circle-65 {width: 65px !important; height: 65px !important;}
  .btn-circle-65_border {width: 73px !important; height: 73px !important; padding-top: 2px;}
  .btn-circle-150 {width: 150px; height: 150px;}
  .avatar-edit-btn {top: 31px; right: -26px; font-size: 0.8rem; padding: 1rem;}
  a.dashboard-button-profile {width: 160px; height: 160px; font-size: 0.9rem;}
}

/*CHAT*/
#message_text {resize: none;}
#message_text:focus {outline: none;}
div.message-box-right {border-radius: 20px 0px 20px 20px !important; -moz-border-radius: 20px 0px 20px 20px !important; -webkit-border-radius: 20px 0px 20px 20px !important;}
div.message-box-left {border-radius: 0px 20px 20px 20px !important; -moz-border-radius: 0px 20px 20px 20px !important; -webkit-border-radius: 0px 20px 20px 20px !important;}
div.chat-footer {height: 70px; border-radius: 0px 0px 10px 10px !important; -moz-border-radius: 0px 0px 10px 10px !important; -webkit-border-radius: 0px 0px 10px 10px !important;}
/*div.chat-footer div.row {border-radius: 0px 0px 10px 10px !important; -moz-border-radius: 0px 0px 10px 10px !important; -webkit-border-radius: 0px 0px 10px 10px !important;}*/

/*CURSORS*/
.cursor-pointer {cursor: pointer;}

/*FOLLOW*/
.card-follow .card-footer {background-color: #12b3e4 !important; cursor: pointer; border-bottom-right-radius: 25px !important; -moz-border-bottom-right-radius: 25px !important; -webkit-border-bottom-right-radius: 25px !important; border-bottom-left-radius: 25px !important; -moz-border-bottom-left-radius: 25px !important; -webkit-border-bottom-left-radius: 25px !important;}
.card-follow .card-body span {right: 15px; top: 15px; height: 23px; width: 23px; line-height: 16px; cursor: pointer;}
.card-follow .card-footer-premium {background-color: #51BC58 !important; cursor: pointer; border-bottom-right-radius: 10px !important; -moz-border-bottom-right-radius: 10px !important; -webkit-border-bottom-right-radius: 10px !important; border-bottom-left-radius: 10px !important; -moz-border-bottom-left-radius: 10px !important; -webkit-border-bottom-left-radius: 10px !important;}

/*FORM*/
.login_container {max-width: 400px; padding: 0; margin: auto;}
.form-signin {position:relative; width: 100%; }
@media screen and (max-width: 420px) {
  .login_container {padding-right: 10px !important; padding-left: 10px !important;}
}
.form-signin p {font-size: 13px;}
.form-label {color: #414141;}

.input-file-icon > i {font-size: 2.3rem; color: #CACACA;}
.alert-form {display: none; background-color: #bf322f; color: white; padding: 0.25rem 0.5rem; margin: 0.5rem 0; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.ok-form {display: none; font-weight: normal; background-color: #006929; color: white; padding:  0.25rem 0.5rem; margin: 0.5rem 0; text-align: center; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.alert-form a, .ok-form a {color: white; font-weight: bold; text-decoration: underline;}
div.custom-control.custom-radio {line-height: 17pt;}
div.custom-control.custom-checkbox {font-size: 1rem;}
.form-control-grey {background-color: #F0F0F0;}
.form-label {color: #12B3E4;}
.custom-file-label {overflow: hidden;}
.progress-flex {display: none;}
.progress {height: 8px;}
.progress-perc {color: #CACACA;}

.item-skill {display: inline-block; font-size: 0.8rem; color: #7A7A7A;}
.item-skill .badge a {color: white !important;}

.custom-file-input {height: 39px;}
.custom-file-input::-webkit-file-upload-button, .custom-file-input::file-selector-button {display: none;}

/*HEADER*/
a.hamburger {color: black; font-weight: bold; font-size: 1.3rem;}
span.header-user-logo {display: inline-block; width: 30px; height: 30px; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.dropdown-toggle::after {vertical-align: 0.7em !important;}
.navbar-nav {width: 100%}
a.nav-link {line-height: 15px; font-size: 1.3rem;}
a.nav-link span {font-size: 0.6rem;}
.landpage a.nav-link {font-size: 0.8rem;}

/*HOME*/
.center-mobile {text-align: center;}
@media screen and (min-width: 768px) {
  .center-mobile {text-align: left;}
}
/*LANDPAGE*/
.home-title-1 {font-size: 3rem; font-weight: 900; letter-spacing: 2px;}
.home-title-2 {font-size: 2.5rem; font-weight: 900; letter-spacing: 1.5px;}
.home-title-3 {font-size: 1.5rem; font-weight: 900; letter-spacing: 1.5px;}
.home-text-1 {font-size: 1.5rem; letter-spacing: 1.5px;}
.home-text-2 {font-size: 1rem; letter-spacing: 1.5px; font-weight: 200;}
.landing-image {width: 100%; max-width: 500px; height: auto;}

/*LOGIN LAYOUT*/
img.rot1 {width: 120px; height: auto;}
img.rot2 {width: 110px; height: auto;}
img.rot3 {width: 80px; height: auto;}
img.rot4 {width: 80px; height: auto;}
.abs-rot1 {position: absolute; top: 57px; right: -120px;}
.abs-rot2 {position: absolute; top: 150px; left: -110px;}
.abs-rot3 {position: absolute; bottom: 200px; right: -80px;}
.abs-rot4 {position: absolute; bottom: 157px; left: -80px;}

/*IMAGES*/
.img-25 {width: 25px; height: auto;}
.img-40 {width: 40px; height: auto;}
.img-50 {width: 50px; height: auto;}
.img-100 {width: 100px; height: auto;}
.img-150 {width: 150px; height: auto;}
.img-200 {width: 200px; height: auto;}
.img-280 {width: 100%; max-width: 280px; height: auto;}
.img-full {width: 100%; height: auto;}
.sponsor {width: 100%; height: auto;}

/*MODALS*/
.modal-content {background-color: #F6F6F6;}
.modal-header {border: 0; font-weight: 500; color: #12B3E4;}
.modal-title {line-height: 1;}

/*POSTS*/
div.post-image {position: relative; width: 100%; height: 400px; margin: 0 auto; background-color: transparent; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-bottom-right-radius: 10px !important; -moz-border-bottom-right-radius: 10px !important; -webkit-border-bottom-right-radius: 10px !important; border-bottom-left-radius: 10px !important; -moz-border-bottom-left-radius: 10px !important; -webkit-border-bottom-left-radius: 10px !important;}
a.post-button {display: inline-block; /*line-height: 100px;*/ font-size: 0.8rem;}
a.post-button-img {position: absolute; display: block; bottom: 30px; right: 40px; width: 65px; height: 65px; font-size: 0.8rem;}
.video-js {width: 100%; height: auto;}

/*SEARCH*/
div.search-result-box:hover {background-color: #E8F9FF; cursor: pointer;}
div.search-result-box-active {background-color: #E8F9FF;}
div.search-result-box:first-child {border-radius: 10px 10px 0px 0px !important; -moz-border-radius: 10px 10px 0px 0px !important; -webkit-border-radius: 10px 10px 0px 0px !important;}
div.search-result-box:last-child {border-radius: 0px 0px 10px 10px !important; -moz-border-radius: 0px 0px 10px 10px !important; -webkit-border-radius: 0px 0px 10px 10px !important;}
div.filter_active a {font-size: 0.8rem;}
p.title-filter {color: #12B3E4;}
div.small-input-group input {font-size: 0.7rem;}
.msg-filters {background-color: #CDF5FD; border-color: #B7DCE2;}
.msg-no-result {background-color: #FECFD0; border-color: #EEC7CA;}
.card-search {border-bottom-right-radius: 25px !important; -moz-border-bottom-right-radius: 25px !important; -webkit-border-bottom-right-radius: 25px !important; border-bottom-left-radius: 25px !important; -moz-border-bottom-left-radius: 25px !important; -webkit-border-bottom-left-radius: 25px !important;}
.card-search p.card-text-small {font-size: 0.7rem;}

/*STICKY*/
.sticky-top {align-self: flex-start; top: 90px;}

/*TEXT*/
.text-blu {color: #12B3E4;}
.text-gray {color: #C5C5C5;}
.text-green {color: #51BC58;}
.text-success {color: #51BC58 !important;}
.text-help {font-size: 0.8rem; color: gray;}
.text-red {color: #E9473F;}
.text-small-def {font-size: 0.8rem;}
.title-section {font-size: 1.2rem; font-weight: 500;}
.title-sub-section {font-size: 1.2rem; font-weight: 500;}
.title-questions {font-size: 1.0rem; font-weight: 500; color: #414141;}
.text-truncate-line-4 {display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal;}
.text-size-2 {font-size: 1.2rem;}

/*USERS*/
.verified {display: inline-block; width: 20px; height: 20px; background-color: #12b3e4; border-radius: 80% 0px 0px 0px;}
div.user-logo {width: 65px; height: 65px; margin: 0 auto; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
@media (min-width: 1020px) {
  div.user-logo {width: 150px; height: 150px;}
}
div.user-logo-small {width: 65px; height: 65px;}
div.user-logo-post {margin: 0 auto; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
p.user-name {font-size: 0.6rem;}
@media (min-width: 500px) {
  p.user-name {font-size: 0.8rem;}
  .square-box .content > p.user-name {font-size: 1rem;}
}
@media (min-width: 900px) {
  .square-box .content > p.user-name {font-size: 1.2rem;}
}
p.user-info-box {font-size: 0.8rem;}
div.user-header {width: 100%; height: 250px; background-color: transparent; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
div.user-header-noimg {width: 100%; height: 250px; background-color: #F7F7F7; background-repeat: no-repeat; background-position: center center; -webkit-background-size: 100px 100px; -moz-background-size:  100px 100px; -o-background-size:  100px 100px; background-size:  100px 100px;}
div.user-header-logo {position: absolute; bottom: 0px; left: 0px; margin: 0 auto; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
div.user-header-logo-mobile {position: absolute; bottom: 15px; left: 15px; margin: 0 auto; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
div.user-header-logo-edit {position: absolute; bottom: -33px; left: 20px; margin: 0 auto; background-color: white; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
@media (min-width: 1200px) {
  div.user-header-logo {bottom: 20px; left: 17px;}
  div.user-header-logo-edit {bottom: -75px; left: 25px;}
}

/*UTILITIES*/
.relative {position: relative;}